/* =====================================================================
   CompareYa · Módulo "Cargar Venta" · Estilos del asistente

   REGLA CENTRAL: el color SEÑALA, no decora.

   Antes el petróleo var(--color-primary) estaba hardcodeado 110 veces en este
   archivo: hacía de título, borde, fondo, ícono, botón y subrayado, todo
   a la vez. Cuando un color hace seis trabajos, deja de comunicar: todo
   pesa lo mismo y el vendedor no sabe dónde mirar.

   Ahora el petróleo aparece SOLO en:
     - el botón principal (la acción)
     - el campo con foco (dónde estás)
     - el paso completado del stepper (por dónde vas)

   Los títulos pesan por TAMAÑO, no por color.
   Los avisos usan la escala de theme.css (info / cuidado / peligro).
   El terracota es MARCA: la barrita al lado del título. Nunca una alarma.
   ===================================================================== */

/* --- Cabecera: qué prepaga, qué modalidad, en qué paso vas --- */

.venta-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.venta-prepaga-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* El chip con la INICIAL de la prepaga, sobre su color.
   Se usa la inicial y no el logo porque los logos de las prepagas son
   apaisados (Prevención es puro texto): a 34px se vuelven una mancha
   ilegible. La inicial + el color se leen siempre, y funcionan para
   cualquier prepaga que se sume mañana. */
.venta-prepaga-chip {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: var(--prepaga-color, #5F6C7B);
}
.venta-prepaga-nombre {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.venta-prepaga-modalidad {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.venta-progreso-contador {
  background: var(--form-campo-fondo);
  border: 1px solid var(--form-campo-borde);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.venta-progreso-contador strong {
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Stepper por bloques ---
   Antes era una barrita de 8px que no decía nada. En un formulario de 16
   pasos el vendedor necesita saber DÓNDE ESTÁ y CUÁNTO FALTA. Ahora cada
   bloque es una pastilla: las hechas en petróleo, la actual con anillo,
   las que faltan en gris. */

.venta-progreso {
  margin-bottom: 1.25rem;
}
.venta-stepper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* Cuando todavía no se eligió la prepaga hay UN SOLO bloque, y la pastilla
   se estiraba a todo el ancho: una barra azul gigante que no informaba
   nada. Un solo bloque no es un stepper. Se marca con .venta-stepper-solo
   desde el JS y se achica. */
.venta-stepper-solo .venta-stepper-pill {
  flex: 0 0 auto;
  min-width: 130px;
}
/* =====================================================================
   STEPPER
   =====================================================================
   Antes las pastillas HECHAS y la ACTUAL eran las dos petróleo, idénticas:
   el vendedor veía una fila de bloques azules y no sabía dónde estaba
   parado. Tenía que contar.

   Ahora cada estado se ve distinto:
     HECHA  -> terracota. Ya la pasaste.
     ACTUAL -> negro. Acá estás.
     FALTA  -> blanca con borde gris marcado. Todavía no llegaste.

   El borde gris de las que faltan es de 1.5px: con 1px en gris clarito no
   se leían como cajas, eran manchas blancas sobre fondo blanco.
   ===================================================================== */
.venta-stepper-pill {
  flex: 1;
  border-radius: 8px;
  padding: 10px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  /* Galeno tiene 11 bloques. Con `nowrap` se cortaban TODOS los nombres:
     "Verificacion...", "Datos labor...", "Documenta...". Un nombre cortado
     no informa nada. Que usen dos líneas es mejor que ser ilegibles. */
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid var(--color-border-fuerte);
  color: var(--color-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

/* HECHA — petróleo con borde GRIS.
   El fondo dice "esto ya está hecho"; el borde gris lo separa del paso
   actual. Antes hecha y actual eran el MISMO css (las dos petróleo, sin
   ninguna diferencia), así que el vendedor tenía que contar los bloques
   para saber dónde estaba parado. */
.venta-stepper-pill.hecha {
  background: var(--color-primary);
  border: 2.5px solid var(--boton-sec-borde);
  color: #fff;
}

/* ACTUAL — petróleo con borde TERRACOTA.
   El terracota aparece como un ribete, no como superficie: es la marca
   señalando "acá estás vos". Es el único borde terracota de la fila. */
.venta-stepper-pill.actual {
  background: var(--color-primary);
  border: 2.5px solid var(--color-accent);
  color: #fff;
}

/* --- El paso --- */

.venta-paso {
  min-height: 180px;
  padding: 0.5rem 0;
}
/* La barrita terracota al lado del título: esto es MARCA, no alarma.
   Es el único lugar donde el terracota aparece por defecto. */
.venta-pregunta {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 0.35rem 0;
  line-height: 1.4;
  padding-left: 11px;
  position: relative;
}
.venta-pregunta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 3px;
  height: 1.05em;
  border-radius: 2px;
  background: var(--color-accent);
}
.venta-pregunta-inline {
  font-size: 1rem;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.venta-ayuda {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0 0 1.25rem 11px;
  line-height: 1.5;
}

/* Opciones (radios estilizados como tarjetas) */
.venta-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.venta-opcion {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #fff;
  font-size: 0.98rem;
}
.venta-opcion:hover {
  border-color: #b8d4e3;
  background: #f8fbfd;
}
.venta-opcion-activa {
  border-color: var(--color-primary);
  background: #f0f7fa;
}
/* Elegir "No" no es un error ni un peligro: es una respuesta válida.
   Antes salía en terracota, como si algo estuviera mal. Va en gris. */
.venta-opcion-activa.venta-opcion-no {
  border-color: var(--color-border-fuerte);
  background: var(--color-surface-alt);
}
.venta-opcion input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
}
.venta-opcion-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--form-campo-fondo);
}
.venta-opcion-disabled:hover {
  border-color: var(--color-border);
  background: var(--form-campo-fondo);
}

/* Campos de texto */
.venta-campo-texto {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  font-size: 1.05rem;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.venta-campo-texto:focus {
  outline: none;
  border-color: var(--color-primary);
}
.venta-campo-select {
  padding: 0.8rem 0.75rem;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  font-size: 1.05rem;
  background: #fff;
  cursor: pointer;
}
.venta-campo-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.venta-doc-fila {
  display: flex;
  gap: 0.75rem;
}
.venta-doc-fila .venta-campo-texto {
  flex: 1;
}

/* Checkpoints */
.venta-checkpoint {
  background: #fefaf0;
  border: 1px solid #f3e3c0;
  border-radius: 6px;
  padding: 1.25rem;
}
.venta-checkpoint-inline {
  margin-top: 1.25rem;
}
.venta-checkpoint-icono {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.venta-checkpoint-alerta {
  margin-top: 0.9rem;
  padding: 0.75rem 1rem;
  background: #fbf1ee;
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  color: #8a3620;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Mensajes y errores */
/* El error que bloquea el paso: PELIGRO, con borde. */
.venta-error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
  border-radius: var(--radius-sm);
  color: var(--aviso-peligro-titulo);
  font-size: 0.9rem;
  font-weight: 600;
}
.venta-mensaje {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.92rem;
}
.venta-mensaje-ok {
  background: #f0f7fa;
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary);
}
/* Un error es PELIGRO, no marca. Va en la escala roja. */
.venta-mensaje-error {
  background: var(--aviso-peligro-fondo);
  border-left: 3px solid var(--aviso-peligro-icono);
  color: var(--aviso-peligro-titulo);
}

/* Navegación */
.venta-nav {
  display: flex;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef0f2;
}
/* Botón primario: terracota. Es LA acción de cada pantalla.
   (Antes era petróleo. Como este archivo carga DESPUÉS de theme.css,
    lo que se defina acá le gana a theme.css: por eso el cambio va
    acá y no allá.) */
/* Segundo nombre del botón principal. Va en PETRÓLEO, igual que
   .btn-primary: la acción no es la marca. */
/* Este archivo carga DESPUÉS de theme.css, así que lo que se defina acá le
   gana. Por eso el botón se define en LOS DOS lugares con el mismo valor:
   si acá quedara el color viejo, el de theme.css nunca se vería.
   (Ese fue exactamente el bug: theme.css decía negro y esta regla lo
   volvía a pintar de petróleo.) */
.btn-primario {
  background: var(--boton-fondo);
  color: #fff;
  border: none;
  padding: 0.75rem 1.75rem;
  border-radius: 5px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--boton-firma);
  margin-bottom: 7px;   /* le hace lugar a las dos líneas de abajo */
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn-primario:hover:not(:disabled) {
  background: var(--boton-fondo-hover);
  box-shadow: var(--boton-firma-hover);
}
.btn-primario:disabled {
  background: var(--boton-fondo);
  opacity: 0.35;
  box-shadow: none;
  margin-bottom: 0;
  cursor: not-allowed;
}

/* Secundario (Volver, Salir): borde de 2px. Con 1.5px en gris claro no se
   leían como botones, parecían texto suelto adentro de un recuadro. */
.btn-secundario {
  background: var(--color-surface);
  color: var(--boton-sec-texto);
  border: 2px solid var(--boton-sec-borde);
  padding: 0.72rem 1.4rem;
  border-radius: 5px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
/* :not(.btn-peligro) -> para que el botón de borrar conserve su rojo.
   Este archivo carga después de theme.css, así que sin esto le ganaría. */
.btn-secundario:hover:not(:disabled):not(.btn-peligro) {
  border-color: var(--boton-fondo);
  color: var(--boton-fondo);
  background: var(--color-surface-alt);
}
.btn-secundario:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---- Fecha (día / mes / año) ---- */
.venta-fecha-fila {
  display: flex;
  gap: 0.75rem;
  max-width: 340px;
}
.venta-fecha-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.venta-fecha-campo label {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.venta-fecha-campo input {
  text-align: center;
}

/* ---- Grupo de campos ---- */
.venta-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.venta-grupo-campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.venta-grupo-campo label {
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 500;
}
.venta-grupo-campo textarea {
  resize: vertical;
  font-family: inherit;
}
.venta-ancho-full   { width: 100%; }
.venta-ancho-medio  { width: calc(50% - 0.45rem); }
.venta-ancho-chico  { width: calc(25% - 0.7rem); }
@media (max-width: 640px) {
  .venta-ancho-medio, .venta-ancho-chico { width: 100%; }
}

/* ---- Subpregunta (dentro de económicos) ---- */
.venta-subpregunta {
  margin-top: 1.25rem;
}
.venta-subpregunta p {
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 0.6rem 0;
}
.venta-opciones-horizontal {
  flex-direction: row;
}
.venta-opciones-horizontal .venta-opcion {
  flex: 0 0 auto;
  min-width: 90px;
  justify-content: center;
}

/* ---- Cálculo económico (resultado) ---- */
.venta-calculo {
  margin-top: 1.5rem;
  background: #f0f7fa;
  border: 1px solid #d3e6ef;
  border-radius: 6px;
  padding: 1rem 1.25rem;
}
.venta-calculo-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0;
  color: #4b5563;
}
.venta-calculo-fila strong {
  color: var(--color-primary);
  font-size: 1.05rem;
}
.venta-calculo-destacado {
  border-top: 1px dashed #b8d4e3;
  margin-top: 0.35rem;
  padding-top: 0.7rem;
}
.venta-calculo-destacado strong {
  color: var(--color-accent);
  font-size: 1.2rem;
}

/* =====================================================================
   REVISIÓN FINAL
   =====================================================================
   Este es el momento MÁS CRÍTICO de la carga: es la última vez que el
   vendedor puede encontrar un error antes de mandar la venta. Un dato mal
   acá son días perdidos y a veces la venta caída.

   Y sin embargo era una LISTA PLANA: títulos de sección en azul chico,
   pares etiqueta-valor sueltos, sin agrupación, sin bordes, sin nada que
   separe una sección de otra. Era facilísimo pasar de largo un dato mal.

   Ahora cada sección es una TARJETA de verdad: encabezado con peso, filas
   separadas, y los datos que FALTAN marcados en ámbar en vez de un guión
   perdido que nadie ve.
   ===================================================================== */

.venta-resumen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.venta-resumen-grupo {
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* El encabezado de la sección: casi negro y con peso. Antes era azul chico
   y pesaba lo mismo que los datos de abajo. */
.venta-resumen-grupo h4 {
  margin: 0;
  padding: 10px 16px;
  background: var(--form-campo-fondo);
  border-bottom: 1.5px solid var(--color-border);
  color: var(--color-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.venta-resumen-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 9px 16px;
  font-size: 0.87rem;
  border-bottom: 1px solid #F1F3F6;
}
.venta-resumen-fila:last-child { border-bottom: 0; }

.venta-resumen-fila span {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.venta-resumen-fila strong {
  color: var(--color-text);
  text-align: right;
  font-weight: 700;
  word-break: break-word;
}

/* Un dato que FALTA no puede ser un guión gris perdido en una lista: es
   justo lo que el vendedor tiene que ver. */
.venta-resumen-fila strong.vacio {
  color: var(--aviso-cuidado-icono);
  font-weight: 600;
  font-size: 0.8rem;
}
.venta-resumen-fila.fila-vacia {
  background: var(--aviso-cuidado-fondo);
}

/* ---- Grupo familiar ---- */
.venta-familiares {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}
.venta-familiar-card {
  border: 1px solid #d3e6ef;
  border-radius: 6px;
  padding: 1rem 1.15rem 1.25rem;
  background: #f8fbfd;
}
.venta-familiar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.venta-familiar-header strong {
  color: var(--color-primary);
  font-size: 1rem;
}
.venta-familiar-quitar {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}
.venta-familiar-agregar {
  background: #fff;
  border: 2px dashed var(--color-primary);
  color: var(--color-primary);
  padding: 0.7rem 1.25rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease;
}
.venta-familiar-agregar:hover {
  background: #f0f7fa;
}

/* ---- Cierre del asistente (resumen) ---- */
.venta-cierre {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid #eef0f2;
}
.venta-cierre-botones {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---- Documentación ---- */
.venta-docs-progreso {
  background: #f0f7fa;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
}
.venta-docs-grupo {
  margin-bottom: 1.25rem;
}
.venta-docs-grupo h4 {
  color: var(--color-primary);
  font-size: 0.95rem;
  margin: 0 0 0.6rem 0;
  border-bottom: 2px solid #eef0f2;
  padding-bottom: 0.35rem;
}
.venta-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  background: #fff;
}
.venta-doc-ok {
  border-color: #86c98b;
  background: #f4fbf5;
}
.venta-doc-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.venta-doc-check { font-size: 1.1rem; }
.venta-doc-label { font-size: 0.92rem; color: var(--color-text); }
.venta-doc-nombre {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
  width: 100%;
  padding-left: 1.7rem;
}
.venta-doc-boton {
  background: var(--color-primary);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.venta-doc-boton:hover { background: #164a68; }
.venta-doc-ok .venta-doc-boton {
  background: #fff;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ---- Enlace de consulta en checkpoint (padrón) ---- */
.venta-enlace-consulta {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.15rem;
  background: #fff;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}
.venta-enlace-consulta:hover {
  background: var(--color-primary);
  color: #fff;
}

/* ---- Salud: peso/altura ---- */
.venta-medidas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.venta-medida-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  flex-wrap: wrap;
}
.venta-medida-persona {
  font-weight: 500;
  color: var(--color-text);
  font-size: 0.92rem;
}
.venta-medida-campos {
  display: flex;
  gap: 0.5rem;
}
.venta-medida-input {
  max-width: 130px;
}

/* ---- Salud: preexistencias ---- */
.venta-preex-lista {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.venta-preex-persona {
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}
.venta-preex-activo {
  border-color: var(--color-primary);
  background: #f0f7fa;
}
.venta-preex-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 0.92rem;
}
.venta-preex-check input { width: 18px; height: 18px; accent-color: var(--color-primary); }
.venta-preex-detalle {
  margin-top: 0.6rem;
  font-family: inherit;
  resize: vertical;
}

/* ---- Preexistencias: lista de enfermedades ---- */
.venta-preex-enfermedades {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 6px;
}
.venta-preex-sublabel {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 0.5rem 0;
}
.venta-preex-enf {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--color-text);
}
.venta-preex-enf input { margin-top: 0.15rem; accent-color: var(--color-primary); }

/* ---- Controles dentro de grupo (select, radio, fecha) ---- */
.venta-campo-select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
}
.venta-grupo-radios {
  display: flex;
  gap: 0.5rem;
}
.venta-radio-inline {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.12s ease;
}
.venta-radio-inline input { accent-color: var(--color-primary); }
/* La opción elegida se marca en terracota: es "lo que está seleccionado". */
/* Radio seleccionado: petróleo. Seleccionar no es alarmar. */
.venta-radio-activo {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
  color: var(--color-accent);
}
.venta-fecha-inline {
  display: flex;
  gap: 0.4rem;
}
.venta-fecha-inline input { text-align: center; }

/* ---- IMC y FUM en peso/altura ---- */
.venta-imc {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-primary);
  font-weight: 600;
  width: 100%;
}
/* IMC fuera de rango = la prepaga RECHAZA. Es peligro, no marca. */
.venta-imc-alerta {
  color: var(--aviso-peligro-icono);
  background: #fdf0ec;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
}
.venta-fum {
  margin-top: 0.6rem;
  width: 100%;
}
.venta-fum label {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.venta-fum input { max-width: 200px; }


/* ==== Seguimiento de Ventas (Kanban estilo Leads) ==== */
.seg-col-count {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  margin-left: 0.35rem;
}
.seg-col-vacia {
  color: #cbd5e1;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.5rem 0;
}
.seg-card { cursor: pointer; }
.seg-nsocio {
  color: #16a34a !important;
  font-weight: 600;
}
/* Detalle */
.seg-detalle-card {
  background: #fff;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1rem;
}
.seg-detalle-card h3 {
  color: var(--color-primary);
  font-size: 1rem;
  margin: 0 0 0.85rem 0;
  border-bottom: 2px solid #eef0f2;
  padding-bottom: 0.4rem;
}
.seg-dato {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-surface-alt);
}
.seg-dato span { color: var(--color-text-muted); }
.seg-dato strong { color: var(--color-text); text-align: right; }
.seg-estado {
  color: #fff;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Gestión de estado en el detalle de seguimiento */
.seg-gestion-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

/* Recuadro de contraseña temporal (creación de usuario) */
.pass-temporal-box {
  background: #f0f7fa;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  padding: 1.15rem 1.25rem;
  margin: 1rem 0;
}
.pass-temporal-titulo {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1.05rem;
  margin-bottom: 0.6rem;
}
.pass-temporal-detalle {
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  line-height: 1.6;
}
.pass-temporal-valor {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-weight: 700;
  font-family: monospace;
  font-size: 1.1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  letter-spacing: 1px;
}
.pass-temporal-aviso {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 0.85rem;
}

/* Modal de nuevo usuario: compacto y con scroll interno */
.modal-card-usuario {
  max-height: 88vh;
  overflow-y: auto;
}
.modal-card-usuario h3 {
  margin: 0 0 0.85rem 0;
}
.modal-card-usuario .field {
  margin-bottom: 0.7rem;
}
.modal-card-usuario .field label {
  margin-bottom: 0.25rem;
}
/* =====================================================================
   MÓDULOS CON ACCESO (alta y edición de usuario)
   =====================================================================
   Estaba roto: el checkbox nativo flotaba FUERA del chip, medio encima del
   texto, y con distinto ancho según el largo de la palabra. Y marcado o sin
   marcar se veían casi igual —había que fijarse en un cuadradito de 12px
   para saber si el usuario tenía acceso o no.

   Ahora el checkbox vive adentro del chip, y el chip entero cambia cuando
   está marcado: borde negro, fondo gris, texto en negrita. Se ve de un
   vistazo qué módulos tiene la persona.
   ===================================================================== */
.modulos-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.modulos-checklist .chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  margin: 0;
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: 5px;
  background: #fff;
  /* Más chico y sin MAYÚSCULAS: "ASISTENTE VIRTUAL" en mayúscula no entra
     en media columna y se cortaba ("ASISTENTE VIRTU..."). */
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all .12s ease;
  min-width: 0;
  /* Si aun así no entra, que baje de línea antes que cortarse. Un nombre
     cortado no informa nada. */
  line-height: 1.3;
}

/* La clase .chip base (theme.css) trae `white-space: nowrap`, y eso hacía
   que "Asistente Virtual" se cortara en "ASISTENTE VIRTU...". Acá se pisa:
   un nombre cortado no informa nada; que use dos líneas es mejor. */
.modulos-checklist .chip {
  white-space: normal;
  word-break: break-word;
  min-height: 42px;
}

.modulos-checklist .chip:hover {
  border-color: var(--boton-fondo);
  background: var(--color-surface-alt);
}

/* El cuadradito: se le saca la apariencia nativa y se dibuja. Sin esto,
   cada navegador lo pinta a su manera y ninguno respeta el tamaño. */
.modulos-checklist .chip input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--boton-sec-borde);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: all .12s ease;
}

/* Marcado: cuadrado negro con el tilde dibujado adentro. */
.modulos-checklist .chip input[type="checkbox"]:checked {
  background: var(--boton-fondo);
  border-color: var(--boton-fondo);
}
.modulos-checklist .chip input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* El CHIP ENTERO cambia cuando está marcado. Antes solo cambiaba el
   cuadradito de 12px: para saber qué módulos tenía un usuario había que
   mirarlos uno por uno. */
.modulos-checklist .chip:has(input:checked) {
  border: 2px solid var(--boton-fondo);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 700;
}

/* Fallback para navegadores sin :has() — la clase la pone el JS. */
.modulos-checklist .chip.chip-marcado {
  border: 2px solid var(--boton-fondo);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 700;
}

/* Filtros del seguimiento */
.seg-filtros {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 1rem 0;
  align-items: center;
}
/* Filtros: borde grueso + sombra, para que se lean como controles
   y no como cajas transparentes. */
.seg-filtro-input,
.seg-filtro-select {
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.seg-filtro-input {
  flex: 1 1 240px;
  min-width: 200px;
}

.seg-filtro-select {
  cursor: pointer;
}

.seg-filtro-input::placeholder {
  color: var(--color-text-muted);
  font-weight: 500;
}

.seg-filtro-input:hover,
.seg-filtro-select:hover {
  border-color: var(--color-border-fuerte);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.seg-filtro-input:focus,
.seg-filtro-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 71, 43, 0.14),
              0 6px 16px rgba(181, 71, 43, 0.18);
}

/* Filtro con algo cargado: se nota que está activo */
/* Filtro con algo escrito: petróleo. Un filtro activo es un ESTADO, y el
   terracota es la marca — no puede significar las dos cosas. */
.seg-filtro-input:not(:placeholder-shown) {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.seg-filtro-select.filtro-activo {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-accent);
}

/* Filtro de ticket deshabilitado (hasta la Parte B) */
.seg-filtro-ticket:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.seg-filtro-input { flex: 0 1 180px; }

/* ==== Tickets ==== */
.seg-nuevo-ticket {
  background: #fff8f3;
  border: 1px solid #f0d9c8;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.seg-tickets-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.seg-ticket-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
}
.seg-ticket-fila:hover {
  border-color: var(--aviso-cuidado-icono);
  background: #fff8f3;
}
.seg-ticket-numero {
  font-weight: 700;
  color: var(--aviso-cuidado-icono);
  margin-right: 0.5rem;
}
.seg-ticket-asunto {
  color: var(--color-text);
  font-size: 0.92rem;
}
.seg-ticket-fecha {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.seg-ticket-estado {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.seg-ticket-estado.abierto {
  background: var(--aviso-cuidado-fondo);
  color: #b45309;
}
.seg-ticket-estado.resuelto {
  background: #dcfce7;
  color: #15803d;
}
.seg-ticket-cabecera {
  margin-bottom: 1rem;
}
.seg-ticket-asunto-grande {
  font-size: 1.05rem;
  color: var(--color-text);
  font-weight: 600;
  margin: 0.4rem 0 0 0;
}
/* Hilo de mensajes */
.seg-hilo {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 1rem 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--form-campo-fondo);
  border-radius: 8px;
}
.seg-mensaje {
  max-width: 80%;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--color-borde-tarjeta);
  align-self: flex-start;
}
.seg-mensaje-propio {
  align-self: flex-end;
  background: #eef6fb;
  border-color: #cfe4f0;
}
.seg-mensaje-autor {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}
.seg-mensaje-texto {
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.4;
}
.seg-mensaje-adjunto {
  font-size: 0.85rem;
  color: var(--aviso-cuidado-icono);
  cursor: pointer;
  margin-top: 0.35rem;
  text-decoration: underline;
}
.seg-mensaje-fecha {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}
.seg-responder {
  margin-top: 0.5rem;
}

/* Adjuntar archivo en el hilo del ticket */
.seg-responder-acciones {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.seg-adjuntar-label {
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  border: 1px solid #cfe4f0;
  border-radius: 6px;
  background: #f0f7fa;
}
.seg-adjuntar-label:hover { background: #e0eff5; }
.seg-archivo-nombre {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 100px;
}
.seg-adjunto-ver {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ==== Notificaciones de ventas (ícono + dropdown) ==== */
.badge-ventas {
  background: var(--aviso-cuidado-icono) !important;
}
.ventas-notif-dropdown {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 360px;
  max-width: 90vw;
  background: #fff;
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  z-index: 1000;
  overflow: hidden;
}
.ventas-notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  background: var(--color-primary);
  color: #fff;
}
.ventas-notif-cerrar {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}
.ventas-notif-lista {
  max-height: 400px;
  overflow-y: auto;
}
.ventas-notif-vacia {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}
.ventas-notif-item {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-surface-alt);
  cursor: pointer;
  transition: background 0.12s ease;
}
.ventas-notif-item:hover {
  background: var(--form-campo-fondo);
}
.ventas-notif-item.accionable {
  border-left: 3px solid var(--aviso-cuidado-icono);
}
.ventas-notif-titulo {
  font-weight: 600;
  color: var(--color-text);
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.ventas-notif-msg {
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.ventas-notif-pendiente {
  font-size: 0.78rem;
  color: var(--aviso-cuidado-icono);
  font-weight: 600;
  margin-top: 0.3rem;
}
.ventas-notif-fecha {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}

/* Contenedor de acciones del topnav: para posicionar el dropdown */
.topnav-main-actions, .topbar-actions {
  position: relative;
}

/* ==== Íconos de notificación más visuales ==== */
/* Botones de notificación: borde claro + sombra, para que se despeguen
   del azul del header y se noten. */
#newsBellBtn, #ventasNotifBtn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: all 0.15s ease;
  margin-right: 0.5rem;
}

#newsBellBtn {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(181, 71, 43, 0.50);
}
#newsBellBtn:hover {
  background: var(--color-accent-dark);
  border-color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(181, 71, 43, 0.60);
}

#ventasNotifBtn {
  background: #2C7BA5;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
#ventasNotifBtn:hover {
  background: var(--color-accent);
  border-color: #fff;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 22px rgba(181, 71, 43, 0.50);
}

/* El hamburguesa, del mismo palo */
.hamburguesa-btn {
  width: 46px;
  height: 46px;
  border-radius: 6px;
  display: grid;
  place-items: center;

  /* 🔴 ESTE BOTON QUEDABA AFUERA.
     La campanita y el portapapeles son `.bell-btn` y ya usan estas variables.
     El menu es `.hamburguesa-btn` y tenia los colores FIJOS: el gerente
     cambiaba el color de los botones y este seguia blanco. */
  border: 2.5px solid var(--enc-boton-borde);
  background: var(--btn-menu-fondo);
  color: var(--btn-menu-icono);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: all 0.15s ease;
}

.hamburguesa-btn:hover {
  background: var(--color-accent);
  border-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(181, 71, 43, 0.50);
}

/* El contador, bien marcado sobre el botón */
#newsBellBtn .badge,
#ventasNotifBtn .badge {
  border: 2px solid var(--color-primary-dark);
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
#newsBellBtn .icon-svg, #ventasNotifBtn .icon-svg {
  width: 20px;
  height: 20px;
  color: #fff;
}
/* El badge (contador) más visible */
#newsBellBtn .badge, #ventasNotifBtn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--aviso-cuidado-icono);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  padding: 0 4px;
}
#newsBellBtn .badge {
  background: #f59e0b;
}
.ventas-notif-footer {
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--color-surface-alt);
  text-align: center;
}

/* ==== Menú desplegable rediseñado ==== */
/* La tarjeta del menú: borde marcado, franja terracota arriba y sombra
   fuerte, para que se lea como una capa que flota sobre el contenido. */
.menu-cuenta-dropdown {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-borde-tarjeta);
  border-top: 4px solid var(--color-accent);
  box-shadow: 0 8px 20px rgba(11, 18, 32, 0.18),
              0 24px 56px rgba(11, 18, 32, 0.28);
  padding: 12px;
  min-width: 300px;
  overflow: hidden;
}
.menu-nav-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--color-borde-tarjeta);
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  transition: all 0.13s ease;
  position: relative;
  box-shadow: 0 1px 3px rgba(27,90,125,0.08);
}
.menu-nav-item:hover:not(.active) {
  background: var(--color-surface-alt);
  border-color: var(--color-border-fuerte);
  box-shadow: var(--shadow);
  transform: translateX(2px);
}
/* El ícono va en una CAJITA con fondo (no suelto y gris).
   El color de cada módulo se define en leads-module.css. */
.menu-nav-item .menu-nav-icon {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 8px;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: all 0.13s ease;
}

/* --- EL ÍTEM ACTIVO ---
   El terracota va como BARRA A LA IZQUIERDA, no como fondo ni como color de
   texto. Antes el ítem activo era terracota entero —fondo lavado, texto,
   borde, ícono—, y eso convertía al terracota en "el color de dónde estás",
   que el vendedor ve 50 veces por día. Dejaba de ser la marca.

   Ahora la marca SEÑALA: una barra de 4px al costado. El resto lo hace el
   contraste, no el color. (ESTETICA.md: "el terracota es un ribete, no una
   superficie".) */
.menu-nav-item.active {
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-weight: 700;
  border-color: var(--color-border-fuerte);
  box-shadow: var(--shadow);
  /* La barra vive acá: se le hace lugar corriendo el contenido. */
  padding-left: 1.1rem;
}
.menu-nav-item.active .menu-nav-icon {
  background: var(--boton-fondo);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.menu-nav-item.active::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
  border-radius: 6px 0 0 10px;
}
.menu-nav-item .badge {
  margin-left: auto;
  background: var(--aviso-cuidado-icono);
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 5px;
}
/* Chip de usuario con avatar */
.user-chip-mini {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem;
  margin: 0.5rem 0;
  background: #fff;
  border: 1.5px solid #d5dce3;
  border-radius: 6px;
}
.user-chip-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.user-chip-info {
  display: flex;
  flex-direction: column;
}
.user-chip-info strong {
  color: var(--color-text);
  font-size: 0.92rem;
}
.user-chip-info span {
  color: #94a3b8;
  font-size: 0.8rem;
}
/* Botón cerrar sesión */
.menu-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: calc(100% - 0.5rem);
  margin: 0.25rem;
  padding: 0.7rem;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #dc2626;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.13s ease;
}
.menu-logout-btn:hover {
  background: #fef2f2;
  border-color: #dc2626;
}


/* ====================================================================
   ACENTOS TERRACOTA — tarjetas, filtros y recuadros
   --------------------------------------------------------------------
   Criterio: el terracota marca lo IMPORTANTE (lo seleccionado, lo que
   requiere acción, la acción principal). Las columnas del Kanban
   conservan su color por estado: ese color ES la información.
   ==================================================================== */

/* --- Tarjetas de venta en el Kanban --- */
.seg-card {
  cursor: pointer;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.seg-card:hover {
  border-color: var(--color-border-fuerte);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* TU TURNO DE RESPONDER — va en ÁMBAR, no en terracota.
   Esto es un aviso de CUIDADO: hay una venta esperando tu respuesta y cada
   hora que pasa la demora. El terracota es la MARCA; si además significa
   "te toca a vos", deja de significar CompareYa.
   (ESTETICA.md — la escala de avisos: "¿qué pasa si lo ignoro?" → la venta
   se demora → ámbar.) */
.seg-card-pendiente {
  border: 2px solid var(--aviso-cuidado-borde);
  background: var(--aviso-cuidado-fondo);
  box-shadow: 0 4px 12px rgba(181, 71, 8, 0.14);
}

.seg-card-pendiente:hover {
  box-shadow: 0 8px 20px rgba(181, 71, 8, 0.2);
}

.seg-card-aviso {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* --- Filtros: se encienden al enfocarlos --- */
.seg-filtros input:focus,
.seg-filtros select:focus,
/* El campo con FOCO va en petróleo. El foco dice "acá estás escribiendo",
   no "acá hay un problema". En terracota parecía un campo con error. */
.venta-campo-texto:focus,
.venta-campo-select:focus {
  outline: 3px solid rgba(27, 90, 125, 0.14);
  border-color: var(--color-primary);
  border-width: 1.5px;
}

/* --- Recuadro de detalle --- */
.seg-detalle-card:hover {
  border-color: var(--color-border-fuerte);
}

/* --- Contador de la columna --- */
.seg-col-count {
  background: var(--color-primary);
}

/* --- Encabezado del panel: barrita terracota --- */
.ventas-panel-titulo,
.seg-panel-titulo {
  position: relative;
  padding-left: 12px;
}

.ventas-panel-titulo::before,
.seg-panel-titulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 3px;
  background: var(--color-accent);
}


/* --- Etiqueta de prepaga dentro de la tarjeta de venta --- */
.seg-card-prepaga {
  margin-top: 6px;
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
}

/* Barra con el color de la prepaga, al costado de la tarjeta */
.seg-card[class*="pg-"] {
  border-left: 4px solid var(--pg-color, var(--color-border));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Si además es tu turno, el ámbar le gana al color de prepaga: es más
   urgente saber que tenés algo pendiente que de qué prepaga es. */
.seg-card.seg-card-pendiente {
  border-left: 4px solid var(--aviso-cuidado-borde);
}


/* ====================================================================
   SEGUIMIENTO — encabezado y columnas explicadas
   ==================================================================== */

.seg-header {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1.5px solid var(--color-border);
}

.seg-subtitulo {
  max-width: 640px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.seg-subtitulo strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* Resumen de arriba: lo primero que se mira al entrar */
.seg-resumen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.seg-stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  color: var(--color-text-muted);
}

.seg-stat strong {
  color: var(--color-text);
  font-weight: 800;
}

.seg-stat .icon-svg {
  width: 15px;
  height: 15px;
}

/* "X esperan tu respuesta": tiene que saltar a la vista */
.seg-stat-urgente {
  background: var(--color-accent-soft);
  border-color: #E5BEB2;
  color: var(--color-accent);
  box-shadow: 0 3px 10px rgba(181, 71, 43, 0.18);
}

.seg-stat-urgente strong {
  color: var(--color-accent);
}

.seg-stat-ok {
  background: var(--color-success-soft);
  border-color: #BBE8CB;
  color: var(--color-success);
}

/* --- Columnas del Kanban --- */
.kanban-column {
  /* La barra de arriba lleva el color del estado */
  border-top: 4px solid var(--col-color, var(--color-primary));
}

/* Si la columna tiene ventas que esperan algo del usuario, se destaca */
.kanban-col-urgente {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(181, 71, 43, 0.20);
}

.kanban-column-header {
  padding: 11px 12px;
}

.kanban-col-titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.3;
}

.kanban-col-icono {
  width: 16px;
  height: 16px;
  color: var(--col-color, var(--color-primary));
  flex-shrink: 0;
}

/* La leyenda que explica qué es cada columna */
.kanban-col-ayuda {
  margin: 7px 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* Las columnas que piden acción llevan la leyenda en terracota */
.kanban-col-urgente .kanban-col-ayuda {
  color: var(--color-accent);
  font-weight: 700;
}

.seg-col-count {
  background: var(--col-color, var(--color-primary));
  font-weight: 800;
}


/* --- Franja blanca: separa el encabezado + filtros del tablero --- */
.seg-barra {
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}

/* La tarjeta blanca que envuelve el tablero Kanban de seguimiento.
   Le da contraste sobre el fondo y contiene el scroll horizontal. */
.seg-tablero-card {
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.seg-tablero-card .kanban-board {
  margin: 0;
}

/* Dentro de la franja, el borde de abajo del header sobra */
.seg-barra .seg-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}

/* Los filtros, dentro de la franja, sin fondo propio */
.seg-barra .seg-filtros {
  margin-bottom: 0;
}

/* Chip de borradores */
.seg-stat-borrador {
  background: var(--color-warning-soft);
  border-color: #F0DCB4;
  color: var(--color-warning);
}

.seg-stat-borrador strong {
  color: var(--color-warning);
}


/* --- Tarjetas de venta: borde grueso y sombra marcada --- */
.seg-card,
.lead-card {
  border-width: 2px;
  box-shadow: var(--shadow);
}

.seg-card:hover,
.lead-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* La barra de color de la prepaga, más gruesa */
.seg-card[class*="pg-"] {
  border-left-width: 5px;
}

.seg-card.seg-card-pendiente {
  border-width: 2px;
  border-left-width: 5px;
  box-shadow: 0 4px 12px rgba(181, 71, 43, 0.22),
              0 12px 28px rgba(181, 71, 43, 0.18);
}

.seg-card.seg-card-pendiente:hover {
  box-shadow: 0 6px 16px rgba(181, 71, 43, 0.28),
              0 20px 40px rgba(181, 71, 43, 0.24);
}


/* ====================================================================
   BORRADORES
   --------------------------------------------------------------------
   Antes las ventas guardadas como borrador quedaban en la base pero no
   se podían retomar: no había ninguna pantalla que las listara.
   ==================================================================== */

.ventas-hero-acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.borradores-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.borrador-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-left: 5px solid var(--pg-color, var(--color-border-fuerte));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.borrador-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.borrador-nombre {
  margin: 0 0 3px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-text);
}

.borrador-dato {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.borrador-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Barra de avance: cuánto le falta */
.borrador-avance {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.borrador-barra {
  height: 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 999px;
  overflow: hidden;
}

.borrador-relleno {
  height: 100%;
  background: var(--color-accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.borrador-avance-txt {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-accent);
}

.borrador-fecha {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.borrador-fecha .icon-svg {
  width: 13px;
  height: 13px;
}

.borrador-acciones {
  display: flex;
  gap: 8px;
}

@media (max-width: 820px) {
  .borrador-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .borrador-acciones {
    justify-content: flex-end;
  }
}


/* ============================================================
   MENÚ — color de ícono por módulo
   ------------------------------------------------------------
   Va en ESTE archivo (y no en leads-module.css) porque este carga
   después: si estuviera allá, perdería la cascada y los íconos
   saldrían todos grises.
   ============================================================ */

/* Los íconos del menú van TODOS EN GRIS.
   Antes cada módulo tenía su color: verde, violeta, rosa, celeste, ámbar...
   Trece colores sin criterio, ninguno significaba nada. Y el resultado era
   que el ojo saltaba entre trece manchas de color sin saber dónde mirar.

   El menú tiene UN trabajo: decir dónde estás parado. Con los íconos en
   gris, el único ítem que resalta es el activo —ícono negro, barra
   terracota— y se ve al toque. */
.menu-nav-item .menu-nav-icon {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* El ACTIVO gana siempre: terracota. El [data-module] iguala la
   especificidad de las reglas de arriba, así no le ganan. */
.menu-nav-item.active[data-module] .menu-nav-icon {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 3px 8px rgba(181, 71, 43, 0.32);
}

.menu-nav-item.active span {
  color: var(--color-accent);
}


/* ============================================================
   HEADER — botones de notificación y menú
   ============================================================ */




/* Los dos PDFs de la venta: solicitud y documentación, por separado */
.seg-descargas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seg-descargas button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.seg-descargas .icon-svg {
  width: 16px !important;
  height: 16px !important;
}


/* ====================================================================
   AVALIAN
   ==================================================================== */

/* --- Tarjeta de cada hijo --- */
.av-hijo-card {
  padding: 18px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-left: 5px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

.av-hijo-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
}

.av-hijo-titulo .icon-svg {
  width: 17px !important;
  height: 17px !important;
}

/* --- Resumen antes de generar el Excel --- */
.av-resumen {
  display: grid;
  gap: 16px;
}

.av-resumen-bloque {
  padding: 16px 18px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.av-resumen-bloque h4 {
  margin: 0 0 12px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.av-resumen-fila {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.88rem;
}

.av-resumen-fila:last-child {
  border-bottom: 0;
}

.av-resumen-eti {
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.av-resumen-val {
  color: var(--color-text);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

.av-resumen-sub {
  margin: 12px 0 8px;
  padding-top: 10px;
  border-top: 2px solid var(--color-border-fuerte);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.av-resumen-persona {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.av-resumen-persona:last-child {
  border-bottom: 0;
}

/* --- Documentos opcionales --- */
.venta-doc-opcional {
  border-style: dashed;
}

.venta-doc-ayuda {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}


/* ====================================================================
   COLOR DE PREPAGA EN EL ASISTENTE
   --------------------------------------------------------------------
   Las mismas variables (--pg-color, --pg-soft, --pg-borde) que usa
   Plantillas de Mail. Se definen en plantillas-module.css.
   ==================================================================== */

/* GRILLA DE PREPAGAS — compacta.
   Hoy hay 3 prepagas cargadas, pero CompareYa trabaja con 12. Con tarjetas
   de 210px entraban 4 por fila y el paso ocupaba media pantalla. A 150px
   entran 6-7 por fila: las 12 caben en dos filas, sin scroll. */
.venta-opciones-prepaga {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
/* Las tarjetas de prepaga van más chatas que una opción normal */
.venta-opciones-prepaga .venta-opcion {
  padding: 10px 12px;
  font-size: 0.86rem;
}

/* Cada opción lleva una barra con el color de SU prepaga */
.venta-opciones-prepaga .venta-opcion[class*="pg-"] {
  position: relative;
  padding-left: 13px;
  border-left: 4px solid var(--pg-color, var(--color-border));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.venta-opciones-prepaga .venta-opcion[class*="pg-"]:hover {
  border-color: var(--pg-color);
  border-left-color: var(--pg-color);
  background: var(--pg-soft);
  box-shadow: var(--shadow);
}

/* La prepaga ELEGIDA se marca con su propio color, no con el terracota
   genérico: es más claro de qué prepaga es la venta. */
.venta-opciones-prepaga .venta-opcion[class*="pg-"].venta-opcion-activa {
  border-color: var(--pg-color);
  border-left-color: var(--pg-color);
  background: var(--pg-soft);
  color: var(--pg-color);
  font-weight: 800;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pg-color) 30%, transparent);
}

/* Punto de color al lado del nombre */
.venta-opciones-prepaga .venta-opcion[class*="pg-"] span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--pg-color);
  vertical-align: middle;
}

/* La opción deshabilitada ("próximamente") queda neutra */
.venta-opciones-prepaga .venta-opcion-disabled {
  opacity: 0.45;
}


/* --- Forma de pago (Avalian) --- */
.av-pago-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.av-pago-opciones .venta-opcion span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.av-pago-opciones .venta-opcion .icon-svg {
  width: 22px !important;
  height: 22px !important;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.av-pago-opciones .venta-opcion-activa .icon-svg {
  color: var(--color-accent);
}

.av-pago-opciones .venta-opcion small {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.av-pago-numero {
  max-width: 420px;
}

.av-pago-numero label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

/* El número, con espaciado tipo tarjeta */
.av-pago-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem !important;
  letter-spacing: 0.06em;
}

/* Contador de dígitos: avisa si faltan o sobran */
.av-pago-contador {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.av-pago-contador .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

.av-pago-ok {
  color: var(--color-success);
}

.av-pago-error {
  color: var(--color-danger);
}

/* Zona de envío al final de la documentación */
.venta-enviar-zona {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid var(--color-border);
}

/* El nombre del cónyuge necesita ancho */
.venta-campo-largo {
  grid-column: 1 / -1;
}


/* --- Preexistencias --- */
.av-preex-card {
  padding: 18px 20px;
  margin-bottom: 14px;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}

.av-preex-activa {
  border-color: var(--color-warning);
  background: var(--color-warning-soft, #FEF7E8);
}

.av-preex-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.av-preex-cab strong {
  font-size: 0.95rem;
  color: var(--color-primary);
}

.av-preex-pregunta {
  margin: 0 0 10px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
}

.av-preex-sin {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--color-success-soft, #E8F5EC);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  color: var(--color-success);
  font-weight: 600;
}

.av-preex-sin .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

.av-preex-detalle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--color-border-fuerte);
}

/* Vista previa de cómo va a quedar en el formulario */
.av-preex-vista {
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.av-preex-vista-eti {
  display: block;
  margin-bottom: 5px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.av-preex-vista code {
  display: block;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--color-text);
  line-height: 1.5;
  word-break: break-word;
}

/* --- Documentación por módulos --- */
.venta-doc-modulo {
  margin-bottom: 22px;
  padding: 16px 18px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
}

.venta-doc-modulo-ok {
  border-color: var(--color-success);
  background: var(--color-success-soft, #E8F5EC);
}

.venta-doc-modulo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.venta-doc-modulo-cab h4 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Arrastrar y soltar --- */
.venta-doc-drop {
  transition: border-color .12s, background .12s, transform .12s;
}

.venta-doc-arrastrando {
  border-color: var(--color-accent) !important;
  background: var(--color-accent-soft) !important;
  border-style: dashed !important;
  transform: scale(1.01);
}

.venta-doc-arrastrar {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  font-style: italic;
}


/* ====================================================================
   ZONA DE ARRASTRE — visible, no escondida en un texto chico
   ==================================================================== */
.venta-doc-drop {
  display: block;
  padding: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}

.venta-doc-drop .venta-doc-info {
  padding: 12px 16px 10px;
}

.venta-doc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.89rem;
  font-weight: 700;
  color: var(--color-text);
  flex-wrap: wrap;
}

/* La zona propiamente dicha: grande, punteada, imposible de no ver */
/* ZONA DE SUBIDA — compacta.
   Antes ocupaba 16px de padding + borde de 2.5px + ícono de 30px, y en el
   paso de documentación de un desregulado hay SEIS de estas seguidas: la
   pantalla se volvía infinita y el vendedor scrolleaba a ciegas.
   Ahora entra el doble de documentos en la misma altura. */
.venta-doc-zona {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 9px 12px;
  background: var(--color-primary-soft);
  border: 1.5px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}

/* El hover NO va en terracota: eso es marca, no una acción. */
.venta-doc-zona:hover {
  background: #DCEAF3;
  border-color: var(--color-primary-dark);
}

.venta-doc-zona-icono {
  width: 20px !important;
  height: 20px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

.venta-doc-zona:hover .venta-doc-zona-icono {
  color: var(--color-primary-dark);
}

.venta-doc-zona-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.venta-doc-zona-texto strong {
  font-size: 0.82rem;
  color: var(--color-primary);
  font-weight: 700;
}

.venta-doc-zona-texto small {
  font-size: 0.79rem;
  color: var(--color-text-muted);
}

/* El "buscalo en tu compu" parece un enlace, no un botón */
.venta-doc-link {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.venta-doc-link:hover {
  color: var(--color-accent-dark);
}

/* Mientras se arrastra encima */
.venta-doc-arrastrando {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px var(--color-accent-soft), var(--shadow-lg) !important;
  transform: scale(1.01);
}

.venta-doc-arrastrando .venta-doc-zona {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  border-style: solid;
}

/* Ya subido: se ve verde y compacto */
.venta-doc-ok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-color: var(--color-success);
  background: var(--color-success-soft, #E8F5EC);
}

.venta-doc-ok .venta-doc-info {
  padding: 0;
}

.venta-doc-archivo {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-success);
  word-break: break-all;
}

/* Los opcionales, más apagados */
.venta-doc-opcional {
  border-style: dashed;
  opacity: 0.92;
}

.venta-doc-opcional .venta-doc-zona {
  background: var(--color-surface-alt);
  border-color: var(--color-border-fuerte);
}

.venta-doc-opcional .venta-doc-zona-icono,
.venta-doc-opcional .venta-doc-zona-texto strong {
  color: var(--color-text-muted);
}

/* ====================================================================
   MÓDULOS DE DOCUMENTACIÓN — más contraste
   ==================================================================== */
.venta-doc-modulo {
  margin-bottom: 24px;
  padding: 0;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
  overflow: hidden;
}

/* La cabecera del grupo ("TITULAR · 0 de 6") va DISCRETA.
   Antes era una barra petróleo sólida a todo el ancho, y la última era
   TERRACOTA. Con tres grupos, la pantalla tenía tres barras de color
   gritando, y las casillas —que es lo que el vendedor tiene que mirar—
   quedaban debajo, apagadas.

   Ahora es una etiqueta con una línea abajo: organiza sin competir. */
.venta-doc-modulo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0 2px 9px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
}

.venta-doc-modulo-cab h4 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.venta-doc-modulo-cab .chip {
  background: transparent;
  color: var(--color-text-muted);
  border: 0;
  font-weight: 500;
  font-size: 0.76rem;
  padding: 0;
  font-variant-numeric: tabular-nums;
}

/* Grupo completo: solo cambia el color del contador. No hace falta pintar
   una barra entera para decir "listo". */
.venta-doc-modulo-ok .venta-doc-modulo-cab {
  background: transparent;
}
.venta-doc-modulo-ok .venta-doc-modulo-cab h4,
.venta-doc-modulo-ok .venta-doc-modulo-cab .chip {
  color: var(--color-success);
}

.venta-doc-modulo {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: 22px;
}

.venta-doc-modulo .venta-docs {
  padding: 0;
}


/* --- Aviso de los 4 archivos separados --- */
.av-doc-aviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  padding: 14px 18px;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--color-text);
}

.av-doc-aviso .icon-svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.av-doc-aviso strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-primary);
  font-weight: 800;
}

/* ====================================================================
   ESTÉTICA GENERAL DE AVALIAN — contraste, bordes, sombras
   ==================================================================== */

/* Tarjetas de hijos: barra de color y elevación */
.av-hijo-card {
  padding: 20px 22px;
  margin-bottom: 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-base);
  transition: box-shadow .15s, transform .15s;
}

.av-hijo-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.av-hijo-titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Preexistencias: la tarjeta se pinta según lo que se declare */
.av-preex-card {
  padding: 20px 22px;
  margin-bottom: 16px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-left: 6px solid var(--color-border-fuerte);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-base);
  transition: border-color .15s, box-shadow .15s;
}

/* Declara enfermedad: se resalta en ámbar, para que salte a la vista */
.av-preex-activa {
  border-color: var(--color-warning);
  border-left-color: var(--color-warning);
  background: var(--color-warning-soft, #FEF7E8);
  box-shadow: 0 4px 16px rgba(217, 145, 32, 0.18);
}

.av-preex-cab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
  flex-wrap: wrap;
}

.av-preex-cab strong {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Resumen: bloques bien separados */
.av-resumen-bloque {
  padding: 18px 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-top: 5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}

.av-resumen-bloque h4 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Forma de pago: tarjetas grandes con elevación */
.av-pago-opciones .venta-opcion {
  padding: 18px 20px;
  border: 2.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.av-pago-opciones .venta-opcion:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-base);
  transform: translateY(-2px);
}

.av-pago-opciones .venta-opcion-activa {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: 0 6px 20px rgba(181, 71, 43, 0.22);
}

.av-pago-opciones .venta-opcion-activa strong {
  color: var(--color-accent-dark);
}

/* El número de tarjeta/CBU, bien legible */
.av-pago-input {
  padding: 14px 16px !important;
  border: 2.5px solid var(--color-border-fuerte) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.av-pago-input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 4px var(--color-accent-soft) !important;
}

.av-preex-vista code {
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}


/* ====================================================================
   DETALLE DE VENTA — bordes, sombras y contraste
   --------------------------------------------------------------------
   Antes las tarjetas eran blancas sobre blanco: no se distinguía dónde
   terminaba una y empezaba la otra.
   ==================================================================== */

/* Encabezado de la venta */
.seg-detalle-hero {
  border: 2px solid var(--color-border-fuerte);
  border-left: 6px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-base);
}

.seg-detalle-hero p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* Las tarjetas del detalle */
.seg-detalle-card {
  margin-bottom: 16px !important;
  padding: 18px 20px !important;
  background: var(--color-surface) !important;
  border: 2px solid var(--color-border-fuerte) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-base) !important;
  transition: box-shadow .15s, border-color .15s;
}

.seg-detalle-card:hover {
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--color-primary) !important;
}

.seg-detalle-card > h3 {
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* --- Desplegables --- */
.seg-desplegable {
  padding: 0 !important;
  overflow: hidden;
}

.seg-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  background: var(--color-surface-alt);
  border-bottom: 2px solid transparent;
  transition: background .12s;
}

/* Saca la flechita fea que pone el navegador */
.seg-summary::-webkit-details-marker { display: none; }
.seg-summary::marker { content: ''; }

.seg-summary:hover {
  background: var(--color-primary-soft);
}

.seg-summary h3 {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.seg-summary > .icon-svg:first-child {
  width: 18px !important;
  height: 18px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

/* La flecha gira al abrir */
.seg-summary-flecha {
  width: 17px !important;
  height: 17px !important;
  color: var(--color-text-muted);
  transition: transform .18s;
  flex-shrink: 0;
}

.seg-desplegable[open] > .seg-summary {
  background: var(--color-primary);
  border-bottom-color: var(--color-primary-dark);
}

.seg-desplegable[open] > .seg-summary h3,
.seg-desplegable[open] > .seg-summary > .icon-svg {
  color: #fff;
}

.seg-desplegable[open] .seg-summary-flecha {
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.85);
}

.seg-desplegable-cuerpo {
  padding: 14px 20px 16px;
}

/* --- Las filas de datos --- */
.seg-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.seg-dato:last-child {
  border-bottom: 0 !important;
}

.seg-dato span {
  color: var(--color-text-muted) !important;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}

.seg-dato strong {
  color: var(--color-text) !important;
  font-size: 0.89rem;
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

/* Los campos sin dato, apagados: se nota que están vacíos */
.seg-dato-vacio {
  color: var(--color-border-fuerte) !important;
  font-weight: 500 !important;
}

.seg-dato-extra {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Los botones de descarga, con aire */
.seg-descargas {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.seg-descargas button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: var(--shadow-sm);
}

.seg-descargas button:hover {
  box-shadow: var(--shadow-base);
  transform: translateY(-1px);
}


/* ====================================================================
   KANBAN — que las tarjetas resalten sobre el fondo
   ==================================================================== */

/* Seguimiento usa el fondo de siempre (el gris azulado de toda la app).
   Se probó con fondo azul y no funcionó: quedaba muy cargado. */

/* Cada tarjeta: borde, sombra, y se levanta al pasar el mouse */
.seg-card {
  background: var(--color-surface) !important;
  border: 2px solid var(--color-border-fuerte) !important;
  border-left: 5px solid var(--pg-color, var(--color-border-fuerte)) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  box-shadow: var(--shadow-base) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  cursor: pointer;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}

.seg-card:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
  border-color: var(--pg-color, var(--color-primary)) !important;
}

/* La que espera respuesta tuya: terracota, imposible de no ver */
.seg-card-pendiente {
  border-color: var(--color-accent) !important;
  border-left-color: var(--color-accent) !important;
  background: var(--color-accent-soft) !important;
  box-shadow: 0 5px 18px rgba(181, 71, 43, 0.24) !important;
}

.seg-card-aviso {
  margin: 0 0 8px !important;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.seg-card .lead-nombre {
  margin: 0 0 4px !important;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.35;
}

.seg-card .lead-dato {
  margin: 0 0 8px !important;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.seg-card-prepaga {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

/* Las columnas, con más presencia */
.kanban-column {
  background: var(--color-surface) !important;
  border: 2px solid var(--color-border-fuerte) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}


/* ====================================================================
   COLUMNAS DEL KANBAN — cabecera de color, altura pareja
   --------------------------------------------------------------------
   Cada estado ya traía su color en `--col-color`, pero se usaba solo en
   un puntito. Ahora pinta toda la cabecera.
   Antes las cabeceras tenían distinta altura según el largo del texto:
   ahora son todas iguales.
   ==================================================================== */

/* =====================================================================
   COLUMNAS DEL CRM
   =====================================================================
   Antes las nueve cabeceras eran BLOQUES MACIZOS de petróleo, de 96px de
   alto, todas iguales. El tablero etiquetaba pero no informaba: el vendedor
   tenía que leer los nueve títulos para saber dónde había trabajo suyo.

   Ahora el color de la columna dice qué significa el estado, y la cabecera
   es una franja fina en vez de un bloque:

     GRIS     -> Sin gestionar. No lo tocaste.
     PETRÓLEO -> En curso. Va bien, nadie trabado.
     ÁMBAR    -> TE ESPERA A VOS. Cada día que pasa el lead se enfría.
     VERDE    -> Se convirtió en venta.
     ROJO     -> Se perdió.

   Las columnas en ámbar tienen además el FONDO ámbar: son las que piden
   trabajo. Se ven de lejos, sin leer nada.
   ===================================================================== */

.kanban-column {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* El borde COMPLETO toma el color del estado, no solo la franja de arriba.
     Con el borde gris, la franja quedaba suelta —parecía pegada encima, no
     parte de la columna—. Ahora el color rodea todo y cada columna se lee
     como una unidad. */
  border: 2px solid var(--col-color, var(--color-border-fuerte)) !important;
  border-top: 5px solid var(--col-color, var(--color-border-fuerte)) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--form-campo-fondo);
  box-shadow: var(--shadow-sm);
}

/* La cabecera también cierra con el color: sin esto, la línea entre la
   cabecera y el cuerpo cortaba la columna al medio. */
.kanban-column .kanban-column-header {
  border-bottom: 2px solid var(--col-color, var(--color-border));
}

/* La cabecera: una franja, no un bloque de 96px. */
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  margin: 0;
  padding: 11px 13px;
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
}

.kanban-col-titulo {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.3;
}

/* Cuántos leads hay en esta columna. Antes había que contarlos a ojo. */
.kanban-col-cant {
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

/* --- Los niveles --- */
.kanban-column.col-nuevo  { --col-color: #8A94A6; }
.kanban-column.col-curso  { --col-color: var(--color-primary); }
.kanban-column.col-curso .kanban-col-cant {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ÁMBAR: acá hay trabajo tuyo. La columna entera se tiñe. */
.kanban-column.col-espera { --col-color: var(--aviso-cuidado-icono); }
.kanban-column.col-espera .kanban-column-body { background: #FEF6E7; }
.kanban-column.col-espera .kanban-col-titulo  { color: var(--aviso-cuidado-titulo); }
.kanban-column.col-espera .kanban-col-cant {
  color: #fff;
  background: var(--aviso-cuidado-icono);
  border-color: var(--aviso-cuidado-icono);
}

.kanban-column.col-ok { --col-color: var(--color-success); }
.kanban-column.col-ok .kanban-column-body { background: #E7F6EE; }
.kanban-column.col-ok .kanban-col-titulo  { color: #1D6640; }
.kanban-column.col-ok .kanban-col-cant {
  color: #fff;
  background: var(--color-success);
  border-color: var(--color-success);
}

.kanban-column.col-caido { --col-color: var(--aviso-peligro-icono); }
.kanban-column.col-caido .kanban-column-body { background: #FCEDEC; }
.kanban-column.col-caido .kanban-col-titulo  { color: var(--aviso-peligro-titulo); }
.kanban-column.col-caido .kanban-col-cant {
  color: #fff;
  background: var(--aviso-peligro-icono);
  border-color: var(--aviso-peligro-icono);
}

/* --- La leyenda --- */
.kanban-leyenda {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}
.kanban-leyenda-tit {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.kanban-leyenda-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.kanban-leyenda-item .pt {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}
.pt-espera { background: var(--aviso-cuidado-icono); }
.pt-ok     { background: var(--color-success); }
.pt-caido  { background: var(--aviso-peligro-icono); }

.kanban-col-titulo span:not(.seg-col-count) {
  flex: 1;
  font-size: 0.76rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}

.kanban-col-icono {
  width: 17px !important;
  height: 17px !important;
  color: #fff;
  flex-shrink: 0;
}

/* El contador: círculo blanco sobre el color */
.seg-col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--col-color, var(--color-primary));
  flex-shrink: 0;
}

/* La ayuda, en blanco translúcido sobre el color */
.kanban-col-ayuda {
  margin: 0 !important;
  font-size: 0.72rem !important;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 500;
}

/* El cuerpo: fondo muy suave del mismo color, para que se note a qué
   columna pertenece cada tarjeta */
.kanban-column-body {
  flex: 1;
  padding: 12px 10px;
  background: color-mix(in srgb, var(--col-color) 7%, #fff);
  min-height: 130px;
}

/* Columna urgente: la cabecera pulsa en terracota */
.kanban-col-urgente {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px var(--color-accent-soft), 0 6px 20px rgba(0, 0, 0, 0.28) !important;
}

.kanban-col-urgente .kanban-column-header {
  background: var(--color-accent);
}

.kanban-col-urgente .seg-col-count {
  color: var(--color-accent);
}

.seg-col-vacia {
  margin: 0;
  padding: 26px 0;
  text-align: center;
  color: var(--color-border-fuerte);
  font-weight: 700;
}

/* La etiqueta de prepaga en la tarjeta ya no se corta */
.seg-card-prepaga {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Botón de un archivo que no se generó: se ve, pero no se puede tocar */
.btn-falta {
  opacity: 0.5;
  cursor: not-allowed;
  border-style: dashed !important;
  color: var(--color-text-muted) !important;
}

.btn-falta:hover {
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}


/* ====================================================================
   AUDITORÍA
   --------------------------------------------------------------------
   Antes estaba todo con estilos escritos a mano, fuera del sistema de
   diseño. Y la tarjeta mostraba TODOS los datos de golpe: ahora solo lo
   esencial, y el resto en un desplegable.
   ==================================================================== */

/* --- Pestañas --- */
.audit-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.audit-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all .14s;
}

.audit-tab:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-base);
  transform: translateY(-1px);
}

.audit-tab.activo {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
  box-shadow: 0 4px 14px rgba(181, 71, 43, 0.2);
}

.audit-tab .icon-svg {
  width: 16px !important;
  height: 16px !important;
}

.audit-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  background: var(--color-danger);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
}

/* --- La tarjeta --- */
.audit-card {
  margin-bottom: 14px;
  padding: 18px 20px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-left: 6px solid var(--color-danger);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: var(--shadow-base);
  transition: box-shadow .15s, transform .15s;
}

.audit-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}

.audit-card-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.audit-card-titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.audit-card-titulo h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-text);
}

.audit-dni {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* Quién pidió la eliminación: lo único que se ve sin expandir */
.audit-pedido {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 0.87rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.audit-pedido .icon-svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--color-text-muted);
}

.audit-pedido strong {
  color: var(--color-text);
  font-weight: 700;
}

.audit-fecha {
  font-size: 0.8rem;
  color: var(--color-border-fuerte);
}

/* --- El desplegable con el resto --- */
.audit-mas {
  margin-bottom: 16px;
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.audit-mas summary {
  padding: 9px 14px;
  background: var(--color-surface-alt);
  cursor: pointer;
  user-select: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  list-style: none;
}

.audit-mas summary::-webkit-details-marker { display: none; }
.audit-mas summary::marker { content: ''; }

.audit-mas summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform .15s;
}

.audit-mas[open] summary::before {
  content: "▾ ";
}

.audit-mas summary:hover {
  background: var(--color-primary-soft);
}

.audit-mas-cuerpo {
  padding: 12px 14px;
}

.audit-dato {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.86rem;
}

.audit-dato:last-child {
  border-bottom: 0;
}

.audit-dato span {
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.audit-dato strong {
  color: var(--color-text);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}

/* --- Los botones --- */
.audit-acciones {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 2px solid var(--color-border);
}


/* ====================================================================
   CHECKPOINT DE CONTACTO — que no pase desapercibido
   --------------------------------------------------------------------
   Si el teléfono o el mail están mal, la prepaga no puede hacer la
   auditoría y el trámite se frena. Es de los errores más caros, así que
   el aviso tiene que verse.
   ==================================================================== */
.venta-checkpoint {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--color-warning-soft, #FEF7E8);
  border: 2px solid var(--color-warning);
  border-left: 6px solid var(--color-warning);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

.venta-checkpoint p {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

/* Ya confirmado: pasa a verde */
.venta-checkpoint-ok {
  background: var(--color-success-soft, #E8F5EC);
  border-color: var(--color-success);
  border-left-color: var(--color-success);
}


/* --- Responsable de pago cuando es un tercero --- */
.av-tercero {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-border-fuerte);
  border-left: 6px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
}

.av-tercero-aviso {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 13px;
  background: var(--color-warning-soft, #FEF7E8);
  border: 1.5px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--color-text);
}

.av-tercero-aviso .icon-svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--color-warning);
  flex-shrink: 0;
  margin-top: 1px;
}


/* Cuando paga el titular o el cónyuge: no hay que subir nada más */
.av-resp-ok {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--color-success-soft, #E8F5EC);
  border: 2px solid var(--color-success);
  border-left: 6px solid var(--color-success);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--color-text);
}

.av-resp-ok .icon-svg {
  width: 19px !important;
  height: 19px !important;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 1px;
}

.av-resp-ok strong {
  color: var(--color-success);
}


/* ====================================================================
   ARCHIVOS DE LA VENTA — cada uno con "Ver" y "Bajar"
   ==================================================================== */
.seg-archivos {
  display: grid;
  gap: 10px;
}

.seg-archivo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  transition: border-color .12s, box-shadow .12s;
  flex-wrap: wrap;
}

.seg-archivo:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.seg-archivo-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.89rem;
  font-weight: 700;
  color: var(--color-text);
}

.seg-archivo-info .icon-svg {
  width: 19px !important;
  height: 19px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

.seg-archivo-acciones {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seg-archivo-acciones .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

/* El que no se generó */
.seg-archivo-falta {
  border-style: dashed;
  background: transparent;
  opacity: 0.6;
}

.seg-archivo-falta:hover {
  border-color: var(--color-border);
  box-shadow: none;
}

.seg-archivo-falta .icon-svg {
  color: var(--color-danger);
}

.seg-archivo-falta small {
  font-weight: 600;
  color: var(--color-text-muted);
  font-style: italic;
}


/* ====================================================================
   MODAL "VENTA ENVIADA" — con los archivos listados
   ==================================================================== */
.venta-enviada-overlay {
  background: rgba(11, 18, 32, 0.55);
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
}

.venta-enviada-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px 26px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.venta-enviada-cab {
  margin-bottom: 20px;
}

.venta-enviada-cab .icon-svg {
  width: 52px !important;
  height: 52px !important;
  color: var(--color-success);
  margin-bottom: 10px;
}

.venta-enviada-cab h3 {
  margin: 0 0 6px;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--color-success);
}

.venta-enviada-cab p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

.venta-enviada-sub {
  margin: 0 0 12px;
  font-size: 0.87rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
}

.venta-enviada-archivos {
  display: grid;
  gap: 9px;
  margin-bottom: 20px;
  text-align: left;
}

.venta-enviada-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 20px;
  padding: 12px 14px;
  background: var(--color-success-soft, #E8F5EC);
  border: 1.5px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  color: var(--color-text);
}

.venta-enviada-pie .icon-svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--color-success);
  flex-shrink: 0;
}

.venta-enviada-card .btn-primario {
  min-width: 170px;
}


/* ====================================================================
   MODAL "VENTA ENVIADA" — con los archivos por separado
   --------------------------------------------------------------------
   Antes se descargaban todos juntos de golpe y muchos vendedores no se
   daban cuenta de que eran varios. Ahora se listan uno por uno, con
   "Ver" y "Bajar", igual que los ve el área administrativa.
   ==================================================================== */
.venta-enviada-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  overflow-y: auto;
}

.venta-enviada-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 560px;
  width: 100%;
  padding: 28px 26px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
}

.venta-enviada-cab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  margin-bottom: 18px;
}

.venta-enviada-cab .icon-svg {
  width: 52px !important;
  height: 52px !important;
  color: var(--color-success);
}

.venta-enviada-cab h3 {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--color-success);
}

.venta-enviada-cab p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.venta-enviada-archivos {
  display: grid;
  gap: 9px;
  margin: 20px 0;
  padding: 16px;
  background: var(--color-surface-alt);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
}

.venta-enviada-titulo {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.venta-enviada-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  background: var(--color-success-soft, #E8F5EC);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 18px;
}

.venta-enviada-pie .icon-svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--color-success);
  flex-shrink: 0;
}

.venta-enviada-nota {
  padding: 12px 14px;
  background: var(--color-success-soft, #E8F5EC);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 18px;
}

.venta-enviada-card .btn-primario {
  width: 100%;
}


/* ====================================================================
   DETALLE DE LA VENTA — jerarquía visual
   --------------------------------------------------------------------
   Estaba todo blanco sobre gris: no se distinguía qué era importante.
   Ahora cada zona tiene su peso: la cabecera identifica, los datos se
   consultan, los archivos se usan, y la gestión decide.
   ==================================================================== */

/* --- CABECERA: la identidad de la venta, en azul --- */
.seg-detalle-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: 0;
  border-left: 6px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 6px 22px rgba(27, 90, 125, 0.28);
  padding: 22px 26px;
}

.seg-detalle-hero h2 {
  color: #fff;
  font-size: 1.34rem;
  font-weight: 800;
  margin: 0 0 10px;
}

/* Todo el texto de adentro va en blanco: si no, queda oscuro sobre el azul
   y no se lee. Comparte la clase `hero-card`, que trae fondo blanco, así que
   hay que ser explícito. */
.seg-detalle-hero p,
.seg-detalle-hero .lead-dato,
.seg-detalle-hero span:not(.prepaga-tag):not(.seg-estado) {
  color: rgba(255, 255, 255, 0.9) !important;
}

.seg-detalle-hero p {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.88rem;
}

/* El chip de prepaga y el estado, sobre el azul */
.seg-detalle-hero .prepaga-tag {
  background: rgba(255, 255, 255, 0.95);
  font-weight: 800;
}

/* El chip de estado ya trae su color propio (cada estado el suyo). Solo lo
   reforzamos para que se lea bien sobre el azul. */
.seg-detalle-hero .seg-estado {
  border: 2px solid rgba(255, 255, 255, 0.5);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- DESPLEGABLES: se consultan, van sobrios pero con acento --- */
.seg-desplegable {
  border: 2px solid var(--color-border-fuerte);
  border-left: 5px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .14s, border-color .14s;
}

.seg-desplegable:hover {
  box-shadow: var(--shadow-base);
}

.seg-desplegable[open] {
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-base);
}

.seg-desplegable summary.seg-summary {
  background: var(--color-surface-alt);
  padding: 15px 18px;
  transition: background .12s;
}

.seg-desplegable[open] summary.seg-summary {
  background: var(--color-primary-soft);
  border-bottom: 2px solid var(--color-border);
}

.seg-desplegable summary.seg-summary:hover {
  background: var(--color-primary-soft);
}

.seg-desplegable .seg-summary h3 {
  color: var(--color-primary);
  font-weight: 800;
}

.seg-desplegable .seg-summary .icon-svg {
  color: var(--color-accent);
}

/* --- ARCHIVOS: es lo que el administrativo viene a buscar --- */
/* La tarjeta de archivos: es lo que el administrativo viene a buscar, así que
   va destacada en terracota. (Se usa :has() y también la clase directa, por
   si el navegador es viejo y no soporta :has.) */
.seg-detalle-card:has(.seg-archivos),
.seg-card-archivos {
  border: 2px solid var(--color-accent);
  border-left: 6px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  box-shadow: 0 5px 20px rgba(181, 71, 43, 0.16);
}

.seg-detalle-card:has(.seg-archivos) > h3,
.seg-card-archivos > h3 {
  color: var(--color-accent-dark);
  font-weight: 800;
}

/* Cada archivo, con el color de su tipo */
.seg-archivo {
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-left: 5px solid var(--color-primary);
}

.seg-archivo:hover {
  border-color: var(--color-primary);
  border-left-color: var(--color-accent);
  box-shadow: var(--shadow-base);
  transform: translateX(2px);
}

.seg-archivo-info .icon-svg {
  color: var(--color-accent);
}

/* --- GESTIÓN: acá se decide, va destacado --- */
.seg-gestion {
  background: var(--color-surface-warm);
  border: 2px solid var(--color-border-fuerte);
  border-top: 5px solid var(--color-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-base);
}

.seg-gestion h3 {
  color: var(--color-primary);
  font-weight: 800;
}


/* ====================================================================
   ADJUNTOS EN EL HILO DE CONVERSACIÓN
   --------------------------------------------------------------------
   El administrativo manda cupones de pago y capturas; el asesor responde
   con la documentación que le pidieron. Todo dentro del hilo.
   ==================================================================== */

/* El archivo elegido, antes de mandarlo */
.seg-hilo-adjunto {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary);
}

.seg-hilo-adjunto .icon-svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}

.seg-hilo-adjunto span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seg-hilo-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-danger);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .12s;
}

.seg-hilo-quitar:hover {
  background: var(--color-danger-soft);
}

.seg-hilo-quitar .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

/* La botonera: adjuntar + enviar */
.seg-hilo-acciones {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.seg-hilo-clip {
  cursor: pointer;
  user-select: none;
}

.seg-hilo-acciones .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

.seg-hilo-acciones .btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* El archivo YA enviado, dentro de la burbuja del mensaje */
.seg-mensaje-adjunto {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
}

.seg-mensaje-adjunto .icon-svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

.seg-mensaje-adjunto-nombre {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text);
}

.seg-mensaje-adjunto-btns {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.btn-mini {
  padding: 4px 10px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  transition: all .12s;
}

.btn-mini:hover {
  background: var(--color-primary);
  color: #fff;
}


/* Aviso en la tarjeta: llegó algo que todavía no se miró */
.seg-card-nuevo {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 10px;
  background: var(--color-accent);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 2px 8px rgba(181, 71, 43, 0.3);
}

.seg-card-nuevo-archivo {
  background: #7c3aed;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}


/* ====================================================================
   MIS TAREAS — filtro y tarjetas
   --------------------------------------------------------------------
   Con siete tarjetas, en el celular no entran todas. El filtro deja
   elegir qué mirar.
   ==================================================================== */
.tareas-filtros {
  display: flex;
  gap: 8px;
  margin: 16px 0 4px;
  flex-wrap: wrap;
}

.tareas-filtro {
  padding: 9px 16px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all .13s;
}

.tareas-filtro:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tareas-filtro.activo {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 3px 12px rgba(27, 90, 125, 0.25);
}

.tareas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

/* En el celular, una sola columna: se leen todas sin achicar nada */
@media (max-width: 640px) {
  .tareas-grid {
    grid-template-columns: 1fr;
  }

  .tareas-filtro {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    font-size: 0.79rem;
  }
}

.tareas-vacio {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  background: var(--color-success-soft, #E8F5EC);
  border: 2px dashed var(--color-success);
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-success);
}

.tareas-vacio .icon-svg {
  width: 22px !important;
  height: 22px !important;
}


/* Campos extra que pide Prevención y Avalian no (banco, IVA) */
.pv-extra {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px dashed var(--color-border-fuerte);
}

.pv-extra .venta-grupo {
  margin: 0;
}


/* Aclaración debajo de la etiqueta de un campo
   (ej: "Tomalo de la cotización") */
.venta-ayuda-campo {
  display: block;
  margin: -2px 0 6px;
  font-size: 0.76rem;
  font-weight: 600;
  font-style: italic;
  color: var(--color-text-muted);
}


/* Link para descargar un documento que el vendedor quizás no tiene
   (CODEM, padrón, sábana de aportes, certificación negativa) */
.venta-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 6px 12px;
  background: var(--color-primary-soft);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
  transition: all .12s;
}

.venta-doc-link:hover {
  background: var(--color-primary);
  color: #fff;
}

.venta-doc-link .icon-svg {
  width: 13px !important;
  height: 13px !important;
}


/* Qué tarjeta es (Visa, Mastercard, etc.) */
.av-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.av-tarjeta-opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 10px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all .12s;
  text-align: center;
}

.av-tarjeta-opcion:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.av-tarjeta-opcion input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.av-tarjeta-opcion span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.av-tarjeta-opcion.activa {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(27, 90, 125, 0.18);
}

.av-tarjeta-opcion.activa span {
  color: var(--color-primary);
}
/* =====================================================================
   AVISOS QUE NO SE PUEDEN IGNORAR
   ---------------------------------------------------------------------
   Una leyenda en gris chiquito no la lee nadie. Y cuando el vendedor no
   la lee, la venta sale mal, la prepaga la rechaza, y se pierden días.

   Clave: el sistema es AZUL. Si el aviso también es azul, se pierde
   contra el fondo. Por eso los avisos van en TERRACOTA: es el único
   color que corta contra el resto de la interfaz.
   ===================================================================== */

/* ---------------------------------------------------------------------
   "Estos montos salen de la cotización"
   Va entre medio de los campos, justo arriba de Aportes y Diferencia.
   --------------------------------------------------------------------- */
.venta-alerta-fuerte {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  border-left-width: 5px;
  border-radius: var(--radius-sm);

  padding: 12px 14px;
  margin: 4px 0 12px;
}

.venta-alerta-fuerte-icono {
  font-size: 1.25rem;
  line-height: 1.1;
  flex-shrink: 0;
}

.venta-alerta-fuerte-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.venta-alerta-fuerte-texto strong {
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.venta-alerta-fuerte-texto span {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.4;
}


/* ---------------------------------------------------------------------
   LINK PARA DESCARGAR EL DOCUMENTO (CODEM, padrón, sábana, cert. negativa)
   ---------------------------------------------------------------------
   Antes esto salía en azul y se perdía: la interfaz entera es azul.
   Ahora va en terracota, con borde grueso. Salta a la vista.
   --------------------------------------------------------------------- */
/* "¿No lo tenés todavía? → Descargalo desde ANSES"
   Esto es INFORMACIÓN ÚTIL, no una alarma. Antes salía en terracota con
   borde de 2px, o sea, gritando como si algo estuviera mal. El vendedor
   veía seis de estos en rojo y dejaba de mirarlos.
   Va con el estilo INFO: presente, tranquilo, no urgente. */
.venta-doc-descarga {
  display: flex;
  align-items: center;
  gap: 9px;

  background: var(--aviso-info-fondo);
  border: 1px solid var(--color-primary-soft);
  border-left: 3px solid var(--aviso-info-borde);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  padding: 7px 12px;
  margin: 5px 0 8px;

  text-decoration: none;
  transition: all .12s;
}

.venta-doc-descarga:hover {
  background: #DCEAF3;
}

.venta-doc-descarga:hover .venta-doc-descarga-txt strong,
.venta-doc-descarga:hover .venta-doc-descarga-txt em,
.venta-doc-descarga:hover .icon-svg {
  color: #fff;
}

.venta-doc-descarga .icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: color .12s;
}

.venta-doc-descarga-flecha {
  margin-left: auto;
  width: 15px !important;
  height: 15px !important;
  opacity: 0.7;
}

.venta-doc-descarga-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.venta-doc-descarga-txt strong {
  color: var(--aviso-info-titulo);
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 800;
  transition: color .12s;
}

.venta-doc-descarga-txt em {
  color: #475569;
  font-size: 0.8rem;
  font-style: normal;
  text-decoration: underline;
  transition: color .12s;
}
/* =====================================================================
   AVISOS QUE NO SE PUEDEN IGNORAR
   ---------------------------------------------------------------------
   Una leyenda en gris chiquito no la lee nadie. Y cuando el vendedor no
   la lee, la venta sale mal, la prepaga la rechaza, y se pierden días.

   Clave: el sistema es AZUL. Si el aviso también es azul, se pierde
   contra el fondo. Por eso los avisos van en TERRACOTA: es el único
   color que corta contra el resto de la interfaz.
   ===================================================================== */

/* ---------------------------------------------------------------------
   "Estos montos salen de la cotización"
   Va entre medio de los campos, justo arriba de Aportes y Diferencia.
   --------------------------------------------------------------------- */
.venta-alerta-fuerte {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  background: var(--color-accent-soft);
  border: 2px solid var(--color-accent);
  border-left-width: 5px;
  border-radius: var(--radius-sm);

  padding: 12px 14px;
  margin: 4px 0 12px;
}

.venta-alerta-fuerte-icono {
  font-size: 1.25rem;
  line-height: 1.1;
  flex-shrink: 0;
}

.venta-alerta-fuerte-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.venta-alerta-fuerte-texto strong {
  color: var(--color-accent);
  font-size: 0.9rem;
  font-weight: 800;
}

.venta-alerta-fuerte-texto span {
  color: #475569;
  font-size: 0.82rem;
  line-height: 1.4;
}


/* ---------------------------------------------------------------------
   LINK PARA DESCARGAR EL DOCUMENTO (CODEM, padrón, sábana, cert. negativa)
   ---------------------------------------------------------------------
   Antes esto salía en azul y se perdía: la interfaz entera es azul.
   Ahora va en terracota, con borde grueso. Salta a la vista.
   --------------------------------------------------------------------- */
/* "¿No lo tenés todavía? → Descargalo desde ANSES"
   Esto es INFORMACIÓN ÚTIL, no una alarma. Antes salía en terracota con
   borde de 2px, o sea, gritando como si algo estuviera mal. El vendedor
   veía seis de estos en rojo y dejaba de mirarlos.
   Va con el estilo INFO: presente, tranquilo, no urgente. */
.venta-doc-descarga {
  display: flex;
  align-items: center;
  gap: 9px;

  background: var(--aviso-info-fondo);
  border: 1px solid var(--color-primary-soft);
  border-left: 3px solid var(--aviso-info-borde);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  padding: 7px 12px;
  margin: 5px 0 8px;

  text-decoration: none;
  transition: all .12s;
}

.venta-doc-descarga:hover {
  background: #DCEAF3;
}

.venta-doc-descarga:hover .venta-doc-descarga-txt strong,
.venta-doc-descarga:hover .venta-doc-descarga-txt em,
.venta-doc-descarga:hover .icon-svg {
  color: #fff;
}

.venta-doc-descarga .icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: color .12s;
}

.venta-doc-descarga-flecha {
  margin-left: auto;
  width: 15px !important;
  height: 15px !important;
  opacity: 0.7;
}

.venta-doc-descarga-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.venta-doc-descarga-txt strong {
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 800;
  transition: color .12s;
}

.venta-doc-descarga-txt em {
  color: #475569;
  font-size: 0.8rem;
  font-style: normal;
  text-decoration: underline;
  transition: color .12s;
}


/* ---------------------------------------------------------------------
   DOCUMENTO CRÍTICO (la certificación negativa)
   ---------------------------------------------------------------------
   Es el que más trámites hace rebotar: viene en una o dos hojas según
   el color de la leyenda, y si el vendedor manda una sola cuando eran
   dos, la prepaga lo rechaza. Va con marco propio.
   --------------------------------------------------------------------- */
.venta-doc-critico {
  border: 2px solid var(--color-accent) !important;
  border-radius: var(--radius-md);
  background: #FFFBF9;
  padding: 12px !important;
}

.venta-doc-critico .venta-doc-label {
  color: var(--color-accent);
  font-weight: 800;
}

.venta-doc-critico .venta-doc-ayuda {
  color: #475569;
  font-weight: 600;
}


/* =====================================================================
   SALIR DEL ASISTENTE
   ---------------------------------------------------------------------
   Antes no existía: el vendedor que estaba en el paso 9 de 17 y quería
   irse tenía que cerrar el navegador y perdía todo lo cargado.
   ===================================================================== */

.btn-salir {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-left: auto;          /* se va al extremo, lejos de Continuar */
  padding: 9px 14px;

  background: transparent;
  border: 1px solid #CBD5E1;
  border-radius: var(--radius-sm);

  color: #64748B;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
}

.btn-salir:hover {
  background: #F1F5F9;
  border-color: #94A3B8;
  color: #334155;
}

.btn-salir .icon-svg {
  width: 15px;
  height: 15px;
}

/* La barra de navegación tiene que dejar que Salir se vaya a la derecha */
.venta-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.venta-modal-salir {
  max-width: 480px;
}

.venta-modal-salir h3 {
  margin: 0 0 8px;
}

.venta-modal-salir p {
  margin: 0 0 18px;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.5;
}

.venta-salir-botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venta-salir-botones button {
  width: 100%;
}
/* =====================================================================
   ESCALA DE AVISOS
   =====================================================================
   Tres niveles, tres significados. El vendedor aprende el código una vez
   y después lo lee sin pensar:

     .venta-aviso-info      -> dato útil, no bloquea nada
     .venta-aviso-cuidado   -> si te equivocás, la venta se DEMORA
     .venta-aviso-peligro   -> si te lo salteás, la venta se RECHAZA

   El PELIGRO es el único con borde. Si todos tuvieran borde, el borde no
   significaría nada.

   El terracota NO está acá: es la marca, no una alarma.
   ===================================================================== */

.venta-aviso {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 1rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.venta-aviso i,
.venta-aviso .icon-svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}
.venta-aviso-titulo {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.4;
}
.venta-aviso-texto {
  font-size: 0.82rem;
  line-height: 1.5;
}
.venta-aviso-texto strong { font-weight: 600; }

.venta-aviso-info {
  background: var(--aviso-info-fondo);
}
.venta-aviso-info i,
.venta-aviso-info .icon-svg { color: var(--aviso-info-icono); }
.venta-aviso-info .venta-aviso-titulo { color: var(--aviso-info-titulo); }
.venta-aviso-info .venta-aviso-texto  { color: var(--aviso-info-texto); }

.venta-aviso-cuidado {
  background: var(--aviso-cuidado-fondo);
}
.venta-aviso-cuidado i,
.venta-aviso-cuidado .icon-svg { color: var(--aviso-cuidado-icono); }
.venta-aviso-cuidado .venta-aviso-titulo { color: var(--aviso-cuidado-titulo); }
.venta-aviso-cuidado .venta-aviso-texto  { color: var(--aviso-cuidado-texto); }

/* El único con borde: tiene que saltar sin gritar. */
.venta-aviso-peligro {
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
}
.venta-aviso-peligro i,
.venta-aviso-peligro .icon-svg { color: var(--aviso-peligro-icono); }
.venta-aviso-peligro .venta-aviso-titulo { color: var(--aviso-peligro-titulo); }
.venta-aviso-peligro .venta-aviso-texto  { color: var(--aviso-peligro-texto); }


/* =====================================================================
   CAMPOS EN BLOQUE
   =====================================================================
   Cada campo vive en su propio bloque gris. Así el ojo agrupa lo que va
   junto sin necesidad de líneas divisorias.                            */

.venta-campo-bloque {
  background: var(--form-campo-fondo);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.venta-campo-bloque label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

/* --- La barra de cuota pura ---
   Toma el color de la PREPAGA, no el petróleo. Es la referencia visual
   que le dice al vendedor en qué prepaga está trabajando, y de paso le
   muestra la base de su comisión mientras carga. */
.venta-cuota-pura {
  background: var(--prepaga-color, var(--color-primary));
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 1rem;
}
.venta-cuota-pura-label {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.78);
}
.venta-cuota-pura-monto {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =====================================================================
   CASILLAS DE DOCUMENTACIÓN — rediseño
   =====================================================================
   ANTES: el nombre del documento arriba, y debajo una caja punteada
   enorme de 80px que decía "Arrastrá el archivo acá". Dos elementos por
   documento, y con SEIS documentos el paso se volvía infinito: el
   vendedor scrolleaba a ciegas.

   Además el aviso ("el recibo no puede tener más de 2 meses") vivía
   arriba de todo el paso: el vendedor lo leía una vez y después soltaba
   seis archivos sin volver a mirarlo.

   AHORA: LA CASILLA ES LA ZONA DE ARRASTRE. Una sola cosa por documento.
   Y el aviso va DENTRO de la casilla, arriba del nombre: el vendedor lo
   lee justo en el momento en que va a soltar ese archivo.

   El BORDE dice el nivel de riesgo:
     punteado azul   -> normal
     punteado ámbar  -> si está mal, la venta se DEMORA
     punteado rojo   -> si está mal, la venta se RECHAZA
     sólido verde    -> ya subido (deja de ser punteado: ya no hay nada
                        que soltar ahí)
   ===================================================================== */

.venta-doc {
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.venta-doc-normal {
  border: 1.5px dashed #A8BFD0;
  background: #FAFCFD;
}
.venta-doc-normal:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.venta-doc-cuidado {
  border: 1.5px dashed #E0B589;
  background: #FFFDF7;
}
.venta-doc-cuidado:hover {
  border-color: var(--aviso-cuidado-borde);
}

.venta-doc-peligro {
  border: 1.5px dashed #E8A9A3;
  background: #FFFBFB;
}
.venta-doc-peligro:hover {
  border-color: var(--aviso-peligro-icono);
}

/* Ya subido: borde SÓLIDO, no punteado. El punteado significa "podés
   soltar algo acá"; una vez subido, eso ya no aplica. */
.venta-doc-ok {
  border: 1.5px solid #2E7D4F;
  background: #F4FBF7;
}

/* Mientras se arrastra un archivo encima */
.venta-doc-arrastrando {
  border-style: solid !important;
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
}

/* --- La cabecera: el aviso de ESTE documento --- */

.venta-doc-cab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 0;
  font-size: 0.76rem;
  line-height: 1.4;
  font-weight: 600;
}
.venta-doc-cab .icon-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.venta-doc-cab-flecha {
  width: 12px !important;
  height: 12px !important;
  vertical-align: -1px;
}

.venta-doc-cab-cuidado { color: var(--aviso-cuidado-titulo); }
.venta-doc-cab-peligro { color: var(--aviso-peligro-titulo); }
.venta-doc-cab-info    { color: var(--color-primary); font-weight: 500; }
.venta-doc-cab-info a {
  color: var(--color-primary);
  text-decoration: underline;
}
.venta-doc-cab-info a:hover { color: var(--color-primary-dark); }

/* --- El cuerpo: ícono + nombre + botón --- */

.venta-doc-cuerpo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}
.venta-doc-icono {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
  color: var(--color-primary);
}
.venta-doc-ok .venta-doc-icono { color: #2E7D4F; }

.venta-doc-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.venta-doc-label {
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 500;
}
.venta-doc-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}
.venta-doc-hint {
  font-size: 0.76rem;
  color: var(--color-text-muted);
}
.venta-doc-archivo {
  font-size: 0.76rem;
  color: #1D6640;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El botón "Buscar" / "Cambiar" va NEUTRO, no en petróleo fuerte.
   Hay seis de estos en la pantalla: si todos fueran petróleo,
   competirían con "Enviar venta", que es la acción de verdad. */
.venta-doc-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border-fuerte);
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.venta-doc-btn:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
}
.venta-doc-ok .venta-doc-btn {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

/* =====================================================================
   CAMPO CON ERROR — que se vea sin leer
   =====================================================================
   Antes, cuando faltaba completar algo, el sistema mostraba una leyenda
   abajo de todo: "Completá el campo Número de CUIL/CUIT". Pero el campo
   en cuestión se veía IGUAL que los otros once de la pantalla. El
   vendedor tenía que leer el error y después buscar el campo con la
   vista, uno por uno.

   Ahora el campo que falta se marca solo:
     - fondo rojo lavado en todo el bloque
     - borde rojo de 2px con halo
     - etiqueta en rojo, con ícono
     - una línea abajo diciendo qué falta

   Y el botón "Continuar" queda apagado: antes se podía tocar y no pasaba
   nada, que es peor —el vendedor cree que el sistema se colgó.
   ===================================================================== */

.venta-grupo-campo.venta-campo-error {
  background: var(--campo-error-fondo);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  margin: -9px -10px;
}

.venta-campo-error label,
.venta-campo-error .venta-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--campo-error-texto) !important;
  font-weight: 600;
}

.venta-campo-error .venta-campo-texto,
.venta-campo-error .venta-campo-select,
.venta-campo-error input,
.venta-campo-error select {
  border: 2px solid var(--campo-error-borde) !important;
  box-shadow: 0 0 0 3px var(--campo-error-halo) !important;
}

.venta-campo-error-msg {
  display: block;
  margin-top: 5px;
  font-size: 0.76rem;
  color: var(--campo-error-texto);
}

/* --- El resumen de lo que falta, al pie del paso ---
   No dice solo "hay errores": dice CUÁNTOS y CUÁLES, y cada nombre es un
   link que lleva al campo. */
.venta-faltantes {
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin: 1rem 0;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.venta-faltantes .icon-svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--aviso-peligro-icono);
  flex-shrink: 0;
  margin-top: 1px;
}
.venta-faltantes-txt {
  font-size: 0.82rem;
  color: var(--aviso-peligro-titulo);
  font-weight: 600;
  line-height: 1.5;
}
.venta-faltantes-link {
  color: var(--aviso-peligro-icono);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}
.venta-faltantes-link:hover {
  color: var(--campo-error-texto);
}

/* Cuando se salta a un campo desde el link, parpadea para que el ojo lo
   encuentre: sin esto, el scroll lo lleva ahí pero no sabe cuál era. */
@keyframes ventaResaltar {
  0%, 100% { box-shadow: 0 0 0 3px var(--campo-error-halo); }
  50%      { box-shadow: 0 0 0 7px var(--campo-error-halo); }
}
.venta-campo-saltado .venta-campo-texto,
.venta-campo-saltado input,
.venta-campo-saltado select {
  animation: ventaResaltar 0.9s ease 2;
}
@media (prefers-reduced-motion: reduce) {
  .venta-campo-saltado .venta-campo-texto,
  .venta-campo-saltado input,
  .venta-campo-saltado select { animation: none; }
}

/* --- Barra de porcentaje ---
   El stepper dice en qué BLOQUE estás. La barra dice CUÁNTO FALTA.
   "Paso 7 de 17" hay que leerlo y hacer la cuenta; "41% completado" con
   una barra se entiende sin pensar. */
.venta-progreso-barra {
  position: relative;
  height: 6px;
  margin-top: 9px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  overflow: visible;
}
/* La barra CAMBIA DE COLOR según cuánto lleve completado. No es decoración:
   le dice al vendedor en qué momento de la carga está, sin leer un número.

     0-30%   ROJO   -> recién arrancás, falta todo
     30-60%  ÁMBAR  -> vas por la mitad
     60-90%  LIMA   -> ya casi
     90-100% VERDE  -> terminaste

   Y NO usa el color de la prepaga: si fuera verde en Avalian y azul en
   Galeno, el vendedor no podría leer el avance de un vistazo, tendría que
   acordarse de qué prepaga está cargando. El progreso significa lo mismo
   siempre, en las 12 prepagas.

   (En azul tampoco servía: el azul es el color de TODO el sistema y la
   barra se camuflaba con el resto.) */
.venta-progreso-relleno {
  height: 6px;
  border-radius: 999px;
  background: var(--barra-color, #B42318);
  transition: width 0.35s ease, background 0.5s ease;
}

/* Los tramos. El JS pone la clase según el %. */
.venta-progreso-barra.tramo-inicio  { --barra-color: #B42318; }  /* rojo */
.venta-progreso-barra.tramo-medio   { --barra-color: #E8720C; }  /* naranja */
.venta-progreso-barra.tramo-avanzado{ --barra-color: #B54708; }  /* ámbar */
.venta-progreso-barra.tramo-casi    { --barra-color: #6BAE3F; }  /* lima */
.venta-progreso-barra.tramo-listo   { --barra-color: #157F3D; }  /* verde */

/* Al llegar al final, la barra respira una vez: es el único momento del
   asistente donde el sistema felicita. */
@keyframes ventaBarraListo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 127, 61, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(21, 127, 61, 0.18); }
}
.venta-progreso-barra.tramo-listo .venta-progreso-relleno {
  animation: ventaBarraListo 1.2s ease 1;
}
@media (prefers-reduced-motion: reduce) {
  .venta-progreso-barra.tramo-listo .venta-progreso-relleno { animation: none; }
}

/* El texto del % también toma el color del tramo: refuerza la lectura. */
.venta-progreso-barra.tramo-listo + .venta-progreso-pct,
.venta-progreso-barra.tramo-listo .venta-progreso-pct {
  color: var(--color-success);
  font-weight: 700;
}
.venta-progreso-pct {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   MODALES
   =====================================================================
   Un modal existe PARA INTERRUMPIR. Si tiene los mismos colores que el
   formulario que está atrás, no interrumpe nada: se camufla.

   Antes el modal de lista de precios era azul sobre un fondo azul, con
   el título azul, la caja azul y el botón azul. Todo pesaba lo mismo, y
   el vendedor no entendía POR QUÉ lo estaban frenando.

   Ahora el ENCABEZADO se pinta según la razón por la que el modal existe:

     .modal-cab-cuidado  -> te frena para que verifiques algo
     .modal-cab-peligro  -> algo va a romper la venta
     .modal-cab-ok       -> algo salió bien
     .modal-cab-info     -> solo te informa

   Si un modal no tiene una razón para interrumpirte, no debería existir.
   ===================================================================== */

.venta-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 18, 32, 0.55);   /* oscurece de verdad: el modal se despega */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
}

.venta-modal {
  background: #fff;
  border-radius: 8px;
  max-width: 460px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 18, 32, 0.35);
}

.venta-modal-cab {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--color-border);
}
.venta-modal-cab .icon-svg {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0;
  margin-top: 1px;
}
.venta-modal-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin: 0 0 2px;
}
.venta-modal-motivo {
  font-size: 0.82rem;
  line-height: 1.4;
}

.modal-cab-cuidado {
  background: var(--aviso-cuidado-fondo);
  border-bottom-color: #F5D9A8;
}
.modal-cab-cuidado .icon-svg      { color: var(--aviso-cuidado-icono); }
.modal-cab-cuidado .venta-modal-motivo { color: var(--aviso-cuidado-texto); }

.modal-cab-peligro {
  background: var(--aviso-peligro-fondo);
  border-bottom-color: var(--aviso-peligro-borde);
}
.modal-cab-peligro .icon-svg      { color: var(--aviso-peligro-icono); }
.modal-cab-peligro .venta-modal-motivo { color: var(--aviso-peligro-texto); }

.modal-cab-ok {
  background: var(--color-success-soft);
  border-bottom-color: #A6E9C1;
}
.modal-cab-ok .icon-svg      { color: var(--color-success); }
.modal-cab-ok .venta-modal-motivo { color: #1D6640; }

.modal-cab-info {
  background: var(--aviso-info-fondo);
  border-bottom-color: var(--color-primary-soft);
}
.modal-cab-info .icon-svg      { color: var(--aviso-info-icono); }
.modal-cab-info .venta-modal-motivo { color: var(--aviso-info-texto); }

.venta-modal-cuerpo {
  padding: 20px 22px;
}

/* La etiqueta chica en mayúscula. Lo que sigue abajo es EL dato. */
.venta-modal-etiqueta {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.venta-modal-dato {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 20px;
}

.venta-modal-fila {
  display: flex;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--color-border);
}
.venta-modal-fila:last-child {
  border-bottom: 1px solid var(--color-border);
}
.venta-modal-fila .icon-svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}
.venta-modal-fila-tit {
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.4;
}
.venta-modal-fila-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.venta-modal-fila-sub strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Los botones a la derecha: donde termina la lectura. */
.venta-modal-pie {
  background: var(--form-campo-fondo);
  border-top: 1px solid var(--color-border);
  padding: 14px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

/* =====================================================================
   HERRAMIENTA DE AYUDA
   =====================================================================
   "¿No sabés el código de obra social? → Buscalo en el padrón de ANSES"

   Antes esto era un botón chico con borde azul, igual de azul que el
   botón "Continuar" y que todo el resto de la pantalla: se perdía. Y el
   vendedor casi nunca sabe el código de memoria, así que sin esta ayuda
   se va del sistema a buscar en Google y muchas veces abandona la carga.

   Ahora es una TARJETA: ícono en un cuadro, título, acción y una flecha
   que dice "esto abre afuera". Se ve que hay una herramienta ahí.

   Va en INFO (petróleo suave). No es una alarma ni es la marca: es una
   mano que se te ofrece.
   ===================================================================== */

/* Va en ÁMBAR, no en azul.
   La primera versión la puse en azul (estilo "info"), pero se camuflaba con
   todo el resto del sistema, que también es azul. Y además la clasificación
   era incorrecta: esto no es INFORMACIÓN, es una ACCIÓN QUE EL VENDEDOR
   NECESITA HACER. Si no consigue el código, no puede seguir. */
.venta-herramienta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--aviso-cuidado-fondo);
  border: 1.5px solid #F0C97D;
  border-left: 4px solid var(--aviso-cuidado-borde);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.venta-herramienta:hover {
  background: #FDF3DF;
  transform: translateX(2px);
}

/* El ícono en su propio cuadro: sin esto se lee como decoración. */
.venta-herramienta-icono {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--aviso-cuidado-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.venta-herramienta-icono .icon-svg {
  width: 17px !important;
  height: 17px !important;
  color: #fff;
}

.venta-herramienta-txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.venta-herramienta-txt strong {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--aviso-cuidado-titulo);
  line-height: 1.35;
}
.venta-herramienta-txt em {
  font-size: 0.8rem;
  font-style: normal;
  color: var(--aviso-cuidado-texto);
  text-decoration: underline;
  line-height: 1.35;
}

.venta-herramienta-flecha {
  width: 15px !important;
  height: 15px !important;
  color: var(--aviso-cuidado-icono);
  flex-shrink: 0;
  opacity: 0.6;
}

/* =====================================================================
   CASILLA DE DOCUMENTO
   =====================================================================
   Lo que importa acá es que se VEA que ahí se puede soltar un archivo.
   Antes el borde era de 1.5px en gris clarito y el ícono un emoji chico:
   parecía una fila de texto, no una zona de drop.
   ===================================================================== */

.venta-casilla {
  border: 2px dashed var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: #FBFCFD;
  margin-bottom: 9px;
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
.venta-casilla:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* Toda la casilla es tocable. Antes tenía un botón "Subir" azul al costado,
   y con seis documentos eran seis botones azules compitiendo con el botón
   real de "Enviar venta". */
.venta-casilla-cuerpo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}

/* Nube grande: es la señal principal de "acá se suelta un archivo". */
.venta-casilla-icono {
  width: 26px !important;
  height: 26px !important;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.venta-casilla-txt {
  flex: 1;
  min-width: 0;
}
/* El nombre del documento se lee de verdad: 0.95rem, no 0.8rem. */
.venta-casilla-nombre {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: 2px;
}
.venta-casilla-ayuda {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.35;
}
.venta-casilla-archivo {
  font-size: 0.82rem;
  color: #1D6640;
  line-height: 1.35;
  word-break: break-all;
}

/* --- Ya subido: borde VERDE y SÓLIDO ---
   Deja de ser punteado porque ya no hay nada que soltar ahí. El punteado
   significa "esto está esperando un archivo". */
.venta-casilla.casilla-ok {
  border: 2px solid var(--color-success);
  background: #F4FBF7;
}
.venta-casilla.casilla-ok:hover {
  border-color: var(--color-success);
  background: #EAF6EF;
}
.venta-casilla.casilla-ok .venta-casilla-cuerpo { cursor: default; }
.venta-casilla.casilla-ok .venta-casilla-icono { color: var(--color-success); }

.venta-casilla-cambiar {
  height: 34px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: #fff;
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: 7px;
  cursor: pointer;
  flex-shrink: 0;
}
.venta-casilla-cambiar:hover {
  border-color: var(--boton-fondo);
  color: var(--boton-fondo);
}

/* --- El aviso VIVE ADENTRO de la casilla ---
   Antes estaba arriba de todo, cinco documentos antes del que le tocaba: el
   vendedor lo leía y para cuando llegaba al recibo ya se había olvidado. */
.venta-casilla-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.venta-casilla-aviso .icon-svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
}
.venta-casilla-aviso + .venta-casilla-cuerpo { padding-top: 10px; }

/* CUIDADO: el borde de la casilla se pinta de ámbar. El vendedor ve el
   aviso ANTES de soltar el archivo, no después. */
.venta-casilla.casilla-cuidado {
  border-color: #E0B589;
  background: #FFFDF7;
}
.venta-casilla.casilla-cuidado:hover {
  border-color: var(--aviso-cuidado-borde);
  background: #FDF3DF;
}
.venta-casilla.casilla-cuidado .venta-casilla-aviso {
  color: var(--aviso-cuidado-titulo);
}
.venta-casilla.casilla-cuidado .venta-casilla-aviso .icon-svg,
.venta-casilla.casilla-cuidado .venta-casilla-icono {
  color: var(--aviso-cuidado-icono);
}

/* PELIGRO: rojo. Si manda una sola hoja de la certificación negativa cuando
   eran dos, el trámite se rechaza. */
.venta-casilla.casilla-peligro {
  border-color: #E8A9A3;
  background: #FFFBFB;
}
.venta-casilla.casilla-peligro:hover {
  border-color: var(--aviso-peligro-icono);
  background: #FDEDEC;
}
.venta-casilla.casilla-peligro .venta-casilla-aviso {
  color: var(--aviso-peligro-titulo);
}
.venta-casilla.casilla-peligro .venta-casilla-aviso .icon-svg,
.venta-casilla.casilla-peligro .venta-casilla-icono {
  color: var(--aviso-peligro-icono);
}

/* --- El link de descarga, PEGADO a su casilla ---
   Antes flotaba suelto entre documentos y no quedaba claro a cuál pertenecía. */
.venta-casilla-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-top: 1px dashed var(--color-border-fuerte);
  background: var(--aviso-cuidado-fondo);
}
.venta-casilla-link .icon-svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--aviso-cuidado-icono);
  flex-shrink: 0;
}
.venta-casilla-link a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--aviso-cuidado-titulo);
  text-decoration: underline;
}

/* Mientras se arrastra un archivo encima */
.venta-casilla.venta-doc-arrastrando {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  transform: scale(1.01);
}

/* --- El pie del paso de documentación --- */
.venta-cierre-botones {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.venta-cierre-acciones {
  display: flex;
  gap: 11px;
  align-items: center;
}
/* Decir CUÁNTOS faltan. Antes el vendedor tocaba "Enviar", el sistema le
   tiraba un error genérico, y él tenía que buscar cuál de los seis faltaba. */
.venta-cierre-faltan {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aviso-cuidado-icono);
}
.venta-cierre-listo {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-success);
}

/* El contador de arriba, junto al grupo */
.venta-docs-progreso {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.venta-docs-grupo h4 {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--color-border-fuerte);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  /* La primera letra se cortaba: el `letter-spacing` corre el texto hacia la
     derecha y el contenedor lo recorta por la izquierda. El padding lo
     compensa. */
  padding-left: 2px;
  overflow: visible;
  white-space: normal;
}

/* El contador "0 de 2" al lado del título del grupo */
.venta-docs-grupo h4 .grupo-contador {
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted);
}

/* =====================================================================
   SECUENCIA DE PASOS (el paso de firma de Galeno)
   =====================================================================
   Este paso es una SECUENCIA con orden obligatorio: descargar → firmar a
   mano → subir. No se puede subir algo que todavía no bajaste.

   Antes eran dos títulos sueltos ("1) Descargá..." "2) Subí...") con TRES
   botones petróleo compitiendo entre sí, y ningún aviso de que subir la
   solicitud SIN FIRMA hace que Galeno rechace el trámite.

   Ahora se ve el orden: un paso a la vez, con el que viene apagado hasta
   que termines el anterior.
   ===================================================================== */

.venta-secuencia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.venta-secuencia-paso {
  display: flex;
  gap: 13px;
  padding: 15px 16px;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color .15s ease, opacity .15s ease;
}

/* El número del paso, en su círculo */
.venta-secuencia-nro {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.venta-secuencia-nro .icon-svg {
  width: 15px !important;
  height: 15px !important;
}

.venta-secuencia-cuerpo { flex: 1; min-width: 0; }

.venta-secuencia-tit {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: 3px;
}
.venta-secuencia-sub {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin-bottom: 11px;
}

/* --- ACTUAL: el paso que toca hacer ahora --- */
.venta-secuencia-paso.paso-actual {
  border-color: var(--boton-fondo);
  border-width: 2px;
}
.venta-secuencia-paso.paso-actual .venta-secuencia-nro {
  background: var(--boton-fondo);
  color: #fff;
}

/* --- HECHO: ya lo pasaste --- */
.venta-secuencia-paso.paso-hecho {
  border-color: #A6E9C1;
  background: #F4FBF7;
}
.venta-secuencia-paso.paso-hecho .venta-secuencia-nro {
  background: var(--color-success);
  color: #fff;
}

/* --- ESPERA: todavía no te toca ---
   Se apaga y no se puede tocar. No podés subir una solicitud firmada si
   todavía no descargaste la solicitud. */
.venta-secuencia-paso.paso-espera {
  opacity: 0.45;
  pointer-events: none;
  background: var(--form-campo-fondo);
}

/* El botón adentro de una secuencia lleva su ícono */
.venta-secuencia-cuerpo .btn-primario .icon-svg,
.venta-secuencia-cuerpo .btn-secundario .icon-svg {
  width: 15px !important;
  height: 15px !important;
  margin-right: 6px;
  vertical-align: -2px;
}

/* --- El aviso fuerte, arriba de la secuencia ---
   Subir la solicitud sin firmar = Galeno rechaza el trámite. Eso tiene que
   estar dicho ANTES de que el vendedor toque nada. */
.venta-alerta-fuerte {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px 0 0;
  padding: 13px 16px;
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
  border-radius: var(--radius-sm);
}
.venta-alerta-fuerte .icon-svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--aviso-peligro-icono);
  flex-shrink: 0;
  margin-top: 1px;
}
.venta-alerta-fuerte strong {
  display: block;
  font-size: 0.87rem;
  color: var(--aviso-peligro-titulo);
  line-height: 1.4;
  margin-bottom: 2px;
}
.venta-alerta-fuerte span {
  font-size: 0.82rem;
  color: var(--aviso-peligro-texto);
  line-height: 1.4;
}

/* =====================================================================
   SELECTS — con estilo propio
   =====================================================================
   Los desplegables se veían NATIVOS del navegador: fondo gris, flecha
   distinta, altura distinta. Al lado de los campos de texto (que sí tenían
   estilo) parecían de otro sistema.

   Se les saca la apariencia nativa y se les dibuja la flecha.
   ===================================================================== */

select.venta-campo-texto,
select.venta-campo-select,
.venta-grupo-campo select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 100%;
  padding: 9px 36px 9px 12px;   /* espacio a la derecha para la flecha */
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--color-text);

  background-color: #fff;
  /* La flecha, dibujada. Sin esto el navegador pone la suya, que es
     distinta en Chrome, Firefox y Safari. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357647A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;

  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}

select.venta-campo-texto:hover,
select.venta-campo-select:hover,
.venta-grupo-campo select:hover {
  border-color: var(--color-border-fuerte);
}

select.venta-campo-texto:focus,
select.venta-campo-select:focus,
.venta-grupo-campo select:focus {
  outline: 3px solid rgba(27, 90, 125, 0.14);
  border-color: var(--color-primary);
}

/* El select de un campo con error hereda el rojo */
.venta-campo-error select {
  border: 2px solid var(--campo-error-borde) !important;
  box-shadow: 0 0 0 3px var(--campo-error-halo) !important;
}

/* Ícono que va dentro de una línea de texto (donde antes había un emoji).
   Los emojis se ven distinto en cada sistema operativo y rompen el tono. */
.icon-svg.icon-inline {
  width: 15px !important;
  height: 15px !important;
  vertical-align: -2px;
  margin-right: 2px;
  flex-shrink: 0;
}

/* =====================================================================
   INTENCIÓN DE COMPRA DEL LEAD
   =====================================================================
   El HTML ya ponía la clase `intencion-muy_interesado` / `interesado` /
   `poco_interesado` en cada tarjeta, pero NO EXISTÍA el CSS: la clase
   estaba ahí sin pintar nada.

   O sea: el vendedor cargaba qué tan caliente estaba el lead, y después el
   tablero no se lo mostraba. Tenía que abrir cada tarjeta para saberlo.

   Ahora la tarjeta lo dice sola, con una franja a la izquierda. Un tablero
   de leads tiene que responder "¿a quién llamo primero?" sin abrir nada.

   No usa emojis (🔥 👍 🧊) porque se ven distinto en cada sistema y rompen
   el tono. El color solo alcanza.
   ===================================================================== */

.lead-card.intencion-muy_interesado {
  border-left: 6px solid var(--color-success) !important;
}
.lead-card.intencion-interesado {
  border-left: 6px solid var(--aviso-cuidado-icono) !important;
}
.lead-card.intencion-poco_interesado {
  border-left: 6px solid var(--color-text-muted) !important;
}
/* Sin definir: no se pinta. Un borde de color diría algo que no sabemos. */
.lead-card.intencion-sin_definir {
  border-left: 6px solid var(--color-border-fuerte) !important;
}

/* La tarjeta arriba del fondo de color de la columna necesita más borde:
   con un borde tenue se fundía con el ámbar o el verde de abajo. */
.kanban-column-body .lead-card {
  border: 2px solid var(--color-border-fuerte);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* El chip de intención en la tarjeta del lead.
   Antes la intención estaba SOLO adentro de un select: para saber si un lead
   estaba caliente había que abrir la tarjeta. En un tablero de 40 leads eso
   son 40 clics para decidir a quién llamar primero. */
.lead-chip-intencion {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
}
.lead-chip-intencion.muy_interesado {
  color: var(--color-success);
  background: var(--color-success-soft);
}
.lead-chip-intencion.interesado {
  color: var(--aviso-cuidado-icono);
  background: var(--aviso-cuidado-fondo);
}
.lead-chip-intencion.poco_interesado {
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
}

/* =====================================================================
   CABECERA DE COLUMNA — SEGUIMIENTO
   =====================================================================
   Seguimiento y el CRM comparten el Kanban, pero arman la cabecera distinto:
   el CRM pone el título como texto suelto; Seguimiento lo mete adentro de un
   contenedor junto al ícono, el contador y una línea de ayuda.

   Al rediseñar el CRM redefiní .kanban-col-titulo como texto suelto, y eso
   ROMPIÓ Seguimiento: los títulos desaparecieron y quedaron solo los números
   flotando. Cada módulo usa ahora sus propias clases.
   ===================================================================== */

.seg-col-header {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: center;
  gap: 5px;
  padding: 0 13px;
  height: 54px;              /* altura fija: todos los encabezados iguales */
  box-sizing: border-box;
}

.seg-col-linea {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.seg-col-icono {
  width: 16px !important;
  height: 16px !important;
  color: var(--col-color, var(--color-text-muted));
  flex-shrink: 0;
}

.seg-col-label {
  flex: 1;
  min-width: 0;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
  /* Con nombres largos, dos líneas como mucho (no empujan la altura fija) */
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seg-col-count {
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: var(--col-color, var(--color-text-muted));
  border-radius: 999px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

/* La línea de ayuda debajo del título: se oculta para que todos los
   encabezados tengan la misma altura (la ayuda se ve al abrir la venta). */
.seg-col-header .kanban-col-ayuda {
  display: none;
}

/* Columna urgente: la que espera algo tuyo */
.kanban-column.kanban-col-urgente .kanban-column-body {
  background: var(--aviso-cuidado-fondo);
}

.seg-col-vacia {
  margin: 0;
  padding: 18px 0;
  text-align: center;
  color: var(--color-border-fuerte);
  font-size: 0.9rem;
}

/* =====================================================================
   SEGUIMIENTO — VISTA DE LISTA
   =====================================================================
   El tablero sirve para ver el circuito completo. NO sirve un lunes con 50
   ventas en "Enviada": la tarjeta cuadrada ocupa 130px, entran 3 por
   pantalla, y el administrativo scrollea a ciegas una columna infinita.

   La lista pone cada venta en ~40px: entran 15. Y se ordena por columna,
   que es lo que la convierte en herramienta de trabajo: "mostrame primero
   las que llevan más días paradas".
   ===================================================================== */

/* --- El conmutador Tablero / Lista --- */
.seg-vista-toggle {
  display: flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: 5px;
}
.seg-vista-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: all .12s ease;
  white-space: nowrap;
}
.seg-vista-btn .icon-svg { width: 14px !important; height: 14px !important; }
.seg-vista-btn:hover { color: var(--color-text); }
.seg-vista-btn.activo {
  color: #fff;
  background: var(--boton-fondo);
}

/* --- La lista --- */
.seg-lista {
  margin-top: 14px;
  background: var(--color-surface);
  border: 2px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seg-lista-cab,
.seg-lista-fila {
  display: grid;
  grid-template-columns: 1fr 110px 120px 92px 140px;
  gap: 12px;
  align-items: center;
}

.seg-lista-cab {
  padding: 8px 14px;
  background: var(--form-campo-fondo);
  border-bottom: 2px solid var(--color-border);
}

/* Cada cabecera es un BOTÓN: se toca para ordenar. */
.seg-lista-th {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color .12s ease;
}
.seg-lista-th:hover { color: var(--color-text); }
.seg-lista-th.orden-activo { color: var(--color-text); }
.seg-orden-flecha {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}

/* --- Una fila --- */
.seg-lista-fila {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-surface-alt);
  /* La franja del color del estado, igual que en la tarjeta. */
  border-left: 4px solid var(--fila-color, var(--color-border));
  cursor: pointer;
  transition: background .1s ease;
}
.seg-lista-fila:last-child { border-bottom: none; }
.seg-lista-fila:hover { background: var(--form-campo-fondo); }

.seg-lista-titular {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-lista-dni {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.seg-lista-prepaga {
  justify-self: start;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.seg-lista-dias {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Más de 5 días sin moverse: eso es lo que hay que mirar un lunes. */
.seg-lista-dias.dias-alerta {
  font-weight: 800;
  color: var(--aviso-cuidado-icono);
}
.seg-lista-fila.fila-vieja {
  background: var(--aviso-cuidado-fondo);
}
.seg-lista-fila.fila-vieja:hover {
  background: #FDF0D8;
}

.seg-lista-estado {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.seg-lista-estado .icon-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

.seg-lista-pie {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

/* En pantallas chicas la lista se apreta: se esconden las columnas
   secundarias antes que dejar todo ilegible. */
@media (max-width: 860px) {
  .seg-lista-cab,
  .seg-lista-fila {
    grid-template-columns: 1fr 86px 120px;
  }
  .seg-lista-cab .seg-lista-th:nth-child(2),
  .seg-lista-cab .seg-lista-th:nth-child(3),
  .seg-lista-dni,
  .seg-lista-prepaga {
    display: none;
  }
}

/* =====================================================================
   DOCUMENTACIÓN DE RESPALDO (opcional)
   =====================================================================
   Hay papeles que a veces hacen falta y a veces no: estudios
   complementarios, certificado de buena salud, alumno regular. Depende de la
   edad, de lo que declaró en salud, de si la prepaga pide auditoría.

   No se pueden pedir SIEMPRE (serían cuatro casillas obligatorias que en el
   80% de las ventas quedan vacías y frenan el envío), pero tampoco dejarlos
   afuera.

   Se muestran como grupo aparte, marcado como opcional. El vendedor entiende
   que puede enviar sin ellos, pero que si los tiene, le ahorra a la
   administrativa un pedido de documentación —que son días de demora—.
   ===================================================================== */

.venta-docs-grupo.grupo-opcional {
  border: 1.5px dashed var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: var(--form-campo-fondo);
  padding: 14px 16px;
  margin-top: 20px;
}

.venta-docs-grupo.grupo-opcional h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  color: var(--color-text-muted);
}

/* El cartelito "No frena el envío". Es la información que el vendedor
   necesita ANTES de mirar las casillas. */
.venta-badge-opcional {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.venta-ayuda-opcional {
  margin: 4px 0 12px !important;
  padding: 9px 11px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-border-fuerte);
  border-radius: 0 6px 6px 0;
  font-size: 0.79rem !important;
  line-height: 1.45;
}

/* Las casillas del grupo opcional van más discretas: no son lo que hay que
   completar, son un extra. */
.grupo-opcional .venta-casilla {
  background: var(--color-surface);
}

/* =====================================================================
   EL CHIP DE PREPAGA EN LA TARJETA — con el color de la prepaga
   =====================================================================
   El chip salía SIEMPRE gris, sin importar la prepaga. En un tablero con
   ventas de Galeno, Avalian y Prevención mezcladas, había que leer el texto
   de cada tarjeta para saber de cuál era.

   Ahora el chip toma el color de su prepaga: Galeno azul, Avalian verde,
   Prevención fucsia. Se distinguen de un vistazo.

   El color de prepaga AMBIENTA (chip, franja lateral): no manda. El estado
   de la venta —que es lo urgente— sigue estando en el ámbar/verde/rojo del
   borde. (ESTETICA.md: el color de prepaga nunca invade un aviso.)
   ===================================================================== */

.seg-card-prepaga {
  font-weight: 700;
  border: 1.5px solid transparent;
}

/* Cada prepaga con su color, sacado de PREPAGAS_COLOR (app.js). */
.pg-galeno     .seg-card-prepaga { color: #0A3D62; background: #E7EEF5; border-color: #C5D6E5; }
.pg-avalian    .seg-card-prepaga { color: #2E7D4F; background: #E8F3EC; border-color: #C2E0CE; }
.pg-prevencion .seg-card-prepaga { color: #C2185B; background: #FCE8F0; border-color: #F3C2D5; }
.pg-omint      .seg-card-prepaga { color: #0E4C5C; background: #E4F0F3; border-color: #BDD9DF; }
.pg-sancor     .seg-card-prepaga { color: #1F6FA8; background: #E8F3FB; border-color: #BFDCF0; }
.pg-swiss      .seg-card-prepaga { color: #D32F2F; background: #FDECEC; border-color: #F5C6C6; }
.pg-formed     .seg-card-prepaga { color: #8C1D3F; background: #FAE8EE; border-color: #EDC3D1; }
.pg-premedic   .seg-card-prepaga { color: #4E8A28; background: #EDF6E6; border-color: #CFE6BE; }
.pg-doctorred  .seg-card-prepaga { color: #6A3FA0; background: #F0EAF8; border-color: #D6C5EC; }
.pg-medife     .seg-card-prepaga { color: #C25E08; background: #FDF0E3; border-color: #F5D6B4; }
.pg-mgn        .seg-card-prepaga { color: var(--color-text-muted); background: var(--color-surface-alt); border-color: var(--color-border); }

/* Sin prepaga reconocida: gris. Si no sabemos cuál es, no inventamos color. */
.pg-generica   .seg-card-prepaga { color: var(--color-text-muted); background: var(--color-surface-alt); border-color: var(--color-border); }

/* Lo mismo en la vista de LISTA */
.seg-lista-prepaga.pg-galeno     { color: #0A3D62; background: #E7EEF5; }
.seg-lista-prepaga.pg-avalian    { color: #2E7D4F; background: #E8F3EC; }
.seg-lista-prepaga.pg-prevencion { color: #C2185B; background: #FCE8F0; }
.seg-lista-prepaga.pg-omint      { color: #0E4C5C; background: #E4F0F3; }
.seg-lista-prepaga.pg-sancor     { color: #1F6FA8; background: #E8F3FB; }
.seg-lista-prepaga.pg-swiss      { color: #D32F2F; background: #FDECEC; }
.seg-lista-prepaga.pg-formed     { color: #8C1D3F; background: #FAE8EE; }
.seg-lista-prepaga.pg-premedic   { color: #4E8A28; background: #EDF6E6; }
.seg-lista-prepaga.pg-doctorred  { color: #6A3FA0; background: #F0EAF8; }
.seg-lista-prepaga.pg-medife     { color: #C25E08; background: #FDF0E3; }

/* =====================================================================
   DDJJ DE PREVENCIÓN — las 28 preguntas
   =====================================================================
   La planilla de Prevención tiene 28 preguntas con casilleros. El vendedor
   tiene que tildar cuáles declara cada persona, y ese número es el CÓDIGO
   que después aparece en el cuadro de observaciones del PDF.

   Con 28 preguntas y hasta 5 personas, la lista se vuelve larguísima. Por
   eso: cada pregunta en una línea, compacta, y las tildadas se marcan fuerte
   para que se vean de un vistazo en medio de las otras 27.
   ===================================================================== */

.av-ddjj {
  margin-top: 14px;
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.av-ddjj-cab {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--aviso-info-fondo);
  border-bottom: 1.5px solid var(--color-primary-soft);
}
.av-ddjj-cab .icon-svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--aviso-info-icono);
  flex-shrink: 0;
  margin-top: 1px;
}
.av-ddjj-cab strong {
  display: block;
  font-size: 0.87rem;
  color: var(--aviso-info-titulo);
  margin-bottom: 2px;
}
.av-ddjj-cab span {
  font-size: 0.8rem;
  color: var(--aviso-info-texto);
  line-height: 1.4;
}

.av-ddjj-lista {
  max-height: 340px;
  overflow-y: auto;
}

/* Una pregunta */
.av-ddjj-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-surface-alt);
  cursor: pointer;
  transition: background .1s ease;
}
.av-ddjj-item:last-child { border-bottom: none; }
.av-ddjj-item:hover { background: var(--form-campo-fondo); }

/* El casillero, dibujado a mano (el nativo se ve distinto en cada navegador) */
.av-ddjj-cb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex-shrink: 0;
  border: 1.5px solid var(--boton-sec-borde);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.av-ddjj-cb:checked {
  background: var(--boton-fondo);
  border-color: var(--boton-fondo);
}
.av-ddjj-cb:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* El NÚMERO de la pregunta. No es decoración: es el código que va al PDF. */
.av-ddjj-num {
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: 5px;
  padding: 2px 5px;
  font-variant-numeric: tabular-nums;
}

.av-ddjj-txt {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--color-text);
}
.av-ddjj-txt em {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  font-style: normal;
  color: var(--color-text-muted);
}

/* Tildada: se tiene que ver en medio de las otras 27. */
.av-ddjj-item.ddjj-marcada {
  background: var(--aviso-cuidado-fondo);
}
.av-ddjj-item.ddjj-marcada:hover {
  background: #FDF0D8;
}
.av-ddjj-item.ddjj-marcada .av-ddjj-num {
  color: #fff;
  background: var(--aviso-cuidado-icono);
}
.av-ddjj-item.ddjj-marcada .av-ddjj-txt {
  font-weight: 600;
}

/* =====================================================================
   DE QUIÉN ES LA VENTA
   =====================================================================
   La administrativa abría una venta con un problema y NO SABÍA A QUIÉN
   LLAMAR: la tarjeta mostraba el cliente, el DNI y la prepaga, pero no quién
   la había cargado. Tenía que buscar el UUID del asesor en la tabla de
   usuarios, o preguntar por WhatsApp "¿de quién es la venta de Sandoval?".

   Ahora el vendedor aparece en los tres lugares donde se trabaja: la
   tarjeta, la lista y el detalle.

   Solo lo ve quien lo necesita (administrativo, admin, supervisor). El
   asesor no: todas las ventas que ve son suyas, y repetir su propio nombre
   en cada tarjeta es ruido.
   ===================================================================== */

/* --- En la TARJETA del Kanban --- */
.seg-card-asesor {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--color-surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.seg-card-asesor .icon-svg {
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0;
}

/* --- En la LISTA --- */
.seg-lista.con-asesor .seg-lista-cab,
.seg-lista.con-asesor .seg-lista-fila {
  grid-template-columns: 1fr 100px 130px 110px 84px 130px;
}
.seg-lista-asesor {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- En el DETALLE: la barra de arriba --- */
.seg-vendedor-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 11px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-left: 4px solid var(--boton-fondo);
  border-radius: var(--radius-sm);
}

.seg-vendedor-quien {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.seg-vendedor-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
  background: var(--boton-fondo);
}

.seg-vendedor-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text-muted);
}
.seg-vendedor-quien strong {
  font-size: 0.95rem;
  color: var(--color-text);
}

/* El mail, a un clic. Es para lo que se busca al vendedor. */
.seg-vendedor-mail {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border: 1.5px solid var(--color-primary-soft);
  border-radius: 8px;
  text-decoration: none;
  transition: all .12s ease;
}
.seg-vendedor-mail:hover {
  border-color: var(--color-primary);
}
.seg-vendedor-mail .icon-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .seg-vendedor-barra { flex-direction: column; align-items: stretch; }
  .seg-vendedor-mail { justify-content: center; }
}

/* =====================================================================
   EL CAMPO QUE FALTA SE TIENE QUE VER, NO SOLO LEER
   =====================================================================
   Antes el error decía "Completá el campo Fecha de nacimiento" y el campo se
   veía IGUAL que los otros once. El vendedor tenía que buscarlo con la vista,
   leyendo cada etiqueta una por una.

   Y si el campo estaba tres pantallas más abajo, apretaba "Continuar", no
   pasaba nada visible, y parecía que el botón estaba roto.

   Cuatro señales juntas, para que se encuentre sin leer:
     1. El bloque entero en rojo lavado
     2. Borde de 2px + halo
     3. La etiqueta en rojo, con ícono
     4. Un pulso al saltar
   ===================================================================== */

.venta-grupo-campo.venta-campo-error {
  background: var(--campo-error-fondo) !important;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: -2px -4px 4px;
  box-shadow: inset 3px 0 0 0 var(--campo-error-borde);
}

.venta-grupo-campo.venta-campo-error > label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--campo-error-texto) !important;
  font-weight: 700 !important;
}

/* El ícono de alerta, dibujado: así no depende de que Lucide lo redibuje. */
.venta-grupo-campo.venta-campo-error > label::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--campo-error-borde);
  border-radius: 50%;
}

.venta-grupo-campo.venta-campo-error input,
.venta-grupo-campo.venta-campo-error select,
.venta-grupo-campo.venta-campo-error textarea {
  border: 2px solid var(--campo-error-borde) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px var(--campo-error-halo) !important;
}

/* Los campos de fecha son TRES inputs. Todos se pintan. */
.venta-grupo-campo.venta-campo-error .venta-fecha-parte {
  border: 2px solid var(--campo-error-borde) !important;
  box-shadow: 0 0 0 3px var(--campo-error-halo) !important;
}

/* El pulso cuando el sistema salta al campo. Dura poco: es para que el ojo
   lo enganche, no para molestar. */
@keyframes ventaPulsoError {
  0%, 100% { box-shadow: inset 3px 0 0 0 var(--campo-error-borde); }
  50%      { box-shadow: inset 3px 0 0 0 var(--campo-error-borde),
                         0 0 0 5px var(--campo-error-halo); }
}

.venta-grupo-campo.venta-campo-saltado {
  animation: ventaPulsoError 0.55s ease-in-out 2;
}

/* --- La lista de faltantes al pie del paso --- */
.venta-faltantes {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 14px;
  background: var(--aviso-peligro-fondo);
  border: 1.5px solid var(--aviso-peligro-borde);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--aviso-peligro-titulo);
}
.venta-faltantes .icon-svg {
  width: 17px !important;
  height: 17px !important;
  color: var(--aviso-peligro-icono);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Cada faltante es un LINK que salta al campo. Sin esto, el vendedor lee el
   nombre del campo y después tiene que buscarlo a ojo. */
.venta-faltantes-link {
  color: var(--aviso-peligro-titulo);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
.venta-faltantes-link:hover {
  color: var(--aviso-peligro-icono);
}

/* =====================================================================
   EL SEGMENTO DE GALENO (2 vs 2A)
   =====================================================================
   Galeno tiene DOS listas de desregulado —segmento 2 y segmento 2A
   (corporativo)—, y EL PROCESO ES DISTINTO en cada una.

   La tarjeta decía solo "Desregulado", sin decir cuál. La administrativa
   tenía que abrir la venta para saber qué circuito aplicar, y si se
   equivocaba, la prepaga rechazaba el trámite.

   Ahora se ve en la tarjeta, en la lista y en el detalle.
   ===================================================================== */

/* El chip de prepaga con segmento necesita un poco más de aire: ahora dice
   "Galeno · Desregulado 2A" en vez de "Galeno · Desregulado". */
.seg-card-prepaga,
.seg-lista-prepaga {
  letter-spacing: 0.01em;
}

/* =====================================================================
   REVISAR ANTES DE ENVIAR
   =====================================================================
   El circuito estaba AL REVÉS: el vendedor apretaba "Enviar", el sistema
   mandaba la venta, Y RECIÉN AHÍ le mostraba los archivos generados.
   Si se había equivocado en un dato, o había subido el DNI del cónyuge en
   lugar del titular, se enteraba cuando la administrativa se lo decía —o
   peor, cuando la prepaga rechazaba la venta tres días después—.

   Ahora: "Revisar antes de enviar" arma TODO —el Excel, los PDFs, la
   documentación— y se lo muestra SIN MANDAR NADA. El vendedor abre cada
   archivo, verifica, y recién ahí confirma.

   Es la diferencia entre corregir en 30 segundos, o que la venta vuelva
   rechazada.
   ===================================================================== */

.venta-modal-ancho {
  max-width: 640px;
  width: 100%;
}

.venta-preview-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venta-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  transition: border-color .12s ease;
}
.venta-preview-item:hover {
  border-color: var(--boton-fondo);
}

.venta-preview-icono {
  width: 22px !important;
  height: 22px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

.venta-preview-txt {
  flex: 1;
  min-width: 0;
}
.venta-preview-txt strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.3;
}
.venta-preview-txt span {
  display: block;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venta-preview-item .btn-mini {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.venta-preview-item .btn-mini .icon-svg {
  width: 13px !important;
  height: 13px !important;
}

/* El aviso de abajo: cuando confirmes, se manda de verdad.
   Va en ámbar —no en rojo—: no es un error, es una advertencia. Enviar la
   venta es lo que el vendedor QUIERE hacer; solo tiene que saber que después
   no puede corregir solo. */
.venta-preview-aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--aviso-cuidado-fondo);
  border-radius: var(--radius-sm);
}
.venta-preview-aviso .icon-svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--aviso-cuidado-icono);
  flex-shrink: 0;
  margin-top: 1px;
}
.venta-preview-aviso strong {
  display: block;
  font-size: 0.85rem;
  color: var(--aviso-cuidado-titulo);
  margin-bottom: 2px;
}
.venta-preview-aviso span {
  font-size: 0.8rem;
  color: var(--aviso-cuidado-texto);
  line-height: 1.4;
}

/* =====================================================================
   LA NOTA DE UN CAMPO — de dónde sale este número
   =====================================================================
   Hay campos donde el error es SILENCIOSO: nadie lo ve hasta que la comisión
   sale mal, semanas después.

   Los dos peores:
     · "Valor de lista": el vendedor pone lo que el cliente PAGA (con
       descuentos), cuando el sistema necesita el precio de LISTA.
     · "Aportes del recibo": el vendedor mira el neto, o el total a cobrar,
       en vez del ítem de aportes.

   La etiqueta sola no alcanza. Hay que decir DE DÓNDE SACAR EL NÚMERO, y
   sobre todo QUÉ NÚMERO NO ES.

   Va antes del campo, no después: el vendedor tiene que leerlo ANTES de
   escribir, no cuando ya se equivocó.
   ===================================================================== */

.venta-campo-nota {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 3px 0 7px;
  padding: 8px 10px;
  background: var(--aviso-info-fondo);
  border-left: 3px solid var(--aviso-info-borde);
  border-radius: 0 6px 6px 0;
}

.venta-campo-nota .icon-svg {
  width: 15px !important;
  height: 15px !important;
  color: var(--aviso-info-icono);
  flex-shrink: 0;
  margin-top: 1px;
}

.venta-campo-nota span {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--aviso-info-texto);
}

/* Lo que el vendedor NO tiene que poner, en negrita: es la parte que evita
   el error. */
.venta-campo-nota strong {
  color: var(--aviso-info-titulo);
  font-weight: 700;
}

/* =====================================================================
   EL DATO DESTACADO DE LA REVISIÓN — la modalidad
   =====================================================================
   La modalidad y el segmento determinan QUÉ LISTA DE PRECIOS corresponde.
   Si el vendedor cotizó con la lista del segmento 2 pero la venta es 2A, los
   montos están mal, la comisión sale mal, y NADIE LO VE hasta semanas
   después.

   Estaba como una fila más del resumen —entre el precio y la vigencia—, y el
   ojo la saltea. Ahora tiene peso propio: es EL dato que hay que verificar en
   esa pantalla.
   ===================================================================== */

.venta-resumen-destacado {
  margin: 0 0 10px;
  padding: 11px 13px;
  background: var(--aviso-info-fondo);
  border: 1.5px solid var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.venta-resumen-destacado-tit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.venta-resumen-destacado-tit .icon-svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--aviso-info-icono);
  flex-shrink: 0;
}
.venta-resumen-destacado-tit span {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--aviso-info-icono);
}

/* El valor: grande, para que se lea de un vistazo. */
.venta-resumen-destacado-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--aviso-info-titulo);
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Y abajo, QUÉ TIENE QUE VERIFICAR. Decir "Desregulado 2A" no alcanza: hay
   que decirle que revise que haya cotizado con esa lista. */
.venta-resumen-destacado-sub {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--aviso-info-texto);
}

/* =====================================================================
   LOS ATAJOS DE LA REVISIÓN — volver directo al error
   =====================================================================
   "Volver y corregir" deja al vendedor en el paso de documentación, que es el
   ÚLTIMO. Si el error está en los montos —ocho pasos atrás—, tiene que
   apretar "Volver" ocho veces.

   Con los atajos salta directo al bloque que necesita, corrige, y vuelve a
   revisar. Los archivos se generan de nuevo, con el cambio hecho.
   ===================================================================== */

.venta-preview-saltar {
  margin-top: 14px;
  padding: 11px 13px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
}

.venta-preview-saltar-tit {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.venta-preview-saltar-tit .icon-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

.venta-preview-saltar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.venta-preview-saltar-btn {
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: 7px;
  cursor: pointer;
  transition: all .12s ease;
}
.venta-preview-saltar-btn:hover {
  border-color: var(--boton-fondo);
  color: var(--boton-fondo);
}

/* Los dos botones de cada archivo en la revisión: Ver y Bajar.
   "Ver" es el que importa —revisar es MIRAR, no descargar—. "Bajar" está por
   si el vendedor igual quiere el archivo. */
.venta-preview-btns {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

/* =====================================================================
   EL MODAL DE REVISIÓN — que entre en pantalla
   =====================================================================
   Con cinco archivos, trece botones de atajo y dos avisos, el modal medía más
   que la pantalla. El vendedor tenía que ALEJAR EL ZOOM del navegador para
   ver el botón de confirmar.

   El problema no era el tamaño de cada cosa: era que TODO estaba abierto al
   mismo tiempo, compitiendo por el mismo espacio.

   Ahora:
     · El modal tiene alto máximo y el CUERPO scrollea (la cabecera y el pie
       quedan fijos: el botón de confirmar SIEMPRE se ve)
     · Los atajos van en un desplegable —solo hacen falta si encontró un error
     · El aviso final se compacta a una línea
     · Cada archivo ocupa menos alto
   ===================================================================== */

/* NO se usa :has(): no anda en todos los navegadores. El padding va en el
   overlay de siempre, que ya centra su contenido. */
.venta-modal-overlay {
  padding: 20px;
}

.venta-modal-ancho {
  max-width: 620px;
  /* El alto NO es libre: si el contenido crece, scrollea el cuerpo. */
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}

/* La cabecera queda FIJA arriba */
.venta-modal-ancho .venta-modal-cab {
  flex-shrink: 0;
  padding: 13px 16px;
}
.venta-modal-ancho .venta-modal-cab strong { font-size: 0.92rem; }
.venta-modal-ancho .venta-modal-cab span   { font-size: 0.78rem; }

/* El cuerpo es lo ÚNICO que scrollea */
.venta-modal-ancho .venta-modal-cuerpo {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px;
}

/* Y el pie queda FIJO abajo: el botón de confirmar siempre se ve, sin
   importar cuántos archivos haya. */
.venta-modal-ancho .venta-modal-pie {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1.5px solid var(--color-surface-alt);
  background: #fff;
}

/* --- Los archivos, más compactos --- */
.venta-preview-item {
  padding: 9px 11px;
  gap: 10px;
}
.venta-preview-icono {
  width: 19px !important;
  height: 19px !important;
}
.venta-preview-txt strong { font-size: 0.85rem; }
.venta-preview-txt span   { font-size: 0.72rem; }

.venta-preview-item .btn-mini {
  padding: 5px 9px;
  font-size: 0.74rem;
}

/* --- LOS ATAJOS, EN UN DESPLEGABLE ---
   Solo hacen falta si el vendedor encontró un error. Tenerlos siempre
   abiertos ocupa media pantalla para algo que se usa una de cada diez veces. */
.venta-preview-saltar {
  margin-top: 12px;
  padding: 0;
  background: transparent;
}

.venta-preview-saltar > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  user-select: none;
}
.venta-preview-saltar > summary::-webkit-details-marker { display: none; }
.venta-preview-saltar > summary:hover { background: #E9EDF2; }

.venta-preview-saltar > summary .icon-svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

/* La flecha, a la derecha */
.venta-preview-saltar > summary::after {
  content: '';
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.venta-preview-saltar[open] > summary::after {
  transform: rotate(-135deg);
}

.venta-preview-saltar-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 10px 2px 2px;
}

.venta-preview-saltar-btn {
  padding: 5px 10px;
  font-size: 0.76rem;
}

/* --- El aviso final, en una línea --- */
.venta-preview-aviso {
  margin-top: 12px;
  padding: 9px 12px;
  align-items: center;
}
.venta-preview-aviso .icon-svg {
  width: 16px !important;
  height: 16px !important;
  margin-top: 0;
}
.venta-preview-aviso strong {
  display: inline;
  font-size: 0.8rem;
  margin: 0;
}
.venta-preview-aviso span {
  font-size: 0.78rem;
}

/* En pantallas chicas, el modal ocupa todo */
@media (max-width: 700px) {
  .venta-modal-overlay { padding: 10px; }
  .venta-modal-ancho { max-height: calc(100vh - 20px); }
  .venta-preview-item { flex-wrap: wrap; }
  .venta-preview-btns { width: 100%; }
  .venta-preview-btns .btn-mini { flex: 1; justify-content: center; }
}


/* --- El pie del modal con TRES botones ---------------------------------- */
.venta-modal-pie-doble {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.venta-modal-pie-doble .btn-secundario {
  margin-right: auto;      /* "Volver" se va a la izquierda, separado */
}

/* "Descargar y eliminar".
   No es el boton principal —ese es enviar— pero tampoco es secundario: es una
   accion destructiva. Va en rojo, para que nadie lo apriete por error. */
.btn-sec-peligro {
  padding: 0.75rem 1.2rem;
  background: var(--color-surface);
  color: var(--color-danger);
  border: 1.5px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-sec-peligro:hover:not(:disabled) {
  background: var(--color-danger);
  color: #FFFFFF;
}

.btn-sec-peligro:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Descargar todos los archivos" */
.venta-preview-bajar-todo {
  padding: 0 1.25rem 0.9rem;
}

.venta-preview-bajar-todo .btn-secundario {
  width: 100%;
  justify-content: center;
}

/* ===================================================================
   SEGUIMIENTO — columnas en gris neutro con borde negro.
   Aplica SOLO dentro de .seg-tablero-card (no toca el Kanban del CRM).
   Las tarjetas de venta adentro mantienen sus colores (prepaga, terracota).
   =================================================================== */
.seg-tablero-card .kanban-column {
  background: #f4f4f2 !important;
  border: 2px solid var(--color-borde-tarjeta) !important;
  border-top: 2px solid var(--color-borde-tarjeta) !important;
}
.seg-tablero-card .kanban-column .kanban-column-header {
  background: var(--color-surface) !important;
  border-bottom: 2px solid var(--color-borde-tarjeta) !important;
  min-height: 64px;
  align-items: center;
}
/* Altura FIJA y pareja en todos los encabezados (los de nombre largo, de dos
   líneas, y los de nombre corto quedan igual de altos). */
.seg-tablero-card .seg-col-header {
  min-height: 62px !important;
  justify-content: center !important;
}
.seg-tablero-card .seg-col-label {
  display: flex;
  align-items: center;
}
/* El ícono y el número de la columna: en gris oscuro neutro, no en color */
.seg-tablero-card .seg-col-icono {
  color: #4a4a45 !important;
}
.seg-tablero-card .seg-col-count {
  background: #fff !important;
  border: 1.5px solid var(--color-borde-tarjeta) !important;
  color: #3f3f3a !important;
}
/* La columna "urgente" (te espera): la dejamos IGUAL que las demás (gris),
   sin borde ni fondo terracota. El aviso ya está en cada tarjeta ("te toca
   responder" en terracota), así que la columna no necesita destacarse. */
.seg-tablero-card .kanban-col-urgente {
  background: #f4f4f2 !important;
  border: 2px solid var(--color-borde-tarjeta) !important;
  box-shadow: var(--shadow-sm) !important;
}
.seg-tablero-card .kanban-col-urgente .kanban-column-header {
  background: var(--color-surface) !important;
}
/* El cuerpo (donde van las tarjetas) también gris parejo, nunca terracota/ámbar */
.seg-tablero-card .kanban-column-body,
.seg-tablero-card .kanban-col-urgente .kanban-column-body,
.seg-tablero-card .kanban-column.col-espera .kanban-column-body {
  background: transparent !important;
}
.seg-tablero-card .kanban-col-urgente .seg-col-count {
  color: #3f3f3a !important;
}

/* ===================================================================
   DETALLE DE VENTA — secciones en grilla de 3 columnas con contraste.
   Cada sección desplegable entra de a 3 por fila en vez de a todo el ancho.
   =================================================================== */
.seg-detalle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
  margin-bottom: 16px;
}
/* Dentro de la grilla, las tarjetas no llevan margen propio (usa el gap) */
.seg-detalle-grid .seg-detalle-card {
  margin-bottom: 0 !important;
  border: 2px solid var(--color-borde-tarjeta) !important;
}
/* Íconos sobrios y chicos (mismo estilo que el resto del sistema) */
.seg-detalle-grid .seg-summary .icon-svg:first-child {
  width: 17px; height: 17px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
/* Fondo BLANCO en los encabezados (igual que la tarjeta de Documentación).
   El !important pisa la regla base celeste y la de [open]. */
.seg-detalle-grid .seg-summary,
.seg-detalle-grid .seg-desplegable[open] > .seg-summary {
  background: var(--color-surface) !important;
}
.seg-detalle-grid .seg-summary:hover {
  background: var(--color-surface-alt) !important;
}
/* Botones "Bajar" / "Ver" de Documentación: borde oscuro (antes celeste, se perdían) */
.seg-card-archivos .btn-accion {
  border: 1.5px solid var(--color-borde-tarjeta);
  color: var(--color-text);
}

/* En pantallas medianas, 2 por fila; en chicas, 1 */
@media (max-width: 1000px) {
  .seg-detalle-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .seg-detalle-grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   MENÚ — grupos plegables (submenús). Estilo sobrio con borde negro.
   =================================================================== */
.menu-grupo {
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Cabecera del grupo (el botón que despliega) */
.menu-grupo-cab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: left;
  transition: background 0.13s ease;
}
.menu-grupo-cab:hover { background: var(--color-surface-alt); }
/* Inicio y Mis Tareas (sueltos arriba): íconos sobrios, chicos, sin cajita */
.menu-nav-lista > .menu-nav-item .menu-nav-icon {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
}
.menu-nav-lista > .menu-nav-item.active {
  border-left: 3px solid var(--color-primary) !important;
  padding-left: calc(0.85rem - 3px) !important;
}
.menu-nav-lista > .menu-nav-item.active .menu-nav-icon {
  color: var(--color-primary) !important;
}
.menu-nav-lista > .menu-nav-item.active span { color: var(--color-text) !important; }
.menu-nav-lista > .menu-nav-item.active::before { display: none !important; }

/* Ícono del grupo: sobrio, sin cajita de color. En gris; petróleo si está abierto. */
.menu-grupo-cab .menu-nav-icon {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  flex-shrink: 0;
  color: var(--color-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.menu-grupo.abierto .menu-grupo-cab .menu-nav-icon {
  color: var(--color-primary) !important;
}
/* La flecha del acordeón, a la derecha */
.menu-grupo-flecha {
  margin-left: auto;
  width: 18px; height: 18px;
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
}
.menu-grupo.abierto .menu-grupo-flecha {
  transform: rotate(180deg);
  color: var(--color-primary);
}
/* Cuerpo del grupo: blanco (no celeste), separado por una línea */
.menu-grupo-cuerpo {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-top: 1.5px solid var(--color-borde-tarjeta);
  background: var(--color-surface);
}
.menu-grupo.abierto .menu-grupo-cuerpo { display: flex; }
/* Sub-ítems: planos, sin caja. Barra petróleo al costado cuando están activos. */
.menu-nav-subitem {
  box-shadow: none !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  padding: 0.55rem 0.7rem !important;
  font-weight: 500 !important;
}
.menu-nav-subitem:hover:not(.active) {
  background: var(--color-surface-alt) !important;
  transform: none !important;
}
.menu-nav-subitem .menu-nav-icon {
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  box-shadow: none !important;
}
/* Sub-ítem activo: barra petróleo + texto e ícono en petróleo, fondo tenue */
.menu-nav-subitem.active {
  border-left: 3px solid var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
  padding-left: 0.7rem !important;
}
.menu-nav-subitem.active span { color: var(--color-text) !important; }
.menu-nav-subitem.active::before { display: none !important; }
.menu-nav-subitem.active .menu-nav-icon {
  background: transparent !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* ===================================================================
   SEGUIMIENTO — versión MÓVIL: filtros y botones a ancho completo, parejos.
   Solo en pantallas chicas; en escritorio quedan en fila como siempre.
   =================================================================== */
@media (max-width: 640px) {
  .seg-filtros {
    flex-direction: column;
    align-items: stretch;
  }
  .seg-filtros .seg-filtro-input,
  .seg-filtros .seg-filtro-select,
  .seg-filtros .seg-filtro-ticket,
  .seg-filtros input,
  .seg-filtros select {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* El botón Limpiar y el conmutador Tablero/Lista también a todo el ancho */
  .seg-filtros .btn,
  .seg-filtros .seg-vista-toggle {
    width: 100%;
  }
  .seg-filtros .seg-vista-toggle { display: flex; }
  .seg-filtros .seg-vista-toggle .seg-vista-btn { flex: 1; justify-content: center; }
}

/* ====================================================================
   Botón "Envié la documentación solicitada" (seguimiento, vista vendedor)
   ==================================================================== */
.seg-doc-aviso {
  background: #fdf0e9;
  border: 1px solid #f0c4ac;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.seg-doc-aviso-txt {
  font-size: 0.85rem;
  color: #8a4318;
  display: flex;
  align-items: center;
  gap: 6px;
}
.seg-doc-aviso-txt .icon-svg { width: 16px; height: 16px; flex-shrink: 0; }
.seg-doc-btn {
  background: #2e7d5b;
  color: #fff;
  border: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.seg-doc-btn:hover { background: #276b4e; }
.seg-doc-btn .icon-svg { width: 16px; height: 16px; }

.seg-doc-form {
  background: var(--form-campo-fondo, #f6f7f9);
  border: 1px solid #c9d4cf;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 0.7rem;
}
.seg-doc-form-titulo { font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; }
.seg-doc-form-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.seg-doc-form-botones { display: flex; gap: 8px; }
.seg-doc-enviar { background: #2e7d5b; }
.seg-doc-enviar:hover { background: #276b4e; }
.seg-doc-form-nota {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* ====================================================================
   Mis Tareas: secciones "Documentación por recibir" y "Conversaciones"
   ==================================================================== */
.tareas-secciones {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 20px;
}
.tareas-seccion-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tareas-seccion-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
}
.tareas-seccion-ico .icon-svg { width: 16px; height: 16px; }
.tareas-seccion-tit { font-size: 0.95rem; font-weight: 600; }
.tareas-seccion-num {
  margin-left: auto;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
}
.tarea-sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tarea-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--color-border, #e2e6ea);
  border-left: 3px solid #888;
  border-radius: 8px;
  padding: 11px 13px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  background: #fff;
}
.tarea-sub:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.tarea-sub-vacia { opacity: 0.5; cursor: default; }
.tarea-sub-vacia:hover { transform: none; box-shadow: none; }
.tarea-sub-ico { flex-shrink: 0; display: flex; align-items: center; }
.tarea-sub-ico .icon-svg { width: 17px; height: 17px; }
.tarea-sub-txt { font-size: 0.82rem; flex: 1; min-width: 0; }
.tarea-sub-num { font-size: 1.1rem; font-weight: 700; }

@media (max-width: 640px) {
  .tarea-sub-grid { grid-template-columns: 1fr; }
}

/* ====================================================================
   Mis Tareas: 3 categorías + tarjetas cuadradas + listado desplegable
   ==================================================================== */
.tareas-cats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tareas-cat {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-borde-tarjeta, #d3d9df);
  color: var(--color-text);
  text-align: left;
}
.tareas-cat.activa { color: #fff; font-weight: 600; }
.tareas-cat-ico { width: 20px; height: 20px; flex-shrink: 0; }
.tareas-cat-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.2; }
.tareas-cat-nom { font-size: 0.85rem; font-weight: 600; }
.tareas-cat-sub { font-size: 0.7rem; opacity: 0.8; }
.tareas-cat-num {
  background: var(--color-surface-alt, #f1f3f5);
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 8px;
  min-width: 22px;
  text-align: center;
}
.tareas-cat-num.activa { background: rgba(255,255,255,0.25); color: #fff; }

.tareas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.tarea-card {
  background: #fff;
  border: 1px solid var(--color-border, #e2e6ea);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}
.tarea-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.tarea-card-vacia { opacity: 0.5; cursor: default; }
.tarea-card-vacia:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.tarea-card-abierta { box-shadow: 0 0 0 2px currentColor inset; }
.tarea-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tarea-card-ico .icon-svg { width: 22px; height: 22px; }
.tarea-card-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.tarea-card-tit { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; }
.tarea-card-desc { font-size: 0.75rem; color: var(--color-text-muted); line-height: 1.35; }
.tarea-card-ver { margin-top: 8px; font-size: 0.8rem; font-weight: 600; }
.tarea-card-ver-vacio { margin-top: 8px; font-size: 0.78rem; color: var(--color-text-muted); }
.tarea-card-ver-vacio .icon-svg { width: 13px; height: 13px; }

/* Listado desplegable de ventas */
.tareas-listado {
  margin-top: 14px;
  border: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  border-radius: 10px;
  overflow: hidden;
}
.tareas-listado-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--color-surface-alt, #f4f5f7);
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid var(--color-borde-tarjeta, #e2e6ea);
}
.tareas-listado-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-borde-tarjeta, #eef0f2);
  transition: background 0.1s;
}
.tareas-listado-fila:last-child { border-bottom: none; }
.tareas-listado-fila:hover { background: var(--color-surface-alt, #f7f8fa); }
.tareas-listado-cliente { font-size: 0.88rem; font-weight: 500; flex: 1; min-width: 0; }
.tareas-listado-meta { font-size: 0.78rem; color: var(--color-text-muted); }
.tareas-listado-ir { font-size: 0.8rem; font-weight: 600; white-space: nowrap; }

/* ====================================================================
   Tarjeta de venta del Kanban: limpia y pareja (sin DNI/alta/N°socio)
   ==================================================================== */
.seg-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seg-card .lead-nombre { margin: 0; font-size: 0.9rem; font-weight: 600; }
.seg-card .seg-card-prepaga { align-self: flex-start; }
.seg-card .seg-card-asesor {
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.seg-card .seg-card-asesor .icon-svg { width: 13px; height: 13px; }

/* ====================================================================
   Demoras: botones Posponer / Resolver en el listado
   ==================================================================== */
.tareas-listado-fila-demora {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;
}
.tareas-listado-fila-demora:hover { background: transparent; }
.tareas-listado-info { display: flex; flex-direction: column; gap: 2px; }
.tareas-listado-sub {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tareas-listado-sub .icon-svg { width: 12px; height: 12px; }
.tareas-listado-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tarea-btn-posponer, .tarea-btn-resolver, .tarea-btn-ver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  padding: 7px 13px;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  border: 1px solid transparent;
}
.tarea-btn-posponer {
  background: var(--color-surface-alt, #f1f3f5);
  border-color: var(--color-borde-tarjeta, #d3d9df);
  color: var(--color-text);
}
.tarea-btn-resolver { background: #2e7d5b; color: #fff; }
.tarea-btn-resolver:hover { background: #276b4e; }
.tarea-btn-ver { background: transparent; margin-left: auto; color: var(--color-text-accent, #1B5A7D); font-weight: 600; }
.tarea-btn-posponer .icon-svg, .tarea-btn-resolver .icon-svg { width: 14px; height: 14px; }

/* Botón del admin "Recibido conforme" */
.seg-doc-recibido {
  background: #e1f5ee;
  border: 1px solid #b4e0d1;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.seg-doc-recibido-btn {
  background: #0f6e56;
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.seg-doc-recibido-btn:hover { background: #0c5c48; }
.seg-doc-recibido-btn .icon-svg { width: 16px; height: 16px; }
.seg-doc-recibido-nota { font-size: 0.72rem; color: #0f6e56; }

/* ====================================================================
   Usuarios: pestañas + gestión masiva de accesos (prepagas/herramientas)
   ==================================================================== */
.users-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.users-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: transparent;
  border: none;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.users-tab.activa { color: var(--color-primary, #0A3D62); font-weight: 600; border-bottom-color: var(--color-primary, #0A3D62); }
.users-tab .icon-svg { width: 15px; height: 15px; }

.acceso-masivo-lbl { font-size: 0.8rem; color: var(--color-text-muted); display: block; margin-bottom: 8px; }
.acceso-masivo-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.acceso-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.83rem;
  cursor: pointer;
  background: var(--color-surface-alt, #f1f3f5);
  border: 1px solid var(--color-borde-tarjeta, #d3d9df);
  color: var(--color-text);
}
.acceso-chip-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.acceso-chip.activa .acceso-chip-punto { background: #fff !important; }

.acceso-masivo-lista { border: 1px solid var(--color-borde-tarjeta, #e2e6ea); border-radius: 12px; overflow: hidden; }
.acceso-masivo-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 15px;
  background: var(--color-surface-alt, #f4f5f7);
  border-bottom: 1px solid var(--color-borde-tarjeta, #e2e6ea);
  font-size: 0.88rem;
}
.acceso-masivo-btns { display: flex; gap: 8px; }
.acceso-mini-btn {
  font-size: 0.75rem;
  padding: 5px 12px;
  border: 1px solid var(--color-borde-tarjeta, #d3d9df);
  background: var(--color-surface, #fff);
  border-radius: 6px;
  cursor: pointer;
}
.acceso-mini-btn:hover { background: var(--color-surface-alt, #f1f3f5); }
.acceso-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--color-borde-tarjeta, #eef0f2);
  cursor: pointer;
}
.acceso-fila:last-child { border-bottom: none; }
.acceso-fila:hover { background: var(--color-surface-alt, #f7f8fa); }
.acceso-cb { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.acceso-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary, #0A3D62);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}
.acceso-nombre { font-size: 0.9rem; font-weight: 500; }
.acceso-vacio { padding: 20px 15px; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }
.acceso-masivo-guardar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
}
.acceso-guardar-info { font-size: 0.82rem; color: var(--color-text-muted); }