/* ─────────────────────────────────────────────────────────────────────
   aula.css — clases compartidas para apuntes, fichas, conceptos y unidades
   bajo /aula/ en alexreyes.es

   Estructura:
     1. Card de cabecera (concepto, ficha, unidad)
     2. Sección genérica con h2
     3. Bloque de teoría
     4. Info box
     5. Ejemplo
     6. Ejercicio (header, num, título, puntos, cuerpo)
     7. Apartado (letra, puntos)
     8. Solución (sobre <details>)
     9. Tags por ejercicio
    10. Navegación libro digital
    11. Footer-nav
    12. Sumario (TOC)

   examenes.css se mantiene como está (gobierna /examenes/{exam}/p*.html con
   sus clases específicas: .question-block, .statement, .solution-toggle, etc.).
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. Card de cabecera (patrón CCSS exam-header) ────────────────────
   Las cabeceras de páginas (apuntes, fichas, unidades) usan .exam-header
   de examenes.css con .section-label + .tag tag-orange.
   Los modificadores específicos (.card-cap para "Cap. X de Y") quedan aquí.
   ─────────────────────────────────────────────────────────────────── */
.card-cap {
  font-family: var(--mono); font-size: 0.72rem; color: var(--text-faint);
  padding: 0.15rem 0.5rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: 4px;
}

/* ── 2. Sección genérica ────────────────────────────────────────────── */
.seccion-aula { margin: 2.5rem 0 1rem; }
.seccion-aula > h2 {
  font-size: 1.15rem; font-weight: 600; margin: 0 0 1rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
  letter-spacing: -0.005em;
}
/* Numerador en el h2 de una sección (ej. "1. Equacions exponencials") */
.seccion-aula > h2 .num {
  display: inline-block; min-width: 1.6rem;
  font-family: var(--mono); color: #10b981; font-weight: 700;
  margin-right: 0.4rem;
}
[data-theme="dark"] .seccion-aula > h2 .num { color: #34d399; }
/* Párrafo de introducción a una sección */
.section-intro {
  color: var(--text-soft); line-height: 1.6;
  margin: 0 0 1rem; font-size: 0.95rem;
}
/* (.ejercicio-header .num definido arriba con .ejercicio-num — pill verde esmeralda) */

/* ── 3. Bloque de teoría ────────────────────────────────────────────── */
.teoria-bloque { line-height: 1.7; color: var(--text); font-size: 1.0rem; }
.teoria-bloque p { margin: 0.85rem 0; }
.teoria-bloque ul, .teoria-bloque ol { padding-left: 1.4rem; line-height: 1.7; }
.teoria-bloque li { margin: 0.35rem 0; }
.teoria-bloque h3 {
  font-size: 1.02rem; font-weight: 600; margin: 1.7rem 0 0.5rem;
  color: var(--text);
}

/* ── 4. Info box ────────────────────────────────────────────────────── */
.info-box {
  background: rgba(8,145,178,0.06);
  border-left: 3px solid #0891b2;
  padding: 0.85rem 1.1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 1rem 0;
}
.info-box.amarillo {
  background: rgba(245,158,11,0.07);
  border-left-color: #d97706;
}
.info-box.rosa {
  background: rgba(219,39,119,0.06);
  border-left-color: #db2777;
}
[data-theme="dark"] .info-box           { background: rgba(8,145,178,0.14); }
[data-theme="dark"] .info-box.amarillo  { background: rgba(245,158,11,0.16); }
[data-theme="dark"] .info-box.rosa      { background: rgba(219,39,119,0.14); }
.info-box-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.7rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.35rem; color: #0e7490;
}
.info-box.amarillo .info-box-tag { color: #b45309; }
.info-box.rosa     .info-box-tag { color: #be185d; }
[data-theme="dark"] .info-box-tag           { color: #67e8f9; }
[data-theme="dark"] .info-box.amarillo .info-box-tag { color: #fbbf24; }
[data-theme="dark"] .info-box.rosa     .info-box-tag { color: #f9a8d4; }
.info-box p:first-child { margin-top: 0; }
.info-box p:last-child  { margin-bottom: 0; }

/* ── 5. Ejemplo (variante de ejercicio para teoría) ─────────────────── */
.ejemplo {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 1rem 0;
}
.ejemplo-header {
  display: flex; align-items: baseline; gap: 0.55rem;
  font-weight: 600; margin-bottom: 0.6rem; font-size: 0.97rem;
}
.ejemplo-num {
  font-family: var(--mono); font-size: 0.72rem;
  background: #6366f1; color: #fff;
  padding: 0.18rem 0.5rem; border-radius: 4px;
  align-self: center;
}
.ejemplo-cuerpo { line-height: 1.65; color: var(--text); }
.ejemplo-cuerpo p { margin: 0.6rem 0; }

/* ── 6. Ejercicio ─ valores EXACTOS del patrón CCSS original ──────────── */
.ejercicio {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
[data-theme="dark"] .ejercicio { background: var(--bg-subtle); }
.ejercicio-header {
  display: flex; align-items: baseline; gap: 0.6rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
/* Pill verde esmeralda — idéntico al de CCSS .exercise-head .num */
.ejercicio-num,
.ejercicio-header .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 1.7rem;
  padding: 0 0.55rem;
  background: #10b981; color: #fff;
  border-radius: 99px;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  flex: 0 0 auto;
}
/* Etiqueta pequeña en MAYÚSCULAS — idéntico a CCSS .exercise-head .ttl */
.ejercicio-header .ttl,
.ejercicio-titulo {
  font-size: 0.78rem; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.ejercicio-puntos {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--text-faint); margin-left: auto;
}
/* Cuerpo del ejercicio (enunciado) — idéntico a CCSS .exercise-statement */
.ejercicio-cuerpo,
.ejercicio-intro {
  font-size: 0.95rem; color: var(--text);
  line-height: 1.65;
  margin: 0.2rem 0 0.6rem;
}
.ejercicio-cuerpo > p:first-child { margin-top: 0; }

/* Título largo opcional dentro del cuerpo (para problemas IB que necesitan etiqueta).
   Sutil y delgado, no compite con el .num pill verde. */
.ejercicio-titulo-largo {
  font-size: 1rem; font-weight: 600;
  color: var(--text);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

/* ── 7. Apartado ─────────────────────────────────────────────────────── */
.apartado {
  margin: 0.5rem 0;
  padding-left: 0.4rem;
}
.apartado-letra {
  font-weight: 700; color: #10b981; margin-right: 0.3rem;
}
[data-theme="dark"] .apartado-letra { color: #34d399; }
.apartado-pts {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--text-faint); margin-left: 0.4rem;
}

/* ── 8. Solución (sobre <details>) ───────────────────────────────────── */
details.solucion {
  margin-top: 0.8rem; padding: 0.7rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
details.solucion > summary {
  cursor: pointer; font-weight: 600; font-size: 0.9rem;
  color: var(--text); user-select: none;
  list-style: none;
  display: flex; align-items: center; gap: 0.4rem;
}
details.solucion > summary::before {
  content: "▶"; font-size: 0.7rem; color: var(--text-faint);
  transition: transform 0.15s;
}
details.solucion[open] > summary::before { transform: rotate(90deg); }
details.solucion > summary::-webkit-details-marker { display: none; }
.solucion-cuerpo { padding-top: 0.7rem; line-height: 1.65; color: var(--text); }
.solucion-cuerpo p { margin: 0.5rem 0; }

/* ── 9. Tags por ejercicio ───────────────────────────────────────────── */
.ej-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.ej-tag {
  font-family: var(--mono); font-size: 0.7rem;
  background: rgba(8,145,178,0.12); color: #0e7490;
  padding: 0.18rem 0.45rem; border-radius: 4px;
  text-decoration: none;
}
[data-theme="dark"] .ej-tag { background: rgba(8,145,178,0.22); color: #67e8f9; }
.ej-tag.dif {
  background: rgba(217,119,6,0.12); color: #b45309;
}
[data-theme="dark"] .ej-tag.dif { background: rgba(217,119,6,0.22); color: #fbbf24; }

/* ── 10. Navegación libro digital ────────────────────────────────────── */
.libro-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.8rem;
  margin: 3rem 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.libro-nav-item {
  display: flex; flex-direction: column;
  padding: 0.85rem 1.1rem;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text);
  transition: border-color 0.12s;
  min-width: 0;
}
.libro-nav-item:hover { border-color: var(--border-strong); opacity: 1; }
.libro-nav-item.empty {
  background: transparent; border: 1px dashed var(--border);
  color: var(--text-faint); cursor: default;
}
.libro-nav-item.empty:hover { border-color: var(--border); }
.libro-nav-direction {
  font-family: var(--mono); font-size: 0.7rem;
  color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.libro-nav-titulo {
  font-size: 0.92rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.libro-nav-end {
  align-self: center; text-align: center;
}
.libro-nav-end a {
  display: inline-block;
  padding: 0.6rem 1rem;
  background: var(--bg-subtle); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 500;
  text-decoration: none;
}
.libro-nav-end a:hover { border-color: var(--border-strong); opacity: 1; }
@media (max-width: 600px) {
  .libro-nav { grid-template-columns: 1fr; }
  .libro-nav-end { order: -1; }
}

/* ── 11. Footer-nav ──────────────────────────────────────────────────── */
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin: 3rem 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.footer-nav a {
  padding: 0.55rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
}
.footer-nav a:hover { border-color: var(--border-strong); opacity: 1; }

/* ── 12. Lista plana de items de la unidad (.ej-list) ─────────────────
   Patrón unificado heredado de CCSS-1BTL: una lista de enlaces a apuntes,
   fichas, ejercicios o sub-páginas dentro de una unidad. Cada item tiene:
     <span class="num"> número/etiqueta + <span class="ttl"> título + <span class="arr"> flecha
   ─────────────────────────────────────────────────────────────────── */
.ej-list {
  display: flex; flex-direction: column;
  gap: 0.6rem; margin-top: 1rem;
}
.ej-list a {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.8rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-decoration: none; color: var(--text);
  transition: all 0.15s;
}
.ej-list a:hover {
  border-color: #6366f1;
  transform: translateX(2px);
}
.ej-list .num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 1.7rem;
  padding: 0 0.55rem;
  background: #10b981; color: #fff;
  border-radius: 99px;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  flex: 0 0 auto;
}
/* Variantes de color del num por tipo de contenido */
.ej-list a.tipo-apuntes  .num { background: #0891b2; }
.ej-list a.tipo-ficha    .num { background: #10b981; }
.ej-list a.tipo-examen   .num { background: #d97706; }
.ej-list a.tipo-syllabus .num { background: #6366f1; }
.ej-list .ttl { font-weight: 500; flex: 1; min-width: 0; }
.ej-list .meta {
  font-family: var(--mono); font-size: 0.72rem;
  color: var(--text-faint);
  flex: 0 0 auto;
}
.ej-list .arr { margin-left: auto; color: var(--text-soft); font-size: 0.85rem; flex: 0 0 auto; }

/* Cabecera tipo CCSS para una unidad (sustituye al grid de cards) */
.unidad-header {
  padding-top: 0; border-bottom: none; margin-bottom: 1.2rem;
}
.unidad-header-meta {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.unidad-header-titulo { margin: 0; }
.unidad-header-intro {
  color: var(--text-soft);
  margin: 0.4rem 0 0; font-size: 0.95rem;
}

/* ── 13. Tags del syllabus dentro de una unidad ──────────────────────── */
.syllabus-cubierto {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0.8rem 0 0;
}
.syllabus-tag {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 0.74rem;
  padding: 0.25rem 0.55rem; border-radius: 4px;
  text-decoration: none; transition: background 0.12s;
}
.syllabus-tag.nm   { background: rgba(8,145,178,0.12); color: #0e7490; }
.syllabus-tag.tans { background: rgba(217,119,6,0.15); color: #b45309; }
.syllabus-tag:hover { opacity: 0.85; }
[data-theme="dark"] .syllabus-tag.nm   { background: rgba(8,145,178,0.22); color: #67e8f9; }
[data-theme="dark"] .syllabus-tag.tans { background: rgba(217,119,6,0.22); color: #fbbf24; }

/* (.aula-toc eliminada — el sitio no usa TOC en ninguna página, todas las
    fichas y apuntes muestran los ítems directamente en el orden pedagógico) */

/* ── 14. Toolbar de ficha (descarga PDF, etc.) — patrón CCSS ──────────── */
.fitxa-toolbar {
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
  margin: 1rem 0 1.6rem;
  padding: 0.8rem 1rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.fitxa-toolbar .label {
  font-size: 0.86rem; color: var(--text-soft); margin-right: 0.4rem;
}
.fitxa-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: #6366f1; color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.86rem; font-weight: 500;
  border: none; cursor: pointer;
  transition: background 0.15s;
}
.fitxa-btn:hover { background: #4f46e5; }
.fitxa-btn.secondary {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border);
}
.fitxa-btn.secondary:hover {
  border-color: #6366f1; color: #6366f1;
}

/* ── 15. Detalle de solución — patrón CCSS exacto ─────────────────────
   En las fichas/fitxes el patrón usa <details> directo dentro de .ejercicio,
   sin necesidad de class="solucion". Estilo subordinado, sin recuadro propio.
   ─────────────────────────────────────────────────────────────────── */
.ejercicio details {
  margin-top: 0.4rem;
}
.ejercicio details > summary {
  cursor: pointer; user-select: none;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  font-size: 0.95rem;
  list-style: none;
  display: flex; align-items: baseline; gap: 0.5rem;
  transition: background 0.15s;
}
.ejercicio details > summary:hover { background: rgba(99,102,241,0.06); }
.ejercicio details > summary::-webkit-details-marker { display: none; }
.ejercicio details > summary::before {
  content: "▶"; font-size: 0.65em; color: #6366f1;
  transition: transform 0.15s;
  display: inline-block; flex-shrink: 0;
}
.ejercicio details[open] > summary::before { transform: rotate(90deg); }
.ejercicio details .solucion-cuerpo,
.ejercicio details > div {
  padding: 0.3rem 0.55rem 0.5rem; line-height: 1.65; color: var(--text);
}
.ejercicio details > div p { margin: 0.45rem 0; }

/* Caja destacada para la respuesta final dentro de una solución */
.ejercicio details .final {
  margin-top: 0.7rem; padding: 0.55rem 0.85rem;
  background: rgba(16,185,129,0.08);
  border-left: 3px solid #10b981;
  border-radius: 0 6px 6px 0;
  font-weight: 500;
}
[data-theme="dark"] .ejercicio details .final { background: rgba(16,185,129,0.15); }