/* Coordinacion entre areas: los valores medidos en produccion se declaran una
 * sola vez en application.css (--hn-grilla-*) y aqui se consumen. La familia
 * tipografica va tambien desde alli: en produccion las celdas renderizan en
 * "Source Sans Pro", y con otra familia cambian los anchos de columna y el
 * corte del texto, que es exactamente lo que el operador notaria.
 */
/*
 * Handsontable con la apariencia de la aplicación actual.
 *
 * El shell de interfaz descubre en disco las hojas de app/assets/stylesheets y
 * las enlaza en el layout; esta viaja en todas las páginas y sólo tiene efecto
 * donde hay grilla. La librería trae sus dos hojas propias (la base estructural
 * y el tema `ht-theme-classic`) y las enlaza la pantalla de grilla, de modo que
 * llegan *después* de esta: por eso las reglas de aquí van calificadas con la
 * clase de la caja de la grilla, que suma especificidad y gana sin depender del
 * orden de la cascada.
 *
 * `ht-theme-classic` es el tema que reproduce el aspecto de las versiones 12.x
 * de la librería, que son las que corren hoy en producción. Sobre esa base, los
 * valores que siguen son los medidos en la aplicación actual --- no son criterio
 * estético, y por eso van escritos literalmente en vez de salir de las variables
 * del shell, que responden a otra escala:
 *
 *   encabezado de columna    fondo #455A64, texto #FFFFFF 13px, borde #CCCCCC
 *   encabezado de fila       fondo #455A64, texto #FFFFFF  (la numeración)
 *   celda                    fondo #FFFFFF, texto #373737 13px
 *   alto de fila             42px  (lo fija el controlador, con rowHeights)
 *   columna destacada        fondo moccasin, texto negro
 *
 * Los menús que la librería monta fuera de la caja (el desplegable de filtro de
 * cada columna y el menú contextual) quedan a propósito con el tema `classic`
 * puro: en la aplicación actual esos menús también se ven con el aspecto de
 * fábrica de la librería.
 */

/* La librería marca con la clase del tema tanto la caja como el envoltorio que
   crea dentro de ella; hay que pisar las variables en las dos, porque la
   declaración del envoltorio le gana a la de la caja por estar más cerca. */
.grilla-hot.ht-theme-classic,
.grilla-hot .ht-theme-classic {
  /* Tipografía. La aplicación actual no le pasa una familia a la librería, así
     que la grilla se ve con la pila del sistema que trae Handsontable 12 --- no
     con la fuente del resto de la página. Se repite esa pila para que el texto
     de las celdas se lea igual que hoy. */
  --ht-font-family: var(--hn-fuente);
  --ht-font-size: var(--hn-grilla-fuente-tamano, 13px);
  --ht-font-weight: 400;
  --ht-line-height: 21px;
  --ht-letter-spacing: 0px;

  /* Celdas. */
  --ht-background-color: #ffffff;
  --ht-foreground-color: var(--hn-grilla-celda-texto);
  --ht-row-cell-even-background-color: #ffffff;
  --ht-row-cell-odd-background-color: #ffffff;
  /* La grilla entera es de sólo lectura: las celdas no se ven atenuadas, se ven
     como cualquier celda. El controlador además le cambia el nombre a la clase
     de sólo lectura para que no entre la regla `.htDimmed` de la hoja base, que
     pinta con `!important`. */
  --ht-read-only-color: var(--hn-grilla-celda-texto);
  --ht-cell-read-only-background-color: #ffffff;
  --ht-cell-vertical-padding: 0px;
  --ht-cell-horizontal-padding: 4px;

  /* Bordes. */
  --ht-border-color: var(--hn-grilla-borde);
  --ht-cell-horizontal-border-color: var(--hn-grilla-borde);
  --ht-cell-vertical-border-color: var(--hn-grilla-borde);

  /* Encabezados de columna. */
  --ht-header-background-color: var(--hn-grilla-encabezado-fondo);
  --ht-header-foreground-color: #ffffff;
  --ht-header-font-weight: 700;
  /* En la aplicación actual el fondo del encabezado lo pisa una regla que gana
     por orden de cascada, así que el encabezado no cambia de color al
     seleccionar ni al ordenar. Se replica: mismo fondo en los tres estados. */
  --ht-header-highlighted-background-color: var(--hn-grilla-encabezado-fondo);
  --ht-header-highlighted-foreground-color: #ffffff;
  --ht-header-active-background-color: var(--hn-grilla-encabezado-fondo);
  --ht-header-active-foreground-color: #ffffff;
  --ht-header-active-border-color: #cccccc;

  /* Encabezados de fila: la columna de numeración, del mismo color que el
     encabezado de columna. */
  --ht-header-row-background-color: #455a64;
  --ht-header-row-foreground-color: #ffffff;
  --ht-row-header-even-background-color: #455a64;
  --ht-row-header-odd-background-color: #455a64;
  --ht-header-row-highlighted-background-color: #455a64;
  --ht-header-row-highlighted-foreground-color: #ffffff;
  --ht-header-row-active-background-color: #455a64;
  --ht-header-row-active-foreground-color: #ffffff;

  /* Selección: el azul de la versión 12, que es el que ve el operador hoy. */
  --ht-accent-color: #005eff;
  --ht-cell-selection-border-color: #005eff;
}

/* El encabezado va centrado y con 2px arriba y abajo, que es lo que le da los
   26px de alto que tiene hoy la fila de encabezados (21 de línea + 4 + borde). */
.grilla-hot .handsontable thead th .relative {
  padding: 2px 4px;
}

.grilla-hot .handsontable thead th .colHeader {
  text-align: center;
}

/* Columnas destacadas (panels.highlighted_cols). La aplicación actual las pinta
   desde un renderizador, celda por celda, con `moccasin` y texto negro; el
   encabezado no cambia. Aquí `destacada` viene en `cell_class`, dentro del JSON
   de datos, y se aplica a la columna. El `!important` es para ganarle al fondo
   por fila, que la hoja base fija con la misma marca. */
.grilla-hot .handsontable td.destacada {
  background-color: #ffe4b5 !important;
  color: #000000 !important;
}

/* Cifras a la derecha, igual que las columnas numéricas de la aplicación
   actual. `numero` y `fecha` también vienen en `cell_class`. */
.grilla-hot .handsontable td.numero {
  text-align: right;
}

.grilla-hot .handsontable td.numero,
.grilla-hot .handsontable td.fecha {
  font-variant-numeric: tabular-nums;
}

/*
 * Caja de la grilla.
 *
 * La altura la fija esta hoja y la librería la rellena (`height: "100%"`), que es
 * lo que da encabezado fijo y scroll horizontal dentro del contenedor: la grilla
 * scrollea por dentro y la página no se mueve. Es la misma solución de la
 * aplicación actual, que también le fija un alto en píxeles a su contenedor.
 */
.grilla-hot {
  /* El descuento es el alto del armazón que rodea a la grilla en esta pantalla:
     barra superior, título, barra de filtros y paginación. Va detrás de
     `--alto-grilla` para que el shell pueda ajustarlo sin tocar esta hoja si
     cambia esa altura. */
  height: var(--alto-grilla, calc(100dvh - 22rem));
  min-height: 20rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  /* La aplicación actual redondea el marco de la grilla en 10px. */
  border-radius: 10px;
}

/* Una grilla sin filas queda con los encabezados y nada debajo. Se avisa dentro
   de la caja, arriba, donde el operador está mirando: el alto de la fila de
   encabezados es 26px. */
.grilla-hot--vacia::after {
  content: "Sin filas para los filtros aplicados.";
  position: absolute;
  inset: 26px 0 auto 0;
  padding: 1.5rem;
  color: #6c757d;
  font: 400 13px/21px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  pointer-events: none;
}

/* Mientras la librería baja y monta, el hueco no debe quedar vacío ni saltar. */
.grilla-hot:empty::after {
  content: "Cargando la grilla…";
  display: block;
  padding: 0.75rem;
  color: #6c757d;
  font: 400 13px/21px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* La aplicación actual sube la grilla por encima del resto del contenido para
   que los menús de columna no queden tapados. */
.grilla-hot .handsontable {
  z-index: 10;
}

/* Pantallas bajas: por debajo de este alto la cuenta anterior deja la grilla en
   nada, así que se le da un alto fijo y la pantalla scrollea. */
@media (max-height: 640px) {
  .grilla-hot {
    height: 20rem;
  }
}

/* `[hidden]` lo pone el navegador con una regla de su propia hoja, y cualquier
   regla de autor con `display` le gana. La barra de filtros usa `.campo`, que es
   `display: grid`, así que las dos fechas del rango personalizado hay que
   esconderlas explícitamente cuando el rango no es CU. */
.grilla__barra .campo[hidden] {
  display: none;
}

/* Tabla de reserva (la que se muestra sin JavaScript o cuando falla el endpoint):
   respeta el ancho configurado de cada columna, que la vista pone como atributo
   `style` en el encabezado, y recorta lo que no cabe. */
.grilla-reserva .tabla-datos {
  table-layout: fixed;
}

.grilla-reserva .tabla-datos th,
.grilla-reserva .tabla-datos td {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Separador vertical entre encabezados de columna. En produccion cada th del
   encabezado lleva border-right: 1px solid #cccccc; Handsontable 18 lo deja en
   0 por omision y las columnas se leian pegadas. */
.handsontable thead th,
.handsontable thead td {
  border-right: 1px solid var(--hn-grilla-borde) !important;
}