/* coe-factoring-hermes — historial.css
 *
 * El historial de cotizaciones del coordinador (RF9, lado de lectura).
 *
 * ===========================================================================
 * POR QUE NO REUSA `accesos.css` AUNQUE SE PAREZCAN
 * ===========================================================================
 * Las dos son tablas del coordinador y comparten la tarjeta, el resumen y los
 * vacios —eso SI se reusa, son clases genericas ya escritas—. Lo que no se
 * reusa es la tabla: `.tabla-accesos` tiene seis columnas, un `min-width` de
 * 860px calculado para ellas y un modo tarjeta que apila el interruptor y
 * "Editar" al pie. Esta tiene ocho, sin acciones que apilar, y la columna que
 * manda es la fecha.
 *
 * Y el contenedor con scroll es propio (`.wrap-historial`, no `.tabla-wrap`) a
 * proposito: `accesos.js` hace `$('.tabla-wrap')` sin acotar a su vista, asi
 * que un segundo elemento con esa clase en el documento seria un candidato a
 * que la pantalla equivocada se muestre o se esconda. Un nombre distinto lo
 * hace imposible en vez de dejarlo dependiendo del orden del HTML.
 *
 * ===========================================================================
 * LA REGLA DE COLOR DE ESTA PANTALLA
 * ===========================================================================
 * La misma que en Accesos: la fila normal es callada. Aca lo unico que se
 * pinta con color son los dos semaforos —que son el motivo por el que alguien
 * abre esta pantalla— y para eso se reusa `.estado-pill`, que ya cruza un test
 * contra el enum del motor. Ni un selector nuevo de estado.
 */

/* =============================== la barra ===============================
 *
 * Criterio, valor y el boton. Los bloques de valor se muestran y se esconden
 * por `hidden`: el que no esta visible tampoco se envia, que es lo que hace
 * imposible mandar dos criterios.
 */

.hist-barra {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.hist-campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.hist-campo label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mute);
  font-weight: 700;
}
/* El criterio es lo primero que se decide y lo que cambia el resto de la
 * barra, asi que va fijo; los valores se estiran con lo que sobre. */
.hist-campo:first-child { flex-shrink: 0; }
.hist-valor { flex: 1; min-width: 160px; }

.hist-barra .action-btn {
  flex-shrink: 0;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hist-barra .action-btn svg { width: 14px; height: 14px; }

/* El campo de mes trae su propio icono de calendario; el relleno de la derecha
 * es para que no se monte sobre el texto. */
.hist-barra input[type="month"] { padding-right: 8px; }

/* ================================ la tabla ================================ */

.wrap-historial {
  /* Igual que en Accesos: sin `position: relative` el `.visually-hidden` del
   * `<caption>` se ubica contra el bloque contenedor inicial, escapa del
   * overflow y arrastra el ancho de la tabla al documento entero. */
  position: relative;
  overflow-x: auto;
}

.tabla-historial {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  /* Ocho columnas, y casi ninguna se puede partir sin dejar de leerse: una
   * razon social cortada dice otra empresa, y un monto partido no es un monto.
   * Debajo de esto, el contenedor scrollea.
   *
   * 1040 es lo que las ocho piden juntas con este relleno y esta pastilla, y
   * entra sin scroll horizontal a 1440 —el ancho de los equipos del COE—
   * contando el sidebar. Si alguna columna crece, el numero se recalcula: es
   * un ancho medido, no elegido. */
  min-width: 1040px;
}
.tabla-historial th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-mute);
  font-weight: 700;
  /* 10px de costado y no los 14 de Accesos: son ocho columnas contra seis, y
   * cada 4px de relleno son 32px de ancho de tabla. Con 14 la tabla pedia
   * 1162px y a 1440 —el ancho real de los equipos del COE— scrolleaba. */
  padding: 11px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabla-historial td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--topbar-line);
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
}
.tabla-historial th:first-child,
.tabla-historial td:first-child { padding-left: 18px; }
.tabla-historial th:last-child,
.tabla-historial td:last-child { padding-right: 18px; }
.tabla-historial tbody tr:last-child td { border-bottom: none; }
.tabla-historial tbody tr:hover { background: var(--value-box); }

/* El monto alineado a la derecha y con cifras de ancho fijo: es la columna que
 * se lee en vertical para comparar operaciones, y con ancho variable los
 * separadores de miles no quedan uno debajo del otro. */
.hist-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hist-moneda {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}

/* Las dos tasas apiladas con su rotulo: separadas en dos columnas obligaban a
 * leer el encabezado para saber cual es cual, y juntas sin rotulo se
 * confunden — la TCEA es siempre la mas alta, pero eso hay que saberlo.
 *
 * ⚠️ Esta clase y `.hist-semaforos` van en un `<span>` DE ADENTRO de la celda,
 * nunca en el `<td>`. Un `td` con `display: flex` deja de ser `table-cell`: el
 * navegador lo saca del algoritmo de tabla y mete el resto en una celda
 * anonima, con lo que las ultimas columnas quedan todas del mismo ancho y la
 * fila duplica su alto. Desde afuera parece un problema de anchos, y no lo es.
 */
.hist-tasas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.hist-tasas b {
  display: inline-block;
  min-width: 34px;
  font-size: var(--fs-xxs);
  color: var(--text-mute);
  letter-spacing: .04em;
}

/* La UNICA columna que se deja partir en dos lineas. El servidor manda la
 * fecha ya formateada —"15 set 2026, 09:32 (hora de Lima)"— y el rotulo de
 * zona la hace larguisima; en una sola linea se comia 230px de una tabla que
 * ya scrollea. Partida por el espacio no pierde nada: las dos mitades siguen
 * siendo la fecha. Reformatearla acá no es opcion, el cliente no formatea. */
.tabla-historial td.celda-fecha {
  white-space: normal;
  min-width: 118px;
  max-width: 150px;
}
.celda-fecha .fecha-relativa { line-height: 1.45; }

/* Los dos semaforos SIEMPRE en la misma linea. Con `wrap` la columna se dejaba
 * apretar hasta apilarlos, y eso triplicaba el alto de cada fila: la tabla
 * pasaba de mostrar ocho operaciones a mostrar tres, que es justo lo que se
 * viene a hacer acá — comparar varias de un vistazo. */
.hist-semaforos { display: flex; gap: 6px; flex-wrap: nowrap; }

/* La pastilla, un punto mas chica DENTRO de la tabla. En el cotizador es el
 * veredicto de la operacion que se esta armando y ocupa lo que tiene que
 * ocupar; acá se repite en cada fila y su tamaño de origen se llevaba 240px de
 * una tabla que ya no entra a 1440. Se ajusta el tamaño, NUNCA el color: los
 * estados los estiliza `estados.css` y un test los cruza contra el enum del
 * motor en las dos direcciones. */
.tabla-historial .estado-pill {
  font-size: var(--fs-xxs);
  padding: 4px 9px;
}

/* La celda de acciones NO reusa `.celda-acciones` de Accesos por lo mismo: esa
 * es `display: flex` sobre el `<td>`. Acá hay un solo boton y alcanza con
 * alinearlo. */
.hist-acciones { text-align: right; }

/* ============================= el panel de detalle =============================
 *
 * Reusa `.panel-acceso` entero —posicion, telon, sombra, cabecera, pie— y solo
 * ensancha: son 20 campos contra los 3 del formulario de Accesos, y a 440px la
 * lista de definiciones queda en una columna de rotulos cortados.
 */

.panel-historial { width: 520px; }

.hist-detalle {
  padding: 4px 28px 8px 28px;
  overflow-y: auto;
}

.hist-grupo { padding: 16px 0; border-bottom: 1px solid var(--topbar-line); }
.hist-grupo:last-child { border-bottom: none; }
.hist-grupo h3 {
  margin: 0 0 10px 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-mute);
  font-weight: 800;
}

.hist-nota {
  margin: -4px 0 10px 0;
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.5;
}

/* Rotulo y valor en dos columnas. El rotulo es de ancho fijo: con `auto` cada
 * grupo alineaba sus valores en una vertical distinta y el panel se leia como
 * seis tablas sueltas. */
.hist-datos { margin: 0; }
.hist-datos > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  padding: 5px 0;
  align-items: baseline;
}
.hist-datos dt {
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.hist-datos dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text);
  word-break: break-word;
}

/* Los datos de reproducibilidad no se leen, se comparan y se copian: un hash
 * y una version en la misma tipografia que un nombre propio invitan a leerlos
 * como texto. */
.hist-monospace {
  font-family: Consolas, 'Courier New', monospace;
  font-size: var(--fs-sm);
}
.hist-datos-tecnicos dd { color: var(--text-soft); }

.hist-semaforo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0;
}
.hist-semaforo-nombre {
  flex: 1;
  min-width: 150px;
  font-size: var(--fs-sm);
  color: var(--text-mute);
}
.hist-umbral {
  font-family: Consolas, 'Courier New', monospace;
  font-size: var(--fs-xs);
  color: var(--text-mute);
}
/* El motivo ocupa la fila entera: es una frase, no un dato al costado. */
.hist-motivo {
  flex-basis: 100%;
  margin: 2px 0 0 0;
  font-size: var(--fs-sm);
  color: var(--pendiente-text);
  line-height: 1.5;
}

/* ============================== el pie de la lista ============================== */

.hist-mas { display: flex; justify-content: center; padding: 14px 20px 20px 20px; }
.hist-mas .action-btn { padding: 10px 26px; }
.hist-mas .action-btn[aria-busy="true"] { opacity: .5; cursor: progress; }

/* El unico vacio que puede NO ser la realidad: GSI1 y GSI2 son dispersos, asi
 * que una cotizacion sin correo del ejecutivo o sin RUC del deudor no aparece
 * por esa via aunque exista. Se pinta como aviso y no como texto corrido
 * porque cambia la conclusion. */
.hist-aviso-disperso {
  display: block;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--aviso-bg);
  border: 1px solid var(--aviso-border);
  border-radius: var(--radio);
  color: var(--aviso-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: left;
}

/* ============================== responsive ============================== */

@media screen and (max-width: 980px) {
  .hist-campo:first-child,
  .hist-valor { flex-basis: 100%; }
  .hist-barra .action-btn { flex-basis: 100%; justify-content: center; }
}

/* A ancho de telefono el panel es la pantalla: dejarlo en 520px con el telon
 * asomando al costado se lee como un panel roto, no como capas. */
@media screen and (max-width: 560px) {
  .panel-historial { width: 100%; }
  .hist-datos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Quien EJECUTO el calculo, cuando no es el ejecutivo asignado.
 *
 * Solo aparece en las filas reasignadas —lo oculta `historial.js`—, asi que se
 * distingue del correo de arriba: si se viera igual, la fila parecería tener
 * dos correos y no un correo mas una nota. */
.hist-ejecutor {
  font-style: italic;
  color: var(--text-mute);
}