/* Registro Académico PEMEM II — hoja de estilos única */

:root{
  --bg:#e9eef1; --sup:#ffffff; --sup2:#f3f7f9; --linea:#ccd8df; --linea2:#e2eaef;
  --texto:#14293a; --suave:#5b6f7e;
  --pri:#1c5670; --pri-cont:#ffffff; --pri-suave:#dfedf3;
  --sello:#8f5a1c; --sello-suave:#f6ecdd;
  --ok:#2c6e49; --mal:#a32e2a; --pend:#8a6d1f;
  --ok-bg:#e2f0e8; --mal-bg:#f7e4e3; --pend-bg:#f6efdc;
  --sombra:0 1px 2px rgba(20,41,58,.06), 0 10px 30px -22px rgba(20,41,58,.55);
  --r:10px;
  --p-papel:#ffffff; --p-tinta:#0d1b2a; --p-suave:#4a5c6a; --p-linea:#0d1b2a; --p-pri:#123a5c;
  --fdis:"Zilla Slab", Georgia, "Times New Roman", serif;
  --fui:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fmono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d151b; --sup:#151f27; --sup2:#1a262f; --linea:#2a3b47; --linea2:#22313b;
    --texto:#e3ecf1; --suave:#93a8b5;
    --pri:#74bad9; --pri-cont:#082230; --pri-suave:#1a3543;
    --sello:#d69c53; --sello-suave:#2c2418;
    --ok:#6cc292; --mal:#e78e88; --pend:#d3b263;
    --ok-bg:#163024; --mal-bg:#341f1e; --pend-bg:#2e2818;
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -22px rgba(0,0,0,.9);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--texto);font-family:var(--fui);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--fdis);font-weight:600;margin:0;text-wrap:balance}
a{color:var(--pri)}

button,input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--linea);background:var(--sup);
  color:var(--texto);padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:600;font-size:14px;
  text-decoration:none;transition:background .12s ease,border-color .12s ease}
.btn:hover{background:var(--sup2);border-color:var(--pri)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{
  outline:2px solid var(--pri);outline-offset:2px}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-cont)}
.btn.mini{padding:4px 9px;font-size:13px;border-radius:7px;font-weight:500}
.btn.peligro{color:var(--mal)}
.btn.peligro:hover{border-color:var(--mal);background:var(--mal-bg)}
.btn[disabled],.btn.off{opacity:.5;pointer-events:none}
input[type=text],input[type=password],input[type=number],input[type=email],input[type=file],select,textarea{
  background:var(--sup);border:1px solid var(--linea);border-radius:8px;padding:8px 10px;width:100%}
textarea{font-family:var(--fui);line-height:1.55;resize:vertical;min-height:200px}
label{display:block;font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--suave);margin-bottom:4px}
.campo{min-width:0}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.grupo-btn{display:flex;gap:8px;flex-wrap:wrap}

.barra{background:var(--sup);border-bottom:1px solid var(--linea)}
.barra-in{max-width:1240px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.escudo{width:40px;height:40px;border-radius:9px;flex:none;object-fit:contain;background:#fff;
  border:1px solid var(--linea)}
.marca{display:flex;flex-direction:column;line-height:1.15;margin-right:auto;min-width:0}
.marca b{font-family:var(--fdis);font-size:17px}
.marca span{font-size:12px;color:var(--suave)}
.rol{display:inline-flex;align-items:center;gap:6px;background:var(--pri-suave);color:var(--pri);
  border-radius:99px;padding:3px 11px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.nav{background:var(--sup);border-bottom:1px solid var(--linea)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;gap:2px;overflow-x:auto}
.tab{padding:11px 14px;font-weight:600;font-size:14px;color:var(--suave);border-bottom:2px solid transparent;
  white-space:nowrap;text-decoration:none}
.tab:hover{color:var(--texto)}
.tab.on{color:var(--pri);border-bottom-color:var(--pri)}
main{max-width:1240px;margin:0 auto;padding:26px 20px 60px}
.pie{max-width:1240px;margin:0 auto;padding:0 20px 40px;color:var(--suave);font-size:12px;text-align:center}

.cab{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.cab h2{font-size:24px}
.cab p{margin:2px 0 0;color:var(--suave);font-size:14px}
.cab .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--sombra);
  margin-bottom:22px}
.tarjeta > .cuerpo{padding:16px 18px}
.tarjeta > .titulo{padding:12px 18px;border-bottom:1px solid var(--linea2);font-family:var(--fdis);
  font-weight:600;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.titulo .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.filtros{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filtros .campo{flex:1 1 170px;max-width:280px}
.vacio{text-align:center;padding:44px 20px;color:var(--suave)}
.vacio h3{font-size:19px;color:var(--texto);margin-bottom:6px}
.vacio p{max-width:46ch;margin:0 auto 16px}
.ayuda{font-size:12.5px;color:var(--suave);margin-top:8px}
.aviso{border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:16px;
  border:1px solid currentColor}
.aviso.ok{background:var(--ok-bg);color:var(--ok)}
.aviso.mal{background:var(--mal-bg);color:var(--mal)}
.aviso.info{background:var(--pri-suave);color:var(--pri)}
.error{color:var(--mal);font-size:13.5px;font-weight:600;min-height:19px}

.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--linea2);vertical-align:middle}
thead th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--suave);font-weight:700;
  background:var(--sup2);border-bottom:1px solid var(--linea)}
tbody tr:hover{background:var(--sup2)}
td.num,th.num{text-align:center;font-variant-numeric:tabular-nums;font-family:var(--fmono)}
.cod{font-family:var(--fmono);font-size:13px;color:var(--suave)}
.acc{white-space:nowrap;text-align:right}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:600}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.mal{background:var(--mal-bg);color:var(--mal)}
.pill.pend{background:var(--pend-bg);color:var(--pend)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--linea);background:var(--sup2);border-radius:99px;padding:3px 10px;font-size:12.5px;
  display:inline-flex;align-items:center;gap:6px}

.notas-tabla th.al,.notas-tabla td.al{position:sticky;left:0;background:var(--sup);z-index:3;min-width:230px;
  border-right:1px solid var(--linea)}
.notas-tabla thead th.al{z-index:4;background:var(--sup2)}
.notas-tabla th.materia{writing-mode:vertical-rl;transform:rotate(180deg);height:230px;padding:10px 5px;
  font-size:12px;text-transform:none;font-weight:600;color:var(--texto);white-space:normal;text-align:left;
  line-height:1.2;max-width:3.4em;overflow-wrap:anywhere}
.notas-tabla th.materia.parte{color:var(--sello);font-weight:500}
.notas-tabla input{width:58px;text-align:center;padding:6px 4px;font-family:var(--fmono);border-radius:6px}
.notas-tabla input.bajo{color:var(--mal);border-color:var(--mal)}
.notas-tabla input.parte{border-style:dashed}
.notas-tabla td{padding:6px 8px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:22px}
.tile{background:var(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--sombra)}
.tile .k{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--suave);font-weight:700}
.tile .v{font-family:var(--fdis);font-size:32px;font-weight:600;line-height:1.1;margin-top:6px;
  font-variant-numeric:tabular-nums}
.tile .s{font-size:13px;color:var(--suave);margin-top:2px}
.barra-prog{height:7px;background:var(--linea2);border-radius:99px;overflow:hidden;margin-top:10px}
.barra-prog i{display:block;height:100%;background:var(--pri);border-radius:99px}

/* ---------- entrada ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1100px 520px at 50% -8%, var(--pri-suave), transparent 65%), var(--bg)}
.login-caja{width:100%;max-width:420px;background:var(--sup);border:1px solid var(--linea);border-radius:14px;
  padding:30px;box-shadow:var(--sombra);text-align:center}
.login img{width:74px;height:74px;border-radius:12px;margin:0 auto 14px;display:block;object-fit:contain}
.login h1{font-size:18px;line-height:1.3}
.login .sub{color:var(--suave);font-size:13px;margin:6px 0 22px}
.login form{text-align:left;display:grid;gap:12px}
.login .btn{width:100%;justify-content:center;padding:11px}

/* ---------- boleta ---------- */
.hojas{display:grid;gap:26px;justify-items:center}
.hoja{background:var(--p-papel);color:var(--p-tinta);width:100%;max-width:816px;padding:34px 38px;
  border:1px solid var(--linea);border-radius:6px;box-shadow:var(--sombra);font-size:12.5px}
.hoja .enc{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.hoja .enc img{width:74px;height:78px;flex:none;object-fit:contain}
.hoja .enc .txt{flex:1;text-align:center}
.hoja .enc .txt div{font-weight:700;color:var(--p-pri);font-size:13px;line-height:1.35}
.hoja .enc .txt div.dir{font-size:12px;white-space:pre-wrap}
.hoja h3.tit{text-align:center;font-family:var(--fui);font-weight:700;font-size:19px;letter-spacing:.03em;
  color:var(--p-tinta);margin:2px 0 10px}
.hoja .linea-grado{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:6px;font-weight:700;
  font-size:14px}
.hoja .linea-grado .sec{border:1px solid var(--p-linea);padding:1px 12px;border-radius:3px}
.hoja .linea-grado .cl{margin-left:auto;display:flex;align-items:center;gap:10px}
.hoja .linea-grado .cl b{border:1px solid var(--p-linea);padding:1px 18px;font-family:var(--fmono);border-radius:3px}
.hoja .linea-nom{display:flex;gap:14px;align-items:baseline;margin-bottom:12px;font-size:14px}
.hoja .linea-nom span{font-weight:700}
.hoja table{border-collapse:collapse;width:100%;font-size:11.5px;table-layout:fixed}
.hoja th,.hoja td{border:1px solid var(--p-linea);padding:3px 5px;color:var(--p-tinta)}
.hoja thead th{background:#eaf0f5;color:var(--p-tinta);text-transform:none;letter-spacing:0;font-size:10.5px;
  font-style:italic;font-weight:700;text-align:center;line-height:1.2}
.hoja tbody tr:hover{background:transparent}
.hoja td.mat{font-weight:600;font-size:11px;line-height:1.25}
.hoja td.num{text-align:center;font-family:var(--fmono)}
.hoja td.fin{font-weight:700;background:#f4f7fa}
.hoja td.fin.rep{color:var(--mal)}
.hoja td.banda{text-align:center;font-weight:700;font-size:10.5px;letter-spacing:.06em;background:#fff}
.hoja .art-w{display:flex;align-items:stretch;height:100%}
.hoja .art-subs{display:flex;flex-direction:column;flex:1}
.hoja .art-subs span{flex:1;display:flex;align-items:center;padding:2px 4px;font-size:10.5px}
.hoja .art-subs span + span{border-top:1px solid var(--p-linea)}
.hoja .art-subs.nom span{font-weight:600;justify-content:flex-end;text-align:right}
.hoja .art-subs.val span{justify-content:center;font-family:var(--fmono)}
.hoja .art-tot{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--p-linea);
  width:46%;font-family:var(--fmono);font-weight:600}
.hoja td.art{padding:0;height:44px}
.hoja .pie-tot{display:flex;gap:24px;flex-wrap:wrap;margin-top:8px;font-size:12px;align-items:center}
.hoja .pie-tot b{font-size:14px;font-family:var(--fmono)}
.hoja .escala{margin-top:4px;font-size:10px;color:var(--p-suave)}
.hoja .obs{margin-top:14px;font-size:11px}
.hoja .obs .lin{border-bottom:1px solid var(--p-linea);height:20px;margin-top:6px}
.hoja .firmas{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:46px;text-align:center;
  font-size:10.5px}
.hoja .firmas div{border-top:1px solid var(--p-tinta);padding-top:4px;color:var(--p-suave)}

@media (max-width:640px){
  main{padding:20px 14px 50px}
  .hoja{padding:22px 16px}
}
@page{size:letter portrait;margin:10mm}
@media print{
  .no-print{display:none!important}
  body{background:#fff}
  main{padding:0;max-width:none}
  .hojas{display:block;gap:0}
  .hoja{max-width:none;width:100%;border:0;border-radius:0;box-shadow:none;padding:0;
    page-break-after:always;font-size:11.5px}
  .hoja:last-child{page-break-after:auto}
  .hoja table{font-size:10.5px}
  .hoja thead th,.hoja td.fin{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}