/* Ingresos UT — estilos (mobile-first) */
:root {
  --fondo: #f4f6fa;
  --superficie: #ffffff;
  --superficie-2: #f0f3f7;
  --texto: #1c2536;
  --tenue: #5b6478;
  --borde: #e6e9f0;
  --primario: #1c2d4d;
  --naranja: #e8611c;
  --naranja-2: #f2802f;
  --cielo: #2f9bd9;
  --primario-texto: #ffffff;
  --barra-fondo: #0f3d5e;
  --barra-texto: #ffffff;
  --acento: #1f7a6d;
  --pagado: #1f7a6d;
  --adeudo: #b4532a;
  --pista: #e3e8ee;
  --ok-fondo: #e6f4ef;
  --ok-texto: #155d4f;
  --error-fondo: #fbeceb;
  --error-texto: #9b2c1f;
  --verde: #1f7a4d;
  --verde-fondo: #e7f4ec;
  --ambar: #9a5b00;
  --ambar-fondo: #fdf1dc;
  --rojo: #b42318;
  --rojo-fondo: #fdecea;
  --gris-estado: #8a96a3;
  --s1: #2a6fb0;
  --s2: #9aa9b8;
  --s3: #d07a2c;
  --s4: #7a4fb3;
  --s5: #2b9a8f;
  --s6: #c2508a;
  --s7: #6b8f2a;
  --acceso-panel: linear-gradient(160deg, #f7f9fc, #e8f0f9);
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 32, 48, .06), 0 2px 8px rgba(16, 32, 48, .05);
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: light;
}
/* Tema oscuro: automático según el dispositivo, o elegido con el botón de tema (data-tema en <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0e151c;
    --superficie: #16212b;
    --superficie-2: #1c2935;
    --texto: #e6edf3;
    --tenue: #9aa8b5;
    --borde: #2a3947;
    --primario: #5aa9d6;
    --primario-texto: #06141f;
    --barra-fondo: #102a3d;
    --barra-texto: #e6edf3;
    --acento: #4fc1ad;
    --pagado: #4fc1ad;
    --adeudo: #e8875e;
    --pista: #2a3947;
    --ok-fondo: #12312b;
    --ok-texto: #8fe0cd;
    --error-fondo: #3a1d19;
    --error-texto: #f5a99c;
    --verde: #5fd09a;
    --verde-fondo: #12301f;
    --ambar: #f2b551;
    --ambar-fondo: #33260f;
    --rojo: #f3897c;
    --rojo-fondo: #3a1a17;
    --gris-estado: #6d7b88;
    --s1: #5aa9d6;
    --s2: #66778a;
    --s3: #f0a35e;
    --s4: #a98be0;
    --s5: #4fc1ad;
    --s6: #e58bb6;
    --s7: #a6c56a;
    --acceso-panel: linear-gradient(160deg, #111a24, #0b1219);
    --sombra: none;
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0e151c;
  --superficie: #16212b;
  --superficie-2: #1c2935;
  --texto: #e6edf3;
  --tenue: #9aa8b5;
  --borde: #2a3947;
  --primario: #5aa9d6;
  --primario-texto: #06141f;
  --barra-fondo: #102a3d;
  --barra-texto: #e6edf3;
  --acento: #4fc1ad;
  --pagado: #4fc1ad;
  --adeudo: #e8875e;
  --pista: #2a3947;
  --ok-fondo: #12312b;
  --ok-texto: #8fe0cd;
  --error-fondo: #3a1d19;
  --error-texto: #f5a99c;
  --verde: #5fd09a;
  --verde-fondo: #12301f;
  --ambar: #f2b551;
  --ambar-fondo: #33260f;
  --rojo: #f3897c;
  --rojo-fondo: #3a1a17;
  --gris-estado: #6d7b88;
  --s1: #5aa9d6;
  --s2: #66778a;
  --s3: #f0a35e;
  --s4: #a98be0;
  --s5: #4fc1ad;
  --s6: #e58bb6;
  --s7: #a6c56a;
  --sombra: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.5 var(--fuente);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 1rem; }
p { margin: 0; }
a { color: var(--primario); }
.tenue { color: var(--tenue); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { text-align: right; white-space: nowrap; }

/* ---------- Barra superior ---------- */
.barra {
  background: var(--barra-fondo);
  color: var(--barra-texto);
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra__fila, .nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
}
.barra__fila { justify-content: space-between; min-height: 52px; gap: 12px; }
.marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; }
.marca__logo {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--barra-texto); color: var(--barra-fondo);
  font-weight: 800;
}
.nav { gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav a {
  color: inherit; text-decoration: none; opacity: .8;
  padding: 10px 12px; border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav a.activo { opacity: 1; border-bottom-color: currentColor; font-weight: 600; }

.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 6px 0; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: rgba(255, 255, 255, .18); font-weight: 700;
}
.menu-usuario__nombre { display: none; }
.menu-usuario__panel {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 8px; display: grid; gap: 2px;
}
.menu-usuario__panel a, .menu-usuario__panel .enlace {
  display: block; padding: 10px 12px; border-radius: 8px; color: var(--texto); text-decoration: none; text-align: left; width: 100%;
}
.menu-usuario__panel a:hover, .menu-usuario__panel .enlace:hover { background: var(--superficie-2); }
.menu-usuario__rol { padding: 6px 12px 8px; font-size: .85rem; color: var(--tenue); border-bottom: 1px solid var(--borde); margin-bottom: 4px; }
.enlace { background: none; border: 0; font: inherit; cursor: pointer; }

/* Botón de tema claro / oscuro */
.barra__derecha { display: flex; align-items: center; gap: 6px; }
.boton-tema {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem; line-height: 1;
}
.boton-tema:hover { background: rgba(255, 255, 255, .12); }
.boton-tema--flotante { position: absolute; top: 12px; right: 12px; color: var(--texto); border-color: var(--borde); }

/* ---------- Estructura ---------- */
.contenedor { max-width: 1120px; margin: 0 auto; padding: 16px 16px 48px; display: grid; gap: 16px; }
.encabezado { display: grid; gap: 12px; padding-top: 4px; }
.encabezado__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sobretitulo { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }
.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 16px; display: grid; gap: 12px; min-width: 0;
}
.tarjeta__titulo { display: grid; gap: 2px; }
.tarjeta.angosta { max-width: 480px; }
.subtitulo { font-size: .9rem; color: var(--tenue); margin-top: 4px; }
.nota { font-size: .85rem; color: var(--tenue); }
.pie-datos { font-size: .85rem; }
.chip {
  display: inline-block; vertical-align: middle; font-size: .75rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; background: var(--primario); color: var(--primario-texto);
}
.chip--suave { background: var(--superficie-2); color: var(--tenue); font-weight: 600; }
.etiqueta { font-size: .7rem; font-weight: 600; color: var(--tenue); background: var(--superficie-2); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

/* ---------- Avisos ---------- */
.aviso { padding: 12px 14px; border-radius: 10px; }
.aviso ul { margin: 6px 0 0; padding-left: 20px; }
.aviso--ok { background: var(--ok-fondo); color: var(--ok-texto); }
.aviso--error { background: var(--error-fondo); color: var(--error-texto); }
.aviso--info { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); font-size: .9rem; }

/* ---------- Botones y formularios ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.boton:hover { background: var(--superficie-2); }
.boton--primario { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.boton--primario:hover { filter: brightness(1.1); background: var(--primario); }
.boton--ancho { width: 100%; }
.boton--chico { min-height: 36px; padding: 0 12px; font-size: .9rem; }
.formulario { display: grid; gap: 12px; }
label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; color: var(--tenue); }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%;
}
input:focus, select:focus, textarea:focus, .boton:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primario) 35%, transparent); outline-offset: 1px; border-color: var(--primario);
}
input.monto { text-align: right; font-variant-numeric: tabular-nums; }
input.invalido { border-color: var(--adeudo); background: var(--error-fondo); }
.selector-periodo select { min-width: 0; max-width: 100%; }
.rejilla-2, .rejilla-3 { display: grid; gap: 12px; }
.en-linea { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.en-linea input { flex: 1 1 180px; width: auto; }

/* ---------- Login (inspirado en ADÁN) ---------- */
.contenedor--completo { max-width: none; padding: 0; display: block; }
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--acceso-panel); }
.acceso__hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(150deg, #0f1a33 0%, #1c2d4d 55%, #1f4f86 135%);
  padding: 20px 20px 84px; display: flex; flex-direction: column; gap: 22px;
}
.acceso__brillo { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.acceso__brillo--1 { width: 520px; height: 520px; right: -170px; top: -190px; background: radial-gradient(circle at 40% 40%, rgba(232, 97, 28, .5), rgba(232, 97, 28, 0) 68%); animation: glow-deriva-a 16s ease-in-out infinite alternate; }
.acceso__brillo--2 { width: 580px; height: 580px; left: -210px; bottom: -250px; background: radial-gradient(circle at 60% 60%, rgba(47, 155, 217, .45), rgba(47, 155, 217, 0) 68%); animation: glow-deriva-b 20s ease-in-out infinite alternate; }
/* Chispas que suben desde la flama */
.acceso__chispas { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.acceso__chispas i { position: absolute; bottom: -20px; border-radius: 50%; opacity: 0; background: radial-gradient(circle, #ffb27a, rgba(232, 97, 28, 0) 70%); animation: ember-sube linear infinite; }
.acceso__chispas i:nth-child(1) { left: 8%;  width: 10px; height: 10px; animation-duration: 11s; animation-delay: 0s; }
.acceso__chispas i:nth-child(2) { left: 18%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: 2s; }
.acceso__chispas i:nth-child(3) { left: 29%; width: 12px; height: 12px; animation-duration: 12s; animation-delay: 5s; }
.acceso__chispas i:nth-child(4) { left: 41%; width: 7px;  height: 7px;  animation-duration: 16s; animation-delay: 1s; }
.acceso__chispas i:nth-child(5) { left: 55%; width: 9px;  height: 9px;  animation-duration: 13s; animation-delay: 7s; }
.acceso__chispas i:nth-child(6) { left: 67%; width: 5px;  height: 5px;  animation-duration: 15s; animation-delay: 3s; }
.acceso__chispas i:nth-child(7) { left: 78%; width: 11px; height: 11px; animation-duration: 12s; animation-delay: 9s; }
.acceso__chispas i:nth-child(8) { left: 90%; width: 6px;  height: 6px;  animation-duration: 17s; animation-delay: 4s; }
.acceso__arriba { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.acceso__marca { display: flex; align-items: center; gap: 12px; }
.acceso__flama { width: 26px; height: auto; flex: 0 0 auto; transform-origin: 50% 92%; animation: flama-flota 5s ease-in-out infinite, flama-parpadea 2.6s ease-in-out infinite; }
.acceso__nombre { font-size: 1.35rem; font-weight: 800; letter-spacing: .05em; line-height: 1.1; }
.acceso__sub { font-size: .78rem; color: rgba(255, 255, 255, .72); }
.acceso__mensaje { display: grid; gap: 14px; }
.acceso__mensaje h1 { font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.acceso__resalte { background: linear-gradient(90deg, #ff9a55, #6cc4f2, #ff9a55); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titular-brillo 8s linear infinite; }
.acceso__puntos { list-style: none; margin: 6px 0 0; padding: 0; display: none; gap: 10px; }
.acceso__puntos li {
  transition: transform .2s, background .2s;
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(4px);
}
.acceso__puntos strong { display: block; font-size: .92rem; }
.acceso__puntos li > span:last-child { font-size: .8rem; color: rgba(255, 255, 255, .7); line-height: 1.45; }
.acceso__icono {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
  background: linear-gradient(135deg, #f08a2c, #c9532a);
}
.acceso__icono svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.acceso__icono svg circle { fill: #fff; stroke: none; }
.acceso__pie { display: none; font-size: .78rem; color: rgba(255, 255, 255, .55); }
.boton-tema--claro { color: #fff; border-color: rgba(255, 255, 255, .3); }
.acceso__panel { display: grid; place-items: start center; padding: 0 16px 32px; margin-top: -56px; position: relative; }
.acceso__tarjeta {
  width: 100%; max-width: 420px; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 18px; padding: 26px 22px;
  box-shadow: 0 24px 60px rgba(15, 26, 51, .18), 0 2px 6px rgba(15, 26, 51, .06); display: grid; gap: 14px;
}
.acceso__tarjeta h2 { font-size: 1.5rem; font-weight: 800; }
.acceso__ayuda { font-size: .8rem; color: var(--tenue); text-align: center; }
.boton--acceso { min-height: 48px; border: 0; color: #fff; background: linear-gradient(135deg, #1c2d4d 0%, #1f4f86 100%); box-shadow: 0 8px 20px rgba(31, 79, 134, .3); }
.boton--acceso:hover { filter: brightness(1.12); background: linear-gradient(135deg, #1c2d4d 0%, #1f4f86 100%); }

/* Animaciones del login (mismas que ADÁN) */
@keyframes login-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes login-entra-izq { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes login-entra-der { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes flama-flota { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(1.04); } }
@keyframes flama-parpadea {
  0%, 100% { filter: drop-shadow(0 8px 18px rgba(232, 97, 28, .45)) brightness(1); }
  50% { filter: drop-shadow(0 10px 28px rgba(255, 140, 60, .8)) brightness(1.12); }
}
@keyframes glow-deriva-a { to { transform: translate(-60px, 40px) scale(1.15); } }
@keyframes glow-deriva-b { to { transform: translate(70px, -50px) scale(1.12); } }
@keyframes ember-sube { 0% { transform: translate(0) scale(1); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(34px, -105vh) scale(.4); opacity: 0; } }
@keyframes titular-brillo { from { background-position: 0 50%; } to { background-position: 200% 50%; } }
.acceso__arriba { animation: login-entra-izq .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.acceso__mensaje h1 { animation: login-sube .8s cubic-bezier(.2, .7, .2, 1) .15s backwards; }
.acceso__puntos li { animation: login-sube .7s cubic-bezier(.2, .7, .2, 1) backwards; }
.acceso__puntos li:nth-child(1) { animation-delay: .45s; }
.acceso__puntos li:nth-child(2) { animation-delay: .55s; }
.acceso__puntos li:nth-child(3) { animation-delay: .65s; }
.acceso__puntos li:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
.acceso__pie { animation: login-sube .8s cubic-bezier(.2, .7, .2, 1) .9s backwards; }
.acceso__tarjeta { animation: login-entra-der .8s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .acceso__chispas { display: none; }
}

@media (min-width: 640px) {
  .acceso__puntos { display: grid; }
  .acceso__hero { padding: 28px 32px 96px; }
}
@media (min-width: 960px) {
  .acceso { grid-template-columns: minmax(0, 1.5fr) minmax(400px, 1fr); }
  .acceso__hero { padding: 40px 56px; justify-content: space-between; gap: 32px; min-height: 100vh; min-height: 100dvh; }
  .acceso__flama { width: 32px; }
  .acceso__nombre { font-size: 1.6rem; }
  .acceso__mensaje { max-width: 40rem; gap: 18px; }
  .acceso__puntos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acceso__puntos li { flex-direction: column; }
  .acceso__pie { display: block; }
  .acceso__panel { margin-top: 0; place-items: center; padding: 32px; }
  .acceso__tarjeta { padding: 32px 30px; }
}

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kpi {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 14px; display: grid; gap: 4px; align-content: start; min-width: 0;
}
.kpi h2 { font-size: .8rem; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.kpi__valor { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.kpi__nota { font-size: .8rem; color: var(--tenue); overflow-wrap: anywhere; }
.kpi--pagado .kpi__valor { color: var(--pagado); }
.kpi--adeudo .kpi__valor { color: var(--adeudo); }

/* ---------- Barras de avance ---------- */
.barra-avance {
  -webkit-appearance: none; appearance: none; border: 0;
  width: 100%; height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--pista); color: var(--pagado);
}
.barra-avance::-webkit-progress-bar { background: var(--pista); border-radius: 999px; }
.barra-avance::-webkit-progress-value { background: var(--pagado); border-radius: 999px; }
.barra-avance::-moz-progress-bar { background: var(--pagado); border-radius: 999px; }
.avance { display: flex; align-items: center; gap: 8px; min-width: 0; }
.avance .barra-avance { flex: 1 1 auto; min-width: 60px; }
.avance__pct { font-size: .85rem; font-weight: 600; min-width: 3.6em; text-align: right; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: 10px 8px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.tabla thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); font-weight: 700; }
.tabla thead th.num { text-align: right; }
.tabla tbody th { font-weight: 600; }
.tabla tfoot th, .tabla tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--texto); }
.tabla--compacta th, .tabla--compacta td { padding: 8px 10px; font-size: .9rem; }
.desliza { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borde); border-radius: 10px; }
.desliza .tabla tr > *:first-child { position: sticky; left: 0; background: var(--superficie); }
.desliza .tabla { min-width: 640px; }
.fila-cero td { color: var(--tenue); }
.desliza .tabla--cursos { min-width: 900px; }
.tabla--cursos tbody th { min-width: 200px; font-weight: 600; }

/* Tabla de áreas: en celular cada fila se vuelve una tarjeta */
.tabla--areas thead { display: none; }
.tabla--areas tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.tabla--areas th, .tabla--areas td { display: block; padding: 0; border: 0; }
.tabla--areas tbody th, .tabla--areas tfoot th { grid-column: 1 / -1; margin-bottom: 4px; }
.tabla--areas td[data-label]::before {
  content: attr(data-label); display: block; font-size: .72rem; color: var(--tenue);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.tabla--areas td.num { text-align: left; }
.tabla--areas td[data-label="Cobrado"] { grid-column: 1 / -1; margin-top: 6px; }
.tabla--areas td[colspan] { grid-column: 1 / -1; }
.tabla--areas tfoot tr { border-bottom: 0; border-top: 2px solid var(--texto); }
.tabla--areas tfoot th, .tabla--areas tfoot td { border-top: 0; }
.tabla--areas .sin-dato th { color: var(--tenue); }

/* ---------- Campus ---------- */
.campus { display: grid; gap: 12px; }
.campus__tarjeta { border: 1px solid var(--borde); border-radius: 10px; padding: 14px; display: grid; gap: 8px; background: var(--superficie-2); }
.campus__tarjeta header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.campus__monto { font-size: 1.25rem; font-weight: 800; }
.campus__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.campus__datos dt { font-size: .75rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.campus__datos dd { margin: 0; font-weight: 600; }

/* ---------- Desplegables ---------- */
.desplegable summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: "▾"; color: var(--tenue); transition: transform .15s; }
.desplegable[open] summary::after { transform: rotate(180deg); }
.desplegable:not([open]) { gap: 0; }

/* ---------- Captura ---------- */
.captura { display: grid; gap: 16px; }
.areas-captura { display: grid; gap: 12px; }
.area-captura {
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; min-width: 0;
}
.area-captura legend { font-weight: 700; padding: 0 4px; }
.area-captura__total { grid-column: 1 / -1; font-size: .9rem; color: var(--tenue); }
.area-captura__total strong { color: var(--texto); }
.campus-captura { border: 1px solid var(--borde); border-radius: 10px; padding: 0 12px; }
.campus-captura summary {
  cursor: pointer; padding: 12px 0; display: grid; gap: 2px; list-style: none;
}
.campus-captura summary::-webkit-details-marker { display: none; }
.campus-captura__nombre { font-weight: 700; }
.campus-captura__nombre::before { content: "▸ "; color: var(--tenue); }
.campus-captura[open] .campus-captura__nombre::before { content: "▾ "; }
.campus-captura__resumen { font-size: .85rem; color: var(--tenue); }
.campus-captura__resumen strong { color: var(--texto); }
.campus-captura[open] { padding-bottom: 12px; }
.campus-captura .alumnos { max-width: 260px; margin-bottom: 8px; }
.tabla--captura th, .tabla--captura td { padding: 6px 4px; }
.tabla--captura tbody th { font-size: .85rem; width: 30%; }
.tabla--captura input { min-height: 42px; padding: 8px; }
.barra-guardar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px; margin: 0 -16px;
  background: color-mix(in srgb, var(--fondo) 92%, transparent);
  border-top: 1px solid var(--borde);
  backdrop-filter: blur(6px);
}
.barra-guardar .boton { flex: 1 1 0; }

/* Filas de captura Concepto | Pagado | Adeudo */
.filas-captura { display: grid; gap: 6px; }
.filas-captura__enc, .fila-captura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.filas-captura__enc { font-size: .72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.filas-captura__enc span:not(:first-child) { text-align: right; }
.fila-captura { padding-top: 6px; border-top: 1px solid var(--borde); }
.fila-captura__nombre { font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
.fila-captura input { min-height: 42px; padding: 8px; }
.bitacora { list-style: none; margin: 0; padding: 0; display: grid; }
.bitacora li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.bitacora__accion { font-weight: 600; }

/* Cursos de Centro de Negocios */
[hidden] { display: none !important; }
.cursos { display: grid; gap: 12px; }
.curso {
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; min-width: 0;
}
.curso__nombre, .curso__estatus, .curso__participantes, .curso__pie { grid-column: 1 / -1; }
.curso__participantes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.curso__participantes label { font-size: .78rem; }
.curso__pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
[data-agregar-curso] { justify-self: start; }

/* Adeudo de alumnos (Escolares) */
.cortes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.cortes a {
  flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.cortes a.activo { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.cortes__ok { color: var(--pagado); font-size: .7rem; vertical-align: middle; }
.cortes a.activo .cortes__ok { color: inherit; }
.angosto { max-width: 260px; }
.campus-adeudo summary { cursor: pointer; display: grid; gap: 2px; list-style: none; }
.campus-adeudo summary::-webkit-details-marker { display: none; }
.campus-adeudo[open] .campus-captura__nombre::before { content: "▾ "; }
.programas { display: grid; gap: 12px; }
.programa { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.programa legend { font-weight: 700; padding: 0 4px; }
.programa__campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.programa__campos label { font-size: .78rem; }
.programa__campos input { text-align: right; }
.programa__campos--1 { grid-template-columns: minmax(0, 200px); }
.programa__campos--2, .programa__campos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.programa__grupo { display: grid; gap: 4px; }
.programa__grupo + .programa__grupo { border-top: 1px dashed var(--borde); padding-top: 8px; }
.programa__grupo-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.negativo { color: var(--adeudo); }
.tabla--adeudos td.negativo { font-weight: 700; }
.desplegable--interno { border-top: 1px solid var(--borde); padding-top: 10px; }
.desplegable--interno summary h3 { font-size: .95rem; }
.desliza .tabla--programas { min-width: 980px; }
.tabla--programas tbody th { min-width: 260px; }
.fila-campus th, .fila-campus td { background: var(--superficie-2); font-weight: 700; }

/* Conceptos adicionales (admin) */
.lista-conceptos { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-conceptos li { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.lista-conceptos li.inactivo { opacity: .65; }
.lista-conceptos li.lista-conceptos__grupo { display: block; border-bottom: 0; padding: 16px 0 0; }
.concepto { display: grid; grid-template-columns: 5.5rem 1fr; gap: 8px; align-items: end; }
.concepto .boton { grid-column: 1 / -1; justify-self: start; }
.concepto__estado { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }

/* ---------- Periodos / usuarios ---------- */
.lista-periodos { display: grid; gap: 12px; }
.periodo {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 16px; display: grid; gap: 12px;
}
.periodo header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.periodo h2 a { color: inherit; text-decoration: none; }
.periodo__datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.periodo__datos dt { font-size: .75rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.periodo__datos dd { margin: 0; font-weight: 600; }
.periodo__acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.periodo__acciones .boton { flex: 1 1 auto; }
.lista-usuarios { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-usuarios li { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.lista-usuarios li.inactivo { opacity: .6; }
.lista-usuarios__info { display: grid; }
.lista-usuarios__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.lista-usuarios__acciones summary { list-style: none; }
.lista-usuarios__acciones summary::-webkit-details-marker { display: none; }
.vacio { text-align: center; padding: 32px 16px; display: grid; gap: 8px; justify-items: center; }

/* ---------- Semáforo, mosaico y listas que se expanden ---------- */
.leyenda { font-size: .85rem; color: var(--tenue); display: grid; gap: 6px; }
.leyenda__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.leyenda__lista li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--gris-estado); display: inline-block; }
.estado--verde, .punto--verde { color: var(--verde); }
.estado--ambar, .punto--ambar { color: var(--ambar); }
.estado--rojo, .punto--rojo { color: var(--rojo); }
.estado--sin { color: var(--tenue); }
.estado .punto, .punto--verde, .punto--ambar, .punto--rojo { background: currentColor; }
.estado--sin .punto, .punto--sin { background: var(--gris-estado); }
.kpi--verde { border-top: 4px solid var(--verde); }
.kpi--ambar { border-top: 4px solid var(--ambar); }
.kpi--rojo { border-top: 4px solid var(--rojo); }

.seccion { display: grid; gap: 12px; min-width: 0; }
.seccion__titulo { display: grid; gap: 2px; padding-top: 8px; }
.seccion__titulo h2 { font-size: 1.15rem; }

.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--gris-estado);
  border-radius: 10px; padding: 12px; display: grid; gap: 2px; align-content: start; min-width: 0; box-shadow: var(--sombra);
}
.tile--verde { border-top-color: var(--verde); }
.tile--ambar { border-top-color: var(--ambar); }
.tile--rojo { border-top-color: var(--rojo); }
.tile--sin { background: var(--superficie-2); box-shadow: none; }
.tile__nombre { font-size: .8rem; font-weight: 600; color: var(--tenue); line-height: 1.3; min-height: 2.6em; }
.tile__valor { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }
.tile__valor--vacio { color: var(--tenue); }
.tile__unidad { font-size: .78rem; font-weight: 600; color: var(--tenue); letter-spacing: 0; }
.tile__sub { font-size: .78rem; color: var(--tenue); overflow-wrap: anywhere; }
.tile .estado { margin-top: 4px; }

.lista { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.item { border-bottom: 1px solid var(--borde); }
.item:last-child { border-bottom: 0; }
.item summary, .item.item--total {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; min-height: 52px; cursor: pointer; list-style: none;
}
.item summary::-webkit-details-marker { display: none; }
.item summary::after { content: "›"; color: var(--tenue); font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.item[open] summary::after { transform: rotate(90deg); }
.item[open] summary { background: var(--superficie-2); }
.item.item--total { cursor: default; font-weight: 800; background: var(--superficie-2); }
.item__nombre { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.item__valor { margin-left: auto; font-weight: 700; white-space: nowrap; text-align: right; }
.item--total .item__valor { white-space: normal; }
.item__cuerpo { padding: 4px 16px 16px; display: grid; gap: 12px; }
.datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.datos dt { font-size: .72rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.montos { display: grid; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.montos__titulo { font-size: .8rem; font-weight: 700; padding: 8px 12px; background: var(--superficie-2); }
.montos__enc, .montos__fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 6px 12px; }
.montos__enc { font-size: .7rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.montos__enc span, .montos__fila span:not(:first-child) { text-align: right; }
.montos__fila { font-size: .88rem; border-top: 1px solid var(--borde); }
.montos__fila span:first-child { overflow-wrap: anywhere; }

.bloque { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 0 12px; }
.bloque > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 4px; cursor: pointer; font-weight: 700; list-style: none; }
.bloque > summary::-webkit-details-marker { display: none; }
.bloque > summary::before { content: "▸"; color: var(--tenue); margin-right: 6px; }
.bloque[open] > summary::before { content: "▾"; }
.bloque[open] { padding-bottom: 12px; display: grid; gap: 12px; }
.grupo { display: grid; gap: 8px; }
.grupo__titulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .95rem; }
.grupo__titulo > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.bloque .lista { box-shadow: none; }

/* ---------- Tablas responsivas (vista Reporte de ingresos) ---------- */
.vistas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--borde); }
.vistas a {
  padding: 10px 6px; color: var(--tenue); text-decoration: none; font-weight: 600; font-size: .88rem; line-height: 1.25;
  text-align: center; border-bottom: 3px solid transparent; margin-bottom: -1px; display: flex; align-items: center; justify-content: center;
}
.vistas a.activo { color: var(--texto); border-bottom-color: var(--primario); }
.rtabla-caja { width: 100%; }
.rtabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.rtabla caption { text-align: left; font-weight: 700; padding: 12px 0 8px; caption-side: top; }
.rtabla th, .rtabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: middle; }
.rtabla thead th { background: var(--superficie-2); color: var(--tenue); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.rtabla thead th:first-child { border-top-left-radius: 8px; }
.rtabla thead th:last-child { border-top-right-radius: 8px; }
.rtabla tbody th { font-weight: 600; }
.rtabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--superficie-2) 55%, transparent); }
.rtabla tbody tr:hover { background: var(--superficie-2); }
.rtabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rtabla tfoot th, .rtabla tfoot td { font-weight: 800; background: var(--superficie-2); border-top: 2px solid var(--texto); border-bottom: 0; }
.rtabla__grupo th { background: var(--superficie-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primario); }
.rtabla__subtotal th, .rtabla__subtotal td { font-weight: 800; }
.rtabla__vacia th, .rtabla__vacia td, .rtabla__cero td { color: var(--tenue); }
.bloque--plano { background: none; border: 0; border-top: 1px solid var(--borde); border-radius: 0; padding: 0; }
.bloque--plano[open] { padding-bottom: 4px; }

@media (max-width: 719.98px) {
.rtabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rtabla, .rtabla tbody, .rtabla tfoot, .rtabla tr, .rtabla th, .rtabla td, .rtabla caption { display: block; width: 100%; }
.rtabla tr { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; padding: 4px 14px 8px; background: var(--superficie); }
.rtabla tbody tr:nth-child(even) { background: var(--superficie); }
.rtabla th[scope="row"] { padding: 10px 0 8px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; font-size: 1rem; white-space: normal; }
.rtabla td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
.rtabla td::before { content: attr(data-label); color: var(--tenue); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
.rtabla tfoot tr { background: var(--superficie-2); border: 2px solid var(--borde); }
.rtabla tfoot th, .rtabla tfoot td { border-top: 0; }
.rtabla .rtabla__grupo { border: 0; background: none; padding: 0; margin: 16px 0 6px; }
.rtabla .rtabla__grupo th { background: none; padding: 0; border: 0; font-size: .85rem; }
.rtabla caption { padding-top: 4px; }
}
@media (min-width: 720px) and (max-width: 999.98px) {
.rtabla--ancha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rtabla--ancha, .rtabla--ancha tbody, .rtabla--ancha tfoot, .rtabla--ancha tr, .rtabla--ancha th, .rtabla--ancha td, .rtabla--ancha caption { display: block; width: 100%; }
.rtabla--ancha tr { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 10px; padding: 4px 14px 8px; background: var(--superficie); }
.rtabla--ancha tbody tr:nth-child(even) { background: var(--superficie); }
.rtabla--ancha th[scope="row"] { padding: 10px 0 8px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; font-size: 1rem; white-space: normal; }
.rtabla--ancha td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; border: 0; text-align: right; white-space: normal; }
.rtabla--ancha td::before { content: attr(data-label); color: var(--tenue); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-align: left; }
.rtabla--ancha tfoot tr { background: var(--superficie-2); border: 2px solid var(--borde); }
.rtabla--ancha tfoot th, .rtabla--ancha tfoot td { border-top: 0; }
.rtabla--ancha .rtabla__grupo { border: 0; background: none; padding: 0; margin: 16px 0 6px; }
.rtabla--ancha .rtabla__grupo th { background: none; padding: 0; border: 0; font-size: .85rem; }
.rtabla--ancha caption { padding-top: 4px; }
  .rtabla--ancha tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .rtabla--ancha tbody .rtabla__grupo { grid-column: 1 / -1; }
}

/* ---------- KPIs y gráficas ---------- */
.intro-kpis { font-size: .9rem; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kpi-card {
  background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--gris-estado);
  border-radius: 10px; padding: 12px; display: grid; gap: 3px; align-content: start; min-width: 0; box-shadow: var(--sombra);
}
.kpi-card h3 { font-size: .8rem; font-weight: 600; color: var(--tenue); line-height: 1.3; min-height: 2.6em; }
.kpi-card__valor { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; }
.kpi-card__sub { font-size: .78rem; color: var(--tenue); overflow-wrap: anywhere; }
.kpi-card--verde { border-top-color: var(--verde); }
.kpi-card--ambar { border-top-color: var(--ambar); }
.kpi-card--rojo { border-top-color: var(--rojo); }
.paneles { display: grid; gap: 12px; }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.panel h3 { font-size: 1rem; }
.panel__pregunta { font-size: .85rem; color: var(--tenue); }
.panel__nota { font-size: .78rem; color: var(--tenue); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.panel__sub { font-size: .85rem; margin-top: 4px; }
.panel__grande { font-size: 1.5rem; font-weight: 800; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.panel__grande .tenue { font-size: .85rem; font-weight: 600; }
.panel__vacio { font-size: .88rem; color: var(--tenue); background: var(--superficie-2); border: 1px dashed var(--borde); border-radius: 10px; padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.g-renglon { display: grid; gap: 4px; }
.g-renglon__enc { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.g-renglon__nombre { min-width: 0; overflow-wrap: anywhere; }
.g-renglon__valor { font-weight: 700; white-space: nowrap; }
.g-renglon__sub { font-size: .75rem; color: var(--tenue); }
.g-barra { width: 100%; height: 10px; display: block; border-radius: 5px; overflow: hidden; }
.g-barra--alta { height: 16px; border-radius: 6px; }
.g-renglon .g-barra + .g-barra { margin-top: 3px; }
.g-pista { fill: var(--pista); }
.g-s1 { fill: var(--s1); } .g-s2 { fill: var(--s2); } .g-s3 { fill: var(--s3); } .g-s4 { fill: var(--s4); }
.g-s5 { fill: var(--s5); } .g-s6 { fill: var(--s6); } .g-s7 { fill: var(--s7); } .g-sin { fill: var(--gris-estado); }
.g-verde { fill: var(--verde); } .g-ambar { fill: var(--ambar); } .g-rojo { fill: var(--rojo); }
.g-l1 { stroke: var(--s1); } .g-l2 { stroke: var(--s2); } .g-l3 { stroke: var(--s3); }
.g-t1 { stroke: var(--s1); } .g-t2 { stroke: var(--s2); } .g-t3 { stroke: var(--s3); } .g-t4 { stroke: var(--s4); }
.g-t5 { stroke: var(--s5); } .g-t6 { stroke: var(--s6); } .g-t7 { stroke: var(--s7); }
.g-muestra.g-m1 { background: var(--s1); } .g-muestra.g-m2 { background: var(--s2); } .g-muestra.g-m3 { background: var(--s3); } .g-muestra.g-m4 { background: var(--s4); }
.g-muestra.g-m5 { background: var(--s5); } .g-muestra.g-m6 { background: var(--s6); } .g-muestra.g-m7 { background: var(--s7); }
.g-muestra.g-rojo { background: var(--rojo); } .g-muestra.g-verde { background: var(--verde); } .g-muestra.g-ambar { background: var(--ambar); }
.g-medidor { width: 100%; max-width: 220px; justify-self: center; }
.g-arco-pista, .g-arco { fill: none; stroke-width: 12; stroke-linecap: round; }
.g-arco-pista { stroke: var(--pista); }
.g-arco.g-verde { stroke: var(--verde); } .g-arco.g-ambar { stroke: var(--ambar); } .g-arco.g-rojo { stroke: var(--rojo); } .g-arco.g-sin { stroke: var(--gris-estado); }
.g-medidor__texto { fill: var(--texto); font-size: 20px; font-weight: 800; }
.g-dona-caja { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 12px; align-items: center; }
.g-dona { width: 100%; }
.g-dona__pista, .g-dona__seg { fill: none; stroke-width: 6; }
.g-dona__pista { stroke: var(--pista); }
.g-dona__texto { fill: var(--texto); font-size: 5px; font-weight: 800; }
.g-lineas { width: 100%; height: auto; }
.g-rejilla { stroke: var(--borde); stroke-width: 1; }
.g-eje { fill: var(--tenue); font-size: 11px; }
.g-linea { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.g-spark { width: 100%; height: 36px; }
.g-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--tenue); }
.g-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.g-leyenda--vertical { flex-direction: column; gap: 6px; color: var(--texto); }
.g-leyenda--vertical strong { margin-left: auto; padding-left: 8px; }
.g-muestra { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; background: var(--gris-estado); }
.g-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.g-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: .88rem; }
.g-lista li:last-child { border-bottom: 0; }
.g-lista li > span:first-child { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.g-lista li > span:last-child { text-align: right; }
.g-lista__actual { font-weight: 700; }

.mapa { display: grid; gap: 3px; font-size: .78rem; }
.mapa__fila { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(5, minmax(0, 1fr)); gap: 3px; align-items: stretch; }
.mapa__fila--enc span { color: var(--tenue); font-weight: 700; text-align: center; padding: 4px 0; }
.mapa__fila--enc span:first-child { text-align: left; }
.mapa__grupo { font-weight: 800; padding: 8px 0 2px; font-size: .85rem; }
.mapa__nombre { padding: 6px 4px 6px 0; overflow-wrap: anywhere; line-height: 1.25; }
.mapa__celda { display: grid; place-items: center; border-radius: 6px; padding: 6px 2px; font-weight: 700; min-height: 32px; background: var(--superficie-2); color: var(--tenue); }
.mapa__celda--verde { background: var(--verde-fondo); color: var(--verde); }
.mapa__celda--ambar { background: var(--ambar-fondo); color: var(--ambar); }
.mapa__celda--rojo { background: var(--rojo-fondo); color: var(--rojo); }
.mapa__celda--n { background: var(--superficie-2); color: var(--tenue); font-weight: 500; }
.mapa__celda--vacio { background: none; border: 1px dashed var(--borde); }
.lectura { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: .9rem; }

/* ---------- Estilo ADÁN: tonos, encabezados y tarjetas ---------- */
.tono-navy, .kpi--sin, .tile--sin, .kpi-card--sin { --tone: #243a63; --tone-2: #3d5a96; --tone-soft: #e8edf7; }
.tono-orange { --tone: #e8611c; --tone-2: #f59a4d; --tone-soft: #fde7da; }
.tono-sky { --tone: #2f9bd9; --tone-2: #6cc4f2; --tone-soft: #e0f2fd; }
.tono-green, .kpi--verde, .tile--verde, .kpi-card--verde { --tone: #1a9c5a; --tone-2: #4cc88a; --tone-soft: #e3f7ea; }
.tono-violet { --tone: #7c4fe0; --tone-2: #a98bf5; --tone-soft: #efe9fd; }
.tono-amber, .kpi--ambar, .tile--ambar, .kpi-card--ambar { --tone: #e3a008; --tone-2: #f5cb54; --tone-soft: #fdf3d6; }
.tono-teal { --tone: #0f9f94; --tone-2: #43c9bf; --tone-soft: #dcf5f2; }
.tono-red, .kpi--rojo, .tile--rojo, .kpi-card--rojo { --tone: #d63c3c; --tone-2: #f07a7a; --tone-soft: #fde4e4; }

/* Barra superior blanca con línea de color */
.barra { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 0 var(--borde); }
.barra::after { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--naranja), var(--naranja-2) 30%, var(--cielo) 100%); }
.marca { gap: 10px; }
.marca__flama { width: 16px; height: auto; flex: 0 0 auto; filter: drop-shadow(0 3px 6px rgba(232, 97, 28, .35)); }
.marca__textos { display: grid; line-height: 1.15; }
.marca__eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--naranja); }
.marca__nombre { font-size: 1.05rem; font-weight: 800; color: var(--texto); }
.nav a { color: var(--tenue); opacity: 1; border-radius: 0; }
.nav a:hover { color: var(--texto); }
.nav a.activo { color: var(--texto); border-bottom-color: var(--naranja); }
.avatar { background: linear-gradient(135deg, var(--naranja), var(--naranja-2)); color: #fff; }
.barra .boton-tema { border-color: var(--borde); color: var(--texto); }
.barra .boton-tema:hover { background: var(--superficie-2); }

/* Encabezado del periodo: tarjeta azul marino con brillos */
.encabezado--hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 18px; padding: 20px;
  background: linear-gradient(150deg, #0f1a33 0%, #1c2d4d 55%, #1f4f86 135%);
  box-shadow: 0 18px 40px -24px rgba(15, 26, 51, .7);
}
.encabezado--hero::before, .encabezado--hero::after { content: ""; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.encabezado--hero::before { width: 360px; height: 360px; right: -120px; top: -170px; background: radial-gradient(circle at 40% 40%, rgba(232, 97, 28, .45), rgba(232, 97, 28, 0) 68%); }
.encabezado--hero::after { width: 380px; height: 380px; left: -150px; bottom: -230px; background: radial-gradient(circle at 60% 60%, rgba(47, 155, 217, .35), rgba(47, 155, 217, 0) 68%); }
.encabezado--hero .sobretitulo { color: #ffb27a; }
.encabezado--hero h1 { color: #fff; }
.encabezado--hero .tenue { color: rgba(255, 255, 255, .75); }
.encabezado--hero .tenue strong { color: #fff; }
.encabezado--hero .chip { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.encabezado--hero select { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.encabezado--hero select option { color: #1c2536; }
.encabezado--hero .boton:not(.boton--primario) { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.encabezado--hero .boton:not(.boton--primario):hover { background: rgba(255, 255, 255, .18); }

/* Botón principal naranja */
.boton--primario { border: 0; color: #fff; background: linear-gradient(135deg, var(--naranja), var(--naranja-2)); box-shadow: 0 8px 18px -10px rgba(232, 97, 28, .9); }
.boton--primario:hover { filter: brightness(1.06); background: linear-gradient(135deg, var(--naranja), var(--naranja-2)); transform: translateY(-1px); }

/* Pestañas de vista con icono */
.vistas { border-bottom: 0; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 5px; box-shadow: var(--sombra); }
.vistas a { border-bottom: 0; margin: 0; border-radius: 10px; gap: 6px; flex-direction: column; padding: 8px 4px; font-size: .8rem; transition: background .15s, color .15s; }
.vistas a .ico { width: 20px; height: 20px; }
.vistas a:hover { background: var(--superficie-2); color: var(--texto); }
.vistas a.activo { color: #fff; background: linear-gradient(135deg, #1c2d4d, #1f4f86); box-shadow: 0 8px 18px -12px rgba(15, 26, 51, .8); }

/* Tarjetas de totales (estilo kpi-card de ADÁN) */
.kpi, .kpi-card {
  position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--borde);
  background: linear-gradient(135deg, var(--superficie) 55%, var(--tone-soft, var(--superficie)) 160%);
  transition: transform .15s, box-shadow .15s; box-shadow: 0 1px 3px rgba(15, 26, 51, .04);
}
.kpi::after, .kpi-card::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--tone, #243a63), var(--tone-2, #3d5a96)); }
.kpi:hover, .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(15, 26, 51, .28); }
.kpi { padding: 16px 16px 14px 18px; }
.kpi:has(.kpi__icono) { padding-right: 62px; }
.kpi__icono {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, var(--tone), var(--tone-2)); box-shadow: 0 8px 16px -8px var(--tone);
}
.kpi__icono .ico { width: 21px; height: 21px; }
.kpi h2 { font-size: .74rem; letter-spacing: .06em; }
.kpi__valor { color: var(--texto); }
.kpi--pagado .kpi__valor, .kpi--adeudo .kpi__valor { color: var(--texto); }
.kpi-card { border-top: 1px solid var(--borde); padding-left: 16px; }

/* Títulos de sección con insignia naranja */
.tarjeta > h2, .tarjeta__titulo > h2, .seccion__titulo > h2 {
  display: flex; align-items: center; gap: 10px; font-size: .92rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.tarjeta > h2::before, .tarjeta__titulo > h2::before, .seccion__titulo > h2::before {
  content: ""; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; box-shadow: 0 6px 14px -8px rgba(232, 97, 28, .9);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E") center / 15px no-repeat, linear-gradient(135deg, var(--naranja), var(--naranja-2));
}
.tarjeta, .panel, .lista, .periodo, .bloque { border-radius: 16px; border-color: var(--borde); box-shadow: 0 1px 3px rgba(15, 26, 51, .04); }

/* Mosaicos del semaforeado */
.tile { border-top: 1px solid var(--borde); border-radius: 14px; position: relative; overflow: hidden; padding-left: 16px;
  background: linear-gradient(135deg, var(--superficie) 55%, var(--tone-soft, var(--superficie)) 170%); transition: transform .15s, box-shadow .15s; }
.tile::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--tone, #243a63), var(--tone-2, #3d5a96)); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(15, 26, 51, .28); }
.tile--sin { background: var(--superficie-2); }

/* Tarjetas de periodo (estilo area-card) */
.periodo { transition: transform .15s, box-shadow .15s, border-color .15s; background: linear-gradient(135deg, var(--superficie) 60%, #e8edf7 170%); }
.periodo:hover { transform: translateY(-2px); border-color: #3d5a96; box-shadow: 0 12px 24px -14px #243a63; }
.periodo header { justify-content: flex-start; gap: 12px; }
.periodo header .chip { margin-left: auto; }
.periodo__icono { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tone), var(--tone-2)); box-shadow: 0 8px 16px -8px var(--tone); }
.periodo__icono .ico { width: 22px; height: 22px; }
.periodo h2 { font-size: .9rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* Entradas suaves al cargar (como ADÁN) */
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.contenedor > .encabezado, .contenedor > .vistas, .kpis > *, .kpi-grid > *, .mosaico > *, .paneles > *, .lista-periodos > * { animation: aparece .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.kpis > :nth-child(2), .kpi-grid > :nth-child(2), .mosaico > :nth-child(2), .paneles > :nth-child(2), .lista-periodos > :nth-child(2) { animation-delay: .06s; }
.kpis > :nth-child(3), .kpi-grid > :nth-child(3), .mosaico > :nth-child(3), .paneles > :nth-child(3), .lista-periodos > :nth-child(3) { animation-delay: .12s; }
.kpis > :nth-child(4), .kpi-grid > :nth-child(4), .mosaico > :nth-child(4), .paneles > :nth-child(4), .lista-periodos > :nth-child(4) { animation-delay: .18s; }
.kpi-grid > :nth-child(n+5), .mosaico > :nth-child(n+5), .paneles > :nth-child(n+5), .lista-periodos > :nth-child(n+5) { animation-delay: .24s; }
.contenedor > .vistas { animation-delay: .08s; }

/* Tonos en modo oscuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) :is([class*="tono-"], .kpi, .kpi-card, .tile) { --tone-soft-o: color-mix(in srgb, var(--tone, #3d5a96) 26%, #16212b); }
  :root:not([data-tema="claro"]) :is(.kpi, .kpi-card, .tile) { background: linear-gradient(135deg, var(--superficie) 50%, var(--tone-soft-o) 170%); }
  :root:not([data-tema="claro"]) .periodo { background: linear-gradient(135deg, var(--superficie) 60%, #22324a 170%); }
  :root:not([data-tema="claro"]) .encabezado--hero { box-shadow: none; border: 1px solid #22344a; }
}
:root[data-tema="oscuro"] :is([class*="tono-"], .kpi, .kpi-card, .tile) { --tone-soft-o: color-mix(in srgb, var(--tone, #3d5a96) 26%, #16212b); }
:root[data-tema="oscuro"] :is(.kpi, .kpi-card, .tile) { background: linear-gradient(135deg, var(--superficie) 50%, var(--tone-soft-o) 170%); }
:root[data-tema="oscuro"] .periodo { background: linear-gradient(135deg, var(--superficie) 60%, #22324a 170%); }
:root[data-tema="oscuro"] .encabezado--hero { box-shadow: none; border: 1px solid #22344a; }

/* App instalada: respetar la muesca/barra de estado del teléfono */
.barra { padding-top: env(safe-area-inset-top); }
.barra-guardar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.menu-usuario__nota { padding: 8px 12px; font-size: .78rem; color: var(--tenue); }
.boton--instalar { border-style: dashed; color: var(--texto); }
.sin-conexion { min-height: 70vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; max-width: 420px; margin: 0 auto; }
.sin-conexion__flama { width: 40px; height: auto; animation: flama-flota 5s ease-in-out infinite, flama-parpadea 2.6s ease-in-out infinite; transform-origin: 50% 92%; }

/* ---------- Tableta ---------- */
@media (min-width: 640px) {
  h1 { font-size: 1.6rem; }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi__valor { font-size: 1.7rem; }
  .campus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-2 { grid-template-columns: 1fr 1fr; }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
  .rejilla-3 .boton, .rejilla-2 .boton { grid-column: 1 / -1; justify-self: start; }
  .areas-captura { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-periodos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .periodo__datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lista-usuarios li { grid-template-columns: 1fr auto; align-items: center; }
  .concepto { grid-template-columns: 6rem 1fr auto; }
  .concepto .boton { grid-column: auto; }
  .lista-conceptos li { grid-template-columns: 1fr auto; align-items: end; gap: 16px; }
  .barra-guardar .boton { flex: 0 0 auto; min-width: 140px; }
  .menu-usuario__nombre { display: inline; }
  .programa__campos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vistas a { flex-direction: row; justify-content: center; font-size: .88rem; padding: 10px 8px; }
  .encabezado--hero { padding: 26px 28px; }
  .programa__campos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .programa__campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .programa__campos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .programa__campos--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .paneles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel--ancho { grid-column: 1 / -1; }
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaico--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Tableta horizontal / escritorio: tabla de áreas como tabla real ---------- */
@media (min-width: 720px) {
  .tabla--areas thead { display: table-header-group; }
  .tabla--areas tr { display: table-row; padding: 0; border: 0; }
  .tabla--areas th, .tabla--areas td { display: table-cell; padding: 12px 8px; border-bottom: 1px solid var(--borde); }
  .tabla--areas tbody th { margin: 0; }
  .tabla--areas td[data-label]::before { display: none; }
  .tabla--areas td.num { text-align: right; }
  .tabla--areas { font-size: .92rem; }
  .tabla--areas tbody th, .tabla--areas tfoot th { width: 27%; }
  .tabla--areas td[data-label="Cobrado"] { width: 16%; }
  .tabla--areas .avance { flex-direction: column; align-items: stretch; gap: 2px; }
  .tabla--areas .avance__pct { text-align: left; }
  .tabla--areas tfoot th, .tabla--areas tfoot td { border-top: 2px solid var(--texto); border-bottom: 0; }
}

@media (min-width: 900px) {
  .encabezado { grid-template-columns: 1fr auto; align-items: end; }
  .tabla--areas { font-size: 1rem; }
  .tabla--areas td[data-label="Cobrado"] { width: 20%; }
  .tabla--areas .avance { flex-direction: row; align-items: center; gap: 8px; }
  .tabla--areas .avance__pct { text-align: right; }
  .areas-captura { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaico--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mosaico--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lista-periodos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .periodo__datos { grid-template-columns: 1fr 1fr; }
}

@media print {
  .barra, .encabezado__acciones, .barra-guardar { display: none; }
  body { background: #fff; }
  .tarjeta, .kpi { box-shadow: none; }
  details > *:not(summary) { display: block; }
}

/* Botón PDF del Reporte de ingresos */
.boton--pdf .ico { width: 18px; height: 18px; }
.encabezado--hero .boton--pdf { border-color: rgba(242, 128, 47, .55); }

/* Captura protegida: estado del borrador y avisos de recuperación */
.barra-guardar { flex-wrap: wrap; align-items: center; }
.barra-guardar__estado { flex: 1 1 100%; margin: 0; font-size: .82rem; color: var(--tenue); min-height: 1.1em; }
.barra-guardar__estado:empty { display: none; }
.barra-guardar__estado--pendiente { color: var(--naranja, #e8611c); font-weight: 600; }
.barra-guardar__estado--error { color: var(--error-texto); font-weight: 700; }
.aviso-borrador { display: grid; gap: 10px; margin-bottom: 14px; }
.aviso-borrador p { margin: 0; }
.aviso-borrador__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 760px) {
  .barra-guardar__estado { flex: 1 1 auto; }
}

/* ---------- Inicio: menú de módulos (Gerencia y Administrador) ---------- */
.inicio__hero h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); letter-spacing: -.02em; }
.modulos { display: grid; gap: 14px; }
.modulo {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start;
  padding: 18px 18px 16px 20px; border: 1px solid var(--borde); border-radius: 18px; color: var(--texto); text-decoration: none;
  background: linear-gradient(135deg, var(--superficie) 55%, var(--tone-soft, var(--superficie)) 165%);
  box-shadow: 0 1px 3px rgba(15, 26, 51, .04); transition: transform .15s, box-shadow .15s, border-color .15s;
  animation: aparece .55s cubic-bezier(.2, .7, .2, 1) backwards;
}
.modulo:nth-child(2) { animation-delay: .07s; }
.modulo:nth-child(n+3) { animation-delay: .14s; }
.modulo::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--tone), var(--tone-2)); }
.modulo:hover, .modulo:focus-visible { transform: translateY(-3px); border-color: var(--tone); box-shadow: 0 16px 30px -18px var(--tone); }
.modulo__icono {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--tone), var(--tone-2)); box-shadow: 0 10px 20px -10px var(--tone);
}
.modulo__icono .ico { width: 26px; height: 26px; }
.modulo__numero { position: absolute; top: 12px; right: 16px; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--tone); opacity: .14; letter-spacing: -.04em; }
.modulo__textos { display: grid; gap: 4px; min-width: 0; padding-right: 36px; }
.modulo__nombre { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.modulo__pregunta { font-size: .95rem; font-weight: 600; color: var(--texto); }
.modulo__descripcion { font-size: .85rem; color: var(--tenue); }
.modulo__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--borde); }
.modulo__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .85rem; color: var(--tenue); }
.modulo__dato strong { color: var(--texto); }
.modulo__entrar { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; font-size: .9rem; color: var(--tone); }
.modulo__entrar .ico { width: 18px; height: 18px; transition: transform .15s; }
.modulo:hover .modulo__entrar .ico { transform: translateX(3px); }
.modulo--pendiente { background: var(--superficie-2); }
.modulo--pendiente .modulo__icono { filter: saturate(.55); opacity: .85; }
.modulo--pendiente .modulo__pie .chip { margin-left: auto; }
@media (min-width: 720px) {
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:root[data-tema="oscuro"] .modulo:not(.modulo--pendiente) { background: linear-gradient(135deg, var(--superficie) 50%, color-mix(in srgb, var(--tone) 26%, #16212b) 170%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .modulo:not(.modulo--pendiente) { background: linear-gradient(135deg, var(--superficie) 50%, color-mix(in srgb, var(--tone) 26%, #16212b) 170%); }
}
.modulo__resumen .ico { width: 16px; height: 16px; }
div.modulo:hover { transform: none; border-color: var(--borde); box-shadow: 0 1px 3px rgba(15, 26, 51, .04); }

/* ---------- Factibilidad (estilo Ingresos con tablas tipo hoja de cálculo del diseño de Factibilidad) ---------- */
.fx { display: grid; gap: 16px; min-width: 0; --fx-c1: #1f4f86; --fx-c2: #8597b4; --fx-c3: #e8611c; --fx-c4: #1a9c5a; }
.fx-hero { display: grid; gap: 14px; }
.fx-hero__titulo h1 { font-size: clamp(1.25rem, 3.6vw, 1.8rem); text-transform: uppercase; letter-spacing: -.005em; overflow-wrap: break-word; hyphens: auto; }
.fx-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.fx-folio { display: flex; gap: 6px; align-items: center; flex: 1 1 260px; max-width: 360px; }
.fx-folio input { min-height: 40px; padding: 8px 10px; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .28); }
.fx-folio input::placeholder { color: rgba(255, 255, 255, .6); }
.fx-folio .boton { min-height: 40px; }
.fx-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--borde); }
.fx-seg button { font: inherit; font-size: .8rem; font-weight: 700; padding: 6px 11px; border: 0; border-radius: 7px; background: none; color: var(--tenue); cursor: pointer; min-height: 32px; }
.fx-seg button[aria-pressed="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.encabezado--hero .fx-seg { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.encabezado--hero .fx-seg button { color: rgba(255, 255, 255, .75); }
.encabezado--hero .fx-seg button[aria-pressed="true"] { background: #fff; color: #1c2d4d; }
.fx-veredicto { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.fx-veredicto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.fx-veredicto--viable { background: var(--verde-fondo); color: var(--verde); }
.fx-veredicto--no-viable { background: var(--rojo-fondo); color: var(--rojo); }
.fx-veredicto--revision { background: var(--ambar-fondo); color: var(--ambar); }
.fx-veredicto--sin { background: var(--superficie-2); color: var(--tenue); }
.fx-nota { font-size: .78rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.fx-hojas { display: flex; overflow-x: auto; scrollbar-width: thin; }
.fx-hojas a { flex: 1 0 auto; min-width: 86px; padding: 8px 10px; white-space: nowrap; }
.fx-vacio { justify-items: start; }
.fx-demo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.fx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-kpis .kpi:last-child { grid-column: 1 / -1; }
.fx-kpis .kpi__valor { font-variant-numeric: tabular-nums; font-size: 1.25rem; overflow-wrap: anywhere; }
.fx-vista { display: grid; gap: 16px; min-width: 0; }
.fx-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fx-cab h3 { font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Tablas con números alineados, primera columna fija y encabezado azul marino */
.fx-tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fx-tabla th, .fx-tabla td { padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; text-align: right; vertical-align: middle; font-size: .88rem; }
.fx-tabla thead th { background: #1c2d4d; color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; position: sticky; top: 0; }
.fx-tabla tr > :first-child { text-align: left; position: sticky; left: 0; z-index: 1; background: var(--superficie); font-weight: 600; }
.fx-tabla thead tr > :first-child { background: #1c2d4d; z-index: 2; }
.fx-tabla tbody tr:hover > * { background: var(--superficie-2); }
.fx-tabla .fx-gen { background: color-mix(in srgb, #1f4f86 9%, var(--superficie)); font-weight: 600; }
.fx-tabla thead .fx-gen { background: #1f4f86; }
.fx-tabla .fx-sec > * { background: var(--superficie-2); color: var(--naranja); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fx-tabla .fx-tot > * { font-weight: 700; border-top: 1.5px solid var(--tenue); }
.fx-tabla .fx-grande > * { background: color-mix(in srgb, var(--naranja) 10%, var(--superficie)); }
.fx-tabla .fx-grupo { text-align: center; border-left: 1px solid rgba(255, 255, 255, .25); }
.fx-tabla .fx-subcab th { background: #1f4f86; font-size: .66rem; padding: 4px 10px; }
.fx-tabla .fx-borde { border-left: 1px solid var(--borde); }
.fx-der { text-align: right !important; }
.fx-sup th, .fx-sup td { white-space: normal; text-align: left; }
.fx-sup tr > :first-child { white-space: nowrap; }
.fx-sup td.fx-der { min-width: 210px; }
.fx-sup .fx-dgad > * { color: var(--tenue); }
.fx-sup .fx-dgad.fx-activo > * { color: var(--texto); }
.fx-col-real { background: color-mix(in srgb, var(--naranja) 8%, var(--superficie)); }
.fx-valor { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.fx-num, .fx-sel { min-height: 36px; padding: 6px 8px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.fx-num { width: 100%; min-width: 92px; text-align: right; background: var(--superficie-2); }
.fx-num--chico { width: 82px; min-width: 0; }
.fx-sel { width: auto; min-width: 116px; }
.fx-obs { min-height: 34px; padding: 5px 6px; border-color: transparent; background: transparent; min-width: 160px; font-size: .86rem; }
.fx-obs:hover { border-color: var(--borde); }
.fx-fijo { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px dashed var(--borde); border-radius: 8px; background: var(--superficie-2); font-weight: 600; min-width: 92px; justify-content: flex-end; }
.fx-fijo .ico { width: 13px; height: 13px; color: var(--tenue); }
.fx-dif { font-weight: 600; }
.fx-sube { color: var(--verde) !important; }
.fx-baja, .fx-neg { color: var(--rojo) !important; }
.fx-alerta { color: var(--ambar); font-size: .86rem; font-weight: 700; }
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .6; cursor: not-allowed; }

/* Tablero */
.fx-lectura-texto { margin: 0; border-left: 4px solid var(--naranja); background: color-mix(in srgb, var(--naranja) 9%, var(--superficie)); border-radius: 0 12px 12px 0; padding: 12px 16px; font-weight: 500; max-width: 80ch; }
.fx-kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.fx-kcard { display: grid; gap: 5px; align-content: start; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 14px; padding: 14px; min-width: 0; }
.fx-kcard--destacada { border-top: 3px solid var(--naranja); }
.fx-kcard__etiqueta { font-size: .72rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.fx-kcard__valor { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-kcard__sub { font-size: .76rem; color: var(--tenue); }
.fx-kcard__sub i { font-style: normal; font-weight: 700; }
.fx-barra { position: relative; height: 8px; border-radius: 999px; background: var(--pista); margin-top: 4px; }
.fx-barra i { display: block; height: 100%; width: 0; border-radius: 999px; }
.fx-barra i.fx-ok { background: var(--verde); } .fx-barra i.fx-mal { background: var(--rojo); }
.fx-barra s { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--texto); border-radius: 2px; }
.fx-dos { display: grid; gap: 16px; }
.fx-donas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.fx-dona { margin: 0; display: grid; gap: 8px; }
.fx-dona figcaption { font-size: .8rem; font-weight: 700; color: var(--tenue); }
.fx-dona__caja { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.fx-dona__caja svg { width: 150px; height: 150px; flex: none; }
.fx-dona__caja ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .8rem; flex: 1 1 140px; min-width: 0; }
.fx-dona__caja li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.fx-dona__caja li b { font-variant-numeric: tabular-nums; }
.fx-arco { fill: none; stroke-width: 22; }
.fx-dona__rotulo { fill: var(--tenue); font-size: 11px; }
.fx-dona__valor { fill: var(--texto); font-size: 17px; font-weight: 700; }
.fx-arco.fx-c1, rect.fx-c1 { stroke: var(--fx-c1); fill: var(--fx-c1); } .fx-arco.fx-c2, rect.fx-c2 { stroke: var(--fx-c2); fill: var(--fx-c2); }
.fx-arco.fx-c3, rect.fx-c3 { stroke: var(--fx-c3); fill: var(--fx-c3); } .fx-arco.fx-c4, rect.fx-c4 { stroke: var(--fx-c4); fill: var(--fx-c4); }
.fx-arco { fill: none !important; }
.fx-arco.fx-pista { stroke: var(--pista); } rect.fx-cneg { fill: var(--rojo); }
.g-muestra.fx-c1 { background: var(--fx-c1); } .g-muestra.fx-c2 { background: var(--fx-c2); } .g-muestra.fx-c3 { background: var(--fx-c3); } .g-muestra.fx-c4 { background: var(--fx-c4); } .g-muestra.fx-cneg { background: var(--rojo); }
.fx-grafica svg { width: 100%; height: auto; display: block; }
.fx-cero { stroke: var(--texto); }
.fx-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.fx-pcard { display: grid; gap: 6px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; }
.fx-pcard__cab { display: flex; justify-content: space-between; align-items: center; }
.fx-pcard__linea { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; font-size: .8rem; }
.fx-pcard__linea span { color: var(--tenue); }
.fx-pcard__linea b { text-align: right; font-variant-numeric: tabular-nums; }
.fx-pcard__linea small { grid-column: 2; text-align: right; font-size: .7rem; }
.fx-pildora { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .05em; padding: 4px 8px; border-radius: 999px; }
.fx-pildora--viable { background: var(--verde-fondo); color: var(--verde); }
.fx-pildora--no-viable { background: var(--rojo-fondo); color: var(--rojo); }
.fx-pildora--revision { background: var(--ambar-fondo); color: var(--ambar); }
.fx-pildora--sin { background: var(--superficie-2); color: var(--tenue); }

/* Escenarios, diálogos y avisos */
.fx-escenarios { display: grid; gap: 12px; }
.fx-escenario { display: grid; gap: 10px; border: 1px solid var(--borde); border-radius: 14px; padding: 14px; background: var(--superficie-2); min-width: 0; }
.fx-escenario .desliza { background: var(--superficie); }
.fx-en-linea { display: inline-flex; align-items: center; gap: 8px; }
.fx-vacio-in { display: grid; gap: 10px; justify-items: start; }
.fx-dialogo { border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); color: var(--texto); padding: 22px; width: min(440px, calc(100vw - 32px)); }
.fx-dialogo::backdrop { background: rgba(8, 14, 28, .55); }
.fx-dialogo__form { display: grid; gap: 12px; }
.fx-dialogo h2 { font-size: 1.05rem; }
.fx-check { display: flex; align-items: center; gap: 8px; color: var(--texto); }
.fx-check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--naranja); }
.fx-avisos { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; z-index: 40; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
.fx-aviso { background: var(--texto); color: var(--superficie); padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: .86rem; box-shadow: var(--sombra); }
.fx-confirmar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: #fff; }

@media (min-width: 720px) {
  .fx-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fx-kpis .kpi:last-child { grid-column: auto; }
}
@media (min-width: 1100px) {
  .fx-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .fx-hero__acciones { justify-content: flex-end; max-width: 620px; }
}
@media (min-width: 1000px) { .fx-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Celular y tableta: las tablas de captura (Supuestos, DGAD, seguimiento real) se vuelven tarjetas, una variable por bloque */
@media (max-width: 899.98px) {
  .desliza:has(> .fx-sup) { border: 0; overflow: visible; }
  .fx-sup thead { display: none; }
  .fx-sup, .fx-sup tbody { display: block; }
  .fx-sup tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .fx-sup th, .fx-sup td { display: block; padding: 0; border: 0; position: static !important; background: none !important; text-align: left !important; }
  .fx-sup td[data-label]::before { content: attr(data-label); display: block; font-size: .7rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
  .fx-sup td.fx-der { min-width: 0; }
  .fx-sup .fx-valor { justify-content: flex-start; }
  .fx-sup .fx-num { max-width: 180px; }
  .fx-sup .fx-obs { min-width: 0; width: 100%; padding-left: 0; }
}
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .fx { --fx-c1: #5aa9d6; --fx-c2: #7c8daa; --fx-c3: #f28a42; --fx-c4: #5fcf92; } }
:root[data-tema="oscuro"] .fx { --fx-c1: #5aa9d6; --fx-c2: #7c8daa; --fx-c3: #f28a42; --fx-c4: #5fcf92; }
.fact-permisos { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; min-width: 0; }
.fact-permisos legend { font-size: .85rem; font-weight: 700; color: var(--tenue); padding: 0 4px; }
.fact-permisos__hojas { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.fact-permisos__caja { grid-column: 1 / -1; display: grid; gap: 6px; }
.fact-permisos .fx-check { font-weight: 600; font-size: .88rem; }
.lista-usuarios li:has(.lista-usuarios__acciones details[open]) { grid-template-columns: minmax(0, 1fr); }
.lista-usuarios li:has(.lista-usuarios__acciones details[open]) .lista-usuarios__acciones { justify-content: flex-start; }
@media (min-width: 720px) { .modulo--ancho { grid-column: 1 / -1; } }
.miga { color: inherit; text-decoration: none; }
.miga::before { content: "‹ "; }
.miga:hover { color: var(--naranja); }
/* Calendario de pagos en celular: tarjetas por periodo */
.fx-cal-movil { display: none; }
@media (max-width: 719.98px) {
  .fx-cal-escritorio { display: none; }
  .fx-cal-movil { display: grid; gap: 8px; }
  .fx-calp { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--superficie-2); display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
  .fx-calp__cab { display: flex; justify-content: space-between; gap: 8px; font-size: .95rem; padding-bottom: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 2px; }
  .fx-calp__linea { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; }
  .fx-calp__linea span:first-child { color: var(--tenue); }
  .fx-calp--total { background: color-mix(in srgb, var(--naranja) 10%, var(--superficie)); border-color: color-mix(in srgb, var(--naranja) 35%, var(--borde)); }
}
/* Corrida financiera en celular: tarjetas por periodo */
.fx-run-movil { display: none; }
@media (max-width: 719.98px) {
  .fx-run-escritorio { display: none; }
  .fx-run-movil { display: grid; gap: 10px; min-width: 0; }
  .fx-run-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; background: var(--superficie); scrollbar-width: none; }
  .fx-run-chips button { flex: 0 0 auto; font: inherit; font-size: .8rem; font-weight: 700; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto); cursor: pointer; }
  .fx-runp { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--superficie-2); display: grid; gap: 4px; font-variant-numeric: tabular-nums; scroll-margin-top: 56px; }
  .fx-runp--gen { background: color-mix(in srgb, var(--naranja) 10%, var(--superficie)); border-color: color-mix(in srgb, var(--naranja) 35%, var(--borde)); }
  .fx-runp__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--borde); }
  .fx-runp__cab h3 { font-size: .95rem; }
  .fx-runp__cab b { font-size: 1.05rem; }
  .fx-runp dl { margin: 0; display: grid; gap: 4px; }
  .fx-runp__linea { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; font-size: .86rem; }
  .fx-runp__linea dt { color: var(--tenue); }
  .fx-runp__linea dd { margin: 0; text-align: right; font-weight: 600; }
  .fx-runp__linea .fx-runp__dif { grid-column: 1 / -1; font-size: .74rem; font-weight: 600; }
  p.fx-runp__dif { font-size: .76rem; font-weight: 600; margin: 0; }
  .fx-runp__materias { align-items: center; }
  .fx-runp__desglose summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--naranja); padding: 6px 0 2px; min-height: 32px; }
  .fx-runp__desglose[open] { display: grid; gap: 4px; }
  .fx-runp__sec { margin: 8px 0 2px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja); }
}

/* Inicio en celular: solo las tarjetas de los módulos (sin barra de navegación ni saludo) */
@media (max-width: 719.98px) { .inicio__hero { display: none; } }
/* Escenarios en celular: lista comparativa ordenada por alumnos */
.fx-esc-movil { display: none; }
@media (max-width: 719.98px) {
  .fx-esc-escritorio { display: none; }
  .fx-esc-movil { display: grid; gap: 10px; min-width: 0; }
  .fx-esc-resumen { margin: 0; font-size: .86rem; color: var(--tenue); }
  .fx-esc-resumen strong { color: var(--texto); }
  .fx-esc-equilibrio { margin: 0; display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; color: var(--tenue); }
  .fx-esc-equilibrio::before, .fx-esc-equilibrio::after { content: ""; flex: 1; border-top: 1px dashed var(--tenue); }
  .fx-esc-equilibrio--no { color: var(--rojo); }
  .fx-esc-equilibrio--no::before, .fx-esc-equilibrio--no::after { border-color: var(--rojo); }
  .fx-escp { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--superficie-2); display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
  .fx-escp--base { background: color-mix(in srgb, var(--naranja) 10%, var(--superficie)); border-color: color-mix(in srgb, var(--naranja) 35%, var(--borde)); }
  .fx-escp__cab { display: flex; align-items: center; gap: 8px; }
  .fx-escp__cab h3 { font-size: .95rem; margin-right: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .fx-escp__quitar { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-size: 1.3rem; line-height: 1; cursor: pointer; }
  .fx-escp__margen { margin: 0; font-size: 1.5rem; font-weight: 800; }
  .fx-escp__margen .tenue { font-size: .8rem; font-weight: 600; }
  .fx-escp__barra { margin: 0 0 4px; }
  .fx-escp__datos { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
  .fx-escp__datos div { display: grid; }
  .fx-escp__datos dt { font-size: .72rem; font-weight: 700; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
  .fx-escp__datos dd { margin: 0; font-weight: 700; font-size: .92rem; }
  .fx-escp__periodo { border-top: 1px solid var(--borde); padding-top: 6px; margin-top: 4px; display: grid; gap: 2px; }
  .fx-escp__periodo-cab { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; margin-bottom: 2px; }
}

/* Buscador de programas (Factibilidad): lista desplegable que se filtra al escribir */
.fx-hero { overflow: visible; z-index: 5;
  background: radial-gradient(360px 260px at 92% -30%, rgba(232, 97, 28, .45), transparent 70%),
    radial-gradient(380px 260px at -8% 130%, rgba(47, 155, 217, .35), transparent 70%),
    linear-gradient(150deg, #0f1a33 0%, #1c2d4d 55%, #1f4f86 135%); }
.fx-hero::before, .fx-hero::after { display: none; }
.fx-folio { flex: 1 1 280px; max-width: 420px; }
.fx-buscador { position: relative; flex: 1 1 auto; min-width: 0; }
.fx-buscador input { width: 100%; }
.fx-resultados { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; list-style: none; margin: 0; padding: 6px;
  max-height: min(360px, 60vh); overflow-y: auto; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(15, 26, 51, .55); width: max(100%, min(420px, calc(100vw - 32px))); right: auto; }
.fx-resultados li[role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 9px; cursor: pointer; min-height: 44px; }
.fx-resultados li[role="option"]:hover, .fx-resultados li[aria-selected="true"] { background: var(--superficie-2); }
.fx-resultados li[aria-selected="true"] { outline: 2px solid color-mix(in srgb, var(--naranja) 45%, transparent); }
.fx-resultado__textos { display: grid; min-width: 0; }
.fx-resultado__textos b { font-size: .82rem; color: var(--naranja); letter-spacing: .03em; }
.fx-resultado__textos span { font-size: .88rem; overflow-wrap: anywhere; }
.fx-resultados mark { background: color-mix(in srgb, var(--naranja) 25%, transparent); color: inherit; border-radius: 3px; }
.fx-resultado--abierto .fx-resultado__textos span::after { content: " · abierto"; color: var(--tenue); font-size: .78rem; }
.fx-resultados__vacio { padding: 10px; color: var(--tenue); font-size: .86rem; }
.fx-buscador input[type="search"]::-webkit-search-cancel-button { filter: invert(1); }
@media (max-width: 719.98px) { .fx-resultados { width: 100%; } }
@media (max-width: 719.98px) { .fx-folio { position: relative; } .fx-buscador { position: static; } }
.fx-exportar { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fx-exportar .ico { width: 16px; height: 16px; }

/* Factibilidad sin programa abierto: tarjetas de los programas guardados */
.fx-elegir { gap: 14px; }
.fx-elegir__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fx-elegir__resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-elegir__resumen:empty { display: none; }
.fx-elegir__total { font-size: .9rem; color: var(--tenue); margin-right: 4px; }
.fx-elegir__total strong { color: var(--texto); font-size: 1.05rem; }
.fx-elegir__filtro { max-width: 360px; }
.fx-elegir__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.fx-elegir__prog { width: 100%; height: 100%; display: grid; gap: 6px; align-content: start; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  position: relative; overflow: hidden; padding: 14px 14px 12px 18px; border: 1px solid var(--borde); border-radius: 14px;
  background: linear-gradient(135deg, var(--superficie) 55%, color-mix(in srgb, #7c4fe0 9%, var(--superficie)) 170%);
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.fx-elegir__prog::after { content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: linear-gradient(180deg, #7c4fe0, #a98bf5); }
.fx-elegir__prog:hover, .fx-elegir__prog:focus-visible { transform: translateY(-2px); border-color: #7c4fe0; box-shadow: 0 12px 24px -16px #7c4fe0; }
.fx-elegir__fila { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fx-elegir__folio { font-size: .78rem; font-weight: 800; letter-spacing: .05em; color: var(--naranja); text-transform: uppercase; overflow-wrap: anywhere; }
.fx-elegir__nombre { font-size: 1.02rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.fx-elegir__meta { font-size: .78rem; color: var(--tenue); }
.fx-elegir__abrir { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--borde); font-size: .84rem; font-weight: 700; color: #7c4fe0; }
.fx-elegir__abrir .ico { width: 16px; height: 16px; transition: transform .15s; }
.fx-elegir__prog:hover .fx-elegir__abrir .ico { transform: translateX(3px); }
.fx-elegir__vacio { color: var(--tenue); font-size: .9rem; }
:root[data-tema="oscuro"] .fx-elegir__abrir { color: #a98bf5; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .fx-elegir__abrir { color: #a98bf5; } }

/* Ingresos BD: tablas con más columnas (deslizan dentro de su tarjeta en pantallas medianas) */
@media (min-width: 720px) {
  .rtabla-caja:has(.bd-tabla) { overflow-x: auto; }
  .bd-tabla { font-size: .84rem; }
  .bd-tabla th, .bd-tabla td { padding: 8px 8px; }
}
.bd-aviso strong { margin-right: 4px; }