/* coe-factoring-hermes — cotizador.css
 *
 * La vista del cotizador: paneles, campos, resultados y acciones. Portado del
 * mockup aprobado por negocio, con dos diferencias de fondo:
 *
 *   - No hay estilos inline. La CSP es `script-src 'self'` y el markup se
 *     mantiene limpio de `style="..."` para poder apretarla despues.
 *   - Los valores calculados arrancan vacios (`—`), no con numeros de ejemplo:
 *     el mockup embarcaba una cotizacion falsa que se podia capturar.
 */

.main-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 18px; }
.right-col { display: flex; flex-direction: column; gap: 16px; }

.panel {
  background: var(--card-bg);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.panel-head {
  background: var(--green);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  padding: 11px;
}

.calc-body { padding: 6px 22px 18px 22px; }
.calc-body-v2 { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

.calc-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -18px -18px 4px -18px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  color: #fff;
}
.calc-brand svg { width: 22px; height: 22px; flex-shrink: 0; }
.calc-brand b { font-size: 14px; font-weight: 800; display: block; line-height: 1; }
.calc-brand span {
  font-size: var(--fs-xxs);
  font-style: italic;
  color: #8FE0B4;
  display: block;
  margin-top: 2px;
}

.sub-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radio-lg);
  padding: 14px 16px 16px 16px;
}
.sub-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.icon-badge {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: var(--green-050);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-badge svg { width: 13px; height: 13px; color: var(--green); }
.sub-card-head h3 { margin: 0; font-size: var(--fs-md); font-weight: 800; color: var(--text); }

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

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.field-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field-group.span-2 { grid-column: 1 / -1; }
.field-group .lbl { font-size: var(--fs-sm); color: var(--text-soft); }

/* Leyenda de la convencion de color. Es contenido, no adorno: sin ella el
 * amarillo y el gris son dos tonos arbitrarios. */
.field-legend {
  display: flex;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--text-soft);
  flex-wrap: wrap;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font-weight: 600;
}
.swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.swatch-yellow { background: var(--yellow); box-shadow: 0 0 0 1px var(--yellow-border) inset; }
.swatch-calc { background: var(--value-box); box-shadow: 0 0 0 1px var(--value-box-border) inset; }

/* Campo editable. Amarillo = el usuario tiene que escribir aca. */
.yellow-box {
  background: var(--yellow);
  border: 1px solid var(--yellow-border);
  border-radius: var(--radio);
  padding: 8px 12px;
  display: flex;
  align-items: center;
}
.yellow-box input {
  border: none;
  background: transparent;
  width: 100%;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
}
.yellow-box input:focus { outline: none; }
.yellow-box:focus-within,
.dropdown-box-wrap:focus-within {
  box-shadow: 0 0 0 2px var(--green-dark);
  border-radius: var(--radio);
}
/* Los campos de texto libre (razon social) se alinean a la izquierda: centrar
 * un nombre largo lo hace ilegible. */
.yellow-box input.texto-libre { text-align: left; font-size: var(--fs-sm); }

/* ------------------------- la unidad la pone el campo -------------------
 *
 * El `%` es del CAMPO, no del valor tipeado. Antes vivia en el `placeholder`
 * (`"1.20%"`), asi que desaparecia al primer caracter: justo cuando hay un
 * numero en pantalla, que es cuando la unidad importa, la unidad no estaba. Y
 * dejaba la duda de si habia que escribirlo —`numeros.js` lo tolera, pero eso
 * no se ve desde la pantalla—.
 *
 * Va posicionado en absoluto y no como parte del flujo para no mover el
 * input: el numero sigue centrado en la caja, como en los demas campos.
 */
.yellow-box.pct,
.mini-box .mv.pct { position: relative; }
.yellow-box.pct input,
.mini-box .mv.pct input { padding-right: 18px; }
.sufijo {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-soft);
  /* Un click en el `%` tiene que caer en el input, no en el `<span>`. */
  pointer-events: none;
}

/* ---------------------- sugerencias del buscador ----------------------
 *
 * La lista va POSICIONADA en absoluto, flotando sobre lo que sigue. Si
 * ocupara espacio en el flujo, aparecer y desaparecer con cada tecla
 * empujaria los cinco campos de abajo y el formulario temblaria mientras el
 * ejecutivo escribe.
 */
.campo-con-sugerencias { position: relative; }

.sugerencias {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  /* Puede ser mas ancha que el campo: flota sobre el contenido, asi que no hay
   * razon para que el nombre compita con el ancho de un input angosto. */
  min-width: 100%;
  width: max-content;
  max-width: 380px;
  z-index: 40;
  list-style: none;
  padding: 4px;
  background: var(--card-bg);
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  max-height: 240px;
  overflow-y: auto;
}

/* Dos filas y no una.
 *
 * Con el nombre, el RUC y el rating en una sola linea, el campo es demasiado
 * angosto y el que se trunca es el NOMBRE — que es justo el dato por el que se
 * esta eligiendo. Un selector de empresas que muestra "GRUPO SANTA ELE..." no
 * sirve para elegir una empresa.
 *
 * El nombre se lleva la fila de arriba completa; el RUC va abajo en chico, que
 * es su papel real: desempatar entre dos razones sociales parecidas. */
.sugerencia {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "nombre riesgo"
    "ruc    riesgo";
  align-items: center;
  gap: 0 10px;
  padding: 7px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--fs-sm);
}
/* `.activo` lo pone la navegacion por teclado; el hover cubre el mouse. Los
 * dos usan el mismo fondo para que se vea igual llegar de una forma o de la
 * otra. */
.sugerencia:hover,
.sugerencia.activo { background: var(--green-050); }

.sug-nombre {
  grid-area: nombre;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sug-ruc {
  grid-area: ruc;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
.sug-riesgo {
  grid-area: riesgo;
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fs-xxs);
  font-weight: 800;
  color: var(--text-soft);
  white-space: nowrap;
}

.sugerencia-aviso {
  padding: 9px;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.4;
}

/* El campo cuyo valor vino del padron. Es informacion, no adorno: dice que
 * ese RUC y ese riesgo no los tipeo el ejecutivo, asi que si estan mal el
 * problema esta en el padron y no en quien cotiza. */
.del-padron .plain-val-block,
.del-padron .dropdown-select { box-shadow: inset 3px 0 0 var(--green); }

.dropdown-box-wrap { position: relative; }
.dropdown-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid var(--value-box-border);
  background: var(--value-box);
  border-radius: var(--radio);
  padding: 8px 30px 8px 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
}
.dropdown-box-wrap svg {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  opacity: .55;
  pointer-events: none;
}

/* Campo en error. El `field` del envelope del servidor es literalmente el
 * nombre del input, asi que marcarlo es una busqueda directa. */
.con-error .yellow-box,
.con-error .readonly-box,
.con-error .dropdown-select,
.con-error .mv,
.con-error input[type="date"] {
  border-color: var(--error-text);
  box-shadow: 0 0 0 1px var(--error-text);
}
.msg-campo {
  font-size: var(--fs-xs);
  color: var(--error-text);
  font-weight: 600;
  line-height: 1.4;
  margin: 4px 0 0 0;
}
:not(.con-error) > .msg-campo { display: none; }

input[type="date"] {
  width: 100%;
  border: 1px solid var(--yellow-border);
  background: var(--yellow);
  border-radius: var(--radio);
  padding: 8px 12px;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
}

/* ---------------------------- salidas ---------------------------- */

/* Gris + candado = calculado por el servidor, de solo lectura. */
.plain-val-block {
  font-size: var(--fs-base);
  font-weight: 700;
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  padding: 8px 26px 8px 12px;
  position: relative;
}
/* Campo de solo lectura que NO es una salida del motor: los dos RUC, que
 * completa el buscador del padron al elegir la empresa.
 *
 * Gris y con candado, igual que las salidas, porque la convencion de color de
 * esta pantalla dice exactamente lo que hay que comunicar: "usted no escribe
 * aca". Estaban en amarillo, que afirma lo contrario. */
.readonly-box {
  position: relative;
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: var(--radio);
  padding: 8px 26px 8px 12px;
  display: flex;
  align-items: center;
}
.readonly-box input {
  border: none;
  background: transparent;
  width: 100%;
  min-width: 0;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  /* Sigue siendo enfocable y copiable —un RUC se copia—, pero el cursor no
   * promete una edicion que el `readonly` no va a permitir. */
  cursor: default;
}
.readonly-box input:focus { outline: none; }
.readonly-box input::placeholder {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-mute);
}
.readonly-box:focus-within {
  box-shadow: 0 0 0 2px var(--green-dark);
  border-radius: var(--radio);
}
.stat-compact {
  position: relative;
  background: var(--value-box);
  border: 1px solid var(--value-box-border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.plain-val-block::after,
.readonly-box::after,
.stat-compact::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: .4;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%234A5760" stroke-width="2.5"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>');
}
.plain-val-block::after,
.readonly-box::after { top: 50%; right: 8px; transform: translateY(-50%); }
.stat-compact::after { top: 6px; right: 6px; width: 9px; height: 9px; }

.stat-compact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-compact .k { font-size: 9.5px; color: var(--text-soft); line-height: 1.25; }
.stat-compact .v {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  margin-top: 3px;
}

.result-highlight {
  background: var(--green-050);
  border: 1px solid var(--green);
  border-radius: var(--radio-lg);
  padding: 14px 18px;
}
.result-highlight .headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  gap: 12px;
}
.result-highlight .headline .k { font-size: var(--fs-md); font-weight: 700; color: var(--text); }
.result-highlight .headline .v { font-size: var(--fs-xxl); font-weight: 800; color: var(--green); }
.result-highlight .sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.result-highlight .sub-grid .item {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px 6px;
  border: 1px solid var(--line);
}
.result-highlight .sub-grid .item .k { font-size: var(--fs-xxs); color: var(--text-soft); }
.result-highlight .sub-grid .item .v {
  font-size: 14px;
  font-weight: 800;
  color: var(--green);
  margin-top: 3px;
}

/* Resultados desactualizados. El calculo es explicito (hay que apretar
 * CALCULAR), asi que sin esta senal un input editado deja en pantalla numeros
 * que ya no corresponden a lo que dicen los campos. */
/* Flex con `gap`, igual que `.calc-body-v2`.
 *
 * Antes era un `block` y sus hijos quedaban separados **solo por los margenes
 * heredados** de los `<p>` que tenia en medio (ver el reset en `shell.css`).
 * O sea: el espaciado entre "Detalle de costos" y el bloque del resultado
 * dependia de que existiera un parrafo al lado. Al normalizar los margenes se
 * habrian pegado, y el arreglo de un defecto habria producido otro. */
.resultados {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.resultados[data-obsoleto="true"] { opacity: .45; }
.aviso-obsoleto {
  display: none;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  color: var(--aviso-text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.resultados[data-obsoleto="true"] .aviso-obsoleto { display: block; opacity: 1; }

/* ---------------------------- columna derecha ---------------------------- */

.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-box .mh {
  /* `display: block` es obligatorio, no cosmetico. En el mockup este
   * encabezado era un `<div>`; aca es un `<label for>` para darle nombre
   * accesible al input, y un `<label>` es INLINE por defecto.
   *
   * Sin esto, el bloque verde ocupa solo el ancho de su texto: el
   * `text-align: center` no hace nada, el padding vertical se desborda, el
   * `border-radius` se parte por linea, y —lo mas visible— como `.mv` lleva
   * `border-top: none` (asumiendo que el verde lo tapa), el borde superior de
   * la caja amarilla queda abierto donde el encabezado no llega.
   *
   * Los `<label class="lbl">` del formulario no tienen este problema porque
   * viven en `.field-group`, que es `display: flex` y blockifica a sus hijos.
   * `.mini-box` es un div comun, asi que aca hay que declararlo. */
  display: block;
  background: var(--green);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radio) var(--radio) 0 0;
  line-height: 1.25;
}
.mini-box .mv {
  border: 1px solid var(--yellow-border);
  border-top: none;
  border-radius: 0 0 var(--radio) var(--radio);
  overflow: hidden;
}
.mini-box .mv input {
  border: none;
  background: var(--yellow);
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  padding: 10px 6px;
}
.mini-box .mv input:focus { outline: none; }
.mini-box.date .mv input { background: #FCF6D9; }

.approval-panel .calc-body,
.admin-panel .calc-body { padding: 4px 18px 10px 18px; }
.approval-row,
.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.approval-row:last-child,
.admin-row:last-child { border-bottom: none; }
.approval-row .lbl,
.admin-row .lbl { font-size: var(--fs-md); color: var(--text-soft); max-width: 60%; }
.admin-row .val { font-size: var(--fs-base); font-weight: 700; }

/* Semaforos. Ver `estados.css` para el detalle de por que el neutro no puede
 * parecerse al aprobado. */
.estado-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: var(--radio);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ---------------------------- acciones ---------------------------- */

.actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.2fr;
  gap: 14px;
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 14px 16px;
  margin-top: 16px;
  box-shadow: 0 -6px 18px -6px rgba(20, 30, 60, 0.16);
}
.action-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 10px;
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(20, 30, 60, 0.12);
}
.action-btn:hover:not(:disabled) { background: var(--green-dark); }
.action-btn:disabled { opacity: .55; cursor: progress; }
.action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.action-btn.secundario {
  background: var(--value-box);
  color: var(--text-soft);
  border: 1px solid var(--value-box-border);
  box-shadow: none;
}
.action-btn.secundario:hover:not(:disabled) { background: #E9EBF4; color: var(--text); }

.note-bar {
  background: var(--yellow);
  border: 1px solid var(--yellow-border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: #4A430E;
  line-height: 1.6;
}

.pie-calculo {
  font-size: var(--fs-xs);
  color: var(--text-mute);
  line-height: 1.6;
  padding: 2px 4px;
}
.pie-calculo code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: var(--fs-xs);
}

@media (max-width: 980px) {
  .main-grid { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .actions-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .field-grid,
  .field-grid-3 { grid-template-columns: 1fr; }
  .stat-compact-grid { grid-template-columns: 1fr 1fr; }
  .result-highlight .sub-grid { grid-template-columns: 1fr; }
  .actions-row { grid-template-columns: 1fr; }
}

/* ====================== CAPTURA (RF14) ====================== */

/* `html2canvas` RECORTA LOS DESCENDENTES de los controles de formulario.
 *
 * Verificado el 2026-09-10: sin esto, "(sin rating)" sale "(sin ratina)" y
 * "Elija" sale "Eliia" — la libreria calcula la caja del texto de un `<input>`
 * o un `<select>` mas ajustada de lo que el navegador la pinta, y la `g`, la
 * `j` y la `p` pierden la cola. En una imagen que el ejecutivo manda por chat,
 * eso no es cosmetico: se lee otra palabra.
 *
 * Un `line-height` explicito le da el alto que le falta.
 *
 * La clase la pone `captura.js` sobre el CLON que html2canvas arma en un
 * iframe aparte (su callback `onclone`), NUNCA sobre la pagina viva: aplicarla
 * al DOM real haria saltar el formulario dos segundos a la vista del usuario.
 * Y por eso es una CLASE y no un `<style>` inyectado desde JS — la CSP de
 * produccion (`style-src 'self'`) bloquea los `<style>` creados en runtime. */
.capturando input,
.capturando select {
  line-height: 1.6;
}

/* La barra de instrucciones no va en la imagen.
 *
 * "Complete las celdas marcadas en amarillo y presione CALCULAR" es una
 * indicacion para QUIEN LLENA el formulario. La captura se manda a otra
 * persona, con los numeros ya calculados: ahi esa linea no explica nada y
 * contradice lo que la imagen muestra.
 *
 * Mismo criterio por el que la fila de botones queda fuera del area: lo que
 * sirve para operar la pantalla no sirve en una foto de la pantalla. */
.capturando .note-bar {
  display: none;
}