/* opos365 — mateix sistema visual que els mòduls */
  /* ============ TOKENS (mateix sistema que el temari) ============ */
  :root{
    color-scheme: light;
    --paper:#f2f4ef; --card:#ffffff; --card2:#f7f9f5; --line:#e1e6de; --line2:#edf0ea;
    --ink:#15201a; --ink-soft:#5b675e; --ink-faint:#8a948c;
    --entorn:#2E7D32; --entorn-pale:#e5f0e5; --entorn-deep:#1c5423;
    --inst:#1d5577; --inst-pale:#e3edf4; --inst-deep:#123850;
    --seg:#94600f; --seg-pale:#f6ebd7; --seg-deep:#5c3b07;
    --ok:#1e7d34; --ok-pale:#e4f2e7; --ko:#b0271e; --ko-pale:#fbe8e6; --mid:#94600f;
    --warn-bg:#fff5e2; --warn-line:#ecd29f; --warn-ink:#5c4413;
    --on-accent:#ffffff;
    --bar-bg:rgba(242,244,239,.95);
    --shadow:0 1px 2px rgba(21,32,26,.05),0 6px 18px rgba(21,32,26,.06);
    --r:16px;
    --font:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
    --display:'Bricolage Grotesque','Figtree',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --bar-h:56px; --tab-h:64px;
    --green-dark:#1c5423;
    /* noms antics del mòdul, ara apuntant al sistema nou */
    --blue:var(--inst); --blue-pale:var(--inst-pale);
    --green:var(--entorn); --green-pale:var(--entorn-pale); --green-mid:var(--entorn);
    --amber:var(--seg); --amber-pale:var(--seg-pale);
    --red:var(--ko); --red-pale:var(--ko-pale);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --paper:#0e120f; --card:#171d18; --card2:#1c231d; --line:#2b342d; --line2:#222a23;
      --ink:#edf2ed; --ink-soft:#a9b5ab; --ink-faint:#7b877d;
      --entorn:#7ccb86; --entorn-pale:#1a2b1c; --entorn-deep:#163a1b;
      --inst:#80b7db; --inst-pale:#162530; --inst-deep:#0f2738;
      --seg:#e3ad5c; --seg-pale:#2c2310; --seg-deep:#3d2907;
      --ok:#6cc784; --ok-pale:#17301e; --ko:#ef8a80; --ko-pale:#351918; --mid:#e3ad5c;
      --warn-bg:#2c2310; --warn-line:#5c4a1e; --warn-ink:#f0dcae;
      --on-accent:#0e120f;
      --bar-bg:rgba(14,18,15,.95);
      --shadow:none;
      --green-dark:#8ed69b;
    }
  }
  :root[data-theme="dark"]{
    color-scheme: dark;
    --paper:#0e120f; --card:#171d18; --card2:#1c231d; --line:#2b342d; --line2:#222a23;
    --ink:#edf2ed; --ink-soft:#a9b5ab; --ink-faint:#7b877d;
    --entorn:#7ccb86; --entorn-pale:#1a2b1c; --entorn-deep:#163a1b;
    --inst:#80b7db; --inst-pale:#162530; --inst-deep:#0f2738;
    --seg:#e3ad5c; --seg-pale:#2c2310; --seg-deep:#3d2907;
    --ok:#6cc784; --ok-pale:#17301e; --ko:#ef8a80; --ko-pale:#351918; --mid:#e3ad5c;
    --warn-bg:#2c2310; --warn-line:#5c4a1e; --warn-ink:#f0dcae;
    --on-accent:#0e120f;
    --bar-bg:rgba(14,18,15,.95);
    --shadow:none;
    --green-dark:#8ed69b;
  }

  /* ============ BASE ============ */
  *{box-sizing:border-box;}
  html{background:var(--paper);}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--font); font-size:15px; line-height:1.5; -webkit-text-size-adjust:100%;
    padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }
  body.focus{padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 70px);}
  h1,h2,h3{font-family:var(--display); margin:0; text-wrap:balance; letter-spacing:-.01em;}
  button{font-family:inherit; color:inherit;}
  button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent); outline-offset:2px;}
  .wrap{max-width:720px; margin:0 auto; padding-inline:16px; padding-block:14px 8px;}
  @media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important;} }

  /* ============ APP BAR ============ */
  .appbar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    background:var(--bar-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px);
    border-bottom:1px solid var(--line);
  }
  .appbar-in{max-width:720px; margin:0 auto; height:var(--bar-h); padding-inline:10px 16px; display:flex; align-items:center; gap:6px;}
  .appbar.tint{border-bottom-color:transparent; color:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(120deg,var(--accent-deep),var(--accent-solid));}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .appbar.tint{color:var(--ink); background:var(--accent-deep); border-bottom:2px solid var(--accent);} }
  :root[data-theme="dark"] .appbar.tint{color:var(--ink); background:var(--accent-deep); border-bottom:2px solid var(--accent);}
  .iconbtn{flex:0 0 auto; width:40px; height:40px; border-radius:12px; border:0; background:transparent; display:grid; place-items:center; cursor:pointer;}
  .iconbtn:active{background:rgba(127,127,127,.18);}
  .iconbtn svg{width:22px; height:22px;}
  .bar-title{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; padding-left:6px;}
  .bar-title b{font-family:var(--display); font-size:17px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .bar-title small{font-size:11.5px; font-weight:600; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .brand{display:flex; align-items:center; gap:10px; padding-left:6px; flex:1; min-width:0;}
  .brand .logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--accent-deep),var(--accent-solid)); color:#fff; display:grid; place-items:center; font-size:17px;}
  .brand b{font-family:var(--display); font-size:18px; font-weight:800; letter-spacing:-.02em;}
  .brand small{display:block; font-size:11.5px; color:var(--ink-soft); font-weight:600;}
  .barpill{flex:0 0 auto; border:1.5px solid rgba(255,255,255,.45); background:rgba(255,255,255,.14); color:inherit; border-radius:999px; padding:6px 12px; font-size:13.5px; font-weight:800; font-variant-numeric:tabular-nums; cursor:pointer;}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .barpill{border-color:var(--line); background:var(--card2);} }
  :root[data-theme="dark"] .barpill{border-color:var(--line); background:var(--card2);}
  .barpill.low{background:var(--ko)!important; border-color:var(--ko)!important; color:#fff;}

  /* segment sota la barra (Aprèn / Practica) */
  .subnav{position:sticky; top:calc(env(safe-area-inset-top, 0px) + var(--bar-h)); z-index:19; background:var(--bar-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
  .subnav[hidden]{display:none;}
  .subnav-in{max-width:720px; margin:0 auto; padding:8px 16px;}
  .segc{display:grid; grid-template-columns:1fr 1fr; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:3px; gap:3px;}
  .segc button{border:0; background:transparent; border-radius:9px; padding:8px; font-size:13.5px; font-weight:800; color:var(--ink-soft); cursor:pointer;}
  .segc button.on{background:var(--card); color:var(--accent); box-shadow:0 1px 3px rgba(0,0,0,.12);}

  /* ============ TAB BAR ============ */
  .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--bar-bg); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom, 0px);}
  .tabbar[hidden]{display:none;}
  .tabbar-in{max-width:520px; margin:0 auto; height:var(--tab-h); display:grid; grid-auto-flow:column; grid-auto-columns:1fr;}
  .tab{border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11.5px; font-weight:700; color:var(--ink-faint); cursor:pointer;}
  .tab svg{width:24px; height:24px;}
  .tab .pill{display:grid; place-items:center; width:56px; height:30px; border-radius:999px; transition:background .15s;}
  .tab.on{color:var(--ink);}
  .tab.on .pill{background:var(--accent-pale); color:var(--accent);}
  .opos-home{bottom:calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px)!important;}
  body.focus .opos-home{display:none!important;}

  :root{ --accent:var(--inst); --accent-pale:var(--inst-pale); --accent-deep:var(--inst-deep); --accent-solid:var(--inst);
         --gold:#D11F16; --muted:var(--ink-soft); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --gold:#FF5147; } }
  :root[data-theme="dark"]{ --gold:#FF5147; }
  a{color:inherit;}
  a.tab{text-decoration:none;}
  .sr-only{position:absolute; left:-9999px;}

  /* barra */
  .brand .logo{background:#0E1F33; color:#F2A900; font-size:13px; font-weight:800; letter-spacing:-.03em;}
  .brand b .g{color:var(--gold);}
  .brand > div{min-width:0;}
  .brand b,.brand small{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .status{flex:0 0 auto; font-size:12.5px; font-weight:800; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line); color:var(--ink-soft); background:var(--card);}
  .status.full{background:var(--ok-pale); border-color:var(--ok); color:var(--ok);}

  /* compte enrere */
  #countdown{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px;}
  .count{display:flex; align-items:center; gap:16px;}
  .days{flex:0 0 auto; min-width:84px; height:84px; padding:0 10px; border-radius:42px; display:grid; place-items:center; background:#0B2545; color:#fff; box-shadow:inset 0 0 0 5px #E1251B; font-family:var(--display); font-weight:800; font-size:36px; letter-spacing:-.03em; font-variant-numeric:tabular-nums;}
  .ctext b{display:block; font-family:var(--display); font-size:20px; font-weight:800; line-height:1.2; letter-spacing:-.01em;}
  .ctext small{display:block; font-size:13px; color:var(--ink-soft); margin-top:2px;}
  .ctext .big{font-size:22px;}
  .linkbtn{border:0; background:none; padding:0; margin-top:6px; color:var(--accent); font-weight:800; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
  .setdate label{display:block; font-size:14px; font-weight:700; margin-bottom:10px;}
  .setdate .row{display:flex; gap:8px; flex-wrap:wrap;}
  .setdate input[type=date]{flex:1; min-width:160px; font:inherit; font-size:16px; padding:11px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--card2); color:var(--ink);}

  /* títols de secció (també el que afegeix l'app nativa) */
  main h2{display:flex; align-items:center; gap:8px; margin:22px 4px 8px; font-family:var(--font); font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
  main h2::before{content:''; width:9px; height:9px; border-radius:50%; background:var(--accent);}
  main h2:focus{outline:none;}

  /* mòduls */
  .mods{list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow);}
  .mods li{border-bottom:1px solid var(--line2);} .mods li:last-child{border-bottom:0;}
  .mods a{display:flex; align-items:center; gap:12px; padding:13px 14px; text-decoration:none; color:var(--ink);}
  .mods a:active{background:var(--card2);}
  .mods .ic{flex:0 0 auto; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:22px;}
  .mods .ic.t{background:var(--entorn-pale);} .mods .ic.p{background:var(--inst-pale);} .mods .ic.e{background:var(--seg-pale);} .mods .ic.d{background:var(--card2);}
  .mods .mid{flex:1; min-width:0; display:flex; flex-direction:column;}
  .mods strong{font-size:15.5px; font-weight:800; line-height:1.25;}
  .mods .s{font-size:12.5px; color:var(--ink-soft); line-height:1.35; margin-top:1px;}
  .mods .pr{font-size:12px; font-weight:800; color:var(--ok); margin-top:4px;}
  .mods .meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px;}
  .mods .pr{margin-top:0;}
  .mods .go{flex:0 0 auto; color:var(--ink-faint); font-size:20px;}
  .mods em{flex:0 0 auto; font-style:normal; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap;}
  .tag-open{background:var(--ok-pale); color:var(--ok);}
  .tag-free{background:var(--ok-pale); color:var(--ok);}
  .tag-part{background:var(--seg-pale); color:var(--seg);}
  .tag-lock{background:var(--card2); color:var(--ink-soft); border:1px solid var(--line);}

  /* accés complet (l'estructura la fa servir també la capa nativa) */
  .unlock{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:16px;}
  .unlock .price{margin:0 0 8px; font-family:var(--display); font-size:22px; font-weight:800; letter-spacing:-.01em;}
  .unlock ul{margin:0 0 14px; padding-left:20px; font-size:14px; line-height:1.6;}
  .unlock p{font-size:14px;}
  .unlock hr{border:0; border-top:1px solid var(--line2); margin:16px 0;}
  .consent{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink-soft); margin-bottom:12px;}
  .consent input{margin-top:3px; width:18px; height:18px; accent-color:var(--accent); flex:0 0 auto;}
  .consent a{color:var(--accent);}
  .keyrow{display:flex; gap:8px; margin-top:10px;}
  .keyrow input{flex:1; min-width:0; font:inherit; font-size:14px; padding:11px 12px; border-radius:12px; border:1.5px solid var(--line); background:var(--card2); color:var(--ink);}
  .msg{min-height:1.2em; font-size:13.5px; margin:10px 0 0; font-weight:700;}
  .msg.ok{color:var(--ok);} .msg.err{color:var(--ko);}

  /* botons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:0; border-radius:14px; padding:12px 16px; font-family:inherit; font-size:14.5px; font-weight:800; cursor:pointer; text-decoration:none; background:var(--accent); color:var(--on-accent);}
  .btn.sig{background:var(--accent); color:var(--on-accent);}
  .btn.dark{background:#0B2545; color:#fff;}
  .btn.ghost{background:var(--card); border:1.5px solid var(--line); color:var(--ink);}
  .btn:disabled{opacity:.5;}
  .full-w{display:flex; width:100%;}
  .install{font-size:13px; color:var(--ink-soft); margin:14px 4px 0; line-height:1.5;}
  .install:empty{display:none;}
  .opos-rem{background:var(--card)!important; border-color:var(--line)!important; color:var(--ink);}

  footer.foot{text-align:center; font-size:11.5px; color:var(--ink-faint); padding:26px 16px 6px; max-width:720px; margin:0 auto;}
  footer.foot nav{display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px; margin-bottom:8px;}
  footer.foot nav a{color:var(--ink-soft); font-weight:700;}
  footer.foot p{margin:4px 0;}

  /* logo */
  .brand .mark{flex:0 0 auto; width:34px; height:34px; display:block;}
  .brand .mark svg{display:block; width:100%; height:100%;}
  .hero-logo{width:min(220px,58vw); margin:10px auto 20px; color:var(--ink); --logo-gold:#D11F16;}
  .hero-logo svg{display:block; width:100%; height:auto;}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero-logo{--logo-gold:#FF5147;} }
  :root[data-theme="dark"] .hero-logo{--logo-gold:#FF5147;}

/* BOMB */
/* opos365 · compte enrere tipus bomba */
.bomb{position:relative; padding-top:22px; font-family:inherit; color:#e9ecef;}
.bwires{position:absolute; left:10px; right:10px; top:0; width:calc(100% - 20px); height:34px; overflow:visible;}
.bwires path{fill:none; stroke-width:4; stroke-linecap:round;}
.bpanel{position:relative; background:linear-gradient(180deg,#26292e,#121417); border:2px solid #3b3f45; border-radius:14px; padding:10px 12px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);}
.btop{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.bled{width:10px; height:10px; border-radius:50%; background:#ff3b30; box-shadow:0 0 8px 2px rgba(255,59,48,.8); animation:bblink 1s steps(1) infinite;}
.blab{font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#9aa3ad;}
.bscrew{margin-left:auto; width:10px; height:10px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#8d949b,#3c4146); box-shadow:inset 0 0 0 1px #1b1d20;}
.bdisp{display:flex; align-items:flex-start; justify-content:center; gap:2px; background:#0a0303; border-radius:9px; padding:10px 8px 6px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.9), inset 0 0 0 1px #2a0a08;}
.bg{display:flex; flex-direction:column; align-items:center; gap:3px;}
.bn{display:flex; gap:3px;}
.bd{width:clamp(20px,6.4vw,32px); height:auto; display:block; overflow:visible;}
.bd .on{fill:#ff2a1a; filter:drop-shadow(0 0 3px rgba(255,42,26,.85));}
.bd .off{fill:#2b0a08;}
.bg small{font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#b3342a;}
.bcol{font:700 clamp(22px,7vw,34px)/1 monospace; color:#ff2a1a; text-shadow:0 0 6px rgba(255,42,26,.85); padding:0 1px; margin-top:clamp(4px,1.6vw,10px); animation:bblink 1s steps(1) infinite;}
.binfo{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; font-size:12.5px; color:#b9c1ca;}
.binfo span{text-transform:none;}
.bomb .bchg{text-decoration:none; border:1px solid #4a4f56; background:#1d2024; color:#e9ecef; border-radius:8px; font:inherit; font-size:12px; font-weight:800; padding:5px 10px; cursor:pointer;}
.bsr{position:absolute; left:-9999px;}
.bomb.hot .bpanel{border-color:#7a1d16;}
.bomb.hot .bled,.bomb.hot .bcol{animation-duration:.5s;}
.bomb.boom .bdisp{padding:18px 10px;}
.bboom{font-weight:900; font-size:clamp(17px,5vw,24px); color:#ff3b30; text-shadow:0 0 10px rgba(255,59,48,.8); text-align:center;}
.bedit{padding-top:0;}
.bq{margin:0 0 10px; font-size:14px; font-weight:800; color:#e9ecef;}
.brow{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap;}
.brow label{display:flex; flex-direction:column; gap:4px; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9aa3ad; flex:1; min-width:120px;}
.bomb .brow input{font:inherit; font-size:15px; letter-spacing:normal; text-transform:none; padding:9px 10px; border-radius:10px; border:1px solid #4a4f56; background:#0d0f11; color:#ff5a4d; color-scheme:dark;}
.bomb .bsave{border:0; border-radius:10px; background:#d32f2f; color:#fff; font:inherit; font-size:14px; font-weight:800; padding:10px 18px; cursor:pointer;}
@keyframes bblink{50%{opacity:.25;}}
@media (prefers-reduced-motion: reduce){ .bled,.bcol{animation:none;} }
.binfo span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

#countdown{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;}
/* /BOMB */













.mods .ic.pc{background:var(--ko-pale);}


/* PLANS */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:4px 0 10px;}
.plan{position:relative; display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--ink); background:var(--card2); border:2px solid var(--line); border-radius:16px; padding:14px 12px 12px;}
.plan.best{border-color:#E1251B; background:var(--card);}
.plan em{position:absolute; top:-11px; left:12px; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#E1251B; color:#fff; border-radius:999px; padding:3px 9px;}
.plan b{font-size:14px; font-weight:800;}
.plan .pp{font-family:var(--display); font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1;}
.plan .pp small{font-family:var(--font); font-size:13px; font-weight:700; color:var(--ink-soft); margin-left:2px;}
.plan .pn{font-size:12px; color:var(--ink-soft); line-height:1.35; margin-top:2px;}
.unlock .subnote{font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:0 0 12px;}
@media (max-width:360px){ .plans{grid-template-columns:1fr;} }
/* /PLANS */



/* CALSTRIP */
.mods .ic.st{background:var(--ok-pale);}
.calstrip{display:block; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:18px; padding:12px 14px 6px; margin:14px 0 0; box-shadow:var(--shadow);}
.cs-h{display:flex; justify-content:space-between; align-items:center; font-size:14px; margin-bottom:6px;}
.cs-h span{font-size:12.5px; font-weight:800; color:var(--accent);}
.cs-r{display:flex; gap:12px; align-items:center; padding:8px 0; border-top:1px solid var(--line2);}
.cs-d{flex:0 0 52px; height:46px; border-radius:12px; display:grid; place-items:center; align-content:center; background:var(--card2); font-weight:800; font-size:18px; line-height:1; color:var(--ink);}
.cs-r.first .cs-d{background:var(--accent); color:var(--on-accent);}
.cs-d small{display:block; font-size:10px; font-weight:700; margin-top:2px;}
.cs-t{display:flex; flex-direction:column; min-width:0; font-size:13.5px;}
.cs-t b{font-weight:700; line-height:1.3;} .cs-t small{color:var(--ink-soft); font-size:12px; margin-top:2px;}
/* /CALSTRIP */



/* BRAND */
  :root{ --paper:#F6F5F0; --card:#FFFFFF; --card2:#FAF9F4; --line:#E4E2DA; --line2:#EFEDE6;
    --ink:#14202E; --ink-soft:#4E5A69; --ink-faint:#8A93A0;
    --brand:#0B2545; --brand-red:#E1251B;
    --entorn:#1B7A3A; --entorn-pale:#E4F1E8; --entorn-deep:#0F4D24;
    --inst:#2563A8; --inst-pale:#E4ECF7; --inst-deep:#173F6E;
    --seg:#A8640B; --seg-pale:#F8ECD9; --seg-deep:#6B430A;
    --ok:#1B7A3A; --ok-pale:#E4F1E8; --ko:#C8231A; --ko-pale:#FCE9E7; --mid:#A8640B;
    --accent:#0B2545; --accent-pale:#E6EBF3; --accent-deep:#071A33; --accent-solid:#0B2545; --on-accent:#FFFFFF;
    --bar-bg:rgba(246,245,240,.95);
    --shadow:0 1px 2px rgba(11,37,69,.05),0 6px 18px rgba(11,37,69,.07); }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark;
    --paper:#0A1626; --card:#122238; --card2:#162A44; --line:#22364F; --line2:#1A2C44;
    --ink:#EEF2F7; --ink-soft:#A9B6C6; --ink-faint:#7D8DA1;
    --brand:#9DBCE6; --brand-red:#FF5147;
    --entorn:#6CCB8A; --entorn-pale:#11301F; --entorn-deep:#0E3A20;
    --inst:#7FB0EA; --inst-pale:#13284A; --inst-deep:#102C52;
    --seg:#F0B25C; --seg-pale:#33240D; --seg-deep:#4A300A;
    --ok:#6CCB8A; --ok-pale:#11301F; --ko:#FF7A70; --ko-pale:#3A1716; --mid:#F0B25C;
    --accent:#9DBCE6; --accent-pale:#15294A; --accent-deep:#17396B; --accent-solid:#9DBCE6; --on-accent:#0A1626;
    --bar-bg:rgba(10,22,38,.95); --shadow:none; } }
  :root[data-theme="dark"]{ color-scheme:dark;
    --paper:#0A1626; --card:#122238; --card2:#162A44; --line:#22364F; --line2:#1A2C44;
    --ink:#EEF2F7; --ink-soft:#A9B6C6; --ink-faint:#7D8DA1;
    --brand:#9DBCE6; --brand-red:#FF5147;
    --entorn:#6CCB8A; --entorn-pale:#11301F; --entorn-deep:#0E3A20;
    --inst:#7FB0EA; --inst-pale:#13284A; --inst-deep:#102C52;
    --seg:#F0B25C; --seg-pale:#33240D; --seg-deep:#4A300A;
    --ok:#6CCB8A; --ok-pale:#11301F; --ko:#FF7A70; --ko-pale:#3A1716; --mid:#F0B25C;
    --accent:#9DBCE6; --accent-pale:#15294A; --accent-deep:#17396B; --accent-solid:#9DBCE6; --on-accent:#0A1626;
    --bar-bg:rgba(10,22,38,.95); --shadow:none; }
/* /BRAND */

/* LOGO */
  .brand .logo.op{background:none; overflow:hidden; border-radius:9px; box-shadow:0 0 0 1.5px rgba(255,255,255,.55);}
  .brand .logo.op svg{width:100%; height:100%; display:block;}
  .opmark{display:inline-flex; align-items:center; gap:7px; font-family:var(--display); font-weight:800; font-size:13.5px; letter-spacing:-.01em; color:inherit; vertical-align:middle;}
  .opmark svg{width:20px; height:20px; border-radius:5px; display:block; flex:0 0 auto;}
  .opmark span{white-space:nowrap;} .opmark small{font-family:inherit; font-weight:600; font-size:12px; color:var(--ink-soft);}
  footer.foot .opmark{display:flex; width:max-content; margin:0 auto 8px;}
  .result-card .opmark,.presult .opmark{display:flex; width:max-content; margin:16px auto 0; opacity:.9;}

.foot .opmark{display:inline-flex;}
.btn.dark{background:#E1251B; color:#fff;}
.legal-logo{display:block; width:150px; margin:22px 0 4px; --logo-gold:#D11F16; color:var(--ink,#14202E);}
.legal-logo svg{display:block; width:100%; height:auto;}
@media (prefers-color-scheme: dark){ .legal-logo{--logo-gold:#FF5147;} }
/* /LOGO */
/* SAFE */
  html{padding-top:env(safe-area-inset-top,0px); touch-action:manipulation;}
  body::before{content:''; position:fixed; left:0; right:0; top:0; height:env(safe-area-inset-top,0px); background:var(--paper); z-index:45; pointer-events:none;}
/* /SAFE */

/* QODHUB */
.qod{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:14px; margin:14px 0 0; box-shadow:var(--shadow);}
.qd-h{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:14px; margin-bottom:8px;}
.qd-h span{font-size:12px; color:var(--ink-soft); font-weight:700; text-align:right;}
.qd-q{font-weight:700; font-size:15.5px; line-height:1.4; margin-bottom:10px;}
.qd-o{display:flex; flex-direction:column; gap:8px;}
.qd-b{display:flex; gap:10px; align-items:flex-start; text-align:left; width:100%; border:1.5px solid var(--line); background:var(--card2); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; color:var(--ink); cursor:pointer;}
.qd-b i{font-style:normal; font-weight:800; flex:0 0 22px; height:22px; border-radius:6px; display:grid; place-items:center; background:var(--card); border:1px solid var(--line); font-size:12px;}
.qd-b.ok{border-color:var(--ok); background:var(--ok-pale);} .qd-b.ko{border-color:var(--ko); background:var(--ko-pale);}
.qd-b:disabled{cursor:default; opacity:1;}
.qd-r{margin-top:10px; padding:10px 12px; border-radius:12px; font-size:13.5px; line-height:1.45; display:flex; flex-direction:column; gap:4px;}
.qd-r.ok{background:var(--ok-pale);} .qd-r.ko{background:var(--ko-pale);}
.qd-r.ok b{color:var(--ok);} .qd-r.ko b{color:var(--ko);}
.qd-r a{font-weight:800; color:var(--accent); text-decoration:none; margin-top:2px;}
/* /QODHUB */