/* ============================================================
   Modo Ebook — ebook-mode.css
   ============================================================ */

/* ---------- Botón flotante de activación ---------- */
#ebook-trigger {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #1a1a2e;
    color: #e8d5b7;
    border: none;
    border-radius: 50px;
    font-size: 14px;
    font-family: 'Georgia', serif;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
#ebook-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0,0,0,0.45);
}
#ebook-trigger.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Overlay principal ---------- */
#ebook-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background: var(--eb-bg, #faf7f2);
    color: var(--eb-text, #2c2416);
    transition: background 0.3s ease, color 0.3s ease;
    font-family: var(--eb-font, Georgia, serif);
}
#ebook-overlay[hidden] { display: none; }

/* Temas */
#ebook-overlay[data-theme="light"] { --eb-bg:#faf7f2; --eb-text:#2c2416; --eb-border:#e0d8cc; --eb-muted:#8a7d6b; --eb-accent:#6b4c2a; --eb-panel:#f0ebe3; --eb-mark:#c9a96e; --eb-btn-bg:#ede8e1; --eb-btn-hover:#e0d8cc; }
#ebook-overlay[data-theme="dark"]  { --eb-bg:#141414; --eb-text:#d4cfc8; --eb-border:#2e2e2e; --eb-muted:#6e6e6e; --eb-accent:#c9a96e; --eb-panel:#1e1e1e; --eb-mark:#c9a96e; --eb-btn-bg:#252525; --eb-btn-hover:#2e2e2e; }
#ebook-overlay[data-theme="sepia"] { --eb-bg:#f4edd8; --eb-text:#3b2f1e; --eb-border:#d8cbb5; --eb-muted:#8a7560; --eb-accent:#7c5c34; --eb-panel:#ede3cc; --eb-mark:#b8883f; --eb-btn-bg:#e8dfc9; --eb-btn-hover:#ddd4bc; }

/* Colores de texto explícitos por tema — evita que el CSS del tema WP gane por especificidad */
#ebook-overlay[data-theme="light"] #ebook-article-title,
#ebook-overlay[data-theme="light"] #ebook-page-info { color: #2c2416 !important; }
#ebook-overlay[data-theme="dark"]  #ebook-article-title,
#ebook-overlay[data-theme="dark"]  #ebook-page-info { color: #d4cfc8 !important; }
#ebook-overlay[data-theme="sepia"] #ebook-article-title,
#ebook-overlay[data-theme="sepia"] #ebook-page-info { color: #3b2f1e !important; }

#ebook-overlay[data-theme="dark"] #ebook-header  { background: #141414 !important; }
#ebook-overlay[data-theme="dark"] #ebook-content { background: #141414 !important; }
#ebook-overlay[data-theme="dark"] #ebook-footer  { background: #141414 !important; }
#ebook-overlay[data-theme="dark"] .ebook-page    { color: #d4cfc8 !important; }

/* Tamaños de fuente */
#ebook-overlay[data-fontsize="small"]  { --eb-fsize: 15px; --eb-lh: 1.75; }
#ebook-overlay[data-fontsize="medium"] { --eb-fsize: 18px; --eb-lh: 1.85; }
#ebook-overlay[data-fontsize="large"]  { --eb-fsize: 22px; --eb-lh: 1.9;  }

/* Tipografías */
#ebook-overlay[data-font="sans"]  { --eb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
#ebook-overlay[data-font="serif"] { --eb-font: Georgia, 'Times New Roman', serif; }

/* ---------- Header ---------- */
#ebook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1px solid var(--eb-border);
    background: var(--eb-bg);
    flex-shrink: 0;
    gap: 12px;
}
#ebook-article-title {
    font-size: 13px;
    color: var(--eb-text);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55%;
    font-family: var(--eb-font);
}
#ebook-header-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
#ebook-page-info {
    font-size: 13px;
    color: var(--eb-text);
    margin-right: 8px;
    font-variant-numeric: tabular-nums;
    font-family: var(--eb-font);
}
#ebook-header-controls button {
    background: none;
    border: none;
    color: var(--eb-muted);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
#ebook-header-controls button:hover,
#ebook-header-controls button.active {
    background: var(--eb-btn-bg);
    color: var(--eb-text);
}

/* ---------- Body (aside + main) ---------- */
#ebook-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ---------- Paneles laterales ---------- */
#ebook-toc,
#ebook-settings {
    width: 260px;
    flex-shrink: 0;
    background: var(--eb-panel);
    border-right: 1px solid var(--eb-border);
    overflow-y: auto;
    padding: 20px 18px;
    transition: width 0.25s ease;
}
#ebook-toc[hidden],
#ebook-settings[hidden] { display: none; }

.ebook-panel-title {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eb-muted);
    margin: 0 0 14px;
    font-family: var(--eb-font);
}

/* TOC */
#ebook-toc-list { list-style: none; margin: 0; padding: 0; }
#ebook-toc-list li { margin-bottom: 2px; }
#ebook-toc-list a {
    display: block;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--eb-text);
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.15s;
    font-family: var(--eb-font);
}
#ebook-toc-list a:hover { background: var(--eb-btn-bg); }
#ebook-toc-list a.active { background: var(--eb-btn-bg); color: var(--eb-accent); font-weight: 600; }
#ebook-toc-list a[data-level="h3"] { padding-left: 22px; font-size: 12.5px; opacity: 0.85; }
#ebook-toc-reading-time {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--eb-border);
    font-size: 12px;
    color: var(--eb-muted);
    line-height: 1.6;
    font-family: var(--eb-font);
}

/* Settings */
.ebook-setting-group {
    margin-bottom: 22px;
}
.ebook-setting-group label {
    display: block;
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--eb-muted);
    margin-bottom: 8px;
    font-family: var(--eb-font);
}
#ebook-font-size-btns,
#ebook-font-btns,
#ebook-theme-btns {
    display: flex;
    gap: 6px;
}
#ebook-font-size-btns button,
#ebook-font-btns button,
#ebook-theme-btns button {
    background: var(--eb-btn-bg);
    border: 1px solid var(--eb-border);
    color: var(--eb-text);
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: var(--eb-font);
    transition: background 0.15s, border-color 0.15s;
}
#ebook-font-size-btns button.active,
#ebook-font-btns button.active,
#ebook-theme-btns button.active {
    background: var(--eb-accent);
    border-color: var(--eb-accent);
    color: #fff;
}
#ebook-font-size-btns button:nth-child(1) { font-size: 13px; }
#ebook-font-size-btns button:nth-child(2) { font-size: 17px; }
#ebook-font-size-btns button:nth-child(3) { font-size: 21px; }

/* ---------- Área de lectura ---------- */
#ebook-content {
    flex: 1;
    overflow-y: auto;
    padding: 52px 0;
    display: flex;
    justify-content: center;
    scroll-behavior: smooth;
}
.ebook-page {
    width: 100%;
    max-width: 680px;
    padding: 0 32px;
    font-size: var(--eb-fsize, 18px);
    line-height: var(--eb-lh, 1.85);
    color: var(--eb-text);
    font-family: var(--eb-font);
    animation: ebookFadeIn 0.3s ease;
}
@keyframes ebookFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ebook-page h2,
.ebook-page h3 {
    color: var(--eb-accent);
    font-family: var(--eb-font);
    margin: 1.4em 0 0.6em;
}
.ebook-page h2 { font-size: 1.35em; }
.ebook-page h3 { font-size: 1.15em; }
.ebook-page p  { margin: 0 0 1.15em; }
.ebook-page img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
}
.ebook-page a { color: var(--eb-accent); }
.ebook-page blockquote {
    border-left: 3px solid var(--eb-accent);
    margin: 1.2em 0;
    padding: 0.5em 1.2em;
    color: var(--eb-muted);
    font-style: italic;
}

/* Marcador visual en el contenido */
.ebook-bookmark-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: var(--eb-mark);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: var(--eb-font);
}
.ebook-bookmark-line::before,
.ebook-bookmark-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--eb-mark);
    opacity: 0.4;
}

/* ---------- Footer ---------- */
#ebook-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    border-top: 1px solid var(--eb-border);
    background: var(--eb-bg);
    flex-shrink: 0;
    gap: 12px;
}
#ebook-prev,
#ebook-next {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--eb-border);
    color: var(--eb-text);
    border-radius: 8px;
    padding: 8px 18px;
    cursor: pointer;
    font-size: 14px;
    font-family: var(--eb-font);
    transition: background 0.15s, border-color 0.15s, opacity 0.2s;
}
#ebook-prev:hover,
#ebook-next:hover {
    background: var(--eb-btn-bg);
}
#ebook-prev:disabled,
#ebook-next:disabled { opacity: 0.3; cursor: default; }

#ebook-footer-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#ebook-bookmark-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--eb-border);
    color: var(--eb-muted);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--eb-font);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ebook-bookmark-btn:hover { background: var(--eb-btn-bg); color: var(--eb-text); }
#ebook-bookmark-btn.has-bookmark { color: var(--eb-mark); border-color: var(--eb-mark); }
#ebook-bookmark-btn.has-bookmark #ebook-bookmark-icon { fill: var(--eb-mark); stroke: var(--eb-mark); }

#ebook-progress-bar-wrap {
    width: 200px;
    max-width: 100%;
    height: 3px;
    background: var(--eb-border);
    border-radius: 2px;
    overflow: hidden;
}
#ebook-progress-bar {
    height: 100%;
    background: var(--eb-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 0%;
}
#ebook-time-left {
    font-size: 11.5px;
    color: var(--eb-muted);
    font-family: var(--eb-font);
}

/* ---------- Toast ---------- */
#ebook-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: var(--eb-accent);
    color: #fff;
    padding: 10px 22px;
    border-radius: 20px;
    font-size: 13.5px;
    font-family: var(--eb-font);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 100001;
    white-space: nowrap;
    max-width: 90vw;
    text-align: center;
}
#ebook-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Botón TTS ---------- */
#ebook-tts-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid var(--eb-border);
    color: var(--eb-muted);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--eb-font);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#ebook-tts-btn:hover { background: var(--eb-btn-bg); color: var(--eb-text); }
#ebook-tts-btn.playing {
    color: var(--eb-accent);
    border-color: var(--eb-accent);
}
#ebook-tts-btn.playing #ebook-tts-icon {
    animation: ebookPulse 1.4s ease-in-out infinite;
}
@keyframes ebookPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Párrafo resaltado durante TTS */
.ebook-tts-highlight {
    background: color-mix(in srgb, var(--eb-mark) 22%, transparent);
    border-radius: 3px;
    transition: background 0.2s;
}

/* ---------- Velocidad de voz ---------- */
#ebook-tts-speed-btns {
    display: flex;
    gap: 6px;
}
#ebook-tts-speed-btns button {
    background: var(--eb-btn-bg);
    border: 1px solid var(--eb-border);
    color: var(--eb-text);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: var(--eb-font);
    transition: background 0.15s, border-color 0.15s;
}
#ebook-tts-speed-btns button.active {
    background: var(--eb-accent);
    border-color: var(--eb-accent);
    color: #fff;
}

/* ---------- Toggle pantalla activa ---------- */
.ebook-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 0;
    color: var(--eb-text);
    font-size: 13px;
    font-family: var(--eb-font);
}
.ebook-toggle-track {
    width: 38px;
    height: 22px;
    background: var(--eb-border);
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ebook-toggle-thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.ebook-toggle-btn[aria-pressed="true"] .ebook-toggle-track {
    background: var(--eb-accent);
}
.ebook-toggle-btn[aria-pressed="true"] .ebook-toggle-thumb {
    transform: translateX(16px);
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
    #ebook-toc,
    #ebook-settings {
        position: absolute;
        top: 0; left: 0; bottom: 0;
        z-index: 10;
        width: 80vw;
        max-width: 300px;
    }
    #ebook-header { padding: 12px 16px; }
    #ebook-footer { padding: 10px 14px; }
    .ebook-page { padding: 0 18px; }
    #ebook-prev span,
    #ebook-next span { display: none; }
    #ebook-progress-bar-wrap { width: 100px; }
}