@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --blue:#0066FF;
  --purple:#8B00FF;
  --pink:#FF1493;
  --dark:#111827;
  --gray:#6b7280;
  --border:#e5e7eb;
  --bg:#f9fafb;
  --green:#22c55e;
  --yellow:#f59e0b;
  --red:#ef4444;
  --gold:#f59e0b;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  overflow-x:hidden;
}

body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  color:var(--dark);
  overflow-x:hidden;
  max-width:100vw;
}

a{
  text-decoration:none;
  color:inherit;
}

/* ─────────────────────────────
   Botones y formularios
───────────────────────────── */

.btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.5rem 1.1rem;
  border-radius:999px;
  font-family:inherit;
  font-weight:800;
  font-size:.85rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .15s;
  white-space:nowrap;
  background:var(--border);
  color:var(--gray);
}

.btn-primary{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  box-shadow:0 3px 10px rgba(0,102,255,.3);
}

.btn-primary:hover{
  transform:translateY(-2px);
}

.btn-accent{
  background:linear-gradient(135deg,var(--purple),var(--pink));
  color:#fff;
}

.btn-danger{
  background:#fee2e2;
  color:var(--red);
}

.btn-green{
  background:#dcfce7;
  color:#166534;
}

.btn-sm{
  padding:.3rem .8rem;
  font-size:.78rem;
}

.btn-lg{
  padding:.7rem 2rem;
  font-size:1rem;
}

.btn-full{
  width:100%;
  justify-content:center;
}

.inp{
  width:100%;
  padding:.55rem .85rem;
  border:2px solid var(--border);
  border-radius:10px;
  font-family:inherit;
  font-size:.9rem;
  font-weight:600;
  transition:border .15s;
  background:#fff;
  color:var(--dark);
}

.inp:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,102,255,.1);
}

.inp-sm{
  width:auto;
}

textarea.inp{
  resize:vertical;
  min-height:70px;
}

.fg{
  margin-bottom:.9rem;
}

.fg label{
  display:block;
  margin-bottom:.3rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--gray);
}

.fg-check{
  margin-bottom:.9rem;
  display:flex;
  align-items:center;
  gap:.5rem;
}

.fg-check label{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-weight:700;
  cursor:pointer;
}

.form-card{
  background:#fff;
  border-radius:16px;
  padding:2rem;
  max-width:640px;
  box-shadow:0 4px 20px rgba(0,0,0,.07);
}

.form-wide{
  max-width:820px;
}

.clasificacion-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
}

.opciones-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}

/* ── Toolbar de negritas/subrayado (editor de texto enriquecido) ─── */
.rt-toolbar{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin-bottom:.35rem;
}

.rt-btn{
  width:28px;
  height:28px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:.8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--dark);
  transition:background .12s;
}

.rt-btn:hover{
  background:#f3f4f6;
}

.rt-hint{
  color:var(--gray);
  font-size:.7rem;
}

.rt-editable{
  white-space:pre-wrap;
  word-wrap:break-word;
  cursor:text;
  outline:none;
}

.rt-editable:focus{
  border-color:var(--blue, #2563eb);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

.rt-editable-inline{
  min-height:2.2em;
}

.rt-editable:empty::before{
  content:attr(data-placeholder);
  color:var(--gray);
}

.form-actions{
  display:flex;
  gap:.75rem;
  margin-top:1.25rem;
  flex-wrap:wrap;
}

.checks{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

.checks label{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-weight:700;
  cursor:pointer;
}

.opcion-box{
  background:var(--bg);
  border:2px solid var(--border);
  border-radius:12px;
  padding:1rem;
}

.letra-badge{
  width:2rem;
  height:2rem;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:.9rem;
  flex-shrink:0;
}

.row-g{
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap;
}

/* ─────────────────────────────
   Layout Admin
───────────────────────────── */

.layout-admin{
  display:flex;
  min-height:100vh;
}

.layout-admin .sidebar{
  width:260px;
  background:var(--dark);
  color:#fff;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  overflow-y:auto;
  padding:.75rem .5rem;
  z-index:100;
}

.layout-admin .sidebar .brand{
  font-size:1.05rem;
  font-weight:900;
  padding:.75rem .5rem 1rem;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.layout-admin .sidebar a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.55rem .75rem;
  border-radius:8px;
  color:rgba(255,255,255,.7);
  font-weight:700;
  font-size:.87rem;
  margin-bottom:2px;
  transition:all .15s;
}

.layout-admin .sidebar a:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}

.layout-admin .sidebar a.danger:hover{
  background:rgba(239,68,68,.2);
  color:var(--red);
}

.nav-label{
  font-size:.7rem;
  font-weight:800;
  color:rgba(255,255,255,.3);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.75rem .75rem .2rem;
}

.main{
  flex:1;
  min-width:0;
  margin-left:220px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

.layout-admin .main{
  margin-left:260px;
}

.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:.8rem 1.5rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:sticky;
  top:0;
  z-index:50;
}

.page-title{
  font-weight:900;
  font-size:1rem;
}

.user-info{
  font-size:.85rem;
  font-weight:700;
  color:var(--gray);
}

.content{
  padding:1.5rem;
}

/* ─────────────────────────────
   Mensajes
───────────────────────────── */

.msgs{
  padding:.5rem 1.5rem;
}

.msg{
  padding:.65rem 1rem;
  border-radius:8px;
  font-weight:700;
  margin-bottom:.4rem;
  font-size:.88rem;
  transition:opacity .5s;
}

.msg-success{
  background:#dcfce7;
  color:#166534;
  border-left:4px solid var(--green);
}

.msg-danger,
.msg-error{
  background:#fee2e2;
  color:#991b1b;
  border-left:4px solid var(--red);
}

.msg-info{
  background:#dbeafe;
  color:#1e40af;
  border-left:4px solid var(--blue);
}

.mt{
  margin-top:1rem;
}

/* ─────────────────────────────
   Cards, tablas y badges
───────────────────────────── */

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.75rem;
  margin-bottom:1.25rem;
}

.stat{
  background:#fff;
  border-radius:12px;
  padding:1.25rem 1rem;
  text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

.sn{
  display:block;
  font-size:1.8rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sn.ok{
  background:var(--green);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sn.err{
  background:var(--red);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.sl{
  font-size:.78rem;
  font-weight:700;
  color:var(--gray);
}

.card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  overflow-x:auto;
}

.card-hd{
  padding:.85rem 1.25rem;
  font-weight:800;
  border-bottom:1px solid var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.tbl{
  width:100%;
  border-collapse:collapse;
  font-size:.87rem;
}

.tbl thead th{
  background:linear-gradient(135deg,var(--dark),#374151);
  color:#fff;
  padding:.7rem 1rem;
  font-weight:800;
  text-align:left;
}

.tbl tbody tr:hover{
  background:rgba(0,102,255,.03);
}

.tbl tbody td{
  padding:.65rem 1rem;
  border-bottom:1px solid var(--border);
  font-weight:600;
}

.actions{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}

.empty{
  text-align:center;
  padding:1.5rem;
  color:var(--gray);
  font-weight:700;
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1rem;
  flex-wrap:wrap;
  gap:.75rem;
}

.badge{
  display:inline-flex;
  padding:.2em .65em;
  border-radius:999px;
  font-size:.73rem;
  font-weight:800;
}

.badge.green{
  background:#dcfce7;
  color:#166534;
}

.badge.red{
  background:#fee2e2;
  color:#991b1b;
}

.badge.blue{
  background:#dbeafe;
  color:#1e40af;
}

.badge.gray{
  background:#f3f4f6;
  color:#374151;
}

.badge.gold{
  background:#fef3c7;
  color:#92400e;
}

/* ─────────────────────────────
   Login
───────────────────────────── */

.login-page{
  background:
    radial-gradient(circle at 18% 15%, rgba(56,189,248,.28), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(250,204,21,.22), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(14,165,233,.18), transparent 50%),
    #050a10;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
  position:relative;
  overflow:hidden;
}

.login-star{
  position:absolute;
  border-radius:50%;
  background:#fff;
  opacity:.5;
  animation:loginTwinkle 3.2s ease-in-out infinite;
}

@keyframes loginTwinkle{
  0%,100%{opacity:.2}
  50%{opacity:.75}
}

.login-box{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;
  padding:2.6rem 2.3rem;
  width:100%;
  max-width:380px;
  backdrop-filter:blur(14px);
  box-shadow:
    0 25px 60px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.login-box h1{
  text-align:center;
  color:#fff;
  font-size:1.6rem;
  font-weight:900;
  margin:.5rem 0 .25rem;
}

.login-box p{
  text-align:center;
  color:rgba(255,255,255,.4);
  font-size:.85rem;
  margin-bottom:1.5rem;
  font-weight:600;
}

.login-logo-wrap{
  position:relative;
  width:130px;
  height:130px;
  margin:0 auto 1.1rem;
}

.login-logo{
  width:130px;
  height:130px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:radial-gradient(circle at 32% 26%, #fef9c3, #38bdf8 55%, #0c4a6e 100%);
  box-shadow:
    inset -10px -12px 22px rgba(0,0,0,.4),
    inset 4px 4px 14px rgba(255,255,255,.32),
    0 0 45px rgba(250,204,21,.4),
    0 20px 40px rgba(0,0,0,.5);
  animation:loginOrbFloat 5s ease-in-out infinite;
}

.login-logo-emoji{
  font-size:4.7rem;
  filter:grayscale(1) sepia(1) saturate(7) hue-rotate(175deg) brightness(1.15) drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

.login-logo-text{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-family:Arial, Helvetica, sans-serif;
  font-weight:900;
  font-size:1.6rem;
  color:#ec4899;
  -webkit-text-stroke:3px #fff;
  paint-order:stroke;
  letter-spacing:1px;
}

@keyframes loginOrbFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

.login-logo-sparkle{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.75);
  box-shadow:0 0 6px rgba(255,255,255,.6);
  animation:loginTwinkle 2.6s ease-in-out infinite;
}

.login-box .inp{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
  color:#fff;
  margin-bottom:.75rem;
  transition:border-color .15s, background .15s;
}

.login-box .inp:focus{
  background:rgba(255,255,255,.11);
  border-color:#38bdf8;
  outline:none;
}

.login-box .inp::placeholder{
  color:rgba(255,255,255,.3);
}

.login-box .btn-primary{
  background:linear-gradient(135deg,#0284c7,#eab308);
  box-shadow:0 10px 26px rgba(56,189,248,.3);
  font-weight:900;
  letter-spacing:.01em;
}

.login-box .inp:focus{
  border-color:var(--blue);
}

/* ─────────────────────────────
   Layout Estudiante
───────────────────────────── */

.layout-est{
  background:#050505;
  display:flex;
  min-height:100vh;
}

.layout-est .main{
  margin-left:236px;
  background:transparent;
  position:relative;
}

.layout-est .content{
  padding:2rem 2.5rem;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  padding-bottom:5rem;
}

/* ─────────────────────────────
   Sidebar Estudiante
───────────────────────────── */

.layout-est .sidebar{
  width:236px;
  min-height:100vh;
  padding:1.1rem 1rem;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 34%),
    linear-gradient(180deg, #111827 0%, #0b1220 100%);
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:12px 0 35px rgba(0,0,0,.35);
  position:fixed;
  left:0;
  top:0;
  z-index:20;
  overflow:hidden;
}

.layout-est .sidebar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 30px 70px, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 180px 150px, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 90px 300px, rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 200px 520px, rgba(255,255,255,.18), transparent);
  background-size:240px 420px;
  opacity:.8;
}

.layout-est .brand{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:1.25rem;
  color:#fff;
  font-size:1.15rem;
  font-weight:1000;
  letter-spacing:.02em;
}

.layout-est .brand-logo,
.layout-est .brand img{
  width:34px;
  height:34px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.12),
    0 0 18px rgba(59,130,246,.45);
}

.layout-est .brand span{
  background:linear-gradient(90deg,#60a5fa,#7c3aed,#a855f7);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:none;
}

.layout-est .area-pill{
  position:relative;
  z-index:1;
  margin:.4rem 0 1.25rem;
  padding:.9rem .8rem;
  border-radius:18px;
  text-align:center;
  color:#fff;
  font-size:.78rem;
  line-height:1.25;
  font-weight:1000;
  background:
    linear-gradient(135deg, #2563eb 0%, #7c3aed 55%, #a21caf 100%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:
    0 12px 28px rgba(37,99,235,.25),
    inset 0 1px 0 rgba(255,255,255,.22);
  overflow:hidden;
}

.layout-est .area-pill::after{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  right:-30px;
  top:-35px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  filter:blur(2px);
}

.layout-est .sidebar-menu{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}

.layout-est .sidebar-menu a{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.78rem .8rem;
  border-radius:15px;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:.88rem;
  font-weight:900;
  transition:
    transform .15s ease,
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.layout-est .sidebar-menu a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  transform:translateX(4px);
  box-shadow:inset 3px 0 0 #60a5fa;
}

.layout-est .sidebar-menu a.active{
  color:#fff;
  background:linear-gradient(135deg, rgba(37,99,235,.26), rgba(124,58,237,.18));
  box-shadow:
    inset 3px 0 0 #60a5fa,
    0 8px 20px rgba(37,99,235,.16);
}

.layout-est .sidebar-menu a:last-child{
  margin-top:.4rem;
  color:rgba(255,255,255,.65);
}

.layout-est .sidebar-menu a:last-child:hover{
  color:#fecaca;
  background:rgba(239,68,68,.12);
  box-shadow:inset 3px 0 0 #ef4444;
}

/* ─────────────────────────────
   Barra móvil estudiante
───────────────────────────── */

.layout-est .mobile-bar{
  display:none;
}

/* ─────────────────────────────
   Componentes antiguos estudiante
───────────────────────────── */

.est-header{
  margin-bottom:1.5rem;
}

.est-header h1{
  font-size:1.5rem;
  font-weight:900;
  color:#fff;
}

.est-header p,
.est-header a{
  color:rgba(255,255,255,.5);
  font-size:.9rem;
  margin-top:.2rem;
}

.mat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:1rem;
}

.mat-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:1.25rem;
  cursor:pointer;
  transition:all .2s;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

.mat-card:hover{
  background:rgba(255,255,255,.1);
  transform:translateY(-3px);
  border-color:rgba(0,102,255,.4);
}

.mat-nombre{
  font-weight:900;
  color:#fff;
  font-size:.95rem;
}

.prog-bar-wrap{
  background:rgba(255,255,255,.1);
  border-radius:999px;
  height:6px;
  overflow:hidden;
}

.prog-bar{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  border-radius:999px;
  transition:width .5s;
}

.prog-txt{
  font-size:.78rem;
  color:rgba(255,255,255,.4);
  font-weight:700;
}

.path{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.25rem;
  padding-bottom:2rem;
}

.path-node{
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  max-width:460px;
  padding:.75rem 1rem;
}

.path-node:nth-child(even){
  flex-direction:row-reverse;
}

.node-circle{
  width:58px;
  height:58px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  font-weight:900;
  flex-shrink:0;
  transition:all .2s;
  border:3px solid transparent;
}

.node-libre .node-circle,
.node-progreso .node-circle{
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  box-shadow:0 4px 16px rgba(0,102,255,.4);
  cursor:pointer;
}

.node-libre .node-circle:hover{
  transform:scale(1.08);
}

.node-aprobado .node-circle{
  background:var(--green);
  color:#fff;
}

.node-platinado .node-circle{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
}

.node-reprobado .node-circle{
  background:rgba(239,68,68,.15);
  color:var(--red);
  border-color:var(--red);
}

.node-bloqueado .node-circle{
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.25);
  cursor:not-allowed;
}

.node-info{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.node-titulo{
  font-size:.9rem;
  font-weight:800;
  color:#fff;
}

.node-dif{
  font-size:.75rem;
  font-weight:700;
}

.node-cal{
  font-size:.8rem;
  font-weight:900;
  color:rgba(255,255,255,.5);
}

/* ─────────────────────────────
   Preguntas / Quiz
───────────────────────────── */

.preg-block{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:1.25rem;
  margin-bottom:.85rem;
}

.preg-num{
  font-size:.78rem;
  font-weight:800;
  color:rgba(0,102,255,.8);
  margin-bottom:.4rem;
}

.preg-texto{
  font-size:.95rem;
  font-weight:700;
  color:#fff;
  line-height:1.6;
  margin-bottom:.9rem;
}

.opciones{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}

.opcion{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem .85rem;
  border-radius:10px;
  border:2px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:all .15s;
  color:rgba(255,255,255,.8);
  font-weight:700;
  font-size:.88rem;
}

.opcion:hover{
  border-color:var(--blue);
  background:rgba(0,102,255,.1);
}

.opcion input{
  accent-color:var(--blue);
}

.nivel-actions{
  margin-top:1.5rem;
  display:flex;
  justify-content:center;
}

.resultado-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:2rem;
  text-align:center;
  margin-bottom:1.5rem;
}

.res-estado{
  font-size:1.4rem;
  font-weight:900;
  margin-bottom:.4rem;
}

.estado-platinado{
  color:var(--gold);
}

.estado-aprobado{
  color:var(--green);
}

.estado-reprobado{
  color:var(--red);
}

.res-cal{
  font-size:3.5rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1;
}

.res-det{
  display:flex;
  justify-content:center;
  gap:1.5rem;
  margin:1rem 0;
  font-weight:800;
}

.ok{
  color:var(--green);
}

.err{
  color:var(--red);
}

.res-actions{
  display:flex;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:1rem;
}

.resp-item{
  padding:1rem 1.25rem;
  border-bottom:1px solid #1f2937;
  font-size:.88rem;
}

.resp-ok{
  background:rgba(34,197,94,.04);
}

.resp-err{
  background:rgba(239,68,68,.04);
}

.resp-preg{
  font-weight:700;
  color:#fff;
  margin-bottom:.3rem;
}

.resp-elegida,
.resp-correcta{
  font-size:.83rem;
  font-weight:600;
  color:rgba(255,255,255,.6);
}

.resp-correcta{
  color:var(--green);
}

.resp-exp{
  font-size:.8rem;
  color:rgba(255,255,255,.4);
  margin-top:.3rem;
  font-style:italic;
}

/* ─────────────────────────────
   Menú Wii
───────────────────────────── */

.menu-toggle{
  display:none;
}

.wii-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  padding:.75rem .5rem;
}

.wii-tile{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.3rem;
  padding:.75rem .5rem;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:all .15s;
  text-decoration:none;
}

.wii-badge{
  position:absolute;
  top:-.4rem;
  right:-.4rem;
  background:#ef4444;
  color:#fff;
  font-size:.68rem;
  font-weight:900;
  min-width:1.3rem;
  height:1.3rem;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 .3rem;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
  z-index:1;
}

.wii-group{
  grid-column:1 / -1;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
}
.wii-group summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.6rem .7rem;
  color:rgba(255,255,255,.85);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.wii-group summary::-webkit-details-marker{display:none}
.wii-group .wii-chev{
  margin-left:auto;
  font-size:.7rem;
  color:rgba(255,255,255,.4);
  transition:transform .18s;
}
.wii-group[open] .wii-chev{transform:rotate(90deg)}
.wii-group-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  padding:0 .5rem .6rem;
}

.wii-tile:hover{
  background:rgba(255,255,255,.15);
  transform:scale(1.05);
  border-color:rgba(0,102,255,.5);
}

.wii-tile--danger{
  margin:.5rem;
  width:calc(100% - 1rem);
}

.wii-tile--danger:hover{
  background:rgba(239,68,68,.2);
  border-color:var(--red);
}

.wii-icon{
  font-size:1.6rem;
  line-height:1;
}

.wii-label{
  font-size:.7rem;
  font-weight:800;
  color:rgba(255,255,255,.7);
  text-align:center;
}

/* ─────────────────────────────
   Responsive Admin
───────────────────────────── */

@media(max-width:768px){
  .layout-admin .sidebar{
    transform:translateX(-100%);
    width:240px;
    height:100vh;
    height:100dvh; /* evita que la barra de direcciones del navegador
                       móvil recorte el alto real disponible */
    position:fixed;
    flex-direction:column;
    -webkit-overflow-scrolling:touch;
    /* padding-top de sobra para que el botón ☰ (fixed, top:.75rem) no
       tape el logo cuando el sidebar está abierto. Abajo, espacio extra
       + el "notch"/gesture bar del teléfono, para que "Salir" nunca
       quede pegado al borde inalcanzable. */
    padding:3.75rem .5rem calc(1.5rem + env(safe-area-inset-bottom));
  }

  .layout-admin .sidebar.open{
    transform:translateX(0);
  }

  .layout-admin .main{
    margin-left:0;
    padding-top:3.5rem;
  }

  .menu-toggle{
    display:block;
    position:fixed;
    top:.75rem;
    left:.75rem;
    z-index:200;
    background:var(--dark);
    color:#fff;
    border:none;
    border-radius:8px;
    padding:.5rem .75rem;
    font-size:1.2rem;
    cursor:pointer;
  }

  .mat-grid{
    grid-template-columns:1fr 1fr;
  }

  .stat-row{
    grid-template-columns:1fr 1fr;
  }

  .form-wide,
  .form-card{
    max-width:100%;
  }

  .clasificacion-grid,
  .opciones-grid{
    grid-template-columns:1fr;
  }

  .content{
    padding:1rem;
  }

  .toolbar{
    flex-direction:column;
    align-items:stretch;
  }

  /* auto-fit en vez de un número fijo de columnas: si una etiqueta no
     cabe en su celda, la categoría completa se va a la siguiente fila
     en vez de recortarse. */
  .wii-menu{
    grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
    gap:.35rem;
  }

  .wii-group-body{
    grid-template-columns:repeat(auto-fit, minmax(92px, 1fr));
    gap:.35rem;
  }

  .wii-icon{
    font-size:1.2rem;
  }

  .wii-label{
    font-size:.6rem;
  }
}

/* ─────────────────────────────
   Responsive Estudiante
───────────────────────────── */

@media(max-width:760px){
  .layout-est .sidebar{
    display:none;
  }

  .layout-est .main{
    margin-left:0;
    padding-bottom:80px;
  }

  .layout-est .content{
    padding:1rem;
    padding-bottom:5rem;
  }

  .layout-est .mobile-bar{
    display:flex;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:70px;
    z-index:100;
    justify-content:space-around;
    align-items:center;
    padding:.5rem .6rem;
    background:
      radial-gradient(circle at top, rgba(37,99,235,.16), transparent 45%),
      #111827;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -10px 30px rgba(0,0,0,.35);
  }

  .layout-est .mobile-bar a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.15rem;
    min-width:64px;
    padding:.45rem .5rem;
    border-radius:14px;
    color:rgba(255,255,255,.62);
    font-size:1rem;
    font-weight:900;
  }

  .layout-est .mobile-bar a small{
    font-size:.65rem;
    font-weight:900;
  }

  .layout-est .mobile-bar a.active{
    color:#fff;
    background:linear-gradient(135deg, rgba(37,99,235,.28), rgba(124,58,237,.22));
    box-shadow:0 8px 18px rgba(37,99,235,.2);
  }
}

/* ─────────────────────────────
   Panel de lectura (comprensión de lectura)
   Escritorio (>=900px): columna fija a la derecha, siempre visible.
   Móvil (<900px): botón flotante que abre un panel a pantalla completa.
───────────────────────────── */
.preg-slide-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:1.5rem;
}

.preg-slide-row > .preg-block,
.preg-slide-row > .preg-preview-card{
  flex:1;
  min-width:0;
}

.preg-slide-row > .phone-frame{
  /* Sin flex-grow a propósito: .phone-frame ya trae su propio max-width
     (ver preg_preview_online.html / preg_preview_flashcard.html). Si
     tuviera flex:1 igual que los demás, el motor de flexbox le reserva
     espacio de sobra ANTES de aplicarle el max-width. Además, un item de
     flex con margin:auto absorbe TODO el espacio libre de la fila en sus
     propios márgenes (pasa incluso sin flex-grow) — por eso se anula
     aquí ese margin:auto y el centrado real lo hace justify-content en
     .preg-slide-row, dejando el hueco donde debe estar: repartido a los
     lados del conjunto tarjeta+lectura, no entre ellos. */
  flex:0 1 auto;
  min-width:0;
  margin:0;
}

.lectura-fab{
  display:none;
}

.lectura-panel{
  display:block;
  background:#12121a;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  color:#e5e7eb;
}

.lectura-panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.9rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.1);
}

.lectura-panel-header h3{
  margin:0;
  font-size:.95rem;
  font-weight:900;
  color:#fff;
  line-height:1.3;
}

.lectura-panel-close{
  background:rgba(255,255,255,.1);
  border:none;
  color:#fff;
  width:28px;
  height:28px;
  border-radius:8px;
  cursor:pointer;
  font-size:.9rem;
  flex-shrink:0;
}

.lectura-panel-body{
  padding:1rem 1.1rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.lectura-panel-img{
  max-width:100%;
  border-radius:8px;
  margin-bottom:.75rem;
}

.lectura-panel-texto{
  font-size:.88rem;
  line-height:1.65;
  color:rgba(255,255,255,.82);
  white-space:pre-wrap;
}

@media(min-width:900px){
  .lectura-panel{
    flex:0 0 440px;
    position:sticky;
    top:1.5rem;
    max-height:calc(100vh - 3rem);
  }
  .lectura-panel-body{
    max-height:calc(100vh - 8rem);
  }
}

@media(max-width:899px){
  .preg-slide-row{
    display:block;
  }

  .lectura-fab{
    display:flex;
    align-items:center;
    gap:.4rem;
    position:fixed;
    right:1rem;
    bottom:86px;
    z-index:55;
    background:linear-gradient(135deg,var(--blue,#2563eb),var(--purple,#7c3aed));
    color:#fff;
    border:none;
    border-radius:999px;
    padding:.7rem 1rem;
    font-size:.82rem;
    font-weight:800;
    box-shadow:0 8px 20px rgba(37,99,235,.35);
    cursor:pointer;
  }

  .lectura-panel{
    position:fixed;
    inset:0;
    z-index:60;
    border-radius:0;
    display:flex;
    flex-direction:column;
    background:#0b0b0f;
    transform:translateY(100%);
    transition:transform .28s ease;
    pointer-events:none;
  }

  .lectura-panel.abierto{
    transform:translateY(0);
    pointer-events:auto;
  }

  .lectura-panel-body{
    flex:1;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));
  }
}