/* Nexum RRHH. Sin estilos en linea: la politica de contenido (CSP) no los
   permite, asi que todo lo visual vive aca. */

:root {
  --fondo: #f5f7fb;
  --superficie: #ffffff;
  --superficie-2: #f0f3f9;
  --borde: #e2e7f0;
  --texto: #172033;
  --texto-suave: #5b6578;
  --primario: #2f5bea;
  --primario-hover: #2449c4;
  --primario-suave: #e8eefe;
  --exito: #138a52;
  --exito-suave: #e3f6ec;
  --alerta: #b45c00;
  --alerta-suave: #fff3e0;
  --peligro: #c92a3a;
  --peligro-suave: #fde8ea;
  --lateral: #121a2e;
  --lateral-texto: #c9d2e6;
  --lateral-activo: #24304d;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
  --radio: 12px;
  --fuente: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0d1322; --superficie: #151d31; --superficie-2: #1b2540; --borde: #2a3552;
    --texto: #e7ecf6; --texto-suave: #9aa6bf; --primario: #6d8cff; --primario-hover: #8aa3ff;
    --primario-suave: #1f2b4f; --exito: #3ecf8e; --exito-suave: #12342a; --alerta: #f0a347;
    --alerta-suave: #3a2a12; --peligro: #ff6b7a; --peligro-suave: #3d1820;
    --lateral: #0a0f1c; --lateral-activo: #1b2540;
    --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0d1322; --superficie: #151d31; --superficie-2: #1b2540; --borde: #2a3552;
  --texto: #e7ecf6; --texto-suave: #9aa6bf; --primario: #6d8cff; --primario-hover: #8aa3ff;
  --primario-suave: #1f2b4f; --exito: #3ecf8e; --exito-suave: #12342a; --alerta: #f0a347;
  --alerta-suave: #3a2a12; --peligro: #ff6b7a; --peligro-suave: #3d1820;
  --lateral: #0a0f1c; --lateral-activo: #1b2540;
  --sombra: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3); color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente); font-size: 15px; line-height: 1.5;
  background: var(--fondo); color: var(--texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
.suave { color: var(--texto-suave); }
.chico { font-size: .85rem; }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg.ic { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none;
         stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------- estructura */

.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.lateral {
  background: var(--lateral); color: var(--lateral-texto);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 1rem .75rem; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: .6rem; padding: .25rem .5rem 1.25rem;
         color: #fff; font-weight: 700; font-size: 1.05rem; }
.marca .logo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
               background: linear-gradient(135deg, #4f7cff, #22c1a6); color: #fff; }
.colegio-actual { margin: 0 .5rem 1rem; padding: .6rem .75rem; border-radius: 10px;
                  background: var(--lateral-activo); font-size: .85rem; color: #fff; }
.colegio-actual small { display: block; color: var(--lateral-texto); font-size: .75rem; }
.menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 9px;
  color: var(--lateral-texto); font-weight: 500;
}
.menu a:hover { background: var(--lateral-activo); color: #fff; text-decoration: none; }
.menu a[aria-current="page"] { background: var(--lateral-activo); color: #fff; }
.menu a[aria-current="page"] svg { color: #7fa0ff; }
.lateral .pie { margin-top: auto; padding-top: 1rem; }

.principal { display: flex; flex-direction: column; min-width: 0; }
.barra {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 20;
}
.barra .espacio { flex: 1; }
.contenido { padding: 1.5rem; max-width: 1280px; width: 100%; }
.migas { font-size: .85rem; color: var(--texto-suave); margin-bottom: .25rem; }
.migas a { color: var(--texto-suave); }
.encabezado { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.encabezado p { margin: 0; }

.boton-menu { display: none; }

/* ------------------------------------------------------------------ piezas */

.tarjeta { background: var(--superficie); border: 1px solid var(--borde);
           border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta > .cuerpo { padding: 1.25rem; }
.tarjeta > .cabeza { padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde);
                     display: flex; align-items: center; gap: .75rem; justify-content: space-between; }
.grilla { display: grid; gap: 1rem; }
.grilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.modulo {
  display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  color: var(--texto); transition: transform .12s ease, box-shadow .12s ease, border-color .12s;
}
.modulo:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra);
                border-color: var(--primario); }
.modulo .icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
                 background: var(--primario-suave); color: var(--primario); margin-bottom: .25rem; }
.modulo strong { font-size: 1rem; }
.modulo span { color: var(--texto-suave); font-size: .875rem; }
.dato { display: flex; flex-direction: column; }
.dato b { font-size: 1.6rem; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px; padding: .5rem 1rem; border-radius: 9px; border: 1px solid transparent;
  font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  background: var(--primario); color: #fff; transition: background .12s;
}
.boton:hover { background: var(--primario-hover); text-decoration: none; }
.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.boton.secundario:hover { background: var(--superficie-2); }
.boton.fantasma { background: transparent; color: var(--texto-suave); }
.boton.fantasma:hover { background: var(--superficie-2); color: var(--texto); }
.boton.peligro { background: var(--peligro); }
.boton.peligro:hover { filter: brightness(.92); }
.boton.chico { min-height: 32px; padding: .25rem .65rem; font-size: .85rem; }
.boton.icono-solo { padding: .5rem; min-width: 40px; }
.boton[disabled], .htmx-request .boton[type="submit"], .boton.htmx-request { opacity: .6; pointer-events: none; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.etiqueta { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .55rem;
            border-radius: 999px; font-size: .78rem; font-weight: 600;
            background: var(--superficie-2); color: var(--texto-suave); }
.etiqueta.ok { background: var(--exito-suave); color: var(--exito); }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta.peligro { background: var(--peligro-suave); color: var(--peligro); }
.etiqueta.info { background: var(--primario-suave); color: var(--primario); }

.aviso-caja { display: flex; gap: .75rem; padding: .9rem 1rem; border-radius: 10px;
              background: var(--primario-suave); color: var(--texto); margin-bottom: 1rem; }
.aviso-caja.alerta { background: var(--alerta-suave); }
.aviso-caja.peligro { background: var(--peligro-suave); }
.aviso-caja.ok { background: var(--exito-suave); }
.aviso-caja svg { margin-top: 2px; }
.aviso-caja p:last-child { margin: 0; }

/* -------------------------------------------------------------- formularios */

.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label, .campo .rotulo { font-weight: 600; font-size: .875rem; }
.campo .ayuda { font-size: .8rem; color: var(--texto-suave); }
.campo .error { font-size: .82rem; color: var(--peligro); font-weight: 500; }
.requerido::after { content: " *"; color: var(--peligro); }
input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="search"], input[type="tel"], input[type="number"], select, textarea {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 9px; padding: .55rem .75rem; min-height: 42px;
  width: 100%; transition: border-color .12s, box-shadow .12s;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primario);
  box-shadow: 0 0 0 3px var(--primario-suave); }
.campo.con-error input, .campo.con-error select, .campo.con-error textarea { border-color: var(--peligro); }
.formulario { display: grid; gap: 1rem; }
.fila { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.fila.angosta { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 1rem; }
legend { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
         color: var(--primario); padding: 0; margin-bottom: .25rem; }
.casillas { display: grid; gap: .5rem; }
.casilla { display: flex; gap: .6rem; align-items: flex-start; padding: .6rem .75rem;
           border: 1px solid var(--borde); border-radius: 9px; cursor: pointer; }
.casilla:hover { background: var(--superficie-2); }
.casilla input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--primario); }
.casilla small { display: block; color: var(--texto-suave); }

/* ------------------------------------------------------------------ tablas */

.filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; padding: 1rem 1.25rem;
           border-bottom: 1px solid var(--borde); }
.buscador { position: relative; flex: 1 1 260px; max-width: 420px; }
.buscador svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
                color: var(--texto-suave); pointer-events: none; }
.buscador input { padding-left: 2.3rem; }
.segmentos { display: inline-flex; background: var(--superficie-2); border-radius: 9px; padding: 3px; }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmentos span { display: block; padding: .4rem .8rem; border-radius: 7px; font-size: .875rem;
                  font-weight: 600; color: var(--texto-suave); }
.segmentos input:checked + span { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
.segmentos input:focus-visible + span { outline: 3px solid var(--primario); }

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase;
            letter-spacing: .04em; color: var(--texto-suave); padding: .7rem 1rem;
            border-bottom: 1px solid var(--borde); white-space: nowrap; background: var(--superficie); }
.tabla th a { color: inherit; display: inline-flex; align-items: center; gap: .25rem; }
.tabla td { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tr.de-baja td { color: var(--texto-suave); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .nombre a { color: var(--texto); font-weight: 600; }
.tabla .accion { text-align: right; white-space: nowrap; }
.paginado { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
            padding: .75rem 1.25rem; font-size: .875rem; color: var(--texto-suave); flex-wrap: wrap; }
.vacio { text-align: center; padding: 3rem 1rem; color: var(--texto-suave); }
.vacio .icono { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
                display: grid; place-items: center; background: var(--superficie-2); }
.vacio .icono svg { width: 26px; height: 26px; }
.vacio h3 { color: var(--texto); }
#tabla.htmx-request { opacity: .55; transition: opacity .2s; }

/* ------------------------------------------------------------------- ficha */

.ficha dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 1rem 1.5rem; margin: 0; }
.ficha dt { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
            color: var(--texto-suave); }
.ficha dd { margin: .15rem 0 0; font-weight: 500; overflow-wrap: anywhere; }
.ficha dd.falta { color: var(--texto-suave); font-weight: 400; font-style: italic; }
.historial { list-style: none; margin: 0; padding: 0; }
.historial li { padding: .9rem 1.25rem; border-bottom: 1px solid var(--borde); }
.historial li:last-child { border-bottom: 0; }
.historial .cambios { margin: .4rem 0 0; font-size: .85rem; display: grid; gap: .15rem; }
.historial del { color: var(--peligro); text-decoration: line-through; }
.historial ins { color: var(--exito); text-decoration: none; font-weight: 600; }
.avatar { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
          background: var(--primario-suave); color: var(--primario); font-weight: 700; font-size: 1.2rem; flex: none; }
.persona-titulo { display: flex; align-items: center; gap: 1rem; }

/* -------------------------------------------------------- modal y avisos */

dialog.modal {
  border: 0; padding: 0; border-radius: 16px; width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem); background: var(--superficie); color: var(--texto);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
dialog.modal.angosto { width: min(460px, calc(100vw - 2rem)); }
dialog::backdrop { background: rgba(10, 15, 30, .55); backdrop-filter: blur(2px); }
.modal-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--borde); position: sticky;
                top: 0; background: var(--superficie); z-index: 1; }
.modal-cabeza h2 { margin: 0; }
.modal-cuerpo { padding: 1.25rem 1.5rem; }
.modal-pie { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem;
             border-top: 1px solid var(--borde); position: sticky; bottom: 0; background: var(--superficie); }

.avisos { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 100;
          max-width: min(420px, calc(100vw - 2rem)); }
.toast { display: flex; gap: .65rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px;
         background: var(--texto); color: var(--fondo); box-shadow: 0 10px 30px rgba(0,0,0,.25);
         animation: entrar .2s ease-out; font-weight: 500; }
.toast.error { background: var(--peligro); color: #fff; }
.toast.saliendo { animation: salir .2s ease-in forwards; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
@keyframes salir { to { opacity: 0; transform: translateY(8px); } }

.clave-provisoria { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.5rem;
                    letter-spacing: .08em; padding: .9rem 1rem; border-radius: 10px; text-align: center;
                    background: var(--superficie-2); border: 1px dashed var(--borde); user-select: all; }

.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer;
                        padding: .3rem .5rem; border-radius: 10px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--superficie-2); }
.menu-usuario .iniciales { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
                           background: var(--primario); color: #fff; font-weight: 700; font-size: .85rem; }
.menu-usuario .quien { line-height: 1.2; text-align: left; }
.menu-usuario .quien small { display: block; color: var(--texto-suave); font-size: .78rem; }
.desplegable { position: absolute; right: 0; top: calc(100% + 6px); min-width: 250px;
               background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px;
               box-shadow: var(--sombra); padding: .4rem; z-index: 30; }
.desplegable a, .desplegable button { display: flex; width: 100%; align-items: center; gap: .6rem;
               padding: .55rem .7rem; border-radius: 8px; color: var(--texto); background: none;
               border: 0; font: inherit; cursor: pointer; text-align: left; }
.desplegable a:hover, .desplegable button:hover { background: var(--superficie-2); text-decoration: none; }
.desplegable hr { border: 0; border-top: 1px solid var(--borde); margin: .35rem 0; }
.desplegable .titulo { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
                       color: var(--texto-suave); padding: .4rem .7rem .2rem; }
.desplegable button[aria-pressed="true"] { color: var(--primario); font-weight: 600; }

/* --------------------------------------------------------- pantallas sueltas */

.centro { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem;
          background: radial-gradient(900px 500px at 85% -10%, var(--primario-suave), transparent 60%), var(--fondo); }
.caja-ingreso { width: min(420px, 100%); }
.caja-ingreso .tarjeta > .cuerpo { padding: 2rem; }
.caja-ingreso .marca { color: var(--texto); justify-content: center; padding: 0 0 1.5rem; font-size: 1.2rem; }
.mostrar-clave { position: relative; }
.mostrar-clave input { padding-right: 2.8rem; }
.mostrar-clave button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
                        background: none; border: 0; color: var(--texto-suave); cursor: pointer;
                        padding: .35rem; border-radius: 6px; }
.codigo-grande { font-size: 1.6rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.qr { display: block; width: 200px; height: 200px; margin: 0 auto; border-radius: 10px; background: #fff; padding: 8px; }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.pasos li { counter-increment: paso; display: flex; gap: .75rem; }
.pasos li::before { content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%;
                    background: var(--primario-suave); color: var(--primario); display: grid;
                    place-items: center; font-weight: 700; font-size: .85rem; }
.medidor { height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.medidor i { display: block; height: 100%; width: 0; background: var(--peligro); transition: width .2s, background .2s; }
.medidor[data-nivel="1"] i { width: 33%; }
.medidor[data-nivel="2"] i { width: 66%; background: var(--alerta); }
.medidor[data-nivel="3"] i { width: 100%; background: var(--exito); }

/* ----------------------------------------------------------------- celular */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50; transform: translateX(-100%);
             transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .app.menu-abierto .lateral { transform: none; }
  .app.menu-abierto::after { content: ""; position: fixed; inset: 0; background: rgba(10,15,30,.45); z-index: 40; }
  .boton-menu { display: inline-flex; }
  .barra { padding: .6rem 1rem; }
  .contenido { padding: 1rem; }
  .grilla.dos, .grilla.tres { grid-template-columns: 1fr; }
  .menu-usuario .quien { display: none; }
  .ocultar-celu { display: none; }
  h1 { font-size: 1.35rem; }
  /* La tabla se vuelve una lista de tarjetas: nada de scroll horizontal. */
  table.tabla.apilable thead { display: none; }
  table.tabla.apilable, .tabla.apilable tbody, .tabla.apilable tr, .tabla.apilable td { display: block; width: 100%; }
  .tabla.apilable tr { padding: .75rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla.apilable td { border: 0; padding: .15rem 0; }
  .tabla.apilable td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-suave); font-size: .85rem; }
  .tabla.apilable .accion { text-align: left; padding-top: .5rem; }
  .tabla.apilable .num { text-align: left; }
  .tabla.apilable .nombre { font-size: 1rem; padding-bottom: .25rem; }
  dialog.modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .lateral, .barra, .acciones, .filtros, .paginado, .avisos { display: none !important; }
  .app { display: block; }
  .tarjeta { box-shadow: none; }
}

.espacio-v { height: 1.5rem; }
.titulo-seccion { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
                  color: var(--texto-suave); margin: 0 0 .75rem; }
.cabeza h2 { display: flex; align-items: center; gap: .5rem; margin: 0; }