/* ==========================================================================
   IMPORTADOR DE VENTAS HISTORICAS
   ==========================================================================
   Vive dentro de Facturacion. Trae al sistema las ventas que quedaron en la
   planilla vieja.

   El paso de revision es lo importante de esta pantalla: antes de escribir
   nada en la base, el admin ve QUE encontro el archivo y decide que hacer
   con cada vendedor que no reconoce. Por eso los que no matchean van
   arriba, con borde, y los reconocidos abajo, apagados.
   ========================================================================== */

.imp-panel {
  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.4rem;
}

.imp-panel h4 {
  margin: 1.3rem 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
}
.imp-panel h4:first-of-type { margin-top: 0.8rem; }

.imp-periodo {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.9rem 0;
}
.imp-periodo .campo { flex: 1; min-width: 150px; margin: 0; }

.imp-periodo .campo select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

/* --- La lista de vendedores --- */

.imp-lista {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.imp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;

  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

/* Los que NO matchean necesitan una decision: se marcan con el ribete de
   cuidado, no con rojo. No es un error, es algo que resolver. */
.imp-lista:not(.imp-lista-ok) .imp-item {
  border-left: 3px solid var(--aviso-cuidado-icono, #d97706);
}

/* Los reconocidos: apagados. Ya estan resueltos, no piden atencion. */
.imp-item-ok {
  opacity: 0.72;
  border-left: 3px solid var(--color-success, #16a34a);
}
.imp-item-ok .icon-svg {
  width: 17px; height: 17px;
  color: var(--color-success, #16a34a);
  flex-shrink: 0;
}

.imp-item-nombre { min-width: 0; }
.imp-item-nombre strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-text);
}
.imp-item-nombre span {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  word-break: break-word;
}

.imp-item-acciones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.imp-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0.35rem 0.7rem;
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);

  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
}
.imp-radio:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}
.imp-radio input { accent-color: var(--color-primary); cursor: pointer; }

/* --- Progreso --- */

.imp-barra {
  height: 8px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-borde-tarjeta);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.6rem 0;
}
.imp-barra-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

/* --- Pie --- */

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

@media (max-width: 640px) {
  .imp-item { flex-direction: column; align-items: stretch; }
  .imp-item-acciones { justify-content: stretch; }
  .imp-radio { flex: 1; justify-content: center; }
  .imp-pie { flex-direction: column-reverse; }
  .imp-pie button { width: 100%; }
}


/* ==========================================================================
   ACCIONES SOBRE EL REMITO — excluir y cambio de vigencia
   ==========================================================================
   Una venta que no suma se sigue VIENDO. Apagada y con un chip que dice por
   qué, pero visible: si desapareciera, el vendedor abriría su remito,
   encontraría menos ventas de las que cargó, y no tendría forma de saber
   qué pasó con las que faltan.
   ========================================================================== */

.fact-chip {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
}

/* Excluida: es una decisión administrativa, no un problema de la venta.
   Pero SÍ tiene que saltar a la vista: sus cifras no están en el remito. */
.fact-chip-excluida {
  background: var(--aviso-peligro-fondo);
  color: var(--aviso-peligro-titulo);
  border: 1px solid var(--aviso-peligro-borde);
}

/* --- La fila de una venta excluida del remito -------------------------
   🔴 ROJO SUAVE, NO ROJO FUERTE. La fila tiene que gritar "no cuento" y
   seguir siendo legible. Con un rojo saturado el nombre no se lee y la
   tabla entera queda agresiva cuando hay varias excluidas seguidas.

   Y NO se atenúa con opacity como las movidas: atenuar dice "esto importa
   menos", y una exclusión es justo lo que hay que mirar. */
.fact-fila-excluida > td {
  background: var(--aviso-peligro-fondo);
}
.fact-fila-excluida > td:first-child {
  border-left: 4px solid var(--aviso-peligro-icono);
}

/* El nombre tachado: se lee de lejos, sin buscar el chip. */
.fact-nombre-excluido {
  color: var(--aviso-peligro-titulo);
  text-decoration: line-through;
}

/* El guion que reemplaza a los montos. Va un guion y no una celda vacía:
   la celda vacía deja la duda de si el dato falta o si vale cero. */
.fact-monto-oculto {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Debajo del estado. El chip verde de "Para cobrar" al lado de una venta
   excluida era la contradicción que más confundía. */
.fact-no-computa {
  margin-top: 0.2rem;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Movida: la venta está bien, cobra en otro mes. Ámbar = "esperá". */
.fact-chip-movida {
  background: var(--aviso-cuidado-fondo);
  color: var(--aviso-cuidado-titulo);
  border: 1px solid var(--aviso-cuidado-icono);
}

.fact-acciones {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
  white-space: nowrap;
}

/* Los botones son chicos y sin fondo: son acciones de excepción, no algo
   que se use en cada fila. Recién al pasar por encima se marcan. */
.fact-btn-mini {
  background: none;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 5px;
  cursor: pointer;
  color: var(--color-text-muted);
  line-height: 0;
}
.fact-btn-mini:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface-alt);
}
.fact-btn-mini .icon-svg { width: 15px; height: 15px; }


/* --- Ajustes manuales sobre una venta ----------------------------------- */

/* La cuota que se corrigio a mano se marca. No es lo mismo un numero que
   salio del calculo que uno que alguien escribio: quien mire el remito
   despues tiene que poder distinguirlos. */
.fact-chip-ajustada {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* --- El reporte al pie de la liquidacion --------------------------------
   Va DESPUES de la tabla y ANTES de los totales, con borde propio: es
   informacion para el vendedor, no parte del calculo. Si su comision
   cambio, aca esta el motivo escrito por quien lo cambio. */

.fact-reporte-ajustes {
  margin-top: 1.6rem;
  padding: 1rem 1.15rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.fact-reporte-ajustes h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.3rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary);
}
.fact-reporte-ajustes h4 .icon-svg { width: 17px; height: 17px; }

.fact-ajuste-item {
  padding: 0.7rem 0;
  border-top: 1px solid var(--color-border);
}
.fact-ajuste-item:first-of-type { border-top: none; }

.fact-ajuste-motivo {
  font-size: 0.88rem;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

.fact-ajuste-lista {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}
.fact-ajuste-lista li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
  margin-bottom: 0.2rem;
}
.fact-ajuste-lista .icon-svg {
  width: 13px; height: 13px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.fact-ajuste-ant {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.fact-ajuste-nue {
  color: var(--color-primary);
  font-weight: 600;
}

.fact-ajuste-fecha {
  margin-top: 0.35rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

/* --- La fila en edicion -------------------------------------------------
   Reemplaza a la fila normal. El ribete pasa a TERRACOTA: es la senial de
   "esto lo estas tocando vos", distinta del verde/ambar/rojo que informan
   el estado de la venta. */

.fact-fila-edit > td {
  border-left: 4px solid var(--color-accent);
  background: var(--form-campo-fondo);
  padding: 0.8rem 0.9rem !important;
}

.fact-edit-campos {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.fact-edit-campos label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 160px;
}
.fact-edit-campos .fact-edit-corto { flex: 0 1 140px; min-width: 120px; }

.fact-edit-campos label > span {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
}

.fact-edit-campos input,
.fact-edit-campos select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;

  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);

  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.fact-edit-campos input:focus,
.fact-edit-campos select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

/* La cuota tocada se marca: es el campo que cambia la plata. */
.fact-edit-tocado {
  border-color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
}

/* --- El pie de la fila: motivo y botones --- */

.fact-edit-pie {
  display: flex;
  gap: 0.9rem;
  align-items: flex-end;
  flex-wrap: wrap;

  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--form-campo-borde);
}

.fact-edit-motivo { flex: 1; min-width: 240px; }
.fact-edit-motivo label { display: block; }
.fact-edit-motivo label > span {
  display: block;
  font-size: 0.76rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.fact-edit-motivo em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 700;
}
.fact-edit-motivo input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.fact-edit-motivo input:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}
.fact-edit-motivo small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.fact-edit-botones {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.fact-edit-botones .btn-chico {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .fact-edit-campos label,
  .fact-edit-campos .fact-edit-corto { flex: 1 1 100%; }
  .fact-edit-botones { width: 100%; }
  .fact-edit-botones .btn-chico { flex: 1; }
}


/* --- El estado, clickeable ----------------------------------------------
   Mantiene el color que ya tenia (verde/ambar/rojo segun el estado): eso
   es informacion y no cambia. Lo que se agrega es el borde punteado, que
   dice "esto se puede tocar" sin competir con el color de fondo. */

.fact-estado-btn {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;

  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;

  border: 1px dashed currentColor;
  cursor: pointer;
}
.fact-estado-btn:hover {
  border-style: solid;
  filter: brightness(0.95);
}


/* ==========================================================================
   "NO INGRESA": MOTIVO Y ACCION
   ==========================================================================
   Una venta rechazada no es necesariamente una venta perdida. El motivo lo
   marca el administrativo; que hacer, el vendedor.

   El bloque va ARRIBA del detalle, antes de los datos: es lo que hay que
   resolver, no un dato mas de la venta.
   ========================================================================== */

.seg-motivo-box,
.seg-accion-box {
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
}

.seg-motivo-tit {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.2rem;
}
.seg-motivo-tit em {
  color: var(--color-accent);
  font-style: normal;
}

.seg-motivo-ayuda,
.seg-accion-ayuda {
  margin: 0.2rem 0 0.7rem;
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.seg-accion-ayuda {
  padding: 0.5rem 0.7rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  margin-top: 0.7rem;
}

/* --- Las opciones --- */

.seg-motivos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.seg-motivo-op {
  display: flex;
  align-items: center;
  gap: 0.55rem;

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

  font-size: 0.88rem;
  color: var(--color-text);
  cursor: pointer;
}
.seg-motivo-op:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-alt);
}
.seg-motivo-op input { accent-color: var(--color-primary); cursor: pointer; }

/* La elegida se marca fuerte: es una decisión, no una preferencia. */
.seg-motivo-op-sel {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  font-weight: 600;
}

/* --- El motivo, para el vendedor: solo lectura --- */

.seg-accion-motivo {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;

  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;

  background: var(--aviso-cuidado-fondo);
  border-radius: var(--radius-sm);
}
.seg-accion-motivo .icon-svg {
  width: 18px; height: 18px;
  color: var(--aviso-cuidado-icono);
  flex-shrink: 0;
  margin-top: 1px;
}
.seg-accion-motivo span {
  display: block;
  font-size: 0.8rem;
  color: var(--aviso-cuidado-titulo);
}
.seg-accion-motivo strong {
  display: block;
  font-size: 0.95rem;
  color: var(--aviso-cuidado-titulo);
}

/* --- La fecha del recordatorio --- */

.seg-accion-fecha {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border);
}
.seg-accion-fecha label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 180px;
}
.seg-accion-fecha label > span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text);
}
.seg-accion-fecha input {
  padding: 0.5rem 0.65rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.seg-accion-fecha input:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

.seg-accion-pie {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* --- Ya decidido: se muestra apagado, es historia --- */

.seg-accion-lista {
  border-left-color: var(--color-success, #16a34a);
}
.seg-accion-cab {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.seg-accion-cab .icon-svg {
  width: 18px; height: 18px;
  color: var(--color-success, #16a34a);
  flex-shrink: 0;
  margin-top: 2px;
}
.seg-accion-cab strong {
  display: block;
  font-size: 0.92rem;
  color: var(--color-text);
}
.seg-accion-cab span {
  display: block;
  font-size: 0.83rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

@media (max-width: 640px) {
  .seg-motivos-grid { grid-template-columns: 1fr; }
  .seg-accion-fecha label { flex: 1 1 100%; }
  .seg-accion-pie button { width: 100%; }
}


/* ==========================================================================
   OPORTUNIDADES
   ==========================================================================
   Ventas caidas que el vendedor agendo para retomar.

   La vista es por MES, no una lista ordenada por fecha: el vendedor abre
   el panel para saber "que trabajo este mes", y lo de noviembre no tiene
   que competir por atencion con lo de mañana.
   ========================================================================== */

.oport-nav {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;

  margin: 1rem 0 1.3rem;
  padding: 0.7rem 0.9rem;

  background: var(--color-surface-alt);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

.oport-nav-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;

  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  cursor: pointer;
}
.oport-nav-btn:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
.oport-nav-btn .icon-svg { width: 17px; height: 17px; }

.oport-nav-mes { min-width: 190px; }
.oport-nav-mes strong {
  display: block;
  font-size: 1.05rem;
  color: var(--color-primary);
  text-transform: capitalize;
}
.oport-nav-mes span {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.oport-hoy {
  padding: 0.35rem 0.8rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.oport-hoy:hover { border-color: var(--color-primary); color: var(--color-primary); }

.oport-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-size: 0.83rem;
  color: var(--color-text-muted);
  cursor: pointer;
}
.oport-check input { accent-color: var(--color-primary); cursor: pointer; }

/* --- Las tarjetas --- */

.oport-seccion { margin-bottom: 1.6rem; }

.oport-seccion-tit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-primary);
}
.oport-seccion-tit .icon-svg { width: 17px; height: 17px; }

/* Lo que quedo pendiente de meses anteriores. Ambar: no es un error, pero
   hay que mirarlo. Si no se mostrara, una venta agendada para agosto
   desapareceria el 1 de septiembre sin que nadie la haya trabajado. */
.oport-seccion-tit-alerta {
  color: var(--aviso-cuidado-titulo);
}
.oport-seccion-tit-alerta .icon-svg { color: var(--aviso-cuidado-icono); }

.oport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.8rem;
}

.oport-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
}

.oport-card-vencida { border-left-color: var(--aviso-cuidado-icono); }
.oport-card-hecha { opacity: 0.62; border-left-color: var(--color-success, #16a34a); }

.oport-card-cab {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.oport-card-cab strong {
  display: block;
  font-size: 0.95rem;
  color: var(--color-text);
}
.oport-dni {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.oport-prepaga {
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
}

.oport-motivo, .oport-accion, .oport-nota, .oport-asesor {
  font-size: 0.83rem;
  margin-bottom: 0.25rem;
}
.oport-motivo { color: var(--color-text-muted); }
.oport-motivo b { color: var(--color-text); }
.oport-accion { color: var(--color-primary); font-weight: 600; }
.oport-nota {
  color: var(--color-text);
  padding: 0.4rem 0.6rem;
  background: var(--color-surface-alt);
  border-radius: var(--radius-sm);
  margin-top: 0.3rem;
}
.oport-asesor {
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 0.3rem;
}

.oport-vencida-tag {
  margin-top: 0.4rem;
  padding: 0.3rem 0.55rem;
  background: var(--aviso-cuidado-fondo);
  color: var(--aviso-cuidado-titulo);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
}

.oport-card-pie {
  margin-top: auto;
  padding-top: 0.7rem;
  display: flex;
  justify-content: flex-end;
}

.oport-vacio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .oport-grid { grid-template-columns: 1fr; }
  .oport-check { margin-left: 0; width: 100%; }
  .oport-card-pie button { width: 100%; }
}


/* --- Activar una oportunidad en el CRM ---------------------------------- */

.oport-card-resultado {
  margin: 0.6rem 0 0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}
.oport-card-resultado label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.oport-card-resultado select {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-family: inherit;
  font-size: 0.83rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}

.oport-card-pie {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.oport-en-crm {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-success, #16a34a);
}
.oport-en-crm .icon-svg { width: 15px; height: 15px; }

/* --- Elegir el lead a reactivar ----------------------------------------- */
/* Nunca se elige uno solo: un match equivocado le mete la conversación de
   otro cliente adentro. El vendedor confirma cuál es. */

.oport-candidatos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.7rem 0; }

.oport-candidato {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;

  padding: 0.7rem 0.85rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-fuerte);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.oport-candidato:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }
.oport-candidato input { accent-color: var(--color-primary); margin-top: 3px; cursor: pointer; }
.oport-candidato-sel {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}
.oport-candidato strong { display: block; font-size: 0.9rem; color: var(--color-text); }
.oport-candidato span {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.oport-candidato-por {
  font-size: 0.74rem !important;
  font-style: italic;
  margin-top: 0.15rem;
}

/* --- El formulario del lead ---------------------------------------------
   Cada campo va envuelto en el bloque gris que usa TODO el sistema (el
   asistente de ventas, el alta de brokers). El modal era el unico lugar
   donde los campos quedaban sueltos, y se notaba: las etiquetas se leian
   pegadas al input de arriba y no se veia donde empezaba cada uno. */

.oport-form {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}

.oport-form-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.oport-form .campo,
.oport-form-fila .campo {
  display: block;
  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.6rem;
}

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

.oport-form .campo input,
.oport-form .campo select,
.oport-form-fila .campo input,
.oport-form-fila .campo select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;

  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);

  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}

.oport-form .campo input:focus,
.oport-form .campo select:focus,
.oport-form-fila .campo input:focus,
.oport-form-fila .campo select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

/* --- El botón de contacto manual en el CRM ------------------------------ */

.leads-head-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 640px) {
  .leads-head-btns { width: 100%; }
  .leads-head-btns .btn { flex: 1; justify-content: center; }
  .oport-form-fila { grid-template-columns: 1fr; }
}


/* --- El modal de contacto manual: mismo patron --------------------------- */

.venta-modal .oport-form-fila { margin-bottom: 0; }

.lm-form > .campo,
.lm-form .oport-form-fila .campo,
.venta-modal-cuerpo > .campo {
  display: block;
  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.6rem;
}

.venta-modal-cuerpo > .campo > span,
.lm-form .oport-form-fila .campo > span {
  display: block;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.35rem;
}

.venta-modal-cuerpo > .campo input,
.venta-modal-cuerpo > .campo select,
.venta-modal-cuerpo > .campo textarea,
.lm-form .oport-form-fila .campo input,
.lm-form .oport-form-fila .campo select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;

  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text);

  background: var(--color-surface);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.venta-modal-cuerpo > .campo input:focus,
.venta-modal-cuerpo > .campo select:focus,
.venta-modal-cuerpo > .campo textarea:focus,
.lm-form .oport-form-fila .campo input:focus,
.lm-form .oport-form-fila .campo select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px rgba(27, 90, 125, 0.14);
}

/* El pie, apenas separado del formulario: marca donde termina lo que hay
   que completar y empieza lo que hay que decidir. */
.venta-modal-pie {
  background: var(--color-surface-alt);
  border-top: 1.5px solid var(--color-border);
}


/* --- Recontacto a los 6 meses -------------------------------------------
   Un cliente al que se le vendio hace medio año se le puede volver a
   vender. Va en VERDE, no en ambar: no es algo que se este por vencer,
   es una oportunidad limpia. */

.oport-seccion-tit-recontacto { color: var(--color-success, #16a34a); }
.oport-seccion-tit-recontacto .icon-svg { color: var(--color-success, #16a34a); }

.oport-card-recontacto { border-left-color: var(--color-success, #16a34a); }