/* content.css — classes pedagógicas (NOVAS no app-v2).
 *
 * Cada box é um CARD SÓLIDO com:
 *   1. header com gradient (left → right) na cor do tipo
 *   2. ícone em quadradinho + label uppercase
 *   3. corpo em fonte de conteúdo (Inter)
 *   4. borda colorida sutil + sombra interna
 *
 * Boxes podem aparecer:
 *   • inline (default) — entre parágrafos, full-width
 *   • na margem (.margin-note ou <aside>) — flutua à direita em telas largas
 *
 * Substitui as classes do Let's Studiar (.concepto-clave/.clinical/.recorda/.ejemplo/.analogia).
 * Mapa em docs/CURATION-MINI.md.
 */

/* ============ base de todos os boxes ============ */
.key-concept,
.clinic-note,
.memory-aid,
.example,
.analogy,
.integration {
  --c: var(--c-key-concept);
  margin: var(--sp-5) 0;
  background: var(--bg-elev);
  border: 1px solid var(--c);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
  font-size: var(--content-fs);
}

/* header (faixa colorida com ícone + label) */
.key-concept::before,
.clinic-note::before,
.memory-aid::before,
.example::before,
.analogy::before,
.integration::before {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 22%, transparent),
    color-mix(in srgb, var(--c) 4%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, var(--border));
  color: var(--c);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* El espacio interior lo da la caja, no los hijos.
 *
 * Antes la caja tenía padding:0 y cada hijo llevaba margin-left/right. Con un
 * hijo inline (<em>, <strong>, texto suelto) el margen se aplica una sola vez
 * por caja de línea: al quebrar, la continuación arrancaba pegada al borde y
 * se veía fuera del recuadro. Con padding en el contenedor, todo el contenido
 * —inline incluido— queda dentro.
 *
 * El encabezado (::before) cancela ese padding con márgenes negativos para
 * seguir yendo de borde a borde.
 */
.key-concept,
.clinic-note,
.memory-aid,
.example,
.analogy,
.integration {
  padding: var(--sp-3) var(--sp-4);
}

.key-concept::before,
.clinic-note::before,
.memory-aid::before,
.example::before,
.analogy::before,
.integration::before {
  margin: calc(var(--sp-3) * -1) calc(var(--sp-4) * -1) var(--sp-3);
}

.key-concept > *:first-child,
.clinic-note > *:first-child,
.memory-aid > *:first-child,
.example > *:first-child,
.analogy > *:first-child,
.integration > *:first-child { margin-top: 0; }

.key-concept > *:last-child,
.clinic-note > *:last-child,
.memory-aid > *:last-child,
.example > *:last-child,
.analogy > *:last-child,
.integration > *:last-child { margin-bottom: 0; }

/* ============ tipos (cores + ícones via content-string) ============ */
.key-concept   { --c: var(--c-key-concept); }
.key-concept::before { content: "≡  Concepto-clave"; }

.clinic-note   { --c: var(--c-clinic-note); }
/* ⊕ (U+2295, Operadores Matemáticos) en vez de ♥ (U+2665): el heart suit
   tiene presentación emoji en iOS/Android — exactamente los dispositivos de
   estos estudiantes — y puede aparecer a color (Minor 6 del review final).
   Mismo bloque Unicode que ≡ y ≈ de acá arriba, ninguno de los dos con
   variante emoji. */
.clinic-note::before { content: "⊕  Clínica"; }

.memory-aid    { --c: var(--c-memory-aid); }
.memory-aid::before { content: "★  Memo"; }

.example       { --c: var(--c-example); }
.example::before { content: "▸  Ejemplo"; }

.analogy       { --c: var(--c-analogy); }
.analogy::before { content: "≈  Analogía"; }

.integration   { --c: var(--c-integration); border-style: dashed; }
/* ⋈ (U+22C8 BOWTIE, símbolo de "join" — Operadores Matemáticos) en vez de ↔
   (U+2194): la flecha doble tiene presentación emoji en iOS/Android, mismo
   riesgo que ♥ arriba (Minor 6 del review final). */
.integration::before { content: "⋈  Integración"; }

/* ============ ênfases inline ============ */
.content strong, .key-concept strong, .clinic-note strong,
.memory-aid strong, .example strong, .analogy strong, .integration strong {
  color: var(--fg-strong);
  font-weight: 600;
}

.content em { color: var(--accent); font-style: italic; }

/* ============ tabelas dentro de conteúdo ============ */
/* Las tablas curadas pueden ser más anchas que su columna —una llega a 97
   columnas—. Cada una scrollea dentro de su propio contenedor en vez de
   empujar el documento entero (ver src/core/curatedHtml.js · wrapTables). */
.table-scroll {
  overflow-x: auto;
  margin: var(--sp-4) 0;
  -webkit-overflow-scrolling: touch;
}
/* overflow-x:auto arriba crea un nuevo contexto de formato de bloque: el
   margin de la <table> envuelta ya NO colapsa con el margin de .table-scroll,
   se suma. src/styles/base.css pone `table { margin: var(--sp-3) 0 }` como
   reset global, así que sin esto toda tabla envuelta quedaría con sp-3 + sp-4
   de hueco en vez de solo sp-4. Anula ese reset para cualquier tabla ya
   envuelta (da igual el feature — aprender/summary/actividades). */
.table-scroll table {
  margin: 0;
}
.content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.content thead th {
  background: var(--bg-muted);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
.content tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.content tbody tr:last-child td { border-bottom: none; }
.content tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
.content td:first-child {
  color: var(--fg-strong);
  font-weight: 500;
}
/* números em colunas que não são a primeira → mono */
.content tbody td:not(:first-child) { font-family: var(--font-mono); }

/* ============ figures ============ */
.content figure {
  margin: var(--sp-5) 0;
  padding: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.content figure img,
.content figure svg { display: block; max-width: 100%; height: auto; margin: 0; border: none; border-radius: 0; }

/* Imagen suelta (sin <figure>): las figuras de libro vienen muy verticales y
   sin techo de altura ocupan varias pantallas. Se limita a 72vh manteniendo la
   proporción, para que siempre entre junto a algo de texto. */
.content > img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  margin: var(--sp-5) auto;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.content figcaption {
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  font-style: normal;
}

/* ============ HY (high-yield prov de exam) ============ */
.hy-tag {
  display: inline-block;
  background: color-mix(in srgb, var(--c-key-concept) 15%, transparent);
  color: var(--c-key-concept);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
}

/* ============ pills (listas curtas inline) ============ */
.content .pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
  color: var(--fg-muted);
  margin: 0 2px;
}

/* ============ margin-note (callout que flutua na margem direita) ============
 * Uso: <aside class="margin-note key-concept">…</aside>
 * Em telas largas (≥1100px): float right dentro da coluna do article.
 * Em telas estreitas: cai pra inline normal (default block do <aside>).
 */
.margin-note {
  font-size: var(--fs-sm);
}
@media (min-width: 1100px) {
  .margin-note {
    float: right;
    width: 220px;
    margin-left: var(--sp-5);
    margin-right: 0;
    clear: right;
    shape-outside: margin-box;
  }
}