/* ============================================================
   Selector de tipo de lectura (Resumen / Detallada).
   Vive entre el hero y el panel del articulo.
   ============================================================ */

:root {
    --rm-ink: #373849;
    --rm-ink-soft: #6b6f7b;
    --rm-ease: cubic-bezier(0.32, 0.08, 0.24, 1);
}

.reading-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 auto 1.6rem auto;
    font-family: 'satoshiregular';
}

    .reading-mode[hidden] {
        display: none;
    }

.reading-mode-title {
    margin: 0;
    font-family: 'satoshimedium';
    font-size: 0.95rem;
    color: var(--rm-ink-soft);
}

/* ---------- El interruptor ---------- */

/* El carril es el tono gris azulado del sitio y la pastilla que se
   desliza va en blanco: lo seleccionado es siempre lo mas claro. */
.reading-switch {
    position: relative;
    display: inline-flex;
    padding: 6px;
    background-color: #dbe3ef;
    border: 0;
    border-radius: 999px;
}

.reading-switch-thumb {
    position: absolute;
    top: 6px;
    left: 6px;
    height: calc(100% - 12px);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #cfd9e8;
    border-radius: 999px;
    /* Solo se anima el desplazamiento. El ancho no cambia nunca porque
       las dos opciones miden lo mismo (ver .reading-switch-option): al
       animarlo tambien, la pastilla se estiraba y encogia por el camino,
       que es lo que hacia que se notara pasar bajo las letras. */
    transition: transform 0.34s var(--rm-ease);
}

/* Las dos opciones comparten ancho: asi la pastilla solo se traslada,
   sin deformarse, y en reposo cubre exactamente una de las dos. */
.reading-switch-option {
    position: relative;
    z-index: 1;
    min-width: 7.4rem;
    padding: 0.5rem 1.15rem;
    text-align: center;
    font-family: 'satoshimedium';
    font-size: 0.92rem;
    /* Mismo ajuste que en los puntos del carrusel: sobre el carril claro,
       #5f6577 se quedaba justo por debajo del 4.5:1 exigido. */
    color: #4e5468;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.25s var(--rm-ease);
}

    .reading-switch-option:hover {
        color: var(--rm-ink);
    }

    .reading-switch-option.is-active {
        color: var(--rm-ink);
    }

    .reading-switch-option:focus-visible {
        outline: 2px solid #3ec1be;
        outline-offset: 3px;
    }

/* ---------- Modo resumen ---------- */

/* En resumen solo quedan los bloques marcados desde el editor. Se mira
   unicamente el primer nivel: marcar un <ul> deja dentro sus <li>. */
.container-article-altrn.is-summary-mode > :not(.is-summary) {
    display: none;
}

/* Al cambiar de modo el contenido aparece con un desvanecido corto, para
   que el salto de altura no se sienta brusco. */
.container-article-altrn.is-switching {
    opacity: 0.35;
    transition: opacity 0.18s var(--rm-ease);
}

@media (prefers-reduced-motion: reduce) {
    .reading-switch-thumb,
    .container-article-altrn.is-switching {
        transition-duration: 0.01ms;
    }
}