/* Diseño del portal. Para adaptarlo a la marca ({{GUÍA_DE_DISEÑO}}) basta con cambiar
   las variables de :root y el logo de .marca-icono.
   Estilo: barra superior oscura (hamburguesa en el móvil), superficies planas con borde fino, acento índigo. */
:root {
  --acento: #4338ca;
  --acento-hover: #3730a3;
  --acento-suave: #eef0fe;
  --acento-borde: #c7cbf7;
  --lateral: #0e1320;
  --lateral-2: #171d2e;
  --lateral-texto: #9aa3b8;
  --fondo: #f4f5f7;
  --tarjeta: #ffffff;
  --borde: #e5e7eb;
  --borde-fuerte: #d3d7de;
  --texto: #111827;
  --texto-2: #374151;
  --tenue: #6b7280;
  --grupo: #f8f9fb;
  --pdf: #dc4c41;
  --peligro: #b42318;
  --ok: #15803d;
  --ok-suave: #e7f6ec;
  --alerta: #a15c00;
  --alerta-suave: #fff4df;
  --radio: 10px;
  --titulo: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Compatibilidad con nombres anteriores */
  --azul: var(--acento);
  --azul-suave: var(--acento-suave);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.tenue { color: var(--tenue); font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Hasta que el JS confirma la sesión no se enseña nada. */
body.cargando main, body.cargando .barra { visibility: hidden; }

/* ---------- Estructura: barra superior + contenido ---------- */
.barra { position: sticky; top: 0; z-index: 15; color: #fff; background: rgba(14, 19, 32, .94); border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.barra-interior { max-width: 1440px; height: 64px; margin: 0 auto; padding: 0 36px; display: flex; align-items: center; gap: 28px; }
.barra-marca, .lateral-marca { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; flex: none; }
.barra-marca .marca-icono, .lateral-marca .marca-icono { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, #6366f1, #4338ca); box-shadow: 0 4px 12px rgba(99, 102, 241, .35); }
.barra-marca .marca-icono svg, .lateral-marca .marca-icono svg { width: 19px; height: 19px; }
.barra-marca strong, .lateral-marca strong { display: block; font: 700 14.5px/1.2 var(--titulo); }
.barra-marca small, .lateral-marca small { display: block; color: var(--lateral-texto); font-size: 12px; }
.barra-boton { display: none; }
.barra-menu { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.barra-enlaces { display: flex; gap: 4px; padding-left: 24px; border-left: 1px solid rgba(255,255,255,.08); }
.barra-enlaces a { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 9px; color: var(--lateral-texto); text-decoration: none; font-weight: 500; white-space: nowrap; transition: color .15s, background .15s; }
.barra-enlaces a svg { width: 17px; height: 17px; }
.barra-enlaces a:hover { color: #fff; background: rgba(255,255,255,.06); }
.barra-enlaces a { position: relative; isolation: isolate; }
.barra-enlaces a[aria-current="page"] { color: #fff; }
.pestana-fondo { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(129, 140, 248, .16); box-shadow: inset 0 0 0 1px rgba(165, 180, 252, .22); view-transition-name: pestana; }
.barra-enlaces a[aria-current="page"] svg { color: #a5b4fc; }
.barra-enlaces a:focus-visible, .barra-salir:focus-visible, .barra-boton:focus-visible, .barra-marca:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.barra-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #2a3150; color: #c7d2fe; font: 700 13px var(--titulo); flex: none; }
.barra-quien { min-width: 0; text-align: right; }
.barra-quien strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.barra-quien small { display: block; color: var(--lateral-texto); font-size: 12px; text-transform: capitalize; }
.barra-usuario .avatar { order: -1; }
.barra-quien { order: -2; }
.barra-salir { background: none; border: 0; color: var(--lateral-texto); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; transition: color .15s, background .15s; }
.barra-salir span { display: none; }
.barra-salir:hover { color: #fff; background: rgba(255,255,255,.08); }

.pagina { width: 100%; max-width: 1440px; margin: 0 auto; padding: 32px 36px 44px; display: grid; gap: 20px; align-content: start; }

/* ---------- Cabecera de página ---------- */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 14px; }
.marca-icono { width: 46px; height: 46px; border-radius: 12px; background: var(--acento); color: #fff; display: grid; place-items: center; flex: none; }
.marca-icono svg { width: 22px; height: 22px; }
.cabecera .marca-icono { background: var(--tarjeta); color: var(--acento); border: 1px solid var(--borde); }
.marca h1, .encabezado h1 { font: 800 26px/1.2 var(--titulo); letter-spacing: -.02em; }
.marca p { color: var(--tenue); margin-top: 2px; }
.cabecera-acciones { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; border: 1px solid transparent; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; text-decoration: none; }
.btn-primario { background: var(--acento); color: #fff; box-shadow: 0 1px 2px rgba(67, 56, 202, .25); }
.btn-primario:hover { background: var(--acento-hover); }
.btn-primario:disabled { opacity: .5; cursor: not-allowed; }
.btn-secundario { background: var(--tarjeta); color: var(--texto-2); border-color: var(--borde-fuerte); }
.btn-secundario:hover { border-color: var(--acento-borde); color: var(--acento); }
.btn-peligro { background: var(--tarjeta); color: var(--peligro); border-color: #f3c3bd; }
.btn-peligro:hover { border-color: var(--peligro); }
.btn.resaltado { animation: resalte 1.4s ease-out 2; }
@keyframes resalte { 0% { box-shadow: 0 0 0 0 rgba(67, 56, 202, .5); } 100% { box-shadow: 0 0 0 14px rgba(67, 56, 202, 0); } }
.banda .btn.resaltado { animation-name: resalte-claro; }
@keyframes resalte-claro { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .btn.resaltado { animation: none; outline: 2px solid var(--acento); outline-offset: 3px; } }
.btn-chico { height: 32px; padding: 0 12px; font-size: 13px; }
.btn:focus-visible, .acc:focus-visible, .grupo-toggle:focus-visible, .btn-icono:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.btn-icono { background: none; border: 0; color: var(--tenue); padding: 6px; border-radius: 6px; display: inline-grid; place-items: center; }
.btn-icono:hover { background: var(--fondo); color: var(--texto); }

/* ---------- Superficies ---------- */
.panel { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
.panel-titulo { display: flex; gap: 12px; align-items: center; padding: 16px 20px; }
.panel-titulo > svg { color: var(--acento); width: 20px; height: 20px; }
.panel-titulo h2 { font: 700 15.5px var(--titulo); }
.panel-titulo p { font-size: 12.5px; color: var(--tenue); }
.panel-cuerpo { padding: 0 20px 20px; }

/* KPIs de la página de recibos */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.kpi { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; display: flex; align-items: center; gap: 16px; min-width: 0; }
.kpi-icono { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: var(--acento); background: var(--acento-suave); flex: none; }
.kpi-icono svg { width: 21px; height: 21px; }
.kpi-etiqueta { font-size: 12.5px; font-weight: 500; color: var(--tenue); }
.kpi-valor { font: 700 23px/1.25 var(--titulo); letter-spacing: -.01em; }

/* ---------- Formularios y filtros ---------- */
.filtros { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 18px; display: grid; grid-template-columns: 1fr 1fr 1.3fr 1.3fr auto; gap: 14px; align-items: end; }
.campo { min-width: 0; }
.campo label { display: block; font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; }
.campo input, .campo select { width: 100%; height: 38px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: #fff; color: var(--texto); font-size: 14px; padding: 0 12px; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"] { border-color: var(--peligro); }
.select { position: relative; }
.select select { appearance: none; padding-right: 34px; }
.select svg { position: absolute; right: 11px; top: 10px; pointer-events: none; width: 16px; color: var(--tenue); }
.buscar { position: relative; }
.buscar svg { position: absolute; left: 12px; top: 10px; color: var(--tenue); width: 17px; }
.buscar input { padding-left: 38px; }
.filtros .btn { height: 38px; }

/* ---------- Historial ---------- */
.historial { overflow: hidden; }
.historial-pie { padding: 12px 20px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Scroll horizontal propio; el vertical no lo captura, así que deslizar mueve la página. */
.tabla-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; min-width: 1040px; font-size: 13.5px; }
.tabla th { background: var(--grupo); text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--tenue); padding: 10px 18px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 9px 18px; border-bottom: 1px solid #f0f1f4; vertical-align: middle; white-space: nowrap; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr.fila td:first-child { padding-left: 46px; color: var(--texto-2); white-space: nowrap; }
.tabla tr.fila:hover td { background: #fafaff; }
.tabla-simple tr td:first-child { padding-left: 18px !important; }
tr.grupo td { background: #fbfbfd; font-weight: 600; padding-top: 8px; padding-bottom: 8px; }
.grupo-toggle { display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; font-weight: 600; color: var(--texto); }
.grupo-toggle svg { width: 16px; transition: transform .15s; color: var(--tenue); }
.grupo-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.grupo-cantidad { color: var(--tenue); font-weight: 500; }

/* Etiqueta de cuenta: el color llega de la API como --c */
.cuenta-tag { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px 2px 8px; border-radius: 6px; font-weight: 600; font-size: 12.5px; color: var(--texto-2); background: color-mix(in srgb, var(--c, var(--acento)) 9%, #fff); border: 1px solid color-mix(in srgb, var(--c, var(--acento)) 22%, #fff); white-space: nowrap; }
.cuenta-tag::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c, var(--acento)); }

.archivo { display: inline-flex; align-items: center; gap: 10px; max-width: 260px; vertical-align: middle; }
.archivo svg { color: var(--pdf); }
.archivo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones { display: flex; align-items: center; gap: 14px; }
.acc { display: inline-flex; align-items: center; gap: 7px; color: var(--acento); text-decoration: none; font-weight: 500; border-radius: 4px; }
.acc:hover { color: var(--acento-hover); text-decoration: underline; }
.acc-sep { width: 1px; height: 18px; background: var(--borde); }
.conc { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.conc input { width: 17px; height: 17px; accent-color: var(--ok); margin: 0; }
.conc input:disabled { cursor: default; }
.conc .tenue { font-size: 12px; }
.vacio { padding: 32px; text-align: center; color: var(--tenue); }
.pill { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.pill-ok { background: var(--ok-suave); color: var(--ok); }
.pill-no { background: #f1f2f4; color: var(--tenue); }
.pill-alerta { background: var(--alerta-suave); color: var(--alerta); }

/* ---------- Diálogos ---------- */
.modal { border: 0; border-radius: 14px; padding: 0; width: min(780px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); box-shadow: 0 24px 60px rgba(14, 19, 32, .28); color: var(--texto); }
.modal-chico { width: min(440px, calc(100vw - 32px)); }
.modal::backdrop { background: rgba(14, 19, 32, .5); }
.modal form { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.modal-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 6px; }
.modal-cabecera h2 { font: 700 18px var(--titulo); }
.modal-cuerpo { padding: 12px 22px 4px; display: grid; gap: 12px; }
.modal-lista { overflow-y: auto; padding: 12px 22px 8px; display: grid; gap: 12px; }
.item { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; align-items: end; }
.item.con-error { border-color: #f3c3bd; background: #fffafa; }
.item.incompleto { border-color: #f1d49c; }
.item-nombre { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; min-width: 0; }
.item-nombre > svg { color: var(--pdf); }
.item-nombre .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-nombre .btn-icono { margin-left: auto; }
.item .campo label { font-size: 12px; margin-bottom: 4px; }
.item .campo-cuenta { grid-column: 1 / -1; }
.item .campo-cuenta select { border-color: var(--acento-borde); font-weight: 500; }
.item .campo input.leido { background: #f3faf5; border-color: #bfe3cb; }
.estado { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--fondo); color: var(--tenue); }
.estado svg { width: 16px; height: 16px; }
.estado.leyendo svg { animation: pulso 1s ease-in-out infinite; color: var(--acento); }
.estado.ok { background: var(--ok-suave); color: var(--ok); }
.estado.advertencia { background: var(--alerta-suave); color: var(--alerta); }
.estado.error { background: #fdecea; color: var(--peligro); }
@keyframes pulso { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .estado.leyendo svg { animation: none; } }
.modal-error, .error-caja { padding: 10px 12px; border-radius: 8px; background: #fdecea; color: var(--peligro); font-size: 13px; }
.modal-error { margin: 0 22px; }
.modal-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--borde); margin-top: 8px; flex-wrap: wrap; }
.modal-pie > div { display: flex; gap: 10px; margin-left: auto; }

.aviso { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); background: var(--lateral); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 10px 30px rgba(0,0,0,.22); z-index: 10; }
.tooltip { position: fixed; z-index: 20; pointer-events: none; background: var(--lateral); color: #fff; font-size: 12.5px; padding: 8px 11px; border-radius: 8px; box-shadow: 0 8px 22px rgba(0,0,0,.2); max-width: 260px; }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.login-lado { position: relative; overflow: hidden; color: #fff; padding: 44px 52px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: radial-gradient(circle at 85% 15%, rgba(129, 140, 248, .35) 0, transparent 42%),
              radial-gradient(circle at 5% 100%, rgba(56, 189, 248, .25) 0, transparent 45%),
              linear-gradient(140deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%); }
.login-lado::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000 20%, transparent 85%); }
.login-lado > * { position: relative; z-index: 1; }
.login-lado h2 { font: 800 38px/1.12 var(--titulo); letter-spacing: -.02em; max-width: 480px; }
.login-lado .login-intro { color: #c7d2fe; max-width: 440px; margin-top: 14px; font-size: 15px; }
.login-ilustracion { width: min(420px, 100%); height: auto; margin-top: 28px; filter: drop-shadow(0 18px 30px rgba(15, 12, 60, .35)); }
.login-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: #e0e7ff; font-size: 14px; }
.login-puntos li { display: flex; align-items: center; gap: 10px; }
.login-puntos svg { width: 15px; height: 15px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: rgba(74, 222, 128, .18); color: #4ade80; stroke-width: 2.4; }
.login-lado .lateral-marca small { color: #c7d2fe; }
.login-form { position: relative; display: grid; place-items: center; padding: 32px 20px;
  background: radial-gradient(circle at 50% 0%, #eef0fe 0, transparent 60%), var(--fondo); }
.login-caja { width: min(420px, 100%); display: grid; gap: 18px; padding: 36px 34px 30px; background: #fff; border: 1px solid #e9eaf0; border-radius: 18px;
  box-shadow: 0 2px 4px rgba(17, 24, 39, .04), 0 24px 56px rgba(30, 27, 75, .12); }
.login-saludo { display: grid; gap: 6px; margin-bottom: 4px; }
.login-saludo .bloque-icono { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 8px; }
.login-caja h1 { font: 800 26px var(--titulo); letter-spacing: -.02em; }
.login-caja .btn { width: 100%; height: 46px; font-size: 15px; border-radius: 10px; }
.login-caja .btn svg { transition: transform .15s; }
.login-caja .btn:hover svg { transform: translateX(3px); }
.login-legal { text-align: center; font-size: 12px; color: var(--tenue); }

/* Campo con icono delante y, en las contraseñas, botón para verla */
.con-icono { position: relative; }
.con-icono > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; color: var(--tenue); pointer-events: none; }
.campo .con-icono input { padding-left: 40px; height: 44px; border-radius: 10px; }
.campo .con-icono input:has(+ .ver-clave) { padding-right: 46px; }
.ver-clave { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--tenue); display: grid; place-items: center; }
.ver-clave:hover { background: var(--fondo); color: var(--texto); }
.ver-clave:focus-visible { outline: 2px solid var(--acento); }
.ver-clave[aria-pressed="true"] { color: var(--acento); }

/* ---------- Páginas internas: banda compacta (mismo lenguaje que el inicio) ---------- */
.banda-chica .banda-interior { padding: 30px 36px 96px; align-items: flex-end; flex-wrap: wrap; }
.banda-chica h1 { font-size: 30px; margin-top: 4px; }
.banda-chica .banda-sub { max-width: 560px; }
.banda-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a5b4fc; }
.banda-eyebrow svg { width: 16px; height: 16px; }
.banda-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.banda-acciones .btn { height: 42px; border-radius: 10px; }
.btn-claro { background: #fff; color: var(--acento); box-shadow: 0 6px 16px rgba(15, 12, 60, .25); }
.btn-claro:hover { background: #eef0fe; }
.btn-claro:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.btn-vidrio { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.24); backdrop-filter: blur(4px); }
.btn-vidrio:hover { background: rgba(255,255,255,.18); }
.banda .btn:focus-visible { outline-color: #c7d2fe; }
.kpis4.tres { grid-template-columns: repeat(3, 1fr); }
.kpi4.estatico:hover { transform: none; box-shadow: 0 2px 4px rgba(17, 24, 39, .06), 0 18px 40px rgba(30, 27, 75, .14); }
.pagina.sobre-banda .filtros { border-color: #e9eaf0; box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 28px rgba(17, 24, 39, .06); border-radius: 14px; }
.pagina.sobre-banda .panel { border-radius: 14px; }
.panel-titulo .bloque-icono { width: 36px; height: 36px; }
.panel-titulo .bloque-icono svg { width: 18px; height: 18px; }

/* ---------- Usuarios ---------- */
.usuarios-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.lista-usuarios { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--borde); }
.usuario { display: grid; grid-template-columns: auto minmax(0, 1fr) 150px 96px 236px; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid #f0f1f4; }
.usuario:last-child { border-bottom: 0; }
.usuario:hover { background: #fafaff; }
.usuario.inactivo .usuario-avatar { filter: grayscale(1); opacity: .55; }
.usuario.inactivo .usuario-nombre strong { color: var(--tenue); }
.usuario-avatar { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font: 700 14px var(--titulo); background: linear-gradient(135deg, var(--k2, #818cf8), var(--k, #4338ca)); box-shadow: 0 6px 14px rgba(17, 24, 39, .12); }
.usuario-nombre { min-width: 0; }
.usuario-nombre strong { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-nombre small { display: block; color: var(--tenue); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tu { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 5px; background: var(--acento-suave); color: var(--acento); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.usuario .campo select { height: 34px; font-size: 13px; font-weight: 600; }
.usuario .select svg { top: 9px; }
.usuario .acciones { gap: 8px; justify-content: flex-end; }
.form-usuario { display: grid; gap: 14px; }
.form-usuario .btn { height: 44px; width: 100%; }
.roles { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.roles legend { font-size: 12.5px; font-weight: 600; color: var(--texto-2); margin-bottom: 6px; padding: 0; }
.rol-opcion { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.rol-opcion:hover { border-color: var(--acento-borde); }
.rol-opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.rol-opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.rol-opcion input { margin: 0; accent-color: var(--acento); width: 16px; height: 16px; }
.rol-opcion strong { font-size: 13.5px; }
.rol-opcion small { grid-column: 2; color: var(--tenue); font-size: 12px; }
.nota-seguridad { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--grupo); color: var(--tenue); font-size: 12.5px; }
.nota-seguridad svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--acento); }

/* ---------- Inicio: banda corporativa con profundidad ---------- */
.banda { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(129, 140, 248, .35) 0, transparent 40%),
              radial-gradient(circle at 10% 110%, rgba(56, 189, 248, .25) 0, transparent 45%),
              linear-gradient(125deg, #1e1b4b 0%, #312e81 45%, #4338ca 100%); }
.banda::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, #000 30%, transparent); }
.banda-interior { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 34px 36px 110px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.banda-saludo { font-size: 13.5px; color: #c7d2fe; font-weight: 500; }
.banda h1 { font: 800 34px/1.15 var(--titulo); letter-spacing: -.02em; margin-top: 6px; }
.banda-sub { color: #c7d2fe; margin-top: 6px; max-width: 460px; }
.banda-controles { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.banda-ilustracion { width: min(440px, 38vw); height: auto; filter: drop-shadow(0 18px 30px rgba(15, 12, 60, .35)); }
.selector-mes { position: relative; display: inline-flex; align-items: center; height: 42px; border-radius: 10px; background: #fff; color: var(--texto); box-shadow: 0 6px 16px rgba(15, 12, 60, .25); }
.selector-mes:focus-within { box-shadow: 0 0 0 3px rgba(165, 180, 252, .7); }
.selector-mes > svg:first-child { position: absolute; left: 12px; width: 17px; color: var(--acento); pointer-events: none; }
.selector-mes select { appearance: none; background: transparent; border: 0; color: inherit; font-weight: 700; height: 40px; padding: 0 38px 0 38px; cursor: pointer; text-transform: capitalize; }
.selector-mes select:focus { outline: none; }
.selector-chev { position: absolute; right: 12px; width: 15px; color: var(--tenue); pointer-events: none; }
.chip-datos { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #e0e7ff; font-size: 13px; font-weight: 500; backdrop-filter: blur(4px); }
.chip-datos .punto { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }
.chip-datos.sin-datos .punto { background: #cbd5e1; box-shadow: none; }

.pagina.sobre-banda { margin-top: -78px; position: relative; z-index: 2; padding-top: 0; }
.sombra { box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 8px 24px rgba(17, 24, 39, .06); }
.pagina.sobre-banda .panel { border-color: #e9eaf0; box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 28px rgba(17, 24, 39, .06); }

/* KPIs con color propio */
.kpis4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.kpi4 { --k: #4338ca; --k2: #6366f1; position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; align-content: start; padding: 20px 20px 18px; border-radius: 14px; background: #fff; color: var(--texto); text-decoration: none;
  box-shadow: 0 2px 4px rgba(17, 24, 39, .06), 0 18px 40px rgba(30, 27, 75, .14); transition: transform .18s, box-shadow .18s; }
.kpi4::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--k), var(--k2)); }
.kpi4:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(17, 24, 39, .06), 0 24px 48px rgba(30, 27, 75, .18); }
.kpi4:focus-visible { outline: 3px solid var(--k2); outline-offset: 3px; }
.kpi4.indigo { --k: #4338ca; --k2: #818cf8; }
.kpi4.esmeralda { --k: #047857; --k2: #34d399; }
.kpi4.ambar { --k: #b45309; --k2: #fbbf24; }
.kpi4.rosa { --k: #be185d; --k2: #f472b6; }
.kpi4-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--k2), var(--k)); box-shadow: 0 8px 18px color-mix(in srgb, var(--k) 35%, transparent); }
.kpi4-icono svg { width: 22px; height: 22px; }
.kpi4-etiqueta { font-size: 13px; font-weight: 600; color: var(--tenue); }
.kpi4-valor { grid-column: 1 / -1; margin-top: 16px; font: 800 30px/1.1 var(--titulo); letter-spacing: -.02em; position: relative; }
.kpi4-nota { grid-column: 1 / -1; margin-top: 6px; font-size: 12.5px; color: var(--tenue); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; position: relative; }
.kpi4-fondo { position: absolute; right: -18px; bottom: -22px; width: 84px; height: 84px; color: var(--k); opacity: .06; stroke-width: 1.5; }
.delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 6px; background: #eef0fe; color: #3730a3; font-weight: 700; font-size: 12px; }
.delta svg { width: 12px; height: 12px; }
.delta.sube svg { transform: rotate(-90deg); }
.delta.baja svg { transform: rotate(90deg); }

/* Bloques */
.fila-graficos { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; }
.fila-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bloque { padding: 20px 22px 22px; border-radius: 14px; }
.bloque-cabecera { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.bloque-cabecera h2 { font: 700 16px/1.3 var(--titulo); }
.bloque-cabecera .tenue { font-size: 12.5px; }
.bloque-icono { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; box-shadow: 0 6px 14px rgba(17, 24, 39, .15); }
.bloque-icono svg { width: 19px; height: 19px; }
.bloque-icono.indigo { background: linear-gradient(135deg, #818cf8, #4338ca); }
.bloque-icono.azul { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }
.bloque-icono.verde { background: linear-gradient(135deg, #4ade80, #15803d); }
.bloque-icono.ambar { background: linear-gradient(135deg, #fbbf24, #b45309); }
.bloque-icono.rosa { background: linear-gradient(135deg, #f472b6, #be185d); }
.seccion-titulo { font: 700 16px var(--titulo); margin-bottom: 12px; }

/* Gráfico de área (SVG) */
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); margin: -6px 0 8px; }
.leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda i { width: 14px; height: 3px; border-radius: 2px; background: var(--s); }
.area { position: relative; height: 260px; }
/* En escritorio el área ocupa todo el alto de su tarjeta (iguala a la de la dona). */
.fila-graficos > .bloque { display: flex; flex-direction: column; }
.fila-graficos .area { flex: 1; min-height: 260px; }
/* stroke: none anula el trazo genérico de los iconos; cada marca pone el suyo. */
.area svg, .dona svg, .anillo svg { stroke: none; stroke-width: 1; }
.area svg { width: 100%; height: 100%; display: block; overflow: visible; }
.area text { font: 11px var(--sans); fill: var(--tenue); font-variant-numeric: tabular-nums; }
.area .rejilla { stroke: #eef0f4; stroke-width: 1; }
.area .base { stroke: var(--borde-fuerte); stroke-width: 1; }
.area .cruz { stroke: #c7cbf7; stroke-width: 1; }

/* Dona (3D con WebGL; SVG 2D de respaldo). Primero el móvil: dona a lo ancho, leyenda debajo. */
.dona-caja { display: grid; gap: 14px; }
.dona { position: relative; width: 100%; height: 240px; margin: 0 auto; }
.dona.con-3d { height: 290px; }
.dona > svg { display: block; height: 100%; width: auto; margin: 0 auto; transform: rotate(-90deg); filter: drop-shadow(0 8px 14px rgba(17, 24, 39, .10)); }
.dona.con-3d > svg { display: none; }
.lienzo-3d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; -webkit-tap-highlight-color: transparent; animation: aparecer-3d .35s ease-out; }
@keyframes aparecer-3d { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lienzo-3d { animation: none; } }
.dona-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; text-align: center; pointer-events: none; padding: 6px 12px; border-radius: 12px; transition: background .2s; }
.dona.con-3d .dona-centro { top: auto; bottom: 0; transform: translateX(-50%); background: rgba(255, 255, 255, .88); box-shadow: 0 4px 14px rgba(17, 24, 39, .08); backdrop-filter: blur(4px); white-space: nowrap; }
.dona-centro strong { font: 800 19px/1.2 var(--titulo); }
.dona-centro span { font-size: 11.5px; color: var(--tenue); }
.dona-centro.elegido strong { color: var(--acento); }
.dona-pista { text-align: center; font-size: 11.5px; color: var(--tenue); margin-top: -6px; }
.dona-leyenda { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
.dona-leyenda a { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 1px 9px; align-items: center; padding: 8px 10px; border-radius: 10px; color: var(--texto); text-decoration: none; min-height: 44px; }
.dona-leyenda a:hover { background: var(--grupo); }
.dona-leyenda a:focus-visible { outline: 2px solid var(--acento); }
.dona-leyenda i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.dona-leyenda strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dona-leyenda b { font-variant-numeric: tabular-nums; color: var(--texto); }
.dona-leyenda small { grid-column: 2; color: var(--tenue); font-size: 12px; }
.vacio-chico { color: var(--tenue); padding: 18px 0; text-align: center; }

/* Anillo de conciliación (3D con WebGL; SVG 2D de respaldo) */
.anillo-caja { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: center; }
.anillo { position: relative; width: 190px; height: 180px; }
.anillo > svg { width: 150px; height: 150px; margin: 15px 20px; transform: rotate(-90deg); }
.anillo.con-3d > svg { display: none; }
.anillo-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.anillo-centro strong { font: 800 30px/1 var(--titulo); text-shadow: 0 1px 0 #fff, 0 0 12px #fff; }
.anillo-centro span { font-size: 11.5px; color: var(--tenue); margin-top: 4px; }
.anillo-datos p:first-child, .anillo-sep { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.anillo-sep { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borde); }
.anillo-monto { font: 800 20px/1.25 var(--titulo); }
.punto-estado { width: 9px; height: 9px; border-radius: 50%; }
.punto-estado.ok { background: var(--ok); }
.punto-estado.pendiente { background: #e2e8f0; border: 2px solid #94a3b8; }

/* Último día */
.mini-stats { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; }
.mini-stats > div { background: linear-gradient(180deg, #fafbff, #f3f4fb); border: 1px solid #eceef6; border-radius: 12px; padding: 14px 12px; }
.mini-icono { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #fff; color: var(--acento); box-shadow: 0 2px 6px rgba(17, 24, 39, .08); margin-bottom: 10px; }
.mini-icono svg { width: 16px; height: 16px; }
.mini-valor { font: 800 18px/1.2 var(--titulo); white-space: nowrap; }

/* Revisión */
.revision { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.revision li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 13.5px; padding: 11px 12px; border-radius: 10px; border: 1px solid transparent; }
.revision li.alerta { background: var(--alerta-suave); border-color: #fbe2b3; }
.revision li.bien { background: var(--ok-suave); border-color: #c9ebd5; }
.revision svg { width: 17px; height: 17px; margin-top: 1px; }
.revision .alerta svg { color: var(--alerta); }
.revision .bien svg { color: var(--ok); }
.revision a { color: var(--acento); font-weight: 600; }

/* Accesos rápidos: tarjetas de acción */
.accesos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.acceso { --k: #4338ca; --k2: #818cf8; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid #e9eaf0; color: var(--texto); text-decoration: none;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 10px 24px rgba(17, 24, 39, .05); transition: transform .18s, box-shadow .18s, border-color .18s; }
.acceso:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k) 30%, #fff); box-shadow: 0 16px 32px rgba(17, 24, 39, .10); }
.acceso:focus-visible { outline: 3px solid var(--k2); outline-offset: 2px; }
.acceso.esmeralda { --k: #047857; --k2: #34d399; }
.acceso.ambar { --k: #b45309; --k2: #fbbf24; }
.acceso.rosa { --k: #be185d; --k2: #f472b6; }
.acceso-icono { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--k2), var(--k)); flex: none; box-shadow: 0 8px 16px color-mix(in srgb, var(--k) 30%, transparent); }
.acceso-icono svg { width: 21px; height: 21px; }
.acceso strong { display: block; font-size: 14px; }
.acceso small { display: block; color: var(--tenue); font-size: 12px; margin-top: 1px; }
.acceso > svg:last-child { margin-left: auto; width: 16px; color: var(--tenue); transition: transform .18s; }
.acceso:hover > svg:last-child { transform: translateX(3px); color: var(--k); }
@media (prefers-reduced-motion: reduce) { .kpi4, .acceso, .acceso > svg:last-child, .barra-menu, .barra-enlaces a { transition: none; } }

.pie-inicio { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; }

/* ---------- Facturación: tabla tipo hoja de cálculo ---------- */
.fac-panel { overflow: hidden; }
.fac-barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; padding: 16px 20px; }
.fac-barra h2 { font: 700 15.5px var(--titulo); }
.fac-estado { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tenue); white-space: nowrap; }
.fac-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
.fac-estado.sucio { color: var(--alerta); font-weight: 600; }
.fac-estado.sucio::before { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .2); }
.fac-scroll { overflow: auto; max-height: calc(100dvh - 190px); min-height: 380px; border-top: 1px solid var(--borde); overscroll-behavior: contain; }
.fac-tabla { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.fac-tabla th, .fac-tabla td { padding: 0; height: 34px; white-space: nowrap; border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; }
.fac-tabla thead th { position: sticky; top: 0; z-index: 2; height: 36px; padding: 0 10px; background: var(--grupo); color: var(--tenue); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-align: right; }
.fac-tabla thead tr:nth-child(2) th { top: 36px; border-bottom-color: var(--borde); }
.fac-grupo { text-align: center !important; color: var(--texto) !important; font: 700 12.5px var(--titulo) !important; letter-spacing: 0 !important; text-transform: none !important;
  background: color-mix(in srgb, var(--c, var(--acento)) 9%, #fff) !important; box-shadow: inset 0 3px 0 var(--c, var(--acento)); }
.fac-grupo-total { --c: var(--acento); }
.fac-tabla .fac-fecha { position: sticky; left: 0; z-index: 1; min-width: 82px; padding: 0 12px; background: #fff; text-align: left; color: var(--texto-2); font-weight: 600; border-right: 1px solid var(--borde); }
.fac-tabla thead .fac-fecha { z-index: 4; background: var(--grupo); }
.fac-dia { display: inline-block; width: 32px; color: var(--tenue); font-weight: 500; font-size: 12px; }
.fac-in input { display: block; width: 100%; min-width: 96px; height: 33px; border: 0; border-radius: 0; background: transparent; color: var(--texto); font: inherit; text-align: right; padding: 0 10px; }
.fac-in input[data-campo="ventas"] { min-width: 66px; }
.fac-in input:hover { background: #f6f7ff; }
.fac-in input:focus { outline: 2px solid var(--acento); outline-offset: -2px; background: #fff; }
.fac-in input[aria-invalid="true"] { background: #fdecea; color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro); }
.fac-calc { min-width: 96px; padding: 0 10px !important; text-align: right; color: var(--texto-2); background: #fafbfc; }
.fac-tabla .fac-sep { border-right: 1px solid var(--borde-fuerte); }
.fac-tabla tbody .fac-t { background: #f6f6fe; }
.fac-tabla tbody tr.con-datos .fac-t:not(.fac-in) { color: var(--texto); font-weight: 600; }
.fac-tabla tbody tr.finde .fac-fecha, .fac-tabla tbody tr.finde .fac-in { background: #fafafb; }
.fac-tabla tbody tr.futuro .fac-fecha { color: #a3a9b6; }
.fac-tabla tbody tr.hoy .fac-fecha { color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); }
.fac-tabla tbody tr:hover .fac-fecha { background: #f6f7ff; }
.fac-tabla tfoot th, .fac-tabla tfoot td { position: sticky; bottom: 0; z-index: 2; height: 40px; background: #eef0fe; color: var(--texto); font-weight: 700; border-top: 2px solid var(--acento-borde); }
.fac-tabla tfoot .fac-fecha { z-index: 4; background: #eef0fe; color: var(--acento); text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; }

/* ---------- Transiciones entre páginas (View Transitions entre documentos) ----------
   La barra se queda quieta, el fondo de la pestaña activa se desliza hasta la nueva,
   la banda índigo se transforma en la de la otra página y el contenido sale y entra. */
@view-transition { navigation: auto; }
.barra { view-transition-name: barra; }
.banda { view-transition-name: banda; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22, .8, .24, 1); }
::view-transition-group(banda) { overflow: clip; }
::view-transition-old(banda), ::view-transition-new(banda) { height: 100%; object-fit: cover; object-position: top; }
::view-transition-old(root) { animation: vt-salir .2s ease-in both; }
::view-transition-new(root) { animation: vt-entrar .42s cubic-bezier(.22, .8, .24, 1) .05s both; }
::view-transition-old(barra), ::view-transition-new(barra) { animation: none; }
@keyframes vt-salir { to { opacity: 0; transform: translateY(-6px) scale(.995); } }
@keyframes vt-entrar { from { opacity: 0; transform: translateY(16px); } }
/* Navegadores sin View Transitions: el contenido entra solo, sin animar la salida. */
.sin-vt body.con-barra main { animation: vt-entrar .42s cubic-bezier(.22, .8, .24, 1) both; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sin-vt body.con-barra main { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .filtros { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .usuarios-rejilla { grid-template-columns: 1fr; }
  .usuario-form-panel { order: -1; }
  .kpis4, .accesos { grid-template-columns: 1fr 1fr; }
  .fila-graficos, .fila-3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  /* Barra: marca + hamburguesa; el menú se despliega debajo. */
  .barra-interior { height: 58px; padding: 0 12px 0 16px; justify-content: space-between; gap: 12px; }
  .barra-boton { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none; color: #fff; }
  .barra-boton:hover, .barra.abierta .barra-boton { background: rgba(255,255,255,.08); }
  .barra-boton svg { width: 22px; height: 22px; }
  .barra-menu { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 14px;
    background: var(--lateral); border-bottom: 1px solid rgba(255,255,255,.06); box-shadow: 0 24px 40px rgba(14, 19, 32, .35);
    visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
  .barra.abierta .barra-menu { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s; }
  .barra-enlaces { flex-direction: column; gap: 2px; padding: 0; border: 0; }
  .pestana-fondo { view-transition-name: none; }
  .barra-enlaces a { height: 48px; padding: 0 12px; font-size: 15px; gap: 12px; }
  .barra-enlaces a svg { width: 19px; height: 19px; }
  .barra-usuario { margin-top: 8px; padding: 14px 4px 0 8px; border-top: 1px solid rgba(255,255,255,.08); }
  .barra-usuario .avatar, .barra-quien { order: 0; }
  .barra-quien { flex: 1; text-align: left; }
  .barra-quien strong { max-width: none; }
  .barra-salir { width: auto; height: 40px; padding: 0 12px; display: flex; gap: 8px; border: 1px solid rgba(255,255,255,.12); font-weight: 500; }
  .barra-salir span { display: inline; }
  .login { grid-template-columns: 1fr; }
  .login-lado { padding: 28px 20px; gap: 24px; }
  .login-ilustracion { display: none; }
  .login-lado h2 { font-size: 24px; }
  .banda-ilustracion { display: none; }
}
@media (max-width: 360px) {
  .dona-leyenda { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .fac-barra { padding: 14px 16px; }
  .fac-scroll { max-height: calc(100dvh - 180px); min-height: 320px; }
  .fac-tabla .fac-fecha { min-width: 70px; padding: 0 8px; }
  .fac-dia { width: 28px; }
  .pagina { padding: 20px 16px 32px; gap: 16px; }
  .kpis { grid-template-columns: 1fr; gap: 10px; }
  .cabecera-acciones { width: 100%; }
  .cabecera-acciones .btn { flex: 1; padding: 0 10px; }
  .filtros { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .filtros > .campo:nth-child(n+3), .filtros > .btn { grid-column: 1 / -1; }
  .banda-chica .banda-interior { padding: 22px 16px 100px; }
  .banda-chica h1 { font-size: 25px; }
  .banda-acciones { width: 100%; }
  .banda-acciones .btn, .banda-acciones .selector-mes { flex: 1; }
  .kpis4.tres { grid-template-columns: 1fr 1fr; }
  .kpis4.tres > :first-child { grid-column: 1 / -1; }
  /* Recibos: cada fila pasa a ser una tarjeta */
  .historial .tabla-scroll { overflow: visible; }
  .tabla.tarjetas { min-width: 0; display: block; }
  .tabla.tarjetas thead { display: none; }
  .tabla.tarjetas tbody { display: block; }
  .tabla.tarjetas tr.grupo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; background: #f7f7fb; border-bottom: 1px solid var(--borde); }
  .tabla.tarjetas tr.grupo td { display: block; padding: 0; border: 0; background: none; }
  .tabla.tarjetas tr.grupo td.vacia { display: none; }
  .tabla.tarjetas tr.fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; border-bottom: 1px solid #eef0f3;
    grid-template-areas: "cuenta monto" "billing billing" "archivo archivo" "acciones conc"; }
  .tabla.tarjetas tr.fila td { display: block; padding: 0 !important; border: 0; white-space: normal; min-width: 0; }
  .tabla.tarjetas tr.fila:hover td { background: none; }
  .tabla.tarjetas .c-cuenta { grid-area: cuenta; }
  .tabla.tarjetas .c-monto { grid-area: monto; font: 800 17px var(--titulo); }
  .tabla.tarjetas .c-billing { grid-area: billing; font-size: 12.5px; color: var(--tenue); }
  .tabla.tarjetas .c-billing::before { content: "Billing ID · "; }
  .tabla.tarjetas .c-archivo { grid-area: archivo; }
  .tabla.tarjetas .c-acciones { grid-area: acciones; align-self: center; }
  .tabla.tarjetas .c-conc { grid-area: conc; justify-self: end; align-self: center; }
  .tabla.tarjetas .archivo { max-width: 100%; font-size: 13px; }
  /* Usuarios: tarjeta por usuario */
  .usuario { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av nom est" "rol rol rol" "acc acc acc"; padding: 14px 16px; gap: 10px 12px; }
  .usuario-avatar { grid-area: av; } .usuario-nombre { grid-area: nom; } .usuario-estado { grid-area: est; }
  .usuario-rol { grid-area: rol; } .usuario .acciones { grid-area: acc; }
  .usuario .acciones .btn { flex: 1; }
  /* Login */
  .login-lado { padding: 26px 20px 30px; gap: 22px; }
  .login-lado h2 { font-size: 27px; }
  .login-ilustracion, .login-puntos { display: none; }
  .login-caja { padding: 26px 20px 22px; border-radius: 16px; }
  .login-form { place-items: start center; padding: 0 16px 32px; margin-top: -14px; background: none; }
  .item { grid-template-columns: 1fr; }
  .modal-pie > div { width: 100%; }
  .modal-pie > div .btn { flex: 1; }
  .banda-interior { padding: 24px 16px 96px; }
  .banda h1 { font-size: 27px; }
  .banda-controles { width: 100%; gap: 8px; }
  .selector-mes { width: 100%; }
  /* El chip del periodo pasa a ser una línea de estado discreta, no otro botón */
  .chip-datos { height: auto; padding: 0 2px; background: none; border: 0; backdrop-filter: none; font-size: 12.5px; color: #c7d2fe; }
  .chip-datos .punto { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(74, 222, 128, .2); }
  .selector-mes select { width: 100%; }
  .kpis4 { gap: 10px; }
  .kpi4 { padding: 16px 14px 14px; grid-template-columns: 1fr; row-gap: 8px; }
  .kpi4-valor { font-size: 22px; margin-top: 4px; }
  .kpi4-icono { width: 36px; height: 36px; }
  .bloque { padding: 16px; }
  .area { height: 210px; }
  .dona { height: 230px; }
  .dona.con-3d { height: 280px; }
  .anillo-caja { grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
  .anillo { width: 150px; height: 150px; }
  .anillo > svg { width: 130px; height: 130px; margin: 10px; }
  .anillo-centro strong { font-size: 26px; }
  .anillo-monto { font-size: 17px; }
  .mini-stats { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .mini-stats > div { padding: 10px 8px; }
  .mini-valor { font-size: 16px; }
  .accesos { grid-template-columns: 1fr; }
}