/* EPUBLab · diseño (propuesta del diseñador, 2026-11-03) sobre Bootstrap local.
   Todo color sale de los tokens de :root; el tema oscuro solo redefine tokens.
   Propiedades lógicas (inline/block) para RTL. Tras cambiar algo, subir
   SCRIPTS_VERSION en app/settings.py. Inter (OFL) en static/vendor/fonts/. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-400-normal.f837d382a885.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-400-normal.9159859e7aa8.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-500-normal.42b95430773b.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-500-normal.656e8d21838c.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-600-normal.75fb76ec3559.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-600-normal.8f9364515dfc.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-700-normal.3714175d15f3.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-700-normal.39b692b06219.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/inter-latin-800-normal.1b59c7d14ad0.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../vendor/fonts/inter-latin-ext-800-normal.730418011423.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 107.12%; }

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light dark;
  --el-fuente: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --el-fondo: #ffffff;
  --el-superficie: #ffffff;
  --el-tinte: #f3f7fe;          /* secciones tintadas */
  --el-tinte-2: #e6eefd;        /* cabeceras de tabla, chip de paso */
  --el-borde: #dde3ec;
  --el-borde-fuerte: #c5cfdd;
  --el-texto: #0e1424;
  --el-texto-2: #4a5468;        /* secundario: 7.2:1 sobre blanco */
  --el-primario: #1d5bf0;       /* botones: blanco encima 5.3:1 */
  --el-primario-hover: #1547c4;
  --el-sobre-primario: #ffffff;
  --el-enlace: #1a56e6;
  --el-foco: #1d5bf0;
  --el-info-fondo: #eef4ff;
  --el-info-borde: #cddcfb;
  --el-aviso-fondo: #fff7e8;
  --el-aviso-borde: #f2d7a2;
  --el-aviso-texto: #6a4600;
  --el-aviso-icono: #b76e00;
  --el-error-fondo: #fdeeee;
  --el-error-borde: #f2c4c4;
  --el-error: #b42318;
  --el-ok: #18794e;
  --el-ok-fondo: #e8f6ee;
  --el-pdf: #d92d20;
  --el-radio: 12px;
  --el-radio-s: 8px;
  --el-sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --el-ancho: 1160px;

  /* Bootstrap lee estos: así sus utilidades siguen el tema. */
  --bs-body-font-family: var(--el-fuente);
  --bs-body-bg: var(--el-fondo);
  --bs-body-color: var(--el-texto);
  --bs-emphasis-color: var(--el-texto);
  --bs-secondary-color: var(--el-texto-2);
  --bs-border-color: var(--el-borde);
  --bs-tertiary-bg: var(--el-tinte);
  --bs-link-color: var(--el-enlace);
  --bs-link-hover-color: var(--el-primario-hover);
  --bs-primary: var(--el-primario);
}

/* Tema oscuro derivado (el diseño solo trae el claro). Contrastes WCAG medidos
   (2026-11-03): texto 15.9:1, secundario 8.9:1, enlace 8.8:1 sobre --el-fondo;
   blanco sobre el botón 5.3:1; aviso 11.5:1, error 7.5:1. Claro: texto 18.4:1,
   secundario 7.6:1, enlace 6.0:1, botón 5.5:1. Todo AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --el-fondo: #0c111b;
    --el-superficie: #131a26;
    --el-tinte: #111a29;
    --el-tinte-2: #1a2639;
    --el-borde: #283244;
    --el-borde-fuerte: #3a4760;
    --el-texto: #e8ecf3;
    --el-texto-2: #a9b3c4;
    --el-primario: #2f63e0;
    --el-primario-hover: #4677ec;
    --el-enlace: #8cb0ff;
    --el-foco: #8cb0ff;
    --el-info-fondo: #13213a;
    --el-info-borde: #27406b;
    --el-aviso-fondo: #2a2111;
    --el-aviso-borde: #5a4418;
    --el-aviso-texto: #f3d9a4;
    --el-aviso-icono: #f0b44c;
    --el-error-fondo: #2c1517;
    --el-error-borde: #5e2a2d;
    --el-error: #ff8a80;
    --el-ok: #5fd39a;
    --el-ok-fondo: #12281e;
    --el-pdf: #ff7a70;
    --el-sombra: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body { background: var(--el-fondo); color: var(--el-texto); font-family: var(--el-fuente); font-size: 1rem; line-height: 1.55;
       -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5 { color: var(--el-texto); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
h1, .el-h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2, .el-h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); margin-block-end: .5rem; }
h3 { font-size: 1.15rem; font-weight: 700; }
a { color: var(--el-enlace); text-underline-offset: .15em; }
a:hover { color: var(--el-primario-hover); }
:focus-visible { outline: 3px solid var(--el-foco); outline-offset: 2px; border-radius: 4px; }
.lead { font-size: 1.15rem; color: var(--el-texto-2); font-weight: 400; }
.text-body-secondary, .el-suave { color: var(--el-texto-2) !important; }
.el-contenedor { max-width: var(--el-ancho); margin-inline: auto; padding-inline: 1.25rem; }
.el-estrecho { max-width: 860px; margin-inline: auto; padding-inline: 1.25rem; }
.el-seccion { padding-block: 2.5rem; }
.el-tinta { background: var(--el-tinte); }
img { max-width: 100%; height: auto; }

/* ── Botones (sobre los de Bootstrap) ──────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--el-radio-s); padding: .6rem 1.25rem; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: .3rem .75rem; font-size: .85rem; }
.btn-primary { --bs-btn-bg: var(--el-primario); --bs-btn-border-color: var(--el-primario); --bs-btn-color: var(--el-sobre-primario);
  --bs-btn-hover-bg: var(--el-primario-hover); --bs-btn-hover-border-color: var(--el-primario-hover); --bs-btn-hover-color: var(--el-sobre-primario);
  --bs-btn-active-bg: var(--el-primario-hover); --bs-btn-active-border-color: var(--el-primario-hover);
  --bs-btn-disabled-bg: var(--el-primario); --bs-btn-disabled-border-color: var(--el-primario); }
.btn-outline-primary { --bs-btn-color: var(--el-enlace); --bs-btn-border-color: var(--el-primario); --bs-btn-bg: transparent;
  --bs-btn-hover-bg: var(--el-primario); --bs-btn-hover-border-color: var(--el-primario); --bs-btn-hover-color: var(--el-sobre-primario);
  --bs-btn-active-bg: var(--el-primario-hover); --bs-btn-active-color: var(--el-sobre-primario); border-width: 1.5px; }
.btn-outline-secondary { --bs-btn-color: var(--el-texto); --bs-btn-border-color: var(--el-borde-fuerte); --bs-btn-hover-bg: var(--el-tinte);
  --bs-btn-hover-color: var(--el-texto); --bs-btn-hover-border-color: var(--el-borde-fuerte); --bs-btn-disabled-color: var(--el-texto-2);
  --bs-btn-disabled-border-color: var(--el-borde); }
.btn-success { --bs-btn-bg: var(--el-primario); --bs-btn-border-color: var(--el-primario); --bs-btn-hover-bg: var(--el-primario-hover);
  --bs-btn-hover-border-color: var(--el-primario-hover); }

/* ── Cabecera y pie ─────────────────────────────────────────────────────── */
/* position+z-index: el `.row` de Bootstrap que abre muchas páginas tiene margen superior
   negativo (gutter) y se montaba encima de la cabecera, dejando sus enlaces sin clic. */
.el-cabecera { position: relative; z-index: 20; border-block-end: 1px solid var(--el-borde); background: var(--el-fondo); }
.el-idioma { display: inline-flex; align-items: center; gap: .3rem; }
.el-cabecera .el-contenedor { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.el-logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.3rem; color: var(--el-texto);
  text-decoration: none; letter-spacing: -.02em; }
.el-logo:hover { color: var(--el-texto); }
.el-logo-img { border-radius: 6px; flex: none; }
.el-nav { display: flex; align-items: center; gap: clamp(.9rem, 2.5vw, 2.4rem); margin: 0; padding: 0; list-style: none; }
.el-nav a, .el-nav button { color: var(--el-texto); text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; font: inherit; }
.el-nav a:hover, .el-nav button:hover { color: var(--el-enlace); }
.el-nav a[aria-current="page"] { color: var(--el-enlace); font-weight: 600; }
.el-nav .el-entrar { color: var(--el-enlace); font-weight: 700; }
@media (max-width: 575.98px) { .el-nav .el-solo-ancho { display: none; } }

.el-pie { border-block-start: 1px solid var(--el-borde); margin-block-start: 3rem; padding-block: 1.25rem 1.5rem; font-size: .92rem; }
.el-pie .el-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.el-pie .el-logo { font-size: 1.1rem; }
.el-pie nav ul { display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; list-style: none; margin: 0; padding: 0; }
.el-pie nav a { color: var(--el-texto-2); text-decoration: none; }
.el-pie nav a:hover { color: var(--el-enlace); text-decoration: underline; }
.el-pie .el-contenido { border-block-end: 1px solid var(--el-borde); padding-block-end: 1rem; margin-block-end: 1rem; }
.el-pie .el-contenido ul { gap: .3rem 1.25rem; font-size: .88rem; }

/* ── Piezas ─────────────────────────────────────────────────────────────── */
.el-etiqueta { display: inline-block; background: var(--el-tinte-2); color: var(--el-enlace); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; border-radius: 6px; padding: .3rem .7rem; margin-block-end: 1rem; }
.el-etiqueta--suave { text-transform: none; letter-spacing: 0; font-size: .8rem; }
.el-migas { font-size: .95rem; margin-block: 1.25rem .5rem; }
.el-migas ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.el-migas li + li::before { content: "/"; color: var(--el-texto-2); margin-inline-end: .4rem; }
.el-migas [aria-current] { color: var(--el-texto-2); }
.el-actualizada { font-size: .88rem; color: var(--el-texto-2); }

.el-tarjeta { background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: var(--el-radio); padding: 1.5rem;
  box-shadow: var(--el-sombra); }
.el-tarjeta--plana { box-shadow: none; }
.el-tarjeta--tinta { background: var(--el-tinte); }

/* Zona de subida con borde discontinuo */
.el-subida { border: 2px dashed var(--el-primario); border-radius: var(--el-radio); padding: 1.75rem 1.5rem; text-align: center;
  background: var(--el-superficie); }
.el-subida h2 { font-size: 1.35rem; margin-block: .5rem .25rem; }
.el-subida input[type="file"] { max-width: 340px; margin-inline: auto; }
.el-subida .el-nota { font-size: .85rem; color: var(--el-texto-2); margin: .75rem 0 0; }
.el-icono-pdf { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 44px; height: 54px;
  border: 2px solid var(--el-texto); border-radius: 4px 14px 4px 4px; padding-block-end: 8px; font-size: .62rem; font-weight: 800;
  color: var(--el-pdf); letter-spacing: .02em; }
.el-icono-pdf--s { width: 34px; height: 42px; font-size: .5rem; padding-block-end: 5px; }
.el-privado { font-size: .88rem; color: var(--el-texto-2); text-align: center; margin-block-start: .75rem; }

/* Pasos numerados */
.el-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; list-style: none; margin: 0; padding: 1.25rem 0;
  border-block: 1px solid var(--el-borde); counter-reset: paso; }
.el-pasos li { display: flex; align-items: flex-start; gap: .75rem; justify-content: center; counter-increment: paso; font-weight: 500; }
.el-pasos li::before { content: counter(paso); flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--el-tinte-2);
  color: var(--el-enlace); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.el-pasos small { display: block; color: var(--el-texto-2); font-weight: 400; }
.el-pasos--izq li { justify-content: flex-start; }
@media (max-width: 767.98px) {
  .el-pasos { grid-template-columns: 1fr; border-block: 0; padding: 0; gap: 0; }
  .el-pasos li { justify-content: flex-start; padding-block: .8rem; border-block-end: 1px solid var(--el-borde); align-items: center; }
}
/* Pasador (subida → muestra → libro) */
.el-pasador { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1rem; list-style: none; padding: 0;
  margin: 1rem 0 1.5rem; counter-reset: paso; }
.el-pasador li { display: flex; align-items: center; gap: .5rem; counter-increment: paso; color: var(--el-texto-2); }
.el-pasador li::before { content: counter(paso); width: 2rem; height: 2rem; border-radius: 50%; background: var(--el-tinte-2);
  color: var(--el-enlace); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.el-pasador li[aria-current="step"] { color: var(--el-texto); font-weight: 600; }
.el-pasador li[aria-current="step"]::before { background: var(--el-primario); color: var(--el-sobre-primario); }
.el-pasador li + li::after { content: none; }
.el-pasador .el-flecha { color: var(--el-texto-2); }

/* Comparación original / EPUB con evidencia real */
.el-comparacion { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: start; margin: 0; }
.el-comparacion > .el-flecha { align-self: center; }
.el-panel { background: var(--el-superficie); border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); overflow: hidden; margin: 0; }
.el-panel > figcaption, .el-panel > .el-panel-cab { background: var(--el-tinte); border-block-end: 1px solid var(--el-borde); padding: .45rem 1rem;
  font-weight: 600; font-size: .95rem; }
.el-panel--epub > figcaption, .el-panel--epub > .el-panel-cab { background: var(--el-tinte-2); }
.el-panel img { display: block; width: 100%; max-height: 380px; object-fit: cover; object-position: top; background: #fff; }
.el-panel--alto img { max-height: 620px; }
.el-comparacion .el-flecha { color: var(--el-texto-2); font-size: 1.4rem; }
.el-pie-figura { text-align: center; font-size: .88rem; color: var(--el-texto-2); margin-block-start: .75rem; }
@media (max-width: 767.98px) {
  .el-comparacion { grid-template-columns: 1fr; }
  .el-comparacion .el-flecha { transform: rotate(90deg); justify-self: center; }
  .el-panel img { max-height: 280px; }
}

/* Fila de rasgos */
.el-rasgos { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 1.5rem 0; }
.el-rasgos li { display: flex; align-items: center; justify-content: center; gap: .9rem; font-weight: 600; font-size: 1.05rem; padding-inline: 1rem; }
.el-rasgos li + li { border-inline-start: 1px solid var(--el-borde); }
.el-rasgos .bi { font-size: 1.7rem; color: var(--el-primario); }
@media (max-width: 767.98px) { .el-rasgos { grid-template-columns: 1fr; gap: .8rem; } .el-rasgos li { justify-content: flex-start; }
  .el-rasgos li + li { border: 0; } }

/* Planes */
.el-planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.el-plan { display: flex; flex-direction: column; gap: .35rem; background: var(--el-superficie); border: 1px solid var(--el-borde);
  border-radius: var(--el-radio); padding: 1.4rem; box-shadow: var(--el-sombra); }
.el-plan--destacado { border-color: var(--el-primario); box-shadow: 0 0 0 1px var(--el-primario); }
.el-plan h3 { font-size: 1.2rem; margin: 0; }
.el-plan .el-precio { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.el-plan .el-precio small { font-size: 1.1rem; font-weight: 700; }
.el-plan ul { list-style: none; padding: 0; margin: .75rem 0 1rem; flex-grow: 1; }
.el-plan li { display: flex; gap: .5rem; padding-block: .25rem; }
.el-plan li .bi { color: var(--el-primario); }
.el-plan .btn { margin-block-start: auto; }
@media (max-width: 767.98px) { .el-planes { grid-template-columns: 1fr; } }

/* FAQ con <details> nativo: el texto está en el HTML sin JS */
.el-faq { display: grid; gap: .6rem; }
.el-faq details { border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); background: var(--el-superficie); }
.el-faq details[open] { background: var(--el-info-fondo); border-color: var(--el-info-borde); }
.el-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; font-weight: 600; }
.el-faq summary::-webkit-details-marker { display: none; }
.el-faq summary::after { content: ""; flex: none; width: .55rem; height: .55rem; border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor; transform: rotate(45deg); margin-block-start: -.25rem; transition: transform .15s; }
.el-faq details[open] summary::after { transform: rotate(-135deg); margin-block-start: .25rem; }
.el-faq details > div { padding: 0 1.1rem .9rem; color: var(--el-texto); }
.el-faq details > div p { margin: 0; }

/* Avisos */
.el-aviso { display: flex; gap: .85rem; align-items: flex-start; border: 1px solid var(--el-info-borde); background: var(--el-info-fondo);
  border-radius: var(--el-radio); padding: 1rem 1.2rem; }
.el-aviso > .bi { font-size: 1.25rem; color: var(--el-enlace); line-height: 1.3; }
.el-aviso p { margin: 0; }
.el-aviso--atencion { background: var(--el-aviso-fondo); border-color: var(--el-aviso-borde); color: var(--el-aviso-texto); }
.el-aviso--atencion > .bi { color: var(--el-aviso-icono); }
.el-aviso--atencion strong, .el-aviso--atencion h2, .el-aviso--atencion h3 { color: var(--el-aviso-texto); }
.el-aviso--ok { background: var(--el-ok-fondo); border-color: color-mix(in srgb, var(--el-ok) 35%, transparent); }
.el-pasos--lista { grid-template-columns: 1fr; border: 0; padding: 0; gap: .9rem; }
.el-pasos--lista li { justify-content: flex-start; border: 0; padding: 0; align-items: flex-start; }
.el-aviso--error { background: var(--el-error-fondo); border-color: var(--el-error-borde); }
.el-aviso--error > .bi { color: var(--el-error); }
.alert { border-radius: var(--el-radio-s); }
.alert-info { --bs-alert-bg: var(--el-info-fondo); --bs-alert-border-color: var(--el-info-borde); --bs-alert-color: var(--el-texto); }
.alert-warning { --bs-alert-bg: var(--el-aviso-fondo); --bs-alert-border-color: var(--el-aviso-borde); --bs-alert-color: var(--el-aviso-texto); }
.alert-danger, .alert-error { --bs-alert-bg: var(--el-error-fondo); --bs-alert-border-color: var(--el-error-borde); --bs-alert-color: var(--el-texto); }
.alert-success { --bs-alert-bg: var(--el-ok-fondo); --bs-alert-border-color: var(--el-ok); --bs-alert-color: var(--el-texto); }

/* Insignias */
.el-insignia { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .7rem; font-size: .82rem;
  font-weight: 600; background: var(--el-tinte-2); color: var(--el-texto); white-space: nowrap; }
.el-insignia--ok { background: var(--el-ok-fondo); color: var(--el-ok); }
.el-insignia--atencion { background: var(--el-aviso-fondo); color: var(--el-aviso-texto); border: 1px solid var(--el-aviso-borde); }
.el-insignia--error { background: var(--el-error-fondo); color: var(--el-error); }

/* Tablas */
.el-tabla { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--el-borde); border-radius: var(--el-radio-s);
  overflow: hidden; background: var(--el-superficie); font-size: .95rem; }
.el-tabla th, .el-tabla td { padding: .6rem .9rem; border-block-end: 1px solid var(--el-borde); vertical-align: middle; text-align: start; }
.el-tabla tr:last-child > * { border-block-end: 0; }
.el-tabla thead th { background: var(--el-tinte-2); font-weight: 700; }
.el-tabla tbody th { font-weight: 500; }
.el-tabla .el-num { text-align: end; font-variant-numeric: tabular-nums; }
.el-tabla .el-centro { text-align: center; }
.el-tabla .el-nuestro > * { background: var(--el-info-fondo); font-weight: 600; }
.el-tabla .el-mejor { font-weight: 800; }
.el-tabla caption { caption-side: bottom; font-size: .85rem; color: var(--el-texto-2); padding-block-start: .6rem; }
.el-tabla--compacta { font-size: .85rem; }
.el-tabla--compacta th, .el-tabla--compacta td { padding: .45rem .6rem; }
.el-desplazable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.el-desplazable > .el-tabla { min-width: 640px; }
.el-desplazable > .el-tabla--libre { min-width: 0; }
.el-tabla .bi-check2 { color: var(--el-primario); font-size: 1.15rem; }

/* Progreso indeterminado (sin porcentaje inventado) */
.el-progreso { position: relative; height: 10px; border-radius: 999px; background: var(--el-tinte-2); overflow: hidden; margin-block: .9rem; }
.el-progreso::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -40%; width: 40%; border-radius: inherit;
  background: var(--el-primario); animation: el-ir 1.4s ease-in-out infinite; }
@keyframes el-ir { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .el-progreso::before { animation: none; inset-inline-start: 0; width: 100%; opacity: .35; } }
.el-barra { height: 8px; border-radius: 999px; background: var(--el-tinte-2); overflow: hidden; }
.el-barra > span { display: block; height: 100%; background: var(--el-primario); border-radius: inherit; }

/* Estados reales del trabajo */
.el-estados { list-style: none; padding: 0; margin: 1.25rem auto; max-width: 420px; }
.el-estados li { position: relative; display: flex; align-items: center; gap: .9rem; padding-block: .45rem; color: var(--el-texto-2); }
.el-estados li::before { content: ""; flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--el-borde-fuerte);
  background: var(--el-fondo); }
.el-estados li.el-hecho { color: var(--el-texto); }
.el-estados li.el-hecho::before { background: var(--el-primario); border-color: var(--el-primario);
  box-shadow: inset 0 0 0 4px var(--el-primario), inset 0 0 0 6px var(--el-sobre-primario); }
.el-estados li.el-actual { color: var(--el-texto); font-weight: 600; }
.el-estados li.el-actual::before { border-color: var(--el-primario); box-shadow: inset 0 0 0 4px var(--el-fondo), inset 0 0 0 10px var(--el-primario); }

/* Vista previa */
.el-vista { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.el-vista iframe { width: 100%; height: 560px; border: 0; background: #fff; display: block; }
.el-vista .el-pagina-original img { max-height: 560px; width: 100%; object-fit: contain; background: #fff; }
.el-controles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-block-start: 1px solid var(--el-borde);
  padding-block-start: 1rem; margin-block-start: 1rem; }
.el-grupo { display: inline-flex; }
.el-grupo .btn { border-radius: 0; }
.el-grupo .btn:first-child { border-start-start-radius: var(--el-radio-s); border-end-start-radius: var(--el-radio-s); }
.el-grupo .btn:last-child { border-start-end-radius: var(--el-radio-s); border-end-end-radius: var(--el-radio-s); margin-inline-start: -1px; }
.el-js .el-paginas-original > li:not(.el-visible) { display: none; }
.el-paginas-original { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (max-width: 767.98px) { .el-vista { grid-template-columns: 1fr; } .el-vista iframe { height: 440px; } }

/* Resumen en filas etiqueta / valor */
.el-resumen { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; margin: 0; }
.el-resumen dt { font-weight: 400; color: var(--el-texto-2); }
.el-resumen dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
.el-archivo { display: flex; align-items: center; gap: .9rem; }
.el-archivo strong { display: block; font-size: 1.1rem; word-break: break-all; }

/* Formularios */
.form-control, .form-select { background-color: var(--el-superficie); color: var(--el-texto); border-color: var(--el-borde-fuerte);
  border-radius: var(--el-radio-s); }
.form-control:focus { border-color: var(--el-primario); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--el-primario) 25%, transparent);
  background-color: var(--el-superficie); color: var(--el-texto); }
.form-label { font-weight: 600; }
.form-text { color: var(--el-texto-2); }

/* Selector de idioma */
.el-idiomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; list-style: none; padding: 0; margin: 0; }
.el-idiomas a { display: block; text-align: center; padding: .55rem .5rem; border: 1px solid var(--el-borde-fuerte); border-radius: var(--el-radio-s);
  color: var(--el-texto); text-decoration: none; font-weight: 500; background: var(--el-superficie); }
.el-idiomas a:hover { border-color: var(--el-primario); color: var(--el-enlace); }
.el-idiomas a[aria-current="true"] { background: var(--el-primario); border-color: var(--el-primario); color: var(--el-sobre-primario); }
.el-idiomas small { display: block; color: var(--el-texto-2); font-weight: 400; }
.el-idiomas a[aria-current="true"] small { color: inherit; }
.el-idiomas li[hidden], [data-idiomas-sugeridos][hidden] { display: none; }
.el-nombre-idioma { overflow-wrap: anywhere; }
.el-buscar-idioma { position: relative; display: block; max-width: 420px; }
.el-buscar-idioma .bi { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--el-texto-2); pointer-events: none; }
.el-buscar-idioma input { padding-inline-start: 40px; }
/* Barra «Read this page in…» (OpenZPL .oz-suggest). Fija abajo: aparece tras
   cargar (el JS lee el idioma del navegador) y arriba empujaba la página (CLS). */
.el-sugerencia { position: fixed; inset-inline: 0; bottom: 0; z-index: 1030; background: var(--el-info-fondo);
  border-block-start: 1px solid var(--el-info-borde); box-shadow: 0 -4px 12px rgba(15, 23, 42, .08); font-size: .92rem; }
.el-sugerencia[hidden] { display: none; }
.el-sugerencia__op { color: var(--el-enlace); font-weight: 600; text-decoration: none; }
.el-sugerencia__op:hover { text-decoration: underline; }

/* Recuperación: tabla de errores */
.el-errores { list-style: none; margin: 0; padding: 0; border: 1px solid var(--el-borde); border-radius: var(--el-radio-s); background: var(--el-superficie); }
.el-errores li { display: grid; grid-template-columns: 1.5rem minmax(9rem, 14rem) 1fr auto; gap: .75rem; align-items: center; padding: .65rem 1rem;
  border-block-end: 1px solid var(--el-borde); font-size: .92rem; }
.el-errores li:last-child { border-block-end: 0; }
.el-errores .bi { color: var(--el-error); }
.el-errores strong { font-weight: 600; }
.el-errores .el-actual-error { background: var(--el-error-fondo); }
@media (max-width: 767.98px) { .el-errores li { grid-template-columns: 1.5rem 1fr; } .el-errores li > :nth-child(n+3) { grid-column: 2; } }

/* Prosa de páginas de contenido */
.el-prosa { max-width: 760px; }
.el-prosa h2 { margin-block-start: 2rem; }
.el-prosa ul { padding-inline-start: 1.25rem; }
.el-prosa li { margin-block-end: .35rem; }
.el-citable { font-size: 1.15rem; color: var(--el-texto-2); max-width: 46rem; }

/* Relacionados */
.el-relacionados { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 1.5rem;
  border-block-start: 1px solid var(--el-borde); padding-block-start: 1.25rem; margin-block-start: 2.5rem; }
.el-relacionados h2 { font-size: 1.15rem; margin: 0; }
.el-relacionados ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; margin: 0; padding: 0; flex: 1; }

/* Lista de beneficios con icono (alta de cuenta) */
.el-beneficios { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.el-beneficios li { display: grid; grid-template-columns: 2rem 1fr; gap: .75rem; }
.el-beneficios .bi { font-size: 1.4rem; color: var(--el-primario); }
.el-beneficios strong { display: block; }

.breadcrumb { --bs-breadcrumb-divider-color: var(--el-texto-2); --bs-breadcrumb-item-active-color: var(--el-texto-2); }
.visually-hidden-focusable:focus { background: var(--el-superficie) !important; color: var(--el-texto); z-index: 10; }

/* Subida: la etiqueta hace de botón; con JS el envío es automático */
.el-input-pdf:focus-visible + .el-nombre-archivo, .el-subida:focus-within .el-elegir { outline: 3px solid var(--el-foco); outline-offset: 2px; }

/* Subida por trozos */
.el-solo-js { display: none; }
.el-js .el-solo-js { display: block; }
.el-error { color: var(--el-error); font-weight: 600; }
.el-cuenta-atras { font-variant-numeric: tabular-nums; }