/* ============================================================================
   R4P ATLETI — TEMA "RAIL"
   Foglio di stile condiviso da TUTTE le pagine della web app atleti.
   E' la stessa identica base della web app coach: se lo modifichi qui,
   allinea anche WEB APP COACH/rail-theme.css.

   Come si usa in una pagina:
     <link rel="stylesheet" href="../rail-theme.css">          (o "rail-theme.css" in root)
     <script defer src="../rail-shell.js"></script>
     <body data-page="calendario" data-title="Calendario" data-back="../coach_home.html">

   Contiene:
     1. Token (colori, raggi, ombre)
     2. Base (body, tipografia, scrollbar, form)
     3. Guscio: rail desktop, topbar + tab bar mobile
     4. Componenti: banner, sezioni, moduli, card, bottoni, tabelle, badge
     5. Compatibilita': rimappatura delle classi Tailwind gia' presenti nelle
        pagine, cosi' il markup esistente adotta il tema senza riscritture.
   ============================================================================ */

/* ============ 1. TOKEN ============ */
:root{
  --bg:#080D16;
  --surface:#0F1724;
  --surface-2:#151F30;
  --surface-3:#1B2637;
  --line:#1E2A3D;
  --line-2:#2C3B52;
  --txt:#EAF1F9;
  --strong:#FFFFFF;      /* titoli: bianco al buio, quasi nero in chiaro */
  --txt-1:#C6D3E2;       /* testo secondario chiaro (slate-200/300) */
  --txt-2:#93A3B8;
  --txt-3:#5F6F87;
  --brand:#1E9BF0;
  --brand-ink:#04121C;
  --gold:#F5C400;
  --ok:#34D399;
  --warn:#FBBF24;
  --bad:#F87171;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:22px;
  --rail-w:84px;
  /* spazio sotto la tab bar mobile, per staccarla dalla barretta "home" degli
     iPhone senza tasto. env() vale 0 finche' le pagine non usano
     viewport-fit=cover, quindi sugli iPhone il valore lo mette rail-shell.js
     (classe r-iphone-barra su <html>). */
  --tab-lift:env(safe-area-inset-bottom, 0px);
  --shadow:0 24px 60px -24px rgba(0,0,0,.85);
}

/* ---- MODALITA' CHIARA ----
   Stessa struttura, soli token ridefiniti: tutto cio' che usa le variabili
   (compreso il livello di compatibilita' Tailwind in fondo) si ribalta da solo.
   Attivazione: <html data-theme="light"> (vedi rail-shell.js). */
:root[data-theme="light"]{
  --bg:#F2F5F9;
  --surface:#FFFFFF;
  --surface-2:#F4F7FB;
  --surface-3:#E8EEF6;
  --line:#E1E8F0;
  --line-2:#CBD6E3;
  --txt:#111C2B;
  --strong:#0A1420;
  --txt-1:#33445A;
  --txt-2:#4B5A6D;
  --txt-3:#7C8A9C;
  --brand:#0069B4;
  --brand-ink:#FFFFFF;
  --gold:#9A7B00;
  --ok:#0E9F6E;
  --warn:#B45309;
  --bad:#D03434;
  --shadow:0 20px 44px -22px rgba(16,32,56,.35);
}

/* ============ 2. BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-color:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* i vecchi blob sfocati non fanno parte del tema Rail */
body .background-gradient{display:none !important}

/* titoli condensati: la firma tipografica del tema */
.r-cond,
.r-page-head h1,
.r-banner h1,
.mod h3,
.r-sec h2{
  font-family:'Barlow Condensed','Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#3D5170}

/* focus coerente su tutta l'app */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;border-radius:8px;
}

/* ============ 3. GUSCIO ============ */
/* il body prende spazio per la rail (desktop) o la tab bar (mobile) */
body.has-rail{padding-top:68px;padding-bottom:calc(86px + var(--tab-lift))}
@media(min-width:900px){
  body.has-rail{padding-top:0;padding-bottom:0;padding-left:var(--rail-w)}
}

/* ---- rail desktop ---- */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);z-index:45;
  background:linear-gradient(180deg,#0C1420,#080D16);
  border-right:1px solid var(--line);
  display:none;flex-direction:column;align-items:center;padding:16px 0 18px;
}
@media(min-width:900px){.rail{display:flex}}
.rail .mark{
  width:48px;height:48px;border-radius:15px;overflow:hidden;margin-bottom:22px;
  border:1px solid var(--line-2);box-shadow:0 8px 20px -10px rgba(0,0,0,.9);flex:none;
}
.rail .mark img{width:100%;height:100%;display:block;object-fit:cover}
.rail nav{display:flex;flex-direction:column;gap:6px;width:100%;padding:0 10px;flex:1;overflow-y:auto}
.rail nav::-webkit-scrollbar{width:0}
.rail nav a{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 4px;border-radius:14px;color:var(--txt-3);text-decoration:none;transition:.2s;
}
.rail nav a span{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;text-align:center;line-height:1.1}
.rail nav a:hover{color:var(--txt);background:var(--surface)}
.rail nav a.active{color:var(--brand);background:rgba(30,155,240,.1)}
.rail nav a.active::before{
  content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:3px;height:26px;border-radius:0 3px 3px 0;background:var(--brand);
}
.rail-actions{display:flex;flex-direction:column;gap:8px;align-items:center}
.rail .out{
  color:var(--txt-3);width:44px;height:44px;border-radius:13px;flex:none;
  border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.rail .out:hover{color:var(--bad);border-color:rgba(248,113,113,.4)}

/* ---- topbar mobile ---- */
.r-topbar{
  position:fixed;top:0;left:0;right:0;z-index:35;height:58px;
  display:flex;align-items:center;gap:12px;padding:0 14px;
  background:rgba(8,13,22,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@media(min-width:900px){.r-topbar{display:none}}
.r-topbar .mark{width:34px;height:34px;border-radius:11px;overflow:hidden;border:1px solid var(--line-2);flex:none}
.r-topbar .mark img{width:100%;height:100%;object-fit:cover;display:block}
.r-topbar b{
  font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-size:19px;letter-spacing:.03em;font-weight:600;
}
.r-topbar .sp{flex:1}
.r-topbar .out{
  width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:none;
  color:var(--txt-2);display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none;
}
.r-topbar .out:hover{color:var(--bad);border-color:rgba(248,113,113,.4)}
.r-topbar .tb-back{
  width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--txt-2);text-decoration:none;transition:.2s;
}
.r-topbar .tb-back:hover{color:var(--strong);border-color:var(--line-2)}
/* su telefono l'intestazione e' gia' nella topbar: non ripeterla */
@media(max-width:899px){
  html.r-head-merged .r-page-head{display:none}
}

/* ---- tab bar mobile ---- */
.r-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;display:flex;
  background:rgba(10,16,26,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding:8px 6px calc(8px + var(--tab-lift));
}
html.r-iphone-barra{--tab-lift:max(env(safe-area-inset-bottom, 0px), 20px)}
@media(min-width:900px){.r-tabbar{display:none}}
.r-tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;
  border-radius:12px;color:var(--txt-3);text-decoration:none;transition:.2s;min-width:0;
}
.r-tabbar a span{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.r-tabbar a.active{color:var(--brand)}

/* ---- contenuto ---- */
.r-main{max-width:1160px;margin:0 auto;padding:22px 16px 40px}
@media(min-width:900px){.r-main{padding:30px 34px 46px}}

/* ---- intestazione pagina (pagine interne) ---- */
.r-page-head{display:flex;align-items:center;gap:14px;margin:6px 0 22px;text-align:left}
@media(min-width:900px){.r-page-head{margin-top:0}}
.r-page-head .back{
  width:42px;height:42px;flex:none;border-radius:13px;border:1px solid var(--line);
  background:var(--surface);color:var(--txt-2);display:grid;place-items:center;
  text-decoration:none;transition:.2s;
}
.r-page-head .back:hover{color:var(--strong);border-color:var(--line-2);background:var(--surface-2)}
.r-page-head .tx{min-width:0;flex:1}
.r-page-head h1{font-size:clamp(25px,4.6vw,34px);font-weight:700;line-height:1;color:var(--strong);margin:0}
.r-page-head p{font-size:12.5px;color:var(--txt-3);margin:5px 0 0}
.r-page-head .accent{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  color:var(--accent,var(--brand));
  background:color-mix(in srgb,var(--accent,var(--brand)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,var(--brand)) 26%,transparent);
}

/* ============ 4. COMPONENTI ============ */
/* ---- banner identita' coach (home) ---- */
.r-banner{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(120deg,#122A44 0%,#0F1B2C 46%,#0F1724 100%);
  padding:20px 22px;margin-bottom:26px;
}
.r-banner::before{
  content:"";position:absolute;right:-90px;top:-110px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(30,155,240,.35),transparent 66%);
}
.r-banner::after{
  content:"";position:absolute;right:-10px;bottom:-30px;width:260px;height:150px;opacity:.11;
  background:repeating-linear-gradient(115deg,var(--gold) 0 4px,transparent 4px 16px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);
}
.r-banner-in{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.r-ava{
  width:56px;height:56px;border-radius:18px;flex:none;display:grid;place-items:center;
  background:rgba(30,155,240,.16);border:1px solid rgba(30,155,240,.36);color:#7CC6F7;
}
.r-who{min-width:0;flex:1}
.r-who h1{font-size:clamp(26px,4.4vw,38px);line-height:1;font-weight:700;margin:0;color:var(--strong)}
.r-who .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;
  font-size:12px;color:var(--txt-2);overflow-wrap:anywhere;
}
.r-club{margin-left:auto;padding-left:22px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:7px}
.r-club-lbl{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.r-club-name{display:flex;align-items:center;gap:10px;color:var(--strong)}
.r-club-name svg{color:var(--gold);flex:none}
.r-club-name strong{
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  font-size:29px;font-weight:700;line-height:1;letter-spacing:.01em;
}
@media(max-width:720px){
  .r-club{margin-left:0;width:100%;padding:14px 0 0;border-left:0;border-top:1px solid var(--line-2)}
  .r-club-name strong{font-size:25px}
  .r-banner::after{opacity:.05}
}

/* ---- etichetta di sezione ---- */
.r-sec{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.r-sec h2{font-size:15px;letter-spacing:.16em;font-weight:600;color:var(--txt-2);margin:0}
.r-sec .ln{flex:1;height:1px;background:var(--line)}
.r-sec+.r-sec{margin-top:30px}

/* ---- griglia moduli ---- */
.r-mods{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:620px){.r-mods{grid-template-columns:repeat(2,1fr);gap:12px}}
@media(min-width:1000px){.r-mods{grid-template-columns:repeat(3,1fr)}}
.mod{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:15px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:15px 18px;
  transition:.28s cubic-bezier(.2,.8,.2,1);
}
.mod::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--brand));opacity:.55;transition:.28s}
.mod:hover{background:var(--surface-2);border-color:var(--line-2);transform:translateY(-3px)}
.mod:hover::before{opacity:1;width:5px}
.mod .ic{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  color:var(--accent,var(--brand));
  background:color-mix(in srgb,var(--accent,var(--brand)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--accent,var(--brand)) 26%,transparent);
}
.mod .tx{flex:1;min-width:0}
.mod h3{font-size:21px;font-weight:600;line-height:1.05;color:var(--strong);margin:0}
.mod .chev{color:var(--txt-3);transition:.28s;flex:none}
.mod:hover .chev{color:var(--accent,var(--brand));transform:translateX(3px)}

/* ---- scorciatoie ---- */
.r-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:620px){.r-quick{grid-template-columns:repeat(4,1fr)}}
.r-q{
  display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:14px;
  border:1px dashed var(--line-2);background:rgba(15,23,36,.5);color:var(--txt-2);
  font-size:12.5px;font-weight:600;text-decoration:none;transition:.2s;
}
.r-q:hover{color:var(--strong);border-style:solid;border-color:var(--brand);background:rgba(30,155,240,.08)}

/* ---- pannello generico ---- */
.r-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}
.r-card-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.r-card-h h3{
  font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;
  font-size:18px;font-weight:600;letter-spacing:.02em;color:var(--strong);margin:0;
}

/* ---- bottoni ---- */
.r-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 17px;border-radius:13px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--txt);font-family:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none;transition:.2s;
}
.r-btn:hover{background:var(--surface-3);border-color:#3D5170}
.r-btn:active{transform:scale(.98)}
.r-btn[disabled]{opacity:.45;cursor:not-allowed}
.r-btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.r-btn-primary:hover{background:#3FADF7;border-color:#3FADF7}
.r-btn-gold{background:var(--gold);border-color:var(--gold);color:#1A1400;font-weight:700}
.r-btn-danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35);color:#FCA5A5}
.r-btn-danger:hover{background:rgba(248,113,113,.2);border-color:rgba(248,113,113,.55)}
.r-btn-ghost{background:transparent;border-color:var(--line);color:var(--txt-2)}
.r-btn-ghost:hover{color:var(--strong);border-color:var(--line-2);background:var(--surface)}

/* ---- campi ---- */
.r-field{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.r-input,.r-select,.r-textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line-2);border-radius:12px;
  padding:11px 13px;color:var(--txt);font-family:inherit;font-size:14px;transition:.2s;
}
.r-input:focus,.r-select:focus,.r-textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(30,155,240,.16)}
.r-input::placeholder,.r-textarea::placeholder{color:var(--txt-3)}

/* ---- tabelle ---- */
.r-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.r-table th{
  text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.r-table td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--txt-2)}
.r-table tr:last-child td{border-bottom:0}
.r-table tbody tr:hover td{background:var(--surface-2);color:var(--txt)}
.r-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- badge / chip ---- */
.r-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 9px;border-radius:6px;
  color:var(--tag-c,var(--gold));
  background:color-mix(in srgb,var(--tag-c,var(--gold)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--tag-c,var(--gold)) 28%,transparent);
}
.r-tag-blue{--tag-c:#7CC6F7}
.r-tag-ok{--tag-c:var(--ok)}
.r-tag-bad{--tag-c:var(--bad)}

/* ============ 5. COMPATIBILITA' CON IL MARKUP ESISTENTE ============
   Le pagine usano gia' le utility Tailwind qui sotto: le riportiamo sui token
   del tema (il selettore parte da `body` per vincere sulle utility del CDN,
   che hanno specificita' piu' bassa, senza ricorrere a !important).        */
/* Sfondi e bordi grigi: mappatura generata dalle classi realmente usate
   nelle pagine (comprese quelle create via JS). Il selettore [class~=]
   fa combaciare la classe esatta, cosi' 'hover:bg-slate-700' non viene
   confuso con 'bg-slate-700'. */
body [class~="bg-gray-600"]{background-color:var(--line-2)}
body [class~="bg-slate-600"]{background-color:var(--line-2)}
body [class~="bg-slate-700"]{background-color:var(--surface-3)}
body [class~="bg-slate-700/30"]{background-color:var(--surface-3)}
body [class~="bg-slate-700/40"]{background-color:var(--surface-3)}
body [class~="bg-slate-700/50"]{background-color:var(--surface-3)}
body [class~="bg-slate-700/70"]{background-color:var(--surface-3)}
body [class~="bg-slate-800"]{background-color:var(--surface-2)}
body [class~="bg-slate-800/40"]{background-color:var(--surface-2)}
body [class~="bg-slate-800/50"]{background-color:var(--surface-2)}
body [class~="bg-slate-800/70"]{background-color:var(--surface-2)}
body [class~="bg-slate-800/80"]{background-color:var(--surface-2)}
body [class~="bg-slate-800/90"]{background-color:var(--surface-2)}
body [class~="bg-slate-900"]{background-color:var(--surface)}
body [class~="bg-slate-900/50"]{background-color:var(--surface)}
body [class~="bg-slate-900/60"]{background-color:var(--surface)}
body [class~="bg-slate-900/70"]{background-color:var(--surface)}
body [class~="bg-slate-900/80"]{background-color:var(--surface)}
body [class~="bg-slate-900/90"]{background-color:var(--surface)}
body [class~="bg-slate-950/80"]{background-color:var(--surface)}
body [class~="bg-slate-950/90"]{background-color:var(--surface)}
body [class~="hover:bg-slate-500"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-600"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-700"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-700/30"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-800"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-800/50"]:hover{background-color:var(--surface-3)}
body [class~="hover:bg-slate-800/70"]:hover{background-color:var(--surface-3)}
body [class~="border-gray-500"]{border-color:var(--line-2)}
body [class~="border-slate-500"]{border-color:var(--line-2)}
body [class~="border-slate-600"]{border-color:var(--line-2)}
body [class~="border-slate-600/50"]{border-color:var(--line-2)}
body [class~="border-slate-700"]{border-color:var(--line-2)}
body [class~="border-slate-700/30"]{border-color:var(--line-2)}
body [class~="border-slate-700/50"]{border-color:var(--line-2)}
body [class~="border-slate-700/60"]{border-color:var(--line-2)}
body .text-slate-400{color:var(--txt-2)}
body .text-slate-500{color:var(--txt-3)}
body .text-slate-300,
body .text-slate-200{color:var(--txt-1)}
body .text-slate-100{color:var(--txt)}
body .text-sky-400,body .text-blue-400,body .text-indigo-400{color:var(--brand)}
body .bg-indigo-600,body .bg-indigo-500{background-color:var(--brand);color:var(--brand-ink)}
body .bg-indigo-600:hover,body .bg-indigo-500:hover{background-color:#3FADF7}
body .bg-indigo-500\/10{background-color:rgba(30,155,240,.1)}
body .border-indigo-500\/30,body .border-indigo-500\/40,body .border-indigo-500\/50{border-color:rgba(30,155,240,.32)}
body .border-t-indigo-500{border-top-color:var(--brand)}
body .bg-blue-600,body .bg-sky-600{background-color:var(--brand);color:var(--brand-ink)}
body .bg-blue-600:hover,body .bg-sky-600:hover{background-color:#3FADF7}
body .rounded-2xl{border-radius:18px}
body .rounded-xl{border-radius:14px}
body .rounded-lg{border-radius:11px}

/* le vecchie card di navigazione prendono il comportamento dei moduli Rail */
body .nav-card{
  background-color:var(--surface);border-color:var(--line);
  transition:.28s cubic-bezier(.2,.8,.2,1);
}
body .nav-card:hover{
  transform:translateY(-4px);background-color:var(--surface-2);
  border-color:var(--line-2);box-shadow:var(--shadow);
}

/* pulsante Indietro storico (back-button.css): allineato al tema */
body .back-btn{
  background-color:var(--surface);border-color:var(--line);color:var(--txt-2);border-radius:13px;
}
body .back-btn:hover{background-color:var(--surface-2);border-color:var(--line-2);color:var(--strong)}

/* ============ 6. MODALITA' CHIARA — ritocchi ai componenti ============
   Quasi tutto si ribalta da solo con i token; qui restano i punti dove il
   tema scuro usa gradienti o velature pensate apposta per il fondo nero.   */
:root[data-theme="light"] .rail{background:linear-gradient(180deg,#FFFFFF,#EDF2F8)}
:root[data-theme="light"] .r-topbar{background:rgba(255,255,255,.92)}
:root[data-theme="light"] .r-tabbar{background:rgba(255,255,255,.94)}
:root[data-theme="light"] .rail nav a.active,
:root[data-theme="light"] .r-tabbar a.active{background:rgba(0,105,180,.08)}
:root[data-theme="light"] .r-banner{
  background:linear-gradient(120deg,#DBEAF7 0%,#EAF1F9 46%,#FFFFFF 100%);
}
:root[data-theme="light"] .r-banner::before{background:radial-gradient(circle,rgba(0,105,180,.16),transparent 66%)}
:root[data-theme="light"] .r-banner::after{
  opacity:.2;
  background:repeating-linear-gradient(115deg,var(--brand) 0 3px,transparent 3px 15px);
}
:root[data-theme="light"] .r-ava{
  background:rgba(0,105,180,.1);border-color:rgba(0,105,180,.25);color:var(--brand);
}
:root[data-theme="light"] .r-q{background:rgba(255,255,255,.7)}
:root[data-theme="light"] .r-q:hover{background:rgba(0,105,180,.07)}
:root[data-theme="light"] .mod,
:root[data-theme="light"] .r-card{box-shadow:0 1px 2px rgba(16,32,56,.04),0 10px 24px -18px rgba(16,32,56,.35)}
:root[data-theme="light"] .r-btn-danger{background:rgba(208,52,52,.08);border-color:rgba(208,52,52,.3);color:var(--bad)}
:root[data-theme="light"] .rail .out:hover,
:root[data-theme="light"] .r-topbar .out:hover{color:var(--bad);border-color:rgba(208,52,52,.4)}



/* ============ 7. TRANSIZIONI TRA PAGINE ============
   View Transitions native del browser (Chrome/Edge 126+, Safari 18+).
   Sono solo CSS: dove non sono supportate (oggi Firefox) la navigazione
   resta quella normale, senza differenze funzionali.

   L'effetto: il guscio (rail, barra in alto, tab bar) resta FERMO e solo il
   contenuto si sostituisce con una dissolvenza e un piccolo scorrimento.
   E' quello che fa sembrare l'app un'app invece di un sito.            */
@view-transition { navigation: auto; }

/* contenuto: entra salendo di pochi pixel, esce in dissolvenza */
::view-transition-old(root){ animation: r-page-out .14s ease both; }
::view-transition-new(root){ animation: r-page-in .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes r-page-out{ to{ opacity:0 } }
@keyframes r-page-in{ from{ opacity:0; transform:translateY(10px) } }

/* il guscio viene ritagliato a parte e lasciato immobile:
   niente sfarfallio della barra laterale a ogni cambio pagina */
.rail{ view-transition-name: r-rail }
.r-topbar{ view-transition-name: r-topbar }
.r-tabbar{ view-transition-name: r-tabbar }
::view-transition-old(r-rail),   ::view-transition-new(r-rail),
::view-transition-old(r-topbar), ::view-transition-new(r-topbar),
::view-transition-old(r-tabbar), ::view-transition-new(r-tabbar){ animation: none }

/* chi ha chiesto meno animazioni al sistema non le vede */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){ animation: none }
}

/* ============ 8. INGRESSO DELLE CARD DELLA HOME ============
   I moduli entrano da sinistra uno dopo l'altro, nell'ordine in cui stanno
   nella pagina. Uso fill-mode "backwards" e non "both": con "both" il
   transform dell'animazione resterebbe applicato anche dopo, prendendo il
   sopravvento sul sollevamento al passaggio del mouse.                */
body[data-page="home"].r-pronta .r-mods .mod{
  animation: r-mod-in .42s cubic-bezier(.2,.8,.2,1) backwards;
}
@keyframes r-mod-in{
  from{ opacity:0; transform:translateX(-22px) }
}
body[data-page="home"].r-pronta .r-mods .mod:nth-child(1){ animation-delay:0ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(2){ animation-delay:55ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(3){ animation-delay:110ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(4){ animation-delay:165ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(5){ animation-delay:220ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(6){ animation-delay:275ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(7){ animation-delay:330ms }
body[data-page="home"].r-pronta .r-mods .mod:nth-child(8){ animation-delay:385ms }

@media (prefers-reduced-motion: reduce){
  body[data-page="home"].r-pronta .r-mods .mod{ animation: none }
}

/* ---- MODALITA' CHIARA: testo bianco e fondi colorati ----
   Liste generate dalle classi realmente presenti in questa app (anche quelle
   costruite via JS). Il selettore [class~=] combacia con la classe esatta, e
   le varianti con opacita' (es. text-amber-300/80) hanno una regola propria. */
:root[data-theme="light"] body .text-white{color:var(--strong)}
/* ...tranne sopra un fondo pieno colorato, dove il bianco serve davvero */
:root[data-theme="light"] body [class~="bg-amber-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-amber-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-amber-900"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-blue-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-blue-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-blue-700"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-emerald-400"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-emerald-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-emerald-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-emerald-900"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-green-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-green-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-orange-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-pink-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-purple-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-purple-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-red-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-red-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-sky-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-sky-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-sky-700"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-teal-500"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-teal-600"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]),
:root[data-theme="light"] body [class~="bg-teal-700"]:not([class~="text-slate-900"]):not([class~="text-slate-800"]){color:#FFFFFF}

/* Testi colorati chiari (300/400): su fondo bianco sarebbero slavati,
   in chiaro scendono alle tonalita' 600/700. I livelli 200 restano come sono:
   stanno sopra i pannelli scuri -900. */
:root[data-theme="light"] body [class~="text-amber-300/80"]{color:#b45309}
:root[data-theme="light"] body [class~="text-amber-400"]{color:#d97706}
:root[data-theme="light"] body [class~="text-amber-400/90"]{color:#d97706}
:root[data-theme="light"] body [class~="text-blue-300"]{color:#1d4ed8}
:root[data-theme="light"] body [class~="text-blue-400"]{color:#2563eb}
:root[data-theme="light"] body [class~="text-cyan-400"]{color:#0891b2}
:root[data-theme="light"] body [class~="text-emerald-300"]{color:#047857}
:root[data-theme="light"] body [class~="text-emerald-400"]{color:#059669}
:root[data-theme="light"] body [class~="text-green-400"]{color:#16a34a}
:root[data-theme="light"] body [class~="text-indigo-300"]{color:#4338ca}
:root[data-theme="light"] body [class~="text-indigo-400"]{color:#4f46e5}
:root[data-theme="light"] body [class~="text-orange-300"]{color:#c2410c}
:root[data-theme="light"] body [class~="text-orange-400"]{color:#ea580c}
:root[data-theme="light"] body [class~="text-purple-300"]{color:#7e22ce}
:root[data-theme="light"] body [class~="text-purple-400"]{color:#9333ea}
:root[data-theme="light"] body [class~="text-red-300"]{color:#b91c1c}
:root[data-theme="light"] body [class~="text-red-400"]{color:#dc2626}
:root[data-theme="light"] body [class~="text-sky-300"]{color:#0369a1}
:root[data-theme="light"] body [class~="text-sky-400"]{color:#0284c7}
:root[data-theme="light"] body [class~="text-sky-400/80"]{color:#0284c7}
:root[data-theme="light"] body [class~="text-yellow-300"]{color:#a16207}
:root[data-theme="light"] body [class~="text-yellow-400"]{color:#ca8a04}

/* Riquadri di avviso ed errore (es. "Record mancante" in dispendi.html):
   i fondi -900 trasparenti su bianco diventano un beige/rosa spento e il testo
   chiaro non si legge. In chiaro: fondo tenue e testo scuro della stessa tinta.
   Stanno dopo le regole dei testi colorati, a pari specificita' vincono loro. */
:root[data-theme="light"] body [class~="bg-yellow-900/30"],
:root[data-theme="light"] body [class~="bg-yellow-900/40"]{background-color:#FEF3C7;color:#92400E}
:root[data-theme="light"] body [class~="bg-red-900/30"],
:root[data-theme="light"] body [class~="bg-red-900/40"],
:root[data-theme="light"] body [class~="bg-red-900/50"]{background-color:#FEE2E2;color:#B91C1C}
/* bg-red-900/60 escluso apposta: e' il riquadro EP dei grafici CSV, con dentro
   un testo text-indigo-200 che su fondo chiaro sparirebbe */