/* ═══════════════════════════════════════════════════════════════════════
   ECPRYM · Capa de diseño institucional
   Se carga DESPUÉS de style.css y no reescribe sus reglas: sólo añade el
   sistema de color, la tipografía de cifras, las tarjetas de KPI, la barra
   de progreso de lectura y los contenedores de figuras.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --ecp-marino:  #0B192C;
    --ecp-marino-2:#16304F;
    --ecp-esmeral: #00875A;
    --ecp-esmeral-c:#E4F4EE;
    --ecp-ambar:   #B8860B;
    --ecp-ambar-c: #FBF2DE;
    --ecp-platino: #8A94A6;
    --ecp-platino-c:#EEF1F5;
    --ecp-agua:    #1C6DD0;
    --ecp-rojo:    #B3261E;
    --ecp-papel:   #F7F9FC;
    --ecp-borde:   rgba(11, 25, 44, 0.12);
    --ecp-sombra:  0 1px 2px rgba(11,25,44,.06), 0 8px 24px rgba(11,25,44,.07);
    --ecp-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
    --ecp-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Barra de progreso de lectura ──────────────────────────────────────── */
#ecp-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--ecp-esmeral), var(--ecp-agua));
    z-index: 9999; transition: width .12s linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #ecp-progress { transition: none; } }

/* ── Selector de modo de lectura ───────────────────────────────────────── */
.ecp-modes { display: flex; gap: 6px; margin: 14px 0 18px; flex-wrap: wrap; }
.ecp-modes button {
    font-family: var(--ecp-sans); font-size: 12px; font-weight: 600;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--ecp-borde); background: #fff; color: var(--ecp-marino);
    transition: background .15s, color .15s, border-color .15s;
}
.ecp-modes button:hover { border-color: var(--ecp-marino); }
.ecp-modes button[aria-pressed="true"] {
    background: var(--ecp-marino); color: #fff; border-color: var(--ecp-marino);
}
.ecp-modes button:focus-visible { outline: 3px solid var(--ecp-agua); outline-offset: 2px; }

/* Modo ejecutivo: sólo lo esencial. Modo didáctico: se resaltan las notas. */
body[data-ecp-mode="ejecutivo"] .ecp-tecnico { display: none; }
body[data-ecp-mode="didactico"] .ecp-nota {
    background: var(--ecp-esmeral-c); border-left: 4px solid var(--ecp-esmeral);
    padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 14px 0;
}

/* ── Tarjetas de KPI ───────────────────────────────────────────────────── */
.ecp-kpis {
    display: grid; gap: 12px; margin: 20px 0 26px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ecp-kpi {
    background: #fff; border: 1px solid var(--ecp-borde); border-radius: 12px;
    padding: 16px 18px; box-shadow: var(--ecp-sombra); position: relative;
    border-top: 3px solid var(--ecp-platino);
}
.ecp-kpi[data-tono="verde"]  { border-top-color: var(--ecp-esmeral); }
.ecp-kpi[data-tono="ambar"]  { border-top-color: var(--ecp-ambar); }
.ecp-kpi[data-tono="marino"] { border-top-color: var(--ecp-marino); }
.ecp-kpi[data-tono="agua"]   { border-top-color: var(--ecp-agua); }
.ecp-kpi-label {
    font-family: var(--ecp-sans); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--ecp-platino);
}
.ecp-kpi-val {
    font-family: var(--ecp-mono); font-size: 26px; font-weight: 700;
    color: var(--ecp-marino); margin: 6px 0 2px; line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ecp-kpi-val.neg { color: var(--ecp-esmeral); }
.ecp-kpi-unit { font-size: 13px; font-weight: 500; color: var(--ecp-platino); }
.ecp-kpi-src {
    font-family: var(--ecp-mono); font-size: 10px; color: var(--ecp-platino);
    border-top: 1px dashed var(--ecp-borde); padding-top: 7px; margin-top: 9px;
}
/* Nivel de certeza de la tarjeta: la misma escala que el Asistente IA y la leyenda del 1.7. */
.ecp-kpi-nivel {
    font-family: var(--ecp-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--ecp-platino); margin-top: 6px;
}
/* Tooltip de celda rectora, sin JS y accesible por teclado */
.ecp-kpi[data-tip]::after {
    content: attr(data-tip); position: absolute; left: 12px; right: 12px; bottom: 100%;
    background: var(--ecp-marino); color: #fff; font-family: var(--ecp-sans);
    font-size: 11px; line-height: 1.45; padding: 9px 11px; border-radius: 8px;
    opacity: 0; visibility: hidden; transform: translateY(4px);
    transition: opacity .16s, transform .16s, visibility .16s; z-index: 40;
}
.ecp-kpi[data-tip]:hover::after,
.ecp-kpi[data-tip]:focus-within::after {
    opacity: 1; visibility: visible; transform: translateY(-6px);
}

/* ── Figuras y gráficas ────────────────────────────────────────────────── */
.ecp-fig {
    margin: 26px 0; background: #fff; border: 1px solid var(--ecp-borde);
    border-radius: 14px; padding: 20px 22px 14px; box-shadow: var(--ecp-sombra);
    overflow: hidden;
}
.ecp-fig-cap { font-family: var(--ecp-sans); margin-bottom: 14px; }
.ecp-fig-cap strong {
    display: block; font-size: 16px; font-weight: 700; color: var(--ecp-marino);
}
.ecp-fig-cap span { display: block; font-size: 12.5px; color: var(--ecp-platino); margin-top: 3px; }
.ecp-svg { width: 100%; height: auto; display: block; }
.ecp-fig-src {
    font-family: var(--ecp-mono); font-size: 10.5px; color: var(--ecp-platino);
    border-top: 1px solid var(--ecp-borde); padding-top: 9px; margin: 12px 0 0;
}
.ecp-svg text { font-variant-numeric: tabular-nums; }
.ecp-svg [title] { cursor: help; }

/* ── Tablas financieras ────────────────────────────────────────────────── */
.ecp-tabla { width: 100%; border-collapse: collapse; font-family: var(--ecp-sans); font-size: 13px; }
.ecp-tabla th {
    background: var(--ecp-platino-c); color: var(--ecp-marino); font-weight: 700;
    text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ecp-borde);
}
.ecp-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--ecp-borde); }
.ecp-tabla td.num {
    font-family: var(--ecp-mono); text-align: right; font-variant-numeric: tabular-nums;
}
.ecp-tabla tr:hover td { background: var(--ecp-papel); }

/* ── Contraste WCAG sobre las fotografías de fondo ─────────────────────── */
.ecp-overlay::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
        linear-gradient(180deg, rgba(11,25,44,.72) 0%, rgba(11,25,44,.55) 45%, rgba(11,25,44,.80) 100%),
        radial-gradient(120% 90% at 50% 0%, rgba(11,25,44,.28) 0%, rgba(11,25,44,.66) 100%);
}
.ecp-overlay > * { position: relative; z-index: 1; }

/* ── Control de audio flotante ─────────────────────────────────────────── */
#ecp-audio {
    position: fixed; right: 16px; bottom: 16px; z-index: 800;
    display: flex; align-items: center; gap: 8px;
    background: rgba(11,25,44,.90); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
    padding: 7px 8px; box-shadow: var(--ecp-sombra);
}
#ecp-audio button {
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.10); color: #fff; font-size: 14px; line-height: 1;
    display: grid; place-items: center; transition: background .15s;
}
#ecp-audio button:hover { background: rgba(255,255,255,.22); }
#ecp-audio button:focus-visible { outline: 3px solid var(--ecp-agua); outline-offset: 2px; }
#ecp-audio .ecp-audio-state {
    font-family: var(--ecp-sans); font-size: 11px; font-weight: 600; color: #fff;
    padding-right: 8px; letter-spacing: .04em;
}

@media (max-width: 640px) {
    .ecp-kpi-val { font-size: 21px; }
    .ecp-fig { padding: 14px 14px 10px; border-radius: 10px; }
    #ecp-audio { right: 10px; bottom: 10px; padding: 5px; }
    /* En el móvil el control queda en su botón: el rótulo tapaba el texto. Sigue en el DOM y con
       aria-live, así que el lector de pantalla lo anuncia igual. */
    #ecp-audio .ecp-audio-state {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
}
@media print {
    #ecp-progress, #ecp-audio, .ecp-modes { display: none !important; }
    .ecp-fig { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   CIERRE 38 · PULIDO EJECUTIVO DE LECTURA E INTERACCIÓN
   ==========================================================================
   Se añade DESPUÉS de style.css y de la capa institucional: sólo suma reglas,
   no reescribe ninguna existente.
   ========================================================================== */

/* ── Paleta --ec-*: fuente única compartida con los componentes ────────────
   Los dos componentes interactivos (visualizaciones_maestras.html y
   fichas_tecnicas_industriales.html) declaran esta misma paleta en su propio
   :root. Al vivir sólo ahí, las variables NO existían hasta que el lector
   cargaba un componente: cualquier var(--ec-teal-500) usada fuera se resolvía
   a nada y el color caía al valor por defecto. Se promueven aquí, con los
   mismos valores, para que el portal entero pueda usarlas desde el arranque.
   Si se cambia un tono, hay que cambiarlo en los tres sitios. */
:root {
  --ec-navy-900: #0a192f;
  --ec-navy-800: #0f2d4a;
  --ec-navy-700: #173d63;
  --ec-teal-600: #0f766e;
  --ec-teal-500: #0d9488;
  --ec-teal-400: #14b8a6;
  --ec-teal-300: #5eead4;
  --ec-sand-500: #d97706;
  --ec-sand-100: #fef3c7;
  --ec-slate-50:  #f8fafc;
  --ec-slate-100: #f1f5f9;
  --ec-slate-200: #e2e8f0;
  --ec-slate-300: #cbd5e1;
  --ec-slate-400: #94a3b8;
  --ec-slate-600: #475569;
  --ec-slate-700: #334155;
  --ec-slate-800: #1e293b;
  --ec-radius-lg: 16px;
  --ec-radius-md: 10px;
  --ec-shadow-card: 0 10px 30px -5px rgba(10,25,47,.08), 0 4px 12px -2px rgba(10,25,47,.04);
  --ec-shadow-lift: 0 18px 36px -12px rgba(13,148,136,.38), 0 6px 14px -6px rgba(10,25,47,.14);
}

/* ── Ergonomía del visor: entrada suave y cierre por fuera ─────────────────
   La animación va sobre `opacity` y `transform`, las dos únicas propiedades
   que el compositor resuelve sin recalcular maquetación: es lo que permite
   que el zoom de entrada se mantenga a 60 fps con un capítulo largo dentro.
   Animar `width`, `height` o `top` obligaría a un reflow por fotograma. */
#reader-overlay {
  transition: opacity .22s ease, visibility 0s;
}
/* `.reader-hidden` añade `visibility: hidden` para que el lector cerrado no reciba el foco; se
   aplica al acabar la animación de la tarjeta (.24 s), la más larga de las dos. */
#reader-overlay.reader-hidden {
  transition: opacity .22s ease, visibility 0s linear .24s;
}
#reader-overlay .reader-content {
  transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
  transform: scale(1);
  opacity: 1;
  will-change: transform;
}
#reader-overlay.reader-hidden .reader-content {
  transform: scale(.965);
  opacity: 0;
}

/* ── Volver arriba ─────────────────────────────────────────────────────────
   Vive DENTRO de .reader-content, que es el contenedor con scroll, y por eso
   se ancla con position:sticky en lugar de fixed: así acompaña al contenido
   sin salirse de la tarjeta ni taparse con la barra de narración. */
#ec-to-top {
  position: sticky;
  float: right;
  bottom: 18px;
  right: 0;
  z-index: 6;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin: -44px 0 0;
  border: 1px solid var(--ec-slate-200);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  color: var(--ec-navy-800);
  cursor: pointer;
  /* Invisible también al teclado mientras no hace falta; `visibility` cambia al acabar el
     fundido para no cortar la salida. */
  opacity: 0; pointer-events: none; visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease,
              visibility 0s linear .2s;
  box-shadow: var(--ec-shadow-card);
}
#ec-to-top svg { width: 20px; height: 20px; }
#ec-to-top.ec-visible { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible;
  transition: opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease, visibility 0s; }
#ec-to-top:hover { background: var(--ec-teal-500); color: #fff; border-color: var(--ec-teal-500); }
#ec-to-top:focus-visible { outline: 3px solid var(--ec-teal-400); outline-offset: 2px; }

/* ── Columna de lectura ────────────────────────────────────────────────────
   Ancho máximo de columna, cuerpo e interlineado de lectura ejecutiva. Se
   excluye .reader-wide a propósito: ahí dentro van la espiral, la hoja de
   cálculo y los componentes interactivos, que necesitan todo el ancho y traen
   su propia tipografía. Estrecharlos aquí los rompería. */
.reader-content:not(.reader-wide) #reader-body {
  max-width: 860px;
  margin-inline: auto;
  font-size: 17px;
  line-height: 1.65;
}
.reader-content:not(.reader-wide) #reader-title,
.reader-content:not(.reader-wide) .reader-nav,
.reader-content:not(.reader-wide) .reader-toc {
  max-width: 860px;
  margin-inline: auto;
}
.reader-content:not(.reader-wide) #reader-body p { margin: 0 0 1.15em; }

/* Guion de partición: con texto justificado y columna estrecha, sin él
   aparecen ríos de espacio en blanco entre palabras largas. */
.reader-content:not(.reader-wide) #reader-body p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ── Tablas Markdown del lector (cierre 39, tarea 10nonies) ────────────────
   parseMarkers() ya genera tablas: reconoce la sintaxis `| col | col |` con su
   fila separadora y emite .table-responsive > table.ec-markdown-table. Estas
   reglas dejaron de ser preparatorias.

   Se apunta a la CLASE, no a `table` a secas, y por eso no hace falta excluir
   .reader-wide: las tablas de las fichas industriales llevan su propio
   .ec-specs-table y no se ven afectadas. Se cubren los dos contenedores donde
   parseMarkers() vuelca su salida: el lector (#reader-body) y las secciones de
   la portada (.content-body). */

/* El contenedor no es decorativo: se lleva él el desplazamiento horizontal en
   pantalla estrecha, de modo que una tabla ancha nunca desplaza la página. */
#reader-body .table-responsive,
.content-body .table-responsive {
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ec-slate-200);
  border-radius: var(--ec-radius-md);
  box-shadow: var(--ec-shadow-card);
  background: #fff;
}

.ec-markdown-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.5;
  background: #fff;
}

.ec-markdown-table thead th {
  background: var(--ec-navy-900);
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--ec-teal-500);
  white-space: nowrap;
}

.ec-markdown-table tbody td {
  padding: 8px 12px;
  border-top: 1px solid var(--ec-slate-200);
  vertical-align: top;
}

/* Cebra y realce de fila. El hover teñido permite seguir un renglón largo sin
   perder la columna en tablas de muchas filas. */
.ec-markdown-table tbody tr:nth-child(even) { background: var(--ec-slate-50); }
.ec-markdown-table tbody tr:hover { background: rgba(13, 148, 136, .08); }

/* Alineaciones declaradas en la fila separadora (`:---`, `:-:`, `---:`). */
.ec-markdown-table .align-left   { text-align: left; }
.ec-markdown-table .align-center { text-align: center; }
.ec-markdown-table .align-right  { text-align: right; }

/* Una columna alineada a la derecha es, en este corpus, siempre numérica: se
   le da cifra tabular para que las magnitudes se comparen recorriendo la
   columna con la vista, sin que los dígitos bailen de ancho. */
.ec-markdown-table td.align-right,
.ec-markdown-table th.align-right {
  font-variant-numeric: tabular-nums;
}
.ec-markdown-table td.align-right { font-family: var(--ecp-mono); font-size: .93em; }

/* Los controles de directiva dentro de una celda no deben estirar la fila. */
.ec-markdown-table .ec-chip-embed { margin: 0; }

@media (max-width: 560px) {
  .ec-markdown-table { font-size: .84rem; }
  .ec-markdown-table thead th,
  .ec-markdown-table tbody td { padding: 6px 9px; }
}

@media print {
  #reader-body .table-responsive,
  .content-body .table-responsive { overflow: visible; box-shadow: none; }
  .ec-markdown-table { break-inside: avoid; }
  .ec-markdown-table thead th { background: var(--ec-slate-200); color: #000; }
}

/* ── Citas y llamadas de atención ──────────────────────────────────────────
   ⚠ Mismo alcance que las tablas: hoy ningún .txt ni ningún componente emite
   <blockquote>, .warning-box ni .info-box. Reglas preparadas, sin referente
   actual en el corpus. */
.reader-content #reader-body blockquote {
  margin: 1.5em 0;
  padding: .9em 1.3em;
  border-left: 3px solid var(--ec-teal-500);
  background: var(--ec-slate-50);
  border-radius: 0 var(--ec-radius-md) var(--ec-radius-md) 0;
  color: var(--ec-slate-700);
  font-style: italic;
}
.reader-content #reader-body blockquote p:last-child { margin-bottom: 0; }
.reader-content #reader-body blockquote cite {
  display: block; margin-top: .6em;
  font-style: normal; font-size: .86em; color: var(--ec-slate-600);
}

.reader-content #reader-body .warning-box,
.reader-content #reader-body .info-box {
  margin: 1.5em 0;
  padding: 1em 1.2em 1em 3.1em;
  border-radius: var(--ec-radius-md);
  border: 1px solid;
  position: relative;
  line-height: 1.6;
}
.reader-content #reader-body .warning-box::before,
.reader-content #reader-body .info-box::before {
  position: absolute; left: 1.1em; top: 1em;
  font-size: 1.1em; line-height: 1.4;
}
.reader-content #reader-body .warning-box {
  background: var(--ec-sand-100);
  border-color: rgba(217,119,6,.35);
  color: #7c3f05;
}
.reader-content #reader-body .warning-box::before { content: "\26A0"; }
.reader-content #reader-body .info-box {
  background: rgba(13,148,136,.07);
  border-color: rgba(13,148,136,.28);
  color: var(--ec-teal-600);
}
.reader-content #reader-body .info-box::before { content: "\2139"; }
.reader-content #reader-body .warning-box p:last-child,
.reader-content #reader-body .info-box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   COMPONENTES INTERACTIVOS BAJO DEMANDA (cierre 36, rediseñados en el 38)
   Tarjetas que los capítulos .txt insertan con [[VISUALIZACION:x]] /
   [[FICHA:n]] y que abren el componente en el lector.
   Ver engine.js!renderDirectiva().
   ========================================================================== */

.ec-embed-callout {
  margin: 1.8rem 0;
  display: flex;
  justify-content: center;
}

/* Tarjeta interactiva. El ancho se acota a la columna de lectura para que no
   sobresalga del texto que la justifica: la tarjeta acompaña al párrafo, no
   compite con él. */
.ec-card-embed {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 560px;
  padding: 1rem 1.15rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: var(--ec-navy-800);
  background: linear-gradient(135deg, #fff 0%, var(--ec-slate-50) 100%);
  border: 1px solid var(--ec-slate-200);
  border-left: 3px solid var(--ec-teal-500);
  border-radius: var(--ec-radius-lg);
  box-shadow: var(--ec-shadow-card);
  transition: transform .2s cubic-bezier(.22, 1, .36, 1),
              box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.ec-card-embed:hover,
.ec-card-embed:focus-visible {
  transform: translateY(-3px);
  border-color: var(--ec-teal-500);
  color: var(--ec-teal-500);
  box-shadow: var(--ec-shadow-lift);
  outline: none;
}
.ec-card-embed:focus-visible { outline: 3px solid var(--ec-teal-400); outline-offset: 3px; }
.ec-card-embed:active { transform: translateY(-1px); }

/* El icono hereda currentColor, así que el hover recolorea icono y rótulo a la
   vez y la tarjeta responde como una sola pieza. */
.ec-card-ico {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(13,148,136,.09);
  color: var(--ec-teal-600);
  transition: background .2s ease, color .2s ease;
}
.ec-card-ico svg { width: 24px; height: 24px; }
.ec-card-embed:hover .ec-card-ico,
.ec-card-embed:focus-visible .ec-card-ico {
  background: var(--ec-teal-500);
  color: #fff;
}

.ec-card-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ec-card-kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ec-slate-400);
}
.ec-card-title {
  font-size: 1rem; font-weight: 700; line-height: 1.3;
  color: inherit;
}
.ec-card-cue {
  font-size: .78rem; font-weight: 500; color: var(--ec-slate-600);
}

.ec-card-chevron {
  flex: 0 0 auto; margin-left: auto;
  color: var(--ec-slate-300);
  transition: transform .2s ease, color .2s ease;
}
.ec-card-chevron svg { width: 18px; height: 18px; display: block; }
.ec-card-embed:hover .ec-card-chevron,
.ec-card-embed:focus-visible .ec-card-chevron {
  transform: translateX(3px);
  color: var(--ec-teal-500);
}

/* Variante en línea: cuando la directiva va dentro de un párrafo. Compacta y
   con la línea base alineada al texto; una tarjeta a media frase partiría el
   renglón. */
.ec-chip-embed {
  display: inline-flex; align-items: center; gap: .35rem;
  vertical-align: baseline;
  margin: 0 .18rem;
  padding: .12rem .55rem;
  font: 600 .92em/1.4 inherit;
  color: var(--ec-teal-600);
  background: rgba(13,148,136,.08);
  border: 1px solid rgba(13,148,136,.28);
  border-radius: 999px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.ec-chip-embed:hover, .ec-chip-embed:focus-visible {
  background: var(--ec-teal-500); color: #fff;
  border-color: var(--ec-teal-500); outline: none;
}
.ec-chip-ico { display: inline-grid; place-items: center; }
.ec-chip-ico svg { width: 14px; height: 14px; display: block; }

.ec-cargando { padding: 2rem; text-align: center; opacity: .65; }

/* Realce temporal de la ficha a la que se ha saltado con [[FICHA:n]]. */
.ec-card-destacada {
  box-shadow: 0 0 0 3px rgba(13,148,136,.55), 0 20px 30px -10px rgba(10,25,47,.18) !important;
}

/* ── Pantalla estrecha ─────────────────────────────────────────────────────
   La tarjeta pasa a dos filas: el chevrón desaparece porque a este ancho el
   propio dedo ya es el indicador de que la pieza se toca. */
@media (max-width: 560px) {
  .ec-card-embed { padding: .85rem .9rem; gap: .8rem; }
  .ec-card-ico { width: 38px; height: 38px; }
  .ec-card-ico svg { width: 21px; height: 21px; }
  .ec-card-chevron { display: none; }
  .reader-content:not(.reader-wide) #reader-body { font-size: 16px; }
}

/* ── Movimiento reducido ───────────────────────────────────────────────────
   Quien lo ha pedido en su sistema recibe los mismos estados, sin recorrido.
   La tarjeta sigue cambiando de color y de sombra: se pierde la animación, no
   la señal de que es interactiva. */
@media (prefers-reduced-motion: reduce) {
  #reader-overlay, #reader-overlay .reader-content, #ec-to-top,
  .ec-card-embed, .ec-card-ico, .ec-card-chevron, .ec-chip-embed { transition: none; }
  #reader-overlay.reader-hidden .reader-content { transform: none; }
  .ec-card-embed:hover, .ec-card-embed:focus-visible,
  .ec-card-embed:active { transform: none; }
  .ec-card-embed:hover .ec-card-chevron { transform: none; }
}

@media print {
  #ec-to-top { display: none !important; }
  .ec-card-embed { box-shadow: none; break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ENCUESTA EPISTÉMICA (Entrada 052)
   Bloque `.enc-*`. Se apoya en las variables de :root ya definidas arriba y
   no reescribe ninguna regla previa: si el módulo js/encuesta.js no se carga,
   nada de esto se aplica a nada.
   ═══════════════════════════════════════════════════════════════════════ */

.enc-app { margin: 28px 0 8px; }
.enc-bloque {
    border: 1px solid var(--ecp-borde); border-radius: 12px;
    background: #fff; padding: 24px 26px; box-shadow: var(--ecp-sombra);
}
.enc-bloque h3 { margin: 6px 0 12px; font-size: 20px; color: var(--ecp-marino); }
.enc-bloque h4 { margin: 8px 0 10px; font-size: 15px; color: var(--ecp-marino); }
.enc-kicker {
    font-family: var(--ecp-mono); font-size: 11px; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ecp-platino); margin: 0;
}

/* ── Advertencias de portada ───────────────────────────────────────────── */
.enc-avisos {
    border-left: 3px solid var(--ecp-ambar); background: var(--ecp-ambar-c);
    padding: 14px 18px; border-radius: 0 8px 8px 0; margin: 18px 0;
}
.enc-avisos p { margin: 6px 0; font-size: 14px; line-height: 1.55; }

/* Cuatro preguntas en lenguaje llano, en la portada del cuestionario. Van plegadas:
   quien conoce el proyecto pasa de largo y quien no, encuentra la explicación antes
   de que se le pida una posición. */
.enc-faq {
  margin: 14px 0 18px;
  border: 1px solid var(--ecp-borde);
  border-left: 4px solid var(--ecp-agua);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.enc-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: .8rem 1rem;
  font-size: 14px;
  font-weight: 700;
  color: var(--ecp-marino);
}
.enc-faq > summary::-webkit-details-marker { display: none; }
.enc-faq > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .5rem;
  color: var(--ecp-agua);
  transition: transform .15s ease;
}
.enc-faq[open] > summary::before { transform: rotate(90deg); }
.enc-faq > summary:focus-visible { outline: 3px solid var(--ecp-agua); outline-offset: 2px; }
.enc-faq-cuerpo { padding: 0 1rem .9rem; }
.enc-faq-p { margin: .9rem 0 .3rem; font-size: 14px; font-weight: 700; color: var(--ecp-marino); }
.enc-faq-r { margin: 0; font-size: 14px; line-height: 1.6; color: #334155; }


/* ── Campos y selectores ───────────────────────────────────────────────── */
.enc-meta { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; }
.enc-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.enc-campo > span { font-weight: 600; color: var(--ecp-marino); }
.enc-campo select, .enc-campo textarea {
    font-family: var(--ecp-sans); font-size: 14px; padding: 9px 11px;
    border: 1px solid var(--ecp-borde); border-radius: 7px;
    background: var(--ecp-papel); color: var(--ecp-marino); width: 100%;
}
.enc-campo textarea { resize: vertical; min-height: 84px; }
.enc-campo select:focus-visible, .enc-campo textarea:focus-visible,
.enc-op:focus-visible, .enc-btn:focus-visible {
    outline: 2px solid var(--ecp-agua); outline-offset: 2px;
}
.enc-abierta { margin-top: 22px; }

/* ── Progreso ──────────────────────────────────────────────────────────── */
.enc-progreso { height: 5px; border-radius: 3px; background: var(--ecp-platino-c); margin: 16px 0 5px; overflow: hidden; }
.enc-progreso-barra { height: 100%; background: var(--ecp-esmeral); transition: width .25s ease; }
.enc-progreso-txt { font-family: var(--ecp-mono); font-size: 11px; color: var(--ecp-platino); margin: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .enc-progreso-barra { transition: none; } }

/* ── Dilemas ───────────────────────────────────────────────────────────── */
.enc-item {
    border: 1px solid var(--ecp-borde); border-left: 3px solid var(--ecp-platino);
    border-radius: 0 9px 9px 0; padding: 16px 18px; margin: 16px 0; background: var(--ecp-papel);
}
.enc-item-hecho { border-left-color: var(--ecp-esmeral); background: #fff; }
.enc-item-t { font-weight: 700; font-size: 14px; color: var(--ecp-marino); margin: 0 0 10px; }
.enc-inv {
    font-family: var(--ecp-mono); font-size: 10px; font-weight: 500; margin-left: 9px;
    padding: 2px 7px; border-radius: 999px; background: var(--ecp-ambar-c);
    color: var(--ecp-ambar); border: 1px solid rgba(184,134,11,.3); vertical-align: middle;
}
.enc-polos { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.enc-polo { font-size: 13.5px; line-height: 1.55; margin: 0; color: #24344A; }
.enc-polo:first-child { padding-right: 10px; border-right: 1px dashed var(--ecp-borde); }
.enc-escala { display: grid; gap: 6px; grid-template-columns: repeat(5, 1fr); }
.enc-op {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: var(--ecp-sans); font-size: 11px; padding: 9px 4px; cursor: pointer;
    border: 1px solid var(--ecp-borde); border-radius: 8px; background: #fff;
    color: var(--ecp-platino); transition: background .15s, border-color .15s, color .15s;
}
.enc-op:hover { border-color: var(--ecp-esmeral); color: var(--ecp-marino); }
.enc-op-sel { background: var(--ecp-esmeral-c); border-color: var(--ecp-esmeral); color: var(--ecp-marino); font-weight: 600; }
.enc-op-p { font-size: 13px; }
.enc-op-l { text-align: center; line-height: 1.25; }

/* ── Píldora epistemológica ────────────────────────────────────────────── */
.enc-pildora {
    border: 1px solid rgba(0,135,90,.3); background: var(--ecp-esmeral-c);
    border-radius: 10px; padding: 18px 20px; margin: 22px 0 6px;
}
.enc-pildora-k {
    font-family: var(--ecp-mono); font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ecp-esmeral); margin: 0 0 4px;
}
.enc-pildora p { font-size: 13.5px; line-height: 1.6; margin: 8px 0; }
.enc-pildora-s { border-top: 1px dashed rgba(0,135,90,.35); padding-top: 9px; color: #3B4C63; }

/* ── Radar ─────────────────────────────────────────────────────────────── */
.enc-radar-caja { display: flex; justify-content: center; margin: 20px 0 10px; overflow-x: auto; }
.enc-radar { width: 100%; max-width: 460px; height: auto; }
.enc-leyenda { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--ecp-marino); }
.enc-sw { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.enc-sw-dash { background: repeating-linear-gradient(90deg, var(--ecp-platino) 0 5px, transparent 5px 9px); }

/* ── Tabla de ejes ─────────────────────────────────────────────────────── */
.enc-tabla { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 13.5px; }
.enc-tabla th, .enc-tabla td { border-bottom: 1px solid var(--ecp-borde); padding: 8px 10px; text-align: left; }
.enc-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ecp-platino); }
.enc-tabla .enc-num { text-align: right; font-family: var(--ecp-mono); }

/* ── Notas y acciones ──────────────────────────────────────────────────── */
.enc-nota { font-size: 12.5px; line-height: 1.55; color: var(--ecp-platino); margin: 10px 0; }
.enc-nota-ambar { color: #8A6508; background: var(--ecp-ambar-c); padding: 10px 13px; border-radius: 7px; }
.enc-nota-rojo  { color: var(--ecp-rojo); background: #FDECEA; padding: 10px 13px; border-radius: 7px; }
.enc-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 4px; }
.enc-btn {
    font-family: var(--ecp-sans); font-size: 13px; font-weight: 600; padding: 10px 18px;
    border-radius: 8px; cursor: pointer; border: 1px solid var(--ecp-borde);
    background: #fff; color: var(--ecp-marino); transition: background .15s, border-color .15s;
}
.enc-btn:hover:not(:disabled) { border-color: var(--ecp-marino); background: var(--ecp-platino-c); }
.enc-btn-primario { background: var(--ecp-marino); color: #fff; border-color: var(--ecp-marino); }
.enc-btn-primario:hover:not(:disabled) { background: var(--ecp-marino-2); color: #fff; }
.enc-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
    .enc-bloque { padding: 18px 16px; }
    .enc-polos { grid-template-columns: 1fr; }
    .enc-polo:first-child { padding-right: 0; padding-bottom: 10px; border-right: none; border-bottom: 1px dashed var(--ecp-borde); }
    .enc-escala { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .enc-op { font-size: 10px; padding: 8px 2px; }
}

/* ── Fundamento Teórico y Normativa de Respaldo ────────────────────────────
   Bloque colapsable que cierra cada sección, ficha y memoria (lo compone
   ECPRYM.renderFundamento). Cerrado por defecto: la bibliografía respalda el
   texto sin interrumpir la lectura. `summary` es el control nativo, así que
   se abre con teclado (Intro/Espacio) sin una línea de JavaScript. */
.ec-fundamento {
  margin: 2rem 0 .5rem;
  border: 1px solid var(--ecp-borde);
  border-left: 4px solid var(--ecp-esmeral);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.ec-fundamento > summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 1.1rem;
  font-family: var(--ecp-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ecp-marino);
}
.ec-fundamento > summary::-webkit-details-marker { display: none; }
.ec-fundamento > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .55rem;
  color: var(--ecp-esmeral);
  transition: transform .15s ease;
}
.ec-fundamento[open] > summary::before { transform: rotate(90deg); }
.ec-fundamento > summary:focus-visible { outline: 3px solid var(--ecp-agua); outline-offset: 2px; }
.ec-fundamento-lista {
  margin: 0 !important;
  padding: 0 1.2rem 1rem 2.4rem !important;
  font-size: .86rem;
  line-height: 1.55;
}
.ec-fundamento-lista li { margin: .45rem 0; padding-left: 1.6em; text-indent: -1.6em; list-style: none; }
.ec-fundamento-lista a { color: var(--ecp-agua); word-break: break-all; }

/* Demostración formal colapsable. Misma gramática visual que el bloque de
   fundamentos —para que el lector reconozca «esto se abre si quieres»— pero con
   el filo en color marino, porque lo que guarda no es bibliografía sino el
   desarrollo matemático del enunciado que acaba de leer en lenguaje llano. */
.ec-demostracion {
  margin: 1.6rem 0;
  border: 1px solid var(--ecp-borde);
  border-left: 4px solid var(--ecp-marino);
  border-radius: 10px;
  background: rgba(255,255,255,.72);
}
.ec-demostracion > summary {
  cursor: pointer;
  list-style: none;
  padding: .85rem 1.1rem;
  font-family: var(--ecp-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ecp-marino);
}
.ec-demostracion > summary::-webkit-details-marker { display: none; }
.ec-demostracion > summary::before {
  content: '▸';
  display: inline-block;
  margin-right: .55rem;
  color: var(--ecp-marino);
  transition: transform .15s ease;
}
.ec-demostracion[open] > summary::before { transform: rotate(90deg); }
.ec-demostracion > summary:focus-visible { outline: 3px solid var(--ecp-agua); outline-offset: 2px; }
.ec-demostracion-cuerpo { padding: 0 1.2rem 1rem; font-size: .93rem; line-height: 1.6; }
.ec-demostracion-cuerpo > *:first-child { margin-top: 0; }