/* ===== Marca Exclusive sobre la plantilla FlexAdmin =====
   Se carga DESPUÉS de flexadmin/main.css para retematizar con los colores del logo. */
:root {
  --accent-color: #1b2440;   /* azul marino del logo (reemplaza el verde-azulado de FlexAdmin) */
  --marca-dorado: #b89b5e;   /* dorado del logo */
}

/* Bootstrap .text-primary / .bg-primary no derivan del acento en FlexAdmin: los mapeamos. */
.text-primary { color: var(--accent-color) !important; }
.bg-primary { background-color: var(--accent-color) !important; }

/* Filas oscuras dentro de .table: Bootstrap fija el color de la celda con
   --bs-table-color (= #1c2635, azul oscuro) y eso PISA el color heredado del <tr>.
   Resultado: letra azul oscuro sobre fondo azul = ilegible (p. ej. la fila GOP del
   P&L). Regla: cualquier fila/thead que marquemos con color:#fff en su estilo, sus
   celdas heredan la variable en blanco. */
.table tr[style*="color:#fff"],
.table thead[style*="color:#fff"] { --bs-table-color: #fff; }

/* Pestañas (nav-pills) con el color de marca */
.nav-pills .nav-link { color: var(--accent-color); }
.nav-pills .nav-link.active { background-color: var(--accent-color); color: #fff; }

/* Toque dorado en los íconos del menú lateral */
.sidebar-nav .nav-link .nav-icon i { color: var(--marca-dorado); }
.sidebar-nav .nav-link.active .nav-icon i { color: #fff; }

/* Números monetarios alineados (cifras tabulares) en las tablas de auditoría */
.mono { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- Sidebar "mini": solo íconos, FIJO (no se expande) ----------
   Los íconos quedan clickeables y la barra no cambia de ancho al pasar el mouse.
   Se usa !important porque el ancho del tema está declarado en varias reglas.

   Va desde 768px y no desde los 1200px del tema: en una ventana de ~1000px (un
   portátil, o el navegador con zoom) el tema esconde la barra del todo y el botón
   solo la desliza; ahí es justamente donde el modo de solo íconos sirve más. */
@media (min-width: 768px) {
  body.sidebar-mini .sidebar {
    width: var(--sidebar-collapsed-width, 70px) !important;
    /* Debajo de 1200px el tema saca la barra de la pantalla; en modo mini se queda. */
    transform: none !important;
    transition: width var(--transition-base, .2s);
  }
  body.sidebar-mini .main {
    margin-left: var(--sidebar-collapsed-width, 70px) !important;
    transition: margin-left var(--transition-base, .2s);
  }

  body.sidebar-mini .sidebar .nav-text,
  body.sidebar-mini .sidebar .nav-arrow,
  body.sidebar-mini .sidebar .nav-badge,
  body.sidebar-mini .sidebar .nav-heading,
  body.sidebar-mini .sidebar .sidebar-footer,
  body.sidebar-mini .sidebar .sidebar-workspace { display: none !important; }
  body.sidebar-mini .sidebar .nav-link {
    justify-content: center; padding-left: 0; padding-right: 0;
  }
  body.sidebar-mini .sidebar .nav-icon { margin: 0; }
  body.sidebar-mini .sidebar .nav-submenu { display: none !important; }
  /* El texto no debe empujar el ancho mientras se contrae. */
  body.sidebar-mini .sidebar-nav { overflow-x: hidden; }
}

/* En pantallas chicas (celular/tableta) el botón abre y cierra la barra deslizándola. */
@media (max-width: 767px) {
  body.sidebar-open .sidebar { transform: translateX(0) !important; }
}

/* Entre 768 y 1199 el tema deja la barra fuera de pantalla: como ahí el botón ahora
   achica en vez de deslizar, la barra tiene que estar visible de entrada. */
@media (min-width: 768px) and (max-width: 1199px) {
  .sidebar { transform: none !important; }
  .main { margin-left: var(--sidebar-width, 280px); }
}

/* ---------- Modales con formulario largo ----------
   El <form> envuelve header/body/footer, así que lo convertimos en columna flexible:
   cabecera y botones quedan fijos, y solo el cuerpo hace scroll. */
.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 3.5rem);
  display: flex;
  flex-direction: column;
}
.modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.modal-content > form > .modal-body {
  overflow-y: auto;
  min-height: 0;
}

/* ---------- Pantalla de login (sin barra lateral) ---------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--background-color, #f4f7fb);
}
.login-card { width: 100%; max-width: 400px; }
.login-logo { max-width: 150px; }

/* ---------- Barra de filtros de los estados ----------
   Todos los controles miden lo mismo. Se fija la altura acá y no se confía en que las
   clases de Bootstrap coincidan: un <select> y un <input type="search"> no dan el
   mismo alto (el buscador trae ademas su propio botón de limpiar), y con los campos
   uno al lado del otro la diferencia de un par de píxeles se ve. */
.barra-filtros { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.barra-filtros .campo { display: flex; flex-direction: column; gap: 3px; }
.barra-filtros .campo > label {
  font-size: 11px; line-height: 1; color: #6b7785; font-weight: 500;
  letter-spacing: .01em; margin: 0;
}
.barra-filtros .form-control,
.barra-filtros .form-select,
.barra-filtros .btn {
  height: 32px; font-size: 13px; padding: 0 10px; border-radius: 7px;
  border-color: #d6dce5;
}
.barra-filtros .form-select { padding-right: 28px; }
.barra-filtros .btn { padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
/* El buscador: sin el aro nativo del navegador y con la lupa adentro. */
.barra-filtros input[type="search"] { background-position: 9px center; padding-left: 30px;
  background-repeat: no-repeat; background-size: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a94a6'%3E%3Cpath d='M11.7 10.3a6 6 0 1 0-1.4 1.4l3 3a1 1 0 0 0 1.4-1.4zM7 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8'/%3E%3C/svg%3E"); }
.barra-filtros input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* Controles que van en la barra oscura del título de una hoja: qué mes se arma,
   esconder las cuentas en cero, plegar las secciones. Comparten alto, borde y
   tipografía porque son la misma clase de cosa —ajustes de la vista, no del
   período—, y van juntos a la derecha del título: sueltos, el navegador los
   repartía por todo el ancho y quedaban desperdigados. */
.ctrl-hoja { display: inline-flex; align-items: center; gap: 7px; height: 30px;
             background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
             color: #dbe3ef; border-radius: 8px; padding: 0 10px; font-size: 12px;
             line-height: 1; white-space: nowrap; margin: 0; cursor: pointer; }
.ctrl-hoja:hover { background: rgba(255,255,255,.13); color: #fff; }
/* El <select> ya trae su propio marco de formulario: adentro va sin nada, para que
   el borde del grupo sea uno solo y no dos encajados. */
.ctrl-hoja select { background: transparent; border: 0; color: #fff; font-size: 12px;
                    padding: 0 18px 0 0; outline: none; box-shadow: none; }
.ctrl-hoja select option { color: #1b2440; }
.ctrl-hoja input[type="checkbox"] { margin: 0; }
/* Variante corta: el control se queda con su icono (o con un «0») y el rótulo vive
   en el globo de ayuda. Un rótulo entero ocupaba media barra para decir algo que se
   entiende con el icono. */
.ctrl-hoja.ctrl-corto { padding: 0 8px; gap: 5px; }
.ctrl-hoja.ctrl-corto span { font-weight: 700; }

/* Avisos: un control más de la barra, con el mismo alto. Discretos, porque casi
   siempre dicen que todo está en orden; el color solo matiza el borde. */
.aviso-filtro {
  height: 32px; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500;
  border: 1px solid; text-decoration: none; white-space: nowrap;
}
.aviso-filtro i { font-size: 13px; }
.aviso-ok   { border-color: #bfe3cd; background: #f2fbf6; color: #1a6b3a; }
.aviso-ojo  { border-color: #f0d9a8; background: #fffaf0; color: #8a6516; }
.aviso-dato { border-color: #dde3ec; background: #f7f9fc; color: #6b7785; }
a.aviso-filtro:hover { filter: brightness(.97); }

/* ---------- Tablas de los estados financieros ----------
   UNA definición para todas: el P&L Summary, el P&L Real, el Balance y el Flujo son
   el mismo informe visto de distinta manera, así que tienen que verse iguales. Cada
   plantilla solo elige el ancho de su columna de conceptos, que depende de cuántas
   columnas de números lleve al lado.

   Se declara acá y no en cada plantilla porque tenerlo repetido es lo que las hacía
   divergir: se corregía una y las otras quedaban atrás. */
.tabla-estado { font-size: 11px; white-space: nowrap;
                /* Con border-collapse:collapse —que es lo que el tema pone a TODAS las
                   tablas— Chrome ignora `position: sticky` en las celdas, así que la
                   columna de conceptos y el encabezado se desplazaban con el resto. Con
                   `separate` el sticky funciona; los bordes que antes daba el colapso se
                   declaran abajo, celda por celda. */
                border-collapse: separate; border-spacing: 0; }
.tabla-estado > :not(caption) > * > * { border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.tabla-estado thead th { border-bottom: 0; }
.tabla-estado tbody td { font-size: 11px; padding: 6px 10px; }
/* Las columnas secundarias —el año anterior, el presupuesto, los porcentajes— van
   atenuadas para que el ojo caiga primero en el real, que es la columna que se lee. */
.tabla-estado .apagado { opacity: .82; }

/* La primera columna queda fija al desplazarse a los lados. Necesita z-index propio
   —si no, las columnas que van después en el HTML se le pintan encima— y un fondo
   opaco, porque el color del <tr> no se pinta detrás de una celda fija. */
.tabla-estado .fija { position: sticky; left: 0; z-index: 2; background: #fff;
                      padding: 6px 14px !important; }
/* Un concepto largo se corta con puntos suspensivos —el nombre completo queda en el
   title— pero SOLO en las celdas de una columna. En las que abarcan toda la fila
   (los títulos de sección) el recorte anularía el `sticky` del texto de adentro, y el
   título se iría de vista al desplazarse a los lados. */
.tabla-estado .fija:not([colspan]) { overflow: hidden; text-overflow: ellipsis; }
.tabla-estado thead .fija { z-index: 5; }
/* Los títulos de sección abarcan toda la fila, así que su celda mide lo que la tabla:
   el texto va aparte, pegado al borde, para no perderse al desplazar. */
.tabla-estado .fija .pegado { position: sticky; left: 14px; display: inline-block; }

/* Encabezado: cada celda lleva su color y su letra. Bootstrap fija el color del texto
   celda por celda con --bs-table-color, y sobre el azul quedaba letra oscura. */
.tabla-estado thead th { font-size: 11px; vertical-align: middle; }
/* Los encabezados de las columnas de números se alinean como sus números: si el
   título va centrado y la cifra a la derecha, la columna se lee torcida. */
.tabla-estado thead th.text-end { text-align: right !important; }
/* El encabezado va de más oscuro a más claro, siguiendo la jerarquía: arriba el
   período (Month, Acumulated), debajo qué columna es (Real, Budget, Variation) y al
   final la unidad (US$, %). Estaba al revés —la fila más general era la más clara— y
   la última casi blanca cortaba de golpe con las dos de arriba. */
.tabla-estado thead tr:nth-child(1) th { background: #11192e; color: #fff; }
.tabla-estado thead tr:nth-child(2) th { background: #2a3556; color: #fff; }
.tabla-estado thead tr:nth-child(3) th { background: #4a5878; color: #dfe5f0;
                                         font-weight: 400; }
.tabla-estado thead .grupo-mes,
.tabla-estado thead th[colspan] + th[colspan] { border-left: 1px solid #46527a; }

/* Filas destacadas: todas se leen igual —mismo peso, en mayúscula— y cada una conserva
   su color, que es lo que las distingue entre sí. */
.tabla-estado tr.f-grupo .fija,
.tabla-estado tr.f-header .fija,
.tabla-estado tr.f-subtotal .fija,
.tabla-estado tr.f-clave .fija,
.tabla-estado tr.f-income .fija,
.tabla-estado tr.f-gop .fija,
.tabla-estado tr.f-ebitda .fija { font-weight: 700; text-transform: uppercase;
                                  letter-spacing: .03em; }
.tabla-estado tr.f-grupo,
.tabla-estado tr.f-subtotal,
.tabla-estado tr.f-clave { --bs-table-color: #1b2440; }
.tabla-estado tr.f-grupo > td,
.tabla-estado tr.f-subtotal > td,
.tabla-estado tr.f-clave > td,
.tabla-estado tr.f-income > td { font-weight: 700; }

/* Un título y el total que cierra su sección llevan el mismo color: son las dos
   puntas de lo mismo, y verlos distintos hacía parecer que eran cosas de distinto
   rango. El departamento y su resultado van en la banda oscura; los bloques de
   adentro y sus totales, en la clara. */
/* El color va en la FILA ENTERA y no solo en su primera celda. La celda fija necesita
   además el suyo —el fondo del <tr> no se pinta detrás de ella, ver .fija—, pero sin
   este el resto de la fila quedaba blanco: el total salía con el verde solo en la
   columna del concepto y los montos flotando al lado. */
.tabla-estado tr.f-header { background: #11192e; }
.tabla-estado tr.f-grupo { background: #eef1f8; }
.tabla-estado tr.f-outlet { background: #f8fafc; }
.tabla-estado tr.f-subtotal { background: #eef1f8; }
.tabla-estado tr.f-clave { background: #dceccf; }
.tabla-estado tr.f-income { background: #11192e; }
.tabla-estado tr.f-gop { background: #fff3d6; }
.tabla-estado tr.f-ebitda { background: #e7f0fb; }

.tabla-estado tr.f-grupo .fija { background: #eef1f8; }
/* La banda de departamento lleva su color de letra AQUÍ y no heredado del <tr>:
   Bootstrap pinta cada celda con `color: var(--bs-table-color)`, que es una
   declaración propia de la celda y le gana a lo que herede. Al plegar y volver a
   desplegar, el título pasaba de blanco a gris. */
.tabla-estado tr.f-header { --bs-table-color: #fff; }
.tabla-estado tr.f-header > td,
.tabla-estado tr.f-header .fija,
.tabla-estado tr.f-header .fija .pegado { color: #fff; }
.tabla-estado tr.f-header .fija { background: #11192e; }
.tabla-estado tr.f-subtotal .fija { background: #eef1f8; }
.tabla-estado tr.f-clave .fija { background: #dceccf; }
.tabla-estado tr.f-income .fija { background: #11192e; color: #fff; }
.tabla-estado tr.f-income { --bs-table-color: #fff; }
.tabla-estado tr.f-gop .fija { background: #1b2440; color: #fff; }
.tabla-estado tr.f-ebitda .fija { background: #b89b5e; color: #fff; }
/* Encabezado de subgrupo («Cash», «Receivables»): en versalita y negrita, como las
   demás bandas del estado. Encabeza sus partidas, así que se lee igual que un
   título y no como una línea más. */
.tabla-estado tr.f-outlet .fija { background: #f8fafc; font-weight: 700;
                                  text-transform: uppercase; letter-spacing: .03em; }
/* Sin sangría: todos los conceptos arrancan en la misma vertical. La jerarquía ya
   la marcan el color de fondo y las mayúsculas de los títulos y los totales; correr
   unas filas y otras no hacía que la columna se viera desalineada. */

/* Los montos llevaban tipografía monoespaciada, que al mismo tamaño se ve más chica
   que el texto: junto a un concepto en negrita la diferencia canta. Se usa la misma
   familia con cifras de ancho fijo, que alinea las columnas igual sin encoger el
   número. Va con !important porque Bootstrap declara .font-monospace así. */
/* Cada mes son tres columnas (año anterior, real, presupuesto). La línea marca dónde
   empieza un mes y dónde termina el anterior: sin ella el ojo agrupa mal y el real de
   un mes parece ir con el presupuesto del otro. */
.tabla-estado .grupo-mes { border-left: 1px solid #dde6f0; }
.tabla-estado thead .grupo-mes { border-left: 1px solid #46527a; }

/* Las tres columnas de un mes miden lo mismo. Sin esto la tabla las reparte según el
   texto —«Last Year» ocupa más que «Actual»— y el encabezado del mes queda corrido
   respecto de sus cifras: parece que el real de un mes cae bajo el mes siguiente. */
.tabla-estado thead th:not(.fija),
.tabla-estado tbody td:not(.fija) { min-width: 82px; }

.tabla-estado tbody td.font-monospace { font-family: inherit !important;
                                        font-variant-numeric: tabular-nums; }

/* ---------- Tarjetas del Snapshot ----------
   Cada una lleva un título, su gráfico y su tabla. El título iba centrado mientras la
   tabla arranca pegada al borde, así que ninguno de los dos quedaba a la altura del
   otro: parecían dos piezas puestas ahí sin relación. Ahora el título arranca donde
   arranca la primera columna de la tabla, y esa vertical los ata. */
.tarjeta-snap { padding: 18px 20px 20px; }
/* El título va CENTRADO sobre su gráfico: encabeza el dibujo, que ocupa todo el
   ancho de la tarjeta, no la columna de conceptos de la tabla. */
.tarjeta-snap .titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #6b7785; margin: 0 0 2px; text-align: center;
}
.tarjeta-snap .sub { font-size: 12px; color: #9aa5b6; margin: 0 0 10px;
                     text-align: center; }
/* La tabla, dentro de su propio marco: separada del gráfico y con las esquinas
   redondeadas, para que se lea como el resumen del gráfico de arriba y no como algo
   que quedó suelto al final de la tarjeta. */
.tarjeta-snap .marco {
  border: 1px solid #e7ebf2; border-radius: 10px; overflow: hidden; margin-top: 14px;
}
.tarjeta-snap .marco .tabla-estado { margin: 0 !important; }

/* El resumen del Snapshot: la primera columna nombra el concepto y no necesita el
   ancho de una hoja entera. Un poco de aire a los lados: pegadas al borde del marco
   las cifras se leen apretadas. */
.tabla-estado.tsnap .fija { min-width: 96px; }
.tabla-estado.tsnap > :not(caption) > * > * { padding: 7px 14px; }
.tabla-estado.tsnap tbody td { font-size: 12px; }
/* Los encabezados, centrados sobre su columna. El de la tabla salía a la izquierda
   —lo hereda de las hojas anchas, donde la primera columna es texto— y quedaba
   descolgado de las cifras, que van a la derecha. */
.tabla-estado.tsnap thead th { text-align: center !important; }
.tabla-estado.tsnap thead th.fija { text-align: left !important; }

/* ---------- Tablas de datos (configuración y reporte) ----------
   Las hojas de estados usan `.tabla-estado`: letra chica, columna pegada y muchas
   columnas de montos. Las de configuración y las del reporte no necesitan nada de
   eso, pero SÍ tienen que verse de la misma familia: hasta ahora cada una traía su
   propio encabezado —unas la barra clara de Bootstrap, otras un color escrito a
   mano— y el sistema parecía tres productos distintos.

   Esta clase es ese punto medio: el mismo encabezado oscuro y las mismas reglas de
   lectura, a un tamaño que deja meter texto y controles de formulario. */
.tabla-datos { font-size: 12.5px; }
.tabla-datos > :not(caption) > * > * { padding: 6px 12px; }
.tabla-datos thead th {
  background: #11192e; color: #fff; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 0;
  vertical-align: middle; white-space: nowrap;
}
/* Bootstrap pinta cada celda del encabezado con su propia variable de color, que le
   gana a lo que herede de la fila. Por eso el color va acá y no en el <tr>. */
.tabla-datos thead tr { --bs-table-color: #fff; }
.tabla-datos tbody tr > td { border-bottom: 1px solid #eef1f8; }
.tabla-datos tbody tr:last-child > td { border-bottom: 0; }
/* Los montos, alineados a la derecha y con cifras del mismo ancho: así las unidades
   quedan una debajo de otra y se comparan de un vistazo. */
.tabla-datos .num,
.tabla-datos td.text-end { font-variant-numeric: tabular-nums; }
/* Banda de sección: el nivel de arriba (ACTIVOS, las actividades del flujo). */
.tabla-datos tr.f-seccion > td {
  background: #11192e; color: #fff; font-weight: 700; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .04em;
}
.tabla-datos tr.f-seccion { --bs-table-color: #fff; }
/* Banda que agrupa filas dentro de la tabla (un departamento, una sección). */
.tabla-datos tr.f-grupo > td {
  background: #eef1f8; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; color: #1b2440;
}
/* El total que cierra un bloque. */
.tabla-datos tr.f-total > td {
  background: #dceccf; font-weight: 700; border-top: 2px solid #b6d2a0;
}
.tabla-datos tr.f-sub > td { font-weight: 700; border-top: 1px solid #dde6f0; }
/* Una fila apagada (lo que ya está resuelto, lo que no aplica) sin perder legibilidad. */
.tabla-datos tbody tr.apagada > td { color: #8a94a6; }

/* ---------- «Resultados por departamento» ----------
   Ocho columnas de las que seis son cifras que se comparan de a pares: la diferencia
   contra el presupuesto y la diferencia contra el año anterior. Sin una raya entre
   medio, el ojo salta de columna al bajar por la fila y termina comparando la cifra
   equivocada. */
.tres td, .tres th { border-right: 1px solid #eef1f6; }
.tres td:last-child, .tres th:last-child { border-right: 0; }
/* Los dos bloques de comparación se separan con una raya más marcada que la de las
   columnas: dentro de cada bloque las cifras se leen juntas, entre bloques no. */
.tres td:nth-child(2), .tres th:nth-child(2),
.tres td:nth-child(5), .tres th:nth-child(5) { border-left: 2px solid #dde4ee; }
/* El resultado del departamento cierra su bloque: la raya de abajo lo separa del
   departamento siguiente, que si no arranca pegado al total del anterior. */
.tres tr.f-sub > td,
.tres tr.f-subtotal > td { border-bottom: 2px solid #cfd8e6; }

/* ---------- Rejilla de captura (presupuesto, empleados, estadísticas) ----------
   Tablas anchas donde se ESCRIBE: una fila por concepto, una columna por mes y un
   campo en cada cruce. Estaban definidas tres veces —`.emp-tbl`, `.pres-tbl` y
   `.est-tbl`—, idénticas salvo el ancho del campo, así que un arreglo había que
   repetirlo tres veces.

   La primera columna queda pegada al desplazar: con doce meses en pantalla, sin eso
   se escribe sin saber en qué renglón se está. Y el encabezado queda pegado arriba
   por lo mismo, hacia abajo. */
.rejilla { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.rejilla thead th {
  background: #11192e; color: #fff; padding: 7px 10px; font-weight: 600;
  position: sticky; top: 0; z-index: 2; text-align: center;
}
.rejilla thead th.lin { text-align: left; left: 0; z-index: 3; min-width: 230px; }
.rejilla tbody td { padding: 3px 6px; border-bottom: 1px solid #eef1f5; }
/* La celda pegada necesita fondo propio: el del <tr> no se pinta detrás de ella y el
   contenido de las otras columnas se le vería por debajo al desplazar. */
.rejilla td.lin {
  position: sticky; left: 0; background: #fff; font-weight: 500;
  padding-left: 10px; white-space: nowrap; z-index: 1;
}
.rejilla tbody tr:nth-child(even) td.lin { background: #f8fafc; }
.rejilla input {
  width: var(--ancho-campo, 68px); text-align: right; border: 1px solid #dfe3ea;
  border-radius: 5px; padding: 3px 6px; font-variant-numeric: tabular-nums;
}
.rejilla input:focus { outline: 2px solid #4a7fe0; border-color: #4a7fe0; }
.rejilla tfoot td {
  background: #11192e; color: #fff; font-weight: 700; padding: 7px 10px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.rejilla tfoot td.lin { text-align: left; left: 0; position: sticky; }
/* Variante apretada: doce columnas de montos con decimales no entran de otra forma. */
.rejilla.densa { font-size: 12px; }
.rejilla.densa thead th,
.rejilla.densa tfoot td { padding: 7px 8px; }
.rejilla.densa tbody td { padding: 2px 4px; }
.rejilla.densa input,
.rejilla.densa tfoot td {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

/* ---------- Tablas anchas navegables con el teclado (data-navegable) ----------
   Se hace clic en una celda y las flechas mueven la selección. Se resalta la fila
   entera además de la celda: en una tabla de 40 columnas, ver el número solo no dice
   a qué concepto corresponde. */
table[data-navegable] { outline: none; }

/* Las filas que llevan color propio —GOP, EBITDA, los totales, las bandas de
   título— quedan FUERA del repintado. Ese color es lo que las identifica de un
   vistazo, y el azul del resaltado se lo comía: al hacer clic, el GOP dejaba de
   ser la fila oscura y el EBITDA la dorada. En esas filas alcanza con el borde de
   la celda, que se ve igual sin tocar el fondo. */
table[data-navegable] tr.fila-activa:not(.f-gop):not(.f-ebitda):not(.f-clave):not(.f-income):not(.f-subtotal):not(.f-grupo):not(.f-header):not(.f-outlet):not(.f-pct) > td {
  background: #eef4fd !important;
}
/* La celda seleccionada se marca con un borde, no pintándola entera: rellenarla de
   azul tapa el número, que es lo que se está mirando. */
table[data-navegable] td.celda-activa {
  box-shadow: inset 0 0 0 2px #1668ff;
}
table[data-navegable] tr:not(.f-gop):not(.f-ebitda):not(.f-clave):not(.f-income):not(.f-subtotal):not(.f-grupo):not(.f-header):not(.f-outlet):not(.f-pct) > td.celda-activa {
  background: #dbe8fb !important;
  color: #11192e !important;
}

/* Raya que separa dos bloques dentro de la misma tabla. Va en las CELDAS y no en
   el <tr>: la tabla usa `border-collapse: separate` —lo necesita la columna fija— y
   con ese modo el navegador ignora los bordes puestos en la fila. */
.tabla-estado tr[data-separa] > td { border-top: 3px solid #11192e; }

/* Montos clicables (abren el modal de desglose) */
.monto-drill {
  cursor: pointer;
  border-bottom: 1px dashed #9db2cc;
}
.monto-drill:hover { color: #1b5cd6; border-bottom-color: #1b5cd6; }

/* ---------- Rol Gerente: sin menú lateral (vista de solo reportes) ---------- */
body.gerente .sidebar,
body.gerente .sidebar-overlay,
body.gerente .sidebar-toggle { display: none !important; }
body.gerente .main { margin-left: 0 !important; }
/* Full width para que las tablas anchas del reporte (P&L con YTD) se vean completas. */
body.gerente .main-content { max-width: none; margin-left: auto; margin-right: auto; }

/* El gerente NO ve advertencias/avisos operativos (cuadre, cuentas sin asignar,
   info de columnas, etc.): son para el contador, no para dirección. */
body.gerente .alert { display: none !important; }

/* Real contra presupuesto en el P&L Real: ámbar si se pasó, azul si quedó dentro.
   Se pinta solo el fondo de la celda, no el número: teñir la cifra la vuelve más
   difícil de leer, que es justo lo contrario de lo que se busca. Sin presupuesto
   cargado no se pinta: un cero no es «se cumplió», es «no hay con qué comparar». */
.tabla-estado td.sobre  { background: #fff3d6; }
.tabla-estado td.dentro { background: #e7f0fb; }
/* Una diferencia a favor o en contra. Va en el color de la LETRA y no en el fondo: la
   fila ya usa el fondo para decir qué es, y dos fondos en la misma fila competían. */
.tabla-estado td.bien { color: #1a6b3a; }
.tabla-estado td.mal  { color: #c0392b; }

/* Bandas que pliegan su sección, en cualquier tabla. Sin `user-select` el segundo
   clic —el de volver a desplegar— cae como doble clic y el navegador selecciona la
   palabra: el título queda resaltado, como si se hubiera puesto más oscuro. */
.plegable { cursor: pointer; -webkit-user-select: none; user-select: none; }
.plegable .flecha { transition: transform .12s; font-size: 9px; opacity: .75; }
.plegable.plegado .flecha { transform: rotate(-90deg); }


/* ==========================================================================
   IMPRESIÓN
   ==========================================================================
   Vale para TODAS las hojas del sistema: el reporte, los estados sueltos y las
   pantallas de configuración. Está acá y no repartida en cada plantilla porque el
   problema era justamente ese —seis copias que se desincronizaban—.

   La regla de fondo: la impresión se guía por las CLASES, igual que la pantalla. Si
   una fila es un total, se sabe porque lleva `f-clave`, no porque alguien le escribió
   un color en la etiqueta.
   ========================================================================== */
@media print {

  /* ── La página ─────────────────────────────────────────────────────────── */
  /* Apaisada: las hojas financieras tienen doce columnas de montos y en vertical se
     cortan por la mitad. */
  @page { size: A4 landscape; margin: 10mm; }

  html, body { background: #fff !important; }

  /* ── Lo que no se imprime ──────────────────────────────────────────────── */
  /* La navegación, los filtros y los botones son para operar el sistema; en papel no
     hacen nada y le roban media hoja al contenido. */
  .header, .sidebar, .sidebar-overlay, .sidebar-toggle, .breadcrumb, .page-title,
  .nav-pills, .barra-filtros, .ctrl-hoja, .no-print, .alert, .modal, .modal-backdrop,
  .btn, form[method="get"], details { display: none !important; }

  /* El menú lateral deja de reservar su espacio. */
  .main, .main-content {
    margin: 0 !important; padding: 0 !important; max-width: none !important;
    width: 100% !important;
  }
  .card { border: 0 !important; box-shadow: none !important; }
  .card-body { padding: 0 !important; }

  /* ── Color ─────────────────────────────────────────────────────────────── */
  /* El tema fuerza TODO a blanco y negro al imprimir, con una regla universal y
     `!important`. Un estado financiero sin sus bandas no se lee: el color es lo que
     separa un total de una línea. Se repone pidiéndole al navegador que imprima los
     fondos tal cual. */
  body, body * { -webkit-print-color-adjust: exact !important;
                 print-color-adjust: exact !important; }

  /* Encabezados de tabla y bandas de sección: fondo oscuro, letra blanca. */
  .tabla-estado thead th, .tabla-datos thead th, .rejilla thead th,
  .tabla-estado tr.f-header > td, .tabla-estado tr.f-header .fija,
  .tabla-datos tr.f-seccion > td, .tabla-estado tr.f-income > td,
  .tabla-estado tr.f-income .fija {
    background-color: #11192e !important; color: #fff !important;
  }
  .tabla-estado thead tr:nth-child(2) th { background-color: #2a3556 !important; }

  /* Agrupaciones y subtotales: fondo claro. */
  .tabla-estado tr.f-grupo > td, .tabla-estado tr.f-grupo .fija,
  .tabla-estado tr.f-subtotal > td, .tabla-estado tr.f-subtotal .fija,
  .tabla-datos tr.f-grupo > td, .tabla-datos tr.f-sub > td {
    background-color: #eef1f8 !important; color: #1b2440 !important;
  }
  .tabla-estado tr.f-outlet .fija { background-color: #f8fafc !important; }

  /* Totales: verde. GOP: ámbar. EBITDA: el dorado de la marca. */
  .tabla-estado tr.f-clave > td, .tabla-estado tr.f-clave .fija,
  .tabla-datos tr.f-total > td {
    background-color: #dceccf !important; color: #1b2440 !important;
  }
  .tabla-estado tr.f-gop > td { background-color: #fff3d6 !important; }
  .tabla-estado tr.f-gop .fija { background-color: #1b2440 !important; color: #fff !important; }
  .tabla-estado tr.f-ebitda > td { background-color: #e7f0fb !important; }
  .tabla-estado tr.f-ebitda .fija { background-color: #b89b5e !important; color: #fff !important; }

  /* ── Tablas ────────────────────────────────────────────────────────────── */
  /* Que quepan: sin ancho mínimo, sin scroll y con letra más chica. Una tabla con
     `min-width` se sale de la hoja y el navegador la corta sin avisar. */
  table { width: 100% !important; min-width: 0 !important; font-size: 8.5px !important; }
  [style*="min-width"] { min-width: 0 !important; }
  .table-responsive { overflow: visible !important; max-height: none !important; }
  td, th { padding: 2px 5px !important; }
  /* La primera columna deja de estar pegada: en papel no hay nada que desplazar, y
     pegada se encima con el resto al repaginar. */
  .fija { position: static !important; }

  /* El encabezado se repite en cada página y ninguna fila se parte al medio. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, img { page-break-inside: avoid; }

  /* ── Secciones ─────────────────────────────────────────────────────────── */
  .reporte-seccion { page-break-inside: avoid; }
  .salto { page-break-before: always; }
  /* La portada no arrastra un salto delante: es la primera hoja. */
  .reporte-seccion.salto:first-child { page-break-before: avoid; }

  /* ── Gráficos ──────────────────────────────────────────────────────────── */
  /* Los gráficos se dibujan midiendo el ancho de la ventana; al imprimir esa medida
     ya no vale y salen encimados con las tablas. Se ocultan: los números están
     completos en la tabla que va debajo de cada uno. */
  /* Se nombra lo que ApexCharts dibuja, y no los contenedores por prefijo: el del
     reporte entero se llama «rep», y un selector por prefijo se lo llevaba puesto. */
  .apexcharts-canvas { display: none !important; }
  #chartSnapMes, #chartSnapYtd, #chartSnapGop, #chartMezcla, #chartVsBudget,
  #repSnapMes, #repSnapYtd, #repSnapGop, #repMezcla, #repVsBudget {
    display: none !important;
  }
}