/* ═══════════════════════════════════════════════════════
   ACADEMIA — archive.css
   Prueba: mismo tema "papel y tinta" que la nueva portada.
   Todo lo de aquí para abajo sobrescribe base-layout.css
   (que no se toca, porque lo comparten Sophia y Logos).
   ═══════════════════════════════════════════════════════ */

:root {
  /* Paleta — papel y tinta (igual que la portada) */
  --c-bg:        #EDE7D8;
  --c-bg-raised: #F6F2E7;
  --c-text:      #1C1A16;
  --c-muted:     rgba(28,26,22,0.62);
  --c-faint:     rgba(28,26,22,0.4);
  --c-border:    rgba(28,26,22,0.18);
  --c-glass:     rgba(28,26,22,0.035);

  /* Acento del módulo Academia (verde bosque) */
  --accent:        #2F6B3E;
  --accent-soft:   rgba(47,107,62,0.08);
  --accent-border: rgba(47,107,62,0.3);

  /* Acentos de otros módulos citados dentro de esta página (Sophia) */
  --c-sophia: #2B5F8A;
  --c-seal:   #7A1F2B;

  --header-color:  var(--accent);
  --header-border: rgba(47,107,62,.2);

  /* Tipografía */
  --f-display: 'Fraunces', serif;
  --f-mono:    'IBM Plex Mono', monospace;
  --f-sans:    'IBM Plex Sans', sans-serif;
}

/* ─── SOBRESCRITURA DE BASE-LAYOUT.CSS ───────────────── */
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
}

.topbar {
  background: var(--c-bg);
  border-bottom: 1px solid var(--header-border);
}

.brand {
  font-family: var(--f-mono);
}

.sidebar {
  border-right: 1px solid var(--c-border);
}

.sidebar-toggle {
  border: 1px solid var(--c-border);
  color: var(--accent);
  background: var(--c-bg-raised);
}

.document-header {
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 450;
  font-size: 1.15rem;
  line-height: 1.5;
}

.footer {
  border-top: 1px solid var(--c-border);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: 0.75rem;
}

.module-link {
  color: var(--c-muted);
}

.module-link:hover,
.module-link.active {
  border-color: var(--accent);
  color: var(--accent);
}

.module-link.active {
  background: var(--accent-soft);
}

.module-nav.open {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
}

.user-menu,
.auth-btn {
  color: var(--c-muted);
}

.user-menu:hover,
.auth-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ─── PANELES LATERALES ──────────────────────────────── */
.tree,
.epistemic,
.philosopher {
  border: 1px solid var(--c-border);
  padding: 10px;
  background: var(--c-bg-raised);
  box-sizing: border-box;
}

.tree {
  flex: 1;
  overflow-y: auto;
}

.folder {
  font-weight: bold;
  margin-top: 10px;
  color: var(--c-text);
}

.file {
  margin-left: 10px;
  opacity: .8;
  cursor: pointer;
  color: var(--c-text);
}

.epistemic {
  font-size: 12px;
}

.epistemic-title {
  color: var(--accent);
  margin-bottom: 8px;
}

.epistemic-options {
  opacity: .8;
}

/* =========================
   TARJETA COMPACTA SOPHIA (HUD)
========================= */
.sophia-score-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--c-bg-raised) 100%);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s ease-in-out;
  box-shadow: 0 2px 8px rgba(28,26,22,0.08);
  user-select: none;
}

.sophia-score-card:hover {
  border-color: rgba(47,107,62,0.7);
  background: linear-gradient(135deg, rgba(47,107,62,0.14) 0%, var(--c-bg-raised) 100%);
  box-shadow: 0 0 12px rgba(47,107,62,0.18);
  transform: translateY(-1px);
}

.sophia-score-card:active {
  transform: translateY(0);
}

.sophia-card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sophia-card-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--f-mono);
}

.sophia-status-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  animation: sophiaPulse 2s infinite ease-in-out;
}

@keyframes sophiaPulse {
  0% { opacity: 0.4; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0.4; transform: scale(0.95); }
}

.sophia-card-action {
  font-size: 0.72rem;
  color: var(--c-muted);
  transition: color 0.2s ease;
}

.sophia-score-card:hover .sophia-card-action {
  color: var(--c-text);
}

.sophia-card-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  background: var(--c-bg);
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--accent-border);
}

.sophia-score-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--f-mono), monospace;
}

.sophia-score-max {
  font-size: 0.65rem;
  color: var(--c-faint);
}

/* =========================
   REY FILÓSOFO
========================= */
.philosopher {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 120px;
}

.philosopher-title {
  color: var(--accent);
  margin-bottom: 6px;
  font-family: var(--f-mono);
}

.philosopher-text {
  text-align: center;
  color: var(--c-muted);
}

.philosopher-btn {
  margin-top: 8px;
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-family: var(--f-mono);
  padding: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.philosopher-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}

/* =========================
   CITAS / BLOCKQUOTES
========================= */
blockquote {
  text-align: center;
  font-style: italic;
  font-family: var(--f-display);
  font-weight: 450;
  color: var(--c-text);
  font-size: 1.3em;
  line-height: 1.6;
  margin: 40px auto;
  max-width: 720px;
  border: none;
}

/* =========================
   CITAS EN NEGRITA
========================= */
.content strong {
  display: block;
  text-align: center;
  font-style: italic;
  font-family: var(--f-display);
  font-size: 1.1em;
  line-height: 1.6;
  margin: 28px auto;
  max-width: 720px;
  font-weight: 500;
  color: var(--c-text);
}

/* Texto normal del documento */
.content p {
  text-align: left;
  color: var(--c-text);
}

.content p:last-of-type {
  text-align: right;
  font-size: 0.95em;
  opacity: 0.75;
  max-width: 720px;
  margin: 0 auto 20px auto;
}

.content {
  white-space: pre-wrap;
}

.meta {
  margin-bottom: 24px;
}