/* =====================================================================
   SIMULADOR CONTABLE INFOTEP · Sistema de diseño
   Paleta tomada del logotipo institucional:
     azul   #14296F   ·   naranja #F7941D   ·   verde #17A81A
   ===================================================================== */

:root {
  /* marca */
  --azul-900:#0B1A4A; --azul-800:#102156; --azul-700:#14296F; --azul-600:#1D3894;
  --azul-500:#2B4FC4; --azul-400:#4C74E8; --azul-300:#8AA6F5; --azul-100:#E3EAFD; --azul-50:#F1F5FF;
  --naranja-700:#C56A05; --naranja-600:#E8820C; --naranja-500:#F7941D; --naranja-400:#FCAE4A;
  --naranja-100:#FEEEDA; --naranja-50:#FFF7EC;
  --verde-700:#0F7A12; --verde-600:#138F16; --verde-500:#17A81A; --verde-400:#4CC44F;
  --verde-100:#DEF6DF; --verde-50:#F0FCF0;
  --rojo-600:#C62828; --rojo-500:#E53935; --rojo-100:#FDE3E3; --rojo-50:#FFF5F5;
  --ambar-600:#B45309; --ambar-500:#F59E0B; --ambar-100:#FEF3C7; --ambar-50:#FFFBEB;
  --cian-500:#0891B2; --cian-100:#CFFAFE;
  --morado-500:#7C3AED; --morado-100:#EDE9FE;

  /* superficies */
  --fondo:#F4F7FC;
  --fondo-2:#EDF2FA;
  --panel:#FFFFFF;
  --panel-2:#FAFBFE;
  --borde:#E3E9F3;
  --borde-fuerte:#CBD5E8;

  /* texto */
  --txt:#152039;
  --txt-2:#4A5772;
  --txt-3:#8590A8;
  --txt-inv:#FFFFFF;

  /* sistema */
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sombra-1:0 1px 2px rgba(16,33,86,.06), 0 1px 3px rgba(16,33,86,.05);
  --sombra-2:0 4px 12px rgba(16,33,86,.07), 0 2px 4px rgba(16,33,86,.04);
  --sombra-3:0 12px 32px rgba(16,33,86,.10), 0 4px 10px rgba(16,33,86,.05);
  --sombra-nav:0 8px 28px rgba(11,26,74,.28);
  --ancho-nav:264px;
  --alto-top:64px;
  --trans:.18s cubic-bezier(.4,0,.2,1);

  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
}

[data-tema="oscuro"] {
  --fondo:#0D1424; --fondo-2:#121B2F; --panel:#161F35; --panel-2:#1B2540;
  --borde:#26314C; --borde-fuerte:#35436A;
  --txt:#E8EDF8; --txt-2:#A8B4CC; --txt-3:#74809A;
  --azul-50:#141F3C; --azul-100:#1B2B52;
  --naranja-50:#2A1D0B; --naranja-100:#3A2810;
  --verde-50:#0E2513; --verde-100:#123018;
  --rojo-50:#2C1416; --rojo-100:#3A181B;
  --ambar-50:#2B2008; --ambar-100:#3A2B0C;
  --sombra-1:0 1px 2px rgba(0,0,0,.3);
  --sombra-2:0 4px 12px rgba(0,0,0,.35);
  --sombra-3:0 12px 32px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--fondo); color:var(--txt);
  font-family:var(--fuente); font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{ margin:0; font-weight:650; letter-spacing:-.017em; line-height:1.25; }
h1{ font-size:1.6rem; } h2{ font-size:1.24rem; } h3{ font-size:1.05rem; } h4{ font-size:.95rem; }
p{ margin:0 0 .6rem; }
a{ color:var(--azul-600); text-decoration:none; transition:color var(--trans); }
a:hover{ color:var(--azul-500); }
small{ font-size:.8rem; }
hr{ border:0; border-top:1px solid var(--borde); margin:18px 0; }
::selection{ background:var(--azul-100); color:var(--azul-800); }

.ico{ width:18px; height:18px; flex:none; fill:none; stroke:none; vertical-align:-3px; }
.ico path:not([fill="none"]){ fill:currentColor; }
.ico [stroke]{ fill:none; }

/* ------------------------------------------------------------- estructura */
.app{ display:flex; min-height:100vh; }

.nav{
  width:var(--ancho-nav); flex:none; position:fixed; inset:0 auto 0 0; z-index:60;
  background:linear-gradient(168deg,#14296F 0%,#101F58 46%,#0B1A4A 100%);
  color:#C9D5F5; display:flex; flex-direction:column; box-shadow:var(--sombra-nav);
  transition:transform var(--trans);
}
.nav::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:radial-gradient(520px 220px at 12% 2%, rgba(247,148,29,.20), transparent 70%),
             radial-gradient(420px 260px at 90% 100%, rgba(23,168,26,.16), transparent 70%);
}
.nav > *{ position:relative; z-index:1; }

.nav-marca{ display:flex; align-items:center; gap:11px; padding:16px 18px 14px; }
.nav-marca img{ height:36px; width:auto; background:#fff; border-radius:9px; padding:4px 6px; }
.nav-marca .t1{ font-weight:750; font-size:.9rem; color:#fff; letter-spacing:-.01em; line-height:1.15; }
.nav-marca .t2{ font-size:.68rem; color:#93A9E0; letter-spacing:.07em; text-transform:uppercase; font-weight:600; }

.nav-scroll{ flex:1; overflow-y:auto; padding:4px 10px 18px; scrollbar-width:thin; }
.nav-scroll::-webkit-scrollbar{ width:6px; }
.nav-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:6px; }

.nav-grupo{ margin:14px 0 5px; padding:0 10px; font-size:.64rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#7C93CF; }

.nav a.item{
  display:flex; align-items:center; gap:10px; padding:8.5px 11px; margin-bottom:2px;
  border-radius:10px; color:#C3D1F2; font-size:.855rem; font-weight:520;
  transition:background var(--trans), color var(--trans), transform var(--trans);
}
.nav a.item .ico{ width:17px; height:17px; opacity:.82; }
.nav a.item:hover{ background:rgba(255,255,255,.09); color:#fff; }
.nav a.item:hover .ico{ opacity:1; }
.nav a.item.activo{
  background:linear-gradient(92deg, rgba(247,148,29,.24), rgba(247,148,29,.07));
  color:#fff; font-weight:620; box-shadow:inset 3px 0 0 var(--naranja-500);
}
.nav a.item.activo .ico{ opacity:1; color:var(--naranja-400); }
.nav .item .pill{ margin-left:auto; font-size:.66rem; font-weight:700; padding:1px 7px;
  border-radius:var(--r-full); background:rgba(255,255,255,.16); color:#fff; }

.nav-pie{ padding:12px 14px; border-top:1px solid rgba(255,255,255,.10); font-size:.72rem; color:#8199D6; }

.principal{ flex:1; min-width:0; margin-left:var(--ancho-nav); display:flex; flex-direction:column; }

.top{
  height:var(--alto-top); position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--borde); display:flex; align-items:center; gap:14px; padding:0 24px;
}
[data-tema="oscuro"] .top{ background:rgba(22,31,53,.86); }
.top .titulo{ font-weight:680; font-size:1.02rem; letter-spacing:-.015em; }
.top .ruta{ font-size:.74rem; color:var(--txt-3); font-weight:500; }
.top .der{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.btn-menu{ display:none; }

.avatar{
  width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center;
  font-size:.76rem; font-weight:700; color:#fff; letter-spacing:.02em;
  background:linear-gradient(135deg,var(--azul-600),var(--azul-500)); flex:none;
}
.avatar.sm{ width:28px; height:28px; font-size:.66rem; }
.avatar.lg{ width:54px; height:54px; font-size:1.1rem; }

.usuario-chip{ display:flex; align-items:center; gap:9px; padding:4px 10px 4px 4px;
  border-radius:var(--r-full); border:1px solid var(--borde); background:var(--panel);
  transition:box-shadow var(--trans); }
.usuario-chip:hover{ box-shadow:var(--sombra-2); }
.usuario-chip .n{ font-size:.8rem; font-weight:600; color:var(--txt); line-height:1.15; }
.usuario-chip .r{ font-size:.68rem; color:var(--txt-3); text-transform:capitalize; }

.contenido{ padding:22px 24px 56px; flex:1; max-width:1500px; width:100%; }

/* --------------------------------------------------------------- encabezado */
.cabecera{ display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cabecera .txt{ min-width:240px; flex:1; }
.cabecera h1{ display:flex; align-items:center; gap:10px; }
.cabecera .sub{ color:var(--txt-2); font-size:.875rem; margin-top:3px; }
.cabecera .acciones{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ------------------------------------------------------------------ tarjetas */
.tarjeta{
  background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-lg);
  box-shadow:var(--sombra-1); overflow:hidden;
}
.tarjeta + .tarjeta{ margin-top:16px; }
.tarjeta-cab{
  display:flex; align-items:center; gap:11px; padding:14px 18px;
  border-bottom:1px solid var(--borde); background:var(--panel-2);
}
.tarjeta-cab h3{ font-size:.95rem; }
.tarjeta-cab .sub{ font-size:.76rem; color:var(--txt-3); }
.tarjeta-cab .der{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.tarjeta-cuerpo{ padding:18px; }
.tarjeta-cuerpo.compacto{ padding:12px 14px; }
.tarjeta-pie{ padding:12px 18px; border-top:1px solid var(--borde); background:var(--panel-2);
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* rejillas */
.rejilla{ display:grid; gap:16px; }
.r-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.r-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.r-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.r-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.r-6{ grid-template-columns:repeat(6,minmax(0,1fr)); }
.r-23{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
.r-32{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.r-21{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
@media (max-width:1200px){ .r-4,.r-5,.r-6{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1201px) and (max-width:1440px){ .r-6{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:1080px){ .r-23,.r-32,.r-21{ grid-template-columns:1fr; } }
@media (max-width:860px){ .r-2,.r-3{ grid-template-columns:1fr; } }

/* ------------------------------------------------------------------- KPI */
.kpi{
  position:relative; background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:16px 17px; box-shadow:var(--sombra-1);
  transition:transform var(--trans), box-shadow var(--trans); overflow:hidden;
}
.kpi:hover{ transform:translateY(-2px); box-shadow:var(--sombra-3); }
.kpi::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--k,var(--azul-500)); }
.kpi .fila{ display:flex; align-items:flex-start; gap:12px; }
.kpi .chip{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:var(--kbg,var(--azul-100)); color:var(--k,var(--azul-600));
}
.kpi .chip .ico{ width:19px; height:19px; }
.kpi .rot{ font-size:.7rem; font-weight:680; letter-spacing:.05em; text-transform:uppercase; color:var(--txt-3); }
.kpi .val{ font-size:1.48rem; font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
  margin-top:1px; line-height:1.15; color:var(--txt); }
.kpi .val .mon{ font-size:.82rem; font-weight:600; color:var(--txt-3); margin-right:3px; }
.kpi .pie{ margin-top:8px; font-size:.76rem; color:var(--txt-2); display:flex; align-items:center; gap:6px; }
.kpi .delta{ font-weight:680; display:inline-flex; align-items:center; gap:3px; }
.kpi .delta.up{ color:var(--verde-600); } .kpi .delta.down{ color:var(--rojo-500); }

.k-azul   { --k:var(--azul-500);    --kbg:var(--azul-100); }
.k-naranja{ --k:var(--naranja-600); --kbg:var(--naranja-100); }
.k-verde  { --k:var(--verde-600);   --kbg:var(--verde-100); }
.k-rojo   { --k:var(--rojo-500);    --kbg:var(--rojo-100); }
.k-ambar  { --k:var(--ambar-600);   --kbg:var(--ambar-100); }
.k-cian   { --k:var(--cian-500);    --kbg:var(--cian-100); }
.k-morado { --k:var(--morado-500);  --kbg:var(--morado-100); }

/* ------------------------------------------------------------------ héroe */
.hero{
  position:relative; border-radius:var(--r-xl); padding:24px 26px; color:#fff; overflow:hidden;
  background:linear-gradient(120deg,#14296F 0%,#1D3894 52%,#2B4FC4 100%);
  box-shadow:0 14px 38px rgba(20,41,111,.28);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(560px 240px at 88% -10%, rgba(247,148,29,.42), transparent 62%),
             radial-gradient(420px 220px at 4% 120%, rgba(23,168,26,.32), transparent 60%);
}
.hero > *{ position:relative; z-index:1; }
.hero h2{ font-size:1.4rem; color:#fff; }
.hero .lead{ color:#D6E0FA; font-size:.9rem; max-width:640px; margin-top:5px; }
.hero .metricas{ display:flex; gap:26px; flex-wrap:wrap; margin-top:18px; }
.hero .metricas .m .v{ font-size:1.32rem; font-weight:720; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
.hero .metricas .m .r{ font-size:.7rem; color:#AEC0EE; text-transform:uppercase; letter-spacing:.07em; font-weight:600; }

/* ----------------------------------------------------------------- botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:8.5px 15px; border-radius:10px; border:1px solid transparent;
  font-size:.845rem; font-weight:620; font-family:inherit; cursor:pointer;
  transition:all var(--trans); white-space:nowrap; line-height:1.2; user-select:none;
}
.btn .ico{ width:16px; height:16px; }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--azul-400); outline-offset:2px; }
.btn[disabled], .btn.cargando, .btn.inhabilitado{ opacity:.62; cursor:not-allowed; pointer-events:none; }

.btn-pri{ background:linear-gradient(135deg,var(--azul-700),var(--azul-500)); color:#fff;
  box-shadow:0 2px 8px rgba(29,56,148,.30); }
.btn-pri:hover{ box-shadow:0 6px 18px rgba(29,56,148,.38); color:#fff; }
.btn-acc{ background:linear-gradient(135deg,var(--naranja-600),var(--naranja-500)); color:#fff;
  box-shadow:0 2px 8px rgba(232,130,12,.32); }
.btn-acc:hover{ box-shadow:0 6px 18px rgba(232,130,12,.42); color:#fff; }
.btn-ok{ background:linear-gradient(135deg,var(--verde-600),var(--verde-500)); color:#fff; }
.btn-ok:hover{ color:#fff; box-shadow:0 6px 18px rgba(19,143,22,.35); }
.btn-peligro{ background:var(--rojo-500); color:#fff; }
.btn-peligro:hover{ background:var(--rojo-600); color:#fff; }
.btn-sec{ background:var(--panel); border-color:var(--borde-fuerte); color:var(--txt-2); }
.btn-sec:hover{ background:var(--fondo-2); color:var(--txt); border-color:var(--txt-3); }
.btn-fantasma{ background:transparent; color:var(--txt-2); }
.btn-fantasma:hover{ background:var(--fondo-2); color:var(--txt); }
.btn-sm{ padding:5.5px 11px; font-size:.78rem; border-radius:8px; }
.btn-sm .ico{ width:14px; height:14px; }
.btn-lg{ padding:11px 22px; font-size:.92rem; border-radius:12px; }
.btn-bloque{ width:100%; }
.btn-icono{ padding:7px; border-radius:9px; }
.btn-icono .ico{ width:16px; height:16px; }

/* estado "enviando": impide el clic fantasma con evidencia visual */
.btn.enviando{ position:relative; color:transparent !important; pointer-events:none; }
.btn.enviando::after{
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:girar .6s linear infinite;
}
.btn-sec.enviando::after, .btn-fantasma.enviando::after{ border-color:rgba(0,0,0,.18); border-top-color:var(--azul-600); }
@keyframes girar{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------- etiquetas */
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:2.5px 9px; border-radius:var(--r-full);
  font-size:.715rem; font-weight:650; letter-spacing:.01em; line-height:1.5; white-space:nowrap;
}
.b-azul{ background:var(--azul-100); color:var(--azul-700); }
.b-verde{ background:var(--verde-100); color:var(--verde-700); }
.b-rojo{ background:var(--rojo-100); color:var(--rojo-600); }
.b-ambar{ background:var(--ambar-100); color:var(--ambar-600); }
.b-naranja{ background:var(--naranja-100); color:var(--naranja-700); }
.b-gris{ background:var(--fondo-2); color:var(--txt-2); }
.b-morado{ background:var(--morado-100); color:var(--morado-500); }
.b-cian{ background:var(--cian-100); color:var(--cian-500); }
.punto{ width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }

/* ------------------------------------------------------------------ tablas */
.tabla-env{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.tabla{ width:100%; border-collapse:collapse; font-size:.845rem; }
table.tabla th{
  text-align:left; font-weight:660; font-size:.715rem; letter-spacing:.055em; text-transform:uppercase;
  color:var(--txt-3); padding:9px 12px; border-bottom:1.5px solid var(--borde-fuerte); white-space:nowrap;
  background:var(--panel-2); position:sticky; top:0; z-index:2;
}
table.tabla td{ padding:9.5px 12px; border-bottom:1px solid var(--borde); vertical-align:middle; }
table.tabla tbody tr{ transition:background var(--trans); }
table.tabla tbody tr:hover{ background:var(--azul-50); }
table.tabla tbody tr:last-child td{ border-bottom:0; }
table.tabla tfoot td{ padding:11px 12px; font-weight:700; border-top:2px solid var(--borde-fuerte);
  background:var(--panel-2); border-bottom:0; }
table.tabla.densa td{ padding:6.5px 10px; }
table.tabla.densa th{ padding:7px 10px; }
table.tabla .der, table.tabla th.der{ text-align:right; }
table.tabla .cen, table.tabla th.cen{ text-align:center; }
table.tabla .cod{ font-family:var(--mono); font-size:.8rem; color:var(--txt-2); white-space:nowrap; }
table.tabla .principal-col{ font-weight:600; color:var(--txt); }
table.tabla tr.grupo td{ background:var(--fondo-2); font-weight:700; font-size:.8rem; }
table.tabla tr.total td{ background:var(--azul-50); font-weight:700; }
table.tabla tr.inactiva{ opacity:.5; }

.num{ font-variant-numeric:tabular-nums; font-family:var(--mono); font-size:.82rem; letter-spacing:-.01em; }
.num.neg{ color:var(--rojo-500); }
.cero{ color:var(--txt-3); opacity:.55; }
td.der .num, th.der{ display:inline-block; }
.nivel-1{ font-weight:700; } .nivel-2{ font-weight:640; } .nivel-3{ font-weight:560; }
.sangria-1{ padding-left:14px !important; } .sangria-2{ padding-left:28px !important; }
.sangria-3{ padding-left:44px !important; } .sangria-4{ padding-left:60px !important; }

/* -------------------------------------------------------------- formularios */
.form-rej{ display:grid; gap:15px; }
.f-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.f-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.f-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:820px){ .f-2,.f-3,.f-4{ grid-template-columns:1fr; } }
.col-2{ grid-column:span 2; } .col-3{ grid-column:span 3; } .col-full{ grid-column:1/-1; }
@media (max-width:820px){ .col-2,.col-3{ grid-column:auto; } }

.campo{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo > label{ font-size:.775rem; font-weight:620; color:var(--txt-2); display:flex; align-items:center; gap:5px; }
.campo > label .req{ color:var(--rojo-500); font-weight:700; }
.campo .ayuda{ font-size:.725rem; color:var(--txt-3); }

input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=search],input[type=tel],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--borde-fuerte); border-radius:10px;
  background:var(--panel); color:var(--txt); font-family:inherit; font-size:.87rem;
  transition:border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
textarea{ resize:vertical; min-height:78px; line-height:1.5; }
select{ cursor:pointer; appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238590A8' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:15px; }
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--azul-500); box-shadow:0 0 0 3.5px rgba(43,79,196,.13);
}
input::placeholder,textarea::placeholder{ color:var(--txt-3); opacity:.75; }
input[readonly],input:disabled,select:disabled,textarea:disabled{
  background:var(--fondo-2); color:var(--txt-2); cursor:not-allowed; }
input.monto,input.numerico,.monto input{ text-align:right; font-family:var(--mono);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

.campo.con-error input,.campo.con-error select,.campo.con-error textarea{
  border-color:var(--rojo-500); background:var(--rojo-50); }
.campo-error{ font-size:.745rem; color:var(--rojo-600); margin:2px 0 0; display:flex; gap:4px; align-items:flex-start; }
.campo-error::before{ content:"▲"; font-size:.55rem; line-height:1.7; }

.prefijo{ position:relative; }
.prefijo > span{ position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:.8rem; color:var(--txt-3); font-weight:600; pointer-events:none; }
.prefijo input{ padding-left:42px; }

.sufijo{ position:relative; }
.sufijo > span{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:.8rem; color:var(--txt-3); font-weight:600; pointer-events:none; }
.sufijo input{ padding-right:34px; }

.estatico{ padding:9px 11px; border:1px dashed var(--borde-fuerte); border-radius:10px;
  background:var(--fondo-2); color:var(--txt-2); font-size:.85rem; min-height:38px;
  display:flex; align-items:center; }
.estatico b{ color:var(--txt); font-weight:680; }

.en-linea{ display:inline-block; margin:0; }

.check{ display:flex; align-items:flex-start; gap:9px; cursor:pointer; padding:3px 0; }
.check input[type=checkbox],.check input[type=radio]{ width:17px; height:17px; margin:1px 0 0; accent-color:var(--azul-600); cursor:pointer; flex:none; }
.check span{ font-size:.85rem; color:var(--txt-2); }
.check b{ color:var(--txt); font-weight:620; }

.segmento{ display:inline-flex; background:var(--fondo-2); border-radius:10px; padding:3px; gap:2px; border:1px solid var(--borde); }
.segmento a,.segmento button{ padding:6px 13px; border-radius:8px; font-size:.8rem; font-weight:600;
  color:var(--txt-2); border:0; background:transparent; cursor:pointer; transition:all var(--trans); font-family:inherit; }
.segmento a:hover,.segmento button:hover{ color:var(--txt); }
.segmento a.on,.segmento button.on{ background:var(--panel); color:var(--azul-700); box-shadow:var(--sombra-1); }

.filtros{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.filtros .campo{ min-width:150px; }
.filtros .campo.ancho{ min-width:240px; }

.buscador{ position:relative; min-width:230px; }
.buscador .ico{ position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--txt-3); width:16px; height:16px; }
.buscador input{ padding-left:33px; }

/* ------------------------------------------------------------------- avisos */
.avisos{ position:fixed; top:74px; right:22px; z-index:200; display:flex; flex-direction:column; gap:9px;
  max-width:390px; width:calc(100% - 44px); pointer-events:none; }
.aviso{
  display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r);
  background:var(--panel); box-shadow:var(--sombra-3); border:1px solid var(--borde);
  border-left:3.5px solid var(--azul-500); font-size:.85rem; pointer-events:auto;
  animation:entrar .28s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes entrar{ from{ opacity:0; transform:translateX(26px) scale(.97); } }
.aviso .ico{ width:17px; height:17px; margin-top:1px; flex:none; }
.aviso .cerrar{ margin-left:auto; background:0; border:0; color:var(--txt-3); cursor:pointer; padding:0 2px; font-size:1.1rem; line-height:1; }
.aviso.exito{ border-left-color:var(--verde-500); } .aviso.exito .ico{ color:var(--verde-600); }
.aviso.error{ border-left-color:var(--rojo-500); }  .aviso.error .ico{ color:var(--rojo-500); }
.aviso.aviso-t{ border-left-color:var(--ambar-500); } .aviso.aviso-t .ico{ color:var(--ambar-600); }
.aviso.info{ border-left-color:var(--azul-500); }   .aviso.info .ico{ color:var(--azul-500); }

.nota{ display:flex; gap:11px; padding:13px 15px; border-radius:var(--r); font-size:.845rem; line-height:1.5;
  border:1px solid transparent; }
.nota .ico{ flex:none; margin-top:2px; }
.nota b{ font-weight:660; }
.nota-info{ background:var(--azul-50); border-color:var(--azul-100); color:var(--azul-800); }
.nota-ok{ background:var(--verde-50); border-color:var(--verde-100); color:var(--verde-700); }
.nota-aviso{ background:var(--ambar-50); border-color:var(--ambar-100); color:var(--ambar-600); }
.nota-error{ background:var(--rojo-50); border-color:var(--rojo-100); color:var(--rojo-600); }
.nota-tip{ background:var(--naranja-50); border-color:var(--naranja-100); color:var(--naranja-700); }
[data-tema="oscuro"] .nota-info{ color:var(--azul-300); }
[data-tema="oscuro"] .nota-ok{ color:var(--verde-400); }

/* --------------------------------------------------------------- progreso */
.barra{ height:7px; background:var(--fondo-2); border-radius:var(--r-full); overflow:hidden; }
.barra > i{ display:block; height:100%; border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--azul-500),var(--azul-400)); transition:width .5s ease; }
.barra.verde > i{ background:linear-gradient(90deg,var(--verde-600),var(--verde-400)); }
.barra.naranja > i{ background:linear-gradient(90deg,var(--naranja-600),var(--naranja-400)); }
.barra.rojo > i{ background:linear-gradient(90deg,var(--rojo-600),var(--rojo-500)); }

.anillo{ --p:0; --c:var(--azul-500); width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:conic-gradient(var(--c) calc(var(--p)*1%), var(--fondo-2) 0); flex:none; }
.anillo::before{ content:""; position:absolute; width:48px; height:48px; border-radius:50%; background:var(--panel); }
.anillo span{ position:relative; font-size:.78rem; font-weight:720; color:var(--txt); font-variant-numeric:tabular-nums; }
.anillo.sm{ width:46px; height:46px; } .anillo.sm::before{ width:35px; height:35px; } .anillo.sm span{ font-size:.68rem; }

/* -------------------------------------------------------------- módulo card */
.mod{
  display:block; background:var(--panel); border:1px solid var(--borde); border-radius:var(--r-lg);
  padding:16px; box-shadow:var(--sombra-1); transition:all var(--trans); position:relative; overflow:hidden;
}
.mod:hover{ transform:translateY(-3px); box-shadow:var(--sombra-3); border-color:var(--borde-fuerte); }
.mod .top-fila{ display:flex; align-items:flex-start; gap:12px; }
.mod .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none;
  color:#fff; box-shadow:0 3px 10px rgba(20,41,111,.18); }
.mod .ic .ico{ width:20px; height:20px; }
.mod h4{ font-size:.92rem; color:var(--txt); line-height:1.3; }
.mod .meta{ font-size:.73rem; color:var(--txt-3); margin-top:2px; }
.mod .desc{ font-size:.8rem; color:var(--txt-2); margin-top:9px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mod .pie{ margin-top:12px; display:flex; align-items:center; gap:9px; }
.mod .pie .barra{ flex:1; }
.mod .pct{ font-size:.74rem; font-weight:700; color:var(--txt-2); font-variant-numeric:tabular-nums; }

/* --------------------------------------------------------------- vacío */
.vacio{ text-align:center; padding:46px 22px; color:var(--txt-3); }
.vacio .ico{ width:42px; height:42px; opacity:.35; margin-bottom:10px; }
.vacio h4{ color:var(--txt-2); margin-bottom:4px; }
.vacio p{ font-size:.85rem; max-width:380px; margin:0 auto 14px; }

/* ------------------------------------------------------------- misceláneo */
.flex{ display:flex; } .between{ justify-content:space-between; } .centro{ align-items:center; }
.gap-4{ gap:4px; } .gap-6{ gap:6px; } .gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.envuelve{ flex-wrap:wrap; } .col{ flex-direction:column; } .crece{ flex:1; min-width:0; }
.mt-0{ margin-top:0; } .mt-4{ margin-top:4px; } .mt-8{ margin-top:8px; } .mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mb-0{ margin-bottom:0; } .mb-8{ margin-bottom:8px; } .mb-12{ margin-bottom:12px; } .mb-16{ margin-bottom:16px; }
.t-der{ text-align:right; } .t-cen{ text-align:center; }
.t-sm{ font-size:.8rem; } .t-xs{ font-size:.73rem; } .t-lg{ font-size:1.05rem; }
.t-2{ color:var(--txt-2); } .t-3{ color:var(--txt-3); }
.t-ok{ color:var(--verde-600); } .t-mal{ color:var(--rojo-500); } .t-avi{ color:var(--ambar-600); }
.t-azul{ color:var(--azul-600); } .t-naranja{ color:var(--naranja-600); }
.negrita{ font-weight:680; } .mayus{ text-transform:uppercase; letter-spacing:.05em; }
.mono{ font-family:var(--mono); }
.nowrap{ white-space:nowrap; }
.oculto{ display:none !important; }
.separador{ height:1px; background:var(--borde); margin:14px 0; }
.pill-info{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-full);
  background:var(--fondo-2); font-size:.78rem; color:var(--txt-2); font-weight:560; }
.pill-info b{ color:var(--txt); font-weight:680; }

/* --------------------------------------------------------- líneas de asiento */
.lineas{ width:100%; border-collapse:collapse; }
.lineas th{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--txt-3);
  font-weight:660; padding:7px 8px; text-align:left; border-bottom:1.5px solid var(--borde-fuerte); }
.lineas td{ padding:5px 6px; border-bottom:1px solid var(--borde); vertical-align:middle; }
.lineas td input,.lineas td select{ padding:7px 9px; font-size:.83rem; border-radius:8px; }
.lineas .n-linea{ width:34px; text-align:center; color:var(--txt-3); font-size:.78rem; font-family:var(--mono); }
.lineas .acc{ width:38px; }
.lineas tr.desactivada{ opacity:.4; }
.cuadre{ display:flex; gap:20px; justify-content:flex-end; align-items:center; padding:12px 8px 2px;
  font-variant-numeric:tabular-nums; }
.cuadre .b{ text-align:right; }
.cuadre .b .r{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--txt-3); font-weight:660; }
.cuadre .b .v{ font-size:1.02rem; font-weight:720; font-family:var(--mono); }
.cuadre .b.dif .v{ color:var(--rojo-500); }
.cuadre .b.dif.ok .v{ color:var(--verde-600); }

/* cuenta T */
.cuenta-t{ border:1.5px solid var(--borde-fuerte); border-radius:var(--r); overflow:hidden; background:var(--panel); }
.cuenta-t .t-cab{ text-align:center; font-weight:700; padding:9px; background:var(--azul-50);
  border-bottom:1.5px solid var(--borde-fuerte); font-size:.85rem; }
.cuenta-t .t-cols{ display:grid; grid-template-columns:1fr 1fr; }
.cuenta-t .t-col{ padding:0; }
.cuenta-t .t-col + .t-col{ border-left:1.5px solid var(--borde-fuerte); }
.cuenta-t .t-tit{ text-align:center; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--txt-3); padding:6px; border-bottom:1px solid var(--borde); }
.cuenta-t .t-fila{ display:flex; justify-content:space-between; gap:8px; padding:4px 10px; font-size:.78rem; }
.cuenta-t .t-fila .f{ color:var(--txt-3); font-size:.72rem; }
.cuenta-t .t-tot{ border-top:1.5px solid var(--borde-fuerte); padding:7px 10px; font-weight:700;
  text-align:right; font-family:var(--mono); font-size:.83rem; background:var(--panel-2); }

/* gráficos */
.svg-chart{ width:100%; height:auto; display:block; overflow:visible; }
.leyenda{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:.77rem; color:var(--txt-2); }
.leyenda i{ width:9px; height:9px; border-radius:3px; display:inline-block; margin-right:5px; }

/* paginación */
.paginacion{ display:flex; gap:5px; align-items:center; justify-content:center; padding:14px; flex-wrap:wrap; }
.paginacion a,.paginacion span{ min-width:33px; height:33px; padding:0 9px; display:grid; place-items:center;
  border-radius:9px; font-size:.82rem; font-weight:600; border:1px solid var(--borde); color:var(--txt-2);
  background:var(--panel); transition:all var(--trans); }
.paginacion a:hover{ border-color:var(--azul-400); color:var(--azul-600); }
.paginacion .on{ background:var(--azul-600); color:#fff; border-color:var(--azul-600); }
.paginacion .inerte{ opacity:.4; }

/* acceso */
.acceso{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.acceso .arte{ position:relative; background:linear-gradient(150deg,#14296F,#101F58 55%,#0B1A4A);
  color:#fff; padding:48px 52px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
.acceso .arte::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(620px 320px at 82% 8%, rgba(247,148,29,.34), transparent 62%),
             radial-gradient(520px 300px at 6% 96%, rgba(23,168,26,.28), transparent 62%); }
.acceso .arte > *{ position:relative; z-index:1; }
.acceso .arte img{ height:56px; background:#fff; padding:7px 10px; border-radius:12px; }
.acceso .arte h1{ font-size:2.05rem; margin-top:26px; line-height:1.16; letter-spacing:-.03em; }
.acceso .arte p{ color:#C4D2F4; max-width:440px; margin-top:12px; font-size:.95rem; }
.acceso .arte .lista{ margin-top:26px; display:grid; gap:11px; }
.acceso .arte .lista div{ display:flex; gap:10px; align-items:flex-start; font-size:.875rem; color:#D8E1F8; }
.acceso .arte .lista .ico{ color:var(--naranja-400); margin-top:2px; }
.acceso .arte .pie{ font-size:.76rem; color:#8BA2DC; }
.acceso .panel{ display:grid; place-items:center; padding:40px 24px; background:var(--fondo); }
.acceso .caja{ width:100%; max-width:392px; }
.acceso .caja .tarjeta-cuerpo{ padding:28px; }
@media (max-width:940px){ .acceso{ grid-template-columns:1fr; } .acceso .arte{ display:none; } }

/* responsivo */
@media (max-width:1020px){
  :root{ --ancho-nav:0px; }
  .nav{ transform:translateX(-100%); width:264px; }
  .nav.abierta{ transform:none; }
  .principal{ margin-left:0; }
  .btn-menu{ display:inline-flex; }
  .contenido{ padding:18px 15px 48px; }
  .top{ padding:0 15px; }
  .velo{ position:fixed; inset:0; background:rgba(11,26,74,.45); z-index:55; backdrop-filter:blur(2px); }
}
@media (max-width:640px){
  .cabecera h1{ font-size:1.3rem; }
  .kpi .val{ font-size:1.26rem; }
  .hero{ padding:20px; }
  .usuario-chip .n,.usuario-chip .r{ display:none; }
  .avisos{ top:auto; bottom:16px; right:12px; left:12px; width:auto; max-width:none; }
}

/* impresión */
@media print{
  .nav,.top,.acciones,.btn,.avisos,.no-imprimir{ display:none !important; }
  .principal{ margin:0; } .contenido{ padding:0; max-width:none; }
  .tarjeta{ box-shadow:none; border-color:#ccc; break-inside:avoid; }
  body{ background:#fff; font-size:11px; }
  table.tabla th{ position:static; }
  .solo-imprimir{ display:block !important; }
}
.solo-imprimir{ display:none; }

/* aviso visual al teclear un caracter no permitido */
@keyframes parpadeo{0%,100%{background:var(--panel)}50%{background:var(--rojo-50);border-color:var(--rojo-500)}}
input.parpadeo{animation:parpadeo .22s ease;}

/* =============================================== manual del participante */
.manual{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:22px; align-items:start; }
@media (max-width:1000px){ .manual{ grid-template-columns:1fr; } }

.manual-indice{ position:sticky; top:16px; background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--r-lg); padding:14px 10px; box-shadow:var(--sombra-1); max-height:calc(100vh - 32px); overflow:auto; }
.manual-indice .t{ font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--txt-3); padding:0 10px 8px; }
.manual-indice a{ display:flex; gap:9px; align-items:baseline; padding:7px 10px; border-radius:9px;
  font-size:.815rem; color:var(--txt-2); text-decoration:none; line-height:1.35;
  transition:background var(--trans), color var(--trans); }
.manual-indice a:hover{ background:var(--fondo-2); color:var(--txt); }
.manual-indice a b{ color:var(--azul-500); font-variant-numeric:tabular-nums; font-weight:700; flex:none; }
@media (max-width:1000px){ .manual-indice{ position:static; max-height:none; } }

.manual-sec{ scroll-margin-top:16px; }
.manual-sec + .manual-sec{ margin-top:16px; }
.manual-sec h2{ display:flex; gap:11px; align-items:center; font-size:1.06rem; letter-spacing:-.02em; margin:0; }
.manual-sec h2 .n{ width:29px; height:29px; border-radius:9px; flex:none; display:grid; place-items:center;
  background:var(--azul-600); color:#fff; font-size:.78rem; font-weight:750; }
.manual-sec h3{ font-size:.93rem; margin:18px 0 7px; color:var(--txt); }
.manual-sec h3:first-child{ margin-top:0; }
.manual-sec p{ font-size:.875rem; line-height:1.68; color:var(--txt-2); margin:0 0 10px; }
.manual-sec ul, .manual-sec ol{ font-size:.875rem; line-height:1.68; color:var(--txt-2); padding-left:20px; margin:0 0 10px; }
.manual-sec li{ margin-bottom:6px; }
.manual-sec li > b, .manual-sec p > b{ color:var(--txt); font-weight:640; }
.manual-sec code{ font-family:var(--mono); font-size:.82em; background:var(--fondo-2);
  padding:1.5px 6px; border-radius:6px; color:var(--azul-700); }
[data-tema="oscuro"] .manual-sec code{ color:var(--azul-300); }

.pasos{ counter-reset:paso; list-style:none; padding:0; margin:0; }
.pasos > li{ counter-increment:paso; position:relative; padding:0 0 16px 40px; margin:0; }
.pasos > li::before{ content:counter(paso); position:absolute; left:0; top:-1px; width:26px; height:26px;
  border-radius:50%; background:var(--azul-100); color:var(--azul-700); display:grid; place-items:center;
  font-size:.74rem; font-weight:750; }
.pasos > li::after{ content:""; position:absolute; left:13px; top:28px; bottom:2px; width:1.5px; background:var(--borde); }
.pasos > li:last-child{ padding-bottom:0; }
.pasos > li:last-child::after{ display:none; }
.pasos b{ color:var(--txt); font-weight:640; }

.regla{ display:flex; gap:12px; padding:13px 15px; border-radius:var(--r); background:var(--panel-2);
  border:1px solid var(--borde); border-left:3px solid var(--azul-500); }
.regla + .regla{ margin-top:9px; }
.regla .ico{ width:19px; height:19px; flex:none; color:var(--azul-500); margin-top:1px; }
.regla .txt{ font-size:.865rem; line-height:1.6; color:var(--txt-2); }
.regla .txt b{ color:var(--txt); font-weight:660; display:block; margin-bottom:2px; }

.glosario dt{ font-size:.855rem; font-weight:650; color:var(--txt); margin-top:11px; }
.glosario dd{ font-size:.845rem; line-height:1.6; color:var(--txt-2); margin:2px 0 0; padding-left:0; }
.glosario dt:first-child{ margin-top:0; }

@media print{
  .manual{ grid-template-columns:1fr; }
  .manual-indice{ display:none; }
  .manual-sec{ page-break-inside:avoid; }
  .pasos > li::after{ display:none; }
}