/* ============================================================
   SISTEMA CONTABLE - HOJA DE ESTILOS
   Paleta: Grafito Moderno (fija). Fondo papel, gris grafito
   profundo, acento azul. Cifras en monoespaciada para que
   columnas de Debe/Haber alineen como en un libro real.
   ============================================================ */

:root {
    --papel: #EEF0F2;
    --papel-linea: #DCE0E4;
    --tinta: #2B2E33;
    --tinta-fin: #17181B;
    --tinta-suave: #4A4F58;
    --tinta-clara: #6B7280;
    /* Colores de la marca (tomados del logo Nicarao Servicios): el azul del
       globo, oscurecido para que el texto blanco se lea bien (contraste 5.6:1),
       y el morado del nombre. Se usan en el fondo de titulos y encabezados. */
    --marca: #1B6E9C;
    --marca-fuerte: #14577D;
    --marca-morado: #482880;
    --dorado: #3B82F6;
    --dorado-suave: #6BA3FF;
    --dorado-tenue: #E3EDFF;
    --rojo-debe: #8B3A3A;
    --verde-ok: #1E8E4E;
    --verde-solido: #219653;
    --verde-solido-hover: #1B7C46;
    --rojo-solido: #D64545;
    --rojo-solido-hover: #C13636;
    --texto: #2A2A26;
    --texto-tenue: #6B6558;
    --blanco: #FFFFFF;
    --sombra-sm: 0 1px 2px rgba(22, 35, 63, 0.06);
    --sombra: 0 2px 8px rgba(22, 35, 63, 0.08), 0 1px 2px rgba(22, 35, 63, 0.05);
    --sombra-lg: 0 8px 28px rgba(22, 35, 63, 0.14), 0 2px 6px rgba(22, 35, 63, 0.08);
    --radio: 6px;
    --radio-sm: 4px;
    --transicion: 150ms ease;
    /* Tipografia: solo fuentes que ya trae cada sistema (nada se descarga),
       para que el texto se vea siempre igual de claro y nunca quede en blanco. */
    --font-interfaz: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    --font-cuerpo: var(--font-interfaz);
    --font-cifra: var(--font-interfaz); /* las cifras usan numeros de ancho uniforme (ver .num/.cifra) */

    /* Variables "adaptables": en tema claro apuntan a los mismos
       colores de siempre (cero cambio visual), pero en tema oscuro
       (ver bloque [data-tema="oscuro"] al final del archivo) se
       redefinen. Se usan donde el mismo color hacia doble papel
       (ej. texto Y fondo) y por eso no se podia oscurecer directo. */
    --superficie: var(--blanco);
    --superficie-alt: #FBFAF6;
    --superficie-grupo: #F1EDE0;
    --input-borde: #C9C4B4;
    --tinta-texto: var(--tinta);
    --topbar-texto: #EEF0F2;
    --rojo-texto: var(--rojo-debe);
    --verde-texto: var(--verde-ok);
}

* { box-sizing: border-box; }

/* Los controles de formulario no heredan la fuente por defecto: forzarlo
   evita que campos y botones se vean con una letra distinta al resto. */
button, input, select, textarea { font-family: inherit; }

body {
    margin: 0;
    background: var(--papel);
    background-image: radial-gradient(circle at 100% 0%, rgba(38, 140, 199, 0.05) 0%, transparent 45%);
    background-attachment: fixed;
    color: var(--texto);
    font-family: var(--font-interfaz);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--font-cuerpo);
    color: var(--tinta-texto);
    margin: 0 0 0.6em 0;
    letter-spacing: -0.01em;
}

a { color: var(--tinta-suave); transition: color var(--transicion); }
a:hover { color: var(--dorado); }

/* ---------- Barra superior ---------- */
.topbar {
    background: linear-gradient(135deg, var(--tinta) 0%, #101A30 100%);
    color: var(--topbar-texto);
    box-shadow: var(--sombra);
    border-bottom: 2px solid var(--dorado);
    position: relative;
    z-index: 100;
}
.topbar-fila1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 24px;
    height: 58px;
}
.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.topbar-logo-img {
    height: 30px;
    width: auto;
    max-width: 160px;
    display: block;
    object-fit: contain;
}
.topbar-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--dorado-suave);
    border-radius: 50%;
    color: var(--dorado-suave);
    font-family: var(--font-cuerpo);
    font-size: 16px;
    flex-shrink: 0;
}
.topbar-name {
    font-size: 15px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Botón hamburguesa: oculto en escritorio, visible en móvil */
.topbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(199, 204, 219, 0.35);
    border-radius: var(--radio-sm);
    cursor: pointer;
    flex-shrink: 0;
}
.topbar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--topbar-texto);
    border-radius: 2px;
    transition: transform var(--transicion), opacity var(--transicion);
}
.topbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Navegación principal ---------- */
.topbar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
}
.nav-link {
    color: #C7CCDB;
    text-decoration: none;
    font-size: 13.5px;
    padding: 10px 10px;
    border-bottom: 2px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
    white-space: nowrap;
}
.nav-link:hover {
    color: var(--topbar-texto);
    border-bottom-color: var(--dorado-suave);
}

/* Grupos desplegables: Módulos / Reportes / Configuración */
.nav-grupo { position: relative; }
.nav-grupo-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: #C7CCDB;
    font-family: var(--font-interfaz);
    font-size: 13.5px;
    padding: 10px 10px;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transicion), border-color var(--transicion);
}
.nav-grupo-toggle:hover,
.nav-grupo.abierto .nav-grupo-toggle {
    color: var(--topbar-texto);
    border-bottom-color: var(--dorado-suave);
}
.nav-caret {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transicion);
    margin-top: -3px;
}
.nav-grupo.abierto .nav-caret { transform: rotate(-135deg); margin-top: 2px; }

.nav-grupo-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 6px;
    width: max-content;
    max-width: 580px;
    background: var(--superficie);
    border: 1px solid var(--papel-linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    padding: 12px;
    z-index: 50;
}
.nav-grupo.abierto .nav-grupo-menu { display: grid; }

/* Cada modulo/reporte es una "tarjeta" con icono en circulo + etiqueta,
   en vez de un simple renglon de texto: mas facil de escanear de un
   vistazo y se siente mas a la altura del resto del sistema. */
.menu-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: 108px;
    padding: 14px 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--radio-sm);
    color: var(--texto);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
}
.menu-tile-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--papel);
    color: var(--dorado);
    flex-shrink: 0;
    transition: background var(--transicion), color var(--transicion);
}
.menu-tile-icono svg { width: 19px; height: 19px; }
.menu-tile-texto {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}
.menu-tile:hover,
.menu-tile:focus-visible {
    border-color: var(--dorado-suave);
    background: var(--superficie-alt);
    transform: translateY(-2px);
    box-shadow: var(--sombra);
    outline: none;
}
.menu-tile:hover .menu-tile-icono,
.menu-tile:focus-visible .menu-tile-icono {
    background: var(--dorado);
    color: #fff;
}
/* Variante para el acceso "principal" de un grupo, ej. "Ver todos los
   reportes": queda resaltado de entrada para diferenciarlo del resto. */
.menu-tile-destacado { border-color: var(--dorado-tenue); }
.menu-tile-destacado .menu-tile-icono { background: var(--dorado); color: #fff; }
.menu-tile-separador {
    grid-column: 1 / -1;
    border: none;
    border-top: 1px solid var(--papel-linea);
    margin: 4px 2px;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
    color: #C7CCDB;
}
.topbar-user-movil { display: none; }

/* ---------- Boton de tema (sol / luna) ---------- */
.btn-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1.5px solid rgba(199, 204, 219, 0.35);
    border-radius: 50%;
    color: var(--topbar-texto);
    cursor: pointer;
    transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
    flex-shrink: 0;
}
.btn-tema:hover {
    color: var(--dorado-suave);
    border-color: var(--dorado-suave);
    background: rgba(255, 255, 255, 0.06);
}
.btn-tema svg { width: 17px; height: 17px; display: block; }
.btn-tema .icono-luna { display: none; }
html[data-tema="oscuro"] .btn-tema .icono-sol { display: none; }
html[data-tema="oscuro"] .btn-tema .icono-luna { display: block; }
.btn-link {
    color: var(--dorado-suave);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transicion);
}
.btn-link:hover { color: var(--dorado-tenue); }

/* ---------- Layout general ---------- */
.page-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 60px;
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--tinta-texto);
    padding-bottom: 12px;
}
.page-head .eyebrow {
    font-family: var(--font-interfaz);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dorado);
    font-weight: 700;
    margin-bottom: 4px;
    display: block;
}

/* ---------- Tarjetas / paneles ---------- */
.panel {
    background: var(--superficie);
    border: 1px solid var(--papel-linea);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px 22px;
    margin-bottom: 22px;
}
a.panel {
    transition: box-shadow var(--transicion), border-color var(--transicion), transform var(--transicion);
}
a.panel:hover {
    box-shadow: var(--sombra-lg);
    border-color: var(--dorado-suave);
    transform: translateY(-1px);
}

.grid-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.kpi {
    background: var(--superficie);
    border: 1px solid var(--papel-linea);
    border-left: 4px solid var(--dorado-suave);
    border-radius: var(--radio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
    transition: box-shadow var(--transicion);
}
.kpi:hover { box-shadow: var(--sombra-lg); }
.kpi .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--texto-tenue);
    display: block;
    margin-bottom: 6px;
}
.kpi .kpi-valor {
    font-family: var(--font-cifra);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    color: var(--tinta-texto);
    font-weight: 700;
}

/* ---------- Botones ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-interfaz);
    font-size: 13.5px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: var(--radio);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}
.btn-primario {
    background: var(--verde-solido);
    color: var(--blanco);
    border-color: var(--verde-solido);
}
.btn-primario:hover { background: var(--verde-solido-hover); border-color: var(--verde-solido-hover); }
.btn-dorado {
    background: var(--dorado);
    color: var(--blanco);
}
.btn-dorado:hover { background: var(--dorado-suave); }
.btn-secundario {
    background: var(--superficie);
    color: var(--tinta-texto);
    border-color: var(--tinta-texto);
}
.btn-secundario:hover { background: var(--papel); }
.btn-peligro {
    background: var(--rojo-solido);
    color: var(--blanco);
    border-color: var(--rojo-solido);
}
.btn-peligro:hover { background: var(--rojo-solido-hover); border-color: var(--rojo-solido-hover); }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }

/* ---------- Iconos en botones ----------
   Solo se agregan a botones cuyo significado es inequivoco en
   cualquier pantalla (primario = accion positiva/guardar, peligro =
   accion destructiva). btn-secundario y btn-dorado se usan para
   acciones muy variadas segun la pantalla (Cancelar, Volver, Cerrar
   periodo, Editar...) y ponerles el mismo icono fijo confundiria mas
   de lo que ayuda, asi que se dejan sin icono por ahora. */
.btn-primario, .btn-peligro {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-primario::before, .btn-peligro::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.btn-primario::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}
.btn-peligro::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

/* ---------- Formularios ---------- */
label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-suave);
    margin-bottom: 4px;
}
input[type=text], input[type=password], input[type=date], input[type=number],
select, textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--input-borde);
    border-radius: var(--radio);
    font-family: var(--font-interfaz);
    font-size: 13.5px;
    background: var(--superficie);
    color: var(--texto);
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--dorado-suave);
    outline-offset: 1px;
}
.campo { margin-bottom: 16px; }
.fila-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

/* ---------- Tablas ---------- */
table.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
table.tabla th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #FFFFFF;
    background: var(--marca);
    border-bottom: 2px solid var(--marca-fuerte);
    padding: 9px 10px;
}
table.tabla th.text-right {
    text-align: right;
}
table.tabla td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--papel-linea);
    vertical-align: middle;
}
table.tabla tr:hover td { background: var(--superficie-alt); }
table.tabla tr.fila-seleccionada td { background: var(--dorado-tenue); }
.num, .cifra {
    font-family: var(--font-cifra);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.txt-tenue { color: var(--texto-tenue); }
.txt-debe { color: var(--rojo-texto); }
.txt-haber { color: var(--verde-texto); }

.etiqueta {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.03em;
}
.etiqueta-aplicado { background: #E4F0E7; color: var(--verde-ok); }
.etiqueta-borrador { background: #E1F1FA; color: var(--dorado); }
.etiqueta-anulado  { background: #F5E4E4; color: var(--rojo-debe); }

/* ---------- Ventana modal de aviso (reemplaza el banner plano) ----------
   Imita un cuadro de dialogo de escritorio: fondo oscurecido, ventana
   flotante con su propia barra de titulo (icono + texto + boton
   cerrar) y un boton Aceptar al pie. Se inyecta desde pintarFlash()
   en includes/helpers.php. */
.modal-fondo {
    position: fixed;
    inset: 0;
    background: rgba(16, 26, 48, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
    animation: modalFondoAparece 120ms ease;
}
@keyframes modalFondoAparece { from { opacity: 0; } to { opacity: 1; } }
.modal-ventana {
    background: var(--superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra-lg);
    width: 100%;
    max-width: 380px;
    overflow: hidden;
    animation: modalVentanaAparece 140ms ease;
}
@keyframes modalVentanaAparece {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-barra {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px 9px 14px;
    background: var(--marca);
    color: #FFFFFF;
}
.modal-barra-icono { display: inline-flex; width: 16px; height: 16px; flex-shrink: 0; }
.modal-barra-icono svg { width: 100%; height: 100%; }
.modal-barra-titulo { flex: 1; font-size: 13px; font-weight: 600; }
.modal-cerrar {
    background: none;
    border: none;
    color: var(--topbar-texto);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radio-sm);
    opacity: 0.85;
}
.modal-cerrar:hover { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.modal-cuerpo {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
}
.modal-cuerpo-icono { display: inline-flex; width: 30px; height: 30px; flex-shrink: 0; }
.modal-cuerpo-icono svg { width: 100%; height: 100%; }
.modal-cuerpo p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.modal-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px 16px;
}
.modal-exito .modal-cuerpo-icono { color: var(--verde-solido); }
.modal-info  .modal-cuerpo-icono { color: var(--dorado); }
.modal-error .modal-cuerpo-icono { color: var(--rojo-solido); }
/* Variante de confirmacion (Cancelar/Aceptar), usada por
   assets/js/confirmar.js para reemplazar el confirm() nativo del
   navegador con la misma ventanita que ya usa pintarFlash(). */
.modal-confirmar .modal-cuerpo-icono { color: var(--dorado); }

/* Variante grande del modal, para formularios completos que se abren
   en ventana emergente (ej. "+ Nuevo comprobante" en comprobantes/index.php).
   A diferencia de los modales de aviso (380px), esta usa la mayor
   parte de la pantalla y su cuerpo tiene scroll propio. */
.modal-cerrado { display: none !important; }
.modal-ventana-formulario {
    max-width: 1180px;
    width: 96%;
    max-height: 92vh;
    background: var(--papel);
    display: flex;
    flex-direction: column;
}
.modal-formulario-cuerpo {
    padding: 18px 20px 22px;
    overflow-y: auto;
}
.modal-formulario-cuerpo .panel:last-child { margin-bottom: 0; }
body.sin-scroll { overflow: hidden; }

/* ---------- Alertas ---------- */
.alerta {
    padding: 11px 16px;
    border-radius: var(--radio);
    margin-bottom: 18px;
    font-size: 13.5px;
    border-left: 4px solid;
}
.alerta-exito { background: #E9F3EB; border-color: var(--verde-ok); color: #234F35; }
.alerta-error { background: #FBEAEA; border-color: var(--rojo-debe); color: #6E2727; }
.alerta-info  { background: #EEF1F7; border-color: var(--tinta-suave); color: var(--tinta); }

/* ---------- Login ---------- */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--tinta) 0%, #101B33 100%);
    padding: 20px;
}
.login-card {
    background: var(--papel);
    width: 100%;
    max-width: 380px;
    border-radius: 6px;
    padding: 36px 32px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35);
    border-top: 4px solid var(--dorado);
}
.login-card .topbar-mark {
    color: var(--dorado);
    border-color: var(--dorado);
    margin: 0 auto 14px;
    width: 46px;
    height: 46px;
    font-size: 24px;
}
.login-logo-img {
    display: block;
    max-height: 64px;
    max-width: 220px;
    width: auto;
    margin: 0 auto 16px;
    object-fit: contain;
}
.login-card h1 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 2px;
}
.login-card .subtitulo {
    text-align: center;
    color: var(--texto-tenue);
    font-size: 12.5px;
    margin-bottom: 24px;
}

/* ---------- Comprobante: lineas dinamicas ---------- */
.tabla-lineas input, .tabla-lineas select { font-size: 13px; padding: 6px 8px; }
.tabla-lineas td { padding: 5px 6px; }

/* ---------- Buscador de cuentas con autocompletado (comprobantes) ---------- */
.celda-cuenta { position: relative; }
.input-cuenta-invalida { border-color: var(--rojo-texto) !important; }
/* position:fixed (no absolute) a proposito: la tabla vive dentro de .panel,
   que tiene overflow-x:auto y por lo tanto recortaria un desplegable absoluto. */
.sugerencias-cuenta {
    position: fixed;
    z-index: 500;
    display: none;
    background: var(--superficie);
    border: 1px solid var(--papel-linea);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra-lg);
    max-height: 240px;
    overflow-y: auto;
}
.sugerencias-cuenta.activa { display: block; }
.sugerencia-item {
    padding: 7px 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sugerencia-item:hover,
.sugerencia-item.resaltada { background: var(--papel); color: var(--tinta-texto); }
.sugerencia-vacia { padding: 7px 10px; font-size: 12.5px; color: var(--texto-tenue); }
.fila-totales td {
    font-weight: 700;
    border-top: 2px solid var(--tinta-texto);
    background: var(--superficie-alt);
}
.aviso-descuadre {
    color: var(--rojo-texto);
    font-weight: 700;
}
.aviso-cuadrado {
    color: var(--verde-texto);
    font-weight: 700;
}

/* ---------- Tablas con encabezados agrupados (Libro Mayor, Balanza) ----------
   Cuadricula completa: cada celda tiene su propio borde por los 4
   lados y la tabla entera tiene un borde perimetral, para que se
   vea cerrada alrededor (estilo hoja de cálculo / libro contable),
   en vez de depender de que los bordes de celdas vecinas casen
   justo donde se cruzan (eso es lo que dejaba huecos). Los grupos
   (Saldo Inicial, Movimiento, Saldo Final) se distinguen con un
   borde mas oscuro en sus limites. */
.tabla-grupos {
    border: 1px solid var(--tinta-suave);
    border-collapse: collapse;
}
.tabla-grupos th,
.tabla-grupos td {
    border: 1px solid var(--papel-linea);
}
.tabla-grupos thead th {
    border-color: var(--marca-fuerte);
    background: var(--marca);
    color: #FFFFFF;
}
.tabla-grupos thead tr:first-child th {
    text-align: center;
    background: var(--marca-morado);
}
.tabla-grupos thead tr:last-child th {
    background: var(--marca);
}
.tabla-grupos tfoot td {
    border-color: var(--tinta-suave);
}

/* ---------- Utilidades ---------- */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.flex-entre {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Colchon universal para tablas anchas ----------
   Cualquier tabla dentro de un panel se vuelve deslizable
   horizontalmente si no cabe, en vez de romper el diseño o
   forzar zoom en el celular. No afecta el aspecto en escritorio,
   donde las tablas ya caben sin necesidad de deslizar. */
.panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.panel table.tabla {
    min-width: 560px;
}

@media (max-width: 900px) {
    .page-wrap { max-width: 100%; }
}

/* ---------- Menú responsive (móvil / tablet angosta) ----------
   Por debajo de 860px, la barra de módulos deja de caber cómodamente
   en una sola fila, así que se convierte en un panel desplegable
   tipo acordeón que se abre con el botón de hamburguesa. */
@media (max-width: 860px) {
    .topbar-toggle { display: flex; }
    .topbar-user-desktop { display: none; }

    .topbar-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px 10px 14px;
        background: #101A30;
        border-top: 1px solid rgba(199, 204, 219, 0.15);
    }
    .topbar-nav.abierto { display: flex; }

    .nav-link {
        padding: 12px 10px;
        border-bottom: 1px solid rgba(199, 204, 219, 0.1);
        border-left: 3px solid transparent;
    }
    .nav-link:hover { border-bottom-color: rgba(199, 204, 219, 0.1); border-left-color: var(--dorado-suave); }

    .nav-grupo-toggle {
        width: 100%;
        justify-content: space-between;
        padding: 12px 10px;
        border-bottom: 1px solid rgba(199, 204, 219, 0.1);
    }
    .nav-caret { margin-top: 0; }
    .nav-grupo.abierto .nav-caret { margin-top: 3px; }

    /* En móvil el submenú se despliega inline (acordeón), no flotante.
       Las tarjetas se mantienen (se sienten como un mini launcher de
       apps), solo se adaptan los colores al fondo oscuro del panel. */
    .nav-grupo-menu {
        position: static;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
        max-width: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(247, 245, 239, 0.04);
        margin: 2px 0 4px;
        padding: 10px 6px;
    }
    .nav-grupo.abierto .nav-grupo-menu { display: grid; }
    .menu-tile { width: auto; color: #C7CCDB; }
    .menu-tile-texto { color: #C7CCDB; }
    .menu-tile-icono { background: rgba(247, 245, 239, 0.08); color: var(--dorado-tenue); }
    .menu-tile:hover,
    .menu-tile:focus-visible {
        background: rgba(247, 245, 239, 0.08);
        border-color: transparent;
        transform: none;
        box-shadow: none;
    }
    .menu-tile-destacado { border-color: rgba(191, 230, 245, 0.35); }
    .menu-tile-separador { border-top-color: rgba(199, 204, 219, 0.15); }

    .topbar-user-movil {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
        padding: 12px 10px 4px;
        border-top: 1px solid rgba(199, 204, 219, 0.15);
    }
}

@media (max-width: 720px) {
    body { font-size: 13.5px; }
    .topbar-fila1 { padding: 10px 16px; height: auto; }
    .page-wrap { padding: 16px 12px 40px; }
    .page-head { align-items: flex-start; }
    .page-head h1 { font-size: 19px; }
    .panel { padding: 14px 14px; margin-bottom: 16px; }
    .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    .kpi { padding: 12px 14px; }
    .kpi .kpi-valor { font-size: 18px; }
    .fila-campos { grid-template-columns: 1fr; gap: 10px; }
    .acciones-fila { width: 100%; }
    .acciones-fila .btn { flex: 1 1 auto; text-align: center; }
    table.tabla { font-size: 12.5px; }
    table.tabla th, table.tabla td { padding: 7px 8px; }
    /* Los botones pequeños (Editar, Kardex, Movimientos, etc.) son
       muy comunes dentro de las tablas — en escritorio son compactos
       a propósito, pero en movil necesitan ser mas faciles de tocar. */
    .btn-sm { padding: 8px 14px; font-size: 13px; }
    .tabla .btn-sm + .btn-sm,
    .tabla .btn-sm + form,
    .tabla form + .btn-sm { margin-left: 6px; display: inline-block; }
    .login-card { padding: 28px 22px; max-width: 100%; }
    /* Evita que iOS haga zoom automatico al enfocar un campo */
    input[type=text], input[type=password], input[type=date], input[type=number],
    select, textarea {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .grid-kpi { grid-template-columns: 1fr 1fr; }
    .btn { font-size: 12.5px; padding: 8px 14px; }
}

/* En pantallas de escritorio, los botones dentro de una fila de
   acciones no deben estirarse a lo ancho como en movil. */
@media (min-width: 721px) {
    .acciones-fila .btn { flex: 0 0 auto; }
}

/* ============================================================
   COMPROBANTE DE DIARIO — MEMBRETE / ENCABEZADO IMPRIMIBLE
   Encabezado tipo "papel contable": nombre del negocio, leyenda
   del tipo de comprobante, numero, fecha y referencia. Se ve
   igual en pantalla y al imprimir (el @media print de abajo solo
   ajusta sombras/bordes para que no gaste tinta).
   ============================================================ */
.comprobante-doc { max-width: 900px; margin: 0 auto; padding-top: 6px; }

.comprobante-membrete {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    text-align: left;
    border-bottom: 1px solid var(--tinta-texto);
    padding-bottom: 14px;
    margin-bottom: 16px;
}
.comprobante-membrete.sin-logo { text-align: center; }
.comprobante-membrete .comprobante-texto { min-width: 0; }
.comprobante-membrete .comprobante-logo {
    height: 56px;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
}
.comprobante-membrete .comprobante-negocio {
    font-family: var(--font-cuerpo);
    font-size: 20px;
    font-weight: 700;
    color: var(--tinta-texto);
    margin: 0 0 4px;
}
.comprobante-membrete .comprobante-leyenda {
    font-family: var(--font-interfaz);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dorado);
    margin: 0;
}
.comprobante-membrete .comprobante-moneda {
    font-size: 12px;
    color: var(--texto-tenue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

.comprobante-datos {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 16px;
    margin-bottom: 16px;
    font-family: var(--font-interfaz);
    font-size: 13.5px;
}
.comprobante-datos .comprobante-numero {
    font-weight: 700;
    font-size: 15px;
    color: var(--tinta-texto);
    white-space: nowrap;
}
.comprobante-datos dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 6px;
    min-width: 0;
    flex: 1 1 auto;
}
.comprobante-datos dt {
    color: var(--texto-tenue);
    font-weight: 600;
}
.comprobante-datos dd {
    margin: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Bloque del numero de comprobante (No. CD-000008 + estado): ancho
   fijo a su contenido y con un margen respecto al borde derecho, en
   vez de quedar pegado al filo del documento. flex-shrink:0 evita
   que se comprima o se mueva cuando la Referencia es muy larga; esa
   siempre se acomoda envolviendo su propio texto (ver dd arriba) en
   vez de empujar este bloque. */
.comprobante-numero-bloque {
    flex: 0 0 auto;
    text-align: right;
    margin-right: 14px;
}

.comprobante-firmas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 46px;
    text-align: center;
}
.comprobante-firmas .firma-linea {
    border-top: 1px solid var(--tinta-texto);
    padding-top: 6px;
    font-size: 12.5px;
    color: var(--texto-tenue);
}

/* Codigo contable, Debe y Haber dentro del comprobante: se veian
   demasiado tenues (fuente monoespaciada delgada en gris). Se usan
   mas oscuros, un poco mas grandes y con mas peso para que se lean
   bien tanto en pantalla como impresos/PDF. */
.comprobante-doc .num,
.comprobante-doc .cifra {
    font-weight: 600;
    font-size: 14.5px;
    color: var(--tinta-texto);
}
.comprobante-doc .txt-debe { color: var(--rojo-texto); }
.comprobante-doc .txt-haber { color: var(--verde-texto); }

/* Codigo contable (6.1.11, 1.2.2.02...): alineado a la izquierda,
   como el resto de columnas de texto, en vez de a la derecha como
   las cifras de Debe/Haber. */
.comprobante-doc td.codigo-cuenta {
    text-align: left;
}

/* Titulos de la tabla (Codigo, Cuenta, Comentario, Debe, Haber):
   encerrados en su propio recuadro (bordes en los 4 lados, delgados),
   en vez de solo una linea inferior. Al ir por celda con border-collapse,
   la caja queda pareja en las 5 columnas aunque la columna Moneda
   (no-print) se oculte al imprimir. */
.comprobante-doc table.tabla thead th {
    border: 1px solid var(--tinta-texto);
}

/* "Sumas iguales": una raya simple arriba y DOBLE RAYA abajo, como en los
   libros contables, para marcar que ese es el total final del comprobante. */
.comprobante-doc .fila-totales td {
    border-top: 1px solid var(--tinta-texto);
    border-bottom: 6px double var(--tinta-texto);
}

/* Total final con doble raya abajo (Balanza de Comprobacion y demas reportes
   que lleven la clase .doble-raya en la fila de totales). Igual que
   "Sumas iguales" del comprobante: raya simple arriba, doble abajo. */
tr.doble-raya td {
    border-top: 1px solid var(--tinta-texto);
    border-bottom: 6px double var(--tinta-texto);
}
@media print {
    tr.doble-raya td { border-top-color: #000; border-bottom-color: #000; }
}

/* BUG: la columna "Moneda" se oculta al imprimir con la clase global
   .no-print (display:none). Quitar por completo una celda de la fila
   con display:none rompe el border-collapse en el motor de
   impresion/PDF: las lineas de separacion entre filas (y antes, la
   linea bajo los titulos) se cortaban justo donde estaba esa celda y
   no llegaban hasta Debe/Haber. En vez de retirar la celda de la
   tabla, aqui se le colapsa el ancho a 0 y se le oculta el contenido,
   pero sigue "presente" como celda para que el borde de toda la fila
   se dibuje de corrido, parejo, en las 5 columnas visibles. */
@media print {
    .comprobante-doc table.tabla th.no-print,
    .comprobante-doc table.tabla td.no-print {
        display: table-cell !important;
        visibility: hidden !important;
        width: 0 !important;
        max-width: 0 !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
}

@media print {
    .comprobante-membrete { border-bottom-color: #000; }
    .comprobante-membrete .comprobante-negocio,
    .comprobante-membrete .comprobante-leyenda { color: #000; }
    .comprobante-firmas .firma-linea { border-top-color: #000; }
    .comprobante-firmas .firma-linea.no-print { display: block !important; visibility: visible !important; }
    .comprobante-doc table.tabla thead th { border-color: #000; }
    .comprobante-doc .fila-totales td { border-top-color: #000; border-bottom-color: #000; }
    .comprobante-doc .num,
    .comprobante-doc .cifra { color: #000; font-weight: 700; }
    .comprobante-doc .txt-debe,
    .comprobante-doc .txt-haber { color: #000; }
    .comprobante-doc .etiqueta { display: none !important; }
}

/* Los encabezados de tabla (table.tabla th) ahora son azul tinta
   solido con texto claro en pantalla. Los navegadores no imprimen
   fondos de color por defecto, asi que sin esta regla el texto del
   encabezado (claro) quedaria invisible sobre el papel (blanco) al
   imprimir/exportar a PDF. Se fuerza texto oscuro + borde visible
   en vez de depender del fondo. */
@media print {
    table.tabla th,
    table.tabla-grupos th {
        background: none !important;
        color: #000 !important;
        border-color: #000 !important;
    }
}

/* Bordes verticales completos al imprimir cualquier reporte o
   comprobante que use la cuadricula .tabla-grupos: el gris claro
   que se ve bien en pantalla queda casi invisible en papel, asi
   que se oscurece solo para impresion. */
@media print {
    table.tabla-grupos,
    table.tabla-grupos th,
    table.tabla-grupos td {
        border-color: #000 !important;
    }
}

/* ============================================================
   TEMA OSCURO
   Se activa poniendo data-tema="oscuro" en <html> (ver
   includes/tema_inline.php y assets/js/tema.js). La barra superior
   se queda con su azul tinta de siempre (es parte de la marca y ya
   es oscura en ambos temas); lo que cambia es el fondo de página,
   las superficies (paneles, tarjetas, tablas, inputs) y los colores
   de texto que antes dependían de esos mismos tonos oscuros.
   ============================================================ */
html[data-tema="oscuro"] {
    --papel: #10151C;
    --papel-linea: #2A3350;
    --texto: #E4E7EE;
    --texto-tenue: #8B93AC;
    --superficie: #1B2333;
    --superficie-alt: #212B42;
    --superficie-grupo: #2A3552;
    --input-borde: #3A4560;
    --tinta-texto: #C7D2F0;
    --tinta-suave: #7B93D1;
    --rojo-texto: #E28080;
    --verde-texto: #6FCB94;
    --sombra-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sombra: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --sombra-lg: 0 10px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
    /* En oscuro, el acento tambien se aclara un poco para que siga
       leyendose bien sobre fondo oscuro. */
    --tinta-suave: #9AA4B2;
    --dorado: #6BA3FF;
    --dorado-suave: #9AC1FF;
    --dorado-tenue: #22293A;
}
/* --tinta-suave ya se usa mas claro (arriba) para que enlaces, labels
   y bordes de tabla-grupos se lean bien sobre fondo oscuro; pero el
   hover de btn-primario usaba esa misma variable como fondo de boton
   (con texto claro encima), asi que aqui se fija aparte para no
   perder el contraste. */
html[data-tema="oscuro"] .btn-primario:hover { background: #2A3B66; }
html[data-tema="oscuro"] .btn-peligro:hover { background: #3A2323; }
html[data-tema="oscuro"] .page-head .eyebrow { color: var(--dorado-suave); }
/* --dorado-tenue en oscuro es un fondo oscuro (tarjetas KPI, filas
   seleccionadas), no sirve como color de texto legible sobre fondo
   oscuro -- aqui se usa --dorado-suave en su lugar, igual que el
   eyebrow de arriba. */
html[data-tema="oscuro"] .btn-link:hover { color: var(--dorado-suave); }


/* ============================================================
   IMPRESION EN VARIAS PAGINAS
   Por defecto el navegador repite el pie de tabla (<tfoot>) al final
   de CADA pagina, asi que "Sumas iguales" (y los totales de reportes)
   aparecian en todas las hojas. Aqui el pie se trata como una fila
   mas al final del cuerpo: el total sale UNA sola vez, en la ultima
   pagina, con su doble raya. Los titulos de columna si se repiten en
   cada hoja, y ninguna fila se parte entre dos paginas.
   ============================================================ */
@media print {
    table.tabla tfoot,
    table.tabla-grupos tfoot {
        display: table-row-group;
    }
    table.tabla thead,
    table.tabla-grupos thead {
        display: table-header-group;
    }
    table.tabla tr,
    table.tabla-grupos tr {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .comprobante-doc .fila-totales {
        break-before: avoid;
        page-break-before: avoid;
    }
}

/* ---------- Ventana emergente para formularios CORTOS ----------
   Se abre con assets/js/modal_formulario.js desde enlaces con el atributo
   data-modal-form (cuenta bancaria, caja, bodega, cliente, proveedor,
   abrir turno). Los formularios largos (comprobantes, facturas) NO usan
   ventana: son pagina completa. */
.modal-ventana-corta {
    max-width: 640px;
    width: 96%;
}
.modal-ventana-corta .modal-formulario-cuerpo { padding: 14px 18px 18px; }
.modal-ventana-corta .caja-datos-titulo { display: none; } /* la barra de la ventana ya lleva el titulo */
.modal-ventana-corta .panel { box-shadow: none; margin-bottom: 0; }
/* Si la ventana se redimensiona (modal_movible.js), el cuerpo debe seguir haciendo scroll. */
.modal-ventana[data-mm-libre] .modal-formulario-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; }