/* ═════════════════════════════════════════════════════════════════════
 * Nueva Biblia — hoja de estilos
 * Sistema: tokens de color por tema (claro · sepia · oscuro), tipografía
 * serif georgiana para leer, sans para la interfaz; color por género
 * bíblico (--g-*) como hilo didáctico en toda la app.
 * ═════════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
    --fs: 1;
    --font-ui: "Inter", "Noto Sans Georgian", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "Noto Serif Georgian", "Noto Serif", Georgia, "Times New Roman", serif;
    --font-read: var(--font-serif);
    --font-he: "Noto Serif Hebrew", "SBL Hebrew", "Ezra SIL", "Times New Roman", serif;
    --font-el: "Noto Serif", "SBL Greek", "Gentium Plus", "Times New Roman", serif;
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
    --lh-read: 1.85;

    --appbar-h: 60px;
    --tabbar-h: 62px;
    --measure: 82rem;
    --panel-w: clamp(380px, 31vw, 500px);
    --radius: 14px;
    --radius-lg: 20px;

    --sw-yellow: #f2c230; --sw-green: #3dbb78; --sw-blue: #4a8fe0; --sw-pink: #e8689f; --sw-purple: #8c6fe6;
    --hl-yellow: rgba(245, 200, 40, .34); --hl-green: rgba(61, 187, 120, .24); --hl-blue: rgba(74, 143, 224, .24);
    --hl-pink: rgba(232, 104, 159, .22); --hl-purple: rgba(140, 111, 230, .24);
    --votd-1: #1c335f; --votd-2: #111f3a;

    --g-torah: #8a6a26; --g-history: #4b628a; --g-wisdom: #8f5532; --g-majorprop: #6f3c78; --g-minorprop: #8b6f3c;
    --g-gospel: #a5383a; --g-acts: #b5722a; --g-general: #436083; --g-pauline: #2d6b57; --g-apoc: #6a2a55;
    --g: var(--accent);
}
[data-lh="compact"] { --lh-read: 1.6; }
[data-lh="airy"]    { --lh-read: 2.1; }
[data-font="sans"]  { --font-read: var(--font-ui); }

:root, [data-theme="light"] {
    color-scheme: light;
    --bg: #f7f4ee; --surface: #fffdf9; --surface-2: #f2ede4; --surface-3: #e8e1d4;
    --ink: #1f1b16; --ink-2: #4a433a; --muted: #7a7165; --line: #e6ded0; --line-2: #d6ccba;
    --accent: #2c4c8c; --accent-2: #233f77; --accent-ink: #ffffff; --accent-soft: #e5ecf8; --accent-text: #284789;
    --gold: #a2711a; --gold-soft: #f5e9cf; --gold-on-accent: #f3c86a;
    --sel: rgba(44, 76, 140, .085);
    --scrim: rgba(24, 20, 14, .36);
    --shadow-1: 0 1px 2px rgba(31, 27, 22, .06), 0 1px 1px rgba(31, 27, 22, .03);
    --shadow-2: 0 12px 30px -14px rgba(31, 27, 22, .28), 0 4px 10px -6px rgba(31, 27, 22, .1);
    --shadow-3: 0 28px 70px -22px rgba(31, 27, 22, .42), 0 8px 18px -10px rgba(31, 27, 22, .16);
}
[data-theme="sepia"] {
    color-scheme: light;
    --bg: #f1e7d0; --surface: #f8f0dd; --surface-2: #ece0c5; --surface-3: #e1d2b0;
    --ink: #3a2c1c; --ink-2: #5a4631; --muted: #876f53; --line: #dfcda9; --line-2: #cfba92;
    --accent: #8a4a1d; --accent-2: #733d17; --accent-ink: #fff8ec; --accent-soft: #efdcc0; --accent-text: #7c4118;
    --gold: #956516; --gold-soft: #f0dfba; --gold-on-accent: #f6d48a;
    --sel: rgba(138, 74, 29, .1);
    --scrim: rgba(40, 28, 12, .34);
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111317; --surface: #181b21; --surface-2: #20242c; --surface-3: #2a2f39;
    --ink: #ece6da; --ink-2: #c6beb0; --muted: #8f887c; --line: #292e37; --line-2: #363c48;
    --accent: #8db0f0; --accent-2: #a8c4f5; --accent-ink: #0d1322; --accent-soft: rgba(141, 176, 240, .14); --accent-text: #9ebcf3;
    --gold: #d8b260; --gold-soft: rgba(216, 178, 96, .13); --gold-on-accent: #f0cc78;
    --sel: rgba(141, 176, 240, .12);
    --scrim: rgba(0, 0, 0, .55);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 14px 34px -14px rgba(0, 0, 0, .7);
    --shadow-3: 0 30px 80px -24px rgba(0, 0, 0, .85);
    --hl-yellow: rgba(242, 194, 48, .26); --hl-green: rgba(61, 187, 120, .24); --hl-blue: rgba(74, 143, 224, .28);
    --hl-pink: rgba(232, 104, 159, .26); --hl-purple: rgba(140, 111, 230, .3);
    --g-torah: #d0aa5c; --g-history: #8fa6d0; --g-wisdom: #d99467; --g-majorprop: #c088cc; --g-minorprop: #ccad74;
    --g-gospel: #e8797b; --g-acts: #e5a660; --g-general: #8aa7cc; --g-pauline: #6fbf9f; --g-apoc: #cf7cb0;
}

/* ── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar-h) + 16px); }
body {
    margin: 0; min-height: 100dvh;
    font-family: var(--font-ui); font-size: 16px; line-height: 1.55;
    color: var(--ink); background: var(--bg);
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    overflow-x: clip;
}
a { color: var(--accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: middle; }
.ico .f, .ico--fill { fill: currentColor; stroke: none; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }
.he { font-family: var(--font-he); }
.el { font-family: var(--font-el); }

.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.skip:focus { top: 10px; }

/* ── Botones y controles ────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
    font: 600 .92rem/1 var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, border-color .15s, transform .1s, color .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-text); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: default; }
.btn .ico { width: 18px; height: 18px; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-ink); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { height: 34px; padding: 0 14px; font-size: .84rem; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent-text); font: 600 .8rem var(--font-ui); cursor: pointer; }

.iconbtn {
    width: 40px; height: 40px; flex: none; border-radius: 999px; border: 0; padding: 0;
    display: inline-grid; place-items: center; background: transparent; color: var(--ink-2); cursor: pointer;
    transition: background-color .15s, color .15s;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }
.iconbtn--text { font: 700 1.02rem/1 var(--font-serif); letter-spacing: -.01em; }
.iconbtn--sm { width: 32px; height: 32px; }
.iconbtn--sm .ico { width: 16px; height: 16px; }

.chipbtn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink-2); font: 700 .78rem/1 var(--font-ui); cursor: pointer; white-space: nowrap;
}
.chipbtn:hover { border-color: var(--accent); color: var(--accent-text); }
.chipbtn .ico { width: 17px; height: 17px; }

.pill {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink-2); font: 600 .82rem/1 var(--font-ui); cursor: pointer; box-shadow: var(--shadow-1);
    transition: border-color .15s, color .15s;
}
.pill:hover { border-color: var(--accent); color: var(--accent-text); }
.pill .ico { width: 16px; height: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
    font: 600 .8rem/1 var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--accent); }
.chip b { font-size: .7rem; color: var(--muted); font-weight: 700; }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.chip.on b { color: inherit; opacity: .7; }
.chip .dot { width: 7px; height: 7px; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.seg button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 8px;
    border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); font: 600 .8rem/1.15 var(--font-ui); cursor: pointer; text-align: center;
}
.seg button .ico { width: 16px; height: 16px; }
.seg button:has(.ico) { flex-direction: column; gap: 4px; padding: 7px 4px; }
.seg button:has(.ico) span { font-size: .72rem; }
.seg--sm button:has(.ico) { flex-direction: row; }
.seg button span { overflow-wrap: anywhere; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg--sm { display: inline-grid; }
.seg--sm button { min-height: 30px; padding: 2px 12px; }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 500; user-select: none; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__ui { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: var(--surface-3); transition: background-color .2s; }
.switch__ui::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.switch input:checked + .switch__ui { background: var(--accent); }
.switch input:checked + .switch__ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__ui { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch--sm { font-size: .85rem; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g); display: inline-block; flex: none; }
.badge { display: inline-block; font: 700 .7rem/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.tag { display: inline-flex; align-items: center; font: 700 .68rem/1 var(--font-ui); padding: 4px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.lchip { display: inline-block; font: 700 .64rem/1 var(--font-ui); padding: 3px 6px; border-radius: 5px; background: var(--surface-3); color: var(--ink-2); margin-inline-start: 6px; }
.lchip--pending { background: var(--gold-soft); color: var(--gold); }
kbd { font: 600 .76rem/1 var(--font-mono); padding: 3px 7px; border-radius: 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--surface-2); color: var(--ink-2); }

.progress { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--g, var(--accent)), var(--gold)); }

.notice { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--ink); font-size: .9rem; }
.notice .ico { color: var(--gold); }

.empty { text-align: center; padding: 36px 16px; color: var(--muted); }
.empty .ico { width: 34px; height: 34px; margin: 0 auto 10px; color: var(--line-2); stroke-width: 1.4; }
.empty p { margin: 0; font-weight: 600; color: var(--ink-2); }
.empty .empty__sub { margin-top: 4px; font-weight: 400; color: var(--muted); font-size: .9rem; }

.spin { width: 28px; height: 28px; margin: 32px auto; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.skeleton { height: 60vh; margin: 24px 0; border-radius: var(--radius-lg); background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface) 50%, var(--surface-2) 70%); background-size: 300% 100%; animation: shimmer 1.4s infinite linear; }

.hint { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.hint .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--accent-text); }

/* ── Barra superior ─────────────────────────────────────────────────── */
.appbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: transform .28s ease;
}
.appbar__in {
    height: var(--appbar-h); max-width: 1480px; margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.brand__mark { width: 34px; height: 34px; color: var(--accent); }
.brand__name { font: 700 1.2rem/1 var(--font-serif); letter-spacing: -.01em; }
.topnav { display: flex; gap: 2px; margin-left: 10px; }
.topnav a {
    padding: 8px 12px; border-radius: 999px; color: var(--ink-2); text-decoration: none;
    font: 500 .92rem/1 var(--font-ui); white-space: nowrap; transition: background-color .15s, color .15s;
}
.topnav a:hover { background: var(--surface-2); color: var(--ink); }
.topnav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.refbtn {
    margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 16px; max-width: 46vw;
    border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
    font: 700 1rem/1 var(--font-serif); cursor: pointer; box-shadow: var(--shadow-1); white-space: nowrap;
}
.refbtn:hover { border-color: var(--accent); }
.refbtn .ico { width: 16px; height: 16px; color: var(--muted); }
.refbtn__label { overflow: hidden; text-overflow: ellipsis; }
.refbtn .short { display: none; }
.appbar__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.refbtn:not([hidden]) + .appbar__actions { margin-left: 0; }
.readbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.readbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); transform-origin: left; transform: scaleX(0); }
.loadbar { position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent), var(--gold), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
.loadbar.on { opacity: 1; animation: load 1.1s ease-in-out infinite; }

/* ── Barra inferior (móvil / tableta) ───────────────────────────────── */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line); transition: transform .28s ease;
}
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); text-decoration: none; font: 600 .68rem/1.1 var(--font-ui); }
.tabbar a .ico { width: 22px; height: 22px; padding: 2px 0; box-sizing: content-box; border-radius: 999px; transition: background-color .2s, padding .2s; }
.tabbar a[aria-current="page"] { color: var(--accent-text); }
.tabbar a[aria-current="page"] .ico { background: var(--accent-soft); padding: 2px 16px; }

/* ── Disposición general y panel ────────────────────────────────────── */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.view { min-width: 0; outline: none; padding-bottom: 72px; }
.scrim { position: fixed; inset: 0; z-index: 55; background: var(--scrim); animation: fade .2s; }

.panel { display: none; flex-direction: column; background: var(--surface); }
.panel__grip { height: 20px; display: grid; place-items: center; cursor: grab; touch-action: none; flex: none; }
.panel__grip span { width: 42px; height: 5px; border-radius: 9px; background: var(--line-2); }
.panel__head { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 14px; border-bottom: 1px solid var(--line); flex: none; touch-action: none; }
.panel__titles { flex: 1; min-width: 0; }
.panel__kicker { margin: 0; font: 600 .74rem/1.2 var(--font-ui); color: var(--muted); letter-spacing: .02em; }
.panel__title { margin: 2px 0 0; font: 700 1.14rem/1.25 var(--font-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; }
.panel__vnav { display: flex; }
.panel__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 32px; }

@media (min-width: 1100px) {
    body.panel-open .layout { grid-template-columns: minmax(0, 1fr) var(--panel-w); }
    body.panel-open .panel {
        display: flex; position: sticky; top: var(--appbar-h); height: calc(100dvh - var(--appbar-h));
        border-left: 1px solid var(--line); box-shadow: -12px 0 30px -28px rgba(0,0,0,.4);
        animation: slidein .22s ease-out;
    }
    .panel__grip { display: none; }
}
@media (max-width: 1099px) {
    .panel {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        height: min(76dvh, 720px); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-3);
        transform: translateY(105%); visibility: hidden;
        transition: transform .32s cubic-bezier(.2, .8, .2, 1), height .25s ease, visibility 0s .32s;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .panel.open { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, .8, .2, 1), height .25s ease; }
    .panel.full { height: calc(100dvh - 10px); }
}
@media (min-width: 760px) and (max-width: 1099px) {
    .panel { left: auto; right: 16px; bottom: 16px; width: min(560px, calc(100vw - 32px)); border-radius: 22px; height: min(82dvh, 760px); }
    .panel.full { height: calc(100dvh - 32px); }
}

/* ── Páginas ────────────────────────────────────────────────────────── */
.page { max-width: 1200px; margin: 0 auto; padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 32px) 32px; }
.page__head { margin-bottom: 22px; }
.page__title { margin: 0 0 6px; font: 700 clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem)/1.15 var(--font-serif); letter-spacing: -.01em; }
.page__sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; color: var(--muted); }
.page__sub .ico { width: 16px; height: 16px; color: var(--accent-text); }
.sec-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 14px; font: 700 1.2rem/1.3 var(--font-serif); }
.sec-head { text-align: center; margin: 0 auto 28px; max-width: 42rem; }
.sec-head__title { margin: 0 0 6px; font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem)/1.2 var(--font-serif); letter-spacing: -.01em; }
.sec-head__sub { margin: 0; color: var(--muted); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-text); }

/* Inicio */
.hero { position: relative; text-align: center; padding: clamp(24px, 7vw, 76px) 0 clamp(28px, 5vw, 48px); isolation: isolate; }
.hero::before {
    content: ""; position: absolute; inset: -40px 0 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(40rem 18rem at 50% 0%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 70%),
        radial-gradient(30rem 14rem at 80% 30%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.hero__eyebrow { margin: 0; font: 600 .82rem/1.4 var(--font-ui); color: var(--gold); letter-spacing: .06em; }
.hero__title { margin: 10px 0 14px; font: 700 clamp(2.5rem, 1.6rem + 4.2vw, 4.6rem)/1.04 var(--font-serif); letter-spacing: -.02em; }
.hero__quote { max-width: 42rem; margin: 0 auto 30px; font: italic 400 clamp(1rem, .95rem + .3vw, 1.16rem)/1.7 var(--font-serif); color: var(--ink-2); }
.hero__hints { margin: 16px 0 0; font-size: .88rem; color: var(--muted); }
.hero__hints a { text-decoration: none; font-weight: 600; }
.hero__hints a:hover { text-decoration: underline; }
.gobox {
    max-width: 660px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 18px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; box-shadow: var(--shadow-2);
    transition: border-color .15s, box-shadow .15s;
}
.gobox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-2); }
.gobox > .ico { color: var(--muted); }
.gobox input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; outline: none; font: 500 1.02rem var(--font-ui); color: var(--ink); }
.gobox input::-webkit-search-cancel-button { cursor: pointer; }

.dash { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); margin: 8px 0 64px; }
.card {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
    padding: 20px 22px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.card__kicker { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 .78rem/1.3 var(--font-ui); color: var(--muted); }
.card__kicker .ico { width: 17px; height: 17px; color: var(--gold); }
.card__title { margin: 0; font: 700 1.3rem/1.25 var(--font-serif); }
.card__meta { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.card__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.card > .btn { align-self: flex-start; margin-top: auto; }
.card--cont { border-top: 3px solid var(--g, var(--accent)); }
.card--votd { background: linear-gradient(155deg, var(--votd-1), var(--votd-2)); border-color: transparent; color: #f4efe5; }
.card--votd::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(243, 200, 106, .28), transparent 70%); pointer-events: none; }
.card--votd .card__kicker { color: rgba(244, 239, 229, .72); }
.card--votd .card__kicker .ico { color: var(--gold-on-accent); }
.card--votd .spin { border-color: rgba(255,255,255,.2); border-top-color: #fff; }
.votd__text { margin: 0; font: 500 1.08rem/1.7 var(--font-serif); }
.votd__ref { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--gold-on-accent); font-weight: 700; text-decoration: none; }
.votd__ref .ico { width: 16px; height: 16px; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.todo a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.todo a:hover { color: var(--accent-text); }
.todo .ico { width: 17px; height: 17px; color: var(--gold); }
.todo li.done a { color: var(--muted); text-decoration: line-through; }

.library { margin-bottom: 72px; }
.testaments { display: grid; gap: 44px; }
@media (min-width: 1000px) { .testaments { grid-template-columns: 1fr 1fr; gap: 52px; } }
.testament__title { display: flex; align-items: baseline; gap: 10px; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--line); font: 700 1.3rem/1.2 var(--font-serif); }
.testament__title small { font: 500 .8rem var(--font-ui); color: var(--muted); }
.genre { margin-bottom: 28px; }
.genre__head { margin-bottom: 10px; }
.genre__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .98rem/1.3 var(--font-ui); color: var(--g); }
.genre__desc { margin: 4px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.book-tile {
    position: relative; display: flex; flex-direction: column; gap: 3px; min-height: 62px; padding: 11px 12px 12px 16px; overflow: hidden;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.book-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g); }
.book-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--g) 45%, var(--line)); }
.book-tile__abbr { position: absolute; right: 10px; top: 9px; font: 700 .68rem/1 var(--font-ui); color: var(--g); opacity: .75; }
.book-tile__name { font: 600 .98rem/1.3 var(--font-serif); overflow-wrap: anywhere; }
.book-tile__meta { font-size: .74rem; color: var(--muted); }
.book-tile__bar { position: absolute; left: 4px; right: 0; bottom: 0; height: 3px; background: var(--surface-3); }
.book-tile__bar span { display: block; height: 100%; background: var(--g); }

.tools { margin-bottom: 40px; }
.tools__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); margin-bottom: 24px; }
.tool { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .15s, box-shadow .15s; }
.tool:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--shadow-2); }
.tool__ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.tool__title { margin: 4px 0 0; font: 700 1.05rem/1.3 var(--font-serif); }
.tool__desc { flex: 1; margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.tool__try { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--accent-text); font: 600 .86rem var(--font-ui); text-decoration: none; cursor: pointer; }
.tool__try .ico { width: 16px; height: 16px; transition: transform .15s; }
.tool__try:hover .ico { transform: translateX(3px); }

/* Página del libro */
.bookhero { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 40px); margin-bottom: 32px; border-radius: 26px; background: linear-gradient(140deg, color-mix(in srgb, var(--g) 13%, var(--surface)), var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--g) 25%, var(--line)); }
.bookhero__abbr { position: absolute; right: -10px; bottom: -40px; font: 700 clamp(7rem, 18vw, 13rem)/1 var(--font-serif); color: var(--g); opacity: .08; pointer-events: none; user-select: none; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 600 .8rem/1.3 var(--font-ui); color: var(--g); letter-spacing: .02em; }
.bookhero__title { margin: 8px 0 4px; font: 700 clamp(2.2rem, 1.5rem + 3vw, 3.6rem)/1.08 var(--font-serif); letter-spacing: -.015em; }
.bookhero__alt { margin: 0 0 12px; color: var(--muted); font-size: .92rem; }
.bookhero__desc { max-width: 42rem; margin: 0 0 18px; font: 400 1.05rem/1.65 var(--font-serif); color: var(--ink-2); }
.bookhero__stats { display: flex; gap: 20px; margin-bottom: 10px; color: var(--muted); font-size: .9rem; }
.bookhero__stats b { color: var(--ink); font-size: 1.1rem; }
.bookhero .progress { max-width: 420px; margin-bottom: 20px; }
.bookhero__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.booksec { margin-bottom: 40px; }
.booknav, .chnavs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.chapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 8px; }
.chap {
    position: relative; display: grid; place-items: center; height: 50px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
    font: 600 .95rem/1 var(--font-ui); transition: border-color .15s, color .15s, background-color .15s, transform .12s;
}
.chap:hover { border-color: var(--g); color: var(--g); transform: translateY(-1px); }
.chap.is-read { background: color-mix(in srgb, var(--g) 9%, var(--surface)); }
.chap.is-read::after { content: ""; position: absolute; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--g); }
.chap.is-cur { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chap.is-cur::after { background: var(--accent-ink); }

/* ── Lector ─────────────────────────────────────────────────────────── */
.chapter { max-width: var(--measure); margin: 0 auto; padding: clamp(22px, 5vw, 56px) clamp(18px, 5vw, 36px) 24px; }
.chapter[data-layout="stack"] { max-width: 92rem; }
.chapter[data-layout="cols"] { max-width: min(1440px, 100%); }
/* Columna ancha: margen lateral suficiente para no quedar bajo las flechas .edgenav (18px + 44px) */
@media screen and (min-width: 900px) { .chapter:not([data-layout="cols"]) { padding-inline: 72px; } }
.ch-head { text-align: center; margin-bottom: clamp(26px, 4vw, 42px); }
.ch-head::after { content: ""; display: block; width: 84px; height: 1px; margin: 22px auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ch-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 600 .78rem/1.3 var(--font-ui); letter-spacing: .02em; }
.ch-eyebrow:hover { background: var(--surface-2); color: var(--ink-2); }
.ch-title { margin: 8px 0 2px; font: 700 clamp(2rem, 1.35rem + 2.8vw, 3.3rem)/1.1 var(--font-serif); letter-spacing: -.015em; }
.ch-title__btn { all: unset; cursor: pointer; border-radius: 10px; }
.ch-title__btn:hover { color: var(--accent-text); }
.ch-title__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ch-sub { margin: 0; font: 600 1.12rem/1.4 var(--font-serif); color: var(--gold); }
.ch-sub__n { font: 400 .88rem var(--font-ui); color: var(--muted); }
.ch-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

.ch-body { font-family: var(--font-read); font-size: calc(1.1875rem * var(--fs)); line-height: var(--lh-read); color: var(--ink); font-feature-settings: "kern", "liga"; }
.para { margin: 0; }
.verse { cursor: pointer; scroll-margin-top: calc(var(--appbar-h) + 30vh); }
.vt { border-radius: .22em; transition: background-color .2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vn { font: 700 .58em/0 var(--font-ui); color: var(--accent-text); opacity: .72; vertical-align: super; margin: 0 .28em 0 .12em; user-select: none; }
.chapter[data-layout="para"] .vt { padding: .08em 0; }
.dropnum { float: left; margin: .07em .14em -.05em 0; font: 700 3.4em/.84 var(--font-serif); color: var(--gold); user-select: none; }

.chapter:not([data-layout="para"]) .verse {
    position: relative; display: grid; grid-template-columns: 2.3em minmax(0, 1fr); column-gap: .55em;
    margin: 0 -.6em; padding: .14em .6em .14em 0; border-radius: 12px; transition: background-color .2s;
}
.chapter:not([data-layout="para"]) .vn { grid-column: 1; grid-row: 1 / span 6; text-align: right; vertical-align: baseline; font-size: .6em; line-height: 3.1; margin: 0; }
.chapter[data-novnum] .vn[data-hide] { visibility: hidden; }
.chapter:not([data-layout="para"]) .vl { grid-column: 2; min-width: 0; }
.chapter:not([data-layout="para"]) .vnote { position: absolute; left: .55em; top: 1.9em; }
.chapter[data-layout="stack"] .verse { padding-block: .7em; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; padding-inline: 0; }
.chapter[data-layout="stack"] .vl + .vl { margin-top: .35em; }
.chapter[data-layout="stack"] .vl:not(:first-of-type):not(.vl--orig) { color: var(--ink-2); font-size: .95em; }
.lt { display: inline-block; margin-inline-end: .55em; padding: .1em .45em; border: 1px solid var(--line-2); border-radius: 6px; font: 700 .52em/1.3 var(--font-ui); letter-spacing: .03em; color: var(--muted); vertical-align: .3em; user-select: none; }
.vl[lang="en"], .vl[lang="ru"] { font-family: "Noto Serif", Georgia, serif; }
[data-font="sans"] .vl[lang="en"], [data-font="sans"] .vl[lang="ru"] { font-family: var(--font-ui); }

.chapter[data-layout="cols"] .colhead,
.chapter[data-layout="cols"] .verse { display: grid; grid-template-columns: 2.3em repeat(var(--ncols), minmax(0, 1fr)); column-gap: 1.6em; }
.chapter[data-layout="cols"] .colhead {
    position: sticky; top: var(--appbar-h); z-index: 3; margin-bottom: 6px; padding: 10px 0;
    background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line);
    font: 700 .74rem/1 var(--font-ui); color: var(--muted); letter-spacing: .03em;
}
.chapter[data-layout="cols"] .verse { margin: 0; padding: .55em 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.chapter[data-layout="cols"] .vn { grid-row: auto; }
.chapter[data-layout="cols"] .vl { grid-column: auto; }

/* Texto original */
.vl--orig[data-l="he"] { font-family: var(--font-he); font-size: 1.3em; line-height: 2.05; text-align: right; }
.vl--orig[data-l="el"] { font-family: var(--font-el); font-size: 1.04em; }
.w { cursor: pointer; border-radius: 6px; transition: background-color .15s, color .15s; }
.w:hover, .w.w--on { background: var(--accent-soft); color: var(--accent-text); }
.wt, .wg { display: none; }
.chapter[data-inter="tr"] .vl--orig .w,
.chapter[data-inter="gloss"] .vl--orig .w { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; margin: 0 0 .45em; margin-inline-start: .24em; padding: .06em .12em; line-height: 1.45; }
.chapter[data-inter="tr"] .wt, .chapter[data-inter="gloss"] .wt { display: block; direction: ltr; unicode-bidi: isolate; white-space: nowrap; font: italic 500 .52em/1.35 var(--font-ui); color: var(--muted); }
.chapter[data-inter="gloss"] .wg { display: block; direction: ltr; unicode-bidi: isolate; max-width: 9em; text-align: center; font: 600 .48em/1.3 var(--font-ui); color: var(--gold); }
.chapter[data-inter="gloss"] .wg:empty { display: none; }
.vl--orig[data-l="he"] .wt, .vl--orig[data-l="he"] .wg { font-size: .42em; }

/* Selección, subrayados, nota */
.verse.sel .vt { text-decoration: underline dotted var(--accent) 2px; text-underline-offset: .32em; }
.verse.sel .vl--orig .vt { text-decoration: none; }
.chapter[data-layout="para"] .verse.sel:not([data-mk]) .vt { background-color: var(--sel); }
.chapter:not([data-layout="para"]) .verse.sel { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.verse[data-mk="yellow"] .vt { background-color: var(--hl-yellow); }
.verse[data-mk="green"]  .vt { background-color: var(--hl-green); }
.verse[data-mk="blue"]   .vt { background-color: var(--hl-blue); }
.verse[data-mk="pink"]   .vt { background-color: var(--hl-pink); }
.verse[data-mk="purple"] .vt { background-color: var(--hl-purple); }
.verse.flash .vt { animation: flash 2.4s ease-out; }
.verse.speaking .vt { background-color: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.vnote { all: unset; display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; margin-inline-end: .18em; vertical-align: -.1em; color: var(--gold); cursor: pointer; border-radius: 4px; }
.vnote .ico { width: .78em; height: .78em; stroke-width: 2.2; }
.vnote:hover { background: var(--gold-soft); }

.ch-foot { margin-top: 52px; }
.ch-end { height: 1px; }
.chnav {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; min-width: 0;
    border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none;
    box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s;
}
.chnav:hover { border-color: var(--accent); transform: translateY(-1px); }
.chnav small { font: 600 .74rem var(--font-ui); color: var(--muted); }
.chnav span { display: flex; align-items: center; gap: 6px; font: 600 1rem/1.3 var(--font-serif); min-width: 0; }
.chnav--next { align-items: flex-end; text-align: right; }
.chnav .ico { width: 18px; height: 18px; color: var(--muted); }
.attrib { margin: 26px 0 0; text-align: center; font-size: .72rem; line-height: 1.55; color: var(--muted); }
.edgenav {
    position: fixed; top: 50%; z-index: 20; width: 44px; height: 44px; margin-top: -22px;
    display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-2); opacity: .55; transition: opacity .2s, transform .2s;
}
.edgenav:hover { opacity: 1; transform: scale(1.06); color: var(--accent-text); }
.edgenav--prev { left: 18px; }
.edgenav--next { right: 18px; }
body.panel-open .edgenav--next { right: calc(var(--panel-w) + 18px); }
.chapter[data-layout="cols"] ~ .edgenav { display: none; }

/* Barra de selección */
.selbar {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45;
    width: min(740px, calc(100vw - 20px)); transform: translateX(-50%);
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-3);
    animation: rise .22s ease-out; transition: bottom .28s ease;
}
.selbar__top { display: flex; align-items: center; gap: 10px; padding: 8px 8px 4px 16px; }
.selbar__ref { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .95rem/1.2 var(--font-serif); }
.swatches { display: flex; align-items: center; gap: 7px; }
.sw { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; transition: transform .12s; }
.sw:hover { transform: scale(1.1); }
.sw.on { box-shadow: 0 0 0 2px var(--ink); }
.sw--yellow { background: var(--sw-yellow); } .sw--green { background: var(--sw-green); } .sw--blue { background: var(--sw-blue); }
.sw--pink { background: var(--sw-pink); } .sw--purple { background: var(--sw-purple); }
.sw--none { display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.sw--none .ico { width: 14px; height: 14px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.swatch.sw--yellow, .swatch.sw--green, .swatch.sw--blue, .swatch.sw--pink, .swatch.sw--purple { border: 0; box-shadow: none; }
.selbar__acts { display: flex; gap: 2px; overflow-x: auto; padding: 2px 8px 10px; scrollbar-width: none; }
.selbar__acts::-webkit-scrollbar { display: none; }
.selbar__acts button {
    position: relative; flex: 1 0 auto; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 8px 6px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-2);
    font: 600 .72rem/1.1 var(--font-ui); cursor: pointer; transition: background-color .15s, color .15s;
}
.selbar__acts button:hover { background: var(--surface-2); color: var(--ink); }
.selbar__acts button.on { color: var(--gold); }
.selbar__acts b { position: absolute; top: 2px; right: calc(50% - 26px); min-width: 17px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 700 .6rem/16px var(--font-ui); }
@media (min-width: 1100px) { body.panel-open .selbar { left: calc((100vw - var(--panel-w)) / 2); width: min(700px, calc(100vw - var(--panel-w) - 24px)); } }
@media (max-width: 1099px) { body.panel-open .selbar { display: none; } }

/* Tooltip y vistazo */
.tip {
    position: fixed; z-index: 90; max-width: min(360px, calc(100vw - 16px)); padding: 9px 12px; pointer-events: none;
    border-radius: 12px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2);
    font: 500 .84rem/1.45 var(--font-ui); display: flex; flex-direction: column; gap: 2px;
}
.tip__w { font-size: 1.3rem; line-height: 1.3; }
.tip__w.he { font-family: var(--font-he); direction: rtl; }
.tip__w.el { font-family: var(--font-el); }
.tip__tr { font-style: italic; opacity: .85; }
.tip__lemma { font-family: var(--font-el); opacity: .8; }
.tip__gloss { color: var(--gold-on-accent); font-weight: 600; }
[data-theme="dark"] .tip__gloss { color: #8a5b10; }
.tip__ref { color: var(--gold-on-accent); }
[data-theme="dark"] .tip__ref { color: #8a5b10; }
.tip__text { font-family: var(--font-read); }

.peek {
    position: fixed; z-index: 80; width: max-content; max-width: min(380px, calc(100vw - 16px));
    display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
    border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
    opacity: 0; transform: translateY(4px) scale(.98); transition: opacity .15s, transform .15s;
}
.peek.in { opacity: 1; transform: none; }
.peek__word { display: flex; flex-direction: column; gap: 2px; }
.peek__word .tip__gloss { color: var(--gold); }
.peek__ref { font: 700 .9rem var(--font-serif); color: var(--accent-text); }
.peek__text { margin: 0; max-height: 40vh; overflow: auto; font: 400 .95rem/1.6 var(--font-read); }
.peek__acts { display: flex; justify-content: flex-end; }
.peek .btn { align-self: flex-end; }

/* Avisos */
.toasts { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 95; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-2); font: 600 .88rem var(--font-ui); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: auto; }
.toast.in { opacity: 1; transform: none; }
.toast__act { border: 0; background: none; color: var(--gold-on-accent); font-weight: 700; cursor: pointer; }

/* Reproductor */
.player {
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 44; transform: translateX(-50%);
    display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 16px; max-width: calc(100vw - 20px);
    border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3);
}
.player__t { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: 6px; font: 600 .85rem var(--font-serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player__t .ico { color: var(--gold); width: 18px; height: 18px; }
.player__pp { background: var(--accent); color: var(--accent-ink); }
.player__pp:hover { background: var(--accent-2); color: var(--accent-ink); }
.player__pp .ico { width: 18px; height: 18px; }
.player__rate { height: 32px; min-width: 44px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 700 .78rem var(--font-ui); cursor: pointer; }
body.has-sel .player { bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ── Diálogos ───────────────────────────────────────────────────────── */
dialog.dlg { padding: 0; border: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; overflow: visible; }
dialog.dlg::backdrop { background: var(--scrim); animation: fade .2s; }
.dlg__box { display: flex; flex-direction: column; max-height: inherit; overflow: hidden; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); }
.dlg__box:focus { outline: none; }
.dlg__grip { flex: none; width: 42px; height: 5px; margin: 8px auto 0; border-radius: 9px; background: var(--line-2); touch-action: none; }
.dlg__head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px 6px 20px; touch-action: none; }
.dlg__title { margin: 0; font: 700 1.12rem/1.3 var(--font-serif); }
.dlg__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 22px; }
.dlg--sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-height: 92dvh; }
.dlg--sheet .dlg__box { max-height: 92dvh; border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sheetin .3s cubic-bezier(.2, .8, .2, 1); }
.dlg--pop { position: fixed; margin: 0; width: 370px; max-height: min(82dvh, 660px); }
dialog.dlg.dlg--pop::backdrop { background: transparent; }
.dlg--pop .dlg__box { border: 1px solid var(--line); animation: pop .16s ease-out; }
.dlg--pop .dlg__grip { display: none; }
.dlg.out .dlg__box { animation: out .16s ease-in forwards; }
@media (min-width: 760px) {
    .dlg--sheet { inset: 0; margin: auto; width: min(640px, calc(100vw - 48px)); height: fit-content; max-height: min(86dvh, 820px); }
    .dlg--sheet .dlg__box { max-height: min(86dvh, 820px); border-radius: var(--radius-lg); animation: pop .2s ease-out; padding-bottom: 0; }
    .dlg--sheet .dlg__grip { display: none; }
    .dlg--nav.dlg--sheet { width: min(1000px, calc(100vw - 48px)); height: min(86dvh, 840px); }
}
.dlg--nav .dlg__box { height: 100%; }
.dlg--nav.dlg--sheet { height: 94dvh; }
.dlg--nav .dlg__body { display: flex; flex-direction: column; padding-bottom: 0; }
.dlg--set.dlg--pop { width: 450px; }
.dlg--langs.dlg--pop { width: 420px; }
.dlg--menu.dlg--pop { width: 320px; }
.dlg--signin.dlg--pop { width: 380px; }

/* Navegador */
.navg { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.navg__search { position: relative; display: flex; align-items: center; flex: none; }
.navg__search > .ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.navg__input { width: 100%; height: 50px; padding: 0 16px 0 44px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: 500 1rem var(--font-ui); outline: none; transition: border-color .15s, box-shadow .15s; }
.navg__input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.navg__suggest { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; flex: none; }
.navg__sg { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-align: left; font: 500 .94rem/1.3 var(--font-ui); cursor: pointer; }
.navg__sg span { flex: 1; }
.navg__sg .ico { width: 18px; height: 18px; color: var(--muted); }
.navg__sg.is-first { border-color: var(--accent); background: var(--accent-soft); }
.navg__sg.is-first .ico { color: var(--accent-text); }
.navg__sg:hover { border-color: var(--accent); }
.navg__view { flex: 1; min-height: 0; overflow-y: auto; margin: 12px -20px 0; padding: 4px 20px 28px; overscroll-behavior: contain; }
.navg__cols { display: grid; gap: 22px; }
@media (min-width: 760px) { .navg__cols { grid-template-columns: 1fr 1fr; gap: 30px; } }
.navg__th { margin: 6px 0 12px; font: 700 1.02rem var(--font-serif); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.navg__genre { margin-bottom: 14px; }
.navg__gname { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 .76rem/1.3 var(--font-ui); color: var(--g); }
.navg__books { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.navg__book {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px; min-width: 0;
    border-radius: 10px; border: 1px solid var(--line); border-left: 3px solid var(--g); background: var(--surface);
    color: var(--ink); text-align: left; font: 500 .9rem/1.25 var(--font-ui); cursor: pointer; transition: background-color .12s;
}
.navg__book span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navg__book small { color: var(--muted); font-size: .72rem; flex: none; }
.navg__book:hover { background: var(--surface-2); }
.navg__book.is-cur { background: var(--accent-soft); }
.navg__chead { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.navg__ctitle { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.navg__ctitle b { display: flex; align-items: center; gap: 8px; font: 700 1.3rem/1.2 var(--font-serif); }
.navg__ctitle .dot { display: none; }
.navg__ctitle small { color: var(--muted); font-size: .8rem; }

/* Ajustes */
.set { display: grid; gap: 18px; }
.set__sec--2 { display: grid; gap: 18px; }
.set__h { display: flex; justify-content: space-between; margin: 0 0 8px; font: 700 .8rem/1.2 var(--font-ui); color: var(--ink-2); letter-spacing: .02em; }
.set__val { color: var(--muted); font-weight: 600; }
.set__note { margin: 6px 0 0; font-size: .78rem; line-height: 1.5; color: var(--muted); }
.sizer { display: flex; align-items: center; gap: 8px; }
.sizer input { flex: 1; accent-color: var(--accent); }
.set__preview { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-family: var(--font-read); font-size: calc(1.1875rem * var(--fs)); line-height: var(--lh-read); }
.opt { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; transition: border-color .15s, background-color .15s; }
.opt:hover { border-color: var(--line-2); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__box { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 2px solid var(--line-2); color: transparent; }
.opt__box .ico { width: 15px; height: 15px; stroke-width: 3; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt:has(input:checked) .opt__box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.opt input:focus-visible ~ .opt__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt__main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.opt__main small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.opt__tag { font: 700 .72rem var(--font-ui); color: var(--muted); }
.langs .set__h { margin-top: 16px; }
.menu__user { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px; border-radius: 14px; background: var(--surface-2); }
.menu__user > .ico { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--surface); color: var(--accent-text); }
.menu__user div { display: flex; flex-direction: column; min-width: 0; }
.menu__user small { color: var(--muted); font-size: .78rem; line-height: 1.4; }
.menu__list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.menu__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-decoration: none; text-align: left; font: 500 .95rem var(--font-ui); cursor: pointer; }
.menu__item:hover { background: var(--surface-2); }
.menu__item .ico { width: 19px; height: 19px; color: var(--muted); }
.menu__item--accent { color: var(--accent-text); font-weight: 700; }
.menu__item--accent .ico { color: var(--accent-text); }
.menu__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0; padding: 10px 12px; border-block: 1px solid var(--line); font-size: .9rem; }
.menu__row > span { display: flex; align-items: center; gap: 10px; }
.menu__row .ico { width: 19px; height: 19px; color: var(--muted); }

/* Entrar con Google */
.signin { display: flex; flex-direction: column; gap: 14px; padding-bottom: 4px; }
.signin__lead { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.55; }
.signin__btn { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.signin__msg { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--ink); font-size: .85rem; line-height: 1.45; }
.signin__note { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; text-align: center; }
.keys { width: 100%; border-collapse: collapse; font-size: .92rem; }
.keys td { padding: 9px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.keys td:first-child { white-space: nowrap; width: 40%; }

/* ── Panel: contenido ───────────────────────────────────────────────── */
.pverse { margin: 14px 0 6px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border-left: 3px solid var(--gold); max-height: 34vh; overflow-y: auto; }
.pverse__l { margin: 0; font: 400 calc(1rem * var(--fs))/1.65 var(--font-read); }
.pverse__l + .pverse__l { margin-top: 6px; color: var(--ink-2); }
.pverse__l.is-he { font-family: var(--font-he); font-size: calc(1.2rem * var(--fs)); }
.pverse__l.is-el { font-family: var(--font-el); }
.pverse .lt { font-size: .6rem; }
.tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 10px 16px 9px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px;
    border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--ink-2);
    font: 600 .84rem/1 var(--font-ui); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s;
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-ink); }
.tab b { min-width: 18px; padding: 2px 6px; border-radius: 999px; background: var(--surface-3); color: var(--ink-2); font: 700 .68rem/1.1 var(--font-ui); text-align: center; }
.tab[aria-selected="true"] b { background: rgba(255, 255, 255, .22); color: inherit; }
[data-theme="dark"] .tab[aria-selected="true"] b { background: rgba(0, 0, 0, .18); }
.dotb { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.tabs--page { position: static; margin: 0 0 20px; padding: 0 0 10px; background: none; }

.cm { margin-bottom: 10px; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.cm--sj { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: linear-gradient(180deg, var(--gold-soft), var(--surface) 160px); }
.cm summary { position: relative; display: grid; gap: 4px; padding: 12px 40px 12px 14px; list-style: none; cursor: pointer; }
.cm summary::-webkit-details-marker { display: none; }
.cm summary::after { content: ""; position: absolute; right: 16px; top: 18px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; }
.cm details[open] summary::after { transform: rotate(-135deg); top: 21px; }
.cm summary:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.cm__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cm__who { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; }
.cm__who .ico { width: 17px; height: 17px; color: var(--gold); }
.cm__yrs { color: var(--muted); font-size: .76rem; }
.cm__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.cm__src { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.cm__peek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink-2); font: 400 .9rem/1.6 var(--font-read); }
.cm details[open] .cm__peek { display: none; }
.cm__body { padding: 12px 14px 16px; border-top: 1px dashed var(--line); font: 400 calc(1rem * var(--fs))/1.78 var(--font-read); color: var(--ink); overflow-wrap: anywhere; }
.cm__body.rich p { margin: 0 0 .7em; }
.ref { color: var(--accent-text); text-decoration: none; font-weight: 600; white-space: nowrap; border-bottom: 1px dotted currentColor; cursor: pointer; }
.ref:hover { border-bottom-style: solid; }

.xrefs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xref { padding: 10px 12px 10px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--g); background: var(--surface); }
.xref__ref { font: 700 .92rem var(--font-serif); text-decoration: none; color: var(--ink); }
.xref__ref:hover { color: var(--accent-text); }
.xref__text { margin: 4px 0 0; font: 400 calc(.94rem * var(--fs))/1.6 var(--font-read); color: var(--ink-2); }
.xref__note { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }

.sec { margin-bottom: 22px; }
.sec__title { margin: 4px 0 8px; font: 700 1rem var(--font-serif); }
.deep { display: grid; gap: 6px; }
.deep__row {
    display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); grid-template-areas: "orig mid" "orig main"; column-gap: 12px; row-gap: 2px;
    width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
    text-align: left; color: var(--ink); cursor: pointer; transition: border-color .15s, background-color .15s;
}
.deep__row:hover { border-color: var(--accent); background: var(--accent-soft); }
.deep__orig { grid-area: orig; align-self: center; font-size: 1.35rem; line-height: 1.3; }
.deep__orig.he { font-family: var(--font-he); font-size: 1.5rem; }
.deep__orig.el { font-family: var(--font-el); }
.deep__mid { grid-area: mid; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deep__tr { font-style: italic; color: var(--muted); font-size: .86rem; }
.deep__main { grid-area: main; display: flex; flex-direction: column; gap: 1px; }
.deep__ctx { font-weight: 700; font-size: .92rem; }
.deep__gloss { font-size: .86rem; color: var(--ink-2); }
.deep__morph { font-size: .76rem; color: var(--muted); }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; }
.wchip { padding: 6px 11px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 calc(.95rem * var(--fs)) var(--font-read); cursor: pointer; }
.wchip:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }

.lexhead { margin: 16px 0 12px; padding: 18px; border-radius: 16px; text-align: center; background: linear-gradient(160deg, var(--accent-soft), var(--surface-2)); }
.lexhead__word { font-size: 2.3rem; line-height: 1.2; }
.lexhead__word.he { font-family: var(--font-he); font-size: 2.6rem; }
.lexhead__word.el { font-family: var(--font-el); }
.lexhead__meta { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 6px; }
.lexhead__tr { font-style: italic; color: var(--ink-2); }
.lexhead__gloss { margin: 10px 0 0; font: 700 1.05rem/1.45 var(--font-serif); }
.lexhead__form { margin: 8px 0 0; font-size: .82rem; color: var(--muted); }
.lexhead__form b { color: var(--ink-2); }
.lex { margin-bottom: 12px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.lex__tag { display: flex; align-items: center; margin-bottom: 8px; font: 700 .74rem var(--font-ui); color: var(--muted); letter-spacing: .03em; }
.lex__short { margin: 0 0 8px; font: 700 1rem/1.5 var(--font-serif); }
.lex__long { font: 400 calc(.95rem * var(--fs))/1.7 var(--font-read); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.lex__der { margin: 10px 0 0; font-size: .85rem; color: var(--ink-2); }
.lex__der span { font-weight: 700; color: var(--muted); }
.lex__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin: 0 0 8px; }
.lex__meta .he { font-size: 1.3rem; }
.gram-surface { margin: 6px 0 12px; text-align: center; font-size: 1.8rem; }
.gram-surface.he { font-family: var(--font-he); }
.gram-surface.el { font-family: var(--font-el); }
.bp-gram-seg { margin-bottom: 12px; }
.bp-gram-role { margin-bottom: 6px; font: 700 .76rem var(--font-ui); color: var(--muted); }
.bp-gram-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-gram-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 var(--font-ui); text-align: left; }
button.bp-gram-chip { cursor: pointer; }
button.bp-gram-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.bp-gram-chip-pos { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.bp-gram-chip-pos:hover { background: var(--accent-2); color: var(--accent-ink); }
.bp-gram-cat { font: 600 .66rem var(--font-ui); color: var(--muted); }
.bp-gram-chip-pos .bp-gram-cat { color: inherit; opacity: .75; }
.bp-gram-tipbox { margin: 10px 0; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); font-size: .9rem; line-height: 1.6; }
.bp-gram-raw { margin-top: 12px; font: 500 .74rem var(--font-mono); color: var(--muted); text-align: right; }
.bp-gram-lang { margin-bottom: 8px; }

.concsum { margin: 4px 0 12px; color: var(--ink-2); font-size: .9rem; }
.concsum b { color: var(--ink); font-size: 1.05rem; }
.cres { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cres__a { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.cres__a:hover { border-color: var(--accent); }
.cres__ref { display: flex; align-items: center; gap: 7px; font: 700 .86rem var(--font-serif); color: var(--accent-text); }
.cres__ref .dot { width: 7px; height: 7px; }
.cres__text { font: 400 calc(.95rem * var(--fs))/1.6 var(--font-read); }
.cres__text.he { font-family: var(--font-he); font-size: calc(1.12rem * var(--fs)); text-align: right; }
.cres__text.el { font-family: var(--font-el); }
.cres__tr { font-size: .84rem; line-height: 1.5; color: var(--muted); }
mark { background: color-mix(in srgb, var(--sw-yellow) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 .05em; }

.notebox__ta { width: 100%; min-height: 200px; resize: vertical; padding: 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: 400 calc(1rem * var(--fs))/1.7 var(--font-read); outline: none; }
.notebox__ta:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--surface); }
.notebox__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.notebox__sync { display: inline-flex; align-items: center; gap: 6px; }
.notebox__sync .ico { width: 15px; height: 15px; }
.notebox__status { color: var(--accent-text); font-weight: 600; }

/* ── Búsqueda ───────────────────────────────────────────────────────── */
.searchpage { max-width: 860px; }
.gobox--search { max-width: none; margin: 0 0 14px; }
.filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.refcard { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-text); font: 700 1rem var(--font-serif); text-decoration: none; }
.refcard span { flex: 1; }
.sres li { list-style: none; }
.recent { margin-bottom: 28px; }
.tips__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tips__list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); line-height: 1.55; font-size: .92rem; }
.tips__list .ico { color: var(--accent-text); margin-top: 2px; }

/* ── Mi Biblia ──────────────────────────────────────────────────────── */
.mypage { max-width: 860px; }
.myacts { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.mylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.myitem { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); border-left: 3px solid var(--g); background: var(--surface); }
.myitem__top { display: flex; align-items: center; gap: 10px; }
.myitem__ref { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font: 700 .98rem var(--font-serif); color: var(--ink); text-decoration: none; }
.myitem__ref:hover { color: var(--accent-text); }
.myitem__date { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.myitem__date .ico { width: 14px; height: 14px; color: var(--gold); }
.myitem__text { margin: 6px 0 0; font: 400 calc(.98rem * var(--fs))/1.65 var(--font-read); }
.myitem__text:empty { display: none; }
.hl { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.myitem__text.hl--yellow { background: linear-gradient(transparent 8%, var(--hl-yellow) 8%); }
.myitem__text.hl--green { background: linear-gradient(transparent 8%, var(--hl-green) 8%); }
.myitem__text.hl--blue { background: linear-gradient(transparent 8%, var(--hl-blue) 8%); }
.myitem__text.hl--pink { background: linear-gradient(transparent 8%, var(--hl-pink) 8%); }
.myitem__text.hl--purple { background: linear-gradient(transparent 8%, var(--hl-purple) 8%); }
.myitem__note { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gold-soft); white-space: pre-wrap; font-size: .92rem; line-height: 1.6; }

/* ── Planes ─────────────────────────────────────────────────────────── */
.planspage { max-width: 960px; }
.plan-active { margin-bottom: 40px; padding: clamp(18px, 3vw, 28px); border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(150deg, var(--accent-soft), var(--surface) 60%); }
.plan-active__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.plan-active__title { margin: 4px 0; font: 700 1.6rem/1.2 var(--font-serif); }
.plan-active__stats { margin: 10px 0; color: var(--ink-2); font-size: .9rem; }
.plan-active .notice { margin-bottom: 14px; }
.ring { --p: 0; position: relative; width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-3) 0); }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.ring span { position: relative; font: 700 1rem var(--font-ui); }
.todo--big { gap: 8px; margin-bottom: 16px; }
.todo--big li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.todo--big a { font: 600 1.02rem var(--font-serif); }
.todo__chk { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; color: transparent; cursor: pointer; }
.todo__chk .ico { width: 16px; height: 16px; stroke-width: 3; color: inherit; }
.todo--big li.done .todo__chk { background: var(--sw-green); border-color: var(--sw-green); color: #fff; }
.calstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(12px, 1fr)); gap: 4px; margin-top: 6px; }
.cal { aspect-ratio: 1; border-radius: 3px; background: var(--surface-3); }
.cal.done { background: var(--sw-green); }
.cal.missed { background: color-mix(in srgb, var(--sw-pink) 45%, var(--surface-3)); }
.cal.today { outline: 2px solid var(--accent); outline-offset: 1px; }
.plans-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.plan { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.plan.is-active { border-color: var(--accent); }
.plan__title { margin: 4px 0 0; font: 700 1.1rem/1.3 var(--font-serif); }
.plan__desc { flex: 1; margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.55; }
.plan__meta { margin: 0; color: var(--muted); font-size: .8rem; }
.plan .btn, .plan .tag { align-self: flex-start; }

/* ── Guía ───────────────────────────────────────────────────────────── */
.guidepage { max-width: 980px; }
.guide { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: 44px; }
.gstep { position: relative; display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.gstep__n { position: absolute; right: 14px; top: 10px; font: 700 1.6rem var(--font-serif); color: var(--surface-3); }
.gstep__title { margin: 2px 0 6px; font: 700 1.05rem var(--font-serif); }
.gstep p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }
.sources { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; font-size: .9rem; }
.sources dt { font-weight: 700; }
.sources dd { margin: 0; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 600px) { .sources { grid-template-columns: 1fr; } .sources dd { margin-bottom: 8px; } }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1180px) { body[data-view="read"] .brand__name, body[data-view="book"] .brand__name { display: none; } }
@media (max-width: 899px) {
    .topnav { display: none; }
    .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); }
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .selbar { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
    .player { bottom: calc(var(--tabbar-h) + 10px + env(safe-area-inset-bottom)); }
    body.has-sel .player { bottom: calc(var(--tabbar-h) + 150px + env(safe-area-inset-bottom)); }
    .toasts { bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom)); }
    body.chrome-hidden .appbar { transform: translateY(-100%); }
    body.chrome-hidden .tabbar { transform: translateY(100%); }
    body.chrome-hidden .selbar, body.chrome-hidden .player { bottom: calc(10px + env(safe-area-inset-bottom)); }
    .edgenav { display: none; }
}
@media (max-width: 759px) {
    :root { --appbar-h: 56px; }
    .appbar__in { gap: 4px; }
    .brand__name { display: none; }
    body[data-view="home"] .brand__name, body[data-view="search"] .brand__name,
    body[data-view="my"] .brand__name, body[data-view="plans"] .brand__name, body[data-view="guide"] .brand__name { display: inline; }
    .refbtn { height: 38px; padding: 0 10px 0 14px; font-size: .96rem; }
    .refbtn .full { display: none; }
    .refbtn .short { display: inline; }
    #btnLangsLabel { display: none; }
    .chipbtn { width: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .chnavs, .booknav { grid-template-columns: 1fr 1fr; gap: 8px; }
    .chnav { padding: 12px; }
    .chnav span { font-size: .92rem; }
    /* Móvil: sin columna de números; el número va en línea al inicio de cada
       versículo y el texto ocupa todo el ancho. */
    .chapter { padding-inline: 14px; }
    .chapter:is([data-layout="lines"], [data-layout="stack"]) .verse { display: block; margin: 0 -6px; padding: .15em 6px; }
    .chapter[data-layout="stack"] .verse { padding-block: .6em; margin: 0; padding-inline: 0; }
    .chapter:is([data-layout="lines"], [data-layout="stack"]) .vn {
        display: inline; text-align: start; vertical-align: super; line-height: 0;
        font-size: .6em; margin: 0 .35em 0 0;
    }
    .chapter:is([data-layout="lines"], [data-layout="stack"]) .vl:first-of-type:not(.vl--orig) { display: inline; }
    .chapter:is([data-layout="lines"], [data-layout="stack"]) .vnote { position: static; }
    .chapter[data-novnum] .vn[data-hide] { display: none; }
    .selbar__acts button { min-width: 60px; }
    .seg button { font-size: .74rem; padding-inline: 3px; }
    .seg button:has(.ico) span { font-size: .68rem; }
    .seg { gap: 3px; padding: 3px; }
    .dash { margin-bottom: 44px; }
    .books { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
    .card { padding: 18px; }
}
@media (max-width: 380px) {
    .appbar__actions .iconbtn { width: 36px; }
    .swatches { gap: 5px; }
    .sw { width: 24px; height: 24px; }
}

/* ── Animaciones ────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -300% 0; } }
@keyframes load { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 14px); } }
@keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
@keyframes out { to { opacity: 0; transform: scale(.98) translateY(6px); } }
@keyframes sheetin { from { transform: translateY(100%); } }
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } }
@keyframes flash { 0%, 30% { background-color: color-mix(in srgb, var(--gold) 30%, transparent); } 100% { background-color: transparent; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Impresión ──────────────────────────────────────────────────────── */
@media print {
    .appbar, .tabbar, .selbar, .panel, .scrim, .edgenav, .ch-tools, .chnavs, .player, .toasts, .tip, .skip { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
    .chapter { max-width: none; padding: 0; }
    .verse .vt { background: none !important; }
    .ch-body { font-size: 12pt; }
}