:root {
      color-scheme: light;
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-soft: #f8faf7;
      --text: #22262a;
      --muted: #6c7373;
      --line: #e5e9e4;
      --pink: #f3cfdd;
      --pink-strong: #b86e88;
      --green: #dce8b7;
      --green-strong: #5d7e63;
      --green-ink: #3d6247;
      --focus: #335f42;
      --shadow: 0 12px 32px rgba(28, 44, 31, .06);
      --radius: 18px;
      --header-h: 76px;
    }
    [data-theme="dark"] {
      color-scheme: dark;
      --bg: #141916;
      --surface: #1c231f;
      --surface-soft: #222c26;
      --text: #eef2ed;
      --muted: #b5c0b8;
      --line: #38433c;
      --pink: #583a48;
      --pink-strong: #e2a8bc;
      --green: #354b3a;
      --green-strong: #a9c99b;
      --green-ink: #d5e8ce;
      --focus: #b4d5a6;
      --shadow: 0 12px 32px rgba(0, 0, 0, .22);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      background: var(--bg);
      color: var(--text);
      font: 400 1.0625rem/1.72 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
      transition: background-color .22s ease, color .22s ease;
    }
    button, input, textarea { font: inherit; }
    button { color: inherit; }
    a { color: inherit; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
    .skip-link {
      position: fixed; z-index: 20; top: .5rem; left: .5rem;
      transform: translateY(-160%); background: var(--text); color: var(--bg);
      padding: .65rem .9rem; border-radius: .6rem;
    }
    .skip-link:focus { transform: translateY(0); }
    .app-header {
      min-height: var(--header-h); position: sticky; top: 0; z-index: 10;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      padding: .75rem clamp(1rem, 4vw, 3rem);
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 94%, transparent);
      backdrop-filter: blur(14px);
    }
    .brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
    .brand-name {
      display: inline-block; color: var(--text); text-decoration: none;
      font: 500 2rem/1.05 "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
      letter-spacing: -.05em;
    }
    .brand-name::after {
      content: ""; display: block; width: 72%; height: 4px; margin-top: .15rem;
      border-radius: 3px; background: var(--pink);
    }
    .brand-divider { width: 1px; height: 34px; background: var(--line); }
    .brand-session { color: var(--muted); font-size: .95rem; line-height: 1.35; }
    .header-actions { display: flex; align-items: center; gap: .7rem; }
    .save-status { color: var(--muted); font-size: .82rem; white-space: nowrap; }
    .theme-toggle {
      min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
      padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 999px;
      background: var(--surface); cursor: pointer; font-size: .9rem; font-weight: 600;
      transition: border-color .2s ease, background-color .2s ease;
    }
    .theme-toggle:hover { border-color: var(--green-strong); }
    .theme-toggle svg { width: 18px; height: 18px; flex: none; }
    .app-shell {
      width: min(1160px, 100%); min-height: calc(100vh - var(--header-h));
      margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr);
    }
    .progress-rail {
      align-self: start; position: sticky; top: var(--header-h);
      padding: 2.2rem 1.25rem 2rem 1.6rem;
    }
    .progress-caption { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; }
    .progress-line { position: absolute; left: 2.42rem; top: 5.3rem; bottom: auto; width: 1px; height: 210px; background: var(--line); }
    .step-nav { display: grid; gap: .3rem; position: relative; }
    .step-link {
      width: 100%; min-height: 48px; position: relative; display: flex; align-items: center; gap: .75rem;
      padding: .45rem .5rem; border: 0; border-radius: 12px; text-align: left;
      background: transparent; color: var(--muted); cursor: pointer; font-size: .93rem; font-weight: 500;
    }
    .step-link:hover { background: var(--surface-soft); color: var(--text); }
    .step-link[aria-current="step"] { color: var(--text); font-weight: 700; }
    .step-dot {
      z-index: 1; width: 20px; height: 20px; display: inline-grid; place-items: center; flex: none;
      border: 1.5px solid var(--muted); border-radius: 50%; background: var(--bg);
      color: var(--muted); font-size: .65rem; line-height: 1;
    }
    .step-link[aria-current="step"] .step-dot { border-color: var(--green-strong); background: var(--green-strong); color: white; }
    [data-theme="dark"] .step-link[aria-current="step"] .step-dot { color: #152017; }
    .progress-note {
      margin: 2.2rem .2rem 0; padding: 1rem 0 0; border-top: 1px solid var(--line);
      color: var(--muted); font-size: .84rem; line-height: 1.6;
    }
    .progress-note strong { color: var(--text); font-weight: 650; }
    .lesson {
      min-width: 0; position: relative; overflow: hidden;
      padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem) 5rem;
    }
    .lesson::before, .lesson::after {
      content: ""; position: absolute; width: 170px; height: 170px; z-index: -1; pointer-events: none;
      border: 1px solid var(--pink); opacity: .75;
    }
    .lesson::before {
      right: -112px; top: 0; border-radius: 0 0 0 100%; box-shadow: -10px 10px 0 -9px var(--bg), -11px 11px 0 -10px var(--pink);
    }
    .lesson::after {
      left: -126px; bottom: 2rem; border-radius: 0 100% 0 0; box-shadow: 10px -10px 0 -9px var(--bg), 11px -11px 0 -10px var(--pink);
    }
    .progress-mobile { display: none; }
    .lesson-section { max-width: 760px; margin: 0 auto; }
    .lesson-section[hidden] { display: none; }
    .lesson-section:not([hidden]) { display: block; animation: arrive .24s ease both; }
    @keyframes arrive { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    h1, h2, h3 { color: var(--text); text-wrap: pretty; }
    h1 { margin: 0 0 1.15rem; font-size: clamp(2rem, 4.2vw, 2.75rem); line-height: 1.18; letter-spacing: -.035em; }
    h2 { margin: 2.35rem 0 .7rem; font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.3; letter-spacing: -.02em; }
    h3 { margin: 1.8rem 0 .45rem; font-size: 1.1rem; line-height: 1.4; }
    p { margin: 0 0 1.2rem; }
    .cover-line { max-width: 560px; margin: -.45rem 0 1.7rem; color: var(--muted); font-size: 1.08rem; }
    .verse {
      margin: 1.5rem 0 2rem; padding: .1rem 0 .1rem 1.15rem;
      border-left: 3px solid var(--pink-strong); font-size: 1.12rem; line-height: 1.55;
    }
    .verse p { margin: 0; }
    .verse cite { display: block; margin-top: .35rem; color: var(--muted); font-size: .9rem; font-style: normal; }
    .reading-copy { max-width: 690px; }
    .reading-copy p { margin-bottom: 1.25rem; }
    .emphasis { font-weight: 650; }
    .scripture {
      margin: 1.4rem 0 1.6rem; padding: 1rem 1.2rem; border-left: 3px solid var(--green-strong);
      background: var(--surface-soft); border-radius: 0 12px 12px 0;
    }
    .scripture p { margin: 0; }
    .scripture small { display: block; color: var(--muted); font-size: .9rem; margin-bottom: .35rem; }
    .roadmap {
      margin: 1.8rem 0 2.2rem; border-block: 1px solid var(--line);
    }
    .roadmap summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 650; }
    .roadmap ol { margin: 0 0 1.25rem; padding-left: 1.35rem; color: var(--muted); font-size: .95rem; }
    .roadmap li { padding: .15rem 0; }
    .instruction { color: var(--muted); margin-bottom: 1.4rem; }
    .checklist { list-style: none; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid var(--line); }
    .check-item { border-bottom: 1px solid var(--line); }
    .check-item label {
      min-height: 52px; display: flex; align-items: flex-start; gap: .8rem;
      padding: .85rem .5rem; cursor: pointer; line-height: 1.5;
    }
    .check-item label:hover { background: var(--surface-soft); }
    .check-item input {
      width: 22px; height: 22px; flex: none; margin: .1rem 0 0; accent-color: var(--green-strong); cursor: pointer;
    }
    .selection-count { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
    .reading-section { margin: 2rem 0 2.4rem; }
    .reading-section + .reading-section { padding-top: .6rem; border-top: 1px solid var(--line); }
    .reflection-intro { max-width: 690px; margin-bottom: 2rem; }
    .reflection-fields { display: grid; gap: 1.5rem; margin: 1.8rem 0 2.4rem; }
    .field { display: grid; gap: .5rem; }
    .field label { font-size: 1rem; font-weight: 700; }
    .field textarea {
      width: 100%; min-height: 88px; resize: vertical; padding: .9rem 1rem;
      border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
      color: var(--text); line-height: 1.55;
    }
    .field textarea::placeholder { color: var(--muted); opacity: .8; }
    .field textarea:focus { outline: 3px solid color-mix(in srgb, var(--focus) 30%, transparent); border-color: var(--focus); }
    .privacy-note { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
    .download-button {
      min-height: 48px; display: inline-flex; align-items: center; gap: .6rem;
      padding: .7rem 1rem; border: 1px solid var(--green-strong); border-radius: 12px;
      background: transparent; color: var(--green-ink); font-weight: 700; cursor: pointer;
    }
    .download-button:hover { background: var(--surface-soft); }
    .download-button svg { width: 18px; height: 18px; }
    .step-controls {
      max-width: 760px; margin: 3rem auto 0; padding-top: 1.2rem; border-top: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    }
    .control-button {
      min-height: 48px; min-width: 118px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
      padding: .7rem 1.1rem; border: 1px solid transparent; border-radius: 999px;
      background: var(--green-strong); color: #fff; font-size: .96rem; font-weight: 700; cursor: pointer;
      transition: transform .16s ease, background-color .16s ease;
    }
    .control-button:hover { transform: translateY(-1px); }
    [data-theme="dark"] .control-button { color: #142018; }
    .control-button.secondary { min-width: 100px; background: transparent; border-color: var(--line); color: var(--muted); }
    .control-button.secondary:hover { border-color: var(--green-strong); color: var(--text); }
    .control-button:disabled { visibility: hidden; }
    .finish-note { margin: 0; color: var(--muted); font-size: .9rem; }
    .mobile-status { display: none; }
    @media (max-width: 800px) {
      :root { --header-h: 66px; }
      .app-header { min-height: var(--header-h); padding: .6rem 1rem; }
      .brand { gap: .65rem; }
      .brand-name { font-size: 1.65rem; }
      .brand-divider { height: 28px; }
      .brand-session { font-size: .86rem; }
      .save-status { display: none; }
      .theme-toggle { width: 44px; padding: .55rem; border-radius: 50%; }
      .theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
      .app-shell { display: block; min-height: calc(100vh - var(--header-h)); }
      .progress-rail { display: none; }
      .progress-mobile {
        display: block; position: sticky; top: var(--header-h); z-index: 8;
        padding: .7rem 1rem .55rem; border-bottom: 1px solid var(--line);
        background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px);
      }
      .mobile-progress-label { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; color: var(--muted); font-size: .82rem; }
      .progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
      .progress-fill { height: 100%; width: 25%; border-radius: inherit; background: var(--green-strong); transition: width .22s ease; }
      .mobile-step-nav { display: flex; gap: .35rem; margin: .65rem -.15rem 0; overflow-x: auto; scrollbar-width: none; }
      .mobile-step-nav::-webkit-scrollbar { display: none; }
      .mobile-step-nav .step-link { width: auto; min-width: max-content; min-height: 40px; gap: .45rem; padding: .35rem .55rem; font-size: .82rem; }
      .mobile-step-nav .step-dot { width: 17px; height: 17px; font-size: .58rem; }
      .lesson { padding: 1.7rem 1.15rem 7.5rem; overflow: clip; }
      .lesson::before { width: 100px; height: 100px; right: -72px; }
      .lesson::after { width: 112px; height: 112px; left: -86px; bottom: .5rem; }
      .lesson-section { max-width: 620px; }
      h1 { font-size: clamp(1.9rem, 8vw, 2.25rem); }
      .cover-line { font-size: 1rem; }
      .verse { font-size: 1.05rem; }
      .step-controls {
        position: fixed; z-index: 9; left: 0; right: 0; bottom: 0; max-width: none;
        margin: 0; padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(14px);
        border-top: 1px solid var(--line);
      }
      .control-button { min-height: 48px; min-width: 110px; }
      .finish-note { display: none; }
      .mobile-status { display: block; margin: 1.5rem 0 0; color: var(--muted); font-size: .86rem; }
    }
    @media (max-width: 390px) {
      .brand-name { font-size: 1.48rem; }
      .brand-session { font-size: .8rem; }
      .mobile-step-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin-inline: 0; overflow: visible; }
      .mobile-step-nav .step-link { width: 100%; min-width: 0; justify-content: flex-start; padding-inline: .4rem; font-size: .78rem; }
      .check-item label { padding-inline: .3rem; }
    }
    @media (min-width: 801px) {
      .mobile-step-nav { display: none; }
      .mobile-status { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
    }
    @media print {
      .app-header, .progress-rail, .progress-mobile, .step-controls, .download-button, .roadmap { display: none !important; }
      .app-shell { display: block; }
      .lesson { padding: 0; overflow: visible; }
      .lesson::before, .lesson::after { display: none; }
      .lesson-section, .lesson-section[hidden] { display: block !important; page-break-after: always; }
      body { color: #111; background: #fff; font-size: 12pt; }
      textarea { border: 1px solid #aaa !important; color: #111 !important; }
    }


/* Selector compartido de sesiones: solo aparece cuando hay más de una. */
.session-switcher:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem auto; padding: .5rem 1rem; }
.session-switcher a { color: inherit; text-underline-offset: .2em; }
.load-status { margin: 2rem auto; padding: 1rem; max-width: 42rem; text-align: center; }