/* 🎨 ESTILOS COMPARTIDOS DEL PANEL DE LA CENTRAL (index.html = tablero, opciones.html = gestión).
   Antes vivían adentro de central.html; al dividir el panel en dos pantallas se movieron acá para
   no mantener dos copias. Sigue siendo todo local: cero CDNs, cero fuentes externas — el panel
   tiene que abrir igual desde el VPS, desde localhost en desarrollo y sin internet. */

:root {
    --fondo: #0b0d10;
    --panel: #13161b;
    --tarjeta: #181c22;
    --hundido: #0f1216;
    --borde: #262c35;
    --borde-suave: #1e242c;
    --texto: #e8eaed;
    --texto-2: #98a2b0;
    --texto-3: #6b7583;
    --acento: #14b8a6;
    --acento-claro: #2dd4bf;
    --acento-oscuro: #0d9488;
    --acento-fondo: rgba(20, 184, 166, 0.12);
    --acento-borde: rgba(20, 184, 166, 0.35);
    --ok: #34d399;
    --alerta: #fbbf24;
    --peligro: #f87171;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
    background: var(--fondo);
    background-image: radial-gradient(1100px 480px at 50% -220px, rgba(20,184,166,0.09), transparent 70%);
    background-repeat: no-repeat;
    color: var(--texto);
    min-height: 100vh;
    font-size: 14px;
    line-height: 1.5;
}
.shell { max-width: 1240px; margin: 0 auto; padding: 26px 22px 40px; }

/* ===== Cabecera ===== */
.topbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; }
.marca { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.marca h1 { margin: 0; font-size: 21px; font-weight: 650; letter-spacing: -0.3px; }
.marca h1 span { color: var(--acento-claro); font-weight: 350; }
.marca .bajada { margin: 1px 0 0; font-size: 12.5px; color: var(--texto-2); }
.logo { width: 42px; height: 42px; flex: none; filter: drop-shadow(0 0 14px rgba(20,184,166,.35)); }

.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
        font-size: 12px; font-weight: 600; border: 1px solid var(--borde); background: var(--panel); color: var(--texto-2); }
.chip .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-3); flex: none; }
.chip.en-linea { color: var(--ok); border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.08); }
.chip.en-linea .punto { background: var(--ok); box-shadow: 0 0 8px rgba(52,211,153,.7); }
.chip.sin-linea { color: var(--peligro); border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.07); }
.chip.sin-linea .punto { background: var(--peligro); }
.chip.modo { color: var(--acento-claro); border-color: var(--acento-borde); background: var(--acento-fondo); }

.btn-icono { background: var(--panel); border: 1px solid var(--borde); color: var(--texto-2); width: 36px; height: 36px;
             border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.btn-icono:hover { color: var(--acento-claro); border-color: var(--acento-borde); }
.btn-icono svg { width: 17px; height: 17px; }

/* Botón de navegación de la cabecera (Opciones / Volver al tablero) */
.btn-nav { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--borde);
           color: var(--texto); padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 600;
           font-family: inherit; cursor: pointer; transition: .15s; text-decoration: none; }
.btn-nav:hover { color: var(--acento-claro); border-color: var(--acento-borde); background: var(--acento-fondo); }
.btn-nav svg { width: 16px; height: 16px; }

.orden-gasto-dialog { max-width:780px; width:90%; max-height:85vh; overflow:auto; padding:28px;
    border:1px solid var(--borde); border-radius:16px; background:var(--panel); color:var(--texto); }
.orden-gasto-dialog::backdrop { background:rgba(0,0,0,.75); }
.orden-gasto-dialog h2 { margin:0 0 14px; }
.orden-gasto-dialog p { margin:12px 0; line-height:1.5; }
.orden-gasto-dialog > button { margin:8px 8px 0 0; }
.orden-gasto-form { display:grid; grid-template-columns:1fr 2fr; gap:14px; margin:20px 0; }
.orden-gasto-form label { display:flex; flex-direction:column; gap:7px; }
.orden-gasto-form input { width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--borde);
    border-radius:8px; background:var(--fondo); color:var(--texto); font:inherit; }
.orden-gasto-form button { grid-column:1 / -1; justify-self:start; }
@media(max-width:540px) { .orden-gasto-form { grid-template-columns:1fr; } .orden-gasto-dialog { padding:18px; } }

/* ===== Pago dividido de facturas de proveedor ===== */
.pagos-proveedor { width:100%; color:var(--texto); }
.pp-encabezado { display:flex; align-items:center; gap:11px; margin:2px 0 13px; }
.pp-encabezado > div { min-width:0; }
.pp-encabezado b { display:block; font-size:14px; }
.pp-encabezado small { display:block; margin-top:2px; color:var(--texto-2); font-size:11.5px; }
.pp-icono { width:34px; height:34px; display:grid; place-items:center; flex:none; border-radius:9px; color:var(--acento-claro); background:var(--acento-fondo); border:1px solid var(--acento-borde); }
.pp-icono svg, .pp-agregar svg, .pp-quitar svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pp-resumen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; overflow:hidden; background:var(--borde); border:1px solid var(--borde); border-radius:10px; margin-bottom:12px; }
.pp-resumen > div:not(.pp-progreso) { min-width:0; padding:10px 12px; background:var(--hundido); }
.pp-resumen span { display:block; color:var(--texto-2); font-size:10px; text-transform:uppercase; letter-spacing:.45px; }
.pp-resumen b { display:block; margin-top:2px; overflow-wrap:anywhere; font-size:15px; font-variant-numeric:tabular-nums; }
.pp-resumen[data-estado="exacto"] .pp-restante b { color:var(--ok); }
.pp-resumen[data-estado="pendiente"] .pp-restante b { color:var(--alerta); }
.pp-resumen[data-estado="excedido"] .pp-restante b { color:var(--peligro); }
.pp-progreso { grid-column:1/-1; height:3px; background:var(--fondo); }
.pp-progreso i { display:block; height:100%; background:var(--acento); transition:width .18s,background .18s; }
.pp-resumen[data-estado="exacto"] .pp-progreso i { background:var(--ok); }
.pp-resumen[data-estado="excedido"] .pp-progreso i { background:var(--peligro); }
.pp-estado-sr { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.pp-partes { display:grid; gap:8px; }
.pp-parte { --pp-medio:#34d399; border:1px solid var(--borde); border-left:3px solid var(--pp-medio); border-radius:10px; padding:10px 12px 12px; background:rgba(15,18,22,.82); }
.pp-parte[data-medio="TRANSFERENCIA"] { --pp-medio:#60a5fa; }
.pp-parte[data-medio="MERCADO_PAGO"] { --pp-medio:#38bdf8; }
.pp-parte[data-medio="CHEQUE"] { --pp-medio:#c4b5fd; }
.pp-parte-cabecera { display:flex; align-items:center; justify-content:space-between; min-height:23px; margin-bottom:7px; }
.pp-parte-numero { color:var(--pp-medio); font-size:10px; font-weight:750; letter-spacing:.55px; text-transform:uppercase; }
.pp-quitar { width:27px; height:27px; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--texto-2); cursor:pointer; transition:.15s; }
.pp-quitar:hover:not(:disabled) { color:var(--peligro); background:rgba(248,113,113,.1); }
.pp-quitar:disabled { visibility:hidden; }
.pp-parte-cuerpo { display:grid; grid-template-columns:minmax(165px,1fr) minmax(160px,.8fr) auto; align-items:end; gap:9px; }
.pp-campo, .modal-campos .pp-campo { min-width:0; display:flex; flex-direction:column; gap:5px; margin:0; text-transform:none; letter-spacing:0; }
.pp-rotulo { color:var(--texto-2); font-size:10px; font-weight:700; letter-spacing:.45px; text-transform:uppercase; }
.pp-campo small { min-height:14px; color:var(--texto-2); font-size:10.5px; font-weight:400; line-height:1.3; text-transform:none; letter-spacing:0; }
.pp-select-wrap { position:relative; display:block; }
.pp-select { width:100%; height:39px; appearance:none; border:1px solid var(--borde); border-radius:7px; outline:none; padding:0 34px 0 11px; background:var(--fondo); color:var(--texto); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.pp-select:focus { border-color:var(--pp-medio); box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-medio) 18%,transparent); }
.pp-chevron { position:absolute; right:13px; top:14px; width:7px; height:7px; pointer-events:none; border-right:1.5px solid var(--texto-2); border-bottom:1.5px solid var(--texto-2); transform:rotate(45deg); }
.pp-importe { height:39px; display:flex; align-items:center; overflow:hidden; border:1px solid var(--borde); border-radius:7px; background:var(--fondo); }
.pp-importe:focus-within { border-color:var(--pp-medio); box-shadow:0 0 0 3px color-mix(in srgb,var(--pp-medio) 18%,transparent); }
.pp-importe b { padding-left:11px; color:var(--texto-2); font-size:14px; font-weight:500; }
.pp-importe input { width:100%; min-width:0; height:100%; border:0; outline:0; padding:0 10px 0 6px; background:transparent; color:var(--texto); font:inherit; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; }
.pp-completar { height:39px; border:1px solid var(--borde); border-radius:7px; padding:0 12px; background:var(--tarjeta); color:var(--texto-2); font:inherit; font-size:11px; font-weight:650; white-space:nowrap; cursor:pointer; }
.pp-completar:hover { color:var(--texto); border-color:var(--acento-borde); }
.pp-agregar { width:100%; min-height:40px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:9px; border:1px dashed var(--borde); border-radius:8px; background:transparent; color:var(--acento-claro); font:inherit; font-size:12px; font-weight:650; cursor:pointer; }
.pp-agregar:hover { border-color:var(--acento-borde); background:var(--acento-fondo); }
.pp-agregar svg { width:15px; height:15px; }
.pp-nota { display:flex; align-items:flex-start; gap:7px; margin-top:10px; color:var(--texto-2); }
.pp-nota > span { width:16px; height:16px; display:grid; place-items:center; flex:none; border:1px solid var(--borde); border-radius:50%; font-size:10px; font-weight:700; }
.pp-nota small { font-size:10.5px; line-height:1.45; }
.pago-proveedor-dialog { width:min(680px,calc(100vw - 28px)); max-height:calc(100vh - 32px); overflow:auto; padding:22px; border:1px solid var(--borde); border-radius:14px; background:var(--panel); color:var(--texto); box-shadow:0 22px 70px rgba(0,0,0,.52); }
.pago-proveedor-dialog::backdrop { background:rgba(3,5,8,.8); backdrop-filter:blur(2px); }
.pp-dialog-cab { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:17px; }
.pp-dialog-cab h3 { margin:2px 0 0; font-size:19px; }
.pp-dialog-eyebrow { color:var(--acento-claro); font-size:10px; font-weight:750; letter-spacing:.8px; text-transform:uppercase; }
.pp-dialog-cerrar { width:31px; height:31px; border:1px solid var(--borde); border-radius:8px; background:transparent; color:var(--texto-2); font-size:20px; line-height:1; cursor:pointer; }
.pp-dialog-cerrar:hover { color:var(--texto); border-color:var(--acento-borde); }
.pp-dialog-acciones { display:flex; justify-content:flex-end; gap:9px; margin-top:17px; }
.pp-error { min-height:17px; margin:9px 0 0; color:var(--peligro); font-size:12px; }
@media(max-width:660px) {
    .pp-parte-cuerpo { grid-template-columns:1fr; }
    .pp-completar { width:100%; }
    .pp-resumen b { font-size:13px; }
    .pago-proveedor-dialog { padding:17px; }
}

/* ===== Pestañas ===== */
.tabs { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--borde); border-radius: 13px;
        padding: 5px; margin-bottom: 24px; overflow-x: auto; }
.tab-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: var(--texto-2);
           padding: 9px 16px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: 9px;
           transition: .15s; white-space: nowrap; }
.tab-btn svg { width: 16px; height: 16px; flex: none; }
.tab-btn:hover { color: var(--texto); background: rgba(255,255,255,.04); }
.tab-btn.active { color: var(--acento-claro); background: var(--acento-fondo); }
/* ===== Detalle de sucursal: menú de secciones a la izquierda ===== */
.det-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: start; }
.det-rail { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--borde);
            border-radius: 14px; padding: 10px; box-shadow: var(--sombra); position: sticky; top: 16px; }
.det-rail .tab-btn { width: 100%; justify-content: flex-start; text-align: left; padding: 10px 12px; border-radius: 10px; }
/* El contador (los "3 sin revisar") se va al borde derecho del botón, como en un menú de verdad. */
.det-rail .tab-btn .contador { margin-left: auto; }
.det-rail .tab-btn.active { font-weight: 650; }
.det-contenido { min-width: 0; }
/* El Dashboard vive suelto y las demás secciones comparten un marco. Cuando la activa es el
   Dashboard, ese marco se queda sin contenido y colgaba como una barra vacía al pie: se esconde
   salvo que adentro tenga la sección que se está mirando. */
.det-contenido > .panel:not(:has(> .tab-content.active)) { display: none; }
/* En pantalla angosta el menú vuelve a ser una fila que se desplaza: una columna de 236px se
   comería media pantalla del celular. */
@media (max-width: 880px) {
    .det-layout { grid-template-columns: 1fr; }
    .det-rail { position: static; flex-direction: row; overflow-x: auto; }
    .det-rail .tab-btn { width: auto; white-space: nowrap; }
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: aparecer .18s ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ===== Administración unificada (misma página, datos y acciones del tablero) ===== */
.admin-portada { margin-bottom: 20px; padding: 24px; border: 1px solid var(--acento-borde); border-radius: 16px;
                 background: linear-gradient(120deg, rgba(20,184,166,.12), rgba(20,184,166,.025)); }
.admin-portada[hidden] { display: none; }
.admin-portada h2 { margin: 4px 0 7px; font-size: clamp(22px, 3vw, 31px); letter-spacing: -.6px; }
.admin-portada p { max-width: 820px; margin: 0; color: var(--texto-2); }
.admin-eyebrow { color: var(--acento-claro); font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.modo-administracion .det-layout { grid-template-columns: 1fr; }
.admin-local-nav { display: flex; gap: 6px; overflow-x: auto; padding: 5px; margin-bottom: 18px;
                   border: 1px solid var(--borde); border-radius: 13px; background: var(--panel); }
.admin-local-nav button, .admin-atajos button { border: 0; border-radius: 9px; padding: 10px 15px; font-family: inherit; font-size: 13px; font-weight: 600;
                                              color: var(--texto-2); background: transparent; cursor: pointer; white-space: nowrap; }
.admin-local-nav button:hover, .admin-local-nav button.activa,
.admin-atajos button:hover { color: var(--acento-claro); background: var(--acento-fondo); }
.admin-seccion { display: none; }
.admin-seccion.activa { display: block; animation: aparecer .18s ease-out; }
.admin-resumen-encabezado { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.admin-resumen-encabezado h3 { margin: 3px 0 0; font-size: 18px; }
.admin-kpis { margin-bottom: 14px; }
.admin-resumen-encabezado .admin-deposito { width:auto; flex-shrink:0; padding:10px 18px; }
.admin-hoy-kpis.kpi-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); }
.admin-hoy-kpis .kpi-card { min-width:0; }
.admin-hoy-kpis .kpi-card > div:last-child { min-width:0; flex:1; container-type:inline-size; }
.admin-hoy-kpis .kpi-card .val { font-size:clamp(17px,9cqi,25px); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.admin-hoy-kpis .sub { overflow-wrap:anywhere; }
/* Aprovechar el ancho del tablero sin desplazar el riel ni comprimir los importes. */
body[data-rail="tablero"] > .shell { max-width: 1540px; }
.admin-ordenes-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:12px; }
.admin-orden { min-width:0; padding:16px; border:1px solid var(--borde); border-radius:12px; background:var(--hundido); overflow-wrap:anywhere; }
.admin-orden-cabecera { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.admin-orden-cabecera h4 { flex:1; min-width:150px; margin:0; font-size:14px; line-height:1.5; }
.admin-orden-estado { border:1px solid var(--borde); border-radius:20px; padding:4px 9px; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--texto-2); }
.admin-orden-estado.confirmada { color:var(--ok); background:rgba(34,197,94,.08); }
.admin-orden-estado.pendiente { color:var(--alerta); background:rgba(245,158,11,.08); }
.admin-orden-meta { margin:8px 0; color:var(--texto-2); font-size:11px; }
.admin-orden-resultado { margin:0; font-size:12px; line-height:1.6; }
.admin-orden details { margin-top:12px; font-size:12px; }
.admin-orden summary { cursor:pointer; color:var(--acento-claro); margin-bottom:6px; }
.caja-acciones-cabecera { flex-wrap:wrap; gap:12px; }
.caja-acciones-cabecera .btn { flex-shrink:0; width:auto; padding:10px 18px; }
.admin-ajustes-barra { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.admin-ajustes-barra[hidden] { display:none; }
.admin-ajustes-barra h3 { margin:0; }
.admin-ajustes-barra .btn { width:auto; display:inline-flex; align-items:center; gap:8px; }
.admin-ajustes-barra svg { flex:none; }
.admin-ajuste-bloque { margin-bottom:16px; }
.admin-ajuste-bloque h3 { margin:0 0 12px; }
.admin-ajuste-bloque .acciones-fila { align-items:end; flex-wrap:wrap; }
.admin-ajuste-bloque .btn { width:auto; }
#tituloAjustesAdministracion, #btnAjustesAdministracion { scroll-margin-top: 28px; }
.admin-ajuste-bloque label:has(input[type="checkbox"]) { flex-direction:row; align-self:center; text-transform:none; letter-spacing:0; font-size:13px; }
.admin-ajuste-bloque input[type="checkbox"] { width:18px; height:18px; margin:0; accent-color:var(--acento); flex:none; }
.admin-flujo { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--acento-borde);
               background: var(--acento-fondo); color: var(--texto-2); }
.admin-flujo b { color: var(--texto); }
.admin-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.admin-atajos button { border: 1px solid var(--borde); background: var(--panel); }
.admin-bloque-titulo { margin: 24px 0 10px; font-size: 16px; }
.admin-bloque-titulo:first-child { margin-top: 0; }
.admin-cuentas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.admin-cuentas-grid article { padding: 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--hundido); }
.admin-cuentas-grid h4 { margin: 10px 0 5px; font-size: 15px; }
.admin-cuentas-grid p { min-height: 60px; margin: 0 0 14px; color: var(--texto-2); font-size: 12.5px; }
.estado-disponibilidad { display: inline-flex; border-radius: 999px; padding: 3px 8px; font-size: 10.5px; font-weight: 750; }
.estado-disponibilidad.disponible { color: var(--ok); background: rgba(52,211,153,.1); }
.estado-disponibilidad.proximo { color: var(--texto-2); background: rgba(255,255,255,.05); }
@media (max-width: 760px) {
    .admin-cuentas-grid { grid-template-columns: 1fr; }
    .admin-cuentas-grid p { min-height: 0; }
    .admin-resumen-encabezado { align-items: flex-start; flex-direction: column; }
}

/* 💵 La banda de una sola línea que encabeza un panel y dice qué hay que hacer con él.
   Existe porque el dato solo no alcanza: "$158.200 a depositar" no le dice a nadie que tiene que
   contar la plata cuando el encargado la traiga. */
.banda-aviso { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 14px 16px;
               border-radius: 12px; border: 1px solid var(--borde); background: var(--hundido);
               font-size: 12.8px; color: var(--texto-2); margin-bottom: 16px; }
.banda-aviso.urgente { border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.07); }
.banda-aviso .texto { flex: 1 1 260px; line-height: 1.5; }
.banda-aviso .monto { font-size: 21px; font-weight: 750; letter-spacing: -0.5px; color: var(--alerta);
                      margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.banda-aviso b { color: var(--texto); }

/* Separador de bloques dentro de un panel, para no abrir otro panel por cada cosa. */
.sub-titulo { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
              color: var(--texto-3); margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--borde-suave); }
.sub-titulo:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* Fila de controles al pie de un panel. Acá los botones van al lado de los campos, así que
   pierden el ancho completo que .btn trae para los formularios en columna. */
.acciones-fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 18px;
                 padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.acciones-fila .btn, .banda-aviso .btn { width: auto; padding: 10px 18px; white-space: nowrap; }
.acciones-fila label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700;
                       color: var(--texto-2); text-transform: uppercase; letter-spacing: .6px; }

/* Los campos sueltos de un panel (fechas, tokens, montos). Tenían la clase puesta en el HTML pero
   ninguna regla detrás: salían con el estilo crudo del navegador arriba del panel oscuro. */
.input-fecha { background: var(--hundido); border: 1px solid var(--borde); color: var(--texto);
               padding: 9px 12px; font-size: 13px; font-family: inherit; border-radius: 9px;
               outline: none; transition: .15s; }
.input-fecha:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.input-fecha::placeholder { color: var(--texto-3); }

/* ===== Tarjetas / grillas ===== */
.grid-layout { display: grid; grid-template-columns: 370px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .grid-layout { grid-template-columns: 1fr; } }
.panel { background: linear-gradient(180deg, var(--tarjeta), var(--panel)); border: 1px solid var(--borde);
         border-radius: 14px; padding: 22px; box-shadow: var(--sombra); }
.panel + .panel { margin-top: 22px; }
.panel-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--borde-suave); }
.panel-cabecera h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.1px; }
.panel-cabecera .contador { font-size: 11.5px; font-weight: 700; color: var(--acento-claro); background: var(--acento-fondo);
                            border: 1px solid var(--acento-borde); border-radius: 999px; padding: 1px 9px; }
.panel-cabecera .a-derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.nota { color: var(--texto-2); font-size: 12.5px; line-height: 1.55; margin: 0 0 14px; }
.nota b, .nota code { color: var(--texto); font-weight: 600; }
.nota code { font-family: Consolas, monospace; font-size: 11.5px; background: var(--hundido); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--borde-suave); }

/* ===== Formularios ===== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 11px; font-weight: 700; color: var(--texto-2); margin-bottom: 6px;
                    text-transform: uppercase; letter-spacing: 0.6px; }
.input-text { background: var(--hundido); border: 1px solid var(--borde); color: var(--texto); padding: 10px 13px;
              font-size: 13.5px; font-family: inherit; border-radius: 9px; width: 100%; outline: none; transition: .15s; }
.input-text:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }
.input-text::placeholder { color: var(--texto-3); }
textarea.input-text { resize: vertical; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(180deg, var(--acento), var(--acento-oscuro));
       color: #04211d; border: none; padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
       font-family: inherit; cursor: pointer; width: 100%; transition: .15s; letter-spacing: .1px; }
.btn svg { width: 16px; height: 16px; }
.btn:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 4px 16px -6px rgba(20,184,166,.5); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sec { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); }
.btn-sec:hover:not(:disabled) { border-color: var(--acento-borde); color: var(--acento-claro); filter: none; box-shadow: none; }
.btn-mini { width: auto; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 7px; background: transparent;
            border: 1px solid var(--borde); color: var(--texto-2); cursor: pointer; font-family: inherit; transition: .15s; }
.btn-mini:hover { color: var(--acento-claro); border-color: var(--acento-borde); background: var(--acento-fondo); }
.btn-mini.marcado { color: var(--acento-claro); border-color: var(--acento-borde); background: var(--acento-fondo); }
.btn-peligro { width: auto; padding: 5px 11px; font-size: 12px; font-weight: 600; border-radius: 7px; background: transparent;
               color: var(--peligro); border: 1px solid rgba(248,113,113,.3); cursor: pointer; font-family: inherit; transition: .15s; }
.btn-peligro:hover { background: rgba(248,113,113,.1); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ===== Tablas ===== */
.tabla-marco { overflow-x: auto; margin: 0 -6px; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.data-table th { color: var(--texto-3); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--borde);
                 text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.7px; white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--borde-suave); color: var(--texto); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,.02); }
.token-code { font-family: Consolas, monospace; background: var(--hundido); border: 1px solid var(--borde-suave);
              padding: 4px 9px; border-radius: 7px; color: var(--alerta); font-size: 12.5px; cursor: pointer; white-space: nowrap; transition: .15s; }
.token-code:hover { border-color: var(--alerta); }
.empty-state { text-align: center; color: var(--texto-3); padding: 42px 0 36px; font-size: 13px; }
.empty-state svg { width: 34px; height: 34px; display: block; margin: 0 auto 10px; opacity: .5; }

.estado-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 3px 10px;
                border-radius: 999px; letter-spacing: 0.4px; }
.estado-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado-LIBRE { color: var(--alerta); background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.25); }
.estado-ASIGNADA, .estado-ACTIVO, .estado-INGRESO, .estado-ABIERTO { color: var(--ok); background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); }
.estado-BLOQUEADA, .estado-INACTIVO, .estado-EGRESO { color: var(--peligro); background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.25); }
.estado-CERRADO { color: var(--texto-2); background: rgba(152,162,176,0.1); border: 1px solid rgba(152,162,176,0.25); }

/* ===== KPIs ===== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi-card { background: linear-gradient(180deg, var(--tarjeta), var(--panel)); border: 1px solid var(--borde);
            border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra); display: flex; gap: 14px; align-items: center; }
.kpi-icono { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center;
             background: var(--acento-fondo); border: 1px solid var(--acento-borde); color: var(--acento-claro); }
.kpi-icono svg { width: 19px; height: 19px; }
.kpi-card .lbl { font-size: 11px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: 0.6px; }
.kpi-card .val { font-size: 25px; font-weight: 750; letter-spacing: -0.5px; margin-top: 1px; }
.kpi-card .sub { font-size: 11.5px; color: var(--texto-3); margin-top: 1px; }
.admin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-kpis .kpi-card { min-width: 0; }
.admin-kpis .kpi-card > div:last-child { min-width: 0; flex: 1; container-type: inline-size; }
.admin-kpis .val { font-size: clamp(18px, 8cqi, 25px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.admin-kpis .sub { overflow-wrap: anywhere; }
@media (max-width: 600px) { .admin-kpis { grid-template-columns: minmax(0, 1fr); } }
.kpi-alerta .kpi-icono { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); color: var(--peligro); }

/* ===== Tarjetas de sucursal (vista global del tablero) ===== */
.sucursales-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.suc-card { background: linear-gradient(180deg, var(--tarjeta), var(--panel)); border: 1px solid var(--borde);
            border-radius: 14px; padding: 18px 20px; box-shadow: var(--sombra); cursor: pointer; transition: .15s;
            text-align: left; font-family: inherit; color: var(--texto); width: 100%; }
.suc-card:hover { border-color: var(--acento-borde); transform: translateY(-2px); box-shadow: 0 6px 24px -8px rgba(20,184,166,.25); }
.suc-card .suc-nombre { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; margin-bottom: 12px; }
.suc-card .suc-nombre .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--texto-3); }
.suc-card .suc-nombre .punto.on { background: var(--ok); box-shadow: 0 0 8px rgba(52,211,153,.7); }
.suc-card .suc-nombre .punto.off { background: var(--peligro); }
.suc-card .suc-generado { margin: 1px 0 13px; font-size: 26px; font-weight: 750; letter-spacing: -0.5px; color: var(--acento-claro); }
.suc-card .suc-generado-rotulo { font-size: 12px; font-weight: 650; color: var(--texto-2); }
.suc-card .suc-hoy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; border-top: 1px solid var(--borde-suave); padding-top: 11px; }
.suc-card .suc-dato { display: grid; gap: 2px; min-width: 0; }
.suc-card .suc-dato small { font-size: 11px; font-weight: 650; color: var(--texto-3); }
.suc-card .suc-dato b { font-size: 14px; color: var(--texto); font-weight: 750; overflow-wrap: anywhere; }
.suc-card .suc-efectivo-resumen { grid-column: 1 / -1; padding-top: 9px; border-top: 1px solid var(--borde-suave); }
.suc-card .suc-efectivo-valor { font-size: 17px; color: var(--acento-claro); }
.suc-card .suc-efectivo-resumen em { font-size: 10.5px; font-style: normal; color: var(--texto-3); }

/* ===== Detalle de sucursal ===== */
.rango-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.rango-barra .fechas { display: flex; gap: 6px; align-items: center; color: var(--texto-3); font-size: 12.5px; }
.rango-barra input[type="date"] { background: var(--hundido); border: 1px solid var(--borde); color: var(--texto);
                                  padding: 6px 9px; font-size: 12.5px; font-family: inherit; border-radius: 8px; outline: none;
                                  color-scheme: dark; }
.rango-barra input[type="date"]:focus { border-color: var(--acento); }

.grafico-marco { overflow-x: auto; }
.grafico-marco svg { display: block; width: 100%; min-width: 480px; height: auto; }
.barra-venta { fill: var(--acento); opacity: .75; transition: .15s; }
.barra-venta:hover { opacity: 1; }

.dif-ok { color: var(--ok); }
.dif-mal { color: var(--peligro); }

/* Origen de una fila del flujo de caja (MANUAL / COMPRA / CIERRE / RETIRO / ADELANTO) */
.origen-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
               padding: 2px 8px; border-radius: 6px; background: var(--hundido);
               border: 1px solid var(--borde-suave); color: var(--texto-2); white-space: nowrap; }

/* Tarjetas de totales del flujo (ingresos / egresos / saldo del período) */
.flujo-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.flujo-total { background: var(--hundido); border: 1px solid var(--borde-suave); border-radius: 11px; padding: 12px 16px; }
.flujo-total .lbl { font-size: 10.5px; font-weight: 700; color: var(--texto-3); text-transform: uppercase; letter-spacing: .6px; }
.flujo-total .val { font-size: 19px; font-weight: 750; letter-spacing: -0.3px; margin-top: 2px; }
.celda-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table th.celda-num { text-align: right; }

/* ===== Lista de destinatarios ===== */
.lista-check { max-height: 190px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 9px; padding: 6px; background: var(--hundido); }
.lista-check label, .check-linea { display: flex; align-items: center; gap: 9px; padding: 7px 9px; font-size: 13px; cursor: pointer;
                     text-transform: none; letter-spacing: 0; color: var(--texto); border-radius: 7px; font-weight: 400; margin: 0; }
.lista-check label:hover { background: rgba(255,255,255,.04); }
input[type="checkbox"] { accent-color: var(--acento); width: 15px; height: 15px; flex: none; }

.mini-msg { font-size: 12.5px; margin: 12px 0 0; }
.celda-suave { color: var(--texto-2); }

/* ===== Barra de progreso de subida ===== */
.progreso { display: none; margin-top: 12px; }
.progreso .via { height: 7px; border-radius: 999px; background: var(--hundido); border: 1px solid var(--borde-suave); overflow: hidden; }
.progreso .relleno { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, var(--acento-oscuro), var(--acento-claro)); transition: width .2s; }
.progreso .leyenda { font-size: 11.5px; color: var(--texto-2); margin-top: 5px; }

/* ===== Pestaña Sistema ===== */
.ficha { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: 13px; }
.ficha dt { color: var(--texto-2); font-weight: 600; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.ficha .mono { font-family: Consolas, monospace; font-size: 12px; color: var(--texto-2); }
.zona-suelta { border: 2px dashed var(--borde); border-radius: 12px; padding: 26px 18px; text-align: center; cursor: pointer;
               transition: .15s; color: var(--texto-2); background: var(--hundido); }
.zona-suelta:hover, .zona-suelta.encima { border-color: var(--acento); color: var(--acento-claro); background: var(--acento-fondo); }
.zona-suelta svg { width: 30px; height: 30px; display: block; margin: 0 auto 8px; }
.zona-suelta b { color: var(--texto); }
.tarjeta-pendiente { border: 1px solid var(--acento-borde); background: var(--acento-fondo); border-radius: 12px; padding: 16px; margin-top: 14px; }
.tarjeta-pendiente h4 { margin: 0 0 10px; font-size: 13.5px; color: var(--acento-claro); display: flex; align-items: center; gap: 8px; }
.tarjeta-pendiente h4 svg { width: 16px; height: 16px; }
.pasos { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; gap: 11px; align-items: baseline; padding: 5px 0; font-size: 13px; color: var(--texto-2); }
.pasos li::before { content: counter(paso); flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--acento-fondo);
                    border: 1px solid var(--acento-borde); color: var(--acento-claro); font-size: 11.5px; font-weight: 700;
                    display: inline-flex; align-items: center; justify-content: center; transform: translateY(4px); }

/* ===== Portal de token ===== */
#gate { position: fixed; inset: 0; z-index: 60; background: var(--fondo);
        background-image: radial-gradient(900px 500px at 50% -150px, rgba(20,184,166,0.13), transparent 70%);
        display: none; align-items: center; justify-content: center; padding: 20px; }
#gate.visible { display: flex; }
.gate-card { width: 100%; max-width: 400px; background: linear-gradient(180deg, var(--tarjeta), var(--panel));
             border: 1px solid var(--borde); border-radius: 18px; padding: 36px 32px; box-shadow: var(--sombra); text-align: center; }
.gate-card .logo { width: 58px; height: 58px; margin: 0 auto 14px; }
.gate-card h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.3px; }
.gate-card h2 span { color: var(--acento-claro); font-weight: 350; }
.gate-card p { color: var(--texto-2); font-size: 13px; margin: 0 0 22px; }
.gate-error { display: none; color: var(--peligro); font-size: 12.5px; margin-top: 12px; }

/* ===== Modal ===== */
#modal-fondo { position: fixed; inset: 0; z-index: 70; background: rgba(5,7,9,.7); backdrop-filter: blur(3px);
               display: none; align-items: center; justify-content: center; padding: 20px; }
#modal-fondo.visible { display: flex; }
.modal-card { width: 100%; max-width: 440px; background: linear-gradient(180deg, var(--tarjeta), var(--panel));
              border: 1px solid var(--borde); border-radius: 16px; padding: 24px; box-shadow: var(--sombra); animation: aparecer .15s ease-out; }
.modal-card h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -0.2px; }
.modal-card .modal-texto { color: var(--texto-2); font-size: 13px; margin: 0 0 16px; white-space: pre-line; }
/* ===== Cierre detallado y factura (modales anchos con lista larga) =====
   Estos dos modales muestran una lista que puede tener cientos de renglones, así que se ensanchan
   y la lista scrollea POR DENTRO: el encabezado con los totales y el botón de cerrar tienen que
   quedar siempre a la vista, si no hay que scrollear hasta el fondo para salir. */
.modal-card.modal-ancho { max-width: 720px; }
.modal-card.modal-cuenta { max-width: 1060px; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.modal-cuenta .cuenta-ventana-barra { position: sticky; top: -24px; z-index: 2; background: var(--tarjeta); padding: 12px 0; }
.modal-cuenta .cuenta-ventana-barra button { flex-shrink: 0; }
@media (max-width: 600px) {
    .modal-card.modal-cuenta { padding: 14px; max-height: calc(100dvh - 24px); }
    .modal-cuenta .cuenta-ventana-barra { top: -14px; gap: 8px; flex-wrap: wrap; }
    .modal-cuenta .cuenta-detalle-cabecera { flex-direction: column; align-items: stretch; }
    .modal-cuenta .cuenta-desglose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.modal-cuenta .cuenta-equipo-detalle { margin:14px 0 0; border:0; padding:0; background:transparent; }
.cuenta-ventana-barra { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--borde); }
.cuenta-ventana-barra .btn-mini { flex:none; }
.cierre-kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cierre-kpis > div { flex: 1 1 92px; background: var(--hundido); border: 1px solid var(--borde-suave);
                     border-radius: 10px; padding: 9px 11px; }
.cierre-kpis .lbl { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
                    color: var(--texto-3); margin-bottom: 3px; }
.cierre-kpis b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.cierre-lista { max-height: 46vh; overflow-y: auto; border: 1px solid var(--borde-suave);
                border-radius: 10px; padding: 6px; background: var(--hundido); }
.ticket-bloque { border-bottom: 1px solid var(--borde-suave); padding: 8px 6px; }
.ticket-bloque:last-child { border-bottom: none; }
.ticket-anulado { opacity: .55; }
.ticket-anulado .prod { text-decoration: line-through; }
.ticket-cab { display: flex; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 4px; flex-wrap: wrap; }
.ticket-hora { font-variant-numeric: tabular-nums; color: var(--acento-claro); font-weight: 600; }
.ticket-id { color: var(--texto-2); }
.ticket-medio { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3);
                border: 1px solid var(--borde); border-radius: 5px; padding: 1px 6px; }
.ticket-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ticket-linea { display: flex; gap: 10px; font-size: 12.5px; padding: 2px 0 2px 14px; color: var(--texto); }
.ticket-linea .cant { color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 30px; }
.ticket-linea .prod { flex: 1; }
.ticket-linea .sub { font-variant-numeric: tabular-nums; color: var(--texto-2); }
.ticket-linea.sin-detalle { color: var(--texto-3); font-style: italic; }
.factura-foto { margin-top: 14px; border: 1px solid var(--borde-suave); border-radius: 10px;
                overflow: hidden; background: var(--hundido); }
.factura-foto img { display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain; }

/* Filas que se pueden abrir: el cursor y el realce dicen que hay algo más adentro. */
.fila-abrible { cursor: pointer; }
.fila-abrible:hover { background: var(--acento-fondo); }

.chip-ok, .chip-aviso, .chip-mal {
    display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: 1px;
}
.chip-ok { background: rgba(52,211,153,.14); color: var(--ok); }
.chip-aviso { background: rgba(251,191,36,.14); color: var(--alerta); }
.chip-mal { background: rgba(248,113,113,.14); color: var(--peligro); }

/* Campos de un modal que pide más de un dato. */
.modal-campos { display: grid; gap: 12px; }
.modal-campos label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700;
                      color: var(--texto-2); text-transform: uppercase; letter-spacing: .6px; }
.modal-campos .opcional { font-weight: 600; font-style: normal; color: var(--texto-3); text-transform: none; letter-spacing: 0; }
.modal-card .modal-texto + .modal-botones { margin-top: 4px; }

.modal-botones { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-botones .btn { width: auto; padding: 9px 16px; }
.btn-rojo { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }
.btn-rojo:hover:not(:disabled) { box-shadow: 0 4px 16px -6px rgba(239,68,68,.5); }

/* ===== Toasts ===== */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 9px; max-width: 340px; }
.toast { background: var(--tarjeta); border: 1px solid var(--borde); border-left: 3px solid var(--acento); border-radius: 11px;
         padding: 12px 15px; font-size: 13px; box-shadow: var(--sombra); animation: entrar-toast .2s ease-out; }
.toast.error { border-left-color: var(--peligro); }
@keyframes entrar-toast { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

/* ===== Velo de reinicio (instalación de la Central) ===== */
#velo-reinicio { position: fixed; inset: 0; z-index: 90; background: rgba(5,7,9,.85); backdrop-filter: blur(4px);
                 display: none; align-items: center; justify-content: center; text-align: center; padding: 20px; }
#velo-reinicio.visible { display: flex; }
.girando { width: 42px; height: 42px; border: 3px solid var(--borde); border-top-color: var(--acento-claro);
           border-radius: 50%; margin: 0 auto 18px; animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.pie { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--borde-suave); color: var(--texto-3);
       font-size: 12px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 640px) {
    .shell { padding: 18px 14px 30px; }
    .marca .bajada { display: none; }
    .ficha { grid-template-columns: 1fr; gap: 2px 0; }
    .ficha dt { margin-top: 8px; }
}

/* ===== Riel de navegación lateral (los módulos de la Central) =====
   Lo inyecta central-comun.js en las páginas que declaran <body data-rail="...">. Es un riel
   angosto de íconos —no un menú desplegado— para sumar navegación sin correr el layout de las
   pantallas que ya existían. En pantallas chicas se esconde (movil.html tiene su propia UI). */
.rail { position: fixed; top: 0; left: 0; bottom: 0; width: 64px; z-index: 50;
        display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 0;
        background: var(--panel); border-right: 1px solid var(--borde); }
.rail .rail-logo { width: 32px; height: 32px; margin-bottom: 12px; flex: none;
                   filter: drop-shadow(0 0 10px rgba(20,184,166,.3)); }
.rail a { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px;
          padding: 9px 0 7px; border-radius: 11px; color: var(--texto-3); text-decoration: none;
          font-size: 9px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; transition: .15s; }
.rail a svg { width: 19px; height: 19px; }
.rail a:hover { color: var(--texto); background: rgba(255,255,255,.05); }
.rail a.activo { color: var(--acento-claro); background: var(--acento-fondo); }
body.con-rail { padding-left: 64px; }
.acceso-admin-movil { display: none; }
.estado-carga, .estado-error { padding: 18px; border: 1px solid var(--borde); border-radius: 10px; color: var(--texto-2); background: var(--panel); }
.estado-error { color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }
@media (max-width: 720px) {
    .rail { display: none; }
    body.con-rail { padding-left: 0; padding-bottom: 54px; }
    .acceso-admin-movil { display: block; position: fixed; z-index: 55; left: 12px; right: 12px; bottom: 8px;
        padding: 10px 14px; border: 1px solid var(--borde); border-radius: 12px; text-align: center;
        color: var(--texto); background: var(--panel); box-shadow: 0 8px 28px rgba(0,0,0,.35); text-decoration: none; }
    .acceso-admin-movil.activo { color: var(--acento-claro); border-color: var(--acento); background: var(--acento-fondo); }
}
/* Cuentas individuales del equipo: misma lectura por tarjetas que las sucursales. */
.cuenta-equipo-cabecera, .cuenta-detalle-cabecera { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:24px 0 14px; }
.cuenta-equipo-cabecera h3, .cuenta-detalle-cabecera h3 { margin:4px 0; font-size:18px; }
.cuenta-equipo-cabecera p { margin:4px 0; }
.cuentas-equipo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.cuenta-equipo-tarjeta { display:flex; flex-direction:column; text-align:left; gap:10px; padding:18px; border:1px solid var(--borde); border-radius:12px; color:var(--texto); background:var(--hundido); font:inherit; cursor:pointer; transition:border-color .15s,background .15s; }
.cuenta-equipo-tarjeta:hover, .cuenta-equipo-tarjeta[aria-pressed=true] { border-color:var(--acento); background:var(--acento-fondo); }
.cuenta-tarjeta-identidad { display:flex; gap:10px; align-items:center; }
.cuenta-saldo-etiqueta { color:var(--texto-2); font-size:11px; margin-top:5px; }
.cuenta-saldo { font-size:24px; font-weight:650; font-variant-numeric:tabular-nums; }
.cuenta-tarjeta-pie { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--texto-2); }
.cuenta-tarjeta-pie > span:last-child { color:var(--acento-claro); }
.cuenta-equipo-vacio { padding:28px; text-align:center; color:var(--texto-2); border:1px dashed var(--borde); border-radius:12px; margin:16px 0 24px; }
.cuenta-equipo-vacio h4 { color:var(--texto); margin:0 0 6px; }
.cuenta-equipo-vacio p { margin:0; }
.cuenta-equipo-detalle { border:1px solid var(--borde); border-radius:12px; padding:18px; margin:16px 0 24px; background:var(--hundido); }
.cuenta-detalle-cabecera { margin:0 0 18px; flex-wrap:wrap; }
.cuenta-detalle-acciones { display:flex; flex-wrap:wrap; gap:8px; }
.cuenta-detalle-acciones .btn-mini { padding:8px 12px; }
.cuenta-detalle-acciones .btn-mini:disabled { opacity:.45; cursor:default; }
.cuenta-detalle-acciones [data-accion="cargo-empleado-v1"] { color:var(--acento-claro); border-color:var(--acento-borde); background:var(--acento-fondo); }
.cuenta-desglose { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; border-block:1px solid var(--borde); padding:16px 0; }
.cuenta-desglose span { display:block; font-size:11px; color:var(--texto-2); margin-bottom:5px; }
.cuenta-desglose b { font-size:17px; font-variant-numeric:tabular-nums; }
.cuenta-liquidacion { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--borde); }
#cuentaEquipoImpresion { display:none; }
@media (max-width:640px) { .cuentas-equipo-grid { grid-template-columns:1fr; } .cuenta-desglose { grid-template-columns:repeat(2,minmax(0,1fr)); } .cuenta-liquidacion { flex-wrap:wrap; } }
@media print {
    body.imprimiendo-cuenta-equipo { background:white; color:black; padding:0; }
    body.imprimiendo-cuenta-equipo > :not(#cuentaEquipoImpresion) { display:none !important; }
    body.imprimiendo-cuenta-equipo > #cuentaEquipoImpresion { display:block; font:12px Arial,sans-serif; }
    .cuenta-hoja { padding:12mm; break-after:page; }
    .cuenta-hoja:last-child { break-after:auto; }
    .cuenta-hoja h1 { font-size:22px; } .cuenta-hoja h2 { font-size:16px; }
    .cuenta-hoja table { width:100%; border-collapse:collapse; }
    .cuenta-hoja th, .cuenta-hoja td { padding:8px 4px; border-bottom:1px solid #ccc; text-align:left; }
    .cuenta-hoja tr { break-inside:avoid; }
    .cuenta-firmas { margin-top:30px; }
}

/* Administración y configuración: mismos controles y paleta que el tablero. */
#panelEmpleadosAdministracion { padding: 20px; }
.responsable-resumen { display: flex; align-items: center; gap: 14px; padding-top: 8px; }
.responsable-sello, .responsable-avatar { display: grid; place-items: center; flex: none; border: 1px solid var(--borde); border-radius: 10px; background: var(--hundido); color: var(--acento-claro); }
.responsable-sello { width: 44px; height: 44px; }
.responsable-sello svg { width: 24px; height: 24px; }
.responsable-avatar { width: 34px; height: 34px; font-size: 13px; font-weight: 650; }
.responsable-identidad { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.responsable-identidad strong { font-size: 17px; font-weight: 650; }
.responsable-etiqueta { color: var(--texto-3); font-size: 10px; letter-spacing: .6px; font-weight: 600; }
.responsable-resumen > .btn { width: auto; flex: none; padding: 9px 14px; font-size: 12px; }
.responsable-lista { display: grid; gap: 6px; margin: 16px 0; max-height: 300px; overflow: auto; padding: 2px; }
.responsable-opcion { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--hundido); color: var(--texto); text-align: left; cursor: pointer; font: inherit; }
.responsable-opcion:hover { border-color: var(--acento-borde); }
.responsable-opcion[aria-pressed=true] { border-color: var(--acento); background: var(--acento-fondo); }
.responsable-opcion small { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-2); }
.responsable-check { margin-left: auto; color: var(--acento-claro); font-size: 18px; }
#det-config > .panel { margin-bottom: 16px; }
#panelEmpleadosGestion .panel-cabecera { flex-wrap: wrap; }
#panelEmpleadosGestion .panel-cabecera h3 { white-space: nowrap; }
#panelEmpleadosGestion .panel-cabecera > .btn { width: auto; margin-left: auto; padding: 9px 14px; font-size: 12px; }
#det-config .nota { line-height: 1.6; }
#tablaEmpleadosCfg td { padding: 12px 10px; vertical-align: middle; }
.empleado-identidad { display: flex; gap: 10px; align-items: center; min-width: 170px; }
.admin-gestion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:22px 0 14px; }
.admin-gestion-tarjeta { display:flex; align-items:center; gap:14px; width:100%; min-width:0; padding:22px 18px; text-align:left; color:var(--texto); background:var(--panel); border:1px solid var(--borde); border-radius:12px; font:inherit; cursor:pointer; transition:border-color .15s,background .15s; }
.admin-gestion-tarjeta:hover,.admin-gestion-tarjeta[aria-expanded="true"] { border-color:var(--acento); background:var(--acento-fondo); }
.admin-gestion-tarjeta:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
.admin-gestion-tarjeta > span:nth-child(2) { flex:1; min-width:0; }
.admin-gestion-tarjeta strong { display:block; font-size:15px; line-height:1.4; }
.admin-gestion-tarjeta small { display:block; color:var(--texto-2); font-size:12px; margin-top:6px; line-height:1.5; }
.admin-gestion-icono { display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:11px; background:var(--acento-fondo); color:var(--acento-claro); }
.admin-gestion-icono svg { width:23px; height:23px; }
.admin-historial-accesos,.admin-facturas-filtros,.admin-facturas-paginacion { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:16px 0; }
.admin-historial-accesos button,.admin-facturas-filtros button,.admin-facturas-paginacion button { width:auto; }
.admin-facturas-filtros { align-items:end; }
.admin-facturas-filtros label { display:grid; gap:6px; font-size:12px; color:var(--texto-2); }
.admin-facturas-filtros input { width:170px; padding:9px 10px; color-scheme:dark; background:var(--hundido); color:var(--texto); border:1px solid var(--borde); border-radius:7px; font:inherit; }
.factura-detalle-btn { width:auto; margin-top:8px; }
.admin-facturas-paginacion { justify-content:flex-end; font-size:12px; }
#adminExplorador { border-top:1px solid var(--borde); padding-top:22px; margin-top:22px; }
#adminExplorador [hidden] { display:none; }
[data-factura-proveedor]:hover { background:var(--acento-fondo); }
.modal-cuenta .cuenta-modal-cabecera { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; background:var(--panel); }
.cuenta-modal-cabecera h3 { min-width:0; overflow-wrap:anywhere; }
.cuenta-modal-cabecera button { width:auto; flex:none; }
@media(max-width:650px) { .admin-gestion-grid { grid-template-columns:1fr; } .admin-gestion-tarjeta { padding:17px 14px; } }
.empleado-identidad small { display: block; margin-top: 3px; color: var(--texto-3); font-size: 11px; }
.empleado-permisos-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 7px; background: transparent; color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.empleado-permisos-btn svg { width: 15px; height: 15px; flex: none; }
.empleado-permisos-btn:hover { color: var(--acento-claro); border-color: var(--acento-borde); background: var(--acento-fondo); }
.empleado-acciones, .empleado-legajo-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.empleado-acciones { min-width: 190px; }
.empleado-legajo-acciones .btn-mini { min-height: 31px; }
.empleado-legajo-acciones .btn-mini:disabled { opacity: .4; cursor: default; }
.empleado-legajo-acciones [data-accion="desactivar-empleado-v1"]:not(:disabled) { color: var(--peligro); }
.acceso-switch { display: inline-flex; align-items: center; position: relative; cursor: pointer; width: 36px; height: 32px; vertical-align: middle; }
.acceso-switch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.acceso-switch span { width: 36px; height: 20px; border: 1px solid var(--borde); border-radius: 20px; background: var(--borde); pointer-events: none; transition: background .15s; }
.acceso-switch span:after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--texto-2); margin: 2px; transition: transform .15s; }
.acceso-switch input:checked + span { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.acceso-switch input:checked + span:after { transform: translateX(16px); background: var(--texto); }
.acceso-switch input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 3px; }
.acceso-switch input:disabled + span { opacity: .45; }
.permisos-toolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.permisos-toolbar input { flex: 1; min-width: 0; }
.permisos-toolbar .origen-chip { white-space: nowrap; }
.permisos-editor { padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--borde) var(--hundido); }
.permisos-editor h4 { color: var(--texto-2); text-transform: uppercase; letter-spacing: .7px; padding: 8px 0; }
.permiso-grupo { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 8px; overflow: hidden; background: var(--hundido); }
.permiso-grupo summary { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 14px; font-weight: 600; list-style: none; }
.permiso-grupo summary::-webkit-details-marker { display: none; }
.permiso-grupo summary:before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--texto-2); border-bottom: 1.5px solid var(--texto-2); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.permiso-grupo[open] summary:before { transform: rotate(45deg); }
.permiso-grupo summary small { margin-left: auto; color: var(--texto-3); font-size: 11px; font-weight: 400; white-space: nowrap; }
.permiso-grupo summary:hover { background: var(--tarjeta); }
.permiso-grupo[open] summary { border-bottom: 1px solid var(--borde); }
.permiso-fila { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--borde-suave); }
.permiso-fila:last-child { border-bottom: 0; }
.permiso-fila:hover { background: var(--tarjeta); }
.permiso-principal { font-weight: 600; background: var(--panel); }
.permiso-hijo { padding-left: 32px; }
.permiso-fila > span { flex: 1; min-width: 0; }
.permiso-fila input { order: 1; appearance: none; flex: none; width: 36px; height: 20px; margin: 0; border: 1px solid var(--borde); border-radius: 20px; background: var(--borde); position: relative; cursor: pointer; }
.permiso-fila input:after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--texto-2); transition: transform .15s; }
.permiso-fila input:checked { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.permiso-fila input:checked:after { transform: translateX(16px); background: var(--texto); }
@media (max-width: 640px) {
    .responsable-resumen { flex-wrap: wrap; }
    .responsable-resumen > .btn { margin-left: 58px; }
    .responsable-identidad { flex-basis: calc(100% - 58px); }
    .permisos-toolbar { flex-wrap: wrap; }
    .permisos-toolbar input { flex-basis: 100%; }
    .permiso-grupo summary { flex-wrap: wrap; gap: 8px; }
    .permiso-grupo summary small { margin-left: 16px; }
    .permiso-hijo { padding-left: 22px; }
}

/* ===== Renovación visual 2026: cálida, gráfica y cercana =====
   La referencia combina una base arena con tarjetas turquesa, coral y amarillas. Acá ese
   lenguaje se lleva a una interfaz de trabajo real: el color orienta, el blanco sostiene los
   datos y el azul tinta conserva contraste para jornadas largas. Todo sigue siendo local. */
:root {
    --fondo: #f7ead3;
    --panel: #fffdf8;
    --tarjeta: #ffffff;
    --hundido: #f7f0e5;
    --borde: #e5d5bc;
    --borde-suave: #efe4d3;
    --texto: #253247;
    --texto-2: #657086;
    --texto-3: #8b91a0;
    --acento: #24b8c6;
    --acento-claro: #087984;
    --acento-oscuro: #1594a0;
    --acento-fondo: rgba(36,184,198,.13);
    --acento-borde: rgba(8,121,132,.27);
    --ok: #168b68;
    --alerta: #d28a00;
    --peligro: #d95158;
    --coral: #f0645d;
    --amarillo: #efb31f;
    --celeste: #55c4d5;
    --tinta: #273247;
    --crema: #f3d497;
    --sombra: 0 16px 42px -30px rgba(59,45,27,.32), 0 3px 12px rgba(91,67,37,.07);
    --sombra-elevada: 0 24px 48px -28px rgba(61,48,32,.38), 0 10px 24px -18px rgba(75,58,36,.22);
}

body {
    color-scheme: light;
    background-color: var(--fondo);
    background-image:
        radial-gradient(circle at 6% 13%, rgba(85,196,213,.26) 0 78px, transparent 80px),
        radial-gradient(circle at 96% 8%, rgba(240,100,93,.18) 0 118px, transparent 120px),
        linear-gradient(135deg, rgba(255,255,255,.24) 25%, transparent 25%) 0 0 / 34px 34px,
        linear-gradient(180deg, #f7e2bc 0, #fbf5ea 360px, #f8f2e8 100%);
    background-attachment: fixed;
}

.shell { max-width: 1540px; padding: 22px 30px 48px; }

/* Cabecera liviana: se mantiene visible y parece una banda de la composición. */
.topbar {
    position: sticky;
    top: 10px;
    z-index: 35;
    margin: 0 0 22px;
    padding: 12px 14px;
    border: 1px solid rgba(229,213,188,.9);
    border-radius: 18px;
    background: rgba(255,253,248,.9);
    box-shadow: var(--sombra);
    backdrop-filter: blur(14px);
}
.topbar[hidden], .tablero-portada[hidden], #pendientesAdmin[hidden] { display: none !important; }
.marca h1 { color: var(--tinta); font-size: 22px; letter-spacing: -.45px; }
.marca h1 span { color: var(--acento-claro); font-weight: 520; }
.marca .bajada { color: var(--texto-2); }
.logo { filter: drop-shadow(0 7px 12px rgba(28,148,160,.18)); }
.chip, .btn-nav, .btn-icono {
    background: #fff;
    border-color: var(--borde);
    box-shadow: 0 5px 14px -11px rgba(37,50,71,.38);
}
.chip.en-linea { color: #11795d; border-color: rgba(22,139,104,.24); background: #eef9f4; }
.chip.sin-linea { color: var(--peligro); border-color: rgba(217,81,88,.24); background: #fff2f2; }
.chip.modo { color: var(--acento-claro); background: #eefafc; }
.btn-nav, .btn-icono, .btn, .btn-mini, .btn-peligro {
    transition: transform .18s ease, border-color .18s ease, color .18s ease,
                background-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-nav:hover, .btn-icono:hover, .btn:hover:not(:disabled), .btn-mini:hover, .btn-peligro:hover { transform: translateY(-2px); }
.btn:active:not(:disabled), .btn-nav:active, .btn-icono:active, .btn-mini:active { transform: translateY(0) scale(.985); }
.btn { color: #063e44; box-shadow: 0 10px 18px -14px rgba(21,148,160,.6); }
.btn-sec { background: #fff; color: var(--texto); }
.btn-mini { background: #fff; }
.btn, .btn-mini, .btn-peligro, .btn-nav, .btn-icono {
    font-family: inherit;
    line-height: 1.25;
}
.btn-mini { min-height: 34px; padding: 7px 12px; border-radius: 9px; }
.btn:focus-visible, .btn-mini:focus-visible, .btn-peligro:focus-visible,
.btn-nav:focus-visible, .btn-icono:focus-visible {
    outline: 3px solid rgba(19, 131, 139, .42);
    outline-offset: 2px;
}
.btn-mini:disabled, .btn-peligro:disabled { opacity: .48; cursor: default; transform: none; }

/* Navegación azul tinta, con acentos que remiten a las tarjetas de la referencia. */
.rail {
    width: 224px;
    align-items: stretch;
    gap: 0;
    padding: 18px 14px 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18px 88%, rgba(85,196,213,.17) 0 2px, transparent 3px) 0 0 / 15px 15px,
        linear-gradient(180deg, #29354b, #202a3d);
    border-right: 0;
    box-shadow: 16px 0 34px -26px rgba(28,34,47,.55);
}
.rail .rail-marca {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 50px;
    padding: 5px 8px 13px;
    margin: 0 0 13px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0;
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 400;
}
.rail .rail-marca:hover { background: transparent; color: #fff; }
.rail .rail-marca > span { min-width: 0; line-height: 1.2; }
.rail .rail-marca b { font-weight: 800; }
.rail .rail-marca small { display: block; margin-top: 4px; color: #aeb9ca; font-size: 10px; letter-spacing: .04em; }
.rail .rail-logo { width: 36px; height: 36px; margin: 0; filter: drop-shadow(0 7px 12px rgba(0,0,0,.2)); }
.rail-menu { display: flex; flex: 1; min-height: 0; flex-direction: column; gap: 17px; overflow-y: auto; scrollbar-width: none; }
.rail-menu::-webkit-scrollbar { display: none; }
.rail-grupo { display: grid; gap: 4px; }
.rail-grupo:last-child { margin-top: auto; }
.rail-grupo-titulo { padding: 0 10px 5px; color: #8f9caf; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rail-sesion {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 54px;
    margin-bottom: 3px;
    padding: 7px 9px 9px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.rail-sesion[hidden] { display: none; }
.rail-sesion-avatar {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    flex: none;
    color: #9ee4ec;
    border: 1px solid rgba(112,208,220,.25);
    border-radius: 10px;
    background: rgba(85,196,213,.1);
}
.rail-sesion-avatar svg { width: 17px; height: 17px; }
.rail-sesion-datos { min-width: 0; line-height: 1.15; }
.rail-sesion-datos b { display: block; overflow: hidden; color: #f7f9fc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.rail-sesion-datos small { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #aeb9ca; font-size: 9.5px; }
.rail-sesion-datos i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #8f9caf; }
.rail-sesion.en-linea .rail-sesion-datos i { background: #4fd1a5; box-shadow: 0 0 7px rgba(79,209,165,.58); }
.rail-sesion.sin-linea .rail-sesion-datos i { background: #ff817b; }
.rail a.rail-modulo, .rail button.rail-modulo {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    width: 100%;
    min-height: 43px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #c4ccda;
    font-size: 12.5px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.rail button.rail-modulo { appearance: none; font-family: inherit; cursor: pointer; }
.rail a.rail-modulo:hover, .rail button.rail-modulo:hover { color: #fff; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.07); transform: translateX(2px); }
.rail a.rail-modulo.activo {
    color: #fff;
    border-color: rgba(255,255,255,.12);
    background: linear-gradient(100deg, rgba(85,196,213,.25), rgba(255,255,255,.08));
    box-shadow: inset 3px 0 var(--celeste), 0 12px 20px -18px rgba(0,0,0,.65);
}
.rail-icono { display: grid; width: 26px; height: 26px; place-items: center; flex: none; color: #70d0dc; }
.rail-grupo:nth-child(1) a:nth-of-type(2) .rail-icono { color: #ffd264; }
.rail-grupo:nth-child(1) a:nth-of-type(3) .rail-icono { color: #7ed2de; }
.rail-grupo:nth-child(2) .rail-icono { color: #ff9a91; }
.rail a.rail-modulo:hover .rail-icono, .rail button.rail-modulo:hover .rail-icono, .rail a.rail-modulo.activo .rail-icono { color: inherit; }
.rail a.rail-modulo svg, .rail button.rail-modulo svg { width: 19px; height: 19px; }
.rail-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.con-rail { padding-left: 224px; }

/* Portada tipo collage: base arena, formas orgánicas y accesos como piezas flotantes. */
.tablero-portada, .admin-portada {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(199,153,72,.22);
    border-radius: 24px;
    background: linear-gradient(118deg, #f4d08e, #f8e6c3 66%, #f7eddc);
    box-shadow: var(--sombra);
    isolation: isolate;
}
.tablero-portada::before, .admin-portada::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 230px;
    height: 230px;
    left: -76px;
    bottom: -145px;
    border: 2px dotted rgba(255,255,255,.82);
    border-radius: 50%;
    box-shadow: 0 0 0 36px rgba(85,196,213,.2), 0 0 0 72px rgba(240,100,93,.08);
    pointer-events: none;
}
.tablero-portada::after, .admin-portada::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 220px;
    top: -130px;
    right: -60px;
    border-radius: 44% 56% 68% 32%;
    background: rgba(85,196,213,.34);
    transform: rotate(18deg);
    pointer-events: none;
    animation: iris-forma 8s ease-in-out infinite alternate;
}
.tablero-portada { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(520px,1.28fr); gap: 28px; align-items: center; padding: 30px; }
.tablero-portada-texto { position: relative; z-index: 1; }
.tablero-portada h2, .admin-portada h2 { color: var(--tinta); }
.tablero-portada h2 { max-width: 480px; margin: 5px 0 10px; font-size: clamp(25px,2.4vw,36px); line-height: 1.08; letter-spacing: -.9px; }
.tablero-portada p, .admin-portada p { max-width: 720px; margin: 0; color: #566177; font-size: 13.5px; }
.admin-eyebrow { color: #b14c46; }
.tablero-accesos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.tablero-accesos a {
    display: flex;
    min-width: 0;
    min-height: 76px;
    align-items: center;
    gap: 10px;
    padding: 14px 13px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 15px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 18px 30px -22px rgba(45,38,30,.55), inset 0 1px rgba(255,255,255,.28);
    transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.tablero-accesos a:nth-child(1) { background: linear-gradient(135deg, #f46d63, #dd514f); }
.tablero-accesos a:nth-child(2) { color: var(--tinta); background: linear-gradient(135deg, #f6bf32, #e8a911); }
.tablero-accesos a:nth-child(3) { color: #173b48; background: linear-gradient(135deg, #65ccdc, #38b1c3); }
.tablero-accesos a:hover { transform: translateY(-5px) rotate(-.4deg); filter: saturate(1.08); box-shadow: 0 24px 34px -22px rgba(45,38,30,.55); }
.tablero-acceso-icono { display: grid; width: 39px; height: 39px; place-items: center; flex: none; border-radius: 11px; color: inherit; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28); }
.tablero-acceso-icono svg { width: 19px; height: 19px; }
.tablero-accesos a > span:nth-child(2) { min-width: 0; flex: 1; }
.tablero-accesos strong, .tablero-accesos small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablero-accesos strong { font-size: 13px; }
.tablero-accesos small { margin-top: 3px; color: inherit; font-size: 10.5px; opacity: .78; }
.tablero-accesos a > b { color: inherit; font-size: 16px; opacity: .72; transition: transform .2s ease; }
.tablero-accesos a:hover > b { transform: translateX(3px); }
.modo-administracion #tableroPortada { display: none; }
.admin-portada { padding: 31px 30px; }
.admin-portada h2 { margin: 7px 0 8px; font-size: clamp(25px,3vw,38px); letter-spacing: -.85px; }

/* Paneles blancos y tarjetas cromáticas: el color guía sin invadir los datos. */
.panel, .kpi-card, .suc-card {
    border-color: rgba(208,189,161,.7);
    border-radius: 18px;
    background: rgba(255,255,255,.94);
    box-shadow: var(--sombra);
}
.panel { padding: 23px; }
.panel-cabecera { min-height: 34px; margin-bottom: 17px; }
.panel-cabecera h3 { color: var(--tinta); font-size: 15.5px; }
.panel-cabecera .contador { color: #087984; background: #e7f7f9; }
#kpisGlobal.kpi-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,170px),1fr)); }
.kpi-card {
    --kpi-acento: var(--celeste);
    position: relative;
    min-height: 112px;
    overflow: hidden;
    padding: 19px;
    border-top: 4px solid var(--kpi-acento);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kpi-card:nth-child(2) { --kpi-acento: var(--coral); }
.kpi-card:nth-child(3) { --kpi-acento: var(--amarillo); }
.kpi-card:nth-child(4) { --kpi-acento: #859bdc; }
.kpi-card:nth-child(5) { --kpi-acento: #e47579; }
.kpi-card.kpi-alerta { --kpi-acento: var(--coral); }
.kpi-card::after { content: ""; position: absolute; width: 74px; height: 74px; right: -32px; bottom: -38px; border-radius: 50%; background: color-mix(in srgb,var(--kpi-acento) 16%,transparent); }
.kpi-card:hover { transform: translateY(-4px); border-color: var(--kpi-acento); box-shadow: var(--sombra-elevada); }
.kpi-icono { width: 44px; height: 44px; border-radius: 13px; color: color-mix(in srgb,var(--kpi-acento) 68%,#294056); background: color-mix(in srgb,var(--kpi-acento) 16%,white); border-color: color-mix(in srgb,var(--kpi-acento) 42%,white); }
.kpi-alerta .kpi-icono { color: var(--peligro); background: #fff0ef; border-color: #f3c4c2; }
.kpi-card .lbl { color: #747e91; }
.kpi-card .val { color: var(--tinta); }
.suc-card { position: relative; overflow: hidden; padding: 19px 20px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.suc-card::after { content: ""; position: absolute; width: 90px; height: 90px; right: -52px; top: -48px; border-radius: 50%; background: rgba(85,196,213,.16); transition: transform .25s ease; pointer-events: none; }
.suc-card:nth-child(3n+2)::after { background: rgba(240,100,93,.14); }
.suc-card:nth-child(3n)::after { background: rgba(239,179,31,.18); }
.suc-card:hover { transform: translateY(-4px); border-color: rgba(36,184,198,.44); box-shadow: var(--sombra-elevada); }
.suc-card:hover::after { transform: scale(1.18); }
.suc-card[data-efectivo="sin-dato"] .suc-efectivo-valor { color: var(--texto-3); }
.suc-card[data-efectivo="sobre-colchon"] { --estado-suc: var(--alerta); }
.suc-card[data-efectivo="doble-colchon"] { --estado-suc: var(--peligro); }
.suc-card[data-efectivo="sobre-colchon"], .suc-card[data-efectivo="doble-colchon"] {
    border-left: 4px solid var(--estado-suc);
    background: linear-gradient(180deg, color-mix(in srgb, var(--estado-suc) 7%, var(--tarjeta)), var(--tarjeta));
}
.suc-card[data-efectivo="sobre-colchon"] .suc-efectivo-valor,
.suc-card[data-efectivo="doble-colchon"] .suc-efectivo-valor { color: var(--estado-suc); }
.data-table tbody tr { transition: background-color .16s ease; }
.data-table tr:hover td { background: #eef9fa; }
.data-table th { color: #7d8493; }
.banda-aviso { background: #fffaf1; }
.banda-aviso.urgente { border-color: rgba(210,138,0,.3); background: #fff8e8; }
.admin-flujo, .tarjeta-pendiente { background: #eef9fa; }
.admin-cuentas-grid article, .admin-orden, .cuenta-equipo-tarjeta, .cuenta-equipo-detalle, .flujo-total, .cierre-kpis > div, .pp-parte { background: #fbf7f0; }
.lista-check, .cierre-lista, .factura-foto { background: #fbf7f0; }
.input-text, .input-fecha, .rango-barra input[type="date"], .admin-facturas-filtros input, .pp-select, .pp-importe, .orden-gasto-form input { background: #fff; color: var(--texto); color-scheme: light; }
.modal-card, .orden-gasto-dialog, .pago-proveedor-dialog { background: var(--panel); color: var(--texto); box-shadow: 0 28px 70px -26px rgba(39,50,71,.42); }
.orden-gasto-dialog::backdrop, .pago-proveedor-dialog::backdrop { background: rgba(39,50,71,.44); backdrop-filter: blur(3px); }
.modal-cuenta .cuenta-modal-cabecera { background: var(--panel); }
.toast { background: #fff; }
.tabs, .det-rail, .admin-local-nav {
    background: rgba(255,253,248,.94);
    box-shadow: var(--sombra);
    backdrop-filter: blur(13px);
}
.tab-btn:hover { background: #f7f0e5; }
.admin-local-nav { position: sticky; top: 92px; z-index: 24; padding: 6px; border-radius: 14px; }
.modo-administracion .det-layout .det-rail[hidden] { display: none; }
.admin-local-nav button { min-height: 38px; transition: color .18s ease, background .18s ease, transform .18s ease; }
.admin-local-nav button:hover { transform: translateY(-1px); }
.admin-local-nav button.activa { color: #087984; background: #e7f7f9; box-shadow: inset 0 0 0 1px rgba(8,121,132,.13); }
.admin-gestion-tarjeta { border-radius: 15px; background: #fff; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.admin-gestion-tarjeta:nth-child(2) .admin-gestion-icono { color: #bb4844; background: #fff0ef; border-color: #f4cac6; }
.admin-gestion-tarjeta:hover, .admin-gestion-tarjeta[aria-expanded="true"] { transform: translateY(-3px); box-shadow: var(--sombra-elevada); }
.admin-gestion-icono { border: 1px solid rgba(36,184,198,.24); }
.gate-card { border-radius: 24px; border-color: rgba(199,153,72,.24); background: #fffdf8; box-shadow: 0 34px 80px -30px rgba(39,50,71,.4); }
#gate { background-color: #f7ead3; background-image: radial-gradient(circle at 15% 15%, rgba(85,196,213,.3) 0 110px, transparent 112px), radial-gradient(circle at 85% 80%, rgba(240,100,93,.2) 0 140px, transparent 142px); }
#velo-reinicio { background: rgba(39,50,71,.58); }
.pie { border-top-color: rgba(208,189,161,.7); }

/* Entrada breve; la animación se usa para explicar jerarquía, no para distraer. */
@keyframes iris-entrada { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iris-tarjeta { from { opacity: 0; transform: translateY(14px) rotate(-1deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes iris-pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(22,139,104,.32); } 50% { box-shadow: 0 0 0 6px rgba(22,139,104,0); } }
@keyframes iris-forma { to { transform: translate(-14px,12px) rotate(30deg); border-radius: 58% 42% 36% 64%; } }
.topbar { animation: iris-entrada .34s ease-out both; }
#vista-global > .tablero-portada, #vista-global > .admin-portada { animation: iris-entrada .42s .04s ease-out both; }
.tablero-accesos a { animation: iris-tarjeta .42s .13s ease-out both; }
.tablero-accesos a:nth-child(2) { animation-delay: .19s; }
.tablero-accesos a:nth-child(3) { animation-delay: .25s; }
#vista-global > #kpisGlobal { animation: iris-entrada .42s .12s ease-out both; }
#vista-global > #pendientesAdmin, #vista-global > #avisoColchon, #vista-global > .panel { animation: iris-entrada .44s .17s ease-out both; }
.tab-content.active, .admin-seccion.activa { animation: iris-entrada .24s ease-out; }
.chip.en-linea .punto, .suc-card .punto.on { animation: iris-pulso 2.4s ease-in-out infinite; }

@media (max-width: 1380px) {
    .tablero-portada { grid-template-columns: 1fr; }
}

/* En anchos intermedios conserva los íconos y libera espacio al contenido. */
@media (min-width: 721px) and (max-width: 1080px) {
    .rail { width: 76px; align-items: center; padding-inline: 10px; }
    .rail .rail-marca { justify-content: center; width: 54px; padding-inline: 0; }
    .rail .rail-marca > span, .rail-grupo-titulo, .rail-etiqueta, .rail-sesion-datos { display: none; }
    .rail-menu { width: 100%; align-items: center; }
    .rail-grupo { width: 100%; }
    .rail-sesion { justify-content: center; width: 54px; min-height: 46px; margin: 0 auto 3px; padding-inline: 0; }
    .rail a.rail-modulo, .rail button.rail-modulo { justify-content: center; width: 54px; margin-inline: auto; padding-inline: 0; }
    .rail a.rail-modulo:hover, .rail button.rail-modulo:hover { transform: translateY(-1px); }
    body.con-rail { padding-left: 76px; }
    .shell { padding-inline: 22px; }
}

/* En celular, las funciones se mantienen en una barra inferior y el collage se apila. */
@media (max-width: 720px) {
    body { background-image: radial-gradient(circle at 5% 6%, rgba(85,196,213,.24) 0 62px, transparent 64px), linear-gradient(180deg, #f7e2bc 0, #fbf5ea 330px, #f8f2e8 100%); }
    .rail {
        display: flex;
        top: auto;
        right: 0;
        width: auto;
        height: 72px;
        padding: 5px 7px max(5px, env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,255,255,.13);
        border-right: 0;
        overflow: hidden;
    }
    .rail .rail-marca, .rail-grupo-titulo { display: none; }
    .rail-menu { width: 100%; flex-direction: row; align-items: stretch; gap: 2px; overflow-x: auto; overflow-y: hidden; }
    .rail-grupo { display: contents; }
    .rail-grupo:last-child { margin: 0; }
    .rail-sesion { flex: 0 0 72px; min-height: 58px; margin: 0; padding: 5px 3px; flex-direction: column; justify-content: center; gap: 2px; border: 0; }
    .rail-sesion-avatar { width: 22px; height: 22px; border: 0; background: transparent; }
    .rail-sesion-datos { display: block; max-width: 68px; }
    .rail-sesion-datos b { max-width: 68px; color: #c4ccda; font-size: 9px; font-weight: 650; }
    .rail-sesion-datos small { display: none; }
    .rail a.rail-modulo, .rail button.rail-modulo { flex: 0 0 72px; width: 72px; min-height: 58px; flex-direction: column; justify-content: center; gap: 2px; padding: 5px 3px; font-size: 9px; }
    .rail a.rail-modulo:hover, .rail button.rail-modulo:hover { transform: none; }
    .rail-etiqueta { display: block; max-width: 68px; }
    .rail-icono { width: 22px; height: 22px; }
    body.con-rail { padding-left: 0; padding-bottom: 78px; }
    .shell { padding: 12px 12px 28px; }
    .topbar { top: 7px; margin-bottom: 16px; padding: 11px; border-radius: 16px; }
    .marca { flex: 1 1 210px; }
    .tablero-portada { padding: 24px 18px; border-radius: 20px; }
    .tablero-portada h2 { font-size: 27px; }
    .tablero-accesos { grid-template-columns: 1fr; }
    .tablero-accesos a { min-height: 64px; }
    .admin-portada { padding: 25px 19px; }
    .panel { padding: 18px 15px; }
    .kpi-grid, #kpisGlobal.kpi-grid { grid-template-columns: 1fr; gap: 11px; }
    .admin-local-nav { top: 84px; }
}

/* ===== Cierres: revisión guiada + archivo histórico ===== */
.auditoria-panel { padding: 0; overflow: hidden; border-color: rgba(35,169,181,.28); }
.auditoria-panel.requiere-atencion { border-top: 4px solid #e5a200; }
.auditoria-panel.sin-pendientes { border-top: 4px solid var(--ok); }
.auditoria-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px 18px; background: linear-gradient(135deg, #fffdf8, #eef9fa); border-bottom: 1px solid var(--borde-suave); }
.auditoria-cabecera h3 { margin: 4px 0 5px; font-size: 21px; letter-spacing: -.35px; }
.auditoria-cabecera p { margin: 0; max-width: 660px; color: var(--texto-2); font-size: 12.5px; line-height: 1.5; }
.auditoria-total { flex: 0 0 auto; min-width: 112px; padding: 13px 15px; text-align: center; border: 1px solid rgba(229,162,0,.24); border-radius: 13px; background: #fff7df; }
.sin-pendientes .auditoria-total { border-color: rgba(21,143,101,.2); background: #ecf9f3; }
.auditoria-total b { display: block; color: var(--tinta); font-size: 27px; line-height: 1; }
.auditoria-total span { display: block; margin-top: 5px; color: var(--texto-2); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.auditoria-flujo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 10px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--borde-suave); background: #fbf7f0; }
.auditoria-flujo > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.auditoria-flujo > div > span { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #087984; background: #e2f6f7; font-weight: 800; }
.auditoria-flujo p { margin: 0; display: grid; gap: 2px; }
.auditoria-flujo b { font-size: 12px; }
.auditoria-flujo small { color: var(--texto-2); font-size: 10.5px; line-height: 1.3; }
.auditoria-flujo > i { color: #9ba7b5; font-style: normal; }
.auditoria-aviso { margin: 14px 24px 0; padding: 11px 13px; border: 1px solid rgba(210,138,0,.3); border-radius: 10px; color: #7b5500; background: #fff8e8; font-size: 12px; }
.auditoria-tabla { margin: 0; padding: 8px 18px 18px; }
.auditoria-tabla tr:hover { background: #f8fbfb; }
.diferencia-chip, .auditoria-estado { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 750; }
.diferencia-chip.neutra { color: #526174; background: #eef1f4; }
.diferencia-chip.faltante { color: #b6373d; background: #fff0f0; }
.diferencia-chip.sobrante { color: #087a5b; background: #eaf8f1; }
.auditoria-estado.pendiente { color: #8a5b00; background: #fff3ce; }
.auditoria-estado.enviada { color: #087984; background: #e7f7f9; }
.auditoria-vacio { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 110px; padding: 20px; }
.auditoria-vacio > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ok); font-size: 21px; }
.auditoria-vacio b { font-size: 15px; }
.auditoria-vacio p { margin: 4px 0 0; color: var(--texto-2); font-size: 12px; }
.cierres-turno-bloque + .cierre-historico-bloque { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); }
.cierre-historico-bloque .panel-cabecera > div { flex: 1; }

/* ===== Empleados y nombre del local ===== */
.seccion-intro { margin-bottom: 16px; }
.seccion-intro h3 { margin: 4px 0 6px; font-size: 21px; }

/* Control diario de stock de una sucursal. */
.control-stock-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.control-stock-intro .btn-mini { flex:none; }
.control-stock-resumen { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.control-stock-resumen > div { min-width:0; padding:14px 16px; border:1px solid var(--borde); border-radius:12px; background:var(--panel); }
.control-stock-resumen strong { display:block; font-size:25px; line-height:1.15; font-variant-numeric:tabular-nums; }
.control-stock-resumen span { display:block; margin-top:5px; color:var(--texto-2); font-size:12px; }
.control-stock-actualizacion { margin:0 0 16px; }
.control-stock-lista, .control-stock-config { margin-bottom:16px; }
.control-stock-lista-cabecera { justify-content:space-between; flex-wrap:wrap; }
.control-stock-lista-cabecera label { display:flex; align-items:center; gap:8px; color:var(--texto-2); font-size:12px; }
.control-stock-lista-cabecera select { width:auto; min-width:180px; }
.control-stock-orden { margin-top:10px; border:1px solid var(--borde); border-radius:11px; background:var(--tarjeta); overflow:hidden; }
.control-stock-orden[hidden] { display:none; }
.control-stock-orden summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; cursor:pointer; list-style:none; }
.control-stock-orden summary::-webkit-details-marker { display:none; }
.control-stock-orden summary::before { content:'▸'; flex:none; color:var(--texto-2); }
.control-stock-orden[open] summary::before { content:'▾'; }
.control-stock-orden-titulo { flex:1; min-width:0; }
.control-stock-orden-titulo b, .control-stock-orden-titulo small { display:block; overflow-wrap:anywhere; }
.control-stock-orden-titulo small { margin-top:3px; color:var(--texto-2); font-size:11.5px; }
.control-stock-resultado { flex:none; max-width:42%; padding:5px 9px; border-radius:999px; font-size:11px; font-weight:700; text-align:center; }
.control-stock-resultado.pendiente, .control-stock-resultado.revisar { color:var(--peligro); background:color-mix(in srgb,var(--peligro) 12%,transparent); }
.control-stock-resultado.en-curso { color:var(--alerta); background:color-mix(in srgb,var(--alerta) 14%,transparent); }
.control-stock-resultado.aplicada, .control-stock-resultado.conforme { color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); }
.control-stock-resultado.anulada { color:var(--texto-2); background:var(--hundido); }
.control-stock-orden-cuerpo { padding:0 15px 15px; border-top:1px solid var(--borde-suave); }
.control-stock-orden-cuerpo > .btn-mini { margin:0 0 12px; }
.control-stock-orden-cuerpo .tabla-marco { overflow-x:auto; }
.control-stock-orden-cuerpo .data-table { min-width:700px; }
.control-stock-config-form { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.control-stock-auto { display:flex; gap:7px; align-items:center; min-height:38px; }
.control-stock-paginacion { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.control-stock-paginacion span { color:var(--texto-2); font-size:12px; }
.control-stock-cola { margin-bottom:16px; }
.control-stock-instruccion { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 12px; padding:9px 0; border-top:1px solid var(--borde-suave); font-size:12px; }
.control-stock-instruccion > span { flex:1; min-width:160px; }
.control-stock-instruccion small { flex-basis:100%; color:var(--texto-2); overflow-wrap:anywhere; }
.control-stock-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:12px 0; }
.control-stock-form-grid > label { min-width:0; font-size:12px; color:var(--texto-2); }
.control-stock-form-grid .input-text { display:block; width:100%; margin-top:5px; }
.control-stock-form-grid > [hidden] { display:none; }
.control-stock-form-grid .control-stock-codigos { grid-column:1/-1; }
.control-stock-form-grid textarea { min-height:74px; resize:vertical; }
.control-stock-form-grid .control-stock-auto { align-self:end; }
.control-stock-reglas { display:grid; gap:8px; margin:12px 0; }
.control-stock-regla { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--borde); border-radius:10px; background:var(--tarjeta); }
.control-stock-regla > div:first-child { min-width:0; }
.control-stock-regla b, .control-stock-regla small { display:block; }
.control-stock-regla small { margin-top:4px; color:var(--texto-2); overflow-wrap:anywhere; }
.control-stock-regla-acciones { display:flex; gap:7px; flex-wrap:wrap; }
.control-stock-regla-acciones .btn-mini { white-space:nowrap; }
.control-stock-regla-editor { margin-top:16px; padding-top:14px; border-top:1px solid var(--borde); }
.control-stock-regla-editor h4 { margin:0; }
.control-stock-dias { grid-column:1/-1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; }
.control-stock-dias > span { width:100%; }
.control-stock-dias label { display:inline-flex; align-items:center; gap:3px; }
@media (max-width:720px) {
    .control-stock-resumen { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .control-stock-intro { flex-wrap:wrap; }
    .control-stock-orden summary { flex-wrap:wrap; }
    .control-stock-resultado { max-width:100%; margin-left:18px; }
    .control-stock-form-grid { grid-template-columns:1fr; }
    .control-stock-regla { align-items:flex-start; flex-direction:column; }
}
.cuentas-empleados-seccion { margin-top: 18px; }
.cuentas-empleados-seccion .cuenta-equipo-cabecera { margin-top: 0; }
.identidad-sucursal-form { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 12px; align-items: end; }
.identidad-sucursal-form label { display: grid; gap: 6px; color: var(--texto-2); font-size: 12px; }
.identidad-sucursal-form .btn { width: auto; min-height: 42px; }

/* ===== Informes imprimibles y Libro IVA Ventas ===== */
.informes-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.informes-cabecera h3 { margin: 4px 0 6px; font-size: 22px; }
.informes-cabecera .nota { max-width: 680px; margin: 0; }
.informes-cabecera .btn { width: auto; flex: none; }
.informes-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.informe-tipo { display: grid; gap: 3px; padding: 14px 16px; text-align: left; color: var(--texto); background: #fbf7f0; border: 1px solid var(--borde); border-radius: 12px; font: inherit; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.informe-tipo:hover { transform: translateY(-1px); border-color: var(--acento); }
.informe-tipo.activo { border-color: var(--acento); background: var(--acento-fondo); box-shadow: inset 3px 0 0 var(--acento); }
.informe-tipo span { font-weight: 750; }
.informe-tipo small { color: var(--texto-2); }
#filtrosInformes .rango-barra { margin: 0 0 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: #fffdf8; }
.informe-estado { min-height: 18px; margin: 8px 0; color: var(--texto-2); font-size: 11.5px; }
.informe-bienvenida, .informe-no-disponible { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 180px; padding: 28px; text-align: left; border: 1px dashed var(--borde); border-radius: 14px; background: #fbf7f0; }
.informe-bienvenida > span { color: var(--acento-claro); font-size: 30px; }
.informe-bienvenida b, .informe-no-disponible b { font-size: 17px; }
.informe-bienvenida p, .informe-no-disponible p { margin: 5px 0 0; color: var(--texto-2); }
.informe-documento { padding: 20px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; }
.informe-documento-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--borde-suave); }
.informe-documento-titulo h3 { margin: 4px 0 0; font-size: 20px; }
.informe-documento-titulo > span { color: var(--texto-2); font-size: 12px; }
.informe-documento h4 { margin: 24px 0 10px; }
.libro-iva-totales { grid-template-columns: repeat(6, minmax(110px, 1fr)); }
.libro-iva-tabla { margin-top: 18px; }
.libro-iva-tabla .fila-nota-credito { background: #fff5f5; }
.libro-iva-tabla .fila-nota-credito td:last-child b { color: var(--peligro); }
.libro-iva-resumen { margin-top: 22px; padding: 18px; border: 1px solid var(--borde-suave); border-radius: 14px; background: #fffdf9; }
.libro-iva-resumen-cabecera, .libro-iva-detalle-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.libro-iva-resumen-cabecera h4, .libro-iva-detalle-cabecera h4 { margin: 0 0 4px; font-size: 17px; }
.libro-iva-resumen-cabecera p, .libro-iva-detalle-cabecera p { margin: 0; color: var(--texto-2); font-size: 12px; }
.libro-iva-resumen-cabecera > span { padding: 6px 10px; color: #087984; background: #e8f7f5; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.libro-iva-resumen .libro-iva-tabla { margin-top: 14px; }
.libro-iva-resumen .data-table { table-layout: fixed; font-size: 12.5px; }
.libro-iva-resumen .data-table th, .libro-iva-resumen .data-table td { padding: 10px 8px; }
.libro-iva-resumen .data-table th:nth-child(1) { width: 112px; }
.libro-iva-resumen .data-table th:nth-child(2) { width: 170px; }
.libro-iva-resumen .data-table tbody tr:not(.libro-iva-total):nth-child(even) { background: #faf7f1; }
.libro-iva-resumen .data-table td { border-bottom: 1px solid #e8e0d3; }
.libro-iva-total { background: #f5efe4; font-weight: 800; }
.libro-iva-total td { border-top: 2px solid var(--borde); }
.libro-iva-nota { margin: 10px 0 0; color: var(--texto-2); font-size: 11px; }
.libro-iva-dia-selector { display: grid; gap: 2px; padding: 0; color: var(--texto); background: transparent; border: 0; text-align: left; font: inherit; cursor: pointer; }
.libro-iva-dia-selector b { white-space: nowrap; }
.libro-iva-dia-selector small { color: #087984; font-size: 10px; font-weight: 750; }
.libro-iva-dia-selector:hover small, .libro-iva-dia-selector.seleccionado small { text-decoration: underline; }
.libro-iva-detalle-dia { margin-top: 18px; padding: 18px; border: 1px solid var(--borde); border-radius: 14px; background: #f8fbfb; box-shadow: inset 3px 0 0 var(--acento); }
.libro-iva-detalle-cabecera .btn-mini { flex: none; }
.libro-iva-detalle-tabla { max-height: 520px; overflow: auto; }
.libro-iva-detalle-tabla thead { position: sticky; top: 0; z-index: 1; }

@media (max-width: 760px) {
    .auditoria-cabecera, .informes-cabecera { align-items: stretch; flex-direction: column; }
    .auditoria-total { width: 100%; }
    .auditoria-flujo { grid-template-columns: 1fr; }
    .auditoria-flujo > i { display: none; }
    .identidad-sucursal-form, .informes-selector { grid-template-columns: 1fr; }
    .identidad-sucursal-form .btn, .informes-cabecera .btn { width: 100%; }
    .libro-iva-totales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .libro-iva-resumen-cabecera, .libro-iva-detalle-cabecera { align-items: stretch; flex-direction: column; }
    .libro-iva-resumen-cabecera > span { align-self: flex-start; }
}

@media print {
    .informe-hoja { padding: 8mm; }
    .informe-hoja .informe-documento { padding: 0; border: 0; }
    .informe-hoja .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .informe-hoja .kpi-card { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; }
    .informe-hoja .tabla-marco { overflow: visible; }
    .informe-hoja .data-table { font-size: 9px; }
    .informe-hoja .data-table th, .informe-hoja .data-table td { padding: 5px 4px; color: #111; }
    .informe-hoja .auditoria-aviso, .informe-hoja .admin-eyebrow { color: #111; background: transparent; border-color: #bbb; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}