/* FENIX ERP Web - estilos base compartidos (mobile-first). Cada pantalla agrega su propio css. */
:root {
  --fondo: #f4f6f9; --superficie: #ffffff; --texto: #1c2430; --suave: #5b6675; --borde: #d5dbe3;
  --primario: #b3261e; --primario-osc: #8c1d17; --acento: #1f5f99; --ok: #1b7a43; --alerta: #9a6700; --error: #b3261e;
  --fila-alt: #f8fafc; --radio: 8px; --sombra: 0 1px 3px rgba(20, 30, 50, .12);
  /* sistema de diseno v0.3 (docs/design-handoff/DESIGN_SYSTEM.md): tokens nuevos, aditivos */
  --marino: #1c2430; --marino-hover: #273142; --marino-activo: #2b3646; --marino-texto: #c9d1dc; --marino-suave: #8e9bad; --marca-activa: #e5534b;
  --cabecera-tabla: #f1f4f8; --seleccion: #eaf2fa; --borde-fuerte: #c3cbd6; --borde-suave: #e6ebf1;
  --ok-fondo: #f0faf4; --error-fondo: #fdf1f0; --alerta-fondo: #fff8e6; --alerta-texto: #8a5a00; --info-fondo: #eaf2fa;
  --radio-tarjeta: 10px; --radio-chip: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --fuente-ui: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-num: 'IBM Plex Mono', ui-monospace, Consolas, 'Courier New', monospace;
  --fila-comoda: 13px; --fila-normal: 9px; --fila-compacta: 4px;
  --lateral-ancho: 248px; --lateral-riel: 72px; --detalle-ancho: 400px;
}
:root { color-scheme: light; }
/* Tema oscuro: se activa con data-tema="oscuro" en <html> (boton de la barra de contexto; la eleccion se recuerda). El tema claro es el predeterminado y NO depende de prefers-color-scheme. */
:root[data-tema="oscuro"] {
  color-scheme: dark;
    --fondo: #12161c; --superficie: #1b212a; --texto: #e7ebf0; --suave: #9aa6b5; --borde: #323b48;
    --primario: #e5534b; --primario-osc: #c9453e; --acento: #6cb0f0; --ok: #4cc27f; --alerta: #e3b341; --error: #ff7b72; --fila-alt: #20272f;
    /* valores propuestos para el modo oscuro de los tokens nuevos (no estaban en la maqueta) */
    --marino: #0f141b; --marino-hover: #1a222d; --marino-activo: #232d3b; --marino-texto: #c9d1dc; --marino-suave: #8e9bad; --marca-activa: #e5534b;
    --cabecera-tabla: #242c36; --seleccion: #1e2a3a; --borde-fuerte: #3d4858; --borde-suave: #28313c;
    --ok-fondo: #12261a; --error-fondo: #2b1614; --alerta-fondo: #2a2310; --alerta-texto: #e3b341; --info-fondo: #1b2a3d;
  }
/* Fuentes IBM Plex (SIL OFL 1.1, ver assets/fonts/LICENSE-IBM-Plex.txt), autoalojadas: la CSP solo permite 'self'. Si no cargan, cae en system-ui / monospace del sistema. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexSans-Bold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2'); }
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: var(--fuente-ui); background: var(--fondo); color: var(--texto); line-height: 1.45; }
a { color: var(--acento); }
h1 { font-size: 1.6rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.contenido { max-width: 1600px; margin: 0; padding: 1.25rem 1.75rem 2.25rem; }
.contenido.ancho { max-width: none; }
.migas { font-size: .85rem; margin: 0 0 .15rem; }

/* estructura de pagina: barra lateral (variante A del sistema de diseno) */
form.inline { display: inline; margin: 0; }
.app { display: flex; align-items: flex-start; min-height: 100vh; }
.app-contenido { flex: 1 1 0; min-width: 0; }
.lateral { position: sticky; top: 0; flex: 0 0 var(--lateral-ancho); width: var(--lateral-ancho); height: 100vh; min-height: 30rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1rem .75rem; background: var(--marino); color: var(--marino-texto); transition: width .15s, flex-basis .15s; }
.lateral-marca { display: flex; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .35rem; }
.logo { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; background: var(--primario); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; }
.lateral-marca-txt { display: flex; flex-direction: column; line-height: 1.15; flex: 1; min-width: 0; }
.lateral-marca-txt strong { color: #fff; font-weight: 700; letter-spacing: .14em; font-size: .95rem; }
.lateral-marca-txt small { color: var(--marino-suave); font-size: .75rem; }
.lateral-boton { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--marino-activo); border-radius: var(--radio); background: transparent; color: var(--marino-texto); cursor: pointer; }
.lateral-boton:hover { background: var(--marino-hover); color: #fff; }
.lateral-boton:focus-visible, .lateral a:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lateral-menu { display: none; width: 44px; height: 44px; }
.lateral-cuerpo { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.lateral-nav { display: flex; flex-direction: column; gap: 1rem; }
.lateral-grupo { display: flex; flex-direction: column; gap: 2px; }
.lateral-titulo { padding: 0 .65rem .35rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--marino-suave); }
.lateral a { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .5rem .65rem; border-radius: var(--radio); color: var(--marino-texto); text-decoration: none; }
.lateral a svg { flex: 0 0 18px; }
.lateral a:hover { background: var(--marino-hover); color: #fff; }
.lateral a.activo { background: var(--marino-activo); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--marca-activa); }
/* riel (solo iconos): escritorio plegado por el usuario, o tablet por defecto */
.lateral-perfil { margin-top: auto; padding: .65rem .75rem; border-radius: var(--radio); background: var(--marino-hover); font-size: .75rem; color: var(--marino-suave); line-height: 1.4; display: flex; flex-direction: column; }
.lateral-perfil strong { color: #fff; font-size: .8rem; font-weight: 600; }
.lateral.plegado .lateral-perfil { display: none; }
.lateral.plegado { flex-basis: var(--lateral-riel); width: var(--lateral-riel); }
.lateral.plegado .lateral-txt, .lateral.plegado .lateral-titulo, .lateral.plegado .lateral-marca-txt { display: none; }
.lateral.plegado a { justify-content: center; }
.lateral.plegado .lateral-marca { flex-direction: column; padding: 0; }
.contexto { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1.25rem; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.contexto-empresa { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.contexto-empresa span { font-size: .75rem; }
.contexto-empresa a { color: var(--texto); font-weight: 600; text-decoration: none; }
.contexto-datos { display: flex; flex-wrap: wrap; gap: .5rem; }
.contexto-usuario { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .9rem; }
@media (min-width: 641px) and (max-width: 1100px) {
  .lateral:not(.expandido) { flex-basis: var(--lateral-riel); width: var(--lateral-riel); }
  .lateral:not(.expandido) .lateral-txt, .lateral:not(.expandido) .lateral-titulo, .lateral:not(.expandido) .lateral-marca-txt { display: none; }
  .lateral:not(.expandido) a { justify-content: center; }
  .lateral:not(.expandido) .lateral-marca { flex-direction: column; padding: 0; }
  .lateral:not(.expandido) .lateral-perfil { display: none; }
  .contenido { padding: 1rem 1.25rem 2rem; }
}
@media (max-width: 640px) {
  .app { flex-direction: column; align-items: stretch; }
  .lateral, .lateral.plegado { position: static; flex-basis: auto; width: 100%; height: auto; min-height: 0; overflow: visible; padding: .6rem .75rem; gap: .5rem; }
  .lateral.plegado .lateral-txt, .lateral.plegado .lateral-titulo { display: inline; }
  .lateral.plegado .lateral-titulo { display: block; }
  .lateral.plegado .lateral-marca-txt { display: flex; }
  .lateral.plegado a { justify-content: flex-start; }
  .lateral.plegado .lateral-marca { flex-direction: row; padding: 0 .35rem; }
  .lateral-plegar { display: none; }
  .lateral-menu { display: inline-flex; }
  .lateral.plegado .lateral-perfil { display: flex; }
  .js .lateral-cuerpo { display: none; }
  .js .lateral.abierto .lateral-cuerpo { display: flex; }
  .contexto { padding: .6rem .75rem; }
  .contexto-usuario .usuario-nombre { display: none; }
  .contenido { padding: .75rem .75rem 1.5rem; }
}

/* componentes */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); box-shadow: var(--sombra); padding: 1rem; margin-bottom: 1rem; }
.centrada { max-width: 460px; margin: 2rem auto; text-align: center; }
.aviso { padding: .7rem .9rem; border-radius: var(--radio); margin-bottom: .75rem; border: 1px solid; background: var(--superficie); }
.aviso-error { border-color: var(--error); color: var(--error); }
.aviso-ok { border-color: var(--ok); color: var(--ok); }
.aviso-info { border-color: var(--acento); color: var(--acento); }
.aviso ul { margin: .25rem 0 0 1.1rem; padding: 0; }
.rejilla { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla.c2 { grid-template-columns: 1fr 1fr; } .rejilla.c3 { grid-template-columns: repeat(3, 1fr); } .rejilla.c4 { grid-template-columns: repeat(4, 1fr); } }
label { display: block; font-size: .85rem; color: var(--suave); margin-bottom: .2rem; }
input, select, textarea { width: 100%; padding: .55rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; min-height: 2.5rem; }
input[type=checkbox] { width: auto; min-height: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.btn { display: inline-block; padding: .55rem 1rem; border: 0; border-radius: var(--radio); background: var(--primario); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 2.5rem; }
.btn:hover { background: var(--primario-osc); }
.btn-sec { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.btn-sec:hover { background: var(--fondo); }
.btn-chico { padding: .3rem .7rem; min-height: 0; font-size: .85rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.num { text-align: right; font-family: var(--fuente-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mono { font-family: var(--fuente-num); font-variant-numeric: tabular-nums; }
.suave { color: var(--suave); }
.etiqueta { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .75rem; border: 1px solid var(--borde); color: var(--suave); }
.etiqueta.anulado { color: var(--error); border-color: var(--error); }
.etiqueta.ok { color: var(--ok); border-color: var(--ok); }

/* tablas: en pantallas angostas cada fila es una tarjeta con etiquetas */
.tabla { width: 100%; border-collapse: collapse; background: var(--superficie); }
.tabla th, .tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.tabla th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); background: var(--cabecera-tabla); }
.tabla tbody tr:nth-child(even) { background: var(--fila-alt); }
@media (max-width: 719px) {
  .tabla.apilar thead { display: none; }
  .tabla.apilar tr { display: block; border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .6rem; padding: .3rem .5rem; }
  .tabla.apilar td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem 0; }
  .tabla.apilar td::before { content: attr(data-label); color: var(--suave); font-size: .8rem; }
  .tabla.apilar td.num { text-align: right; }
}
.scroll-x { overflow-x: auto; }
.paginacion { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
@media print { .lateral, .contexto, .acciones, .filtros, .paginacion { display: none !important; } body { background: #fff; color: #000; } .tarjeta { box-shadow: none; border: 0; } }

.rejilla + .rejilla, .rejilla + .acciones, .rejilla + div { margin-top: .75rem; }

/* ==== Sistema de diseno v0.3: componentes (etapa 2). Aditivo: no altera las clases anteriores salvo fondos semanticos de etiquetas/avisos. ==== */
.btn[disabled], .btn:disabled { background: var(--fila-alt); color: var(--suave); border: 1px solid var(--borde); cursor: not-allowed; }
.btn-accion { min-height: 44px; padding-left: 1.25rem; padding-right: 1.25rem; }
.btn-contorno { background: transparent; color: var(--acento); border: 1px solid var(--acento); }
.btn-contorno:hover { background: var(--info-fondo); }
.btn-peligro { background: transparent; color: var(--error); border: 1px solid var(--error); }
.btn-peligro:hover { background: var(--error-fondo); }
.btn-texto { background: transparent; color: var(--acento); }
.btn-texto:hover { background: var(--info-fondo); }
.btn-icono { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 44px; min-height: 44px; padding: 0 .75rem; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); }
.btn-icono:hover { background: var(--fondo); }

/* etiquetas de estado: texto siempre visible, nunca solo color */
.etiqueta { font-weight: 500; }
.etiqueta.ok { background: var(--ok-fondo); }
.etiqueta.anulado { background: var(--error-fondo); }
.etiqueta.alerta { color: var(--alerta-texto); border-color: var(--alerta); background: var(--alerta-fondo); }
.etiqueta.info { color: var(--acento); border-color: var(--acento); background: var(--info-fondo); }
.etiqueta.neutro { color: var(--suave); border-color: var(--borde-fuerte); background: var(--fila-alt); }
.cuadre-ok { color: var(--ok); }
.cuadre-dif { color: var(--alerta-texto); font-weight: 600; }
.aviso-error { background: var(--error-fondo); }
.aviso-ok { background: var(--ok-fondo); }
.aviso-info { background: var(--info-fondo); }

/* pastillas de contexto */
.pastilla { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .65rem; border: 1px solid var(--borde); border-radius: var(--radio-chip); background: var(--fila-alt); font-size: .85rem; white-space: nowrap; }
.pastilla.ok { color: var(--ok); border-color: var(--ok); background: var(--ok-fondo); }
.pastilla.alerta { color: var(--alerta-texto); border-color: var(--alerta); background: var(--alerta-fondo); }

/* KPI */
.kpis { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 641px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); padding: .75rem .9rem; min-width: 0; }
.kpi > span { display: block; font-size: .8rem; color: var(--suave); }
.kpi > strong { display: block; margin-top: .15rem; font-family: var(--fuente-num); font-variant-numeric: tabular-nums; font-size: 1.4rem; font-weight: 500; overflow-wrap: anywhere; }
.kpi > small { display: block; margin-top: .1rem; font-size: .8rem; color: var(--suave); }
.kpi.error > strong { color: var(--error); }
.kpi.alerta > strong { color: var(--alerta-texto); }
.kpi.ok > strong { color: var(--ok); }

/* conmutador segmentado (p. ej. moneda local / extranjera) */
.segmentado { display: inline-flex; padding: 3px; background: var(--borde); border-radius: 10px; gap: 2px; }
.segmentado a, .segmentado button { display: inline-flex; align-items: center; min-height: 38px; padding: 0 1rem; border: 0; border-radius: var(--radio); background: transparent; color: var(--suave); font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; text-decoration: none; }
.segmentado .activo, .segmentado [aria-pressed="true"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: var(--sombra); }

/* tabla contable: cabecera fija, cifras mono, seleccion, anulados, densidad */
.region-tabla { overflow: auto; max-height: 34rem; }
.region-tabla:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.tabla-contable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); --fila-pad: var(--fila-normal); }
.tabla-contable.dens-comoda { --fila-pad: var(--fila-comoda); }
.tabla-contable.dens-normal { --fila-pad: var(--fila-normal); }
.tabla-contable.dens-compacta { --fila-pad: var(--fila-compacta); }
.tabla-contable th, .tabla-contable td { padding: var(--fila-pad) .75rem; border-bottom: 1px solid var(--borde-suave); text-align: left; vertical-align: middle; }
.tabla-contable thead th { position: sticky; top: 0; z-index: 1; background: var(--cabecera-tabla); border-bottom: 1px solid var(--borde); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); white-space: nowrap; }
.tabla-contable th.num, .tabla-contable td.num { text-align: right; }
.tabla-contable tbody tr:nth-child(even) { background: transparent; }
.tabla-contable tbody tr:hover { background: var(--fila-alt); }
.tabla-contable tbody tr.sel { background: var(--seleccion); box-shadow: inset 3px 0 0 var(--primario); }
.tabla-contable tbody tr.anulado td { color: var(--suave); }
.tabla-contable tbody tr.anulado td:not(.estado) { text-decoration: line-through; }
.tabla-contable .orden { display: inline-flex; gap: .25rem; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-decoration: none; }
.tabla-contable .orden:hover { color: var(--texto); }
.tabla-contable .enlace-doc { font-family: var(--fuente-num); font-weight: 500; }
.tabla-contable .cuadre { font-size: .8rem; white-space: nowrap; }
.pie-tabla { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .65rem 1rem; border-top: 1px solid var(--borde); background: var(--fila-alt); font-size: .85rem; color: var(--suave); }
.pie-tabla b { color: var(--texto); font-weight: 500; font-family: var(--fuente-num); }

/* mejora progresiva: elementos que solo existen con JavaScript / solo sin el */
.solo-js { display: none; }
.js .solo-js { display: block; }
.js .acciones.solo-js { display: flex; }
.js .sin-js { display: none; }

/* modal de confirmacion (accion destructiva); el comportamiento vive en assets/js/app.js */
.modal-capa { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 34, .55); }
.modal-capa[hidden] { display: none; }
.modal { width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; background: var(--superficie); color: var(--texto); border-radius: 12px; padding: 1.25rem; box-shadow: 0 12px 40px rgba(15, 23, 34, .4); display: flex; flex-direction: column; gap: .75rem; }
.modal h2 { margin: 0; font-size: 1.15rem; }
.modal p { margin: 0; color: var(--suave); }
.modal .acciones { justify-content: flex-end; margin-top: .25rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* boton de tema: muestra la luna en tema claro y el sol en tema oscuro */
.btn-tema { min-width: 36px; min-height: 36px; padding: 0; }
.btn-tema .ico-sol { display: none; }
:root[data-tema="oscuro"] .btn-tema .ico-sol { display: inline; }
:root[data-tema="oscuro"] .btn-tema .ico-luna { display: none; }
.js .btn-tema.solo-js { display: inline-flex; }
@media (min-width: 641px) and (max-width: 1100px) { .kpi > strong { font-size: 1.15rem; overflow-wrap: normal; } }
@media (max-width: 640px) { .kpi > strong { font-size: 1.2rem; overflow-wrap: normal; } }

/* impresion: siempre en claro y sin la estructura de pantalla, aun con el tema oscuro activo */
@media print {
  :root, :root[data-tema="oscuro"] {
    --fondo: #fff; --superficie: #fff; --texto: #000; --suave: #444; --borde: #bbb; --fila-alt: #fff; --cabecera-tabla: #eee; --borde-suave: #ddd; --borde-fuerte: #bbb;
    --ok: #1b7a43; --error: #b3261e; --seleccion: #fff; --ok-fondo: #fff; --error-fondo: #fff; --alerta-fondo: #fff; --info-fondo: #fff; color-scheme: light;
  }
  .app { display: block; }
  .btn-tema, .solo-js { display: none !important; }
  .contenido { max-width: none; padding: 0; }
}

/* ==== Nucleo comun (dashboard, modulos, usuarios, utilidades) ==== */
.cabecera-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: .75rem; }
.cabecera-pagina h1 { margin: 0 0 .25rem; }
.cabecera-pagina p { margin: 0; }
.barra-acciones { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dash-sub { margin: 1rem 0 .4rem; font-size: .85rem; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.form-estrecho { max-width: 46rem; }
.form-estrecho .acciones { display: flex; gap: .5rem; margin-top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.permisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .5rem .75rem; margin: .5rem 0; }
.permisos .check { align-items: flex-start; }
.usuario-acciones { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
.usuario-acciones input[type="password"] { min-width: 18rem; }
.fila-edicion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.centro { text-align: center; }
tr.inactiva td { color: var(--suave); font-style: italic; }
.bloque { border: 1px solid var(--borde); border-radius: var(--radio); padding: .9rem 1rem 1rem; margin: 0 0 1rem; }
.bloque legend { padding: 0 .4rem; font-weight: 600; font-size: .85rem; color: var(--suave); }
.check { display: inline-flex; align-items: center; gap: .45rem; color: var(--texto); font-size: .9rem; margin: 0; }
.check input { width: auto; }
.opciones { display: flex; flex-direction: column; gap: .5rem; justify-content: end; }
.ancho-3 { grid-column: 1 / -1; }
/* Selector de modulos de la barra de contexto */
.selector-modulos { position: relative; }
.selector-modulos summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .75rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); font-size: .85rem; font-weight: 600; }
.selector-modulos summary::-webkit-details-marker { display: none; }
.selector-modulos[open] summary { background: var(--seleccion); }
.selector-modulos .menu-modulos { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 19rem; max-height: 70vh; overflow: auto; padding: .4rem; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 10px 28px rgba(15, 23, 42, .18); }
.menu-modulos a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .5rem .65rem; border-radius: var(--radio); color: var(--texto); text-decoration: none; font-size: .9rem; }
.menu-modulos a:hover, .menu-modulos a:focus-visible { background: var(--seleccion); }
.menu-modulos a.activo { font-weight: 700; }
.menu-modulos .etiqueta { font-size: .7rem; }
.menu-modulos .mm-mod > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .5rem .65rem; border-radius: var(--radio); font-size: .9rem; }
.menu-modulos .mm-mod > summary::-webkit-details-marker { display: none; }
.menu-modulos .mm-mod > summary::after { content: "▾"; margin-left: auto; padding-left: .5rem; opacity: .6; }
.menu-modulos .mm-mod[open] > summary::after { content: "▴"; }
.menu-modulos .mm-mod > summary:hover, .menu-modulos .mm-mod > summary.activo { background: var(--seleccion); font-weight: 700; }
.menu-modulos .mm-ops { display: flex; flex-direction: column; padding: 0 0 .3rem 1rem; border-left: 2px solid var(--borde-suave); margin-left: .9rem; }
.menu-modulos .mm-ops a { padding: .3rem .6rem; font-size: .85rem; }
.menu-modulos .mm-grupo { margin: .35rem .6rem 0; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--suave, #64748b); }
.menu-modulos hr { border: 0; border-top: 1px solid var(--borde-suave); margin: .3rem 0; }
@media (max-width: 640px) { .selector-modulos .menu-modulos { position: fixed; left: 1rem; right: 1rem; min-width: 0; } }

/* Utilidades (calculadora y libreta) */
.dlg-util { width: min(22rem, calc(100vw - 2rem)); padding: 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); box-shadow: 0 16px 40px rgba(15, 23, 42, .3); }
.dlg-util::backdrop { background: rgba(15, 23, 42, .45); }
.dlg-util-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.calc-pantalla { display: block; padding: .6rem .8rem; margin-bottom: .6rem; text-align: right; font-family: var(--fuente-num); font-size: 1.6rem; background: var(--fila-alt); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.calc-teclas { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.calc-teclas button { min-height: 44px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; font-size: 1.05rem; cursor: pointer; }
.calc-teclas button:hover { background: var(--seleccion); }
.calc-teclas .k-op, .calc-teclas .k-fn { background: var(--cabecera-tabla); }
.calc-teclas .k-igual { background: var(--primario); color: #fff; border-color: var(--primario); }
.calc-teclas .k-cero { grid-column: span 2; }
.calc-ayuda { margin: .6rem 0 0; font-size: .75rem; }
#libreta-texto { width: 100%; resize: vertical; min-height: 12rem; }
@media print { .selector-modulos, .dlg-util, #btn-utilidades { display: none !important; } }
/* Logotipo de la empresa activa en la marca del menu: fondo claro (legible sobre el marino), proporciones intactas, se adapta al ancho disponible y al riel */
.logo.logo-cliente { flex: 0 0 auto; display: inline-flex; width: auto; height: auto; padding: 3px 5px; background: #fff; border-radius: 8px; }
.logo-cliente .logo-marca { display: block; width: auto; height: auto; max-height: 32px; max-width: 76px; object-fit: contain; }
.lateral.plegado .logo-cliente .logo-marca, .lateral:not(.expandido) .logo-cliente .logo-marca { max-width: calc(var(--lateral-riel) - 24px); }
@media (max-width: 760px) { .lateral.plegado .logo-cliente .logo-marca { max-width: 76px; } }

/* barra global del sistema (menu superior del original) y barra de configuracion de cada modulo */
.barra-global { display: flex; flex-wrap: wrap; gap: .15rem; padding: .2rem .5rem; border-bottom: 1px solid var(--borde); background: var(--fila-alt); font-size: .85rem; }
.barra-global .bg-menu { position: relative; }
.barra-global summary { list-style: none; cursor: pointer; padding: .2rem .7rem; border-radius: var(--radio-chip, 6px); }
.barra-global summary::-webkit-details-marker { display: none; }
.barra-global summary:hover, .barra-global .bg-menu[open] summary { background: var(--borde); }
.barra-global .bg-lista { position: absolute; z-index: 30; top: 100%; left: 0; min-width: 14rem; display: flex; flex-direction: column; padding: .25rem; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.barra-global .bg-lista a { padding: .35rem .6rem; text-decoration: none; color: inherit; border-radius: 6px; white-space: nowrap; }
.barra-global .bg-lista a:hover, .barra-global .bg-lista button:hover { background: var(--fila-alt); }
.barra-global .bg-lista form { margin: 0; display: block; }
.barra-global .bg-lista button { appearance: none; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; width: 100%; padding: .35rem .6rem; border-radius: 6px; white-space: nowrap; cursor: pointer; }
.barra-config { margin: 0 0 .75rem; flex-wrap: wrap; }
@media print { .barra-global, .barra-config { display: none; } }

/* Lineas generadas automaticamente por el sistema (credito/debito fiscal, IT, ajuste por diferencia de cambio): en verde, como en el original. */
tr.linea-auto td, tr.linea-auto td * { color: var(--ok); }
:root[data-tema="oscuro"] tr.linea-auto td, :root[data-tema="oscuro"] tr.linea-auto td * { color: #6fd39a; }
.dash-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
/* marca de agua: el fenix con la balanza (marca-agua.svg, ya con su transparencia), fijo al centro de la ventana y sin bloquear clics; no se imprime */
body::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: url("../img/marca-agua.svg") center 55% / min(70vmin, 640px) no-repeat; }
@media print { body::after { display: none; } }
.logo-fenix { flex: 0 0 auto; width: 34px; height: auto; display: block; }