@font-face { font-family:"Jakarta"; src:url("/static/fuentes/PlusJakartaSans.ttf") format("truetype"); font-weight:200 800; font-display:swap; }
:root {
  --noche:#0a0f1f; --noche2:#111a33; --tinta:#f3f5fb; --gris:#aab3c9; --borde:rgba(255,255,255,.28);
  --verde:#3fae5a; --verde2:#1f8f6b; --oro:#f2c94c; --rojo:#ff8f85; --ok:#7be0a0;
}
* { box-sizing:border-box; }
html { background:var(--noche); }
body { margin:0; min-height:100vh; color:var(--tinta); font:17px/1.5 "Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* Cielo: nebulosas con los colores del escudo y tres capas de estrellas */
.cielo { position:fixed; inset:0; z-index:-1; background:
  radial-gradient(2.3px 2.3px at 12% 18%, #fff 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 27% 62%, #dfe9ff 60%, transparent 61%),
  radial-gradient(3.0px 3.0px at 41% 31%, #f2c94c 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 58% 12%, #fff 60%, transparent 61%),
  radial-gradient(2.7px 2.7px at 66% 78%, #9fe3b4 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 79% 44%, #fff 60%, transparent 61%),
  radial-gradient(3.4px 3.4px at 91% 22%, #dfe9ff 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 8% 81%, #fff 60%, transparent 61%),
  radial-gradient(2.3px 2.3px at 35% 90%, #f2c94c 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 50% 55%, #fff 60%, transparent 61%),
  radial-gradient(2.5px 2.5px at 86% 88%, #fff 60%, transparent 61%),
  radial-gradient(1.9px 1.9px at 19% 40%, #9fe3b4 60%, transparent 61%),
  radial-gradient(46% 42% at 24% 58%, rgba(63,174,90,.20), transparent 70%),
  radial-gradient(38% 36% at 78% 20%, rgba(242,201,76,.10), transparent 70%),
  radial-gradient(60% 60% at 60% 110%, rgba(31,143,107,.22), transparent 70%),
  linear-gradient(160deg, #0a0f1f 0%, #0e1630 55%, #0a1422 100%); }
.cielo::after { content:""; position:absolute; inset:0; opacity:.9; background-size:310px 290px, 470px 430px;
  background-image:
   radial-gradient(1.6px 1.6px at 30px 40px, #fff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 170px 110px, #cfd8ff 60%, transparent 61%),
   radial-gradient(1.8px 1.8px at 250px 240px, #9fe3b4 60%, transparent 61%), radial-gradient(1.5px 1.5px at 90px 200px, #f2c94c 60%, transparent 61%),
   radial-gradient(1.3px 1.3px at 210px 20px, #fff 60%, transparent 61%), radial-gradient(1.6px 1.6px at 400px 330px, #ffb38a 60%, transparent 61%),
   radial-gradient(1.2px 1.2px at 120px 380px, #fff 60%, transparent 61%), radial-gradient(1.4px 1.4px at 330px 90px, #8fd3ff 60%, transparent 61%); }

.escena { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,460px); gap:48px;
  align-items:center; max-width:1240px; margin:0 auto; padding:40px 44px; }

/* Lado izquierdo: marca y emblema */
.lado { align-self:stretch; display:flex; flex-direction:column; min-height:calc(100vh - 80px); }
.cabecera { display:flex; align-items:center; gap:14px; }
.logo { display:block; height:56px; width:auto; filter:drop-shadow(0 4px 14px rgba(0,0,0,.45)); }
.marca { display:block; font-size:28px; font-weight:800; letter-spacing:.01em; line-height:1.05; }
.sub { display:block; font-size:12px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--oro); }
.emblema { position:relative; flex:1; display:grid; place-items:center; min-height:300px; }
.escudo { width:min(300px,46%); height:auto; position:relative;
  filter:drop-shadow(0 0 34px rgba(63,174,90,.55)) drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.orbita { position:absolute; border-radius:50%; border:1px dashed rgba(255,255,255,.16); aspect-ratio:1; }
.o1 { width:min(430px,66%); } .o2 { width:min(580px,88%); border-style:solid; border-color:rgba(255,255,255,.07); }
.o3 { width:min(250px,38%); border:0; background:radial-gradient(circle, rgba(242,201,76,.28), rgba(63,174,90,.12) 55%, transparent 72%); }
.lema { margin:0 0 18px; font-size:30px; font-weight:700; line-height:1.2; }
.pie { margin:0; font-size:13px; color:var(--gris); }

/* Tarjeta de cristal */
.columna { width:100%; }
.hoja { position:relative; padding:44px 38px 38px; border-radius:28px; border:1px solid var(--borde);
  background:linear-gradient(180deg, rgba(22,30,58,.78), rgba(12,18,38,.82));
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10); }
.seguro { margin:16px 0 0; text-align:center; font-size:13px; color:var(--gris); }
.seguro::before { content:""; display:inline-block; width:9px; height:9px; margin-right:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }

.paso { margin:0 0 6px; text-align:center; color:var(--oro); font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
h1 { margin:0 0 12px; text-align:center; font-size:30px; font-weight:800; line-height:1.15; }
.hoja > p { text-align:center; color:#d5dbea; }
label { display:block; margin:20px 0 7px; font-size:15px; font-weight:600; color:#e6eaf5; }
input:not([type=checkbox]) { width:100%; padding:15px 16px; font:inherit; font-size:18px; color:#141828; background:#fff;
  border:2px solid transparent; border-radius:14px; box-shadow:0 8px 22px rgba(0,0,0,.25); }
input:focus { outline:none; border-color:var(--oro); box-shadow:0 0 0 4px rgba(242,201,76,.28), 0 8px 22px rgba(0,0,0,.25); }
input.grande { font-size:24px; font-weight:700; letter-spacing:.10em; text-align:center; }
button { width:100%; margin-top:22px; padding:16px; font:inherit; font-size:17px; font-weight:700; color:#fff; cursor:pointer;
  border:0; border-radius:14px; background:linear-gradient(90deg, var(--verde), var(--verde2));
  box-shadow:0 10px 28px rgba(63,174,90,.35); transition:transform .12s ease, filter .12s ease; }
button:hover { filter:brightness(1.08); } button:active { transform:translateY(1px); }
button:focus-visible { outline:3px solid var(--oro); outline-offset:3px; }
button:disabled { opacity:.6; cursor:default; }
button.secundario { background:rgba(255,255,255,.08); border:1px solid var(--borde); box-shadow:none; }
button.enlace { margin-top:10px; padding:10px; background:none; box-shadow:none; color:var(--gris); font-weight:500; font-size:15px; text-decoration:underline; }
.error { margin:16px 0 0; padding:12px 14px; text-align:left !important; border-radius:12px; font-size:15px;
  color:#ffd9d5 !important; background:rgba(255,99,88,.14); border:1px solid rgba(255,143,133,.45); }
.nota { margin-top:20px; font-size:14px; color:var(--gris) !important; }
.reglas { margin:14px 0 0; padding-left:20px; color:#c9d1e4; font-size:15px; }
.reglas .ok { color:var(--ok); font-weight:700; }
label.ver { display:flex; gap:8px; align-items:center; font-weight:500; color:var(--gris); margin-top:14px; }
a { color:var(--oro); }

/* Panel de soporte: sin emblema, tarjeta ancha */
.escena:has(.ancha) { grid-template-columns:1fr; max-width:1100px; align-items:start; }
.escena:has(.ancha) .lado { min-height:0; }
.escena:has(.ancha) .emblema, .escena:has(.ancha) .lema, .escena:has(.ancha) .pie { display:none; }
.hoja.ancha { padding:30px; } .hoja.ancha h1 { text-align:left; }
table { width:100%; border-collapse:collapse; }
th, td { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10); text-align:left; font-size:15px; }
th { color:var(--gris); font-weight:600; font-size:13px; letter-spacing:.06em; text-transform:uppercase; }
td.n { text-align:right; font-variant-numeric:tabular-nums; }
.barra { display:flex; gap:18px; align-items:center; margin-bottom:14px; }
form.enlinea { display:inline; } form.enlinea button { width:auto; margin:0; padding:8px 14px; font-size:14px; }

/* Celular: una sola columna, el emblema pasa a ser un resplandor detrás */
@media (max-width: 860px) {
  .escena { grid-template-columns:1fr; gap:20px; padding:22px 16px 28px; align-items:start; align-content:start; }
  .lado { min-height:0; }
  .emblema, .lema, .pie { display:none; }
  .logo { height:48px; } .marca { font-size:24px; }
  .hoja { padding:30px 22px 26px; border-radius:24px; }
  h1 { font-size:26px; }
  .hoja.ancha { padding:18px; overflow-x:auto; }
}
@media (prefers-reduced-motion: reduce) { button { transition:none; } }

/* Portal: botones-enlace y accesos a los servicios */
a.boton { display:block; margin-top:22px; padding:16px; text-align:center; text-decoration:none; font-size:17px; font-weight:700; color:#fff;
  border-radius:14px; background:linear-gradient(90deg, var(--verde), var(--verde2)); box-shadow:0 10px 28px rgba(63,174,90,.35); transition:filter .12s ease; }
a.boton:hover { filter:brightness(1.08); }
a.boton:focus-visible, a.acceso:focus-visible { outline:3px solid var(--oro); outline-offset:3px; }
a.boton.secundario { margin-top:12px; background:rgba(255,255,255,.08); border:1px solid var(--borde); box-shadow:none; }
.accesos { display:grid; gap:12px; margin-top:22px; }
a.acceso { display:flex; align-items:center; gap:14px; padding:16px; text-decoration:none; color:var(--tinta);
  border-radius:16px; border:1px solid var(--borde); background:rgba(255,255,255,.06); transition:background .12s ease, transform .12s ease; }
a.acceso:hover { background:rgba(255,255,255,.12); transform:translateY(-1px); }
.acceso .icono { flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:13px;
  background:linear-gradient(135deg, var(--verde), var(--verde2)); box-shadow:0 8px 20px rgba(63,174,90,.30); }
.acceso .icono svg { width:26px; height:26px; fill:#fff; }
.acceso .texto { flex:1; text-align:left; }
.acceso strong { display:block; font-size:18px; line-height:1.2; }
.acceso small { display:block; font-size:14px; color:var(--gris); }
.acceso .flecha { font-size:28px; color:var(--oro); line-height:1; }
@media (prefers-reduced-motion: reduce) { a.acceso, a.boton { transition:none; } }

/* Páginas del servicio de identidad que usan <input type=submit> y enlaces sueltos */
input[type=submit] { width:100%; margin-top:22px; padding:16px; font:inherit; font-size:17px; font-weight:700; color:#fff; cursor:pointer;
  border:0; border-radius:14px; background:linear-gradient(90deg, var(--verde), var(--verde2)); box-shadow:0 10px 28px rgba(63,174,90,.35); }
.hoja ul { padding-left:20px; text-align:left; }

/* Tablero */
.escena:has(.tablero) { grid-template-columns:1fr; max-width:1100px; align-items:start; align-content:start; }
.escena:has(.tablero) .lado { min-height:0; }
.escena:has(.tablero) .emblema, .escena:has(.tablero) .lema, .escena:has(.tablero) .pie { display:none; }
.hoja.tablero { padding:28px; }
.saludo { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.saludo h1 { text-align:left; margin:0; }
.saludo .fecha { margin:4px 0 0; color:var(--oro); font-weight:600; }
.saludo button { width:auto; margin:0; padding:9px 18px; font-size:15px; }
.rejilla { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.caja { padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045); }
.caja.doble { grid-column:1 / -1; }
h2 { margin:0 0 12px; font-size:13px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--oro); }
.hoja.ancha h2 { margin-top:28px; }
.vacio { margin:0; color:var(--gris); font-size:15px; }
.caja .accesos { margin-top:0; }
.clases, .eventos { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.clases li, .eventos li { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.05); }
.clases .hora { flex:none; width:104px; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; color:#d5dbea; }
.clases .texto, .eventos .texto { flex:1; min-width:0; }
.clases strong, .eventos strong, .aviso strong { display:block; font-size:16px; line-height:1.25; }
.clases small, .eventos small { display:block; font-size:13px; color:var(--gris); }
.clases em { flex:none; font-style:normal; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; }
.clases .ahora { background:rgba(63,174,90,.20); border:1px solid rgba(123,224,160,.55); }
.clases .ahora em { background:var(--verde); color:#fff; }
.clases .sigue em { background:rgba(242,201,76,.20); color:var(--oro); }
.clases .pasada { opacity:.5; }
.aviso + .aviso { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.10); }
.aviso p { margin:4px 0 0; font-size:15px; color:#d5dbea; text-align:left; }
.eventos { grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }
.eventos .cuando { flex:none; width:52px; text-align:center; font-size:12px; text-transform:uppercase; color:var(--gris); line-height:1.1; }
.eventos .cuando b { display:block; font-size:20px; color:var(--tinta); }
.eventos .es-hoy { border:1px solid rgba(242,201,76,.5); } .eventos .es-hoy b { font-size:14px; color:var(--oro); }
table.mes { table-layout:fixed; } table.mes th, table.mes td { padding:6px 0; text-align:center; border:0; font-size:14px; }
table.mes td.hoy { background:var(--verde); color:#fff; font-weight:700; border-radius:10px; }
table.mes td.evento { box-shadow:inset 0 -3px 0 var(--oro); font-weight:700; }
.leyenda { margin:10px 0 0; font-size:12px; color:var(--gris); }
.leyenda .p { display:inline-block; width:10px; height:10px; margin:0 5px 0 10px; border-radius:3px; vertical-align:-1px; }
.leyenda .p.hoy { background:var(--verde); margin-left:0; } .leyenda .p.evento { background:var(--oro); }
form.ficha { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0 14px; align-items:end; margin-bottom:16px; }
form.ficha label { margin-top:8px; font-size:13px; } form.ficha input { padding:10px 12px; font-size:15px; }
form.ficha label, form.ficha input { grid-column:span 1; } form.ficha button { grid-column:1 / -1; width:auto; justify-self:start; margin-top:14px; padding:10px 18px; font-size:15px; }
form.ficha { grid-auto-flow:row; }
@media (max-width: 860px) {
  .rejilla { grid-template-columns:1fr; } .hoja.tablero { padding:18px; }
  .saludo h1 { font-size:24px; } .clases .hora { width:88px; font-size:13px; }
  form.ficha { grid-template-columns:1fr; }
}

/* Tablero: lo que viene del Aula Virtual */
.entregas { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.entregas a { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; text-decoration:none; color:var(--tinta);
  background:rgba(255,255,255,.05); border:1px solid transparent; transition:background .12s ease; }
.entregas a:hover { background:rgba(255,255,255,.11); }
.entregas a:focus-visible, .cursos a:focus-visible { outline:3px solid var(--oro); outline-offset:2px; }
.entregas .cuando { flex:none; width:78px; font-size:13px; color:var(--gris); line-height:1.25; font-variant-numeric:tabular-nums; }
.entregas .cuando b { display:block; font-size:14px; color:var(--tinta); }
.entregas .texto { flex:1; min-width:0; }
.entregas strong { display:block; font-size:16px; line-height:1.25; }
.entregas small { display:block; font-size:13px; color:var(--gris); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entregas .flecha { color:var(--oro); font-size:22px; }
.entregas .urgente a { border-color:rgba(242,201,76,.55); background:rgba(242,201,76,.09); }
.entregas .urgente .cuando b { color:var(--oro); }
.cursos { display:flex; flex-wrap:wrap; gap:10px; }
.cursos a { padding:10px 14px; border-radius:12px; text-decoration:none; color:var(--tinta); font-size:15px; font-weight:600;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); }
.cursos a:hover { background:rgba(255,255,255,.13); }

.hoja ul.entregas, .hoja ul.eventos, .hoja ol.clases { padding-left:0; }

/* Marca del NFC en cada clase */
.sello-nfc { flex:none; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.sello-nfc.bien { background:rgba(123,224,160,.16); color:var(--ok); border:1px solid rgba(123,224,160,.45); }
.sello-nfc.tarde { background:rgba(242,201,76,.16); color:var(--oro); border:1px solid rgba(242,201,76,.5); }
.sello-nfc.just { background:rgba(143,211,255,.14); color:#a9dcff; border:1px solid rgba(143,211,255,.45); }
.sello-nfc.falta { background:rgba(255,143,133,.13); color:var(--rojo); border:1px solid rgba(255,143,133,.45); }
.clases .pasada .sello-nfc { opacity:1; }
.clases li { flex-wrap:wrap; } .clases .texto { min-width:120px; }

/* Accesos: el logo real de cada servicio sobre una placa blanca, como un ícono de aplicación */
.acceso .icono { width:52px; height:52px; padding:8px; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.acceso .icono img { display:block; width:100%; height:100%; object-fit:contain; }