/* ============================================================
   SAGES v0.62 — Estilos compartidos
   index.html · solicitud.html · estudiante.html
   docente.html · admin.html
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:           #0b0f1a;
  --bg2:          #111827;
  --bg3:          #1a2235;
  --border:       #1e2d45;
  --accent:       #00d4ff;
  --accent2:      #7c3aed;
  --green:        #10b981;
  --yellow:       #f59e0b;
  --red:          #ef4444;
  --text:         #e2e8f0;
  --text2:        #94a3b8;
  --text3:        #64748b;
  --font:         'Space Grotesk', sans-serif;
  --font-display: 'Syne', sans-serif;
  --font-mono:    'DM Mono', monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* -- GRID DE FONDO -- */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(0,212,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events:none; z-index:0;
}
.app { position:relative; z-index:1; }

/* =====================
   TOPBAR
===================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: rgba(11,15,26,.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: sticky; top:0; z-index:100;
}
.topbar-brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  cursor: pointer;
}
.topbar-role {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--accent);
  background: rgba(0,212,255,.1);
  border: 1px solid rgba(0,212,255,.2);
  padding: .25rem .75rem;
  border-radius: 100px;
}
.btn-back {
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: .4rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: .85rem;
  transition: all .2s;
  text-decoration: none;
  display: inline-block;
}
.btn-back:hover { border-color: var(--accent); color: var(--accent); }

/* =====================
   LAYOUT
===================== */
.container      { max-width: 900px;  margin: 0 auto; padding: 2rem; }
.container-wide { max-width: 1100px; margin: 0 auto; padding: 2rem; }

/* -- CARDS -- */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .5rem;
}

/* -- FORMS -- */
.form-group { margin-bottom: 1.25rem; }
label {
  display: block;
  font-size: .85rem;
  color: var(--text2);
  margin-bottom: .4rem;
  font-weight: 500;
}
input, select, textarea {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem 1rem;
  color: var(--text);
  font-family: var(--font);
  font-size: .95rem;
  transition: border-color .2s;
  outline: none;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,212,255,.1);
}
select option { background: var(--bg2); }
textarea { resize: vertical; min-height: 80px; }

/* -- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center; gap: .5rem;
  padding: .7rem 1.5rem;
  border-radius: 10px;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.btn-primary  { background: linear-gradient(135deg, var(--accent), #0099cc); color:#000; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 20px rgba(0,212,255,.3); }
.btn-success  { background: linear-gradient(135deg, var(--green), #059669); color:#fff; }
.btn-success:hover { box-shadow:0 4px 20px rgba(16,185,129,.3); }
.btn-danger   { background: linear-gradient(135deg, var(--red), #dc2626); color:#fff; }
.btn-danger:hover { box-shadow:0 4px 20px rgba(239,68,68,.3); }
.btn-ghost    { background:transparent; border:1px solid var(--border); color:var(--text2); }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
.btn:disabled { opacity:.4; cursor:not-allowed; transform:none !important; }
.btn-full     { width:100%; justify-content:center; }

/* -- BADGES -- */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:6px; font-size:.75rem; font-weight:600; font-family:var(--font-mono); }
.badge-green  { background:rgba(16,185,129,.15); color:var(--green); }
.badge-yellow { background:rgba(245,158,11,.15);  color:var(--yellow); }
.badge-red    { background:rgba(239,68,68,.15);    color:var(--red); }
.badge-blue   { background:rgba(0,212,255,.15);    color:var(--accent); }
.badge-purple { background:rgba(124,58,237,.15);   color:#a78bfa; }

/* -- PROGRESS BAR -- */
.progress-bar { width:100%; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; margin:.5rem 0; }
.progress-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .4s ease; }

/* -- MENSAJES -- */
.msg { padding:.85rem 1rem; border-radius:10px; font-size:.9rem; margin-bottom:1rem; }
.msg-error   { background:rgba(239,68,68,.1);   border:1px solid rgba(239,68,68,.3);   color:#fca5a5; }
.msg-success { background:rgba(16,185,129,.1);  border:1px solid rgba(16,185,129,.3);  color:#6ee7b7; }
.msg-info    { background:rgba(0,212,255,.1);    border:1px solid rgba(0,212,255,.3);   color:#7dd3fc; }
.msg-warn    { background:rgba(245,158,11,.1);   border:1px solid rgba(245,158,11,.3);  color:#fcd34d; }

/* -- LOADING -- */
.loading { display:flex; align-items:center; gap:.75rem; color:var(--text2); font-size:.9rem; padding:1rem 0; }
.spinner { width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }

/* =====================
   ESCALAS LIKERT
===================== */
.scale-group { margin-bottom:1.5rem; }
.scale-question { font-size:.95rem; color:var(--text); margin-bottom:.75rem; line-height:1.5; }
.scale-options { display:flex; gap:.5rem; flex-wrap:wrap; }
.scale-option { flex:1; min-width:110px; position:relative; }
.scale-option input[type=radio] { display:none; }
.scale-option label {
  display:block; text-align:center; padding:.6rem .4rem;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; cursor:pointer; font-size:.8rem;
  color:var(--text2); transition:all .15s; line-height:1.3; margin:0;
}
.scale-option input:checked + label {
  background:rgba(0,212,255,.15); border-color:var(--accent);
  color:var(--accent); font-weight:600;
}
.scale-option label:hover { border-color:var(--text3); color:var(--text); }

/* -- STEP INDICATOR -- */
.step-indicator { display:flex; align-items:center; gap:.5rem; margin-bottom:2rem; overflow-x:auto; padding-bottom:.5rem; }
.step { display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text3); white-space:nowrap; }
.step.active { color:var(--accent); }
.step.done   { color:var(--green); }
.step-num { width:24px; height:24px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-family:var(--font-mono); flex-shrink:0; }
.step.done .step-num   { background:var(--green); border-color:var(--green); color:#fff; }
.step.active .step-num { background:rgba(0,212,255,.15); }
.step-sep { color:var(--text3); flex-shrink:0; }

/* =====================
   REPORTE SAGES
===================== */
.nivel-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1.25rem; border-radius:100px; font-family:var(--font-display); font-size:1rem; font-weight:700; }
.nivel-muy-alto { background:rgba(16,185,129,.2);  border:1px solid var(--green);  color:var(--green); }
.nivel-alto     { background:rgba(16,185,129,.1);  border:1px solid #6ee7b7;       color:#6ee7b7; }
.nivel-moderado { background:rgba(245,158,11,.15); border:1px solid var(--yellow); color:var(--yellow); }
.nivel-bajo     { background:rgba(239,68,68,.1);   border:1px solid #f87171;       color:#f87171; }
.nivel-muy-bajo { background:rgba(239,68,68,.2);   border:1px solid var(--red);    color:var(--red); }

.factor-row { display:flex; align-items:center; gap:1rem; margin-bottom:.85rem; }
.factor-label { flex:0 0 200px; font-size:.85rem; color:var(--text2); }
.factor-bar-wrap { flex:1; }
.factor-score { font-family:var(--font-mono); font-size:.85rem; color:var(--text); flex:0 0 40px; text-align:right; }

.dist-bar { display:flex; height:28px; border-radius:6px; overflow:hidden; gap:2px; }
.dist-seg { display:flex; align-items:center; justify-content:center; font-size:.7rem; font-family:var(--font-mono); color:rgba(255,255,255,.8); transition:width .5s ease; min-width:0; overflow:hidden; }

.element-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--border); }
.element-row:last-child { border-bottom:none; }

.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-box { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:1.25rem; text-align:center; }
.stat-value { font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--accent); line-height:1; }
.stat-label { font-size:.75rem; color:var(--text3); margin-top:.25rem; }

.interpretacion-item { padding:.85rem 1rem; border-radius:10px; background:var(--bg3); border-left:3px solid var(--border); margin-bottom:.75rem; font-size:.88rem; line-height:1.6; color:var(--text2); }

/* =====================
   JUEGOS DOCENTE
===================== */
.juego-item { background:var(--bg3); border:1px solid var(--border); border-radius:12px; padding:1.25rem; margin-bottom:.85rem; transition:border-color .2s; }
.juego-item:hover { border-color:var(--text3); }
.juego-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.75rem; }
.juego-nombre { font-weight:600; font-size:1rem; }
.juego-meta { font-size:.8rem; color:var(--text3); margin-top:.2rem; }
.juego-footer { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }

/* =====================
   LOGIN
===================== */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-box { background:var(--bg2); border:1px solid var(--border); border-radius:20px; padding:2.5rem; width:100%; max-width:420px; }
.login-title { font-family:var(--font-display); font-size:1.6rem; font-weight:800; margin-bottom:.4rem; }
.login-sub { color:var(--text2); font-size:.9rem; margin-bottom:2rem; }
.pin-input { letter-spacing:.2em; font-family:var(--font-mono); font-size:1.2rem; text-align:center; }

/* =====================
   ADMIN
===================== */
.pendiente-card { background:var(--bg3); border:1px solid rgba(245,158,11,.2); border-radius:12px; padding:1.25rem; margin-bottom:.85rem; }
.pendiente-nombre { font-weight:600; font-size:1rem; margin-bottom:.3rem; }
.pendiente-meta { font-size:.8rem; color:var(--text2); margin-bottom:1rem; }
.pendiente-actions { display:flex; gap:.75rem; flex-wrap:wrap; }

.tabs { display:flex; gap:.5rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; overflow-x:auto; }
.tab { padding:.6rem 1.2rem; font-size:.9rem; font-weight:500; color:var(--text3); cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* =====================
   SUCCESS SCREEN
===================== */
.success-screen { text-align:center; padding:4rem 2rem; }
.success-icon { font-size:4rem; margin-bottom:1rem; }
.success-title { font-family:var(--font-display); font-size:2rem; font-weight:800; margin-bottom:.75rem; }
.success-sub { color:var(--text2); font-size:1rem; max-width:400px; margin:0 auto 2rem; line-height:1.6; }

/* -- SECTION TITLE -- */
.section-title { font-family:var(--font-display); font-size:1.4rem; font-weight:800; margin-bottom:1.5rem; display:flex; align-items:center; gap:.5rem; }

/* =====================
   ANIMACIONES
===================== */
@keyframes fadeUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
.fade-up { animation: fadeUp .35s ease both; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in { animation: fadeIn .4s ease both; }

/* =====================
   RESPONSIVE
===================== */
@media (max-width:640px) {
  .container, .container-wide { padding:1rem; }
  .topbar { padding:.75rem 1rem; }
  .factor-label { flex:0 0 120px; }
  .scale-option { min-width:90px; }
}