/* ============ Tokens ============ */
  :root, :root[data-theme="dark"]{
    --bg:#130b1d;
    --bg-page:#0c0713;
    --elev:#1c1128;
    --card:#20142e;
    --line:rgba(198,160,255,.15);
    --text:#f2ecf9;
    --muted:#a495bd;
    --gold:#b58ce9;
    --gold-deep:#8d5fd3;
    --gold-ink:#1c0f2e;
    --rose:#de66fc;
    --ok:#8fc9a8;
    --scrim:rgba(19,11,29,.55);
    --cover-a:#33204e; --cover-b:#170e24;
    --shadow:0 18px 40px rgba(0,0,0,.45);
  }
  :root[data-theme="light"]{
    --bg:#f7f3fc;
    --bg-page:#ede5f8;
    --elev:#fdfcff;
    --card:#fbf9fe;
    --line:rgba(98,64,150,.15);
    --text:#342550;
    --muted:#8a79a6;
    --gold:#7d52c8;
    --gold-deep:#6440ad;
    --gold-ink:#f8f4ff;
    --rose:#b48ce6;
    --ok:#3f8f66;
    --scrim:rgba(247,243,252,.55);
    --cover-a:#e6daf6; --cover-b:#cfbcec;
    --shadow:0 18px 40px rgba(98,64,150,.16);
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg-page);
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
    line-height:1.5;
    min-height:100vh;
    display:flex; justify-content:center;
    transition:background .35s ease,color .35s ease;
  }
  .display{font-family:"Didot","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:.01em}
  .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600}

  /* ============ Phone column ============ */
  .phone{
    width:100%; max-width:420px; min-height:100vh;
    background:var(--bg);
    display:flex; flex-direction:column;
    position:relative;
    box-shadow:var(--shadow);
    transition:background .35s ease;
  }

  /* ============ Header ============ */
  header{
    display:flex; align-items:center; gap:10px;
    padding:14px 18px 10px;
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  }
  .brand{display:flex;align-items:baseline;gap:8px;margin-right:auto}
  .brand .mono{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    color:var(--gold-ink);
    display:grid;place-items:center;align-self:center;
    font-size:.8rem;font-weight:600;
  }
  .brand h1{font-size:1.02rem;font-weight:500;letter-spacing:.02em}
  .iconbtn{
    width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
    background:var(--elev);color:var(--text);
    display:grid;place-items:center;cursor:pointer;
    transition:transform .15s ease;
  }
  .iconbtn:active{transform:scale(.92)}
  .iconbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--rose)}
  .iconbtn{position:relative}

  /* theme switch */
  .switch{
    border:1px solid var(--line);background:var(--elev);
    border-radius:999px;height:34px;width:60px;
    position:relative;cursor:pointer;flex:none;
  }
  .switch .knob{
    position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    color:var(--gold-ink);
    display:grid;place-items:center;
    transition:transform .28s cubic-bezier(.5,1.6,.4,1);
  }
  :root[data-theme="light"] .switch .knob{transform:translateX(26px)}
  .switch svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .switch .sun{display:none}
  :root[data-theme="light"] .switch .moon{display:none}
  :root[data-theme="light"] .switch .sun{display:block}

  /* ============ Ribbon ============ */
  .ribbon{
    text-align:center;padding:9px 16px;
    background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 16%,transparent),transparent);
    border-block:1px solid var(--line);
  }
  .ribbon strong{color:var(--gold);font-size:.78rem;letter-spacing:.12em;font-weight:600}
  .ribbon span{display:block;font-size:.7rem;color:var(--muted);letter-spacing:.03em}

  main{flex:1;padding:20px 18px 96px;display:flex;flex-direction:column;gap:22px}
  main[hidden]{display:none}

  .greet h2{font-size:1.55rem;line-height:1.2;text-wrap:balance}
  .greet p{color:var(--muted);font-size:.86rem;margin-top:2px}

  /* live event chip */
  .live{
    display:flex;align-items:center;gap:12px;
    border:1px solid var(--line);border-radius:14px;
    background:var(--elev);padding:11px 14px;cursor:pointer;
  }
  .live .cal{
    width:40px;height:44px;border-radius:10px;flex:none;
    border:1px solid var(--line);
    display:flex;flex-direction:column;overflow:hidden;text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .live .cal b{font-size:.56rem;letter-spacing:.1em;background:color-mix(in srgb,var(--rose) 25%,transparent);color:var(--rose);padding:2px 0;font-weight:700}
  .live .cal span{font-size:1.05rem;font-weight:600;flex:1;display:grid;place-items:center}
  .live h3{font-size:.9rem;font-weight:600}
  .live p{font-size:.76rem;color:var(--muted)}
  .live .go{margin-left:auto;color:var(--gold);font-size:1.1rem}

  /* ============ Course cards ============ */
  section h4{margin-bottom:12px}
  .card{
    border:1px solid var(--line);border-radius:18px;overflow:hidden;
    background:var(--card);cursor:pointer;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:active{transform:scale(.985)}
  .cards{display:flex;flex-direction:column;gap:16px}

  .cover{
    aspect-ratio:16/8.5;position:relative;
    background:
      radial-gradient(120% 150% at 15% 0%, color-mix(in srgb,var(--gold) 26%,transparent) 0%, transparent 45%),
      radial-gradient(100% 120% at 85% 100%, color-mix(in srgb,var(--rose) 22%,transparent) 0%, transparent 50%),
      linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:grid;place-items:center;
  }
  .cover .title-art{text-align:center;padding:0 20px}
  .cover .title-art .rule{width:44px;height:1px;background:var(--gold);margin:8px auto;opacity:.8}
  .cover .title-art small{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:600}
  .cover .title-art .big{font-size:1.5rem;letter-spacing:.06em}
  .chip{
    position:absolute;top:10px;left:10px;
    font-size:.64rem;letter-spacing:.08em;font-weight:600;
    padding:4px 9px;border-radius:999px;
    background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border:1px solid var(--line);
  }
  .chip.ok{color:var(--ok)}
  .chip.gold{color:var(--gold)}

  .card .body{padding:14px 16px 16px}
  .card .body h3{font-size:1.02rem;font-weight:600;line-height:1.3}
  .card .body p{font-size:.8rem;color:var(--muted);margin-top:4px}

  .progress{margin-top:12px;display:flex;align-items:center;gap:10px}
  .track{flex:1;height:5px;border-radius:99px;background:color-mix(in srgb,var(--muted) 22%,transparent);overflow:hidden}
  .fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--rose))}
  .progress b{font-size:.74rem;color:var(--gold);font-variant-numeric:tabular-nums;font-weight:600;flex:none}

  .resume{
    margin-top:12px;display:flex;align-items:center;gap:10px;
    font-size:.8rem;color:var(--muted);
  }
  .resume .play{
    width:30px;height:30px;border-radius:50%;flex:none;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    display:grid;place-items:center;color:var(--gold-ink);
  }
  .resume .play svg{width:11px;height:11px;fill:currentColor;margin-left:1px}
  .resume b{color:var(--text);font-weight:600}

  /* locked */
  .card.locked .cover .art-blur{filter:blur(7px) saturate(.7);opacity:.6;position:absolute;inset:0;display:grid;place-items:center}
  .card.locked .cover{overflow:hidden}
  .lockwrap{position:relative;z-index:2;display:grid;place-items:center;gap:6px}
  .lock{
    width:44px;height:44px;border-radius:50%;
    background:var(--scrim);border:1px solid var(--line);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    display:grid;place-items:center;color:var(--gold);
  }
  .lock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .unlock{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:12px;
  }
  .unlock span{font-size:.76rem;color:var(--muted)}
  .unlock b{color:var(--gold);font-size:.85rem;font-weight:600}

  /* ============ Lesson view ============ */
  .backrow{display:flex;align-items:center;gap:10px}
  .backrow .crumb{font-size:.8rem;color:var(--muted)}
  .backrow .crumb b{color:var(--text);font-weight:600;display:block;font-size:.92rem}

  .player{
    border-radius:18px;overflow:hidden;position:relative;aspect-ratio:16/9;
    background:
      radial-gradient(120% 150% at 20% 0%, color-mix(in srgb,var(--gold) 30%,transparent) 0%, transparent 50%),
      radial-gradient(110% 130% at 80% 110%, color-mix(in srgb,var(--rose) 26%,transparent) 0%, transparent 55%),
      linear-gradient(150deg,var(--cover-a),var(--cover-b));
    display:grid;place-items:center;
    border:1px solid var(--line);
  }
  .player .bigplay{
    width:62px;height:62px;border-radius:50%;cursor:pointer;border:none;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));
    color:var(--gold-ink);display:grid;place-items:center;
    box-shadow:0 10px 30px color-mix(in srgb,var(--gold) 35%,transparent);
    transition:transform .15s ease;
  }
  .player .bigplay:active{transform:scale(.9)}
  .player .bigplay svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
  .player .meta{
    position:absolute;left:12px;bottom:10px;display:flex;gap:8px;
  }
  .player .meta span{
    font-size:.66rem;letter-spacing:.06em;font-weight:600;
    padding:4px 9px;border-radius:999px;color:var(--text);
    background:var(--scrim);border:1px solid var(--line);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-variant-numeric:tabular-nums;
  }
  .lesson-head h2{font-size:1.3rem;line-height:1.25;text-wrap:balance}
  .lesson-head p{color:var(--muted);font-size:.85rem;margin-top:6px;max-width:60ch}
  .lesson-head .row{display:flex;align-items:center;gap:10px;margin-top:12px}
  .btn{
    border:none;cursor:pointer;border-radius:999px;
    padding:11px 20px;font-size:.85rem;font-weight:600;letter-spacing:.02em;
    background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--gold-ink);
  }
  .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}

  /* modules */
  .mod{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden}
  .mods{display:flex;flex-direction:column;gap:10px}
  .mod summary{
    list-style:none;display:flex;align-items:center;gap:12px;
    padding:13px 15px;cursor:pointer;
  }
  .mod summary::-webkit-details-marker{display:none}
  .mod .n{
    width:28px;height:28px;border-radius:50%;flex:none;border:1px solid var(--line);
    display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .mod[open] .n{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--gold-ink);border:none}
  .mod summary h3{font-size:.9rem;font-weight:600;flex:1}
  .mod summary small{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
  .mod summary .chev{color:var(--muted);transition:transform .2s ease}
  .mod[open] summary .chev{transform:rotate(180deg)}
  .mod .items{border-top:1px solid var(--line)}
  .item{
    display:flex;align-items:center;gap:12px;padding:11px 15px;cursor:pointer;
    border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  }
  .item:last-child{border-bottom:none}
  .item .st{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center}
  .item .st svg{width:12px;height:12px}
  .item.done .st{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
  .item.now .st{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--gold-ink)}
  .item.todo .st{border:1px solid var(--line);color:var(--muted)}
  .item p{flex:1;font-size:.84rem}
  .item.now p{font-weight:600}
  .item small{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
  .item.now{background:color-mix(in srgb,var(--gold) 7%,transparent)}
  .mod.drip summary{opacity:.65}
  .mod.drip .n{border-style:dashed}

  /* ============ Tab bar ============ */
  .tabbar{
    position:fixed;bottom:0;z-index:30;
    width:100%;max-width:420px;
    display:flex;justify-content:space-around;
    padding:10px 8px calc(12px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-top:1px solid var(--line);
  }
  .tab{
    display:flex;flex-direction:column;align-items:center;gap:3px;
    background:none;border:none;cursor:pointer;color:var(--muted);
    font-size:.62rem;letter-spacing:.04em;font-weight:600;
  }
  .tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .tab.active{color:var(--gold)}

  /* toast */
  .toast{
    position:fixed;bottom:92px;left:50%;transform:translateX(-50%) translateY(16px);
    background:var(--elev);color:var(--text);border:1px solid var(--line);
    padding:10px 18px;border-radius:999px;font-size:.8rem;font-weight:500;
    opacity:0;pointer-events:none;transition:all .3s ease;z-index:50;
    box-shadow:var(--shadow);white-space:nowrap;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;animation:none !important}
  }

  /* ============ Desktop ============ */
  .topnav{display:none}
  @media (min-width: 900px){
    body{padding:40px 24px;align-items:flex-start}
    .phone{max-width:1120px;min-height:calc(100vh - 80px);border-radius:24px;overflow:clip;border:1px solid var(--line)}
    header{padding:18px 32px 14px}
    .topnav{display:flex;gap:4px;margin-right:12px}
    .topnav button{
      background:none;border:none;cursor:pointer;
      color:var(--muted);font-size:.86rem;font-weight:600;letter-spacing:.02em;
      padding:8px 16px;border-radius:999px;
    }
    .topnav button.active{color:var(--gold);background:color-mix(in srgb,var(--gold) 13%,transparent)}
    .topnav button:hover{color:var(--text)}
    .tabbar{display:none}
    main{padding:36px 40px 64px;gap:28px}
    .greet h2{font-size:2.1rem}
    .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
    .card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    #view-lesson:not([hidden]){
      display:grid;grid-template-columns:1.7fr 1fr;gap:32px;align-items:start;
    }
    #view-lesson .backrow{grid-column:1/-1}
    #view-lesson .player{grid-column:1}
    #view-lesson .lesson-head{grid-column:1}
    #view-lesson section.temario{grid-column:2;grid-row:2/span 3;position:sticky;top:90px}
    #view-lesson section.comentarios{grid-column:1}
    .player .bigplay{width:76px;height:76px}
  }

  /* enlaces-tarjeta (la app usa <a>, el mockup usaba onclick) */
  a.card, a.live, a.item{text-decoration:none;color:inherit}
  .item{display:flex}

  /* marca de agua identificada (curso.seguridad.marca_agua) */
  .wm{
    position:absolute;z-index:5;pointer-events:none;user-select:none;
    font-size:.72rem;font-weight:600;letter-spacing:.06em;
    color:rgba(255,255,255,.4);text-shadow:0 1px 3px rgba(0,0,0,.5);
    animation:wm-mover 40s infinite;
    top:8%;left:6%;
  }
  @keyframes wm-mover{
    0%,24%   {top:8%;left:6%}
    25%,49%  {top:78%;left:62%}
    50%,74%  {top:12%;left:58%}
    75%,100% {top:72%;left:8%}
  }
  @media (prefers-reduced-motion: reduce){ .wm{animation:none} }

  /* comentarios */
  .com-card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 16px}
  .com-card .quien{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .com-card .quien b{font-size:.9rem}
  .com-card .quien small{color:var(--muted);font-size:.75rem}
  .com-card p{font-size:.9rem;margin-top:6px;white-space:pre-line}
  .com-pendiente{opacity:.65;border-style:dashed}
  .com-respuesta{margin-top:10px;padding:10px 14px;border-left:3px solid var(--gold);
    background:color-mix(in srgb,var(--gold) 8%,transparent);border-radius:0 10px 10px 0}
  .com-respuesta .autora{color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:.06em}
  .com-form textarea{width:100%;padding:12px 16px;border-radius:14px;border:1px solid var(--line);
    background:var(--elev);color:var(--text);font-family:inherit;font-size:.9rem;resize:vertical}

  /* formularios de admin (compartidos entre vistas) */
  .adm-card{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:16px}
  .adm-form label{display:grid;gap:6px;font-size:.82rem;color:var(--muted)}
  .adm-form input:not([type=checkbox]), .adm-form select, .adm-form textarea{
    padding:10px 14px;border-radius:10px;border:1px solid var(--line);
    background:var(--elev);color:var(--text);font-size:.9rem;font-family:inherit}

  a.tab{text-decoration:none}
  .topnav a{text-decoration:none}