/* Capa final de identidad (marca ImportHub) y colores de estado. Se carga DESPUÉS de design-system.css.
   - Marca: --marca es el verde del logo (decorativo). --acento y derivados los recalcula js/marca.js según el
     color de marca de la empresa, garantizando contraste AA. Los valores de aquí son el respaldo (verde ImportHub).
   - Estado: significado fijo e independiente de la marca (verde = bien, ámbar = atención, rojo = error/acción,
     azul = en curso, gris = inactivo/anulado). Todos cumplen contraste AA como texto sobre su fondo suave. */
:root,:root:not([data-theme="dark"]){
  --marca:#a3ce38;--sobre-marca:#2b2926;--marca-ink:#4f4b48;
  --acento:#617c1f;--acento-fuerte:#415315;--acento-suave:#f5f9eb;--acento-borde:#d3e3ab;
  --ground:#fafbf8;--surface:#fff;--surface-2:#fbfcfa;--surface-3:#f2f4ef;
  --line:#e8ebe4;--line-fuerte:#d5dacd;
  --ink:#2e2b28;--ink-2:#55524d;--ink-3:#6b6862;
  --bien:#0f7a55;--bien-suave:#e3f4ec;
  --alerta:#8f5400;--alerta-suave:#fff2d4;
  --mal:#b3303c;--mal-suave:#fdeaec;
  --azul:#1f5fae;--azul-suave:#e8f1fb;
  --neutro:#59606b;--neutro-suave:#eceef1;
  --riel-bg:#fff;--riel-ink:#3d3a37;--riel-ink-2:#6b6862;--riel-activo:var(--acento-suave);--riel-hover:#f4f6f0;
  /* Tonos "vivos" para cifras GRANDES e iconos (WCAG pide solo 3:1 en texto grande): verde, ámbar y rojo normales */
  --bien-vivo:#1a9d5a;--alerta-vivo:#cc7400;--mal-vivo:#dc3a3f;
  --btn-pri:var(--acento);--btn-pri-hover:var(--acento-fuerte);
}
/* Foco visible y consistente (accesibilidad de teclado) */
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 35%,transparent);outline:none}

/* ---------- Navegación e identidad ---------- */
.riel{background:#fff;border-right:1px solid var(--line);box-shadow:none}
.marca-logo{width:52px;height:52px;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
.marca-logo img{width:100%;height:100%;object-fit:contain}
body.sidebar-colapsado .marca-logo{width:42px;height:42px}
.marca-nom{color:var(--marca-ink);font-weight:700}
.marca-sub{color:var(--acento);letter-spacing:.16em}
.empresa-sidebar{border-color:var(--line);background:var(--surface-2)}
.empresa-avatar{background:var(--acento-suave);color:var(--acento-fuerte);border:1px solid var(--acento-borde)}
.menu-etiqueta,.grupo-head{color:var(--ink-3)}
.grupo-head:hover{color:var(--acento-fuerte);background:var(--acento-suave)}
.grupo.abierto>.grupo-head,.grupo.abierto>.grupo-head .chev{color:var(--acento-fuerte)}
.nav{color:var(--riel-ink)}.nav-icon{color:var(--ink-3)}
.nav:hover{background:var(--riel-hover);color:var(--acento-fuerte)}
.nav.activo{background:var(--acento-suave);color:var(--acento-fuerte);box-shadow:inset 4px 0 var(--marca);font-weight:650}
.nav.activo .nav-icon{color:var(--acento)}
.riel-pie{color:var(--ink-3)}
.riel #riel-usuario .btn{color:var(--riel-ink);background:var(--surface-2);border-color:var(--line)}
.btn-colapsar{color:var(--ink-2)}

/* ---------- Encabezado y paneles ---------- */
.breadcrumb span,.kicker{color:var(--acento)}
.dashboard-meta{color:var(--ink-2)}.dashboard-meta i{background:var(--marca)}
.top-avatar{background:var(--acento-suave);color:var(--acento-fuerte)}
.kpi-icon{background:var(--acento-suave);color:var(--acento)}
.kpi-lbl{color:var(--ink-2)}
th{background:var(--surface-2);color:var(--ink-2)}
tbody tr:hover{background:var(--acento-suave)}
.sub-tab.activo{color:var(--acento-fuerte);border-bottom-color:var(--marca)}
a{color:var(--acento)}

/* ---------- Botones: acción principal en el verde oscuro de la marca (distinto del esmeralda de "aprobado") ---------- */
.btn-pri{background:var(--btn-pri);border-color:var(--btn-pri);color:#fff;box-shadow:0 2px 6px color-mix(in srgb,var(--acento) 22%,transparent)}
.btn-pri:hover{background:var(--btn-pri-hover);border-color:var(--btn-pri-hover)}
.btn-pri:focus-visible{outline-color:var(--marca)}
.btn-mal{color:var(--mal);border-color:color-mix(in srgb,var(--mal) 35%,transparent)}
#ia-fab{background:var(--btn-pri);box-shadow:0 6px 16px color-mix(in srgb,var(--acento) 30%,transparent)}.ia-cab{background:var(--btn-pri)}

/* ---------- Acceso (login) ---------- */
#login-ov{background:linear-gradient(145deg,#f7f8f4,#eef2e4)}
.login-card:before{background:var(--marca);width:56px}
.login-card .login-marca{display:block;margin:0 auto 14px;width:150px;max-width:70%;height:auto}
.login-card .login-marca--almaric{width:84px;border-radius:20px;margin-bottom:10px}
/* Marca Almaric (empresa sin logo propio): fondo azul claro y blanco */
body.marca-almaric #login-ov{background:linear-gradient(145deg,#f5f8fd,#e3ecf8)}
body.marca-almaric .login-logo{color:var(--acento);font-size:22px;margin-bottom:2px}
body.marca-almaric{--ground:#f7f9fc;--surface-2:#f9fbfe;--surface-3:#eef2f8;--line:#e3e9f1;--line-fuerte:#cfd8e5;--riel-hover:#f1f5fb}
.login-logo{color:var(--marca-ink);font-weight:700}

/* ---------- Estados (chips): significado universal, independiente de la marca ---------- */
.chip{font-weight:600}
/* Verde: aprobado / pagado / cobrado / cuadrado / verificado / cerrado correcto */
.chip.PAGADA,.chip.PAGADO,.chip.COBRADO,.chip.COMPLETADO,.chip.COMPLETA,.chip.SYNCED,.chip.VALIDADO,.chip.VERIFICADO,.chip.FACTURADO,
.chip.APROBADO,.chip.APROBADA,.chip.CUADRADO,.chip.CERRADO,.chip.CONCILIADO,.chip.CONCILIADA,.chip.APLICADO,.chip.ACTIVO,.chip.IMPORTADO,
.chip.ENTREGADO,.chip.ENTREGADA,.chip.SALDADO,.chip.LIQUIDADA,.chip.RECIBIDA,.chip.SUSTENTADO{background:var(--bien-suave);color:var(--bien);border-color:color-mix(in srgb,var(--bien) 25%,transparent)}
/* Ámbar: pendiente / por vencer / requiere atención */
.chip.PENDIENTE,.chip.RECIBIDO,.chip.EN_PREPARACION,.chip.PENDING_SYNC,.chip.POR_VENCER,.chip.PARCIAL,.chip.EN_TRANSITO,.chip.POR_CONCILIAR,
.chip.REVISAR,.chip.CONFLICT,.chip.ABIERTO,.chip.PENDIENTE_APROBACION,.chip.SOLICITADA,.chip.EN_REVISION{background:var(--alerta-suave);color:var(--alerta);border-color:color-mix(in srgb,var(--alerta) 25%,transparent)}
/* Rojo: rechazado / vencido / error / diferencia: exige acción */
.chip.RECHAZADO,.chip.RECHAZADA,.chip.VENCIDO,.chip.VENCIDA,.chip.DEVUELTO,.chip.ERROR,.chip.SYNC_ERROR,.chip.CON_DIFERENCIA,.chip.RETRASADO,.chip.MORA{background:var(--mal-suave);color:var(--mal);border-color:color-mix(in srgb,var(--mal) 25%,transparent)}
/* Azul: en curso / informativo */
.chip.EN_PROCESO,.chip.EMBARCADO,.chip.ENVIADO,.chip.ENVIADA,.chip.EN_FABRICACION,.chip.CONFIRMADO,.chip.CONFIRMADA,.chip.EN_PROGRESO,.chip.INFO{background:var(--azul-suave);color:var(--azul);border-color:color-mix(in srgb,var(--azul) 25%,transparent)}
/* Gris: borrador / inactivo / ANULADO (contablemente "no existe"; el rojo se reserva para lo que pide acción) */
.chip.ANULADA,.chip.ANULADO,.chip.CANCELADO,.chip.CANCELADA,.chip.BORRADOR,.chip.INACTIVO,.chip.INACTIVA,.chip.COTIZACION,.chip.PREFACTURA{background:var(--neutro-suave);color:var(--neutro);border-color:color-mix(in srgb,var(--neutro) 22%,transparent)}
.chip.ANULADA,.chip.ANULADO,.chip.CANCELADO,.chip.CANCELADA{text-decoration:line-through}

/* Utilidades de estado reutilizables (reemplazan los colores escritos a mano en pantallas) */
.t-bien{color:var(--bien)}.t-alerta{color:var(--alerta)}.t-mal{color:var(--mal)}.t-info{color:var(--azul)}.t-neutro{color:var(--neutro)}
.t-anulado{color:var(--neutro);text-decoration:line-through}

/* Más suave a la vista: paneles sin sombra marcada, títulos sin peso excesivo */
.panel,.kpi{box-shadow:0 1px 2px rgba(46,43,40,.04)}
.dashboard-hero h2{font-weight:600;color:var(--ink)}
.kpi-val{font-weight:550}

/* Cifras grandes de los KPI con los colores de semáforo normales */
.kpi-val.bien{color:var(--bien-vivo)}.kpi-val.alerta{color:var(--alerta-vivo)}.kpi-val.mal{color:var(--mal-vivo)}
.kpi-nota.mal,.kpi-nota .mal{color:var(--mal-vivo)}

/* Menos peso visual: tipografía más ligera y fondo más claro */
:root,:root:not([data-theme="dark"]){--ground:#fcfcfa;--ink:#34312e}
.dashboard-hero h2{font-size:30px;font-weight:560}
.tope h1{font-weight:560}
.kpi-val{font-size:24px;font-weight:500}
.kpi-lbl{font-weight:500}
.marca-nom{font-size:16px!important;font-weight:650}
.empresa-copy b{font-weight:600}
.menu-etiqueta,.grupo-head{font-weight:600;letter-spacing:.14em}
.nav{font-weight:450}
.empresa-sidebar{box-shadow:none}
.panel,.kpi{border-color:var(--line)}

/* ================= Legibilidad (auditoría 2026-10-14) =================
   Menos mayúsculas y espaciado forzado, letra mínima de 11px, más aire en tablas. */
.riel .empresa-sidebar{display:none!important}                    /* el nombre ya está arriba junto al logo */
.marca-sub,.marca-sub:empty:after{text-transform:none;letter-spacing:.02em;font-size:11.5px;font-weight:600}
.menu-etiqueta{text-transform:none;letter-spacing:.01em;font-size:12px;font-weight:600;color:var(--ink-3);padding:4px 16px 0}
.grupo-head{text-transform:none;letter-spacing:.005em;font-size:13px;font-weight:600;color:var(--ink-2);padding:12px 14px 6px}
.grupo-head:hover{color:var(--acento-fuerte)}
.grupo-items .nav{font-size:13px}
.kicker{text-transform:none;letter-spacing:.02em;font-size:12.5px;font-weight:600}
.breadcrumb{font-size:12px}
.estado-sistema,.dashboard-meta{font-size:12px}
.kpi-lbl{font-size:12.5px;color:var(--ink-2)}
.kpi-nota,.kpi-nota span{font-size:11.5px}
.kpi-icon{background:var(--acento-suave);color:var(--acento)}
/* Tablas: encabezados legibles y filas con aire */
table{font-size:13px}
th{font-size:11.5px;text-transform:none;letter-spacing:.01em;font-weight:600;padding:11px 14px;color:var(--ink-2);background:var(--surface-3)}
td{padding:11px 14px}
tbody tr:nth-child(even){background:color-mix(in srgb,var(--surface-2) 70%,transparent)}
.chip{font-size:10.5px;padding:4px 10px;letter-spacing:.03em}
/* Campos con borde visible */
input,select,textarea{border-color:var(--line-fuerte)}
/* Pie y textos auxiliares */
.riel-pie,.pie-legal{font-size:11.5px}
@media(orientation:landscape) and (max-height:500px){.kpi-lbl{font-size:11.5px}}

/* Cabecera del menú: logo y nombre centrados entre sí; el rótulo "Gestión empresarial" se retira (el menú ya dice "Espacio de trabajo") */
.marca{align-items:center}
.marca-inicio{display:flex;align-items:center;gap:inherit;flex:1;min-width:0;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.marca-inicio>div:not(.marca-logo){flex:1;min-width:0}
.marca-inicio:focus-visible{outline:2px solid var(--acento);outline-offset:4px;border-radius:4px}
body.sidebar-colapsado .marca-inicio{justify-content:center}
body.sidebar-colapsado .marca-inicio>div:not(.marca-logo){display:none}
@media(max-width:760px){body.sidebar-colapsado .marca-inicio>div:not(.marca-logo){display:block}}
.marca-sub,.marca-sub:empty:after{display:none!important;content:none}

/* ================= Accesibilidad y consistencia (WCAG 2.1 AA) ================= */
/* Saltar al contenido: invisible hasta que recibe el foco con Tab */
.saltar-contenido{position:fixed;left:12px;top:-60px;z-index:1000;background:var(--btn-pri);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;transition:top .15s}
.saltar-contenido:focus{top:12px}
main.lienzo:focus{outline:none}
/* El color nunca va solo: cada estado lleva además un símbolo */
.chip.chip-bien::before,.chip.PAGADA::before,.chip.PAGADO::before,.chip.COBRADO::before,.chip.COMPLETADO::before,.chip.SYNCED::before,.chip.VALIDADO::before,.chip.VERIFICADO::before,.chip.FACTURADO::before,.chip.APROBADO::before,.chip.APROBADA::before,.chip.CUADRADO::before,.chip.CERRADO::before,.chip.CONCILIADO::before,.chip.APLICADO::before,.chip.ACTIVO::before,.chip.IMPORTADO::before,.chip.ENTREGADO::before,.chip.SALDADO::before{content:"✓\a0"}
.chip.chip-alerta::before,.chip.PENDIENTE::before,.chip.RECIBIDO::before,.chip.EN_PREPARACION::before,.chip.PENDING_SYNC::before,.chip.POR_VENCER::before,.chip.PARCIAL::before,.chip.EN_TRANSITO::before,.chip.REVISAR::before,.chip.CONFLICT::before,.chip.ABIERTO::before{content:"●\a0";font-size:.8em}
.chip.chip-mal::before,.chip.RECHAZADO::before,.chip.RECHAZADA::before,.chip.VENCIDO::before,.chip.VENCIDA::before,.chip.DEVUELTO::before,.chip.ERROR::before,.chip.SYNC_ERROR::before,.chip.CON_DIFERENCIA::before,.chip.RETRASADO::before{content:"!\a0";font-weight:800}
.chip.chip-azul::before,.chip.EN_PROCESO::before,.chip.EMBARCADO::before,.chip.ENVIADO::before,.chip.CONFIRMADO::before{content:"→\a0"}
.chip.chip-neutro::before,.chip.ANULADA::before,.chip.ANULADO::before,.chip.CANCELADO::before,.chip.BORRADOR::before,.chip.INACTIVO::before{content:"–\a0"}
/* Estado de carga uniforme */
.vacio.cargando{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-2)}
.vacio.cargando::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line-fuerte);border-top-color:var(--acento);animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
/* Estado vacío y de error con el mismo ritmo */
.vacio{text-align:center;line-height:1.5}
/* Respeta a quien pide menos movimiento */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.btn:hover{transform:none}}
/* Pantallas táctiles: objetivos de toque de 44px */
@media(pointer:coarse){.btn,.nav,.sub-tab,select,input:not([type=checkbox]):not([type=radio]){min-height:44px}.btn-sm{min-height:40px}}
/* Texto resaltado y selección con la marca */
::selection{background:color-mix(in srgb,var(--marca) 45%,#fff);color:var(--ink)}
/* Alto contraste del sistema operativo */
@media(forced-colors:active){.chip,.btn,.kpi,.panel{border:1px solid CanvasText}.nav.activo{outline:2px solid Highlight}}

/* Cifras de KPI: nunca se parten en dos líneas; la letra se ajusta al ancho de su tarjeta */
.kpis>.kpi{container-type:inline-size}   /* solo en rejillas con ancho definido: en contenedores flex colapsaba la tarjeta */
.kpi{min-width:150px}
.kpi-val{white-space:nowrap;font-size:clamp(16px,9.5cqw,24px)}
.kpis-secundarios .kpi-val{font-size:clamp(16px,9cqw,21px)}
.kpi-val[style*="font-size"]{white-space:normal}

/* ================= Ajuste de cuadrícula (2026-10-14) =================
   Columnas numéricas, fechas y acciones nunca se parten; filas de una sola altura; contenedores sin desbordes. */
td.num,th.num,.num{white-space:nowrap;font-variant-numeric:tabular-nums}
th{white-space:nowrap}
td{vertical-align:middle}
td .btn,td .btn-sm,.btn-sm{white-space:nowrap}
td:last-child:has(.btn){white-space:nowrap}
td,th{padding-left:12px;padding-right:12px}
table{border-collapse:separate;border-spacing:0}
tbody tr td{border-bottom:1px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
.chip{white-space:nowrap}
/* Fechas y códigos cortos en una sola línea */
td[data-f],td.fecha,td.cod{white-space:nowrap}
/* Las tablas anchas hacen scroll dentro de su panel, nunca la página completa */
.tabla-wrap{overflow-x:auto;max-width:100%}
.panel{min-width:0;max-width:100%}
.contenido>*{min-width:0}
/* Rejillas de tarjetas parejas */
.kpis,.grid-cards{align-items:stretch}
.kpi{display:flex;flex-direction:column}
.kpi-nota{margin-top:auto;padding-top:6px}
/* Barras de filtros alineadas */
.busca{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.busca>*{margin:0}
.busca select,.busca input{min-height:38px}
/* Encabezado de panel: título a la izquierda, acciones a la derecha, sin saltos */
.panel-tope{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-tope h2{margin:0}
/* Pie fijo no tapa el último contenido */
.contenido{padding-bottom:64px}
/* Celdas cortas en una línea; textos largos con ancho mínimo (se asigna en js/a11y.js) */
td.nw{white-space:nowrap}
td.tx{min-width:170px}

/* Aire entre una columna numerica y la siguiente (el importe no debe tocar la etiqueta de estado) */
td.num,th.num{padding-right:22px}
td.num+td,th.num+th{padding-left:22px}
th.num{text-align:right}
/* Etiqueta de moneda (DOP/USD): informativa, neutra */
.chip.chip-moneda{background:var(--neutro-suave);color:var(--neutro);border-color:color-mix(in srgb,var(--neutro) 22%,transparent)}
.chip.chip-moneda::before{content:none}
/* Fila de KPIs principales: se reparte sola (5 tarjetas en el panel de proyectos); en pantallas chicas conserva su regla */
@media(min-width:1181px){.kpis-principales{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}

/* ===== Nomina de sueldos: pantalla amplia, la tabla cabe sin recorrer de lado ===== */
#modal.modal-nomina{max-width:1560px!important;width:97vw;max-height:94vh}
.modal-nomina .modal-cuerpo{padding:20px 24px}
.modal-nomina .tabla-wrap{overflow-x:auto}
.modal-nomina table{min-width:980px}
.modal-nomina input[type=number]{min-width:110px}

/* ===== Ficha del empleado ===== */
#modal.modal-ficha{max-width:1100px!important;width:96vw;max-height:94vh}
.modal-ficha .modal-cuerpo{padding:18px 24px}
.ef-seccion{font-size:12.5px;font-weight:700;color:var(--acento-fuerte);letter-spacing:.01em;margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.ef-seccion:first-child{margin-top:2px}
.ef-nota{font-size:11.5px;color:var(--ink-3);margin-top:4px;line-height:1.4}
.ef-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:6px}

/* Documentos impresos: las reglas de columnas de pantalla no deben ensancharlos */
.doc td.tx,.doc td.nw{min-width:0}
.doc table th{white-space:normal}
/* Nomina agrupada por departamento */
.nom-grp td{background:var(--acento-suave);color:var(--acento-fuerte);font-weight:700;text-align:left!important;font-size:12px}
.doc .nom-grp td{background:#e4e4e4;color:#000;border:1px solid #999}
.doc .nom-tabla{font-size:11px}
.doc .nom-tabla th,.doc .nom-tabla td{padding:4px 6px}