/* Una sola familia tipografica en toda la pagina, incluidas las cifras: se alinean
   con cifras tabulares, no con una monoespaciada aparte. Azul marino como unico
   color de acento. */
:root{
  --nav:#1b3a5c; --navD:#122a44;
  --navTint:#e8eef6; --navTint2:#f2f6fb;
  --ink:#111820; --ink2:#3a4552; --muted:#69737f; --dis:#a3abb5;
  --page:#eef1f5; --surf:#ffffff; --head:#f4f6f9;
  --bd:#d5dce4; --bdS:#c2cbd6; --bdH:#eceff3;
  --warn:#8a5a12; --warnBg:#fcf4e3; --warnBd:#ecd9ad;
  --err:#b42318; --errBg:#fdecea; --errBd:#f3c7c1;
  --ok:#0e6245; --okBg:#e6f2ed; --okBd:#bfe0d0;
  --font:'Space Grotesk',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --menu:#f1f6fc; --lienzo:#f8fafc; --selBg:#e9f1fd;
  --r:10px; --rs:8px; --rx:5px;
  --z-bar:40; --z-ov:60; --z-toast:70;
}
*{box-sizing:border-box}
/* La pagina ocupa exactamente la ventana y NO se desplaza. Lo que se desplaza es la
   lista de campos, con su propio scroll interno. Asi el menu, la cabecera y la barra
   de acciones quedan siempre a la vista y nada salta de sitio. */
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--page);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column}
.top,.rail,.bar{flex:none}
button,input,textarea,select{font-family:inherit}
.wrap{max-width:1440px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--nav);outline-offset:2px}

/* ===== Franja institucional ===== */
.top{background:var(--nav);color:#fff}
.top .wrap{display:flex;align-items:center;gap:16px;height:66px}
.top .logo{width:40px;height:40px;flex:none;display:block}
.top h1{font-size:21px;font-weight:700;margin:0;letter-spacing:.6px;line-height:1.2}
.top .sb{display:block;font-size:12.5px;font-weight:400;letter-spacing:0;color:rgba(255,255,255,.72);margin-top:1px}
.top .ver{margin-left:auto;font-size:12px;color:rgba(255,255,255,.6)}

/* ===== Riel de pasos =====
   El peso tipografico NO cambia al seleccionar: la negrita es mas ancha y, con la
   barra centrada, moveria todos los pasos. Lo activo se distingue por color,
   subrayado y numero relleno. */
.rail{background:var(--surf);border-bottom:1px solid var(--bd)}
.rail .wrap{display:flex;justify-content:center}
.st{display:flex;align-items:center;gap:10px;padding:16px 32px;cursor:pointer;background:none;border:none;
  border-bottom:3px solid transparent;margin-bottom:-1px;color:var(--muted);font-family:inherit}
.st .k{width:24px;height:24px;border:1.5px solid var(--bdS);border-radius:var(--rx);display:flex;
  align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.st .tt{font-size:14px;font-weight:600}
.st.on{border-bottom-color:var(--nav);color:var(--ink)}
.st.on .k{background:var(--nav);border-color:var(--nav);color:#fff}
.st.done{color:var(--ink2)}
.st.done .k{border-color:transparent;background:none;color:var(--nav);font-size:14px}
.st:hover:not(.on):not(:disabled){color:var(--ink2)}
.st:disabled{color:var(--dis);cursor:not-allowed}
.st:disabled .k{border-color:var(--bdH);color:var(--dis)}

/* ===== Superficie de trabajo ===== */
main{padding:0;flex:1;min-height:0;display:flex}
.wrap.pad{flex:1;min-height:0;display:flex;flex-direction:column}
.wrap.pad > .step{padding:18px 0 20px}
.step{display:none}
.step.on{display:flex;flex-direction:column;flex:1;min-height:0}
/* Los tres pasos ocupan el mismo ancho: el del contenedor. Lo unico propio de
   los pasos 1 y 3 es que se desplazan ellos mismos si la ventana es muy baja;
   el paso 2 nunca: su scroll vive dentro de la lista. */
.step[data-step="1"],.step[data-step="3"]{overflow-y:auto}
.step[data-step="2"]{overflow:hidden}
/* Cabecera del paso: titulo a la izquierda, acciones del asistente a la derecha.
   Sustituye al pie fijo: cada paso lleva su propio boton principal. */
.hd{margin-bottom:14px;display:flex;align-items:flex-end;justify-content:space-between;gap:28px}
.hdl{min-width:0}
.hda{flex:none;display:flex;align-items:center;gap:18px}
.acc{display:flex;align-items:center;gap:14px}
.sm{font-size:14px;color:var(--muted)}
.sm b{color:var(--ink);font-weight:600}
.sm.avisa{color:var(--warn)}
.hd h2{font-size:28px;font-weight:600;margin:0 0 4px;letter-spacing:-.7px;line-height:1.2}
/* Los tres subtitulos ocupan una linea, asi que el panel no salta entre pasos y no
   hace falta reservar altura de mas. */
.hd p{font-size:15px;color:var(--muted);margin:0;max-width:86ch}
.panel{background:var(--surf);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}

/* ===== Paso 1: una sola columna ===== */
.f1 .zona{padding:32px}
.f1 .zona.over{background:var(--navTint)}
.f1 .notas{padding:22px 32px 24px;background:var(--navTint2);border-top:1px solid var(--bd)}
.lb{display:block;font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.3px;margin-bottom:8px}
textarea{width:100%;border:1.5px solid var(--bdS);border-radius:var(--rs);background:var(--surf);padding:14px 16px;
  font-size:16px;color:var(--ink);resize:vertical;min-height:112px;line-height:1.8;letter-spacing:.3px}
textarea:focus{outline:none;border-color:var(--nav);box-shadow:inset 0 0 0 1px var(--nav)}
.under{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.badge{background:var(--nav);color:#fff;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:var(--rs)}
.badge.cero{background:var(--bdH);color:var(--muted)}
.sep{width:1px;height:20px;background:var(--bd);margin:0 6px}
.mini{border:1px solid var(--bdS);background:var(--surf);color:var(--ink2);font-size:13px;
  padding:7px 15px;border-radius:var(--rs);cursor:pointer}
.mini:hover{border-color:var(--nav);color:var(--nav);background:var(--navTint)}
.notas h3{font-size:11.5px;font-weight:600;color:var(--nav);letter-spacing:.4px;margin:0 0 10px}
.notas p{margin:0 0 8px;font-size:13.5px;color:var(--ink2);line-height:1.6}
.notas p:last-child{margin-bottom:0}
.notas b{font-weight:600;color:var(--ink)}
.filemsg{margin-top:14px;font-size:13px;display:none;padding:10px 14px}
.filemsg.ok{display:block;color:var(--ok);background:var(--okBg);border:1px solid var(--okBd)}
.filemsg.warn{display:block;color:var(--warn);background:var(--warnBg);border:1px solid var(--warnBd)}
.filemsg.error{display:block;color:var(--err);background:var(--errBg);border:1px solid var(--errBd)}
.filemsg a{color:inherit;font-weight:600}

/* ===== Paso 2: menu lateral a ancho completo =====
   El menu sale del panel y ocupa su propia columna de la pagina. La banda de color y
   el filete divisorio se pintan como fondo del contenedor: asi llegan hasta abajo
   aunque el menu, al ser sticky, mida solo lo que ocupa. */
/* La tarjeta ocupa el alto que queda. Al no haber scroll de pagina el menu ya no
   necesita position:sticky: simplemente no se mueve. */
.p2{display:grid;grid-template-columns:320px minmax(0,1fr);flex:1;min-height:0;
  border:1px solid var(--bd);border-radius:var(--r);overflow:clip;background:var(--surf)}
.menu{background:var(--menu);border-right:1px solid var(--bd);overflow-y:auto;min-height:0}
.mh{padding:22px 24px 16px}
.mh h3{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}
.mh p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.menu button{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;border:none;
  background:none;cursor:pointer;padding:12px 24px;color:var(--ink2);font-size:13.5px;font-weight:500;
  transition:background .12s}
.menu button .ic{flex:none;width:18px;height:18px;margin-top:1px;opacity:.65}
.menu button .ic svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.menu button .mlb{min-width:0}
.menu button .mlb em{display:block;font-style:normal;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:3px}
.menu button:hover:not(.on):not(:disabled){background:rgba(255,255,255,.75)}
.menu button.on{background:var(--nav);color:#fff}
.menu button.on .ic{opacity:1}
.menu button.on .mlb em{color:rgba(255,255,255,.7)}
.menu button:disabled{color:var(--dis);cursor:default}
.menu button:disabled .mlb em{color:var(--dis);font-style:italic}
.p2c{min-width:0;display:flex;flex-direction:column;min-height:0}

/* ===== Lista de datos =====
   Todos los campos estan siempre a la vista, agrupados bajo su bloque. No hay
   desplegables: el segundo nivel no aparece ni desaparece, se recorre con scroll. */
/* La barra de acciones vive FUERA de la tarjeta, en la misma linea que el titulo
   del paso: no compite con la lista ni le roba alto. */
.hd2{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.herr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex:none}
.herr button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bdS);background:var(--surf);
  color:var(--ink2);font-size:13.5px;padding:9px 17px;border-radius:var(--rs);cursor:pointer;white-space:nowrap}
.herr .est{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linejoin:round}
.herr button:hover{border-color:var(--nav);color:var(--nav);background:var(--navTint)}

.lista{flex:1;min-height:0;overflow-y:scroll;scrollbar-gutter:stable}
/* Barra de desplazamiento propia, en su propio carril al borde de la tarjeta y
   separada del contenido por un filete: no se monta encima del texto ni aparece y
   desaparece. overflow-y:scroll (y no auto) reserva el carril siempre, asi la lista
   no cambia de ancho al pasar de un grupo corto a uno largo. */
.lista::-webkit-scrollbar{width:14px}
.lista::-webkit-scrollbar-track{background:var(--head);border-left:1px solid var(--bdH)}
.lista::-webkit-scrollbar-thumb{background:#a3b0c0;border-radius:99px;
  border:4px solid var(--head);background-clip:padding-box}
.lista::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.lista::-webkit-scrollbar-thumb:active{background:var(--nav)}
@supports not selector(::-webkit-scrollbar){
  /* Firefox: no admite carril propio, al menos queda fina y en el mismo tono. */
  .lista{scrollbar-width:thin;scrollbar-color:var(--bdS) var(--head)}
  .menu{scrollbar-width:thin;scrollbar-color:var(--bdS) transparent}
}
/* El menu usa la misma barra, sin carril, por si algun dia hay muchas categorias. */
.menu::-webkit-scrollbar{width:10px}
.menu::-webkit-scrollbar-track{background:transparent}
.menu::-webkit-scrollbar-thumb{background:var(--bdS);border-radius:99px;
  border:3px solid var(--menu);background-clip:padding-box}
.menu::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.bl{border-bottom:1px solid var(--bd)}
.bl:last-child{border-bottom:none}
.blh{display:flex;align-items:center;gap:14px;padding:11px 18px;cursor:pointer;
  background:var(--surf);user-select:none}
.blh:hover{background:var(--navTint2)}
.bl.on .blh{background:var(--selBg)}
.bno{width:38px;flex:none;font-size:13px;font-weight:600;color:var(--muted)}
.bl.on .bno{color:var(--nav)}
.bti{flex:1;font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bct{flex:none;font-size:12.5px;color:var(--muted)}
.bl.on .bct{color:var(--nav);font-weight:600}
.cwrap{padding:6px 18px 12px 44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px}
.opt{display:flex;align-items:center;gap:11px;padding:4px 9px;cursor:pointer;font-size:13.5px;color:var(--ink2)}
.opt:hover{background:var(--navTint2)}
.opt.on{color:var(--ink);font-weight:500}
.opt span.tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb{width:17px;height:17px;display:inline-block;border:1.5px solid var(--bdS);background:var(--surf);
  position:relative;flex:none;border-radius:var(--rx)}
.cb.on,.cb.half{background:var(--nav);border-color:var(--nav)}
.cb.on::after{content:"";position:absolute;left:5.5px;top:2px;width:4px;height:9px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(42deg)}
.cb.half::after{content:"";position:absolute;left:3px;top:7px;width:9px;height:2px;background:#fff}
.vacio{padding:34px;text-align:center;color:var(--muted);font-size:14px}

/* ===== Paso 3 ===== */
.p3 > div{padding:26px 32px 28px}
.cap{font-size:11.5px;font-weight:600;color:var(--nav);letter-spacing:.4px;text-transform:uppercase;
  margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid var(--nav)}
table.kv{width:100%;border-collapse:collapse;table-layout:fixed}
col.k{width:260px}
table.kv td{border-bottom:1px solid var(--bdH);padding:12px 8px 12px 0;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis}
table.kv tr:last-child td{border-bottom:none}
table.kv td.k{color:var(--muted);font-size:13.5px}
table.kv td.v{font-weight:500}
table.kv td.v b{font-weight:600}
/* Fila de ausencias: se destaca con fondo tenido y filete, sin meter otro color. */
table.kv tr.ex td{background:var(--navTint2)}
table.kv tr.ex td.k{box-shadow:inset 3px 0 0 var(--nav);padding-left:13px}
table.kv tr.ex td.v{color:var(--ink2);font-weight:400}

/* ===== Pastilla flotante =====
   Se superpone a la lista en vez de robarle alto: el paso 2 conserva sus 660 px.
   Va anclada a la derecha, asi que al cambiar "Continuar" por "Descargar Excel"
   crece hacia la izquierda y el boton no se mueve de sitio. */
.flota{position:fixed;right:44px;bottom:30px;z-index:var(--z-bar);display:flex;align-items:center;gap:12px;
  background:var(--surf);border:1px solid var(--bd);border-radius:99px;padding:8px 10px 8px 22px;
  box-shadow:0 8px 24px rgba(17,24,32,.16)}
.flota .back{border-radius:99px;padding:9px 16px}
.flota .go{border-radius:99px;padding:11px 26px}
/* Aire al final de la lista para que las ultimas filas se puedan sacar de debajo
   de la pastilla al desplazarse. */
.lista{padding-bottom:58px}

/* ===== Acciones del paso ===== */
.back{border:1px solid var(--bdS);background:var(--surf);color:var(--ink2);font-size:13.5px;
  padding:10px 20px;border-radius:var(--rs);cursor:pointer}
.back:hover{border-color:var(--nav);color:var(--nav)}
/* Cada paso lleva su boton con su propio rotulo, asi que ya no hace falta el
   ancho minimo que antes evitaba que cambiara de tamano entre pasos. */
.go{background:var(--nav);color:#fff;border:none;padding:12px 30px;font-size:14.5px;font-weight:600;
  cursor:pointer;text-align:center;border-radius:var(--rs)}
.go:hover:not(:disabled){background:var(--navD)}
.go:disabled{background:var(--bdS);color:#fff;cursor:not-allowed}

/* ===== Modal de progreso ===== */
.ov{position:fixed;inset:0;z-index:var(--z-ov);background:rgba(17,24,32,.55);display:none;
  align-items:center;justify-content:center;padding:20px}
.ov.show{display:flex}
.ovc{background:var(--surf);border:1px solid var(--bd);width:560px;max-width:100%;padding:28px}
.ovc h3{margin:0 0 4px;font-size:20px;font-weight:600;letter-spacing:-.3px}
.ovc .s2{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.bar2{height:8px;background:var(--head);border:1px solid var(--bd)}
.bar2>i{display:block;height:100%;width:0;background:var(--nav);transition:width .25s}
#log{margin-top:16px;background:var(--navTint2);border:1px solid var(--bd);color:var(--ink2);padding:14px;
  font-size:12.5px;max-height:220px;overflow:auto;white-space:pre-wrap;line-height:1.65}
#log .ok{color:var(--ok)}
#log .err{color:var(--err)}
#log .warn{color:var(--warn)}
#log .dim{color:var(--muted)}
.ovf{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.ovb.sec{background:#fff;color:var(--nav);border:1px solid var(--nav)}
.ovb.sec:hover{background:var(--navD);color:#fff}
.kv small.mut{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:3px}
.kv tr.aviso td.v{font-weight:600}
.kv tr.aviso td.v small{font-weight:400}
.ovb{border:none;background:var(--nav);color:#fff;padding:11px 26px;font-size:14px;font-weight:600;cursor:pointer}
.ovb:hover:not(:disabled){background:var(--navD)}
.ovb:disabled{background:var(--bdS);cursor:not-allowed}

/* ===== Aviso flotante ===== */
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(16px);bottom:100px;z-index:var(--z-toast);
  background:var(--nav);color:#fff;padding:13px 20px;display:flex;gap:12px;align-items:center;
  opacity:0;transition:transform .25s,opacity .25s;pointer-events:none;max-width:92vw}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast b{font-size:13.5px;font-weight:600}
.toast span{font-size:12px;opacity:.85;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:920px){
  .wrap{padding:0 18px}
  .f1 .zona,.f1 .notas,.p3 > div{padding-left:18px;padding-right:18px}
  col.k{width:150px}
  .rail .wrap{justify-content:flex-start;overflow-x:auto}
  .st{padding:16px 18px}
  .p2{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);background:var(--surf)}
  .menu{border-right:none;border-bottom:1px solid var(--bd);overflow:visible}
  .mh{padding:16px 18px 10px}
  /* Solo la lista de categorias se vuelve horizontal; la cabecera del menu no. */
  .menu > div#grupos{display:flex;overflow-x:auto}
  .menu button{width:auto;white-space:nowrap;padding:12px 16px}
  .tabla{border-left:none}
  .menu button{border-right:1px solid var(--bdH)}
  .hd h2{font-size:23px}
  .hd{flex-direction:column;align-items:flex-start;gap:14px}
  .flota{left:18px;right:18px;bottom:18px;border-radius:var(--r);justify-content:space-between;
    padding:10px 12px 10px 16px}
  .hda{align-items:flex-start;width:100%}
  .acc{width:100%;justify-content:space-between}
  .cwrap{grid-template-columns:1fr;padding-left:18px}
  .ccap,.copts{padding-left:18px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.001ms !important}
}