@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #1c2b40;
  --bg-panel: #253a56;
  --bg-panel-alto: #2e4666;
  --borde: #445a80;
  --acento: #e8a93a;
  --acento-alto: #f2bd5c;
  --texto: #f1efe9;
  --texto-atenuado: #9fb0cc;
  --error: #e0654f;

  --fuente-display: 'Space Grotesk', sans-serif;
  --fuente-texto: 'Inter', sans-serif;
  --fuente-mono: 'JetBrains Mono', monospace;
}

/* Variante de color para pantallas puntuales (Compras, Costos,
   Contabilidad, Gestión de Operaciones/Ventas, Tablero, Instructivos,
   Producción, etc.) — se aplica con class="tema-verde" en <body>,
   sin duplicar ni tocar el resto del CSS. Mismo acento ámbar (es el
   color del logo), solo cambia el fondo/paneles/bordes a verde.
   Pedido explícito 28/sep: bajar la intensidad del verde a algo más
   suave, al menos a la mitad del original (valores previos, por si
   hay que volver atrás: --bg:#16302a --bg-panel:#1f4238
   --bg-panel-alto:#295142 --borde:#3d6b56). */
.tema-verde {
  --bg: #234a3e;
  --bg-panel: #2c5c4c;
  --bg-panel-alto: #376e5a;
  --borde: #4f8570;
  --texto-atenuado: #a9cdbc;
}

/* Administración (administracion.html, personal.html, salarios.html) —
   pedido 25/sep: suavizar el verde oscuro original y combinarlo con
   celeste, SOLO para estas 3 pantallas (el resto de módulos que
   comparten .tema-verde — Compras, Costos, Contabilidad, Gestión de
   Operaciones/Ventas, Tablero, Instructivos, etc. — quedan sin cambios).
   Sigue siendo un tema oscuro (mismo acento ámbar del logo), pero más
   liviano que .tema-verde, con bordes/detalles celestes para combinar. */
.tema-verde-admin {
  --bg: #1d3f3d;
  --bg-panel: #27524f;
  --bg-panel-alto: #34655f;
  --borde: #5a9bb0;
  --texto-atenuado: #a9cdd6;
}

/* Comercialización — celeste muy claro */
.tema-gris {
  --bg: #eaf4fb;
  --bg-panel: #ffffff;
  --bg-panel-alto: #f2f9fd;
  --borde: #bfe0f2;
  --texto: #1c3a4a;
  --texto-atenuado: #5f7d8c;
}

/* Panel central (index.html) — azul mucho más claro que el azul
   oscuro por defecto del resto del sistema. */
.tema-azul-claro {
  --bg: #e8f0fb;
  --bg-panel: #ffffff;
  --bg-panel-alto: #f1f6fc;
  --borde: #c2d9f0;
  --texto: #1a324d;
  --texto-atenuado: #5c7592;
}

/* Producción — amarillo claro */
.tema-amarillo-claro {
  --bg: #fbf6e3;
  --bg-panel: #ffffff;
  --bg-panel-alto: #fdf9ec;
  --borde: #ecdca0;
  --texto: #4a3f1a;
  --texto-atenuado: #8a7845;
}

/* Cotizador (Gestión de Ventas) — lila muy claro, pedido explícito
   19/ago de un color claro que se distinga del resto de pantallas
   claras ya existentes (celeste, azul, amarillo). */
.tema-lila-claro {
  --bg: #f3edfa;
  --bg-panel: #ffffff;
  --bg-panel-alto: #f8f4fc;
  --borde: #d9c7ee;
  --texto: #3a2a4d;
  --texto-atenuado: #7a6690;
}

/* Agente Aduanero — amarillo mostaza/dorado, pedido explícito 24/ago
   de "color base amarillo" — DISTINTO del amarillo claro de
   Producción (más pálido) para no confundir los dos módulos. */
.tema-amarillo {
  --bg: #f7e9b8;
  --bg-panel: #fffdf5;
  --bg-panel-alto: #fbf1cf;
  --borde: #d9b84a;
  --texto: #4a3a08;
  --texto-atenuado: #8a7530;
}

/* Documentos Sichergrid (Administración) — pedido explícito 1/oct de
   "color claro" para este submódulo nuevo. Los 4 claros que ya
   existían estaban todos tomados por otras pantallas sin relación
   (gris/celeste→Comercialización, azul→index.html, amarillo→Producción,
   lila→Cotizador), así que este es un rosa claro nuevo, no usado en
   ningún otro lado — mismo patrón de variables que los demás. */
.tema-rosa-claro {
  --bg: #fbeaf0;
  --bg-panel: #ffffff;
  --bg-panel-alto: #fdf3f6;
  --borde: #f0c4d4;
  --texto: #4a1f30;
  --texto-atenuado: #8a5a6c;
}

/* Gestión de Operaciones y Gestión de Ventas — pedido explícito 5/oct
   de "celeste claro" para estas dos pantallas y el resto de cada
   módulo (antes compartían el .tema-verde oscuro genérico con
   Compras/Costos/Contabilidad/Tablero/Instructivos). Es un celeste
   propio, más cian/turquesa que el "gris" (celeste muy claro, ya
   tomado por Comercialización) y que el azul-claro de index.html,
   para no confundir visualmente los módulos — mismo patrón suave de
   variables que los demás temas claros. */
.tema-celeste-claro {
  --bg: #e7f6fb;
  --bg-panel: #ffffff;
  --bg-panel-alto: #f0fafd;
  --borde: #a9ddf0;
  --texto: #0f3a4a;
  --texto-atenuado: #4f7f91;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--fuente-texto);
}

body {
  position: relative;
  overflow-x: hidden;
}

/* Fondo tipo plano técnico / grilla de CAD, muy sutil */
.fondo-grilla {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(232, 169, 58, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 169, 58, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: derivar-grilla 60s linear infinite;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

@keyframes derivar-grilla {
  from { background-position: 0 0; }
  to { background-position: 400px 400px; }
}

@media (prefers-reduced-motion: reduce) {
  .fondo-grilla { animation: none; }
}

.vista {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Sin esto, "display: flex" de arriba le gana al atributo "hidden"
   del navegador (mismo nivel de prioridad, pero las reglas propias
   del sitio le ganan a las del navegador) y la vista nunca se oculta
   de verdad, aunque el atributo "hidden" esté puesto. */
.vista[hidden] {
  display: none;
}

/* ---- Panel (login y dashboard comparten esta base) ---- */

.panel {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 40px 32px 32px;
  animation: aparecer-panel 0.5s ease-out;
}

.panel--dashboard {
  max-width: 720px;
  /* Pedido explícito 3/oct — "mucho espacio vacío en parte superior,
     mover todos los botones a un lugar visible sin scroll". El panel
     base (pensado para el login, una sola columna angosta) usa
     40px/32px de relleno arriba/abajo — de más para el panel del
     inicio, que tiene mucho contenido apilado debajo (indicadores +
     3 secciones de módulos) y es justo el que necesita aprovechar
     cada pixel vertical para entrar sin scroll. */
  padding-top: 22px;
  padding-bottom: 20px;
}

.panel--dashboard .grilla-modulos {
  /* Pedido 3/oct — tarjetas un poco más angostas (148px→132px) y
     grilla más apretada (gap 8px→6px) para que entren más por fila
     y hagan falta menos filas en total — "achicar los rectángulos
     si es necesario" para que todo entre sin scroll. */
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px;
}

/* En pantallas anchas el panel se quedaba fijo en 720px sin importar
   el ancho real disponible — con la lista de módulos ya larga
   (13+), eso empujaba la mitad de los módulos fuera de la vista
   (había que scrollear) en vez de mostrarlos todos de una. Dos
   escalones: pantallas medianas ganan más ancho, pantallas grandes
   ganan bastante más — junto con tarjetas más angostas (arriba) y
   más compactas (abajo), la idea es que los ~15 módulos entren en
   2-3 filas sin scroll en la mayoría de las pantallas reales. */
@media (min-width: 900px) {
  .panel--dashboard {
    max-width: 1150px;
  }
}

@media (min-width: 1300px) {
  .panel--dashboard {
    max-width: 1450px;
  }
}

.panel--dashboard .tarjeta-modulo {
  padding: 8px 10px;
  border-left-width: 5px;
}

.panel--dashboard .tarjeta-modulo__nombre {
  font-size: 13px;
  margin: 0 0 2px;
}

.panel--dashboard .tarjeta-modulo__estado {
  font-size: 11px;
}

@keyframes aparecer-panel {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .panel { animation: none; }
}

/* Marcas de registro en las esquinas, como en un plano técnico */
.marca {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--acento);
  opacity: 0.55;
}
.marca--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.marca--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.marca--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.marca--br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.logo {
  display: block;
  height: 60px;
  width: auto;
  margin: 0 auto 28px;
  border-radius: 4px;
}

.logo--chica {
  margin: 0;
  height: 46px;
}

.eyebrow {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
  text-align: center;
  margin: 0 0 24px;
}

.panel--dashboard .eyebrow { text-align: left; margin: 24px 0 4px; }

/* ---- Formulario ---- */

.campo {
  display: block;
  margin-bottom: 18px;
}

.campo__etiqueta {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-atenuado);
  margin-bottom: 8px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 11px 12px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--texto);
  transition: border-color 0.15s ease;
}

.campo textarea {
  resize: vertical;
  min-height: 60px;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
}

.boton {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--acento);
  color: #17181c;
  border: none;
  border-radius: 3px;
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.boton:hover { background: var(--acento-alto); }
.boton:active { transform: scale(0.99); }

.boton:disabled {
  opacity: 0.6;
  cursor: default;
}

.boton-secundario {
  background: transparent;
  border: 1px solid var(--borde);
  color: var(--texto-atenuado);
  border-radius: 3px;
  padding: 7px 12px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.boton-secundario:hover {
  border-color: var(--acento);
  color: var(--texto);
}

/* Pedido 31/ago — botón de Cobranzas en Comercialización: la clase
   que tenía puesta ("boton--secundario", con doble guion) no existe
   en este archivo — por eso salía con el estilo de .boton de acá
   arriba (ámbar, ancho completo), no un "secundario" real. Reducido
   a la mitad del tamaño (padding y letra) y en rojo suave — color
   propio, sin tocar --error (ese es para errores reales, este es
   solo una elección de color para este botón puntual). */
.boton--rojo-suave {
  width: auto;
  padding: 6px 14px;
  font-size: 13px;
  background: #d98f86;
  color: #4a1a15;
}

.boton--rojo-suave:hover {
  background: #cc7a70;
}

.mensaje-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: rgba(224, 101, 79, 0.12);
  border: 1px solid rgba(224, 101, 79, 0.35);
  border-radius: 3px;
  color: var(--error);
  font-size: 13px;
}

.pie {
  margin-top: 20px;
  font-family: var(--fuente-mono);
  font-size: 11px;
  color: var(--texto-atenuado);
  letter-spacing: 0.04em;
}

/* Pedido explícito 29/sep — "letras fecha más grande": se veía muy
   chica (11px) al lado del título grande de cada módulo (36px). Se
   usa en TODAS las pantallas de módulo del sistema (mismo patrón
   título + fecha), así que este cambio es consistente en todos
   lados, a propósito.
   Corregido 1/oct — bug real reportado por el usuario (varias
   pantallas): el agrandado de acá arriba (11px→15px) dejó sin efecto
   el "colchón" que antes alcanzaba contra el párrafo explicativo de
   abajo (`.campo__ayuda`), que en ~13 pantallas tiene un
   `margin-top:-8px` puesto a mano (pensado para la fecha chica de
   antes) — con la fecha más alta, ese margen negativo terminaba
   pisando el texto. En vez de ir pantalla por pantalla, se sube acá
   mismo el `margin-bottom` de la fecha lo suficiente como para
   absorber ese -8px más repetido (colapso de márgenes CSS: el hueco
   real que queda es `margin-bottom` de acá MENOS el `margin-top`
   negativo del párrafo de abajo) — así se corrige en TODAS las
   pantallas de una sola vez, sin tocar cada HTML. Mismo pedido:
   letra un punto más grande y en negrita.
*/
.fecha-actual {
  font-family: var(--fuente-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--texto-atenuado);
  letter-spacing: 0.02em;
  margin: 4px 0 14px;
}

.fecha-actual--centrada {
  text-align: center;
  margin: -12px 0 24px;
}

/* ---- Dashboard ---- */

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.titulo {
  font-family: var(--fuente-display);
  font-size: 24px;
  font-weight: 600;
  margin: 4px 0 2px;
}

/* Título grande de pantalla de módulo — reemplaza el eyebrow "Módulo"
   + título chico de antes. Se usa solo, sin el <p class="eyebrow"> */
.titulo--modulo {
  font-family: var(--fuente-display);
  font-size: 36px;
  font-weight: 700;
  margin: 8px 0 4px;
}

.subtitulo {
  font-family: var(--fuente-mono);
  font-size: 12px;
  color: var(--texto-atenuado);
  margin: 0;
}

.linea {
  height: 1px;
  background: var(--borde);
  margin: 24px 0 20px;
}

/* Pedido 3/oct — el panel del inicio repite esta línea 3 veces (entre
   Indicadores/Reportes, Reportes/Sistema, Sistema/Módulos) con el
   margen de arriba — pensado para separar bloques grandes de texto en
   una pantalla de módulo — de más entre tarjetas ya de por sí
   separadas por su propio borde. Más angosto SOLO en el panel del
   inicio, para recuperar alto y que entre todo sin scroll. */
.panel--dashboard .linea {
  margin: 14px 0 12px;
}

.etiqueta-seccion {
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-atenuado);
  margin: 0 0 12px;
}

/* Pedido explícito 3/oct — "resaltar los títulos externos [de las
   tarjetas], un punto más de tamaño": SOLO los 3 títulos de sección
   del panel de inicio (Reportes y Tablero de Gestión / Sistema /
   Módulos disponibles) — clase aparte (no se tocó ".etiqueta-seccion"
   en general, que se usa en otras 11 pantallas para otras cosas, como
   la propia etiqueta "Indicadores de mercado" de al lado). */
.etiqueta-seccion--panel {
  font-size: 12px;
  margin: 0 0 10px;
}

/* Título de sección que es un proceso en sí mismo (Lista de precios,
   Clientes, Cotizaciones...) — más grande, negrita, subrayado.
   Pedido explícito 29/sep — "títulos más grande en negritas": pasa de
   20px a 25px (ya era negrita/subrayado, esto solo agranda). Usado en
   más de 50 pantallas del sistema — mismo cambio en todos lados, a
   propósito, para que quede consistente. */
.etiqueta-seccion--proceso {
  font-family: var(--fuente-display);
  font-size: 25px;
  font-weight: 700;
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
  color: var(--texto);
  margin: 0 0 12px;
}

/* Mismo tamaño que --proceso, pero en rojo — para avisos que
   necesitan atención (ej: notas de entrega firmadas listas para
   facturar). */
.etiqueta-seccion--alerta {
  font-family: var(--fuente-display);
  font-size: 25px;
  font-weight: 700;
  text-decoration: underline;
  text-transform: none;
  letter-spacing: 0;
  color: var(--error);
  margin: 0 0 12px;
}

.grilla-modulos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Fila superior: saludo/nombre + tabla de indicadores de mercado
   lado a lado (28/ago, pedido explícito: verla sin mover el cursor,
   ocupando el espacio en blanco al lado del nombre) — se apila sola
   en pantallas angostas (flex-wrap). */
.fila-encabezado-comodities {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.bloque-saludo {
  flex: 1 1 220px;
  min-width: 180px;
}

.bloque-saludo .eyebrow {
  text-align: left;
  margin: 0 0 4px;
}

.panel-secundario--comodities {
  flex: 0 1 300px;
  min-width: 0; /* clave: sin esto, un flex item nunca se achica más allá del ancho mínimo de su contenido — un texto largo como "Bolsa de Comercio de Rosario" empujaba todo el bloque más ancho de lo pedido */
  max-width: 300px;
}

/* Tabla chica de indicadores de mercado (commodities, 28/ago) — pedido
   explícito: lo más chica posible, al lado del nombre, sin mover el
   cursor. Selector compuesto (2 clases) A PROPÓSITO, no solo
   ".tabla--comodities": la regla base ".tabla" de más abajo en este
   mismo archivo tiene la MISMA especificidad (1 clase) y, al venir
   DESPUÉS en el archivo, le ganaba el empate y pisaba este font-size
   más chico — encontrado 28/ago revisando una captura real donde la
   tabla se veía grande pese a este bloque ya existir. Con selector de
   2 clases, esta regla gana siempre, sin depender del orden en el
   archivo.
   Pedido 1/sep — agregado alto máximo + scroll PROPIO: la tabla creció
   (de 4 a 14 indicadores, y va a seguir creciendo) y con
   `align-items: flex-start` en el flex padre (`.fila-encabezado-
   comodities`), la fila entera tomaba el alto del hijo más alto — con
   14 filas eso empujaba TODO lo de abajo (línea divisoria + grilla de
   módulos), obligando a hacer scroll para llegar a los botones. Por
   más indicadores que se sumen de acá en más, el resto de la página
   nunca se mueve — los módulos quedan siempre arriba, sin scroll.
   `display:block` + `thead`/`tbody` como `table` propio es lo que
   permite que el encabezado quede fijo (`sticky`) mientras el cuerpo
   scrollea solo. */
.panel-secundario--comodities .tabla--comodities {
  width: 100%;
  max-width: 300px;
  font-size: 10px;
  display: block;
  /* Pedido 3/oct — bajado de 190px a 150px (el resto sigue andando
     con el scroll propio de siempre, ver nota de arriba) — esta
     tabla es la más alta de toda la fila superior, así que achicarla
     es lo que más espacio libera para que las tarjetas de abajo
     entren sin tener que scrollear la pantalla entera. */
  max-height: 150px;
  overflow-y: auto;
}

.panel-secundario--comodities .tabla--comodities thead,
.panel-secundario--comodities .tabla--comodities tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.panel-secundario--comodities .tabla--comodities thead {
  position: sticky;
  top: 0;
  background: var(--bg-panel);
  z-index: 1;
}

.panel-secundario--comodities .tabla--comodities th,
.panel-secundario--comodities .tabla--comodities td {
  padding: 2px 4px;
  font-size: 10px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Anchos fijos por columna (Mercado/Indicador/Valor/Fecha) — con
   table-layout:fixed, esto evita que una palabra larga rompa el
   ancho total; lo que no entra se corta con "…" (title conserva el
   texto completo al pasar el mouse). */
.panel-secundario--comodities .tabla--comodities th:nth-child(1),
.panel-secundario--comodities .tabla--comodities td:nth-child(1) { width: 26%; }
.panel-secundario--comodities .tabla--comodities th:nth-child(2),
.panel-secundario--comodities .tabla--comodities td:nth-child(2) { width: 26%; }
.panel-secundario--comodities .tabla--comodities th:nth-child(3),
.panel-secundario--comodities .tabla--comodities td:nth-child(3) { width: 28%; }
.panel-secundario--comodities .tabla--comodities th:nth-child(4),
.panel-secundario--comodities .tabla--comodities td:nth-child(4) { width: 20%; }

.tarjeta-modulo {
  display: block;
  border: 1px solid var(--borde);
  background: var(--bg-panel-alto);
  border-radius: 3px;
  padding: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}

a.tarjeta-modulo:hover {
  border-color: var(--acento);
  transform: translateY(-1px);
}

/* Cada tarjeta del panel principal, con el color del módulo al que
   lleva — para reconocerlo de un vistazo antes de entrar. Va DESPUÉS
   de la base a propósito: si va antes, la regla base (que define los
   4 lados del borde) la pisa por venir más tarde en el archivo con
   la misma especificidad. */
.tarjeta-modulo--inventario { border-left: 4px solid #e8a93a; }
.tarjeta-modulo--compras { border-left: 4px solid #3d8060; }
.tarjeta-modulo--calidad-ingenieria { border-left: 4px solid #5a8fc4; }
.tarjeta-modulo--administracion { border-left: 4px solid #3d8060; }
.tarjeta-modulo--comercializacion { border-left: 4px solid #4a9cc9; }
.tarjeta-modulo--produccion { border-left: 4px solid #d4a940; }
.tarjeta-modulo--ventas-internacionales { border-left: 4px solid #2d6a8f; }
.tarjeta-modulo--usuarios { border-left: 4px solid #8a8a8a; }
.tarjeta-modulo--agente-aduanero { border-left: 4px solid #d9b84a; }
.tarjeta-modulo--impuestos { border-left: 4px solid #7c3aed; }
.tarjeta-modulo--mantenimiento { border-left: 4px solid #c0392b; }

div.tarjeta-modulo .tarjeta-modulo__estado {
  color: var(--texto-atenuado);
}

.tarjeta-modulo__nombre {
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
}

.tarjeta-modulo__estado {
  font-family: var(--fuente-mono);
  font-size: 10px;
  color: var(--acento);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Minimódulos colapsables — como una tarjeta, pero abre/cierra su
   contenido en la misma pantalla en vez de navegar a otra página.
   Usado hoy en Ingeniería y Calidad, para no apilar todo en una
   sola pantalla larga. */
.minimodulo {
  border: 1px solid var(--borde);
  background: var(--bg-panel-alto);
  border-radius: 3px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Cada minimódulo con un borde de color distinto en su título, para
   distinguirlos de un vistazo — Ingeniería en el acento normal,
   Calidad en un tono aparte, Certificados en otro. */
.minimodulo--ingenieria .minimodulo__header {
  border-left: 4px solid var(--acento);
}

.minimodulo--calidad .minimodulo__header {
  border-left: 4px solid #4a9d8f;
}

.minimodulo--certificados .minimodulo__header {
  border-left: 4px solid #8a6fc9;
}

.minimodulo--ingreso .minimodulo__header {
  border-left: 4px solid #4a8fc9;
}

/* Etiquetas — Rastreo (Despacho) — pedido explícito 5/oct: "color
   gris suave, claro, letras legibles, títulos negritas". Redefine
   acá mismo las variables de color que ya usan .tabla/.boton/etc.,
   así queda como una "isla" clara dentro de la pantalla oscura de
   Calidad sin duplicar reglas — solo este minimódulo cambia, el
   resto de Calidad sigue igual. */
.minimodulo--etiquetas {
  --bg-panel: #eef0f2;
  --bg-panel-alto: #eef0f2;
  --bg: #eef0f2;
  --borde: #ced3da;
  --texto: #262b33;
  --texto-atenuado: #5a6270;
  /* `color: inherit` en .minimodulo__header toma el color YA CALCULADO del
     padre, no vuelve a leer la variable — así que sin esta línea el título
     del minimódulo heredaba el texto claro del tema oscuro de Calidad
     (ilegible sobre este fondo gris claro). Se fija acá explícitamente para
     que la herencia parta ya del valor correcto. */
  color: var(--texto);
}

.minimodulo--etiquetas .minimodulo__header {
  border-left: 4px solid #8a95a6;
}

.minimodulo--etiquetas .minimodulo__titulo,
.minimodulo--etiquetas .etiqueta-seccion {
  font-weight: 700;
}

/* Espejo de Etiquetas — Rastreo en Gestión de Ventas (comercializacion)
   — mismo pedido "gris suave, claro, letras legibles, títulos
   negritas", mismo truco de redefinir las variables localmente. Acá
   la página de base ya es clara (celeste), así que el gris queda como
   un panel propio adentro, no "una isla" tan marcada como en Calidad. */
.panel-etiquetas-rastreo {
  --bg-panel: #eef0f2;
  --bg-panel-alto: #eef0f2;
  --borde: #ced3da;
  --texto: #262b33;
  --texto-atenuado: #5a6270;
  background: #eef0f2;
  border: 1px solid #ced3da;
  border-radius: 6px;
  padding: 16px 18px 20px;
  /* mismo motivo que en .minimodulo--etiquetas: fijar el color acá para
     que cualquier `color: inherit` dentro del panel parta del valor
     correcto, sin depender de qué tema tenga la página por fuera. */
  color: var(--texto);
}

.panel-etiquetas-rastreo .etiqueta-seccion {
  font-weight: 700;
}

.minimodulo__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.minimodulo__header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.minimodulo__titulo {
  font-size: 15px;
  font-weight: 600;
}

.minimodulo__flecha {
  font-size: 14px;
  color: var(--acento);
  transition: transform 0.15s ease;
}

.minimodulo--abierto .minimodulo__flecha {
  transform: rotate(90deg);
}

.minimodulo__contenido {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--borde);
}

.vacio-modulos {
  font-size: 13px;
  color: var(--texto-atenuado);
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .panel { padding: 32px 22px 26px; }
  .grilla-modulos { grid-template-columns: 1fr; }
}

/* ---- Pantallas de módulo (Inventario y las que siguen) ---- */

.vista--ancha { align-items: stretch; padding: 32px 24px; }

.panel--modulo {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.panel--modulo-ancho {
  max-width: 1500px;
}

/* Pedido 09/sep — bug real: la tabla de Materiales (Inventario) es más
   ancha que el panel en pantallas normales, y la columna de acciones
   de la derecha quedaba directamente CORTADA — `body{overflow-x:hidden}`
   (arriba de este archivo) tapa cualquier desborde en vez de dejarlo
   scrollear. Este wrapper le da scroll horizontal PROPIO a la tabla,
   sin tocar el overflow general de la página. */
.tabla-scroll {
  overflow-x: auto;
}

/* Pedido 09/sep — el select de Código ABM (Calidad, Packing Lists de
   Importación) se ensanchaba solo hasta la opción más larga (descripción
   completa del producto), empujando la fila entera fuera de pantalla.
   Ancho fijo razonable + recorte con "…" — el texto completo sigue
   disponible al abrir el desplegable. */
.select-codigo-abm {
  max-width: 220px;
}

.header-acciones {
  display: flex;
  gap: 8px;
}

.header-acciones .boton-secundario {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.seccion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.seccion-header__acciones {
  display: flex;
  gap: 8px;
}

.boton--chico {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 13px;
}

.banner-alerta {
  margin: 16px 0 0;
  padding: 12px 14px;
  background: rgba(224, 101, 79, 0.12);
  border: 1px solid rgba(224, 101, 79, 0.35);
  border-radius: 3px;
  color: var(--error);
  font-size: 13px;
}

/* Pedido 22/ago — aviso de "NE firmadas sin facturar en HKA" más
   llamativo: negrita, el doble de alto que el tamaño base del
   banner (13px → 26px), y el link "ver detalle" en blanco para que
   resalte contra el fondo del aviso. */
.banner-alerta--hka {
  font-weight: bold;
  font-size: 26px;
}

.banner-alerta--hka a {
  color: #fff;
}

/* Pedido 31/ago — banner llamativo para el reporte semanal de ventas
   (distinto del rojo de error/HKA: este es un aviso POSITIVO, "hay
   algo nuevo para revisar/imprimir", no un problema) — mismo tamaño
   de fuente base que el resto de banner-alerta, color ámbar/acento
   en vez de rojo. */
.banner-alerta--reporte {
  background: rgba(232, 169, 58, 0.15);
  border: 1.5px solid var(--acento);
  color: var(--texto, inherit);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.banner-alerta--reporte strong {
  color: var(--acento);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.tabla th {
  text-align: left;
  font-family: var(--fuente-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-atenuado);
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
}

.tabla td {
  padding: 10px;
  border-bottom: 1px solid var(--borde);
}

/* Filas más chicas — modificador opcional, solo para pantallas con
   muchas filas donde conviene ver más de un vistazo (ej. Flujo de
   Caja) sin achicar TODAS las tablas del sistema. */
.tabla--compacta th,
.tabla--compacta td {
  padding: 4px 8px;
  font-size: 13px;
}

/* Inventario: código y nombre más anchos (para leer el código
   completo sin cortarse), cantidades en una sola línea (número +
   unidad, sin que el navegador los parta en dos renglones). */
#tabla-materiales th:nth-child(1),
#tabla-materiales td:nth-child(1) {
  min-width: 140px;
}

/* Cuentas por Cobrar — "Detalle por factura" (28/ago, pedido
   explícito): la columna Fecha partía "2026-08-26" en dos líneas por
   falta de ancho — acá se le da un ancho fijo generoso (evita el
   salto de línea) y se compensa achicando la columna N° Factura (que
   no necesita tanto espacio) y usando table-layout:fixed para que el
   resto del contenido no lo desborde.
   Columnas: N° Factura(1) / Fecha(2) / Cliente(3) / Origen(4) /
   Total(5) / Cobrado(6) / Saldo(7) / Estado(8) / Acciones(9). */
#tabla-reporte-facturas {
  table-layout: fixed;
}
#tabla-reporte-facturas th:nth-child(1),
#tabla-reporte-facturas td:nth-child(1) {
  width: 11%;
}
#tabla-reporte-facturas th:nth-child(2),
#tabla-reporte-facturas td:nth-child(2) {
  width: 9%;
  white-space: nowrap;
}
#tabla-reporte-facturas th:nth-child(3),
#tabla-reporte-facturas td:nth-child(3) {
  width: 20%;
}
#tabla-reporte-facturas th:nth-child(4),
#tabla-reporte-facturas td:nth-child(4) {
  width: 9%;
}
#tabla-reporte-facturas th:nth-child(5),
#tabla-reporte-facturas td:nth-child(5),
#tabla-reporte-facturas th:nth-child(6),
#tabla-reporte-facturas td:nth-child(6),
#tabla-reporte-facturas th:nth-child(7),
#tabla-reporte-facturas td:nth-child(7) {
  width: 10%;
}
#tabla-reporte-facturas th:nth-child(8),
#tabla-reporte-facturas td:nth-child(8) {
  width: 9%;
}
#tabla-reporte-facturas th:nth-child(9),
#tabla-reporte-facturas td:nth-child(9) {
  width: 12%;
}

#tabla-materiales th:nth-child(2),
#tabla-materiales td:nth-child(2) {
  min-width: 260px;
}

#tabla-materiales td:nth-child(4),
#tabla-materiales td:nth-child(5),
#tabla-materiales td:nth-child(6),
#tabla-materiales th:nth-child(7),
#tabla-materiales td:nth-child(7) {
  white-space: nowrap;
}

#tabla-materiales th:nth-child(7),
#tabla-materiales td:nth-child(7) {
  min-width: 170px;
}

/* Flujo de Caja — Movimientos: la celda de Centro de Costo (código +
   descripción + botón "cambiar") se cortaba en 2-3 líneas por falta
   de ancho. Pedido 26/ago: letra más chica ahí, columna más ancha
   para que entre en una sola línea, y el resto de las columnas
   (fecha/categoría/montos/origen) un poco más chicas para compensar
   el espacio. Descripción queda libre (sin nowrap), es la que más
   necesita poder crecer o partirse en más de una línea.
   AMPLIADO 27/ago — todavía se cortaba en 2 líneas con el ancho
   anterior (190px): letra más chica aún (10px), columna más ancha
   (260px), y el botón "(cambiar)" se acortó a un ícono de lápiz (✎)
   para ganar el espacio horizontal que hacía falta — mismo criterio
   ya usado en otras columnas de acción reducidas a ícono. */
#tabla-movimientos th:nth-child(6),
#tabla-movimientos td:nth-child(6) {
  font-size: 10px;
  white-space: nowrap;
  min-width: 260px;
}

#tabla-movimientos th:nth-child(1),
#tabla-movimientos td:nth-child(1),
#tabla-movimientos th:nth-child(2),
#tabla-movimientos td:nth-child(2),
#tabla-movimientos th:nth-child(3),
#tabla-movimientos td:nth-child(3),
#tabla-movimientos th:nth-child(4),
#tabla-movimientos td:nth-child(4),
#tabla-movimientos th:nth-child(5),
#tabla-movimientos td:nth-child(5),
#tabla-movimientos th:nth-child(8),
#tabla-movimientos td:nth-child(8) {
  font-size: 11px;
}

.tabla tr.fila--alerta td:nth-child(4) {
  color: var(--error);
  font-weight: 600;
}

/* Fila de aviso (ej: vencimiento próximo de una lista de precios) —
   ocupa todo el ancho, se distingue con fondo tenue en vez de texto
   rojo (no es un error, es un aviso a resolver). */
.tabla tr.fila--alerta td[colspan] {
  background: rgba(232, 169, 58, 0.12);
  color: var(--texto);
  font-weight: 500;
  font-size: 13px;
  padding: 10px;
}

/* Caja que agrupa visualmente los datos que ya vienen automáticos
   en un formulario (ej: Facturación), para que se note de un
   vistazo qué NO hay que tocar y qué sí hay que completar. */
.caja-datos-automaticos {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 8px;
  font-size: 14px;
}

.caja-datos-automaticos p {
  margin: 4px 0;
}

.caja-datos-automaticos__titulo {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--acento);
  margin: 0 0 8px !important;
}

/* Pedido explícito 29/sep — tarjetas de OP "en proceso" (Producción):
   el número de la orden centrado, más grande y en azul (mismo azul
   que ya usa la ficha impresa de OP), con el tipo de orden abajo en
   naranja (hereda el color de .caja-datos-automaticos__titulo, el
   padre). Clases NUEVAS y propias — a propósito no se tocó
   .caja-datos-automaticos__titulo en sí, porque esa la reusan otras
   pantallas (Facturación, Calidad, Cuentas por Cobrar, Aprobaciones,
   Instructivos de Trabajo) para otra cosa (títulos de datos
   automáticos en formularios), no para números de OP. */
.tarjeta-op__numero {
  display: block;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: #1a56c4;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.tarjeta-op__tipo {
  display: block;
  text-align: center;
}

.campo--casillero {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
}

.campo--casillero input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.tabla__vacio {
  text-align: center;
  color: var(--texto-atenuado);
  padding: 24px;
}

.texto-secundario {
  color: var(--texto-atenuado);
  font-size: 0.85em;
}

.campo__ayuda {
  color: var(--texto-atenuado);
  font-size: 0.9em;
  margin: 4px 0 12px;
}

/* Pedido explícito 30/sep — bug real: con `white-space: nowrap` +
   `text-align: right`, una fila con muchos botones de acción (ej.
   Órdenes de Venta: Imprimir, Guardar PDF, Ver OC, +Anticipo, Cambiar
   estado, Bloquear por pago, Prioridad de entrega, Reasignar cliente)
   obligaba a la tabla entera a estirarse mucho más ancha que el panel,
   empujando los últimos botones fuera de la pantalla (solo visibles
   scrolleando de costado, si es que `.tabla-scroll` envolvía esa tabla
   — si no, directamente quedaban tapados por `body{overflow-x:hidden}`,
   ver nota de 09/sep arriba). Ahora los botones se acomodan a la
   izquierda y, si no entran todos en una línea, pasan solos a un
   segundo renglón — la tabla ya no necesita estirarse de más. Clase
   COMPARTIDA por las ~40 pantallas del sistema con columna de
   acciones, así que este único cambio las corrige a todas.
*/
.tabla__acciones {
  text-align: left;
  white-space: normal;
}

.boton-link {
  background: none;
  border: none;
  color: var(--acento);
  font-family: var(--fuente-texto);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
}

.boton-link:hover {
  text-decoration: underline;
}

/* ---- Menú de acciones unificado (Editar/Eliminar) — 08/sep ---- */

.menu-acciones {
  position: relative;
  display: inline-block;
}

.boton-menu-acciones {
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  color: var(--acento);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 5px;
}

.boton-menu-acciones:hover {
  background: var(--acento);
  color: var(--bg-panel);
}

.menu-acciones__panel {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--bg-panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  min-width: 170px;
  z-index: 15;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  text-align: left;
}

.menu-acciones__panel[hidden] {
  display: none;
}

.menu-acciones__panel button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--texto);
  font-size: 13px;
  padding: 9px 12px;
  cursor: pointer;
  font-family: var(--fuente-texto);
}

.menu-acciones__panel button:hover {
  background: var(--bg-panel-alto);
}

.menu-acciones__eliminar {
  color: var(--error);
}

.menu-acciones__confirmar {
  padding: 12px;
}

.menu-acciones__confirmar p {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--texto);
  line-height: 1.4;
}

.menu-acciones__confirmar-botones {
  display: flex;
  gap: 6px;
}

.menu-acciones__confirmar-botones button {
  flex: 1;
  font-size: 12px;
  padding: 7px 8px;
  border-radius: 3px;
  border: 1px solid var(--borde);
  background: var(--bg-panel-alto);
  color: var(--texto);
  cursor: pointer;
}

.menu-acciones__confirmar-si {
  background: var(--error);
  border-color: var(--error);
  color: var(--bg);
  font-weight: 500;
}

/* ---- Borrador automático de formularios — 08/sep ---- */

.borrador-formulario__aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-panel-alto);
  border: 1px solid var(--acento);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--texto);
}

.borrador-formulario__botones {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.borrador-formulario__botones button {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid var(--borde);
  background: var(--bg-panel);
  color: var(--texto);
  cursor: pointer;
  font-family: var(--fuente-texto);
}

.borrador-formulario__botones button[data-borrador-accion="restaurar"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--bg);
  font-weight: 500;
}

/* ---- Modal genérico ---- */

.fondo-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 10;
  padding: 24px;
  overflow-y: auto;
}

.fondo-modal[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 700px;
  background: var(--bg-panel);
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 28px;
}

.modal--ancho {
  max-width: 900px;
}

.modal--extra-ancho {
  max-width: 1100px;
}

.tabla--historial {
  margin-bottom: 20px;
  font-size: 13px;
}

.tabla--historial th,
.tabla--historial td {
  padding: 8px;
}

.modal__titulo {
  font-family: var(--fuente-display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px;
}

.modal select {
  width: 100%;
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 11px 12px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  color: var(--texto);
}

.fila-componente {
  display: grid;
  grid-template-columns: 0.8fr 1.6fr 1fr 1fr 0.8fr auto;
  gap: 6px;
  margin-bottom: 8px;
  align-items: center;
}

.fila-componente input {
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 8px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  color: var(--texto);
  width: 100%;
}

/* Pedido explícito 21/sep: el buscador de componente (Ingeniería,
   Alta/Modificación ABM) se veía muy angosto para distinguir códigos
   parecidos — columna del buscador con más del doble de ancho
   relativo que antes (0.8fr → 1.6fr), combinado con el modal en
   modo --extra-ancho (ver abrirModalAlta/abrirModalModificacion en
   ingenieria.js) para que el aumento sea real en píxeles, no solo
   proporcional. Clase aparte (no se toca .fila-componente en sí)
   para no afectar la fila de ítem de Factura, que reusa la misma
   clase base con otra cantidad de columnas. */
.fila-componente--ingenieria {
  grid-template-columns: 1.6fr 1.4fr 0.9fr 0.9fr 0.7fr auto;
}

.fila-item-precio {
  border: 1px solid var(--borde);
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 12px;
}

.fila-item-precio__grilla {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.fila-item-precio__grilla--codigo {
  grid-template-columns: 1fr;
  margin-bottom: 8px;
}

.fila-item-precio label {
  display: block;
  font-size: 10px;
  color: var(--texto-atenuado);
  margin-bottom: 3px;
}

.fila-item-precio select,
.fila-item-precio input {
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 7px 8px;
  font-family: var(--fuente-texto);
  font-size: 12px;
  color: var(--texto);
  width: 100%;
}

.campo--casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  color: var(--texto);
  margin-bottom: 10px;
}

.campo--casilla input {
  width: auto;
  margin: 0;
}

/* ---- Buscador de cliente (lupa) — v132 ---- */

.buscador-cliente {
  position: relative;
}

.buscador-cliente__resultados {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 4px;
  background: var(--bg-panel-alto);
  border: 1px solid var(--borde);
  border-radius: 3px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.buscador-cliente__opcion {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--borde);
  padding: 10px 12px;
  font-family: var(--fuente-texto);
  font-size: 14px;
  color: var(--texto);
  cursor: pointer;
}

.buscador-cliente__opcion:last-child {
  border-bottom: none;
}

.buscador-cliente__opcion:hover {
  background: var(--bg-panel);
}

.buscador-cliente__vacio {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--texto-atenuado);
  margin: 0;
}

.buscador-cliente__seleccionado {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--acento, #3d8060);
}

/* =========================================================================
   RESPONSIVE MÓVIL GLOBAL — pedido 10/sep: "solo consultar (ver
   pendientes, estados, totales) desde el celular, sin cargar nada —
   TODO el sistema, cada pantalla". En vez de tocar las ~40 páginas de
   módulo una por una, estas reglas viven en el CSS compartido que
   TODAS ya incluyen — se benefician automáticamente, sin tocar HTML/JS
   de cada módulo. Alcance a propósito: legibilidad de CONSULTA
   (headers, títulos, tablas), no formularios de carga optimizados
   para touch (eso quedó fuera de pedido explícitamente).
   ========================================================================= */

@media (max-width: 768px) {
  /* Menos aire a los costados — en un teléfono, 24-32px de padding de
     cada lado es una porción enorme del ancho real disponible. */
  .vista--ancha {
    padding: 16px 12px;
  }

  /* Encabezado de cada módulo (logo + botones Panel/Cerrar sesión):
     en desktop van en una sola fila; en un teléfono angosto eso
     apretaba todo o lo hacía desbordar — permitir que pase a una
     segunda línea en vez de comprimirse. */
  .panel-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .header-acciones {
    flex-wrap: wrap;
  }

  /* 36px de título era pensado para escritorio — en un teléfono se
     ve desproporcionado y puede cortar palabras raro. */
  .titulo--modulo {
    font-size: 26px;
  }

  /* Título de sección + botón de acción al lado (ej. "Materiales" +
     "+ Nuevo material"): en vez de apretarlos en la misma línea,
     apilarlos — mucho más legible en una pantalla angosta. */
  .seccion-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .seccion-header__acciones,
  .header-acciones {
    width: 100%;
  }

  /* Red de seguridad GLOBAL para tablas: la mayoría ya tiene su
     propio wrapper .tabla-scroll (agregado página por página, v282
     en adelante) — pero no todas. Esto asegura que CUALQUIER tabla
     del sistema, tenga o no ese wrapper, se pueda scrollear
     horizontalmente con el dedo en vez de romper el layout de la
     página entera o quedar ilegible achicada a la fuerza. */
  .tabla {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Grillas de formulario pensadas para escritorio (ej. filas de
     componentes en Ingeniería, con 5-6 columnas fijas) — en un
     teléfono, una sola columna apilada es mucho más usable que
     columnas de 40px de ancho. Pedido explícito es solo consulta,
     no carga — pero esto es gratis (una sola regla) y evita que
     esas pantallas queden literalmente rotas si alguien las abre
     desde el celular de todos modos. */
  .fila-componente {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  /* Teléfonos angostos de verdad — un paso más de achique en lo que
     más pesa visualmente. */
  .titulo--modulo {
    font-size: 22px;
  }

  .panel {
    padding: 24px 16px 20px;
  }
}

/* Pedido explícito 16/sep — resalta una fila de tabla al llegar desde
   un link directo (campanita, u otra pantalla) con ?verOrden=<id> o
   similar. Se saca sola con un timeout, no queda permanente. */
.fila-resaltada {
  animation: destacar-fila 2s ease-in-out 2;
}
@keyframes destacar-fila {
  0%, 100% { background: transparent; }
  50% { background: var(--acento-suave, #fff3cd); }
}

/* ===== Calidad — módulos en tarjetas parejas (pedido explícito 6/oct,
   "mismo estilo que Mantenimiento" — cuadrados/rectángulos parejos,
   con Despacho de un lado y Calidad del otro, diferenciados por
   color). Reusa el mismo .minimodulo/.minimodulo__header/data-toggle
   de siempre — calidad.js no cambió nada, esto es puramente visual:
   se agrupan varios .minimodulo en una grilla, y el que está abierto
   (.minimodulo--abierto, ya lo pone el JS existente) pasa a ocupar el
   ancho completo de la fila para mostrar su contenido.
   TODO scopeado bajo .grilla-minimodulos a propósito — así no afecta
   los minimódulos en lista apilada de otras pantallas (Ingeniería,
   etc.) que reusan el mismo .minimodulo__header sin esta grilla. */
.grilla-minimodulos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.grilla-minimodulos .minimodulo {
  margin-bottom: 0;
}

/* El que está abierto ocupa toda la fila — mismo criterio que una
   tabla/formulario necesita ancho completo para ser usable; los
   demás, todavía cerrados, siguen chicos y parejos alrededor. */
.grilla-minimodulos .minimodulo--abierto {
  grid-column: 1 / -1;
}

.grilla-minimodulos .minimodulo__header {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 92px;
  gap: 8px;
}

.grilla-minimodulos .minimodulo__fila-superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.grilla-minimodulos .minimodulo__subtitulo {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--texto-atenuado);
  text-align: left;
  line-height: 1.35;
}

/* Un solo color por grupo (en vez del color individual por minimódulo
   de antes) — para que se note de un vistazo qué tarjetas son
   "Despacho" y cuáles son "Calidad". Va al final del archivo a
   propósito: misma especificidad (2 clases) que las reglas viejas
   .minimodulo--xxx .minimodulo__header de más arriba, así que por
   orden en la hoja esta gana — el color de grupo manda sobre el color
   individual que tenía cada minimódulo antes. */
.grilla-minimodulos--despacho .minimodulo__header {
  border-left: 4px solid #4a8fc9;
}

.grilla-minimodulos--calidad .minimodulo__header {
  border-left: 4px solid #4a9d8f;
}

/* ===== Etiquetas — Rastreo, versión compacta para los espejos de
   Comercialización y Gestión de Operaciones (pedido explícito 6/oct:
   "puede ser la mitad de tamaño, es solo informativo de
   visualización cada tanto") — Despacho (Calidad) sigue con el
   tamaño normal, esto solo achica el panel de SOLO LECTURA. Mismos
   colores/legibilidad de siempre (ver .panel-etiquetas-rastreo más
   arriba), nomás con menos padding, letra más chica, e historial con
   scroll propio en vez de crecer sin límite. */
.panel-etiquetas-rastreo--compacto {
  padding: 8px 10px 10px;
}

.panel-etiquetas-rastreo--compacto .etiqueta-seccion {
  font-size: 12px;
}

.panel-etiquetas-rastreo--compacto table.tabla th,
.panel-etiquetas-rastreo--compacto table.tabla td {
  padding: 4px 8px;
  font-size: 11px;
}

.panel-etiquetas-rastreo--compacto #tabla-historial-etiquetas-espejo {
  display: block;
  max-height: 140px;
  overflow-y: auto;
}

.panel-etiquetas-rastreo--compacto #tabla-historial-etiquetas-espejo thead,
.panel-etiquetas-rastreo--compacto #tabla-historial-etiquetas-espejo tbody {
  display: table;
  width: 100%;
  table-layout: fixed;
}