` que envuelve un `

` + un `<button>` (Envoyer pour
   correction). El CSS heredado de v2.2.0 aplicaba estilos de TEXTAREA
   (min-height: 140px, padding .9rem, border, etc.) directamente al
   selector `.ecoleng-doc__production` — al ser un `<div>`, el padding
   superior empujaba el botón muy abajo y dejaba aire excesivo arriba.
   Restringimos los estilos de textarea al elemento textarea real, y
   damos al `<div>__production` un layout limpio con stack vertical. */
.ecoleng-doc div.ecoleng-doc__production {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.ecoleng-doc div.ecoleng-doc__production > .ecoleng-doc__btn,
.ecoleng-doc div.ecoleng-doc__production > button {
    align-self: flex-start;
}
.ecoleng-doc div.ecoleng-doc__production > textarea {
    width: 100%;
    min-height: 140px;
    padding: .9rem;
    font: inherit;
    font-family: var(--ecoleng-font-body);
    background: var(--ecoleng-white);
    border: 1px solid var(--ecoleng-border);
    border-radius: var(--ecoleng-radius);
    resize: vertical;
}
.ecoleng-doc div.ecoleng-doc__production > textarea:focus {
    outline: 2px solid var(--ecoleng-blue);
    outline-offset: 2px;
}

/* (B) Refuerzo del grid de `.ecoleng-doc__line` para garantizar que
   Écouter y Lent queden en la **misma fila** a la derecha del speaker
   y la réplica, no apilados verticalmente. Ya estaba declarado en §22
   (v2.2.15) pero subimos especificidad para vencer caché/overrides
   residuales del tema. */
.ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line {
    display: grid;
    grid-template-columns: minmax(80px, auto) 1fr 100px 100px;
    align-items: center;
    gap: .6rem;
}
.ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line > .ecoleng-doc__btn {
    grid-row: auto;
    align-self: center;
}

/* v2.2.19 — Defensa CSS contra <br> espurios de wpautop dentro de los
   contenedores que dependen de orden DOM estricto. El filtro PHP de
   v2.2.18 no alcanza todos los paths de render de LearnDash en
   producción, así que ocultamos los <br> en los lugares donde nunca
   deben existir. `display: none` los retira del flujo y del grid sin
   afectar el conteo de columnas. */
.ecoleng-doc .ecoleng-doc__line > br,
.ecoleng-doc .ecoleng-doc__production > br,
.ecoleng-doc .ecoleng-doc__formule > br,
.ecoleng-doc .ecoleng-doc__topbar > br,
.ecoleng-doc .ecoleng-doc__pdf-links > br,
.ecoleng-doc .ecoleng-doc__footer-cta > br,
.ecoleng-doc .ecoleng-doc__card--letter > br,
.ecoleng-doc .ecoleng-doc__card--resource > br,
.ecoleng-doc .cei-exercise__actions > br,
.ecoleng-doc .cei-exercise__solution > br,
.ecoleng-doc .cei-exercise__solution-summary > br {
    display: none;
}

/* v2.2.20 — wpautop también mete <br> DENTRO de algunos elementos cuando
   el HTML fuente tiene whitespace+newline alrededor del texto (típico
   en `<button>\n  Envoyer pour correction\n</button>` → se convierte en
   `<button><br>Envoyer pour correction<br></button>`, y el botón pasa a
   tener 3 "líneas" de altura). Anulamos los <br> dentro de:
   - botones del wrapper
   - <a> con clase de botón (ej. PDFs, footer CTA)
   - <h1>..<h4> y <p> dentro del wrapper (whitespace de indentado).
   No afectamos los <br> dentro de help, notepad o textareas — ahí sí
   pueden tener uso editorial legítimo. */
.ecoleng-doc button > br,
.ecoleng-doc a.ecoleng-doc__btn > br,
.ecoleng-doc h1 > br,
.ecoleng-doc h2 > br,
.ecoleng-doc h3 > br,
.ecoleng-doc h4 > br {
    display: none;
}

/* ========================================================================
 * 25. Batch v2.2.21 — fix regresión móvil tras v2.2.19/§24 (issue #57)
 * ====================================================================== */

/* La regla v2.2.19 `.ecoleng-doc__dialogue .ecoleng-doc__line` (especificidad
   0,3,0) le ganaba a la override móvil de §22 línea 825 `.ecoleng-doc
   .ecoleng-doc__line` (especificidad 0,2,0), por lo que en móvil seguía
   aplicándose el grid 4-cols → frases desbordaban el contenedor y los
   botones quedaban apretados sin padding. Subimos especificidad de las
   reglas móvil para que ganen siempre. */
@media (max-width: 640px) {
    /* Stack vertical: speaker arriba, replique debajo (ambos span 2 cols),
       luego Écouter y Lent en fila propia 50/50. */
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
        row-gap: .5rem;
        column-gap: .5rem;
    }
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line > .ecoleng-doc__speaker,
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line > p {
        grid-column: 1 / -1;
    }
    /* Botones del diálogo en móvil: 50/50 con padding interno respirable.
       Subimos especificidad sobre la regla §21 línea 755 que fija
       width: 100px (selector `.ecoleng-doc .ecoleng-doc__line .ecoleng-doc__btn[data-tts-text]`,
       0,3,1). Añadimos `.ecoleng-doc__dialogue` para llegar a 0,4,1. */
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line .ecoleng-doc__btn[data-tts-text],
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line .ecoleng-doc__btn[data-tts-rate],
    .ecoleng-doc .ecoleng-doc__dialogue .ecoleng-doc__line [data-tts-rate] {
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: .55rem 1rem;
    }
}

/* Garantía adicional: el wrapper `.ecoleng-doc` y sus hijos directos no
   deben permitir desbordamiento horizontal en móvil — si una palabra larga
   o un bloque inflado se sale, debe ajustarse en lugar de empujar el
   layout completo. */
.ecoleng-doc {
    overflow-wrap: break-word;
    word-break: normal;
}
.ecoleng-doc .ecoleng-doc__dialogue,
.ecoleng-doc .ecoleng-doc__section,
.ecoleng-doc .ecoleng-doc__hero {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================================================
 * 26. Batch v2.2.24 — espaciado móvil estrecho en LearnDash Focus Mode
 * ====================================================================== */

/* En pantallas muy estrechas, LearnDash añade 27px por lado a
   `.ld-focus-content`. Sumado al padding propio de cards/secciones, el texto
   útil queda demasiado estrecho. Ensanchamos solo el wrapper de contenido de
   Lessons/Topics en Focus Mode para cubrir también contenidos legacy sin
   tocar globalmente `.ld-focus-content`. */
@media (max-width: 480px) {
    body.ld-in-focus-mode.single-sfwd-topic .ld-focus-content > .learndash,
    body.ld-in-focus-mode.single-sfwd-lessons .ld-focus-content > .learndash,
    body.ld-in-focus-mode.single-sfwd-topic .ld-focus-content > .learndash-wrapper.ld-layout,
    body.ld-in-focus-mode.single-sfwd-lessons .ld-focus-content > .learndash-wrapper.ld-layout {
        width: calc(100% + 34px);
        max-width: none;
        margin-left: -17px;
        margin-right: -17px;
    }

.ecoleng-doc .ecoleng-doc__hero,
    .ecoleng-doc .ecoleng-doc__section {
        padding: 15px;
    }

.ecoleng-doc .ecoleng-doc__card,
    .ecoleng-doc .ecoleng-doc__callout {
        padding: 11px 12px;
    }

.ecoleng-doc ul,
    .ecoleng-doc ol {
        padding-inline-start: 1.05em;
    }
}

/* ========================================================================
 * 27. Batch v2.2.27 — Solution desplegable para ejercicios cerrados
 * ====================================================================== */

.ecoleng-doc .cei-exercise__solution {
    display: block;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    margin-top: .75rem;
    padding: 0;
    border: 1px solid var(--ecoleng-purple, #8A2976);
    border-radius: 8px;
    background: #F5F8FB;
    color: var(--ecoleng-purple, #8A2976);
    box-shadow: none;
    overflow: hidden;
}

.ecoleng-doc .cei-exercise__solution[open] {
    width: 100%;
    border-color: var(--ecoleng-purple, #8A2976);
    border-radius: var(--ecoleng-radius, 15px);
    background: #F5F8FB;
}

.ecoleng-doc .cei-exercise__solution-summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-sizing: border-box;
    width: fit-content;
    max-width: 100%;
    min-height: 42px;
    padding: .55rem 1.1rem;
    border: 0;
    background: transparent;
    color: var(--ecoleng-purple, #8A2976);
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-family: var(--ecoleng-font-body);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.2;
}

.ecoleng-doc .cei-exercise__solution[open] > .cei-exercise__solution-summary {
    width: 100%;
    justify-content: flex-start;
}

.ecoleng-doc .cei-exercise__solution-summary::-webkit-details-marker {
    display: none;
}

.ecoleng-doc .cei-exercise__solution-summary::marker {
    content: "";
}

.ecoleng-doc .cei-exercise__solution:not([open]) > .cei-exercise__solution-summary:hover {
    background: #F5F8FB;
}

.ecoleng-doc .cei-exercise__solution-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    margin-left: .2rem;
    background: transparent;
    color: var(--ecoleng-purple, #8A2976);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    transition: transform .18s ease;
}

.ecoleng-doc .cei-exercise__solution[open] .cei-exercise__solution-arrow {
    transform: rotate(180deg);
}

.ecoleng-doc .cei-exercise__solution-body {
    padding: .35rem 1.1rem 1rem;
    color: var(--ecoleng-ink, #222221);
}

.ecoleng-doc .cei-exercise__solution-body > *:last-child {
    margin-bottom: 0;
}

/* ======================================================================
 * 28. Patch v2.2.28 — sommaire plus lisible sur Course/Lesson/Topic
 * ====================================================================== */

.ecoleng-doc .ecoleng-doc__toc > summary,
.ecoleng-doc .ecoleng-doc__toc > details > summary {
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: 0;
    font-family: var(--ecoleng-font-heading);
    font-weight: 700;
    color: var(--ecoleng-ink);
    list-style: none;
    cursor: pointer;
    padding: .15rem 0;
}

.ecoleng-doc .ecoleng-doc__toc > details > summary::-webkit-details-marker {
    display: none;
}

.ecoleng-doc .ecoleng-doc__toc > details > summary::marker {
    content: "";
}

.ecoleng-doc .ecoleng-doc__toc > details > summary::after {
    content: '▾';
    float: right;
    transition: transform .2s ease;
}

.ecoleng-doc .ecoleng-doc__toc > details[open] > summary::after {
    transform: rotate(180deg);
}

.ecoleng-doc .ecoleng-doc__toc > details[open] > summary {
    margin-bottom: .75rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--ecoleng-border);
}

/* ======================================================================
 * 31. Patch v2.2.32 — botones de lectura TTS (toggle Écouter/Arrêter) +
 *      slider de vitesse inyectado por JS.
 *
 *  - El JS (módulo Tts) marca los botones de lectura con .cei-tts-btn y los
 *    normaliza a estructura icono+label (<span class="btn-icon"> + <span class="btn-label">).
 *  - El botón de lectura gana degradado morado + sombra; al sonar pasa a
 *    .is-playing (degradado azul Ecoleng) y el JS cambia el icono ▶→■ y el
 *    texto Écouter→Arrêter.
 *  - El slider .cei-tts-rate se inyecta tras el botón, salvo en diálogos
 *    (.ecoleng-doc__line) y en botones de topbar (data-tts-stop).
 *  - Todo scopeado a .ecoleng-doc → retroactivo en topics publicados, sin
 *    afectar a topics antiguos sin wrapper.
 *  Ver notas/registro-correcciones.md y demo demo-ecouter-toggle-v3.html.
 * ====================================================================== */

/* --- Botón de lectura: hereda geometría de .ecoleng-doc__btn, añade degradado --- */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn {
    background: linear-gradient(135deg, #a8418f 0%, var(--ecoleng-purple) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(138, 41, 118, .35);
    transition: filter .15s ease, box-shadow .15s ease;
}
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn:hover {
    background: linear-gradient(135deg, #a8418f 0%, var(--ecoleng-purple) 100%);
    filter: brightness(1.05);
}
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn:active { filter: brightness(.97); }

/* estado "suena": mismo botón en azul Ecoleng degradado */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn.is-playing {
    background: linear-gradient(135deg, #1fb0db 0%, var(--ecoleng-blue) 100%);
    box-shadow: 0 2px 6px rgba(24, 149, 189, .35);
}
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn.is-playing:hover {
    background: linear-gradient(135deg, #1fb0db 0%, var(--ecoleng-blue) 100%);
    filter: brightness(1.05);
}

/* icono play/stop dibujado con CSS (no glifos de texto: tamaño idéntico y nítido
   en cualquier fuente/navegador). El JS solo togglea .is-playing; el .btn-icon
   queda como caja-ancla vacía y el ::before pinta el triángulo o el cuadrado.
   currentColor → heredan el blanco del texto del botón. */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn .btn-icon {
    font-size: 0;            /* anula cualquier glifo de texto residual */
    width: 13px;
    height: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ▶ triángulo (reposo) — un poco más grande que el cuadrado */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn:not(.is-playing) .btn-icon::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;   /* alto 14px, ancho 12px */
    border-color: transparent transparent transparent currentColor;
}
/* ■ cuadrado (sonando) */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn.is-playing .btn-icon::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: currentColor;
}

/* label: caja fija — "Écouter" y "Arrêter" tienen distinto ancho de glifos */
.ecoleng-doc .ecoleng-doc__btn.cei-tts-btn .btn-label {
    display: inline-block;
    min-width: 4.2em;
    text-align: center;
}

/* --- Slider de vitesse inyectado --- */
.ecoleng-doc .cei-tts-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: 12px;
    font-family: var(--ecoleng-font-body);
    font-size: .9rem;
    color: var(--ecoleng-ink);
    vertical-align: middle;
}
.ecoleng-doc .cei-tts-rate label { white-space: nowrap; }

/* Reset fuerte para sortear estilos de range del tema/WP (thumb descentrado). */
.ecoleng-doc .cei-tts-rate input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 120px;
    height: 14px;            /* alto total = tamaño del thumb, para centrarlo bien */
    margin: 0;
    padding: 0;
    background: transparent; /* el color va en el track, no en el input */
    cursor: pointer;
    outline: none;
    vertical-align: middle;
}
/* WebKit: pista explícita de 4px + thumb centrado con margin-top negativo */
.ecoleng-doc .cei-tts-rate input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    border: none;
    background: linear-gradient(to right,
        #c9a3c0 0%,
        #c9a3c0 var(--fill, 30%),
        #ececec var(--fill, 30%),
        #ececec 100%);
}
.ecoleng-doc .cei-tts-rate input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-top: -5px;        /* (4px track - 14px thumb) / 2 = -5px → centra el thumb */
    border-radius: 50%;
    background: var(--ecoleng-purple);
    border: none;
    cursor: pointer;
}
/* Firefox: track + thumb (Firefox ya centra el thumb sobre el track) */
.ecoleng-doc .cei-tts-rate input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    border: none;
    background: #ececec;
}
.ecoleng-doc .cei-tts-rate input[type="range"]::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #c9a3c0;
}
.ecoleng-doc .cei-tts-rate input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ecoleng-purple);
    border: none;
    cursor: pointer;
}

.ecoleng-doc .cei-tts-rate .rate-value {
    min-width: 2.2em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ecoleng-ink);
    opacity: .7;
}

/* --- Móvil: el slider baja debajo del botón, ancho disponible --- */
@media (max-width: 640px) {
    .ecoleng-doc .cei-tts-rate {
        display: flex;
        width: 100%;
        margin-inline-start: 0;
        margin-top: 8px;
    }
    .ecoleng-doc .cei-tts-rate input[type="range"] {
        flex: 1 1 auto;
        width: auto;
    }
}

(para no duplicar el