/* =========================================================================
   Certify — Sistema de diseño (glass · obsidiana · amarillo)
   CSS propio, sin frameworks. Portado del brief visual de Lovable.
   ========================================================================= */
:root{
  --radius: 1rem;
  --bg:            oklch(0.13 0.005 260);
  --fg:            oklch(0.97 0.01 100);
  --card:          oklch(0.17 0.008 260);
  --primary:       oklch(0.88 0.19 100);
  --primary-fg:    oklch(0.13 0.005 260);
  --amber:         oklch(0.82 0.20 85);
  --muted:         oklch(0.20 0.008 260);
  --muted-fg:      oklch(0.68 0.02 100);
  --border:        oklch(1 0 0 / 8%);
  --glass-border:  oklch(1 0 0 / 10%);
  --danger:        oklch(0.62 0.24 27);
  --ok:            oklch(0.80 0.17 150);
  --grad-yellow:   linear-gradient(135deg, oklch(0.92 0.19 100) 0%, oklch(0.82 0.20 85) 100%);
  --grad-glass:    linear-gradient(135deg, oklch(1 0 0 / 6%) 0%, oklch(1 0 0 / 1%) 100%);
  --shadow-glass:  0 8px 32px 0 oklch(0 0 0 / 40%), inset 0 1px 0 0 oklch(1 0 0 / 6%);
  --shadow-yellow: 0 0 40px -8px oklch(0.88 0.19 100 / 55%), 0 8px 24px -8px oklch(0.88 0.19 100 / 40%);
  --font-display:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box; border-color:var(--border);}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font-sans); color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.02em; margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.eyebrow{font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; color:oklch(0.88 0.19 100 / .8);}
.muted{color:var(--muted-fg);}

/* Fondo obsidiana con halos */
.bg-obsidian{
  background:
    radial-gradient(1200px 600px at 10% -10%, oklch(0.88 0.19 100 / 10%), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, oklch(0.65 0.15 60 / 8%), transparent 60%),
    radial-gradient(700px 400px at 50% 120%, oklch(0.88 0.19 100 / 6%), transparent 60%),
    var(--bg);
}
.bg-wallpaper{
  background: url('../assets/wallpaper/inicial.jpg') center/cover no-repeat fixed;
}

/* Blobs animados */
.blob{position:fixed; border-radius:50%; filter:blur(60px); opacity:.5;
  pointer-events:none; mix-blend-mode:screen; animation:float 18s ease-in-out infinite; z-index:0;}
.blob-y{background:radial-gradient(circle, oklch(0.88 0.19 100 / 70%) 0%, oklch(0.82 0.2 85 / 25%) 40%, transparent 70%);}
.blob-a{background:radial-gradient(circle, oklch(0.75 0.18 70 / 55%) 0%, transparent 70%);}
@keyframes float{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.1);}66%{transform:translate(-30px,40px) scale(.95);}}

/* Superficies glass */
.glass-panel{background:var(--grad-glass); backdrop-filter:blur(24px) saturate(140%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-glass); border-radius:calc(var(--radius) + 8px);}
.glass-card{  background:oklch(0.08 0.005 260 / 75%); backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--glass-border); box-shadow:var(--shadow-glass); border-radius:calc(var(--radius) + 8px);}

/* Inputs */
.field{display:block; margin-bottom:1.1rem;}
.field > label{display:block; font-size:.7rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted-fg); margin-bottom:.45rem;}
.glass-input, select.glass-input, textarea.glass-input{
  width:100%; background:oklch(1 0 0 / 3%); backdrop-filter:blur(12px);
  border:1px solid var(--glass-border); border-radius:calc(var(--radius) - 4px);
  color:var(--fg); font-size:.9rem; padding:.7rem .85rem; transition:all .25s ease; font-family:inherit;}
.glass-input::placeholder{color:var(--muted-fg);}
.glass-input:focus{outline:none; border-color:oklch(0.88 0.19 100 / 60%);
  box-shadow:0 0 0 3px oklch(0.88 0.19 100 / 15%), 0 0 20px -4px oklch(0.88 0.19 100 / 40%);
  background:oklch(1 0 0 / 5%);}
.input-icon{position:relative;}
.input-icon svg{position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  width:1rem; height:1rem; color:oklch(0.88 0.19 100 / .7); pointer-events:none;}
.input-icon .glass-input{padding-left:2.3rem;}
select.glass-input{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23aaa' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right .9rem center;}
select.glass-input option{background:oklch(0.15 0.008 260); color:var(--fg); padding:.5rem;}

/* Botones */
.btn-liquid{position:relative; display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:var(--grad-yellow); color:var(--primary-fg); font-weight:600; font-size:.88rem;
  padding:.7rem 1.25rem; border-radius:calc(var(--radius) - 4px); border:1px solid oklch(1 0 0 / 25%);
  box-shadow:var(--shadow-yellow); cursor:pointer; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;}
.btn-liquid::before{content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, oklch(1 0 0 / 30%) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform .6s ease;}
.btn-liquid:hover{transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 0 60px -6px oklch(0.88 0.19 100 / 75%), 0 12px 32px -8px oklch(0.88 0.19 100 / 50%);}
.btn-liquid:hover::before{transform:translateX(100%);}
.btn-ghost{display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  background:oklch(1 0 0 / 4%); backdrop-filter:blur(12px); border:1px solid var(--glass-border);
  border-radius:calc(var(--radius) - 4px); color:var(--fg); font-size:.85rem; font-weight:500;
  padding:.6rem 1rem; cursor:pointer; transition:all .2s ease;}
.btn-ghost:hover{background:oklch(1 0 0 / 8%); border-color:oklch(0.88 0.19 100 / 40%); color:var(--primary);}
.btn-sm{padding:.4rem .7rem; font-size:.78rem;}
.icon-btn{display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem;
  background:oklch(1 0 0 / 4%); border:1px solid var(--glass-border); color:var(--muted-fg); cursor:pointer; transition:all .2s;}
.icon-btn:hover{color:var(--primary); border-color:oklch(0.88 0.19 100 / 40%);}
.icon-btn svg{width:.95rem; height:.95rem;}

/* Badges + estados */
.badge{display:inline-flex; align-items:center; gap:.4rem; border-radius:999px; font-size:.72rem;
  padding:.2rem .6rem; border:1px solid oklch(0.88 0.19 100 / 30%); background:oklch(0.88 0.19 100 / 10%); color:var(--primary);}
.badge.ok{border-color:oklch(0.80 0.17 150 / 35%); background:oklch(0.80 0.17 150 / 12%); color:var(--ok);}
.badge.warn{border-color:oklch(0.82 0.20 85 / 35%); background:oklch(0.82 0.20 85 / 12%); color:var(--amber);}
.badge.off{border-color:var(--glass-border); background:oklch(1 0 0 / 4%); color:var(--muted-fg);}
.dot{display:inline-block; width:.5rem; height:.5rem; border-radius:999px; background:var(--primary);
  box-shadow:0 0 12px oklch(0.88 0.19 100 / 80%);}
.dot.idle{background:oklch(0.5 0.01 260); box-shadow:none;}

/* Tablas */
.tbl-wrap{overflow:auto; border:1px solid var(--border); border-radius:calc(var(--radius) - 2px);}
table.data{width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px;}
table.data thead{background:oklch(1 0 0 / 5%); text-align:left;}
table.data th{padding:.7rem .9rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-fg); font-weight:600;}
table.data td{padding:.7rem .9rem; border-top:1px solid var(--border);}
table.data tbody tr{transition:background .15s;}
table.data tbody tr:hover{background:oklch(0.88 0.19 100 / 5%);}
.tname{font-weight:600;}

/* Paginación */
.paginacion{list-style:none; display:flex; gap:.35rem; justify-content:center; padding:0; margin:1rem 0 0;}
.pag-item a,.pag-item span{display:grid; place-items:center; min-width:2rem; height:2rem; padding:0 .5rem;
  border-radius:.55rem; border:1px solid var(--glass-border); background:oklch(1 0 0 / 3%); color:var(--muted-fg); font-size:.8rem;}
.pag-item.activo a{background:var(--grad-yellow); color:var(--primary-fg); border-color:transparent; font-weight:600;}
.pag-item.disabled span{opacity:.4;}

/* Layout de página interna */
.page-head{display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.4rem;}
.page-head h1{font-size:2rem; margin-top:.15rem;}
.grid{display:grid; gap:1.1rem;}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.split{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:1.4rem; align-items:start;}
.section-title{display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;}
.section-title .ic{display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:.7rem;
  border:1px solid oklch(0.88 0.19 100 / 30%); background:oklch(0.88 0.19 100 / 10%); color:var(--primary);}
.section-title .ic svg{width:1.15rem; height:1.15rem;}
.stat-card{padding:1.25rem;}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-ic{display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.75rem;
  border:1px solid oklch(0.88 0.19 100 / 30%); background:oklch(0.88 0.19 100 / 10%); color:var(--primary);}
.stat-ic svg{width:1.2rem; height:1.2rem;}
.stat-val{font-family:var(--font-display); font-size:2rem; font-weight:700; margin-top:.9rem;}
.stat-lbl{font-size:.75rem; color:var(--muted-fg); margin-top:.2rem;}
svg.i{width:1.1rem; height:1.1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}

/* App shell */
.app{position:relative; z-index:1; display:flex; min-height:100vh;}
.sidebar{width:250px; flex-shrink:0; padding:1.1rem; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; background:#000; border:1px solid oklch(1 0 0 / 10%);
  box-shadow:var(--shadow-glass);}
.sidebar .brand small, .sidebar .sep{color:var(--muted-fg); opacity:.9;}
.sidebar .btn-ghost{color:var(--fg);}
.brand{display:flex; align-items:center; gap:.7rem; padding:.4rem .3rem 1.4rem;}
.brand .logo{display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.7rem;
  background:var(--grad-yellow); box-shadow:var(--shadow-yellow); color:var(--primary-fg);}
.brand .logo svg{width:1.2rem; height:1.2rem;}
.brand b{font-family:var(--font-display); font-size:1.15rem; display:block; line-height:1;}
.brand small{font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; color:var(--muted-fg);}
.nav{display:flex; flex-direction:column; gap:.15rem; overflow:auto;}
.nav a{display:flex; align-items:center; gap:.75rem; padding:.6rem .7rem; border-radius:.7rem;
  font-size:.85rem; color:#fff; transition:all .18s; border:1px solid transparent;}
.nav a svg{width:1.05rem; height:1.05rem;}
.nav a:hover{background:oklch(1 0 0 / 12%); color:#fff;}
.nav a.active{background:var(--grad-yellow); border-color:oklch(0.88 0.19 100 / 40%);
  color:var(--primary-fg); box-shadow:0 0 24px -6px oklch(0.88 0.19 100 / 50%);}
.nav a.active .dot{margin-left:auto;}
.nav .sep{font-size:.6rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-fg);
  padding:.9rem .7rem .3rem; opacity:.7;}
.side-foot{margin-top:auto; display:flex; flex-direction:column; gap:.7rem;}
.mini-stat{padding:.9rem;}
.mini-bar{height:.4rem; border-radius:999px; background:oklch(1 0 0 / 6%); overflow:hidden; margin-top:.5rem;}
.mini-bar > i{display:block; height:100%; background:var(--grad-yellow); border-radius:999px;}

.main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:1rem;
  padding:.9rem 1.5rem; backdrop-filter:blur(16px); background:oklch(0.13 0.005 260 / 55%);
  border-bottom:1px solid var(--border);}
.topbar .search{flex:1; max-width:420px;}
.topbar .spacer{flex:1;}
.avatar{display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:999px;
  background:var(--grad-yellow); color:var(--primary-fg); font-weight:700; font-size:.85rem;}
.hamb{display:none;}
.content{padding:1.6rem; flex:1;}

/* Vista pública / login (overlay) */
.overlay{position:fixed; inset:0; z-index:50; display:none; overflow:auto;}
.overlay.show{display:block;}
.center-screen{min-height:100vh; display:grid; place-items:center; padding:1.5rem; position:relative;}
.auth-card{width:100%; max-width:420px; padding:2.2rem; position:relative; z-index:2;}
.sphere{position:absolute; border-radius:50%; border:1px solid oklch(1 0 0 / 10%); pointer-events:none;}

/* Vista previa certificado */
.cert-frame{position:relative; border-radius:calc(var(--radius) + 8px); padding:1px;
  background:linear-gradient(135deg, oklch(0.88 0.19 100 / 60%), oklch(1 0 0 / 10%) 30%, oklch(0.88 0.19 100 / 40%) 70%, oklch(1 0 0 / 5%));}
.cert-inner{border-radius:calc(var(--radius) + 7px); background:oklch(0.15 0.008 260); padding:2rem; text-align:center;}
.cert-inner .seal{width:4rem; height:4rem; margin:0 auto 1rem; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-yellow); color:var(--primary-fg); box-shadow:var(--shadow-yellow);}
.qr-box{width:110px; height:110px; border-radius:.6rem; background:#fff; padding:8px; display:grid; place-items:center;}
.qr-box svg{width:100%; height:100%;}

/* Toggle permisos */
.perm{display:flex; align-items:center; justify-content:space-between; padding:.7rem .85rem;
  border:1px solid var(--glass-border); border-radius:.7rem; background:oklch(1 0 0 / 3%); margin-bottom:.55rem;}
.switch{width:2.6rem; height:1.5rem; border-radius:999px; background:oklch(1 0 0 / 10%); position:relative; cursor:pointer; transition:.2s; border:1px solid var(--glass-border);}
.switch::after{content:""; position:absolute; top:2px; left:2px; width:1.1rem; height:1.1rem; border-radius:50%; background:var(--muted-fg); transition:.2s;}
.switch.on{background:var(--grad-yellow);}
.switch.on::after{left:calc(100% - 1.2rem); background:var(--primary-fg);}

/* Barras dashboard */
.bars{display:flex; align-items:flex-end; gap:.5rem; height:150px; margin-top:1.3rem;}
.bars .b{flex:1; display:flex; flex-direction:column; align-items:center; gap:.4rem;}
.bars .b i{width:100%; border-radius:.4rem .4rem 0 0; background:var(--grad-yellow);
  box-shadow:0 0 20px -6px oklch(0.88 0.19 100 / 60%);}
.bars .b span{font-size:.62rem; color:var(--muted-fg);}

.tabs{display:flex; gap:.4rem; border-bottom:1px solid var(--border); margin-bottom:1.2rem; flex-wrap:wrap;}
.tabs button{background:none; border:none; color:var(--muted-fg); padding:.6rem .9rem; cursor:pointer;
  font-size:.85rem; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs button.active{color:var(--primary); border-bottom-color:var(--primary);}

.help{font-size:.75rem; color:var(--muted-fg); margin-top:.35rem;}
.row-flex{display:flex; gap:.7rem; flex-wrap:wrap; align-items:center;}
hr.soft{border:none; border-top:1px solid var(--border); margin:1.2rem 0;}

/* Responsivo */
@media(max-width:1024px){ .split{grid-template-columns:1fr;} .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:1fr;} }
@media(max-width:768px){
  .sidebar{position:fixed; z-index:40; transform:translateX(-110%); transition:.25s; background:#000; box-shadow:var(--shadow-glass);}
  .sidebar.open{transform:none;}
  .hamb{display:inline-grid;}
  .g-4,.g-2{grid-template-columns:1fr;}
  .page-head h1{font-size:1.6rem;}
}
[data-view]{display:none;} [data-view].active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
/* --- Foto de alumno --- */
.foto-preview{width:8rem;height:8rem;border-radius:1rem;margin:0 auto;
  background:oklch(1 0 0 / 4%) center/cover no-repeat;
  border:1px dashed var(--glass-border); display:grid; place-items:center;
  color:var(--muted-fg); font-size:.72rem;}
.foto-preview::after{content:"Sin foto";}
.foto-preview[style*="url"]::after{content:"";}
.thumb{width:2.4rem;height:2.4rem;border-radius:.6rem; background:var(--grad-yellow) center/cover no-repeat;
  display:grid; place-items:center; color:var(--primary-fg); font-weight:700; font-size:.85rem;}

/* ── Modal de alumnos ── */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:oklch(0 0 0 / 60%);backdrop-filter:blur(6px);animation:fade .2s ease;}
.modal-glass{width:min(640px,92vw);max-height:80vh;background:var(--card);border:1px solid var(--glass-border);
  border-radius:var(--radius);box-shadow:var(--shadow-glass);display:flex;flex-direction:column;overflow:hidden;}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;
  border-bottom:1px solid var(--border);}
.modal-head h3{font-size:1.05rem;}
.modal-body{padding:1rem 1.4rem 1.4rem;overflow-y:auto;}
.modal-body .data td{cursor:pointer;transition:background .15s;}
.modal-body .data tr.fila-alumno:hover{background:oklch(1 0 0 / 6%);}
.modal-body .data tr.fila-alumno:hover td{color:var(--primary);}