/* ═══════════════════════════════════════════════════════════════════
   I³ — DESIGN SYSTEM
   Instituto Internacional de Investigación — Research RPG
   Inspiración: Apple, Notion, Linear, Duolingo, Studio Ghibli
   Principio: sentirse como una institución, no como un LMS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Tipografía */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;
  --sp-10: 64px;

  /* Radios */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;

  /* Transiciones */
  --t-fast: 0.15s ease;
  --t-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.2);
  --shadow-glow: 0 0 24px var(--building-color, var(--blue));
}

/* ── Dark theme (default) ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #0a0a0f;
  --bg-elev: #14141c;
  --bg-card: #1c1c28;
  --bg-hover: #262636;
  --border: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);

  --text-1: #f5f5f7;
  --text-2: #c7c7cc;
  --text-3: #8e8e93;
  --text-4: #636366;

  --blue: #0a84ff;
  --purple: #5e5ce6;
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --yellow: #ffd60a;
  --teal: #40cbe0;

  --blue-bg: rgba(10,132,255,0.12);
  --green-bg: rgba(48,209,88,0.12);
  --red-bg: rgba(255,69,58,0.12);
  --yellow-bg: rgba(255,214,10,0.12);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-1);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: normal; line-height: 1.2; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
p { line-height: 1.6; }

/* ── Auth overlay ───────────────────────────────────────────────── */
#auth-overlay {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 60%);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.6s ease;
}

.auth-container { width: 100%; max-width: 480px; padding: var(--sp-5); }

.auth-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}

.auth-wordmark { text-align: center; margin-bottom: var(--sp-6); }

.auth-logo-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}

.auth-logo-text {
  font-family: var(--font-display);
  font-size: 28px;
  color: white;
  font-weight: 600;
}

.auth-title { font-size: var(--text-xl); color: var(--text-1); }
.auth-subtitle { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-1); }

.auth-tabs {
  display: flex; gap: var(--sp-1);
  background: var(--bg-elev);
  padding: var(--sp-1);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}

.auth-tab {
  flex: 1; padding: var(--sp-2) var(--sp-3);
  border: none; background: none;
  color: var(--text-3); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--r-sm); cursor: pointer;
  transition: all var(--t-fast);
}

.auth-tab.on { background: var(--bg-card); color: var(--text-1); }

.auth-alert {
  font-size: var(--text-sm); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm); margin-bottom: var(--sp-3);
  display: none;
}

.auth-alert-e { background: var(--red-bg); color: var(--red); display: block; }
.auth-alert-s { background: var(--green-bg); color: var(--green); display: block; }

/* ── Forms ──────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--sp-4); }
.form-row { display: flex; gap: var(--sp-3); }
.form-row > * { flex: 1; }

.form-label {
  display: block; font-size: var(--text-xs); font-weight: 600;
  color: var(--text-2); margin-bottom: var(--sp-1);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.form-input {
  width: 100%; padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1); font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: all var(--t-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-bg);
}

textarea.form-input { resize: vertical; min-height: 80px; }

.form-hint { font-size: var(--text-xs); color: var(--text-3); margin-bottom: var(--sp-2); }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: none; border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer; transition: all var(--t-fast);
}

.btn-primary { background: var(--blue); color: white; }
.btn-primary:hover { background: #409cff; transform: translateY(-1px); }
.btn-ghost { background: none; color: var(--text-2); }
.btn-ghost:hover { color: var(--text-1); background: var(--bg-hover); }
.btn-danger { background: var(--red); color: white; }
.btn-sm { padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); }
.btn-ai { background: var(--purple); color: white; }
.btn-back {
  background: none; border: none; color: var(--text-3);
  font-size: var(--text-sm); cursor: pointer; margin-bottom: var(--sp-4);
}
.btn-back:hover { color: var(--text-1); }

/* ── House selector ─────────────────────────────────────────────── */
.house-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.house-btn {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-2);
  background: var(--bg-elev); border: 2px solid transparent;
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
}

.house-btn:hover { background: var(--bg-hover); }
.house-btn.sel { border-color: var(--house-color); box-shadow: 0 0 12px var(--house-color); }
.house-icon { font-size: var(--text-xl); }
.house-name { font-size: var(--text-xs); color: var(--text-2); }

/* ── App layout ─────────────────────────────────────────────────── */
#app { height: 100vh; display: flex; flex-direction: column; }

.topnav {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.topnav-brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-1);
  cursor: pointer;
}

.topnav-sub { font-size: var(--text-xs); color: var(--text-3); font-family: var(--font-body); }

.topnav-rpg {
  flex: 1;
  display: flex; justify-content: center;
}

.app-body { flex: 1; display: flex; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.sidebar {
  width: 220px; flex-shrink: 0;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: var(--sp-4);
  overflow-y: auto;
}

.sidebar-section { margin-bottom: var(--sp-5); }
.sidebar-label {
  font-size: 10px; font-weight: 700;
  color: var(--text-4); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: var(--sp-2);
  padding: 0 var(--sp-3);
}

.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: var(--sp-2) var(--sp-3);
  border: none; background: none;
  color: var(--text-2); font-size: var(--text-sm);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
  margin-bottom: var(--sp-1);
}

.nav-item:hover { background: var(--bg-hover); color: var(--text-1); }
.nav-item.active { background: var(--blue-bg); color: var(--blue); }
.nav-icon { font-size: var(--text-lg); width: 24px; text-align: center; }

/* ── Main content ───────────────────────────────────────────────── */
.main {
  flex: 1; overflow-y: auto;
  padding: var(--sp-6);
  animation: slideUp 0.4s ease;
}

.page-sub { color: var(--text-3); font-size: var(--text-sm); margin-bottom: var(--sp-6); }
.empty { color: var(--text-3); }

/* ── RPG progress bar ───────────────────────────────────────────── */
.rpg-progress {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: 400px;
}

.rpg-rango-badge {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-card);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.rango-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: var(--rango-color); color: white;
  border-radius: 50%; font-size: var(--text-sm); font-weight: 700;
}

.rango-name { font-size: var(--text-xs); font-weight: 600; color: var(--text-1); }
.rango-xp { font-size: 10px; color: var(--text-3); }

.rpg-bar-wrap { flex: 1; }
.rpg-bar-label {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-3); margin-bottom: 2px;
}

.rpg-bar-track {
  height: 6px; background: var(--bg-card);
  border-radius: 3px; overflow: hidden;
}

.rpg-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--blue), var(--purple));
  border-radius: 3px; transition: width var(--t-slow);
}

.rpg-bar-meta { font-size: 10px; color: var(--text-4); margin-top: 2px; }
.rpg-max-rango { font-size: var(--text-sm); color: var(--yellow); }

/* ── Campus map ─────────────────────────────────────────────────── */
.campus-page { max-width: 900px; margin: 0 auto; }
.campus-header { margin-bottom: var(--sp-6); }

.campus-trail {
  display: flex; flex-direction: column; gap: var(--sp-3);
}

.building-node {
  position: relative;
  padding-left: var(--sp-8);
  animation: fadeIn var(--t-base);
}

.building-connector {
  position: absolute; left: 24px; top: -32px;
  width: 2px; height: 32px;
  background: var(--border-strong);
}

.building-connector.hidden { display: none; }

.building-card {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-base);
  position: relative;
  overflow: hidden;
}

.building-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--building-color);
}

.building-node:hover .building-card { transform: translateX(4px); border-color: var(--building-color); }

.building-node.locked .building-card {
  opacity: 0.4; cursor: not-allowed; filter: grayscale(1);
}

.building-node.completed .building-card {
  border-color: var(--green);
}

.building-node.current .building-card {
  box-shadow: 0 0 20px var(--building-color);
  animation: pulse 2s ease infinite;
}

.building-icon-wrap { position: relative; flex-shrink: 0; }
.building-icon { font-size: 32px; }
.building-lock { position: absolute; bottom: -4px; right: -4px; font-size: 14px; }
.building-check {
  position: absolute; top: -4px; right: -4px;
  background: var(--green); color: white;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}

.building-fase {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--building-color); font-weight: 700;
}

.building-name { font-size: var(--text-lg); font-weight: 600; margin: var(--sp-1) 0; }
.building-desc { font-size: var(--text-sm); color: var(--text-3); }
.building-artifact {
  font-size: var(--text-xs); color: var(--text-2);
  margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-2);
  background: var(--bg-elev); border-radius: var(--r-sm);
  display: inline-block;
}

/* ── Building interior ─────────────────────────────────────────── */
.building-interior { max-width: 800px; margin: 0 auto; }

.building-hero {
  display: flex; gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  margin-bottom: var(--sp-6);
  position: relative; overflow: hidden;
}

.building-hero::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--building-color);
}

.building-hero-icon { font-size: 48px; flex-shrink: 0; }
.building-hero-fase {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--building-color); font-weight: 700;
}

.building-hero-artifact {
  margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev); border-radius: var(--r-md);
  display: inline-flex; gap: var(--sp-2);
}

.artifact-label { font-size: var(--text-xs); color: var(--text-3); }
.artifact-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-1); }

.building-section {
  margin-bottom: var(--sp-6);
  padding: var(--sp-5);
  background: var(--bg-card);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.building-section h3 { margin-bottom: var(--sp-4); }

/* ── Objetos (herramientas) ─────────────────────────────────────── */
.objetos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.objeto-card {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3); background: var(--bg-elev);
  border-radius: var(--r-md);
}
.objeto-icon { font-size: var(--text-xl); }
.objeto-name { font-size: var(--text-sm); font-weight: 600; }
.objeto-desc { font-size: var(--text-xs); color: var(--text-3); }

/* ── Misión cards ───────────────────────────────────────────────── */
.misiones-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.mision-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--bg-elev);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
  border: 1px solid transparent;
}

.mision-card:hover { border-color: var(--blue); }
.mision-card.completed { opacity: 0.7; }
.mision-card.in_progress { border-color: var(--yellow); }

.mision-status {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg);
  border-radius: 50%; background: var(--bg-card);
}

.mision-card.completed .mision-status { color: var(--green); }

.mision-content { flex: 1; }
.mision-nombre { font-size: var(--text-sm); font-weight: 600; }
.mision-artifact { font-size: var(--text-xs); color: var(--text-3); }
.mision-xp { font-size: var(--text-xs); color: var(--yellow); font-weight: 600; }
.mision-prisma {
  font-size: 10px; color: var(--text-4);
  font-family: var(--font-mono);
  padding: var(--sp-1) var(--sp-2);
  background: var(--bg-card); border-radius: var(--r-sm);
}

/* ── Misión page ────────────────────────────────────────────────── */
.mision-page { max-width: 800px; margin: 0 auto; }

.mision-hero {
  padding: var(--sp-6); background: var(--bg-card);
  border-radius: var(--r-lg); margin-bottom: var(--sp-5);
}

.mision-prisma-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: var(--sp-1) var(--sp-3); background: var(--blue-bg);
  color: var(--blue); border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: var(--sp-3);
}

.mision-narrativa { color: var(--text-2); margin: var(--sp-3) 0; }

.mision-meta { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.artifact-badge {
  padding: var(--sp-1) var(--sp-3); background: var(--bg-elev);
  border-radius: var(--r-sm); font-size: var(--text-xs);
}
.xp-badge {
  padding: var(--sp-1) var(--sp-3); background: var(--yellow-bg);
  color: var(--yellow); border-radius: var(--r-sm);
  font-size: var(--text-xs); font-weight: 700;
}

.mision-section {
  margin-bottom: var(--sp-5);
  padding: var(--sp-5); background: var(--bg-card);
  border-radius: var(--r-lg); border: 1px solid var(--border);
}

.section-hint { font-size: var(--text-sm); color: var(--text-3); margin-bottom: var(--sp-3); }

.artifact-form { display: flex; flex-direction: column; gap: var(--sp-3); }

.mision-actions {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.completed-badge {
  color: var(--green); font-size: var(--text-sm); font-weight: 600;
}

/* ── Consultores ────────────────────────────────────────────────── */
.consultores-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-4); }

.consultor-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--bg-card);
  border-radius: var(--r-md); cursor: pointer;
  transition: all var(--t-fast);
  border: 1px solid var(--border);
}

.consultor-card:hover { border-color: var(--consultor-color); box-shadow: 0 0 12px var(--consultor-color); }

.consultor-avatar { font-size: var(--text-2xl); }
.consultor-name { font-size: var(--text-sm); font-weight: 600; }
.consultor-specialty { font-size: var(--text-xs); color: var(--text-3); }

.consultor-card-large {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--bg-card);
  border-radius: var(--r-lg); cursor: pointer;
  border: 1px solid var(--border);
  transition: all var(--t-base);
}

.consultor-card-large:hover { border-color: var(--consultor-color); transform: translateY(-2px); }

.consultor-avatar-xl { font-size: 40px; }
.consultor-name-xl { font-size: var(--text-lg); font-weight: 600; }
.consultor-specialty-xl { font-size: var(--text-sm); color: var(--consultor-color); }
.consultor-personality-xl { font-size: var(--text-xs); color: var(--text-3); margin-top: var(--sp-1); }

/* ── Consultor chat panel ───────────────────────────────────────── */
.consultor-panel {
  max-width: 700px; margin: 0 auto;
  background: var(--bg-card);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  overflow: hidden;
}

.consultor-header {
  display: flex; gap: var(--sp-4); align-items: center;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--consultor-color)11, transparent);
}

.consultor-avatar-lg { font-size: 40px; }
.consultor-personality { font-size: var(--text-xs); color: var(--text-3); }

.consultor-chat {
  height: 400px; overflow-y: auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}

.chat-msg { display: flex; gap: var(--sp-2); animation: slideUp var(--t-base); }
.chat-msg.user { justify-content: flex-end; }
.chat-avatar { font-size: var(--text-xl); flex-shrink: 0; }

.chat-bubble {
  max-width: 75%; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); font-size: var(--text-sm);
  line-height: 1.5;
}

.chat-msg.ai .chat-bubble { background: var(--bg-elev); }
.chat-msg.user .chat-bubble { background: var(--blue); color: white; }
.chat-bubble.thinking { opacity: 0.6; font-style: italic; }
.chat-msg.ai.error .chat-bubble { background: var(--red-bg); color: var(--red); }

.consultor-input {
  padding: var(--sp-4);
  border-top: 1px solid var(--border);
  display: flex; gap: var(--sp-3); align-items: flex-end;
}

.consultor-input textarea {
  flex: 1; resize: none;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); color: var(--text-1);
  padding: var(--sp-3); font-family: var(--font-body); font-size: var(--text-sm);
}

.consultor-input textarea:focus { outline: none; border-color: var(--consultor-color); }

/* ── Skill tree ────────────────────────────────────────────────── */
.skill-tree-page { max-width: 800px; margin: 0 auto; }

.skill-tree-grid { display: grid; gap: var(--sp-3); }

.skill-node {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--bg-card);
  border-radius: var(--r-md); border: 1px solid var(--border);
}

.skill-icon { font-size: var(--text-2xl); }
.skill-info { flex: 1; }
.skill-name { font-size: var(--text-sm); font-weight: 600; }
.skill-desc { font-size: var(--text-xs); color: var(--text-3); }
.skill-dots { display: flex; gap: 3px; margin-top: var(--sp-2); }

.skill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
}

.skill-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }
.skill-level { font-size: var(--text-sm); color: var(--text-3); font-family: var(--font-mono); }

/* ── Manuscript page ────────────────────────────────────────────── */
.manuscript-page { max-width: 800px; margin: 0 auto; }

.manuscript-progress { margin-bottom: var(--sp-6); }

.ms-progress-bar {
  height: 12px; background: var(--bg-card);
  border-radius: 6px; overflow: hidden;
  border: 1px solid var(--border);
}

.ms-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 6px;
  transition: width var(--t-slow);
}

.ms-progress-meta { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--sp-2); }

.manuscript-sections { display: flex; flex-direction: column; gap: var(--sp-3); }

.ms-section {
  padding: var(--sp-4); background: var(--bg-card);
  border-radius: var(--r-md); border: 1px solid var(--border);
  position: relative; overflow: hidden;
}

.ms-section::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--building-color);
}

.ms-section.done { border-color: var(--green); }

.ms-section-header {
  display: flex; align-items: center; gap: var(--sp-3);
}

.ms-section-icon { font-size: var(--text-xl); }
.ms-section-name { font-size: var(--text-sm); font-weight: 600; }
.ms-section-fase { font-size: var(--text-xs); color: var(--text-3); }
.ms-section-count {
  margin-left: auto; font-size: var(--text-sm);
  font-family: var(--font-mono); color: var(--text-2);
}

.ms-artifacts { margin-top: var(--sp-3); }

.ms-artifact {
  font-size: var(--text-xs); color: var(--text-3);
  padding: var(--sp-1) 0;
}

.ms-artifact.done { color: var(--green); }

/* ── Library ───────────────────────────────────────────────────── */
.library-page { max-width: 900px; margin: 0 auto; }

.library-section { margin-bottom: var(--sp-6); }
.library-section h3 { margin-bottom: var(--sp-4); }

.resources-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-3); }

.library-card {
  padding: var(--sp-4); background: var(--bg-card);
  border-radius: var(--r-md); border: 1px solid var(--border);
}

.library-card-title { font-size: var(--text-sm); font-weight: 600; margin: var(--sp-2) 0; }
.library-doi { font-size: var(--text-xs); color: var(--blue); text-decoration: none; }
.library-doi:hover { text-decoration: underline; }

.library-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

.resource-type-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px var(--sp-2); border-radius: var(--r-sm);
  text-transform: uppercase; letter-spacing: 0.5px;
}

.resource-type-badge.pdf { background: var(--red-bg); color: var(--red); }
.resource-type-badge.articulo { background: var(--blue-bg); color: var(--blue); }
.resource-type-badge.video { background: var(--purple-bg); color: var(--purple); }

.resources-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.resource-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--bg-elev);
  border-radius: var(--r-md);
}

.resource-info { flex: 1; }
.resource-title { font-size: var(--text-sm); }
.resource-doi { font-size: var(--text-xs); color: var(--blue); text-decoration: none; }
.resource-link { font-size: var(--text-xs); color: var(--text-2); }

/* ── Toast ──────────────────────────────────────────────────────── */
#toast-container {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5);
  z-index: 2000;
  display: flex; flex-direction: column; gap: var(--sp-2);
}

.toast {
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 500;
  box-shadow: var(--shadow-lg);
  transform: translateX(120%);
  transition: transform var(--t-base);
  max-width: 400px;
}

.toast.show { transform: translateX(0); }
.toast-success { background: var(--green); color: white; }
.toast-error { background: var(--red); color: white; }
.toast-warning { background: var(--orange); color: white; }
.toast-info { background: var(--blue); color: white; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 20px var(--building-color); }
  50% { box-shadow: 0 0 40px var(--building-color); }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { padding: var(--sp-4); }
  .form-row { flex-direction: column; }
  .house-grid { grid-template-columns: repeat(2, 1fr); }
  .topnav { padding: var(--sp-3); }
  .topnav-rpg { display: none; }
}

/* ── Panel docente ────────────────────────────────────────────── */
.panel-docente { max-width: 1000px; margin: 0 auto; }

.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4); margin-bottom: var(--sp-6);
}

.stat-card {
  padding: var(--sp-5); background: var(--bg-card);
  border-radius: var(--r-lg); border: 1px solid var(--border);
  text-align: center;
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--blue);
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 1px;
  margin-top: var(--sp-2);
}

.panel-section {
  margin-bottom: var(--sp-6); padding: var(--sp-5);
  background: var(--bg-card); border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.panel-section h3 { margin-bottom: var(--sp-4); }

.docente-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
}

.docente-table th {
  text-align: left; padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.docente-table td {
  padding: var(--sp-3); border-bottom: 1px solid var(--border);
}

.docente-table tr:hover td { background: var(--bg-hover); }

.artifacts-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.artifact-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev); border-radius: var(--r-sm);
  font-size: var(--text-sm);
}

.artifact-student { font-weight: 600; min-width: 120px; }
.artifact-type { color: var(--text-2); flex: 1; }
.artifact-status {
  font-size: var(--text-xs); padding: 2px var(--sp-2);
  border-radius: var(--r-sm); font-weight: 600;
  text-transform: uppercase;
}
.status-draft { background: var(--bg-card); color: var(--text-3); }
.status-submitted { background: var(--blue-bg); color: var(--blue); }
.status-evaluated { background: var(--yellow-bg); color: var(--yellow); }
.status-approved { background: var(--green-bg); color: var(--green); }
.status-rejected { background: var(--red-bg); color: var(--red); }
.artifact-date { color: var(--text-4); font-family: var(--font-mono); font-size: var(--text-xs); }

.instituto-stats { display: flex; flex-direction: column; gap: var(--sp-3); }

.edificio-stat {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
}

.edificio-icon { font-size: var(--text-lg); }
.edificio-name { font-size: var(--text-sm); width: 150px; }

.edificio-bar {
  flex: 1; height: 8px; background: var(--bg-elev);
  border-radius: 4px; overflow: hidden;
}

.edificio-bar-fill {
  height: 100%; background: var(--building-color, var(--blue));
  border-radius: 4px; transition: width var(--t-slow);
}

.edificio-pct {
  font-size: var(--text-sm); font-family: var(--font-mono);
  color: var(--text-2); min-width: 40px; text-align: right;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer-powered {
  text-align: center; padding: var(--sp-4);
  font-size: var(--text-xs); color: var(--text-4);
  border-top: 1px solid var(--border);
}