/*!
 * lector-flotante.css — estilos del panel flotante de lectura en voz alta.
 * Autónomo: no depende de ningún framework ni del tema de la web.
 *
 * PARA CAMBIAR LA MARCA: toca solo el bloque :root de abajo.
 * El panel vive colgado del <body>, así que sus estilos NO pueden depender de
 * variables definidas dentro del contenedor del contenido.
 */

:root {
    /* Paleta de la marca (granate/naranja/crema). Estos valores salen de
       los tokens de plantilla/capitulo.html. */
    --lf-acento: #7D3443;           /* granate: botón Escuchar */
    --lf-acento-oscuro: #5e2733;
    --lf-acento-suave: #f6ecee;
    --lf-acento-claro: #e6ccd2;     /* granate muy claro: bolita del deslizador */
    --lf-borde-panel: rgba(125,52,67,0.35);
    --lf-fondo-panel: #fffdf5;      /* crema claro: contrasta sobre el fondo de página */
    --lf-naranja: #EC8118;          /* naranja de marca: valor de la velocidad */

    --lf-parar: #a8201a;            /* botón Parar: se queda rojo (parar en granate se
                                       confundiría con escuchar) */
    --lf-parar-suave: #FFF3F0;

    --lf-tinta: #000000;
    --lf-tinta-suave: #3a3a3a;
    --lf-borde: rgba(0,0,0,0.15);
    --lf-gris: #f2ede6;

    --lf-radio: 14px;               /* esquinas de la caja, mas redondeadas */
    --lf-radio-boton: 9px;          /* esquinas de los botones */
    --lf-fuente: 'Atkinson Hyperlegible Next', system-ui, Arial, sans-serif;
}

/* ======================================================================
 * 1. El panel
 * ====================================================================== */
.lector-flotante {
    position: fixed;
    z-index: 9999;
    width: min(420px, calc(100vw - 24px));
    display: block;
    padding: .75rem;
    background: var(--lf-fondo-panel);
    border: 2px solid var(--lf-borde-panel);
    border-radius: var(--lf-radio);
    box-shadow:
        0 26px 70px rgba(34, 34, 33, .24),
        0 8px 22px rgba(138, 41, 118, .12),
        0 0 0 1px rgba(138, 41, 118, .10);
    /* Por defecto se dibuja encima del punto indicado y centrado en él. */
    transform: translate(-50%, calc(-100% - 12px));
    opacity: 0;
    pointer-events: none;   /* invisible = no captura clics */
    transition: opacity .15s ease, transform .15s ease;
    font-family: var(--lf-fuente);
    color: var(--lf-tinta);
    box-sizing: border-box;
}

.lector-flotante *,
.lector-flotante *::before,
.lector-flotante *::after { box-sizing: border-box; }

.lector-flotante.is-arriba { transform: translate(-50%, calc(-100% - 12px)); }
.lector-flotante.is-abajo  { transform: translate(-50%, 12px); }

.lector-flotante.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ======================================================================
 * 2. Vista previa del texto seleccionado + botón cerrar
 * ====================================================================== */
.lector-flotante__preview {
    display: grid;
    grid-template-columns: 1fr 30px;
    gap: .5rem;
    align-items: start;
    padding-bottom: .55rem;
    margin-bottom: .6rem;
    border-bottom: 1px solid rgba(138, 41, 118, .20);
}

/* Máximo dos líneas: si la selección es larga, se corta con puntos suspensivos
   y el panel no crece sin control. */
.lector-flotante__preview span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;   /* web de alta legibilidad: .92rem (~14,7px) es pequeño aquí */
    line-height: 1.4;
    color: var(--lf-tinta-suave);
}

.lector-flotante__preview button[data-accion="cerrar"] {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: var(--lf-radio-boton);
    font-size: 1.15rem;
    line-height: 1;
    background: var(--lf-gris);
}

/* ======================================================================
 * 3. Controles
 * ====================================================================== */
/* El contenedor pasa de una fila unica a una columna de filas (botones,
   velocidad, voz). */
.lector-flotante__controles {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

/* Fila de botones: Escuchar ocupa el hueco, Parar a la derecha. */
.lector-flotante__botones {
    display: flex;
    align-items: center;
    gap: .45rem;
}
.lector-flotante__botones button[data-accion="leer"] { flex: 1 1 auto; }

/* Filas etiqueta + control (velocidad, voz). */
.lector-flotante__fila {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 42px;
}
.lector-flotante__fila-nombre {
    flex: 0 0 4.5rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--lf-tinta);
}

/* --- Velocidad: deslizador analogico (sustituye al desplegable de 4 pasos) --- */
.lector-flotante__vel {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: var(--lf-acento-suave);
    border: 1px solid var(--lf-borde-panel);
    cursor: pointer;
}
/* El pulgar: hay que declararlo para -webkit y para -moz por separado, no se
   heredan. >=28px para que el dedo no falle (regla del handoff). */
.lector-flotante__vel::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lf-acento-claro);   /* granate muy claro */
    border: 1.5px solid var(--lf-acento); /* borde granate: lo mantiene visible */
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    cursor: pointer;
}
.lector-flotante__vel::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--lf-acento-claro);
    border: 1.5px solid var(--lf-acento);
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    cursor: pointer;
}
.lector-flotante__vel:focus-visible { outline: 2px solid var(--lf-tinta); outline-offset: 3px; }
.lector-flotante__vel-val {
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: right;
    font-weight: 700;
    font-size: .9rem;
    color: var(--lf-naranja);
    font-variant-numeric: tabular-nums;
}

/* --- Voz: desplegable a ancho completo --- */
.lector-flotante__voz {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    border: 1px solid var(--lf-borde);
    border-radius: var(--lf-radio-boton);
    padding: 0 .5rem;
    background: #FFFFFF;
    color: var(--lf-tinta);
    font: inherit;
    font-size: .84rem;
    cursor: pointer;
}
/* Cuando no hay mas de una voz utilizable, la fila entera se oculta. */
.lector-flotante__fila[hidden] { display: none; }

.lector-flotante button {
    padding: .45rem .8rem;
    font: inherit;
    font-size: .86rem;
    font-weight: 600;
    background: #ffffff;
    border: 1px solid var(--lf-borde);
    border-radius: var(--lf-radio-boton);
    cursor: pointer;
    color: var(--lf-tinta);
    transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}

/* Altura mínima 42px: por debajo de eso el dedo falla en móvil. */
.lector-flotante button:not([data-accion="cerrar"]) {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .9rem;
    line-height: 1.1;
}

/* Escuchar y Parar en tipografia mas grande (son los botones principales). */
.lector-flotante button[data-accion="leer"],
.lector-flotante button[data-accion="parar"] {
    font-size: 1.02rem;
}

/* Escuchar: granate lleno con letras blancas YA EN REPOSO (estilo invertido). */
.lector-flotante button[data-accion="leer"] {
    background: var(--lf-acento);
    color: #fff;
    border-color: var(--lf-acento);
}
.lector-flotante button[data-accion="leer"]:hover {
    background: var(--lf-acento-oscuro);
    color: #fff;
    border-color: var(--lf-acento-oscuro);
}

.lector-flotante button[data-accion="parar"] {
    background: var(--lf-parar-suave);
    color: var(--lf-parar);
    border-color: var(--lf-parar);
}
.lector-flotante button[data-accion="parar"]:hover {
    background: #FBE3DE;
    color: #8e1a13;
    border-color: #8e1a13;
}

.lector-flotante button:focus-visible {
    outline: 2px solid var(--lf-tinta);
    outline-offset: 2px;
}

/* Como en reposo ya es granate lleno, mientras suena se OSCURECE para que se note
   que esta leyendo (si no, no habria diferencia visible con el reposo). */
.lector-flotante.is-sonando button[data-accion="leer"] {
    background: var(--lf-acento-oscuro);
    color: #fff;
    border-color: var(--lf-acento-oscuro);
}

/* ======================================================================
 * 4. Aviso (navegador sin soporte)
 * ====================================================================== */
.lector-flotante__aviso {
    margin-top: .65rem;
    padding: .7rem .8rem;
    border-radius: 10px;
    background: var(--lf-parar-suave);
    color: #8e1a13;
    font-size: .92rem;
    line-height: 1.4;
}

.lector-flotante__aviso[hidden] { display: none; }

/* ======================================================================
 * 5. Móvil: el panel deja de flotar y se ancla abajo, a lo ancho.
 *    Los !important son necesarios: el JS escribe left/top en línea para la
 *    posición de escritorio y aquí hay que anularlos.
 * ====================================================================== */
@media (max-width: 640px) {
    .lector-flotante {
        left: 12px !important;
        right: 12px;
        top: auto !important;
        bottom: 12px;
        width: auto;
        max-height: min(70vh, 520px);
        overflow: auto;
        transform: none;
    }

    .lector-flotante.is-arriba,
    .lector-flotante.is-abajo { transform: none; }

    /* Las filas ya se apilan solas (el contenedor es una columna). Solo se
       reparten los dos botones a mitad y mitad. */
    .lector-flotante__botones button {
        flex: 1 1 0;
        justify-content: center;
    }
}

/* ======================================================================
 * 6. Accesibilidad
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .lector-flotante { transition: none; }
}

/* ======================================================================
 * 7. Modo oscuro (AÑADIDO en este proyecto; no estaba en el original)
 *
 * El panel cuelga del <body>, asi que reacciona al mismo body[data-theme="dark"]
 * que ponen las plantillas. Ademas de redefinir las variables, hay que corregir
 * las reglas del original que llevan un color FIJO escrito a mano (label, select,
 * button con background:#FFFFFF), que en oscuro quedarian blancos deslumbrantes.
 * ====================================================================== */
body[data-theme="dark"] .lector-flotante {
    --lf-fondo-panel: #1e1e1e;
    --lf-tinta: #ededed;
    --lf-tinta-suave: #b4b4b4;
    --lf-borde: rgba(255,255,255,0.18);
    --lf-gris: #2a2a2a;
    --lf-acento-suave: #3a2630;   /* granate muy apagado para la pista del slider */
    --lf-borde-panel: rgba(255,255,255,0.22);
}
body[data-theme="dark"] .lector-flotante button { background: #2a2a2a; }
body[data-theme="dark"] .lector-flotante__voz { background: #2a2a2a; }
body[data-theme="dark"] .lector-flotante button[data-accion="leer"] { background: var(--lf-acento-suave); }
body[data-theme="dark"] .lector-flotante.is-sonando button[data-accion="leer"] {
    background: var(--lf-acento); color: #fff;
}
body[data-theme="dark"] .lector-flotante button[data-accion="parar"] { background: #3a1f1c; }
/* El pulgar del slider mantiene borde claro para no perderse sobre fondo oscuro. */

/* ======================================================================
 * 8. Impresión (AÑADIDO): el panel no debe salir en el PDF del capítulo.
 * ====================================================================== */
@media print {
    .lector-flotante { display: none !important; }
}