/*
 * ============================================================================
 *  GRILLAS DE DATOS
 * ============================================================================
 *
 *  Tablas HTML que reproducen el aspecto de la grilla actual. Valores medidos
 *  en producción sobre la grilla de Marítimo:
 *
 *    encabezado de columna  fondo #455A64, texto #FFFFFF, 13px/700, centrado,
 *                           alto 26px, relleno 0, borde #CCCCCC 1px
 *    encabezado de fila     fondo #455A64, texto #FFFFFF, 13px/700, centrado,
 *                           relleno 0 4px
 *    celda                  fondo #FFFFFF, texto #373737, 13px/400,
 *                           relleno 0 4px, interlínea 21px, alto de fila 42px,
 *                           alineación vertical arriba, white-space pre-wrap
 *    columna destacada      fondo #B3E5FC, texto #222222 (.colored del legado)
 *    fila bajo el cursor    fondo lightcyan, texto negro (.table-hover)
 *
 *  Sin rayado alterno: la grilla actual tiene todas las filas blancas.
 *  Estos valores vienen de la aplicación en producción y no deben
 *  "mejorarse". Ver la cabecera de application.css.
 *
 *  Los estilos de Handsontable NO están aquí: son de F3 y viven en
 *  handsontable_theme.css. Esta hoja cubre las tablas HTML (grilla servida por
 *  el motor de A4, mantenedores, auditoría, matriz de permisos). Las dos
 *  hojas leen las mismas variables --hn-grilla-* declaradas en
 *  application.css, para que no puedan desincronizarse.
 *
 *  Convenciones de marcado que consume esta hoja:
 *    .grilla                 contenedor de la pantalla de grilla
 *    .grilla__barra          barra de filtros y rango de fecha
 *    .tabla-scroll           contenedor con el scroll (obligatorio)
 *    table.tabla-datos       la tabla
 *    th/td.destacada         columna de panels.highlighted_cols
 *    th/td.numero            celda numérica (cifras tabulares, a la derecha)
 *    th/td.fecha             celda de fecha u hora (cifras tabulares)
 *    td.columna-fija         columna congelada a la izquierda
 *    tr.es-actual            fila seleccionada
 * ============================================================================
 */

.grilla {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: var(--esp-3);
  min-height: 0;
}

/* Barra de título de la grilla: es el .main-title-container de la app actual —
   marino, radio 15px, alto mínimo 60px, nombre del panel en ámbar a 24px/700 y
   a la derecha una insignia naranja (en producción ocupa ese sitio la hora de
   la última actualización; aquí, el recuento de filas). */
.grilla > .encabezado-pagina {
  align-items: center;
  gap: var(--esp-2) 15px;
  min-height: var(--hn-alto-cabecera);
  margin: 0;
  padding: 8px 15px;
  border-radius: var(--hn-radio-grande);
  background: var(--hn-marino);
  box-shadow: var(--hn-sombra);
}

.grilla > .encabezado-pagina h1 {
  margin: 0;
  color: var(--hn-ambar);
  font-size: var(--hn-texto-xl);
  font-weight: 700;
  line-height: 1.1;
}

.grilla > .encabezado-pagina .grilla__resumen {
  margin: 0 0 0 auto;
  padding: 2px 7px 3px;
  border-radius: var(--hn-radio);
  background: var(--hn-naranja);
  color: var(--hn-blanco);
  font-size: var(--hn-texto-sm);
  font-weight: 700;
  white-space: nowrap;
}

.grilla__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-3);
  background: var(--hn-superficie);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
}

.grilla__resumen {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}

/* ---------------------------------------------------------------------------
 * Contenedor con el scroll
 *
 * Requisito: una grilla de decenas de columnas no puede empujar el documento.
 * Éste es el ÚNICO elemento que desplaza, en los dos ejes, y el encabezado
 * queda pegado arriba mientras se recorre la tabla.
 * --------------------------------------------------------------------------- */

.tabla-scroll {
  overflow: auto;
  /* Evita que el gesto horizontal se propague al historial del navegador. */
  overscroll-behavior-x: contain;
  max-height: 100%;
  background: var(--hn-grilla-celda-fondo);
  border: 1px solid var(--hn-grilla-borde);
}

/* Cuando la grilla no está dentro de un marco de altura fija, se limita la
   altura visible para que el encabezado pegado tenga sentido. */
.tabla-scroll--alta {
  max-height: calc(100dvh - var(--hn-alto-cabecera) - 12rem);
}

/* ---------------------------------------------------------------------------
 * La tabla
 * --------------------------------------------------------------------------- */

.tabla-datos {
  /* `max-content` deja que las columnas pidan su ancho y que el sobrante lo
     absorba el scroll del contenedor. */
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--hn-grilla-celda-fondo);
  color: var(--hn-grilla-celda-texto);
  font-size: var(--hn-texto-grilla);
  line-height: 21px;
}

.tabla-datos caption {
  padding: var(--esp-2) 4px;
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
  text-align: left;
}

.tabla-datos th,
.tabla-datos td {
  padding: 0 4px;
  border-bottom: 1px solid var(--hn-grilla-borde);
  border-right: 1px solid var(--hn-grilla-borde);
  text-align: left;
  vertical-align: top;
  /* La grilla actual respeta los saltos del dato y envuelve el texto largo. */
  white-space: pre-wrap;
}

.tabla-datos td {
  height: var(--hn-grilla-fila-alto);
  background: var(--hn-grilla-celda-fondo);
}

.tabla-datos th:last-child,
.tabla-datos td:last-child {
  border-right: 0;
}

/* Encabezado de columna: pegado arriba, marino grisáceo, centrado. */
.tabla-datos thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 26px;
  background: var(--hn-grilla-encabezado-fondo);
  color: var(--hn-grilla-encabezado-texto);
  font-size: var(--hn-texto-grilla);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  /* Con border-collapse: separate el borde del encabezado no viaja al hacer
     scroll; la sombra interior hace de línea inferior. */
  box-shadow: inset 0 -1px 0 var(--hn-grilla-borde);
}

.tabla-datos thead th a {
  color: inherit;
}

/* Encabezado de fila (numeración): mismo fondo que el de columna. */
.tabla-datos tbody th {
  background: var(--hn-grilla-encabezado-fondo);
  color: var(--hn-grilla-encabezado-texto);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

/* Fila bajo el cursor (.table-hover del legado: lightcyan sobre negro). */
.tabla-datos tbody tr:hover td {
  background: lightcyan;
  color: #000000;
}

.tabla-datos tbody tr.es-actual td {
  background: #e8f2ff;
}

/* Columnas destacadas (panels.highlighted_cols). Se mantienen sobre el hover
   porque en la grilla actual el resalte de columna gana al de fila. */
.tabla-datos th.destacada {
  background: var(--hn-grilla-encabezado-fondo);
  color: var(--hn-grilla-encabezado-texto);
}

.tabla-datos td.destacada,
.tabla-datos tbody tr:hover td.destacada {
  background: #b3e5fc;
  color: #222222;
}

/* Cifras tabulares: las columnas numéricas y de fecha se leen en vertical. */
.tabla-datos .numero,
.tabla-datos .fecha,
.numero,
.fecha {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.tabla-datos td.numero {
  text-align: right;
}

.tabla-datos td.fecha,
.tabla-datos th.fecha {
  white-space: nowrap;
}

/* Columna congelada: útil cuando la primera columna es el contenedor o la
   referencia y el resto se recorre a la derecha. */
.tabla-datos th.columna-fija,
.tabla-datos td.columna-fija {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--hn-grilla-celda-fondo);
  border-right: 1px solid var(--hn-grilla-borde);
}

.tabla-datos thead th.columna-fija {
  z-index: 3;
  background: var(--hn-grilla-encabezado-fondo);
}

.tabla-datos td.vacio,
.tabla-datos td .vacio {
  color: var(--texto-tenue);
}

.tabla-vacia {
  padding: var(--esp-5);
  color: var(--texto-suave);
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * Tablas de mantenedor o de detalle
 * (equivale a .table de Bootstrap en producción: borde #DEE2E6, sin fondo)
 * --------------------------------------------------------------------------- */

.tabla-simple,
.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hn-texto-menu);
}

.tabla-simple th,
.tabla-simple td,
.audit-table th,
.audit-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hn-tabla-borde);
  text-align: left;
  vertical-align: top;
}

.tabla-simple thead th,
.audit-table thead th {
  border-bottom-width: 2px;
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tabla-simple tbody tr:hover,
.audit-table tbody tr:hover {
  background: lightcyan;
  color: #000000;
}

/* ---------------------------------------------------------------------------
 * Tablas sin clase
 *
 * El catálogo y la matriz de permisos usan un <table> desnudo. Se les da el
 * mismo aspecto que a .table de Bootstrap en producción (borde #DEE2E6, sin
 * fondo) y su propio scroll horizontal, porque la matriz crece con cada
 * perfil y no puede empujar la página.
 *
 * `:where(:not([class]))` limita la regla a las tablas SIN atributo class, de
 * modo que no alcanza ni a .tabla-datos ni a las que dibuja Handsontable.
 * --------------------------------------------------------------------------- */

.hn-content table:where(:not([class])) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-collapse: collapse;
  margin: 0 0 var(--esp-4);
  font-size: var(--hn-texto-menu);
}

.hn-content table:where(:not([class])) th,
.hn-content table:where(:not([class])) td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--hn-tabla-borde);
  text-align: left;
  vertical-align: top;
}

.hn-content table:where(:not([class])) thead th {
  border-bottom-width: 2px;
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.hn-content table:where(:not([class])) tbody tr:hover {
  background: lightcyan;
  color: #000000;
}

/* ---------------------------------------------------------------------------
 * Auditoría
 *
 * Pantalla nueva: no existe en la app actual, así que no hay nada que
 * replicar. Se viste con la misma paleta para que no se sienta ajena.
 * --------------------------------------------------------------------------- */

.audit-events > header {
  margin-bottom: var(--esp-4);
}

.audit-events > header p {
  max-width: 60ch;
  color: var(--texto-suave);
}

.audit-filters fieldset {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  align-items: end;
}

.audit-filters legend {
  color: var(--texto-suave);
}

.audit-filters-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.audit-summary {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}

.audit-table {
  /* La bitácora puede traer columnas anchas: el desbordamiento se resuelve
     dentro de la tabla, no en la página. */
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  white-space: nowrap;
}

.audit-note {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
}

.audit-pagination {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
}

.audit-event dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-1) var(--esp-3);
  margin: 0 0 var(--esp-4);
}

.audit-event dt {
  color: var(--texto-suave);
  font-size: var(--hn-texto-grilla);
  font-weight: 600;
}

.audit-event dd {
  margin: 0;
}

.audit-event pre {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--esp-3);
  border: 1px solid var(--hn-superficie-borde);
  border-radius: var(--hn-radio);
  background: var(--hn-superficie);
}

/* ---------------------------------------------------------------------------
 * Red de seguridad
 *
 * Cualquier tabla, bloque de código o figura que quede fuera de un contenedor
 * con scroll no debe romper el ancho de la página.
 * --------------------------------------------------------------------------- */

.contenido > table,
.contenido > * > table,
.hn-content > table,
.hn-content > * > table {
  max-width: 100%;
}

.contenido pre,
.hn-content pre {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}