/* =========================================================
   Paleta "brasa": carbón cálido, caoba y ceniza
   ========================================================= */
:root {
  --carbon: #1f1714;
  --carbon-2: #2e211b;
  --caoba: #8e3b1f;
  --brasa: #e0662a;
  --brasa-2: #f29b52;
  --ceniza: #f3ebe3;
  --humo: rgba(243, 235, 227, .68);
  --vidrio: rgba(255, 244, 234, .07);
  --vidrio-borde: rgba(255, 230, 210, .16);
  --ok: #5fb37f;
  --mid: #e0a93c;
  --bad: #e25b4b;
  --radio: 20px;
  --fuente: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fuente-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}

html { scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px)); }

body {
  min-height: 100vh;
  font-family: var(--fuente);
  color: var(--ceniza);
  background:
    radial-gradient(1200px 700px at 85% -10%, #4a2416 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%, #3a1b12 0%, transparent 55%),
    linear-gradient(180deg, var(--carbon-2), var(--carbon));
  background-attachment: fixed;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-x: hidden;
  color-scheme: dark;
}

/* Brasas de fondo (blobs animados, liquid glass) */
.brasas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.brasas span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45;
  animation: flotar 22s ease-in-out infinite alternate;
}
.brasas span:nth-child(1) { width: 420px; height: 420px; background: #b8461f; top: -120px; right: -80px; }
.brasas span:nth-child(2) { width: 340px; height: 340px; background: #7a2a14; bottom: -100px; left: -60px; animation-duration: 28s; }
.brasas span:nth-child(3) { width: 220px; height: 220px; background: #e07a2f; top: 45%; left: 55%; opacity: .22; animation-duration: 34s; }
@keyframes flotar { to { transform: translate(-40px, 50px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .brasas span { animation: none; } }

/* Vidrio */
.glass {
  background: var(--vidrio);
  border: 1px solid var(--vidrio-borde);
  border-radius: var(--radio);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 20px 50px -25px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.shell { max-width: 620px; margin: 0 auto; padding: calc(2.5rem + env(safe-area-inset-top, 0px)) 1rem 3rem; }
.shell-ancho { max-width: 760px; padding-top: 1.5rem; }

.h-display {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
}
.lead-soft { color: var(--humo); font-size: 1.1rem; margin: .75rem 0 0; }
.text-soft { color: var(--humo) !important; }

/* Portada */
.portada { padding: 2.25rem 1.5rem; }
@media (min-width: 576px) { .portada { padding: 3rem; } }
.portada-marca { color: var(--brasa); margin-bottom: 1rem; }
.reglas { list-style: none; padding: 0; margin: 1.75rem 0 1.5rem; display: grid; gap: .55rem; color: var(--humo); }
.reglas li { display: flex; gap: .6rem; align-items: baseline; }
.reglas i { color: var(--brasa-2); }
.pie { text-align: center; margin-top: 1.5rem; color: var(--humo); font-size: .92rem; }
.pie a { color: var(--brasa-2); }

/* Formularios */
.form-label { color: var(--humo); font-weight: 500; margin-bottom: .35rem; }
.form-control, .form-select {
  background-color: rgba(0, 0, 0, .25);
  border: 1px solid var(--vidrio-borde);
  color: var(--ceniza);
  border-radius: 12px;
}
.form-control::placeholder { color: rgba(243, 235, 227, .38); }
.form-control:focus, .form-select:focus {
  background-color: rgba(0, 0, 0, .35);
  color: var(--ceniza);
  border-color: var(--brasa);
  box-shadow: 0 0 0 .2rem rgba(224, 102, 42, .25);
}
.form-control:disabled { background-color: rgba(0, 0, 0, .15); color: var(--humo); }
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3ebe3' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-select option { color: #222; }

/* Botones */
.btn-brasa {
  --bs-btn-color: #fff;
  background: linear-gradient(135deg, var(--brasa), var(--caoba));
  border: 0; color: #fff; font-weight: 600; border-radius: 12px;
  box-shadow: 0 10px 25px -12px rgba(224, 102, 42, .8);
}
.btn-brasa:hover, .btn-brasa:focus-visible { color: #fff; filter: brightness(1.08); }
.btn-brasa:disabled { opacity: .45; }
.btn-ghost {
  background: rgba(255, 255, 255, .06); border: 1px solid var(--vidrio-borde);
  color: var(--ceniza); border-radius: 12px;
}
.btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
:focus-visible { outline: 2px solid var(--brasa-2); outline-offset: 2px; }

/* Barra superior con termómetro */
.barra-progreso {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(31, 23, 20, .72);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vidrio-borde);
}
.barra-inner { max-width: 760px; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; gap: 1rem; }
.barra-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; flex: 0 1 34%; }
.barra-quien strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-quien span { color: var(--humo); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.termometro { flex: 1; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.termometro-fill {
  height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #7d6a5f, var(--brasa-2), var(--brasa), var(--caoba));
  background-size: 760px 100%;
  transition: width .35s ease;
}
.barra-cuenta { font-family: var(--fuente-display); font-weight: 600; font-size: 1.25rem; min-width: 3.2rem; text-align: right; }

/* Preguntas */
.pregunta { padding: 1.4rem 1.2rem; margin-bottom: 1rem; }
@media (min-width: 576px) { .pregunta { padding: 1.75rem; } }
.pregunta legend { float: left; width: 100%; padding: 0; display: flex; gap: .85rem; font-size: 1.1rem; font-weight: 600; line-height: 1.4; margin-bottom: 1rem; }
.pregunta .num {
  font-family: var(--fuente-display); font-size: 1.6rem; line-height: 1; color: var(--brasa-2);
  min-width: 1.8rem; font-weight: 700;
}
.pregunta.respondida .num { color: var(--ok); }
.pregunta.falta { border-color: rgba(226, 91, 75, .7); }

.opciones { display: grid; gap: .55rem; clear: both; }
.opcion-radio { position: absolute; opacity: 0; pointer-events: none; }
.opcion {
  display: flex; gap: .8rem; align-items: flex-start; cursor: pointer;
  padding: .8rem .95rem; border-radius: 14px;
  border: 1px solid rgba(255, 230, 210, .1);
  background: rgba(0, 0, 0, .18);
  transition: background .15s, border-color .15s;
  line-height: 1.45;
}
.opcion:hover { background: rgba(255, 255, 255, .06); }
.opcion .letra {
  flex: 0 0 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: .9rem;
  border: 1px solid var(--vidrio-borde); color: var(--humo);
}
.opcion-radio:checked + .opcion { background: rgba(224, 102, 42, .16); border-color: var(--brasa); }
.opcion-radio:checked + .opcion .letra { background: var(--brasa); border-color: var(--brasa); color: #fff; }
.opcion-radio:focus-visible + .opcion { outline: 2px solid var(--brasa-2); outline-offset: 2px; }

.envio { padding: 1.5rem; text-align: center; }
.envio p { color: var(--humo); }

/* Resultado */
.sello {
  width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 2rem;
  background: rgba(95, 179, 127, .18); color: var(--ok);
}
.resultado { margin: 2rem auto 0; }
.resultado-num { font-family: var(--fuente-display); font-weight: 700; font-size: 5.5rem; line-height: 1; }
.resultado-det { color: var(--humo); }
.resultado.ok .resultado-num { color: var(--ok); }
.resultado.mid .resultado-num { color: var(--mid); }
.resultado.bad .resultado-num { color: var(--bad); }

.glass-modal {
  background: rgba(46, 33, 27, .92); color: var(--ceniza);
  border: 1px solid var(--vidrio-borde); border-radius: var(--radio);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}

/* =========================================================
   Panel de administración
   ========================================================= */
.admin-nav {
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(31, 23, 20, .78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--vidrio-borde);
}
.admin-nav .navbar-brand { font-family: var(--fuente-display); font-weight: 700; font-size: 1.4rem; color: var(--ceniza); }
.admin-nav .navbar-brand i { color: var(--brasa); }
.admin-nav .nav-link { color: var(--humo); border-radius: 10px; padding: .45rem .8rem !important; }
.admin-nav .nav-link:hover, .admin-nav .nav-link.active { color: #fff; background: rgba(255, 255, 255, .08); }
.admin-nav .navbar-toggler { border-color: var(--vidrio-borde); }
.admin-nav .navbar-toggler-icon { filter: invert(1); }

.admin-main { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.admin-titulo { font-family: var(--fuente-display); font-weight: 700; font-size: 2rem; margin: 0; }

.metrica { padding: 1.1rem 1.25rem; height: 100%; }
.metrica .valor { font-family: var(--fuente-display); font-weight: 700; font-size: 2.3rem; line-height: 1.05; }
.metrica .etq { color: var(--humo); font-size: .9rem; }
.metrica.destacada { background: linear-gradient(135deg, rgba(224, 102, 42, .28), rgba(142, 59, 31, .22)); border-color: rgba(224, 102, 42, .4); }

.panel { padding: 1.25rem; }
.panel h2 { font-family: var(--fuente-display); font-weight: 600; font-size: 1.35rem; margin: 0 0 1rem; }

.tabla-vidrio { --bs-table-bg: transparent; --bs-table-color: var(--ceniza); --bs-table-hover-bg: rgba(255,255,255,.05); --bs-table-hover-color: #fff; --bs-table-border-color: rgba(255,230,210,.1); margin: 0; }
.tabla-vidrio th { color: var(--humo); font-weight: 500; font-size: .85rem; white-space: nowrap; }
.tabla-vidrio td { vertical-align: middle; }
.tabla-vidrio a.nombre { color: var(--ceniza); font-weight: 600; text-decoration: none; }
.tabla-vidrio a.nombre:hover { color: var(--brasa-2); }

.pill { display: inline-block; padding: .2rem .65rem; border-radius: 99px; font-weight: 600; font-size: .85rem; }
.pill.ok { background: rgba(95, 179, 127, .18); color: #8fd6a8; }
.pill.mid { background: rgba(224, 169, 60, .18); color: #f0c56d; }
.pill.bad { background: rgba(226, 91, 75, .18); color: #f38b7e; }

.barra-mini { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; min-width: 80px; }
.barra-mini > div { height: 100%; border-radius: inherit; }
.barra-mini .ok { background: var(--ok); } .barra-mini .mid { background: var(--mid); } .barra-mini .bad { background: var(--bad); }

/* Detalle por alumno */
.det-preg { padding: 1.1rem 1.2rem; margin-bottom: .75rem; border-left: 4px solid transparent; }
.det-preg.bien { border-left-color: var(--ok); }
.det-preg.mal { border-left-color: var(--bad); }
.det-op { display: flex; gap: .6rem; padding: .45rem .6rem; border-radius: 10px; color: var(--humo); font-size: .95rem; }
.det-op .letra { font-weight: 700; min-width: 1.2rem; }
.det-op.correcta { color: #9fe0b6; background: rgba(95, 179, 127, .1); }
.det-op.elegida-mal { color: #f6a197; background: rgba(226, 91, 75, .12); text-decoration: line-through; text-decoration-color: rgba(246,161,151,.5); }
.det-op .tag { margin-left: auto; font-size: .78rem; white-space: nowrap; text-decoration: none; display: inline-block; }

.dist { display: flex; height: 22px; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.06); }
.dist > span { display: grid; place-items: center; font-size: .72rem; font-weight: 600; color: #fff; min-width: 0; }
.dist .c { background: var(--ok); } .dist .i { background: rgba(226, 91, 75, .65); } .dist .n { background: rgba(255,255,255,.18); }

.page-link { background: rgba(255,255,255,.05); border-color: var(--vidrio-borde); color: var(--ceniza); }
.page-link:hover { background: rgba(255,255,255,.12); color: #fff; border-color: var(--vidrio-borde); }
.active > .page-link { background: var(--brasa); border-color: var(--brasa); }
.disabled > .page-link { background: transparent; color: var(--humo); border-color: var(--vidrio-borde); }

.alert { border-radius: 12px; }

/* Móvil: tabla → tarjetas */
@media (max-width: 767.98px) {
  .tabla-responsiva thead { display: none; }
  .tabla-responsiva tr { display: block; padding: .8rem 0; border-bottom: 1px solid rgba(255,230,210,.1); }
  .tabla-responsiva td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem 0; }
  .tabla-responsiva td::before { content: attr(data-label); color: var(--humo); font-size: .85rem; }
  .tabla-responsiva td.acciones { justify-content: flex-end; }
  .tabla-responsiva td.acciones::before { content: none; }
}

/* Impresión (detalle del alumno) */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .brasas, .admin-nav, .no-print { display: none !important; }
  .glass { background: #fff !important; border: 1px solid #ccc !important; box-shadow: none !important; backdrop-filter: none !important; }
  .det-op, .text-soft, .metrica .etq { color: #333 !important; }
  .det-op.correcta { color: #11632f !important; }
  .det-op.elegida-mal { color: #a11 !important; }
  .det-preg { break-inside: avoid; }
}