/* ============================================================================
   MAPA DE BLOQUES MOVILES  (solo documentacion, medido 2026-08-19)

   Hay SIETE bloques @media(max-width:900px), no uno. Gana el ultimo que declare
   cada propiedad, asi que leer solo el primero que encuentres da una respuesta
   equivocada. Antes de tocar nada movil, mira los siete:

     101  base      layout general movil: .app .side .side-nav .nav-item .prev
                    .side-foot .top main .cards .card table.tbl .tbl-th/td
                    .tbl.asg-input.pos input/select/.btn .gridwrap th.hcol
                    td.cell table.month .row .loc
                    UNICO dueno de: .cards, table.tbl{min-width:580px},
                    padding de .tbl, .tbl.asg input.pos, .row, .loc y el
                    input/select/.btn{font-size:16px} que evita el zoom de iOS
     410  v2.1      repinta barra lateral y topbar: .side .nav-item .nav-ico
                    .top main  -- casi todo re-declarado luego en 572
     465  v2.2      solo td.cell .ini{font-size:8px}
     492  v2.3      main.wide, td.cell 30px, th.hcol 52px, mcell 52px
     510  v2.4      table.grid, td.cell 32px   <-- GANA td.cell
     529  v2.4      table.month td.mcell 62px  <-- GANA mcell
     572  v2.5      barra lateral, topbar y modal .ruta; re-declara la mayor
                    parte de 101 y casi todo 410. ES EL ULTIMO DEL FICHERO

   Valores efectivos hoy en movil: td.cell 32px (de 510), mcell 62px (de 529),
   el resto del chrome lo fija 572.

   REGLA: el bloque movil que cierra el fichero (572) tiene que seguir siendo el
   ultimo. Las reglas de escritorio nuevas van ARRIBA de el. Ojo: los bloques
   101..529 SI llevan capas de escritorio detras -- es la estructura que hay,
   no la arregles a medias.

   Consolidar los siete en uno es viable pero cambia tamanos de celda si se
   elige mal el ganador, y solo se valida mirandolo en un telefono.
   ============================================================================ */
:root{
  --navy:#0B284B; --blue:#13437c; --green:#00ed4f; --green-2:#6ce966; --grey:#90a5c4;
  --bg:#081d38; --panel:#0e3159; --panel-2:#123a68; --side:#071831;
  --line:#1b4479; --line-soft:#153a68;
  --text:#f2f7fd; --text-2:#a9bcd8; --text-3:#5f7699;
  --green-bg:#0b3d2c; --blue-bg:#13437c; --blue-text:#cfe0f5;
  --amber:#fbe18a; --amber-bg:#3a3413; --red:#ff8f8f; --red-bg:#471f2a;
  --sans:'IBM Plex Sans',ui-sans-serif,system-ui,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--navy);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5}
a{color:var(--blue-text);text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{color:var(--green-2)}
.muted{color:var(--text-3)}
.loc{color:var(--text-3);font-family:var(--mono);font-size:12px;margin-left:6px}

.app{display:flex;min-height:100vh}
.side{width:196px;flex-shrink:0;background:var(--side);border-right:1px solid var(--line-soft);padding:16px 12px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:9px;padding:2px 8px 16px}
.brand span b{display:block;font-size:14px;font-weight:500;line-height:1.1}
.brand span i{font-style:normal;color:var(--text-3);font-size:11px}
.brand-img{width:26px;height:26px;object-fit:contain}
.brand.big{justify-content:center;padding-bottom:20px}
.brand.big .brand-img{width:46px;height:46px}
.nav-group{color:var(--text-3);font-size:11px;letter-spacing:.4px;padding:12px 10px 4px}
.nav-item{display:block;padding:7px 10px;border-radius:7px;color:var(--text-2);font-size:13.5px;margin:1px 0}
.nav-item:hover{background:var(--panel);color:var(--text);text-decoration:none}
.nav-item.on{background:var(--green-bg);color:var(--green)}
.side-foot{margin-top:auto;padding:10px}
.side-foot a{color:var(--text-3);font-size:12px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.top-title{display:flex;align-items:center;gap:12px}
.top h1{font-size:16px;font-weight:500;margin:0}
.who{display:flex;align-items:center;gap:10px}
.who-t{text-align:right}
.who-t span{display:block;font-size:12.5px}
.who-t small{color:var(--text-3);font-size:11px}
.ava{width:32px;height:32px;border-radius:50%;background:var(--blue-bg);color:var(--blue-text);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
main{padding:18px 22px;max-width:1180px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:18px}
.metric{background:var(--panel);border-radius:9px;padding:13px 15px}
.metric label{display:block;color:var(--text-3);font-size:12px;margin-bottom:4px}
.metric .v{font-family:var(--mono);font-size:21px;font-weight:500;color:var(--green-2)}
.metric small{color:var(--text-2);font-size:11.5px}

.card{background:var(--panel);border-radius:9px;overflow:hidden;margin-bottom:18px}
.card .pad{padding:12px 15px}
/* 2026-08-25: .card NO tiene padding propio; lo pone .pad. Las paginas nuevas
   (examenes, entrenamiento) cuelgan h2/h3/p/form directo de .card y el texto queda
   pegado al borde -- que es el "margenes horribles" reportado. Esto les da el mismo
   respiro que .pad SIN tocar las tablas: table.tbl va a sangre a proposito, porque
   .tbl th/td ya traen su propio padding. Va aqui, antes de los bloques @media, para
   no romper la regla de que el ultimo bloque movil siga siendo el ultimo. */
.card>h2,.card>h3,.card>p,.card>form,.card>.revh,.card>.stats,.card>.muted{
  padding-left:15px;padding-right:15px}
.card>h2:first-child,.card>h3:first-child{padding-top:12px}
.card>p:last-child,.card>form:last-child,.card>.muted:last-child{padding-bottom:12px}
h2.sec{font-size:12.5px;font-weight:500;color:var(--text-2);margin:0 0 8px;padding-left:9px;border-left:3px solid var(--green)}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{color:var(--text-3);font-size:11px;font-weight:400;text-align:left;padding:8px 14px;border-bottom:1px solid var(--green);box-shadow:inset 0 -1px 0 rgba(0,237,79,.18)}
.tbl td{padding:9px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;color:var(--text)}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:rgba(0,237,79,.05)}
.tbl tr.dim td{color:var(--text-3)}
.tbl tr.vac td{background:#0a2544;color:var(--text-3)}

.chip{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;background:var(--panel-2);color:var(--text-2);white-space:nowrap}
.chip-green{background:var(--green-bg);color:var(--green-2)}
.chip-blue{background:var(--blue-bg);color:var(--blue-text)}
.chip-amber{background:var(--amber-bg);color:var(--amber)}
.chip-red{background:var(--red-bg);color:var(--red)}
.tag{font-family:var(--mono);font-size:11px;background:var(--panel-2);color:var(--text-2);padding:2px 8px;border-radius:6px;border:1px solid var(--line)}
.tag-amber{color:var(--amber);border-color:#5a4d1d;background:var(--amber-bg)}

.btn{display:inline-block;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:13px;padding:7px 14px;border-radius:7px;cursor:pointer;font-family:var(--sans)}
.btn:hover{border-color:var(--grey);text-decoration:none}
.btn-primary{background:var(--green);border-color:var(--green);color:#03170a;font-weight:500}
.btn-primary:hover{background:var(--green-2);border-color:var(--green-2)}
.btn-ghost{color:var(--text-3);cursor:not-allowed}
.btn-warn{color:var(--red);border-color:#6e2a35;background:transparent}
.btn-warn:hover{border-color:var(--red)}
.btn-sm{padding:4px 10px;font-size:12px}
.p2{background:var(--amber-bg);color:var(--amber);font-size:10px;padding:1px 5px;border-radius:8px;margin-left:3px}
.chip-x{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:13px;padding:0 0 0 5px;line-height:1}
.chip-x:hover{color:var(--red)}

input,select{background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-size:13px;padding:6px 10px;border-radius:7px;font-family:var(--sans)}
input:focus,select:focus{outline:none;border-color:var(--grey)}
input::placeholder{color:#7f95b8}
input.mono{font-family:var(--mono)}
select.sm{padding:4px 8px;font-size:12px}
input[type=date]{color-scheme:dark}

.bar{height:5px;background:var(--line-soft);border-radius:3px;min-width:60px}
.bar i{display:block;height:5px;border-radius:3px;background:var(--green)}
.bar i.warn{background:var(--amber)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-3);margin-right:5px}
.dot-green{background:var(--green-2)}
.dot-amber{background:var(--amber)}
.ok{color:var(--green-2)} .warn{color:var(--amber)} .off{color:#2c4a76}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grow{flex:1}
@media(max-width:900px){
  .app{flex-direction:column}
  .side{position:static;width:100%;height:auto;flex-direction:column;padding:10px 12px;
        border-right:none;border-bottom:1px solid var(--line-soft)}
  .side .brand{padding:0 0 8px}
  .side nav{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .side nav::-webkit-scrollbar{height:0}
  .side .nav-group{display:none}
  .nav-item{white-space:nowrap;padding:7px 13px;background:var(--panel);border-radius:20px;font-size:13px;margin:0}
  .nav-item.on{background:var(--green-bg);color:var(--green)}
  .prev{display:none}
  .side-foot{margin-top:8px;padding:0}
  .top{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .top h1{font-size:15px}
  .who-t{display:none}
  main{padding:14px 12px;max-width:100%}
  .cards{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:580px}
  .tbl th,.tbl td{padding:8px 10px}
  .tbl.asg input.pos{width:96px}
  input,select,.btn{font-size:16px}
  .btn.btn-sm{font-size:13px}
  .gridwrap{padding:8px 6px}
  th.hcol{position:sticky;left:0;background:var(--panel);z-index:2;width:46px;padding-right:4px}
  td.cell{min-width:30px;height:26px;font-size:11px}
  table.month td.mcell{height:48px}
  table.month td.mcell b{font-size:12px}
  .row{gap:8px}
  .loc{display:block;margin-left:0}
}
@media(max-width:520px){
  main{padding:12px 10px}
  .metric .v{font-size:18px}
  td.cell{min-width:34px;height:30px}
}

.audit .e{display:flex;gap:10px;align-items:baseline;padding:7px 15px;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.audit .e:last-child{border-bottom:none}
.audit time{font-family:var(--mono);color:var(--text-3);font-size:11px;white-space:nowrap}

.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-card{background:var(--bg);border:1px solid var(--line-soft);border-radius:12px;padding:34px 38px;max-width:420px;text-align:center}
.gate-card p{color:var(--text-2);font-size:13.5px}
.gate-card .btn{margin-top:10px}
.gate-card small{display:block;color:var(--text-3);margin-top:14px;font-size:11.5px}
.gate-card h1{font-size:17px;font-weight:500}
/* agenda heatmap */
.gridwrap{background:var(--panel);border-radius:9px;padding:10px 12px;overflow-x:auto}
table.grid{border-collapse:separate;border-spacing:2px;font-size:11px;width:100%}
table.grid th{color:var(--text-3);font-weight:400;font-size:10.5px;text-align:center;padding:1px 2px}
table.grid th.wknd b{color:var(--green-2)}
table.grid th b{display:block;font-weight:500;font-size:10px;letter-spacing:.3px}
table.grid th i{font-style:normal;color:var(--text-2);font-size:11.5px}
th.hcol{width:52px;text-align:right;padding-right:6px;white-space:nowrap}
th.hcol .l{font-family:var(--mono);color:var(--text);font-size:11px}
th.hcol .z{font-family:var(--mono);color:var(--text-3);margin-left:4px;font-size:9.5px}
td.cell{background:#0a2647;border-radius:3px;height:15px;min-width:22px;text-align:center;color:#0b3d2c;font-family:var(--mono);font-size:10px;cursor:pointer;user-select:none;transition:background .08s}
td.cell:hover{outline:1px solid var(--grey)}
td.cell.h1{background:rgba(0,237,79,.20)}
td.cell.h2{background:rgba(0,237,79,.38);color:#03301a}
td.cell.h3{background:rgba(0,237,79,.58);color:#03301a;font-weight:500}
td.cell.h4{background:var(--green);color:#03170a;font-weight:600}
td.cell.mine{box-shadow:inset 0 0 0 2px var(--blue-text)}
td.cell.hasm{border-bottom:2px solid var(--amber)}
td.cell.open{outline:1px solid var(--green-2)}
td.cell.past{background:#071d36;cursor:not-allowed;opacity:.5}
.lg{margin-top:10px;font-size:11.5px}
.sw{display:inline-block;width:13px;height:13px;border-radius:3px;background:#0a2647;vertical-align:middle}
.sw.h1{background:rgba(0,237,79,.20)} .sw.h2{background:rgba(0,237,79,.38)}
.sw.h3{background:rgba(0,237,79,.58)} .sw.h4{background:var(--green)}
.sw.mine{box-shadow:inset 0 0 0 2px var(--blue-text)}
.sw.hasm{border-bottom:2px solid var(--amber)}
.sw.open{outline:1px solid var(--green-2)}

.prev{padding:0 0 4px}
.nav-item.sm{font-size:12px;padding:4px 10px;color:var(--text-3)}
.nav-item.sm:hover{color:var(--text)}
.chip-amber a{color:var(--amber);text-decoration:underline}

table.month{border-collapse:separate;border-spacing:4px;width:100%}
table.month th{color:var(--text-3);font-weight:400;font-size:11px;padding:2px}
td.mcell{background:#0a2647;border-radius:6px;height:58px;vertical-align:top;width:14.2%}
td.mcell.empty{background:transparent}
td.mcell a{display:block;padding:6px 8px;color:var(--text-2);height:100%}
td.mcell a:hover{text-decoration:none;color:var(--text)}
td.mcell b{display:block;font-family:var(--mono);font-size:13px;font-weight:500}
td.mcell span{display:block;font-size:10.5px;color:var(--text-3);margin-top:3px}
td.mcell.h1{background:rgba(0,237,79,.18)} td.mcell.h2{background:rgba(0,237,79,.30)}
td.mcell.h3{background:rgba(0,237,79,.45)} td.mcell.h4{background:rgba(0,237,79,.62)}
td.mcell.h3 a,td.mcell.h4 a,td.mcell.h3 span,td.mcell.h4 span{color:#03301a}
td.mcell.past{opacity:.45}

.tbl.asg td.drag{color:var(--text-3);cursor:grab;text-align:center;user-select:none}
.tbl.asg tr[draggable=true]:hover td.drag{color:var(--green-2)}
.tbl.asg input.pos{width:120px}
.st.off{color:#2c4a76}
.btn.ico{padding:3px 8px;font-size:11px;font-family:var(--mono)}
.btn.warn-b{color:var(--red);border-color:#5c2733}
.tbl.prio td.pcell{text-align:center;font-family:var(--mono);font-size:11px;border-radius:3px}
.tbl.prio td.p0{background:rgba(0,237,79,.42);color:#03301a;font-weight:600}
.tbl.prio td.p1{background:rgba(0,237,79,.26)}
.tbl.prio td.p2{background:rgba(0,237,79,.13)}
.tbl.prio td.p3{background:transparent;color:var(--text-3)}

/* ============================================================
   UI v2 — administrative polish. Append-only override layer:
   same selectors, later rules win; agenda grid untouched.
   ============================================================ */
:root{
  --bg:#0a0f15; --bg-2:#0d131b;
  --panel:#111823; --panel-2:#0e1520;
  --line:#233042; --line-soft:#1b2634;
  --text:#e7eef6; --text-2:#9fb0c3; --text-3:#5d7186;
  --green:#00ed4f; --green-2:#31f973; --green-bg:rgba(0,237,79,.10);
  --amber:#ffc247; --amber-bg:rgba(255,194,71,.10);
  --red:#ff7b7b; --red-bg:rgba(255,123,123,.10);
  --blue:#69b4ff; --blue-bg:rgba(105,180,255,.10);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:10px;
}
html{scrollbar-color:#2a394e var(--bg)}
body{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(0,237,79,.05), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(105,180,255,.04), transparent 55%),
    var(--bg);
  color:var(--text); letter-spacing:.1px;
}
::selection{background:rgba(0,237,79,.25)}
*:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#26364b;border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- sidebar ---------- */
.side{
  width:236px; background:linear-gradient(180deg,#0d141d 0%,#0b111a 100%);
  border-right:1px solid var(--line-soft);
}
.brand{display:flex;align-items:center;gap:10px;padding:16px 16px 14px}
.brand span b{letter-spacing:.4px}
.brand span i{color:var(--green);font-style:normal;font-weight:500;margin-left:5px}
.brand-img{filter:drop-shadow(0 0 10px rgba(0,237,79,.35))}
.nav-group{
  font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3);
  padding:14px 18px 5px;
}
.nav-item{
  display:flex;align-items:center;gap:10px;
  margin:1px 8px;padding:8px 10px;border-radius:8px;
  color:var(--text-2);font-size:13.5px;line-height:1;position:relative;
  border:1px solid transparent;transition:background .12s,color .12s;
}
.nav-item:hover{background:rgba(255,255,255,.035);color:var(--text)}
.nav-item.on{
  background:linear-gradient(90deg,rgba(0,237,79,.13),rgba(0,237,79,.04));
  color:var(--green-2);border-color:rgba(0,237,79,.22);
}
.nav-item.on::before{
  content:'';position:absolute;left:-8px;top:6px;bottom:6px;width:3px;border-radius:3px;
  background:var(--green);box-shadow:0 0 8px rgba(0,237,79,.7);
}
.nav-ico{display:inline-flex;width:16px;height:16px;flex:0 0 16px;opacity:.9}
.nav-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.prev .nav-item{font-size:12px;padding:5px 10px}
.side-foot{
  margin-top:auto;padding:12px 16px;border-top:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
}
.side-foot a{display:inline-flex;align-items:center;gap:8px;color:var(--text-2);font-size:13px}
.side-foot a:hover{color:var(--red)}
.side-ver{font-size:10px;color:var(--text-3)}
a.brand{text-decoration:none;color:inherit}
a.brand:hover{text-decoration:none}
a.brand:hover .brand-img{filter:drop-shadow(0 0 10px rgba(77,141,255,.6))}

/* ---------- topbar ---------- */
.top{
  background:rgba(13,19,27,.82);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);padding:13px 22px;
  position:sticky;top:0;z-index:20;
}
.top h1{font-size:16.5px;font-weight:600;letter-spacing:.2px}
.who-t span{font-size:13px}
.who-t small{color:var(--text-3)}
.ava{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#1c3a2a,#10231a);
  border:1px solid rgba(0,237,79,.35);color:var(--green-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  box-shadow:0 0 0 3px rgba(0,237,79,.06);
}
main{padding:22px;max-width:1240px}

/* ---------- cards & metrics ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-soft);border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.22);
  margin-bottom:16px;
}
.pad{padding:16px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.metric{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 16px;
  position:relative;overflow:hidden;
}
.metric::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--green),transparent 70%);opacity:.55;
}
.metric label{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-3)}
.metric .v{font-size:24px;font-weight:600;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.metric small{color:var(--text-2);font-size:11.5px}
h2.sec{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-3);margin:20px 0 8px}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl thead th{
  position:sticky;top:0;background:var(--panel);z-index:1;
  font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--text-3);
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tbody tr{transition:background .1s}
.tbl tbody tr:nth-child(even){background:rgba(255,255,255,.014)}
.tbl tbody tr:hover{background:rgba(0,237,79,.045)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tr.dim{opacity:.5}
td.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- chips / dots / tags ---------- */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;padding:3px 9px;border-radius:20px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text-2);
  line-height:1.5;
}
.chip a{color:inherit;text-decoration:underline}
.chip-green{background:var(--green-bg);border-color:rgba(0,237,79,.3);color:var(--green-2)}
.chip-amber{background:var(--amber-bg);border-color:rgba(255,194,71,.32);color:var(--amber)}
.chip-red{background:var(--red-bg);border-color:rgba(255,123,123,.32);color:var(--red)}
.chip-blue{background:var(--blue-bg);border-color:rgba(105,180,255,.32);color:var(--blue)}
.tag{
  display:inline-block;font-family:var(--mono);font-size:11px;
  padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);color:var(--text-2)
}
.tag-amber{border-color:rgba(255,194,71,.4);color:var(--amber);background:var(--amber-bg)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--text-3)}
.dot-green{background:var(--green);box-shadow:0 0 6px rgba(0,237,79,.8)}
.dot-amber{background:var(--amber);box-shadow:0 0 6px rgba(255,194,71,.7)}
.dot-red{background:var(--red);box-shadow:0 0 6px rgba(255,123,123,.7)}
.dot-purple{background:#8b93ff;box-shadow:0 0 6px rgba(139,147,255,.7)}
/* Celda con LEDs + chips: flex para que todo quede centrado y no arrastre el baseline. */
.cellflex{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.cellflex .dot{margin-right:0;flex:none}
/* Canaleta de ancho FIJO para los LEDs: caben dos puntos (8+8) con su hueco (4).
   Se pinta siempre, aunque este vacia, para que el chip de estado arranque en la
   misma x en todas las filas. Sin esto, cada fila empezaba donde le tocaba. */
.leds{display:inline-flex;align-items:center;gap:4px;width:20px;flex:none}

/* ---------- buttons & inputs ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;padding:7px 14px;border-radius:8px;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--text);
  transition:border-color .12s, background .12s, transform .05s;
  text-decoration:none;
}
.btn:hover{border-color:#33465f;background:rgba(255,255,255,.07)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:default}
.btn-primary{
  background:linear-gradient(180deg,rgba(0,237,79,.2),rgba(0,237,79,.1));
  border-color:rgba(0,237,79,.45);color:var(--green-2);
}
.btn-primary:hover{border-color:var(--green);box-shadow:0 0 14px rgba(0,237,79,.18)}
.btn-warn{border-color:rgba(255,123,123,.4);color:var(--red);background:var(--red-bg)}
.btn-warn:hover{border-color:var(--red)}
.btn-sm{font-size:12px;padding:5px 11px}
input,select,textarea{
  background:#0c1219;border:1px solid var(--line);border-radius:8px;
  color:var(--text);padding:7px 10px;font-size:13px;font-family:inherit;
  transition:border-color .12s;
}
input:hover,select:hover{border-color:#33465f}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(0,237,79,.12)}
input[type=datetime-local]{color-scheme:dark}
select[multiple]{padding:6px}
label{font-size:13px}

/* ---------- misc reused bits ---------- */
.loc{color:var(--text-3);font-size:11.5px;margin-left:6px}
.muted{color:var(--text-2)} .mono{font-family:var(--mono)}
.ok{color:var(--green-2)} .warn{color:var(--amber)}
.st{padding:1px 6px;border-radius:5px;border:1px solid var(--line);font-size:10.5px}
.st.ok{border-color:rgba(0,237,79,.4);color:var(--green-2);background:var(--green-bg)}
.st.off{border-color:var(--line-soft);color:#3d4f66;background:transparent}
.grow{flex:1}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* gate (login) */
.gate{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(900px 420px at 70% 0%, rgba(0,237,79,.07), transparent 60%),
    var(--bg);}
.gate-card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line-soft);border-radius:14px;box-shadow:var(--shadow);
  padding:34px 36px;max-width:400px;text-align:center;
}
.gate-card .brand{justify-content:center;padding:0 0 14px}
.gate-card p{color:var(--text-2);font-size:13.5px;line-height:1.55;margin:0 0 18px}
.gate-card small{display:block;margin-top:14px;color:var(--text-3);font-size:11px}

/* mobile refinements for the new bits */
@media(max-width:900px){
  .side{background:var(--bg-2)}
  .nav-item{border:1px solid var(--line-soft);background:var(--panel)}
  .nav-item.on::before{display:none}
  .nav-ico{display:none}
  .side-foot a .nav-ico{display:inline-flex}
  .top{position:static;backdrop-filter:none;background:var(--bg-2)}
  main{padding:14px 12px}
}

/* ============ UI v2.1 — light roster card, booked initials, VATMEX blue ============ */
:root{--vmx-blue:#4d8dff;--vmx-blue-bg:rgba(77,141,255,.12)}

/* brand + section accents in blue */
.brand span b{color:var(--vmx-blue)}
.brand-img{filter:drop-shadow(0 0 10px rgba(77,141,255,.35))}
h2.sec{border-left:3px solid var(--vmx-blue);padding-left:8px}
.metric::after{background:linear-gradient(90deg,var(--green),var(--vmx-blue) 75%,transparent);opacity:.5}
.nav-group{color:#5b76a3}
.gate-card .brand span b{color:var(--vmx-blue)}

/* light card: high-contrast white sheet for the assigned roster */
.card.light{background:#f6f9fc;border-color:#c9d5e2;box-shadow:0 8px 22px rgba(0,0,0,.28)}
.card.light .tbl thead th{background:#e9eff6;color:#51637a;border-color:#d5dfe9}
.card.light .tbl td{border-color:#e2e9f1;color:#16222f}
.card.light .tbl tbody tr,
.card.light .tbl tbody tr:nth-child(even){background:#fff}
.card.light .tbl tbody tr:hover{background:#e8f6ee}
.card.light .tbl tr.dim{opacity:.55}
.card.light input,.card.light select{background:#fff;border-color:#c3d0de;color:#14202e}
.card.light input:focus,.card.light select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,180,70,.15)}
.card.light .btn{background:#fff;border-color:#c3d0de;color:#243447}
.card.light .btn:hover{border-color:#8ba3bd;background:#f2f6fa}
.card.light .btn.warn-b{color:#c0392b;border-color:#e5b8b2}
.card.light .muted{color:#69798c}
.card.light .mono{color:inherit}
.card.light .chip{background:#eef3f8;border-color:#d3dde7;color:#4a5b6e}
.card.light .chip-amber{background:#fdf3dd;border-color:#ecd9a8;color:#8a6410}
.card.light .st{border-color:#cdd9e4}
.card.light .st.ok{background:#e2f7ea;border-color:#9fdcb4;color:#177a3d}
.card.light .st.off{color:#a9b8c7;border-color:#dfe7ee;background:#fff}
.card.light .ok{color:#178a45}
.card.light td.drag{color:#b6c3d1}
.card.light tr[draggable=true]:hover td.drag{color:#178a45}

/* agenda: booked-session badge */
td.cell{position:relative}
td.cell .ini{
  position:absolute;right:1px;top:1px;
  font-family:var(--mono);font-size:8.5px;line-height:1.45;
  background:var(--vmx-blue);color:#fff;border-radius:4px;padding:0 3px;
  pointer-events:none;
}
td.cell.bkd{box-shadow:inset 0 0 0 1.5px var(--vmx-blue)}
.sw.bkd{background:var(--vmx-blue-bg);box-shadow:inset 0 0 0 1.5px var(--vmx-blue)}
@media(max-width:900px){ td.cell .ini{font-size:8px} }

/* mentor initials badge on open slots */
td.cell .ini.m{right:auto;left:1px;top:auto;bottom:1px;background:#0e2c1c;border:1px solid rgba(0,237,79,.55);color:var(--green-2)}

/* ============ UI v2.2 — agenda a pantalla completa y celdas +30% ============ */
main.wide{max-width:none}

/* the grid uses the full width it now has */
.gridwrap{padding:12px 14px}
table.grid{border-spacing:3px;table-layout:fixed}

/* +30%: alto 15 -> 20px, ancho mínimo 22 -> 29px, tipografía acorde */
td.cell{height:20px;min-width:29px;font-size:11.5px;border-radius:4px}
th.hcol{width:64px;padding-right:8px}
th.hcol .l{font-size:12px}
th.hcol .z{font-size:10.5px}
table.grid th i{font-size:13px}
table.grid th b{font-size:11px}
td.cell .ini{font-size:9.5px;padding:0 4px;border-radius:5px}

/* month view scales with it */
table.month td.mcell{height:76px}

/* legend swatches match the new cell size */
.sw{width:16px;height:16px;border-radius:4px}

@media(max-width:900px){
  main.wide{max-width:100%}
  td.cell{height:30px;min-width:34px}
  th.hcol{width:52px}
  table.month td.mcell{height:52px}
}

/* ============ UI v2.3 — celdas: +alto ============ */
/* 2026-08-25: se revierte el 70%. La v2.3 encogia la TABLA para angostar las
   celdas, pero el efecto secundario era un calendario ocupando media ventana en
   un monitor ancho, con el hueco a la derecha. Vuelve a 100%: las celdas se
   ensanchan, que es justo lo que se pidio. El alto se sigue fijando en la celda. */
table.grid{width:100%;min-width:560px}
td.cell{height:27px;min-width:20px}
.sw{width:15px;height:15px}

@media(max-width:1200px){
  /* el 85% acompanaba al 70% de arriba; con la tabla al 100% ya no aporta nada */
  table.grid{width:100%}
}
@media(max-width:900px){
  table.grid{width:100%;min-width:0}
  td.cell{height:32px;min-width:34px}
}

/* ============ UI v2.4 — vista mensual: huecos y sesiones ============ */
table.month td.mcell a{display:flex;flex-direction:column;gap:2px;height:100%;padding:5px 6px}
table.month td.mcell b{font-size:13px}
table.month td.mcell span{font-size:10px;color:var(--text-2)}
table.month td.mcell em{
  font-style:normal;font-family:var(--mono);font-size:9.5px;line-height:1.5;
  border-radius:4px;padding:0 5px;align-self:flex-start;
}
em.mslot{background:rgba(0,237,79,.16);color:var(--green-2);border:1px solid rgba(0,237,79,.4)}
em.mbook{background:var(--vmx-blue-bg);color:var(--vmx-blue);border:1px solid rgba(77,141,255,.45)}
table.month td.mcell.hasslot{outline:1px solid rgba(0,237,79,.45)}
table.month td.mcell.hasbook{box-shadow:inset 0 0 0 1.5px var(--vmx-blue)}
table.month td.mcell{height:86px;vertical-align:top}
p.muted em.mslot,p.muted em.mbook{font-size:10px;padding:0 4px}
@media(max-width:900px){
  table.month td.mcell{height:62px}
  table.month td.mcell em{font-size:8.5px;padding:0 3px}
}

/* ============ UI v2.7 — modal centrado con fondo difuminado ============ */
.ruta-wrap{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(5,9,14,.62);
  backdrop-filter:blur(7px) saturate(.85);-webkit-backdrop-filter:blur(7px) saturate(.85);
  animation:rutaFade .18s ease-out;
}
.ruta-wrap[hidden]{display:none}
@keyframes rutaFade{from{opacity:0}to{opacity:1}}
.ruta{
  width:min(600px,100%);max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,#141d2a,#0e1520);
  border:1px solid var(--line);border-top:3px solid var(--vmx-blue);
  border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);
  padding:26px 28px;animation:rutaUp .22s ease-out;
}
@keyframes rutaUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.ruta-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ruta-h h2{font-size:20px;line-height:1.3;font-weight:600;color:var(--text);margin:0}
.ruta-x{background:none;border:none;color:var(--text-3);font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.ruta-x:hover{color:var(--text)}
.ruta-lead{font-size:14px;line-height:1.55;color:var(--text-2);margin:12px 0 4px}
.ruta-steps{margin:16px 0 22px;padding-left:22px;display:flex;flex-direction:column;gap:13px}
.ruta-steps li{font-size:14.5px;line-height:1.55;color:var(--text-2)}
.ruta-steps li b{color:var(--text);font-weight:600}
.ruta-steps li::marker{color:var(--vmx-blue);font-weight:700;font-size:15px}
.ruta-b{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#rutaLink{color:var(--vmx-blue);text-decoration:none;border-bottom:1px dotted currentColor}
#rutaLink:hover{color:#7fb0ff}


/* ================================================================
   UI v2.5 — BLOQUE MÓVIL: debe permanecer AL FINAL del archivo.
   Las reglas de escritorio de v2 (.side{width:236px}) venían después
   del bloque móvil y ganaban por orden, dejando la barra a 236px en
   el teléfono y cortando la tira de pestañas. Cualquier regla nueva
   de escritorio va ARRIBA de esto, nunca debajo.
   ================================================================ */
@media(max-width:900px){
  .app{flex-direction:column}
  .side{
    width:100%;height:auto;position:static;overflow:visible;
    flex-direction:column;padding:10px 12px;
    border-right:none;border-bottom:1px solid var(--line-soft);
    background:var(--bg-2);
  }
  .side .brand{padding:0 0 8px}
  .side nav{
    display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;
    gap:6px;padding:2px 0 4px;margin:0;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  }
  .side nav::-webkit-scrollbar{height:0}
  .side .nav-group{display:none}
  .nav-item{
    flex:0 0 auto;display:inline-flex;align-items:center;
    white-space:nowrap;padding:8px 14px;margin:0;
    background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;
    font-size:13px;line-height:1.2;
  }
  .nav-item.on{background:var(--green-bg);color:var(--green-2);border-color:rgba(0,237,79,.35)}
  .nav-item.on::before{display:none}
  .nav-ico{display:none}
  .prev{display:none}
  .side-foot{margin-top:8px;padding:0;border-top:none}
  .side-foot a .nav-ico{display:inline-flex}
  .top{position:static;padding:10px 14px;flex-wrap:wrap;gap:8px;background:var(--bg-2);backdrop-filter:none}
  .who-t{display:none}
  main,main.wide{padding:14px 12px;max-width:100%}
  table.grid{width:100%;min-width:0}
  td.cell{height:32px;min-width:34px;font-size:11px}
  th.hcol{position:sticky;left:0;background:var(--panel);z-index:2;width:52px;padding-right:4px}
  table.month td.mcell{height:62px}
  table.month td.mcell em{font-size:8.5px;padding:0 3px}
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:580px}
  .ruta-wrap{padding:12px;align-items:flex-end}
  .ruta{padding:20px 18px;max-height:92vh;border-radius:14px}
  .ruta-h h2{font-size:17px}
  .ruta-lead{font-size:13px}
  .ruta-steps li{font-size:13.5px}
  .ruta-b .btn{flex:1 1 auto;justify-content:center}
  input,select,.btn{font-size:16px}
  .btn.btn-sm{font-size:13px}

  /* La columna de horas es sticky y se montaba encima de la primera celda:
     el fondo no tapaba el border-spacing y no iba por delante en el apilado. */
  th.hcol{z-index:3;box-shadow:3px 0 0 var(--panel);padding-right:6px}
  table.grid{border-spacing:3px}

  /* 14 columnas en un teléfono quedaban ilegibles. Que se pueda desplazar
     en horizontal en vez de comprimirlas; .gridwrap ya tiene overflow-x:auto. */
  table.grid.d14{min-width:660px;width:auto}
  table.grid.d14 td.cell{min-width:40px}
}