/* Estilos globales de la aplicación: tokens de color, estructura (sidebar,
   barra superior), login y los componentes compartidos por las vistas.
   Lo carga layout.html con <link> en el <head>. */

/* Inter es una fuente VARIABLE: un solo archivo lleva el eje wght
   completo (100-900, verificado en su tabla fvar). Por eso se declara
   con un RANGO de pesos y no con cuatro caras idénticas: cuatro URLs
   distintas con los mismos bytes son cuatro descargas de lo mismo.
   El formato se declara 'woff2' a secas; 'woff2-variations' está
   obsoleto y los navegadores que no lo reconocen descartan el src. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/libs/tipografias/inter.woff2') format('woff2');
}

/* No hay más @font-face. La interfaz usa una sola familia, Inter, y la
   monoespaciada del sistema para los códigos. Si algún día se quiere una
   display para los titulos, hay que bajar su .woff2 a libs/tipografias/ y
   declararla AQUÍ: apuntar a un archivo que no existe hace que el navegador
   reciba un 404 y caiga al siguiente tipo de la pila. */
/* ══════════════════════════════════════════════════════════════════
   DIRECCIÓN VISUAL — tinta azul sobre gris frío

   La paleta es la ORIGINAL de SoftContaLite: azul #2563EB sobre los
   grises fríos de la app (#F0F2F5 / #F9FAFB / #111827). Una versión
   anterior de este bloque la sustituyó por un papel cálido beige
   (#F2F0EA) con azul marino apagado; se revirtió porque el beige daba
   a toda la interfaz un tono genérico que no es el de la aplicación.
   El fondo es GRIS, no crema. Si algo vuelve a verse amarillento,
   el culpable está aquí y en ningún otro sitio.

   Tres reglas que no se rompen:
   1. El verde, el ámbar y el rojo son SIGNIFICADO, no decoración:
      cuadra, avisa, no cuadra. La marca (verde/oro/naranja del logo)
      vive solo en el logo. La interfaz habla en azul.
   2. El rayado de la tabla es ESTRUCTURA y se ve; el resaltado del
      cursor es ESTADO y se retira. Nunca al revés: una columna de
      importes se lee por sus renglones, no por dónde está el mouse.
   3. Fuera de este bloque no debe aparecer ni un hex suelto NI un
      rgba() con números. Los rgba() se escaparon de la migración
      anterior y dejaron viva la paleta vieja durante meses.

   Las plantillas de documento independiente de balanceGeneral.js,
   estadoResultado.js, cambiosPatrimonio.js y exportar*.js NO heredan
   estos tokens: conservan fondo blanco a propósito, porque son papel
   impreso y no pantalla.
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Superficies ── */
  --papel:          #F0F2F5;  /* fondo de la aplicación */
  --hoja:           #FFFFFF;  /* barra lateral, superior, tarjetas */
  --hoja-hueco:     #F9FAFB;  /* encabezado de tabla, zonas hundidas */
  --hoja-realce:    #F5F6FA;  /* hover de botón neutro y zonas inertes */

  /* ── Superficie invertida ──
     La cabecera oscura de las tablas tipo Excel (partida, plantillas).
     Va aparte de --tinta a propósito: --tinta es COLOR DE TEXTO y es más
     oscuro (#111827). Usarlo como fondo y ponerle encima --tinta-suave
     —que es un gris pensado para papel blanco— dejaba el encabezado en
     3,6:1, ilegible.

     El texto NO es el #94A3B8 del diseño anterior. Ese daba 5,7:1, que
     pasa el mínimo sobre el papel pero no basta aquí: el encabezado va a
     11 px, en MAYÚSCULAS y con letter-spacing, y en ese tamaño un gris
     medio sobre fondo oscuro se lee apagado aunque el número cumpla.
     #E2E8F0 sube a 11,8:1 y conserva el matiz frío del fondo, así que no
     chirría como haría un blanco puro. Los dos tokens son un par: el
     segundo SOLO se usa sobre el primero, nunca sobre papel. */
  --hoja-invertida:  #1E293B;  /* fondo de cabecera oscura */
  --tinta-invertida: #E2E8F0;  /* texto SOBRE --hoja-invertida — 11,8:1 */

  /* ── Tinta ── */
  --tinta:          #111827;  /* texto principal   — 15.9:1 sobre papel */
  --tinta-media:    #374151;  /* texto secundario  —  9.7:1 */
  --tinta-suave:    #6B7280;  /* texto terciario   —  4.6:1 */
  --tinta-borde:    #9CA3AF;  /* SOLO bordes e íconos, nunca texto */

  /* ── Acento: el azul de la app ── */
  --acento:         #2563EB;  /* 4.7:1 sobre papel */
  --acento-fuerte:  #1D4ED8;
  --acento-tenue:   #EFF4FF;  /* chip seleccionado, hover de botón */
  --acento-realce:  #DBEAFE;  /* fila de tabla y menú lateral bajo el
                                 cursor: más saturado que --acento-tenue
                                 a propósito, es el lavado azul del
                                 original */
  --acento-borde:   #DBEAFE;

  /* ── Sombras, velos y anillos ──
     Todo lo que antes era rgba() suelto. Derivan del azul de acento y
     de la tinta para que el halo de foco coincida con el relleno al
     que rodea. */
  --anillo-foco:    rgba(37, 99, 235, 0.08);   /* halo de --acento */
  --anillo-debe:    rgba(220, 38, 38, 0.10);   /* halo de un campo con error */
  --sombra-acento:  rgba(37, 99, 235, 0.24);   /* relieve de botón lleno */
  --sombra-aviso:   rgba(180, 83, 9, 0.30);
  --sombra-suave:   rgba(17, 24, 39, 0.05);
  --sombra-media:   rgba(17, 24, 39, 0.10);
  --sombra-fuerte:  rgba(17, 24, 39, 0.20);
  --velo:           rgba(17, 24, 39, 0.45);    /* fondo tras un modal */

  /* Blancos translúcidos: solo sobre superficies de color (cabecera
     de aviso, chip activo), nunca sobre papel. */
  --realce-blanco:       rgba(255, 255, 255, 0.15);
  --realce-blanco-medio: rgba(255, 255, 255, 0.25);
  --texto-sobre-color:   rgba(255, 255, 255, 0.82);

  /* Tinta translúcida: el reverso de --realce-blanco, para una píldora
     o un realce SOBRE papel o sobre blanco. NO confundir con --velo:
     ese es el fondo de un modal a 45 % y sobre una superficie clara
     deja un gris oscuro que se traga el texto que lleva encima. */
  --realce-tinta:        rgba(17, 24, 39, 0.06);

  /* ── Reglas ── */
  --regla:          #E5E7EB;
  --regla-suave:    #F3F4F6;
  --regla-fuerte:   #111827;  /* la doble raya */

  /* ── Semántica contable ──
     El verde y el ámbar van en el tono 700 y no en el 600 del original
     (#16A34A y #D97706): sobre blanco esos dos daban 3,0:1 y 3,1:1, por
     debajo del 4,5:1 que necesita un texto. El 700 es el mismo color un
     paso más oscuro —se lee igual de verde y de ámbar— y ambos superan
     el mínimo. Los fondos y bordes tenues sí son los del original. */
  --haber:          #15803D;  /* cuadra / positivo — 4.9:1 */
  --haber-tenue:    #F0FDF4;
  --haber-borde:    #86EFAC;
  --debe:           #DC2626;  /* no cuadra / negativo — 4.8:1 */
  --debe-tenue:     #FEF2F2;
  --debe-borde:     #FECACA;
  --aviso:          #B45309;  /* atención — 4.6:1 */
  --aviso-tenue:    #FFFBEB;
  --aviso-borde:    #FDE68A;

  /* ── Color por sección ──
     Las cinco pestañas del historial financiero necesitan cinco
     identidades distintas. El azul, el verde y el ámbar ya están arriba;
     estos dos cierran la serie y superan 4,5:1 sobre --hoja. */
  --violeta:        #6D28D9;  /* 7.1:1 */
  --violeta-tenue:  #F5F3FF;
  --violeta-borde:  #DDD6FE;
  --turquesa:       #0E7490;  /* 5.4:1 */
  --turquesa-tenue: #ECFEFF;
  --turquesa-borde: #A5F3FC;

  /* ── Tipografía ── */
  /* Los tres títulos van en Inter, no en una display. A 13, 14 y 16px
     —sus tamaños reales— una grotesca ancha no aporta carácter, solo
     rompe la unidad con el resto de la interfaz. El peso hace el trabajo. */
  --tipo-titulo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tipo-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Los códigos de cuenta son NUMÉRICOS y jerárquicos (1 > 11 > 111 >
     11101 > 1110301): no llevan letras, así que no hay 0/O ni 1/l que
     desambiguar y una mono de pago no gana nada. Consolas viene en todo
     Windows; el resto de la pila cubre macOS y Linux. */
  --tipo-codigo: 'Consolas', 'SF Mono', 'Menlo', 'DejaVu Sans Mono', monospace;

  /* Importes: Inter con cifras tabulares. NUNCA una monoespaciada:
     las columnas de montos deben alinearse con el resto de la interfaz. */
  --tipo-importe: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: var(--tipo-texto);
  background: var(--papel);
  color: var(--tinta);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════
   PISO DE ACCESIBILIDAD

   Un contador trabaja con las manos en el teclado: tabular por la app
   tiene que decir SIEMPRE dónde está el cursor. Antes había 91
   `outline: none` y ningún reemplazo, así que en botones, enlaces y
   chips el foco era literalmente invisible.

   El anillo va como `outline` y no como `box-shadow` para que ningún
   componente con sombra propia lo pise, y con `outline-offset` para que
   se despegue del relleno: así un botón lleno de azul queda rodeado
   primero de papel y luego de tinta, y se ve sobre cualquier fondo.

   Es `:focus-visible`, no `:focus`: al hacer clic con el mouse no se
   dibuja nada... salvo en los campos de texto, donde el navegador
   considera SIEMPRE visible el foco porque se espera que escribas. Por
   eso los campos se excluyen más abajo: si no, un clic normal encendía
   tres aros azules concéntricos a la vez.
   ══════════════════════════════════════════════════════════════════ */
/* El color y la separación del anillo se fijan en TODO el documento, no
   solo al enfocar. 52 reglas de la app usan `transition: all`, que también
   anima el outline: si el color y el offset solo apareciesen con el foco,
   el anillo tardaría 150 ms en llegar a su sitio y se le vería el titubeo
   al tabular rápido. Fijándolos aquí no queda nada que animar. Mientras
   outline-style sea `none` esto no dibuja absolutamente nada. */
*,
*::before,
*::after {
  outline-color: var(--acento);
  outline-offset: 2px;
}

/* Sin `border-radius` aquí: los navegadores actuales ya dibujan el outline
   siguiendo el redondeo del propio elemento. Declararlo deformaba el
   elemento enfocado —no el anillo—, y una píldora de 20 px de radio se
   volvía casi cuadrada justo al llegarle el foco por teclado. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}
/* Los campos de texto NO llevan el anillo: ya se anuncian solos, con el
   borde pasando a --acento (de #E5E7EB a #2563EB, un salto que se ve) y
   el halo del 8 %. Encima de eso el outline sólido a 2 px de distancia
   dibujaba un TERCER aro azul concéntrico, y un formulario entero se
   encendía al tabular. Las casillas, los radios y el selector de archivo
   sí lo conservan: esos no cambian de borde al enfocarse y sin el anillo
   se quedarían sin ninguna señal.

   El `border-color` va aquí como PISO, no como adorno: de los 40 <select>
   de la app solo uno tiene clase propia, el resto se pinta por reglas del
   padre (.form-field, .filtro-grupo, .ppto-fg…). Si alguno se escapa de
   todas ellas, sin esta línea se quedaría enfocado sin señal ninguna al
   haberle quitado el outline. Los que sí tienen regla propia declaran
   este mismo color, así que no cambia nada visible; y el rojo del campo
   de confirmación de borrado va en un `style` en línea, que gana igual. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--acento);
}

/* Sobre un relleno de color propio el azul de tinta se confunde; ahí el
   anillo toma el color del elemento, que sí contrasta con el papel. */
.btn-volver:focus-visible { outline-color: var(--aviso); }

/* Respeta a quien pidió menos movimiento en su sistema. No se apaga la
   animación (eso rompe transiciones que sí comunican), se acorta a algo
   instantáneo. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Pantalla de carga inicial (oculta el "salto" de fuente al cargar) ── */
#boot-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--papel);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.25s ease;
}
#boot-loading.oculto {
  opacity: 0;
  pointer-events: none;
}
#boot-loading .boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--acento-borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}
@keyframes boot-spin {
  to { transform: rotate(360deg); }
}

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── Sidebar overlay (móvil) ── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--velo);
  z-index: 200;
  backdrop-filter: blur(2px);
}

.sidebar-overlay.visible {
  display: block;
}

/* ── Sidebar ── */
.sidebar {
  width: 228px;
  background: var(--hoja);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* margin-left se anima para el colapso en escritorio: el transform solo
     no sirve ahí porque el sidebar está en el flujo y dejaría el hueco. */
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1),
              margin-left 0.25s cubic-bezier(.4, 0, .2, 1);
  z-index: 201;
  position: relative;
  border-right: 1px solid var(--regla);
}

/* Brand */
.brand {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--papel);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}

.brand-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--sombra-acento);
}

.brand-icon i {
  font-size: 17px;
  color: var(--hoja);
}

.brand-text h1 {
  font-size: 13px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brand-text p {
  font-size: 10px;
  color: var(--tinta-suave);
  margin-top: 1px;
}

.sidebar-close-btn {
  display: none;
  background: none;
  border: none;
  color: var(--tinta-suave);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  font-size: 17px;
  line-height: 1;
}

.sidebar-close-btn:hover {
  color: var(--tinta-suave);
  background: var(--hoja-realce);
}

/* Nav */
.nav {
  padding: 10px 10px;
  flex: 1;
  overflow-y: auto;
}

.nav {
  scrollbar-width: thin;
  scrollbar-color: var(--tinta-suave) transparent;
}

.nav::-webkit-scrollbar {
  width: 6px;
}

.nav::-webkit-scrollbar-thumb {
  background: var(--tinta-suave);
  border-radius: 3px;
}

.nav-label {
  font-size: 9.5px;
  color: var(--tinta-suave);
  padding: 10px 8px 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-item {
  /* Es un <button>. Sin estos reinicios heredaría el fondo gris, el
     borde, el centrado y la fuente del sistema que el navegador le
     aplica por defecto. */
  width: 100%;
  text-align: left;
  background: none;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;

  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta-suave);
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  margin-bottom: 1px;
  user-select: none;
}

.nav-item i {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--tinta-suave);
  transition: color 0.12s;
}

/* Hover en lavado azul, no en gris: dice «aquí puedes ir» en el mismo
   idioma que el ítem activo, un escalón más tenue. Va en --acento-realce
   y no en --acento-tenue, que (#EFF4FF) apenas se distingue del blanco
   de la barra. El texto pasa a --acento-fuerte porque --acento sobre
   --acento-realce da 4,2:1, bajo el mínimo; el fuerte da 5,5:1.
   Los íconos con color propio (los ítems raíz) lo conservan.
   Solo con puntero real: en táctil el :hover se queda pegado en el último
   botón tocado, y un desplegable lavado de azul parecería seleccionado. */
@media (hover: hover) {
  .nav-item:hover {
    background: var(--acento-realce);
    color: var(--acento-fuerte);
  }

  .nav-item:hover i:not([style*="color"]) {
    color: var(--acento-fuerte);
  }
}

/* Activo: relleno azul lleno y texto blanco (5,2:1), igual que .btn.
   Va después del hover a propósito: con la misma especificidad, el
   activo gana aunque el mouse esté encima. */
.nav-item.active {
  background: var(--acento);
  color: var(--hoja);
  font-weight: 600;
  border-color: var(--acento);
  box-shadow: 0 1px 3px var(--sombra-acento);
}

@media (hover: hover) {
  .nav-item.active:hover {
    background: var(--acento-fuerte);
    border-color: var(--acento-fuerte);
  }
}

/* Todos los íconos del activo en blanco, también los de color propio:
   un ícono azul sobre el relleno azul desaparece. El !important es
   obligado porque ese color va en un style en línea. */
.nav-item.active i {
  color: var(--hoja) !important;
}

.nav-sub {
  font-size: 12px !important;
  padding: 7px 10px !important;
}

/* Sidebar footer */
.sidebar-foot {
  padding: 10px 14px 14px;
  border-top: 1px solid var(--papel);
}

.sidebar-foot p {
  font-size: 10px;
  color: var(--tinta-suave);
  line-height: 1.7;
}

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ── Topbar ── */
.topbar {
  padding: 0 22px;
  background: var(--hoja);
  border-bottom: 1px solid var(--regla);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 54px;
}

/* Visible en todos los tamaños: en móvil abre el menú flotante,
   en escritorio oculta/muestra la barra lateral. */
.hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tinta-suave);
  padding: 6px;
  border-radius: 6px;
  font-size: 21px;
  line-height: 1;
  flex-shrink: 0;
}

.hamburger-btn:hover {
  background: var(--hoja-realce);
  color: var(--tinta);
}

.topbar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

.selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.selector-label {
  font-size: 11.5px;
  color: var(--tinta-suave);
  white-space: nowrap;
  font-weight: 500;
}

.emp-select {
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja-hueco);
  color: var(--tinta-media);
  cursor: text;
  min-width: 145px;
  max-width: 210px;
  
  font-weight: 500;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.emp-select:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--anillo-foco);
  background: var(--hoja);
}

/* ── Combobox de búsqueda de empresa (topbar) ──
   Mismo patrón de posicionamiento fixed que los dropdowns de búsqueda de
   cuentas (partida, estadoResultado, balanceGeneral, etc.), ver docs/reglas.md. */
.emp-combo-wrap {
  position: relative;
}

.emp-combo-drop {
  position: fixed;
  z-index: 9999;
  background: var(--hoja);
  border: 1px solid var(--regla);
  border-radius: 9px;
  min-width: 260px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 16px var(--sombra-media);
}

.emp-combo-option {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--tinta);
  border-bottom: 1px solid var(--hoja-realce);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.emp-combo-option:last-child { border-bottom: none; }
.emp-combo-option:hover { background: var(--acento-tenue); }
.emp-combo-option.emp-combo-activa { background: var(--acento-tenue); font-weight: 600; }
.emp-combo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-combo-sin-seleccion { color: var(--tinta-suave); font-style: italic; }
.emp-combo-vacio { padding: 10px 12px; font-size: 12px; color: var(--tinta-suave); text-align: center; }

/* ── Info usuario topbar ── */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Un solo control. Antes el avatar y el nombre eran dos <div> contiguos
   con el mismo onclick y el mismo destino: dos paradas de teclado para
   una sola acción, y ninguna de las dos alcanzable. */
.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 8px 3px 3px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s, border-color 0.15s;
}

.topbar-user-btn:hover {
  background: var(--hoja-realce);
  border-color: var(--regla);
}

.topbar-user-btn:hover .topbar-user-avatar {
  opacity: 0.88;
}

.topbar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--hoja);
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.topbar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: left;
}

.topbar-user-nombre {
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-user-rol {
  font-size: 10px;
  color: var(--tinta-suave);
  font-weight: 500;
}

.topbar-user-rol.admin {
  color: var(--acento);
  font-weight: 600;
}

.btn-cerrar-sesion {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja);
  cursor: pointer;
  font-size: 12px;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: all 0.15s;
  flex-shrink: 0;
  font-weight: 500;
  font-family: inherit;
}

.btn-cerrar-sesion:hover {
  background: var(--debe-tenue);
  border-color: var(--debe-borde);
  color: var(--debe);
}

.btn-cerrar-sesion i {
  font-size: 14px;
}

.topbar-sep {
  width: 1px;
  height: 24px;
  background: var(--regla);
  flex-shrink: 0;
}

/* ── Content ── */
.content {
  flex: 1;
  overflow-y: auto;
  padding: 28px 30px;
  background: var(--papel);
  scrollbar-width: thin;
  scrollbar-color: var(--tinta-suave) transparent;
}

.content::-webkit-scrollbar {
  width: 8px;
}

.content::-webkit-scrollbar-thumb {
  background: var(--tinta-suave);
  border-radius: 4px;
}

/* ── Tipografía de página ── */
.page-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.page-sub {
  font-size: 12.5px;
  color: var(--tinta-suave);
  margin-top: 3px;
}

/* ── Botón principal ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--acento);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--hoja);
  letter-spacing: -0.01em;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px var(--sombra-acento);
}

.btn:hover {
  background: var(--acento-fuerte);
  box-shadow: 0 3px 8px var(--sombra-acento);
}

/* ── Botón secundario ── */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja);
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta-media);
  font-weight: 500;
  font-family: inherit;
  transition: all 0.15s;
}

.btn-outline:hover {
  background: var(--hoja-hueco);
  border-color: var(--regla);
}

/* ── Botón de regreso del drill-down (balanza → mayor → diario) ──
   Ámbar propio: no compite con el azul de la acción principal de la
   página ni con el verde de guardar, y se ve de inmediato al llegar. */
.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--aviso);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--hoja);
  letter-spacing: -0.01em;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px var(--sombra-aviso);
}

.btn-volver:hover {
  background: var(--aviso);
  box-shadow: 0 3px 8px var(--sombra-aviso);
}

/* ── Modal ── */
.overlay {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.modal {
  background: var(--hoja);
  border: 1px solid var(--regla);
  border-radius: 14px;
  padding: 28px;
  width: 460px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px var(--sombra-media), 0 2px 8px var(--sombra-suave);
  animation: slideIn 0.18s cubic-bezier(.4, 0, .2, 1);
}

.modal h2 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--tinta);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--papel);
  letter-spacing: -0.02em;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field {
  margin-bottom: 14px;
}

.form-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.form-field input,
.form-field select {
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja-hueco);
  color: var(--tinta);
  
  font-family: inherit;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--acento);
  background: var(--hoja);
  box-shadow: 0 0 0 3px var(--anillo-foco);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--papel);
}

.btn-cancel {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja-hueco);
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta-suave);
  font-weight: 500;
  font-family: inherit;
}

.btn-cancel:hover {
  background: var(--hoja-realce);
}

.btn-save {
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  background: var(--acento);
  cursor: pointer;
  font-size: 13px;
  color: var(--hoja);
  font-weight: 600;
  font-family: inherit;
  box-shadow: 0 1px 3px var(--sombra-acento);
  transition: background 0.15s, box-shadow 0.15s;
}

.btn-save:hover {
  background: var(--acento-fuerte);
  box-shadow: 0 3px 8px var(--sombra-acento);
}

/* ── Empty state ── */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--tinta-suave);
  font-size: 13px;
  gap: 10px;
}

.empty i {
  font-size: 36px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PATRÓN COMPARTIDO — barra de filtros, tabla de datos y paginación
   Lo usan las vistas diario / mayor / balanza.
   Las reglas de tabla y el responsive de filtros son OPT-IN por clase
   (.tabla-datos en la tabla, .filtros-adaptables en la barra) para no
   alcanzar las tablas de los modales ni las vistas con diseño propio
   (catálogo, usuarios, plantillas…).
   Nota: .table-wrap, .empty y .no-sel se quedan en cada vista a propósito.
   .empty ya existe arriba con otros valores, y hay vistas que usan
   .table-wrap sin declararlo: subirlas aquí las cambiaría de aspecto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra de filtros ── */
.filtros-bar {
  background: var(--hoja);
  border: 1px solid var(--regla);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filtro-grupo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

/* .filtro-etiqueta: mismo aspecto que el label, para filtros cuyo control no
   es un input/select (p. ej. el stepper de niveles de la balanza) */
.filtro-grupo label,
.filtro-grupo .filtro-etiqueta {
  font-size: 10px;
  font-weight: 700;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filtro-grupo input,
.filtro-grupo select {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja-hueco);
  color: var(--tinta);
  
  font-family: inherit;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}

.filtro-grupo input:focus,
.filtro-grupo select:focus {
  border-color: var(--acento);
  background: var(--hoja);
  box-shadow: 0 0 0 3px var(--anillo-foco);
}

.filtro-grupo input[type=date] { width: 140px; }
.filtro-grupo input[type=number] { width: 80px; text-align: center; }
.filtro-grupo select { width: 100%; min-width: 140px; }

/* Grupo que contiene botones en lugar de un campo */
.filtro-grupo.filtro-acciones {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.filtro-grupo.filtro-acciones > * { white-space: nowrap; }

.btn-reset {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--tinta-suave);
  font-family: inherit;
  transition: all 0.15s;
}

.btn-reset:hover {
  background: var(--hoja-hueco);
  color: var(--tinta);
}

/* ── Pestañas (barra compartida) ──
   Estilo unificado en configuración, administración e historial financiero:
   esquinas superiores redondeadas y fondo gris claro al pasar el mouse.
   Cada botón puede fijar --tab-color en línea (style="--tab-color:var(--haber)")
   cuando la pestaña necesita un acento propio; por defecto usa el azul. */
.tabs-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--regla);
}

.tab-btn {
  --tab-color: var(--acento);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--tinta-suave);
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, background .15s, border-color .15s;
}

.tab-btn:hover { color: var(--tab-color); background: var(--hoja-hueco); }
.tab-btn.active {
  color: var(--tab-color);
  background: var(--hoja-hueco);
  border-bottom-color: var(--tab-color);
}
.tab-btn i { font-size: 15px; }

/* Contador opcional dentro de la pestaña (historial financiero) */
.tab-btn .tab-badge {
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  background: var(--hoja-realce);
  color: var(--tinta-suave);
  transition: background .15s, color .15s;
}
.tab-btn.active .tab-badge {
  background: var(--tab-badge-bg, var(--acento-tenue));
  color: var(--tab-color);
}

/* ── Tabla de datos ── */
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-datos thead tr { background: var(--hoja-hueco); border-bottom: 1px solid var(--regla); }

.tabla-datos th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  color: var(--tinta-suave);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* El renglón va en --regla (#E5E7EB) y no en --hoja-realce (#F5F6FA):
   este último sobre blanco da 1,05:1 y el rayado sencillamente no se
   veía, y un libro contable se lee renglón a renglón. */
.tabla-datos td { padding: 10px 12px; color: var(--tinta-media); border-top: 1px solid var(--regla); }
.tabla-datos td.mono { white-space: nowrap; }
.tabla-datos .monto { text-align: right; font-family: var(--tipo-importe); font-variant-numeric: tabular-nums; font-size: 13px; }
/* Importes negativos: va calificado con `td` para ganarle al color base de
   `.tabla-datos td`, que si no lo pinta de gris. */
.tabla-datos td.monto-neg { color: var(--debe); }
.tabla-datos .mono { font-family: var(--tipo-codigo); font-size: 12px; color: var(--tinta-suave); font-weight: 600; }
.tabla-datos .cod-cuenta { font-family: var(--tipo-codigo); font-size: 12px; color: var(--acento); font-weight: 600; }
/* La columna descriptiva absorbe el espacio sobrante */
.tabla-datos .td-concepto,
.tabla-datos .td-cuenta { min-width: 200px; }

/* ── Fila resaltada al pasar el mouse ──
   Lavado de acento MUY tenue en la fila + barra lateral izquierda para
   ubicar de un vistazo el registro sobre el que se está trabajando. El
   peso lo carga la barra, no el fondo: antes la fila se inundaba de
   --acento-borde y el hover era lo más fuerte de la pantalla, por encima
   del propio rayado de la tabla. El indicador va
   como box-shadow interno y no como border para no desplazar el contenido.
   Solo en dispositivos con puntero real: en táctil el :hover se queda
   "pegado" en la última fila tocada.
   .fila-no-dato marca las filas que no son registros (saldo anterior,
   totales): esas no se resaltan. */
@media (hover: hover) {
  .tabla-datos tbody tr { transition: background-color .12s ease; }

  .tabla-datos tbody tr:not(.fila-no-dato):hover td {
    background: var(--acento-realce);
    color: var(--tinta);
  }

  .tabla-datos tbody tr:not(.fila-no-dato):hover td:first-child {
    box-shadow: inset 3px 0 0 var(--acento);
  }

  .tabla-datos tbody tr:not(.fila-no-dato):hover .mono,
  .tabla-datos tbody tr:not(.fila-no-dato):hover .cod-cuenta { color: var(--acento-fuerte); }

  /* Los importes negativos conservan su rojo sobre el azul */
  .tabla-datos tbody tr:not(.fila-no-dato):hover td.monto-neg { color: var(--debe); }

  /* Las etiquetas de tipo y centro pasan a fondo blanco para no perder
     su borde contra el lavado de la fila. */
  .tabla-datos tbody tr:hover .badge-tipo,
  .tabla-datos tbody tr:hover .badge-centro { background: var(--hoja) !important; }
}

/* ── Paginación ── */
.paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
  padding: 12px 0;
}

.pg-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--regla);
  background: var(--hoja);
  cursor: pointer;
  font-size: 13px;
  color: var(--tinta-media);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s;
}

.pg-btn:hover:not(:disabled) { background: var(--acento-tenue); border-color: var(--acento); color: var(--acento); }
.pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pg-activa { background: var(--acento) !important; border-color: var(--acento) !important; color: var(--hoja) !important; font-weight: 700; }
.pg-dots { padding: 0 4px; color: var(--tinta-suave); font-size: 14px; }

/* ── Responsive del patrón compartido ── */
@media (max-width: 900px) {
  .filtros-adaptables { padding: 12px 14px; gap: 10px; }
  /* Los campos comparten el ancho disponible en lugar de quedar fijos */
  .filtros-adaptables .filtro-grupo { flex: 1 1 150px; }
  .filtros-adaptables .filtro-grupo input,
  .filtros-adaptables .filtro-grupo select,
  .filtros-adaptables .filtro-grupo input[type=date],
  .filtros-adaptables .filtro-grupo input[type=number],
  .filtros-adaptables .filtro-grupo input[type=text] { width: 100%; }
  .filtros-adaptables .filtro-grupo select { min-width: 0; }
  .filtros-adaptables .filtro-grupo.filtro-acciones { flex: 1 1 100%; }
  .filtros-adaptables .filtro-grupo.filtro-acciones .btn,
  .filtros-adaptables .filtro-grupo.filtro-acciones .btn-outline,
  .filtros-adaptables .filtro-grupo.filtro-acciones .btn-reset { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 640px) {
  .filtros-adaptables {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    align-items: end;
  }
  .filtros-adaptables .filtro-grupo { flex: none; }
  .filtros-adaptables .filtro-grupo.filtro-acciones { grid-column: 1 / -1; }
  .paginacion { gap: 3px; margin-top: 12px; }
  .pg-btn { min-width: 30px; height: 30px; padding: 0 6px; font-size: 12px; }
}

@media (max-width: 420px) {
  .filtros-adaptables { grid-template-columns: 1fr 1fr; }
  /* Evita el zoom automático de iOS al enfocar un campo */
  .filtros-adaptables .filtro-grupo input,
  .filtros-adaptables .filtro-grupo select { font-size: 16px; padding: 7px 8px; }
  .filtros-adaptables .filtro-grupo label,
  .filtros-adaptables .filtro-grupo .filtro-etiqueta { font-size: 9.5px; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ── Aviso de descarga completa (solo programa de escritorio) ──
   En el navegador lo hace su propia burbuja de descargas; Electron no la
   tiene. Abajo a la derecha para no chocar con los toast, que van arriba. */
.aviso-descarga {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 12px 12px 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--regla);
  background: var(--hoja);
  color: var(--tinta);
  font-size: 13px;
  box-shadow: 0 4px 16px var(--sombra-media), 0 1px 4px var(--sombra-suave);
  animation: slideIn 0.2s ease;
}

.aviso-descarga > i { font-size: 22px; color: var(--haber); flex-shrink: 0; margin-top: 1px; }
.aviso-descarga-texto { flex: 1; min-width: 0; }
.aviso-descarga-titulo { font-weight: 600; }

.aviso-descarga-nombre {
  font-size: 12px;
  color: var(--tinta-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aviso-descarga-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.aviso-descarga-acciones .btn,
.aviso-descarga-acciones .btn-outline { padding: 5px 10px; font-size: 12px; }

.aviso-descarga-cerrar {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--tinta-suave);
  font-size: 16px;
  line-height: 1;
}

.aviso-descarga-cerrar:hover { color: var(--tinta); }

@media (max-width: 640px) {
  .aviso-descarga { right: 16px; bottom: 16px; }
}

/* ── Pantalla de Login ── */
#login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--papel);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overflow-x: hidden;
}

#login-screen.hidden {
  display: none;
}

.login-container {
  width: 940px;
  max-width: 100%;
  min-height: 560px;
  display: flex;
  background: var(--hoja);
  border-radius: 28px;
  box-shadow: 0 24px 60px var(--sombra-media), 0 4px 20px var(--sombra-suave);
  overflow: hidden;
  position: relative;
  z-index: 2;
  animation: slideIn 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* ── Columna izquierda — marca ── */
.login-left {
  width: 46%;
  flex-shrink: 0;
  padding: 44px 44px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--hoja-realce);
  border-right: 1px solid var(--papel);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
  min-height: 52px;
}

.login-brand-logo {
  width: 52px;
  height: 52px;
  background: var(--hoja);
  border: 1px solid var(--hoja-realce);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px var(--sombra-suave);
}

.login-brand-logo img {
  width: 100%;
  height: auto;
  display: block;
}

.login-brand-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--tinta);
  letter-spacing: -0.01em;
}

.login-left h1 {
  font-size: 27px;
  font-weight: 800;
  color: var(--tinta);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.login-left-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta-suave);
  margin-bottom: 30px;
  max-width: 320px;
}

.login-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tinta-media);
}

.login-feature .check {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--acento-tenue);
  color: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.login-left-copy {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 32px;
}

/* ── Columna derecha — formulario ── */
.login-right {
  flex: 1;
  background: var(--hoja);
  padding: 48px 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form-wrap {
  width: 100%;
}

/* Oculto en escritorio (ya se ve el logo en la columna izquierda);
   se muestra solo en móvil, cuando esa columna se oculta. */
.login-logo-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.login-logo-mobile img {
  width: 56px;
  height: 56px;
  display: block;
}

.login-logo-mobile-name {
  font-weight: 700;
  font-size: 17px;
  color: var(--tinta);
  letter-spacing: -0.01em;
}

.login-right h2 {
  font-size: 23px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.login-right .login-sub {
  color: var(--tinta-suave);
  font-size: 13px;
  margin-bottom: 30px;
}

.login-field {
  margin-bottom: 18px;
}

.login-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tinta-media);
  margin-bottom: 7px;
}

.login-field input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--regla);
  border-radius: 10px;
  background: var(--hoja);
  font-size: 14px;
  color: var(--tinta);
  font-family: inherit;
  
  transition: border-color 0.15s, box-shadow 0.15s;
}

.login-field input::placeholder {
  color: var(--tinta-suave);
}

.login-field input:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 4px var(--anillo-foco);
}

.login-btn {
  width: 100%;
  padding: 0.85rem;
  background: var(--acento);
  color: var(--hoja);
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 14px;
  font-family: inherit;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 20px var(--sombra-acento);
}

.login-btn:hover {
  background: var(--acento-fuerte);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px var(--sombra-acento);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.login-error {
  background: var(--debe-tenue);
  color: var(--debe);
  border: 1px solid var(--debe-borde);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-size: 0.8rem;
  margin-top: 0.9rem;
  display: none;
}

.login-error.visible {
  display: block;
}

/* Mismo recuadro en verde: licencia cargada (programa de escritorio) */
.login-error.ok {
  background: var(--haber-tenue);
  color: var(--haber);
  border-color: var(--haber-borde);
}

.login-footer {
  margin-top: 26px;
  font-size: 11.5px;
  color: var(--tinta-suave);
  text-align: center;
}

.login-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 6px;
  background: none;
  border: none;
  color: var(--acento);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

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

/* Franja bajo la barra superior para quien trabaja como colaborador:
   de quién es la cuenta y cuándo vence su acceso. Ámbar cuando faltan pocos días. */
.colab-banner {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 22px;
  font-size: 12.5px;
  color: var(--acento);
  background: var(--acento-tenue);
  border-bottom: 1px solid var(--acento-borde);
}

.colab-banner.pronto {
  color: var(--aviso);
  background: var(--aviso-tenue);
  border-bottom-color: var(--aviso-borde);
}

.colab-banner strong {
  font-weight: 700;
}

@media (max-width: 900px) {
  .login-container {
    width: 420px;
    max-width: 100%;
    min-height: 0;
  }
  .login-left {
    display: none;
  }
  .login-right {
    padding: 40px 36px;
  }
  .login-logo-mobile {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
  }
  .login-right h2,
  .login-right .login-sub {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .login-container {
    border-radius: 20px;
  }
  .login-right {
    padding: 32px 24px;
  }
  .login-right h2 {
    font-size: 20px;
  }
  .login-field input {
    font-size: 16px; /* evita el zoom automático de iOS al enfocar el input */
  }
}

/* ── Colapso de la barra lateral (escritorio ≥ 641px) ──
   Se limita a este rango para no interferir con el menú flotante de móvil,
   que se maneja aparte con la clase .open y su overlay.
   El margen negativo saca el sidebar del flujo y el contenido se expande. */
@media (min-width: 641px) {
  .app.sidebar-oculta .sidebar {
    margin-left: -228px;
  }
}

/* ── Responsive tablet ≤ 900px ── */
@media (max-width: 900px) {
  .selector-label {
    display: none;
  }

  .topbar-user-info {
    display: none;
  }

  .topbar-sep {
    display: none;
  }

  .emp-select {
    min-width: 120px;
    max-width: 160px;
    font-size: 12px;
  }
}

/* ── Responsive móvil ≤ 640px ── */
@media (max-width: 640px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 201;
    box-shadow: 4px 0 20px var(--sombra-media);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topbar {
    padding: 0 12px;
    gap: 8px;
  }

  .topbar-title {
    font-size: 13px;
  }

  .content {
    padding: 14px;
  }

  .emp-select {
    min-width: 90px;
    max-width: 120px;
    font-size: 12px;
    padding: 5px 6px;
  }

  #selector-anio {
    width: 64px !important;
    font-size: 12px !important;
    padding: 5px 4px !important;
  }

  .modal {
    padding: 20px 16px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .topbar-user-avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .btn-cerrar-sesion span {
    display: none;
  }

  .btn-cerrar-sesion {
    padding: 5px 8px;
  }
}

/* ── Modal Mi Cuenta ── */
.mi-cuenta-overlay {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.mi-cuenta-overlay.hidden {
  display: none;
}

.mi-cuenta-modal {
  background: var(--hoja);
  border-radius: 14px;
  padding: 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 32px var(--sombra-media), 0 2px 8px var(--sombra-suave);
  animation: slideIn 0.18s cubic-bezier(.4, 0, .2, 1);
  border: 1px solid var(--regla);
}

.mi-cuenta-modal h2 {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.mi-cuenta-modal .mc-sub {
  font-size: 12px;
  color: var(--tinta-suave);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--papel);
}

.mc-field {
  margin-bottom: 14px;
}

.mc-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--tinta-suave);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mc-field input {
  width: 100%;
  padding: 8px 11px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid var(--regla);
  background: var(--hoja-hueco);
  color: var(--tinta);
  
  font-family: inherit;
  font-weight: 500;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.mc-field input:focus {
  border-color: var(--acento);
  background: var(--hoja);
  box-shadow: 0 0 0 3px var(--anillo-foco);
}

.mc-field input.error {
  border-color: var(--debe);
  background: var(--debe-tenue);
}

.mc-hint {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-top: 4px;
}

.mc-strength {
  height: 3px;
  border-radius: 2px;
  margin-top: 6px;
  transition: all .3s;
}

.mc-strength.weak {
  background: var(--debe);
  width: 33%;
}

.mc-strength.medium {
  background: var(--aviso);
  width: 66%;
}

.mc-strength.strong {
  background: var(--haber);
  width: 100%;
}

.mc-strength-label {
  font-size: 10px;
  margin-top: 3px;
  font-weight: 600;
}

.mc-strength-label.weak {
  color: var(--debe);
}

.mc-strength-label.medium {
  color: var(--aviso);
}

.mc-strength-label.strong {
  color: var(--haber);
}

.mc-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--papel);
}

/* ── Modal Anuncio ── */
.anuncio-overlay {
  position: fixed;
  inset: 0;
  background: var(--velo);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9500;
  padding: 16px;
  backdrop-filter: blur(3px);
}

.anuncio-overlay.hidden {
  display: none;
}

.anuncio-modal {
  background: var(--hoja);
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  padding: 0;
  box-shadow: 0 8px 32px var(--sombra-media), 0 2px 8px var(--sombra-suave);
  animation: slideIn 0.2s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  border: 1px solid var(--regla);
}

.anuncio-header {
  background: var(--acento);
  padding: 20px 24px 16px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.anuncio-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--realce-blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--hoja);
  flex-shrink: 0;
  border: 1px solid var(--realce-blanco);
}

.anuncio-header-text {
  flex: 1;
}

.anuncio-header-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--acento);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 5px;
}

.anuncio-titulo {
  font-size: 16px;
  font-weight: 700;
  color: var(--hoja);
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.anuncio-body {
  padding: 22px 24px 24px;
}

.anuncio-mensaje {
  font-size: 14px;
  color: var(--tinta-media);
  line-height: 1.65;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.anuncio-fecha {
  font-size: 11px;
  color: var(--tinta-suave);
  margin-bottom: 18px;
}

.anuncio-footer {
  display: flex;
  justify-content: flex-end;
}

.anuncio-btn-ok {
  padding: 9px 24px;
  border-radius: 8px;
  border: none;
  background: var(--acento);
  color: var(--hoja);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px var(--sombra-acento);
}

.anuncio-btn-ok:hover {
  background: var(--acento-fuerte);
  box-shadow: 0 3px 8px var(--sombra-acento);
}
/* ── Tipografía de «Libro Mayor» ────────────────────────────────────
   Archivo aparece solo en los tres títulos que orientan al usuario:
   la marca, la barra superior y el título de página. Más allá de eso
   la interfaz habla en Inter; el display se gasta con cuentagotas. */
.brand-text h1,
.topbar-title,
.page-title {
  font-family: var(--tipo-titulo);
  letter-spacing: -0.015em;
}

/* Cifras tabulares en todo lo que sea dinero, aunque la celda no pase
   por .monto: los dígitos tienen que alinearse columna con columna, y
   una columna de importes que baila es un error de lectura. */
.monto,
[class*="monto"],
[class*="importe"],
.tr-totales td,
.totales-row td {
  font-variant-numeric: tabular-nums;
}

/* Los códigos de cuenta, folios y NIT son identificadores, no prosa:
   ancho fijo para que se comparen de un vistazo. */
.mono,
.cod-cuenta,
[class*="codigo"] {
  font-variant-numeric: tabular-nums;
}