/* ══════════════════════════════════════════════════════════════════════════
 * escuela.css — La carcasa de una lección de la Escuela de IA.
 *
 * Aquí vive SÓLO lo que comparten TODAS las lecciones: la cabecera verde, el
 * cuerpo del texto, los tres avisos (clave / prohibido / ok), las tablas y la
 * lista de comprobación del final. Lo que es de una lección concreta —el
 * taller, el clasificador, los casos— sigue en su `<style>` propio.
 *
 * ⚠️ POR QUÉ EXISTE. Estas 18 reglas estaban copiadas en las 12 páginas, o sea
 * 216 líneas repetidas, y con 15 lecciones de Nivel 1 serían más de 500. Dos
 * copias de un estilo no dan error: lo que hacen es **desviarse**, y entonces
 * una lección se maqueta distinta que las demás sin que nadie sepa por qué.
 *
 * ⚠️ Una lección NO vuelve a declarar `.lec-head`, `.lec-body`, `.clave`,
 * `.prohibido`, `.ok` ni `.checklist` en su `<style>`. Lo comprueba
 * `tests/escuela-privada.mjs`.
 *
 * ⚠️ `/assets/css/` ya tiene su regla de `Cache-Control` en `vercel.json`
 * (lección #27), así que este fichero revalida solo. NO lleva `?v=`.
 * ══════════════════════════════════════════════════════════════════════════ */

.lec-head{background:linear-gradient(135deg,#064e3b,#047857);color:#fff;padding:2.4rem 1.2rem 2rem;text-align:center}
.lec-head h1{font-size:clamp(1.5rem,4vw,2.2rem);margin:.5rem 0 .6rem;line-height:1.2}
.lec-head .ruta{font-size:.82rem;opacity:.9}
.lec-head .ruta a{color:#fff;font-weight:700}

.lec-body{font-size:1.02rem;line-height:1.75;width:100%}
.lec-body h2{margin:2.2rem 0 .7rem;font-size:1.28rem}
.lec-body h3{margin:1.5rem 0 .4rem;font-size:1.05rem}
.lec-body ul,.lec-body ol{padding-left:1.35rem;margin:0 0 1.1rem}
.lec-body li{margin-bottom:.4rem}

/* Los tres avisos. El color ES la información: ámbar = lo esencial,
   rojo = lo que no se hace, verde = la regla que resume. */
.clave{border-left:4px solid #d97706;background:#fffbeb;padding:1rem 1.15rem;border-radius:0 8px 8px 0;margin:1.4rem 0}
.clave strong{color:#92400e}
.prohibido{border-left:4px solid #b91c1c;background:#fef2f2;padding:1rem 1.15rem;border-radius:0 8px 8px 0;margin:1.4rem 0}
.prohibido strong{color:#991b1b}
.ok{border-left:4px solid #059669;background:#ecfdf5;padding:1rem 1.15rem;border-radius:0 8px 8px 0;margin:1.4rem 0}

/* ⚠️ La tabla va en su contenedor con scroll propio: a 390 px una tabla de
   dos columnas con prosa dentro empuja la página entera (lección #17). */
.tabla-wrap{overflow-x:auto;margin:1.2rem 0;border:1px solid #e5e7eb;border-radius:10px}
table.qe{border-collapse:collapse;width:100%;font-size:.92rem;min-width:520px}
table.qe th,table.qe td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid #f1f5f4;vertical-align:top}
table.qe thead th{background:#f8fafa;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}
table.qe tbody tr:last-child td{border-bottom:none}

.checklist{list-style:none;padding:0}
.checklist li{padding-left:1.8rem;position:relative;margin-bottom:.55rem}
.checklist li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#059669;position:absolute;left:0;top:.1rem}

/* Una URL o un DOI son palabras indivisibles y fijan el ancho de la página
   si no se les dice lo contrario (lección #17). */
.lec-body code{overflow-wrap:anywhere}

.dark-mode .clave{background:#2a2009;border-left-color:#b45309}
.dark-mode .prohibido{background:#2a1212}
.dark-mode .ok{background:#0d2620}
.dark-mode .tabla-wrap{background:#111827;border-color:#374151}
.dark-mode table.qe thead th{background:#0f172a}
.dark-mode table.qe th,.dark-mode table.qe td{border-color:#1f2937}

/* ═══ Lecciones largas del Nivel 4 ═══════════════════════════════════════
   ⚠️ Estaban INLINE en cada página. Con 24 páginas de N4 eso son 24 copias
   que se desvían solas (lección #68.bis): una lección se maqueta distinta
   y nadie sabe por qué. Aquí, y sin `?v=` — /assets/css/ ya revalida (#27).
   ═══════════════════════════════════════════════════════════════════════ */
/* ── Pasos numerados ─────────────────────────────────────────── */
.p-lista{counter-reset:p;list-style:none;padding:0;margin:1.4rem 0}
.p-lista > li{counter-increment:p;position:relative;padding:.1rem 0 1.6rem 2.6rem;border-left:2px solid #d1fae5;margin-left:.75rem}
.p-lista > li:last-child{border-left-color:transparent;padding-bottom:0}
.p-lista > li::before{content:counter(p);position:absolute;left:-1.05rem;top:0;width:2rem;height:2rem;border-radius:50%;background:#047857;color:#fff;font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center}
.p-lista h3{margin:.15rem 0 .5rem;font-size:1.05rem}
.p-lista h4{margin:1rem 0 .3rem;font-size:.95rem}

/* ── Código ──────────────────────────────────────────────────── */
.cod{background:#0f172a;color:#e2e8f0;border-radius:10px;padding:1rem 1.1rem;font-size:.85rem;line-height:1.65;overflow-x:auto;margin:.9rem 0}
.cod code{color:inherit;background:none;padding:0;white-space:pre}
.cod-tit{display:block;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8;margin-bottom:.5rem}
.cod .c{color:#64748b}
.cod .k{color:#f0abfc}
.cod .s{color:#86efac}
.cod .n{color:#fbbf24}

/* ── Terminal ────────────────────────────────────────────────── */
.term{background:#111827;color:#d1d5db;border-radius:10px;padding:.9rem 1.05rem;font-size:.84rem;line-height:1.7;overflow-x:auto;margin:.9rem 0;border-left:3px solid #4b5563}
.term code{color:inherit;background:none;padding:0;white-space:pre}
.term .pr{color:#34d399}

/* ── Diagramas ───────────────────────────────────────────────── */
.fig{margin:1.6rem 0;text-align:center}
.fig svg{max-width:100%;height:auto}
.fig figcaption{font-size:.85rem;color:#6b7280;margin-top:.6rem;text-align:left;line-height:1.55}

/* ── Avisos y cajas ──────────────────────────────────────────── */
.porque{border-left:4px solid #6366f1;background:#eef2ff;padding:.95rem 1.1rem;border-radius:0 8px 8px 0;margin:1.2rem 0;font-size:.95rem;line-height:1.65}
.porque strong{color:#4338ca}
.coste{border:1px dashed #d97706;border-radius:10px;padding:.9rem 1.05rem;margin:1.2rem 0;font-size:.93rem;background:#fffbeb}
.coste strong{color:#92400e}
.indice{border:1px solid #e5e7eb;border-radius:12px;padding:1.1rem 1.3rem;margin:1.6rem 0;background:#fbfdfc}
.indice h2{margin:0 0 .5rem;font-size:1rem}
.indice ol{margin:0;padding-left:1.2rem;font-size:.93rem;line-height:1.85}
.indice a{color:#047857;font-weight:600;text-decoration:none}
.lectura{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:700;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:.25rem .8rem}

.dark-mode .p-lista > li{border-left-color:#065f46}
.dark-mode .porque{background:#1e1b4b}
.dark-mode .porque strong{color:#a5b4fc}
.dark-mode .coste{background:#2a2009}
.dark-mode .indice{background:#111827;border-color:#374151}
.dark-mode .fig figcaption{color:#9ca3af}

/* Pasos numerados de las lecciones antiguas del N4 — mismo aspecto que
   `.p-lista`, con el nombre que ya usan sus páginas. */
.n4-pasos{counter-reset:p;list-style:none;padding:0;margin:1.3rem 0}
.n4-pasos > li{counter-increment:p;position:relative;padding:.1rem 0 1.15rem 2.5rem;border-left:2px solid #d1fae5;margin-left:.75rem}
.n4-pasos > li:last-child{border-left-color:transparent;padding-bottom:0}
.n4-pasos > li::before{content:counter(p);position:absolute;left:-1.05rem;top:0;width:2rem;height:2rem;border-radius:50%;background:#047857;color:#fff;font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center}
.n4-pasos h3{margin:.15rem 0 .35rem;font-size:1.02rem}
.n4-coste{font-size:.83rem;color:#6b7280;display:block;margin-top:.3rem}
.dark-mode .n4-pasos > li{border-left-color:#065f46}
.dark-mode .n4-coste{color:#9ca3af}

/* ── Trastos de la serie de agentes ───────────────────────────────────────
   El simulador del bucle (`que-es-un-agente`) y el validador de contratos
   (`herramientas-del-agente`). Van aquí y no inline en las cuatro páginas
   —dos idiomas × dos lecciones— porque cuatro copias de un estilo se desvían
   solas y entonces un trasto se maqueta distinto que el otro sin que nadie
   sepa por qué (lección #68.bis). Sin `?v=`: /assets/css/ ya revalida (#27). */
.trasto{border:1px solid #d1fae5;border-radius:14px;padding:1.1rem 1.2rem;margin:1.6rem 0;background:#fbfdfc}
.trasto h3{margin:0 0 .2rem;font-size:1.02rem}
.trasto .sub{margin:0 0 .9rem;font-size:.87rem;color:#6b7280;line-height:1.55}
.trasto .campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:.7rem .9rem}
/* ⚠️ `min-width:0` en los items: los de grid llevan `min-width:auto` y un
   campo largo empuja la página entera (lección #17). */
.trasto .campos > label{display:flex;flex-direction:column;gap:.25rem;font-size:.82rem;font-weight:700;color:#374151;min-width:0}
.trasto input,.trasto select,.trasto textarea{width:100%;min-width:0;font:inherit;font-size:.92rem;font-weight:400;padding:.42rem .55rem;border:1px solid #d1d5db;border-radius:8px;background:#fff;color:#111827}
.trasto textarea{min-height:150px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.5;resize:vertical}
.trasto .pie{font-size:.8rem;color:#6b7280;margin:.65rem 0 0;line-height:1.6}
.trasto .botones{display:flex;flex-wrap:wrap;gap:.5rem;margin:.9rem 0 0}
.trasto button{font:inherit;font-size:.85rem;font-weight:700;padding:.45rem .9rem;border-radius:8px;border:1px solid #047857;background:#047857;color:#fff;cursor:pointer}
.trasto button.sec{background:#fff;color:#047857}
.trasto .marcas{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;margin:1.1rem 0 0;padding:.85rem 0 0;border-top:1px solid #e5e7eb}
.trasto .marca{min-width:0}
.trasto .marca b{display:block;font-size:1.32rem;line-height:1.2;color:#065f46;overflow-wrap:anywhere}
.trasto .marca span{display:block;font-size:.76rem;color:#6b7280}
.trasto .vueltas{list-style:none;padding:0;margin:1rem 0 0;font-size:.8rem}
.trasto .vueltas li{display:grid;grid-template-columns:2.6rem 1fr 5.4rem;align-items:center;gap:.5rem;padding:.14rem 0}
.trasto .vueltas i{font-style:normal;color:#6b7280}
.trasto .barra{height:9px;border-radius:99px;background:#a7f3d0;min-width:2px}
.trasto .vueltas em{font-style:normal;text-align:right;color:#374151;font-variant-numeric:tabular-nums}
.trasto .avisos{list-style:none;padding:0;margin:1rem 0 0;font-size:.86rem;line-height:1.6}
.trasto .avisos li{border-left:4px solid #d97706;background:#fffbeb;padding:.5rem .75rem;border-radius:0 8px 8px 0;margin:.4rem 0}
.trasto .avisos li.grave{border-left-color:#b91c1c;background:#fef2f2}
.trasto .avisos li.ok{border-left-color:#047857;background:#ecfdf5}
.dark-mode .trasto{background:#111827;border-color:#374151}
.dark-mode .trasto input,.dark-mode .trasto select,.dark-mode .trasto textarea{background:#1f2937;border-color:#4b5563;color:#e5e7eb}
.dark-mode .trasto .campos > label{color:#d1d5db}
.dark-mode .trasto .marca b{color:#6ee7b7}
.dark-mode .trasto .avisos li{background:#2a2009}
.dark-mode .trasto .avisos li.grave{background:#2a1010}
.dark-mode .trasto .avisos li.ok{background:#052e22}

/* ── Casos prácticos del Nivel 4 ──────────────────────────────────────────
   Un caso no se maqueta como una lección: se lee CON EL CHAT ABIERTO AL LADO,
   así que lo que manda es que se distinga de un vistazo la situación, el paso
   en el que vas, el texto que hay que pegar y lo que hay que mirar después.
   Va aquí y no inline porque son 46 páginas (#68.bis). Sin `?v=`: /assets/css/
   ya revalida por cabecera (#27). */
.caso-sit{border-left:4px solid #047857;background:#ecfdf5;border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1.4rem 0;font-size:.97rem;line-height:1.7}
.caso-sit strong{color:#065f46}
.caso-meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.caso-meta span{font-size:.78rem;font-weight:700;border-radius:999px;padding:.22rem .7rem;background:#f3f4f6;color:#374151;border:1px solid #e5e7eb}
.caso-meta .n{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}

/* El prompt: caja copiable. La barra la monta escuela-prompt.js. */
.prompt{border:1px solid #d1d5db;border-radius:12px;margin:1.2rem 0;background:#f9fafb;overflow:hidden}
.prompt-barra{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;background:#eef2ff;border-bottom:1px solid #d1d5db}
.prompt-etq{font-size:.78rem;font-weight:800;color:#3730a3;text-transform:uppercase;letter-spacing:.03em}
.prompt-copiar{font:inherit;font-size:.8rem;font-weight:700;padding:.32rem .8rem;border-radius:7px;border:1px solid #4338ca;background:#4338ca;color:#fff;cursor:pointer;flex:none}
.prompt-copiar.ok{background:#047857;border-color:#047857}
.prompt pre{margin:0;padding:.95rem 1.05rem;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;color:#111827}
.prompt-manual{width:100%;min-height:120px;border:0;border-top:1px solid #d1d5db;padding:.7rem 1.05rem;font-family:ui-monospace,monospace;font-size:.8rem}
.prompt .rell{background:#fef3c7;border-radius:4px;padding:0 .18rem;font-weight:700}

/* Lo que hay que mirar en la respuesta, y lo que sale mal. */
.comprobar{border:1px solid #a7f3d0;border-radius:12px;padding:1rem 1.2rem;margin:1.4rem 0;background:#fbfdfc}
.comprobar h3{margin:0 0 .5rem;font-size:.98rem;color:#065f46}
.comprobar ul{margin:0;padding-left:1.25rem;font-size:.94rem;line-height:1.8}
.falla{border-left:4px solid #b45309;background:#fffbeb;border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.94rem;line-height:1.7}
.falla strong{color:#92400e}
.tuyo{border:2px dashed #047857;border-radius:12px;padding:1.1rem 1.25rem;margin:1.6rem 0;background:#ecfdf5;font-size:.97rem;line-height:1.7}
.tuyo strong{color:#065f46}

.dark-mode .caso-sit{background:#052e22}
.dark-mode .caso-meta span{background:#1f2937;color:#d1d5db;border-color:#374151}
.dark-mode .caso-meta .n{background:#052e22;color:#6ee7b7;border-color:#065f46}
.dark-mode .prompt{background:#111827;border-color:#374151}
.dark-mode .prompt-barra{background:#1e1b4b;border-bottom-color:#374151}
.dark-mode .prompt-etq{color:#a5b4fc}
.dark-mode .prompt pre{color:#e5e7eb}
.dark-mode .comprobar{background:#111827;border-color:#065f46}
.dark-mode .falla{background:#2a2009}
.dark-mode .tuyo{background:#052e22}

/* ═══════════════════════════════════════════════════════════════════════════
 * Índice de casos prácticos (/ia/casos y /en/ai/cases)
 *
 * ⚠️ `scroll-margin-top` en los grupos: el nav es fijo, así que un enlace con
 * ancla desde el hub (#numeros) dejaría el titular medio tapado por la barra.
 * Es la misma lección #25, y sólo se ve probándolo en un navegador.
 * ═══════════════════════════════════════════════════════════════════════════ */
.cs-grupo{margin:2.2rem 0 0;scroll-margin-top:5rem}
.cs-grupo h2{font-size:1.15rem;margin:0 0 .3rem;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.cs-grupo h2 i{color:#059669}
.cs-cuenta{font-size:.72rem;font-weight:800;letter-spacing:.06em;color:#047857;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:.12rem .5rem}
.cs-intro{color:#6b7280;font-size:.92rem;margin:0 0 .7rem;line-height:1.6}
.cs-lista{list-style:none;padding:0;margin:0}
.cs-lista li{border-bottom:1px solid #eef2f0}
.cs-lista li:last-child{border-bottom:none}
.cs-lista a{display:block;padding:.8rem .6rem;text-decoration:none;border-radius:8px;min-width:0}
.cs-lista a:hover{background:#f0fdf4}
.cs-nombre{display:block;font-weight:700;color:#047857;line-height:1.4}
.cs-desc{display:block;font-size:.88rem;color:#6b7280;margin-top:.2rem;line-height:1.6}

.dark-mode .cs-cuenta{background:#052e22;color:#6ee7b7;border-color:#065f46}
.dark-mode .cs-lista li{border-color:#374151}
.dark-mode .cs-lista a:hover{background:#111827}
.dark-mode .cs-nombre{color:#6ee7b7}

/* ═══════════════════════════════════════════════════════════════════════════
 * Página de venta de IA Premium (/ia/premium y /en/ai/premium)
 * ═══════════════════════════════════════════════════════════════════════════ */
.pr-hero{background:linear-gradient(135deg,#312e81,#4338ca);color:#fff;padding:3rem 1.2rem 2.4rem;text-align:center}
.pr-hero h1{font-size:clamp(1.8rem,5vw,2.6rem);margin:.6rem 0 .8rem;line-height:1.15}
.pr-hero p{max-width:44rem;margin:0 auto;opacity:.96;font-size:1.02rem;line-height:1.6}
.pr-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:.32rem .85rem;font-size:.8rem;font-weight:700}
.pr-idioma{margin-top:1.2rem;font-size:.85rem}
.pr-idioma a{color:#fff;font-weight:700}

/* El aviso de que NO es el Premium de la web. Ámbar y arriba del todo: es lo
   que hay que leer antes del precio, no la letra pequeña de después. */
.pr-ojo{border:2px solid #d97706;background:#fffbeb;border-radius:12px;padding:1.1rem 1.25rem;margin:0 0 1.8rem}
.pr-ojo-tit{margin:0 0 .5rem;font-weight:800;color:#92400e;font-size:1.02rem}
.pr-ojo p{margin:0 0 .6rem;line-height:1.7;font-size:.96rem}
.pr-ojo-pie{margin:.7rem 0 0;font-size:.88rem;color:#78350f}

/* ⚠️ La tabla va en su envoltorio con scroll propio: en 320 px una tabla de
   tres columnas empuja la página entera y el desborde aparece lejos de aquí
   (lección #17). */
.pr-tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.5rem 0}
.pr-tabla{border-collapse:collapse;width:100%;min-width:34rem;font-size:.9rem}
.pr-tabla th,.pr-tabla td{border:1px solid #fcd34d;padding:.5rem .7rem;text-align:left;vertical-align:top}
.pr-tabla thead th{background:#fef3c7;font-weight:800;color:#92400e}
.pr-tabla td:first-child{font-weight:700;white-space:nowrap}

.pr-compra{border:1px solid var(--border,#e5e7eb);border-radius:14px;padding:1.6rem 1.3rem;text-align:center;background:#fff;margin:0 0 2rem}
.pr-precio{margin:0;font-weight:800;line-height:1}
.pr-precio .n{font-size:clamp(2.6rem,9vw,3.4rem);color:#4338ca}
.pr-precio .cur{font-size:1.6rem;color:#4338ca}
.pr-precio .una{display:block;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-top:.4rem}
.pr-precio-nota{margin:.8rem auto 0;max-width:30rem;font-size:.92rem;color:#4b5563;line-height:1.6}
.pr-btns{margin:1.2rem 0 0}
.pr-cta{display:inline-flex;align-items:center;gap:.5rem;background:#4338ca;color:#fff;font-weight:800;padding:.85rem 1.7rem;border-radius:10px;text-decoration:none;font-size:1.02rem}
.pr-cta:hover{background:#3730a3}
.pr-seguro{margin:.9rem 0 0;font-size:.82rem;color:#6b7280}
.pr-sesion{margin:1rem 0 0}
.pr-aviso{display:block;font-size:.92rem;line-height:1.6;color:#4b5563}
.pr-aviso--ok{color:#065f46;font-weight:700}
.pr-aviso--mal{color:#991b1b;font-weight:700}
.pr-aviso-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem}
.pr-alt{border:1px solid #c7d2fe;color:#4338ca;font-weight:700;padding:.5rem 1rem;border-radius:8px;text-decoration:none;font-size:.9rem}

/* El desglose de lo que se abre. */
.dg-intro{font-size:1rem;color:#4b5563;line-height:1.7;margin:0 0 1.2rem}
.dg-grupo{margin:1.6rem 0 0}
.dg-grupo h3{font-size:1rem;margin:0 0 .5rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.dg-grupo h3 i{color:#4338ca}
.dg-lista{list-style:none;padding:0;margin:0}
.dg-lista li{border-bottom:1px solid #eef2f0;padding:.6rem 0;min-width:0}
.dg-lista li:last-child{border-bottom:none}
.dg-lista a{font-weight:700;text-decoration:none;color:#4338ca}
.dg-desc{display:block;font-size:.85rem;color:#6b7280;margin-top:.15rem;line-height:1.55}

.dark-mode .pr-ojo{background:#2a2009;border-color:#b45309}
.dark-mode .pr-tabla thead th{background:#3a2a06;color:#fcd34d}
.dark-mode .pr-tabla th,.dark-mode .pr-tabla td{border-color:#78350f}
.dark-mode .pr-compra{background:#111827;border-color:#374151}
.dark-mode .dg-lista li{border-color:#374151}
.dark-mode .dg-lista a{color:#a5b4fc}

/* ═══════════════════════════════════════════════════════════════════════════
 * Casos prácticos — ejemplo trabajado, variantes y problemas
 *
 * ⚠️ La respuesta de la IA va con marca visual propia y no como una cita
 * cualquiera: el lector tiene que distinguir de un vistazo qué lo decimos
 * nosotros y qué lo ha escrito un modelo. Es la misma decisión que la #26
 * —la IA y el dataset curado no pueden verse igual— aplicada aquí.
 * ═══════════════════════════════════════════════════════════════════════════ */
.ej-resp{border:1px solid #c7d2fe;border-left:4px solid #6366f1;background:#f8f9ff;border-radius:0 10px 10px 0;padding:.9rem 1.1rem;margin:1rem 0}
.ej-etq{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4338ca;margin-bottom:.4rem}
.ej-resp p{margin:0 0 .6rem;font-size:.94rem;line-height:1.7}
.ej-resp p:last-child{margin-bottom:0}
.ej-fallos{margin:.6rem 0 1.2rem;padding-left:1.3rem;line-height:1.75}
.ej-fallos li{margin-bottom:.6rem}
.ej-fallos strong{color:#92400e}

.var{border-left:3px solid #059669;padding:.2rem 0 .2rem .9rem;margin:.9rem 0;font-size:.95rem;line-height:1.7}
.var strong{color:#065f46;display:block;margin-bottom:.15rem}

.prob{border:1px solid var(--border,#e5e7eb);border-radius:10px;padding:.85rem 1rem;margin:.9rem 0}
.prob-sint{font-weight:700;color:#991b1b;font-size:.94rem;margin-bottom:.35rem}
.prob-fix{font-size:.94rem;line-height:1.7;color:#374151}

.dark-mode .ej-resp{background:#111827;border-color:#3730a3}
.dark-mode .ej-etq{color:#a5b4fc}
.dark-mode .prob{background:#111827;border-color:#374151}
.dark-mode .prob-fix{color:#d1d5db}