/* ==========================================================================
   BROKERS — alta de brokers, herramientas y acceso al sistema
   ==========================================================================

   Archivo AISLADO. No toca theme.css.
   Si algo sale mal, se borra este archivo y el sistema queda como estaba.

   Respeta ESTETICA.md:
     - El color señala, no decora
     - El botón de accion es NEGRO (var(--boton-fondo))
     - El terracota es un RIBETE, nunca un fondo
     - Los avisos son un lenguaje: ambar = se demora, rojo = se rechaza
   ========================================================================== */


/* --- La lista de brokers ------------------------------------------------- */

.broker-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  align-items: stretch;
}

.broker-card {
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  padding: 0.95rem 1.05rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Tarjeta con el color de identidad del broker de fondo */
.broker-card-color {
  border-width: 2px;
  border-style: solid;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
/* En las tarjetas de color, la cabecera apila en columna: el nombre y los
   datos ocupan todo el ancho arriba, y los botones van en su fila propia. */
.broker-card-color .broker-card-cab {
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
}
.broker-card-color .broker-acciones {
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Chips translúcidos sobre el fondo de color */
.broker-card-color .broker-chip {
  background: var(--broker-velo);
  border: 1px solid var(--broker-velo-borde);
  color: var(--broker-texto);
}
/* Botones de acción adaptados al fondo de color */
.broker-card-color .broker-btn-color {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--broker-velo);
  border: 1.5px solid var(--broker-velo-borde);
  color: var(--broker-texto);
}
.broker-card-color .broker-btn-color:hover { filter: brightness(1.1); }
.broker-card-color .broker-btn-borrar {
  border-color: #ffb4a8;
  color: #ffb4a8;
}
.broker-card-color .broker-propio {
  background: var(--broker-velo);
  color: var(--broker-texto);
  border: 1px solid var(--broker-velo-borde);
}
.brokers-panel .broker-card-color .broker-gerente {
  background: var(--broker-velo-fuerte);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--broker-texto);
}
.brokers-panel .broker-card-color .broker-gerente span,
.brokers-panel .broker-card-color .broker-gerente .icon-svg {
  color: var(--broker-texto);
}
/* Los chips de módulos siempre pegados abajo, para que todas las tarjetas
   se vean parejas aunque tengan distinto contenido arriba */
.broker-card .broker-chips { margin-top: auto; padding-top: 0.9rem; }

/* Un broker dado de baja: apagado, pero legible. No se esconde. */
.broker-card-baja {
  opacity: 0.72;
  border-color: var(--color-border-fuerte);
}

.broker-card-cab {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  min-width: 0;
}
.broker-card-cab > div:first-child { min-width: 0; }

.broker-card-cab h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.broker-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* CompareYa: el broker propio. Un ribete de terracota, no un fondo. */
.broker-propio {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
}


/* --- Los chips de herramientas ------------------------------------------ */
/* Muestran, de un vistazo, que tiene habilitado cada broker. */

.broker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.broker-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.24rem 0.65rem;
  border-radius: 20px;

  /* Apagado: el broker NO tiene esta herramienta */
  background: var(--color-surface-alt);
  color: var(--form-pill-texto-off);
  border: 1.5px solid var(--color-borde-tarjeta);
}

/* Encendido: la tiene. Se lee de lejos. */
.broker-chip-on {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-color: var(--color-primary);
}


/* --- El formulario ------------------------------------------------------- */

.broker-form {
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem;
  margin-top: 1.25rem;

  /* El ribete de terracota: la firma de CompareYa. 3px, no un fondo. */
  border-top: 3px solid var(--color-accent);
}

.broker-form h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.broker-form h4 {
  margin: 1.6rem 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  padding-bottom: 0.4rem;
  border-bottom: 1.5px solid var(--color-border);
}

.campo-ayuda {
  margin: 0 0 0.8rem;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}


/* --- Los campos --------------------------------------------------------- */
/* El bloque gris que envuelve cada campo (como en el asistente de ventas). */

.broker-form .campo {
  display: block;
  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.75rem;
}

.broker-form .campo > span {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.broker-form .campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

/* El foco va en el color de MARCA, no en terracota.
   Dice "acá estás escribiendo", no "acá hay un problema". */
.broker-form .campo input:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

.broker-form .campo small {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}


/* --- Los tildes de herramientas ----------------------------------------- */

.broker-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.broker-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;

  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}

/* Si es tocable, el borde se tiene que VER. Un borde tenue dice "decorativo". */
.broker-check:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}

.broker-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--color-primary);
  cursor: pointer;
}


/* --- El pie del formulario ---------------------------------------------- */

.broker-form-pie {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1.5px solid var(--color-border);
}

/* El botón principal ya es negro: sale de .btn-primario en theme.css.
   No se redefine acá. */

.btn-chico {
  padding: 0.45rem 0.9rem;
  font-size: 0.85rem;
}


/* --- Avisos ------------------------------------------------------------- */
/*
   🔴 TRAMPA DEL MANUAL: `.aviso` YA EXISTE en theme.css.
   Este archivo carga DESPUES y le GANA. Si definiera `.aviso` a secas,
   pisaria los avisos de TODO el sistema — incluido el asistente de ventas.

   Por eso TODO va prefijado con .brokers-panel: solo aplica adentro de este
   modulo, y no toca nada de lo que ya funciona.
*/

.brokers-panel .aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  margin: 0.9rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
}

.brokers-panel .aviso strong { display: block; margin-bottom: 0.15rem; }
.brokers-panel .aviso p      { margin: 0; }

.brokers-panel .aviso .icon-svg {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
}

.brokers-panel .aviso-chico {
  padding: 0.6rem 0.8rem;
  font-size: 0.83rem;
}

/* PELIGRO — "la prepaga rechaza". El ÚNICO aviso con borde visible.
   Ese borde es lo que lo separa de todo lo demás. */
.brokers-panel .aviso-peligro {
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
  color: var(--aviso-peligro-texto);
}

.brokers-panel .aviso-peligro .icon-svg {
  color: var(--aviso-peligro-icono);
}

.brokers-panel .aviso-peligro strong {
  color: var(--aviso-peligro-titulo);
}


/* --- Celular ------------------------------------------------------------ */

@media (max-width: 640px) {
  /* CAUSA RAÍZ del desborde: la grilla exige columnas de mínimo 440px, más
     ancho que un celular. En móvil pasa a una sola columna a todo el ancho. */
  .broker-lista {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  /* La cabecera apila: nombre/datos arriba, todo al ancho */
  .broker-card-cab {
    flex-direction: column;
    align-items: stretch;
  }

  /* Los botones de acción (Editar / Dar de baja / Eliminar): grilla pareja
     de 2 columnas, y Eliminar ocupa la fila entera abajo. */
  .brokers-panel .broker-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    justify-content: stretch;
  }
  .brokers-panel .broker-acciones > button {
    width: 100%;
    justify-content: center;
  }
  .brokers-panel .broker-acciones .btn-borrar,
  .broker-card-color .broker-acciones .broker-btn-borrar {
    grid-column: 1 / -1;
  }

  /* El bloque del gerente: el mail largo corta bien y no desborda */
  .brokers-panel .broker-gerente {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    word-break: break-word;
  }
  .brokers-panel .broker-gerente .broker-link {
    margin-left: 0;
  }

  /* Los chips de herramientas: prolijos, que no se corten */
  .broker-chips { gap: 0.35rem; }

  /* Los tildes de módulos: una columna */
  .broker-checks {
    grid-template-columns: 1fr;
  }

  /* El pie del formulario de alta: botones apilados a todo el ancho */
  .broker-form-pie {
    flex-direction: column-reverse;
  }
  .broker-form-pie button {
    width: 100%;
  }

  /* --- Texto de ayuda LEGIBLE sobre el fondo de color del broker ---
     Los títulos y el texto de ayuda usaban colores oscuros que sobre el
     fondo de color oscuro del broker no se leían. En la tarjeta de color,
     los pasamos a blanco / blanco translúcido. */
  .broker-card-color .broker-editar h4 {
    color: #fff !important;
  }
  .broker-card-color .broker-editar .campo-ayuda {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .broker-card-color .broker-editar .campo-ayuda strong {
    color: #fff !important;
  }
  .broker-card-color .broker-editar {
    border-top-color: rgba(255, 255, 255, 0.25);
  }
}


/* --- Acciones de la tarjeta --------------------------------------------- */

.brokers-panel .broker-acciones {
  display: flex;
  gap: 0.45rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  position: static;
  width: 100%;
  max-width: 100%;
}

/* Eliminar: es DESTRUCTIVO y no tiene vuelta atras.
   Usa el rojo de PELIGRO del sistema — el mismo que dice "la prepaga rechaza".
   No es decoracion: es la señal mas fuerte que tiene el sistema. */
.brokers-panel .btn-borrar {
  background: var(--color-surface);
  color: var(--aviso-peligro-icono);
  border: 1.5px solid var(--aviso-peligro-icono);
  border-radius: 5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.brokers-panel .btn-borrar:hover {
  background: var(--aviso-peligro-fondo);
}


/* --- El gerente del broker ---------------------------------------------- */
/*
   Es la UNICA persona del broker que se ve. Es el contacto comercial.
   A su equipo lo administra el: no se ven sus vendedores ni sus
   administrativos.
*/

.brokers-panel .broker-gerente {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;

  margin: 0.55rem 0 0;
  padding: 0.45rem 0.7rem;

  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);

  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.brokers-panel .broker-gerente .icon-svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Un link, no un boton: es una accion secundaria de soporte. */
.brokers-panel .broker-link {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;

  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);

  cursor: pointer;
  text-decoration: underline;
}

.brokers-panel .broker-link:hover {
  color: var(--color-primary-dark);
}


/* --- Editar un broker ya creado ----------------------------------------- */
/*
   El techo se elegia UNA VEZ, al crear el broker. Si te olvidabas de tildar
   el cotizador, ese broker no lo tenia nunca mas. Ya paso.
*/

.brokers-panel .broker-editar {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--color-border);
}

.brokers-panel .broker-editar h4 {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
}

.brokers-panel .broker-editar h4:first-child { margin-top: 0; }

/* Puntito de color de la prepaga en el editor del broker */
.broker-prepaga-punto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}