/* coe-factoring-hermes — confirming.css
 *
 * El lenguaje visual del MOCKUP NUEVO (`funcional/Mockup Hermes actual.html`,
 * `#view-confirming`): tarjetas numeradas en dos columnas.
 *
 * POR QUE UN ARCHIVO APARTE Y NO MAS REGLAS EN `cotizador.css`
 * ------------------------------------------------------------
 * Porque son dos lenguajes distintos conviviendo, no uno que crecio. Factoring
 * usa la grilla de dos paneles del mockup viejo; Confirming, las tarjetas del
 * nuevo. Negocio decidio que el nuevo rige "de esta calculadora en adelante",
 * asi que la divergencia es deliberada y va a durar hasta que alguien decida
 * si Factoring se re-maqueta (§2.2-e del plan de Confirming).
 *
 * Mezclarlos en un archivo haria que cada regla nueva tuviera que responder
 * "¿esta es de la maqueta vieja o de la nueva?" en cada linea.
 *
 * LO QUE SI SE REUSA, Y NO SE REDEFINE ACA
 * -----------------------------------------
 * `field-grid`, `field-group`, `lbl`, `yellow-box`, `readonly-box`,
 * `dropdown-box-wrap`, `plain-val-block`, `campo-con-sugerencias`,
 * `sugerencias`, `msg-campo`, `sufijo`, `field-legend`, `swatch`,
 * `actions-row`, `action-btn`, `resultados`, `aviso-obsoleto` y `avisos`
 * viven en `cotizador.css` y `estados.css`. Este archivo
 * solo agrega lo que la maqueta nueva trae de propio.
 *
 * Todo `var(--x)` de aca esta declarado en `tokens.css`; hay un test que lo
 * verifica.
 */

/* ------------------------------------------------------------------ tarjetas
 *
 * La unidad de la maqueta nueva. Reemplaza al `.sub-card` de Factoring: alli
 * las secciones son bloques dentro de un panel unico, aca cada paso es una
 * tarjeta con sombra propia.
 */
/* SIN `overflow: hidden`, y es deliberado.
 *
 * Lo tenia, copiado de `.panel`, donde SI hace falta: alla la barra de marca
 * se sale de la caja con margenes negativos y son las esquinas redondeadas del
 * panel las que la recortan. Aca no hay nada que se salga —ningun hijo de
 * ninguna tarjeta excede su caja— asi que el recorte no estaba protegiendo
 * nada... salvo que recortaba la lista de sugerencias del buscador.
 *
 * El sintoma: en la tarjeta 1 (Partes de la operacion), que es corta, el
 * desplegable de razones sociales se cortaba al llegar al borde inferior de la
 * tarjeta y quedaba a la mitad. En Factoring no se veia porque su panel es
 * mucho mas alto y la lista entraba entera.
 *
 * Un `position: absolute` no escapa del `overflow` de un ancestro; solo
 * `position: fixed` lo haria, y eso obligaria a recalcular la posicion de la
 * lista en cada scroll. Quitar el recorte es la correccion. */
.panel-card {
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  margin-bottom: 16px;
}

.panel-card-body { padding: 16px 18px 18px; }

/* Dos tarjetas por fila. Colapsa a una sola columna en pantallas angostas: la
 * app se usa tambien desde la notebook con el sidebar abierto. */
.two-col-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.two-col-row .panel-card { margin-bottom: 0; }

/* La misma correccion, en el OTRO contenedor que ya separa por su cuenta —y
 * que se habia pasado por alto—.
 *
 * `.resultados` es un flex con `gap`, asi que el `margin-bottom` de la tarjeta
 * NO lo reemplaza: se le suma. Entre los apartados 5 y 6 quedaban 30px (14 de
 * gap + 16 de margen) donde toda la vista usa 16, y era la unica separacion
 * distinta de la pantalla. El sintoma es tipico de esta clase de error: nadie
 * lo lee como un bug, se lee como que ese corte "respira mas".
 *
 * El gap sube a 16 para igualar al resto y el margen se apaga, de modo que la
 * separacion tenga UN solo origen. Dos mecanismos sumandose es lo que produjo
 * el 30 en primer lugar.
 *
 * Va acotado a `#view-confirming`: Factoring tiene su propio ritmo interno de
 * 14px, consistente de punta a punta, y no hay razon para moverlo. */
#view-confirming .resultados { gap: 16px; }
#view-confirming .resultados > .panel-card { margin-bottom: 0; }

@media (max-width: 1100px) {
  .two-col-row { grid-template-columns: 1fr; }
}

/* El numero del paso. Guia el orden de llenado, que es la unica ayuda que la
 * maqueta nueva le da al ejecutivo nuevo: el formulario no valida en orden. */
.paso-num {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(18, 64, 44, 0.28);
}

/* La cabecera de cada tarjeta. Comparte clase con Factoring, asi que solo se
 * ajusta lo que cambia dentro de esta vista. */
#view-confirming .sub-card-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

#view-confirming .sub-card-head h3 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--text);
  letter-spacing: .01em;
}

/* Los controles del extremo derecho de la cabecera del paso 3. */
.head-right-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.proforma-toggle-lbl {
  font-size: var(--fs-xxs);
  color: var(--text-soft);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ la marca
 *
 * La franja de arriba. En Factoring vive dentro del panel; aca es una barra
 * propia sobre las tarjetas.
 */
.calc-brand-full {
  margin: 0 0 16px;
  border-radius: var(--radio-lg);
}

/* ------------------------------------------------------------------ campos */

/* Las etiquetas en versalitas separan mejor rotulo de dato cuando el dato esta
 * centrado, que es lo que hace esta maqueta. */
#view-confirming .field-group > .lbl,
#view-confirming .lbl-row .lbl {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
}

/* La fila del conmutador es mas alta que una etiqueta suelta: se igualan para
 * que las cajas amarillas de la misma fila arranquen al mismo nivel. */
#view-confirming .field-group > .lbl,
#view-confirming .lbl-row {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.lbl-row {
  justify-content: space-between;
  gap: 8px;
}

/* Un campo que ocupa las dos columnas de su tarjeta. */
.field-group.span-2 { grid-column: 1 / -1; }

/* La unidad de la tasa, al lado de su etiqueta. */
.riesgo-cap {
  font-size: var(--fs-xxs);
  color: var(--text-mute);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

#view-confirming .yellow-box,
#view-confirming .readonly-box,
#view-confirming .dropdown-box-wrap,
#view-confirming .plain-val-block { width: 100%; }

/* Valores centrados: amarillos y calculados quedan en la misma linea optica. */
#view-confirming .plain-val-block { text-align: center; }

/* ------------------------------------------------------------- conmutadores
 *
 * Dos en esta vista, y los dos escriben un `<input type=hidden>`:
 *
 *   modo de comision   -> `comision_modo`, que viaja en `entrada`
 *   comision en la proforma -> `comision_en_proforma`, que viaja en `contexto`
 *
 * Son `<button>` y no un `<select>` porque son binarios y el estado tiene que
 * verse sin desplegar nada. Llevan `aria-pressed`, que es lo que un lector de
 * pantalla anuncia.
 */
.seg-modo {
  display: flex;
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--value-box);
}

.seg-modo button {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: 7px 6px;
  cursor: pointer;
  white-space: nowrap;
}

.seg-modo button + button { border-left: 1px solid var(--value-box-border); }
.seg-modo button.on { background: var(--green); color: #fff; }
.seg-modo button:hover:not(.on) { background: var(--card-bg); }
.seg-modo button:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.seg-modo-compact {
  width: auto;
  border-radius: 5px;
  flex-shrink: 0;
}

.seg-modo-compact button {
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 800;
}

/* --------------------------------------------------------------- resultados
 *
 * Cajas en grilla de tres. Las oscuras son los totales — el ojo cae ahi
 * primero, que es donde esta el numero que se lleva a la negociacion.
 */
.result-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 760px) {
  .result-grid-3 { grid-template-columns: 1fr; }
}

.result-box {
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}

/* Los rotulos van en NEGRITA y dos puntos mas grandes que el resto de la
 * maqueta. Es la zona que el ejecutivo lee en voz alta con el cliente al lado,
 * y a 10px sin peso los nombres de los sumandos se perdian contra los
 * importes. */
.result-box .k {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 4px;
}

.result-box .v {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--text);
}

.result-box-dark {
  background: var(--green);
  border-color: var(--green-dark);
}

.result-box-dark .k { color: var(--green-050); }
.result-box-dark .v { color: #fff; }

.result-box-wide {
  margin-bottom: 0;
  padding: 14px 10px;
}

.result-box-wide .k {
  text-transform: uppercase;
  letter-spacing: .02em;
}

.result-box-wide .v { font-size: var(--fs-xxl); }

/* ------------------------------------------------- tarifario de referencia
 *
 * Material de consulta. Se abre sobre la pantalla y NO es parte de la
 * cotizacion: vive fuera del `<form>` y fuera del area de captura.
 */
.info-popover {
  position: fixed;
  z-index: 200;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, calc(100vw - 32px));
  max-height: 80vh;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
}

.info-popover-head {
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.info-popover-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-popover-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green-050);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
}

.info-popover-icon svg { width: 19px; height: 19px; }

.info-popover-title-main {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--text);
}

/* No es decoracion: dice que estos numeros NO los aplica el sistema. Mientras
 * Confirming no tenga semaforos (§2.1-D del plan), es la unica cosa que impide
 * que la tabla se lea como una validacion. */
.info-popover-subtitle {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin-top: 2px;
}

.info-popover-close {
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.info-popover-close svg { width: 14px; height: 14px; }
.info-popover-close:hover { background: var(--error-bg); color: var(--error-text); border-color: var(--error-border); }

.info-popover-body {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--paper);
}

@media (max-width: 760px) {
  .info-popover-body { grid-template-columns: 1fr; }
}

.info-popover-body .panel {
  box-shadow: var(--sombra);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--card-bg);
}

.info-popover-body .panel-head {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--green);
  background: var(--green-050);
  padding: 12px;
}

/* El telon. Cierra al hacer clic afuera, que es lo que espera cualquiera. */
.telon-tarifario {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(20, 30, 60, 0.28);
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-info-tip {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--green-050);
  border: 1px solid var(--green-100);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.btn-info-tip svg { width: 14px; height: 14px; }
.btn-info-tip:hover { background: var(--green); color: #fff; }
.btn-info-tip:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ------------------------------------------------------- tablas de referencia */

.ref-table {
  width: 100%;
  border-collapse: collapse;
}

.ref-table th {
  background: var(--green-050);
  color: var(--green);
  font-size: var(--fs-xxs);
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.ref-table td {
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.ref-table tr:last-child td { border-bottom: none; }
.ref-table td.rating-letter { font-weight: 800; color: var(--green); }

.stat-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 6px;
}

.stat-mini {
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: 8px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
}

.stat-mini b { font-size: var(--fs-base); }

.caption-sm {
  font-size: var(--fs-xs);
  color: var(--text-soft);
  padding: 10px 12px;
  line-height: 1.5;
}

.caption-sm p { margin: 0; }