/**
 * REPO: yoyohub-v2
 * MODULE: public/css/centro-rinnovi-tl.css
 * PURPOSE: Gettoni (--crtl-*) e guscio della pagina «Centro Rinnovi · Team
 *          Leader»: topbar, barra laterale, area principale, schermata di
 *          blocco, scheletri di caricamento, toast, pulsanti base. Tema SOLO
 *          bianco, Sofia Pro, vetro sobrio (professionale: niente aurora
 *          vistosa come la pagina dei consulenti).
 * DEPENDENCIES: fonts/sofia-pro/*.ttf
 * EXPOSES: gettoni --crtl-* su body.crtl-app; classi .crtl-btn,
 *          .crtl-btn--primario, .crtl-btn--ghost, .crtl-vetro, .crtl-pill,
 *          .crtl-card usate dai fogli dei componenti (crtl-griglia.css,
 *          crtl-kpi.css, crtl-statistiche.css).
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: Sofia Pro dritto esiste in 200/300/400/500/700/900: MAI
 *          font-weight:600 (il SemiBold esiste solo corsivo). `[hidden]` deve
 *          sempre vincere: regola !important qui sotto.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-03 [AI] Added: prima stesura (regista).
 * 2026-10-03 [AI] Fixed: animazione delle sezioni con fill-mode backwards
 *          (con both restava un transform che intrappolava i position:fixed).
 * 2026-10-03 [AI] Fixed: avvisi (toast) in alto a destra: in basso coprivano il
 *          pulsante «Invia al Team Farm» della barra azioni.
 * 2026-10-03 [AI] Modified: niente arancione — --crtl-amber ora e' il giallo marchio,
 *          testo delle pastiglie «ambra» in --crtl-ink (giallo su bianco non si legge).
 * 2026-10-04 [AI] Added: modificatore --rinnovo del marchio (logo nuovo senza quadrato nero).
 */

@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProLight.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProRegular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sofia Pro';src:url('../fonts/sofia-pro/SofiaProBlack.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}

/* ============================================ 0 · GETTONI ===== */
body.crtl-app{
  --crtl-bg:#F6F6F3; --crtl-paper:#FFFFFF; --crtl-paper-2:#FAFAF7;
  --crtl-line:#E8E6E0; --crtl-line-2:#D9D6CD;
  --crtl-ink:#121212; --crtl-ink-2:#4A4842; --crtl-ink-3:#8A877D;
  --crtl-accent:#FFD60A; --crtl-accent-soft:#FFF6CC; --crtl-accent-ink:#1F1A00;
  --crtl-green:#1F8A5B; --crtl-green-soft:#E6F4EC;
  /* 2026-10-03: NIENTE ARANCIONE (l'utente lo detesta): «ambra» = GIALLO marchio.
     Usarlo solo come riempimento (barre, pallini, sfondi); il testo sopra resta --crtl-ink. */
  --crtl-amber:#FFD60A; --crtl-amber-soft:#FFF4B8;
  --crtl-red:#D93636; --crtl-red-soft:#FDECEC;
  --crtl-blue:#2B59C3; --crtl-blue-soft:#E9EFFB;
  --crtl-radius:16px; --crtl-radius-sm:10px;
  --crtl-shadow:0 1px 2px rgba(18,18,18,.04),0 10px 30px -14px rgba(30,40,80,.16);
  --crtl-glass:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  --crtl-blur:18px;
  --crtl-font:'Sofia Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --crtl-side-w:232px; --crtl-top-h:64px; --crtl-gutter:20px;
}

/* ============================================ 1 · BASE ===== */
.crtl-app [hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body.crtl-app{
  margin:0; font-family:var(--crtl-font); font-weight:400; color:var(--crtl-ink);
  background:var(--crtl-bg); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.45;
}
/* Luce tenue in alto: vetro leggibile senza distrarre (pagina di lavoro). */
body.crtl-app::before{
  content:""; position:fixed; inset:0 0 auto 0; height:420px; z-index:-1; pointer-events:none;
  background:
    radial-gradient(700px 260px at 12% -40px, rgba(255,214,10,.22), transparent 70%),
    radial-gradient(800px 300px at 88% -60px, rgba(120,170,255,.18), transparent 70%);
}
:where(.crtl-app) :where(button,input,select,textarea){font:inherit;color:inherit}
.crtl-i{width:18px;height:18px;flex:none}
.crtl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.crtl-app :focus-visible{outline:2px solid var(--crtl-ink);outline-offset:2px;border-radius:6px}
.crtl-num{font-variant-numeric:tabular-nums}

/* ============================================ 2 · SUPERFICI E PULSANTI ===== */
.crtl-vetro,.crtl-card{
  background:var(--crtl-glass); border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--crtl-shadow), inset 0 1px 0 rgba(255,255,255,.95);
  border-radius:var(--crtl-radius);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crtl-vetro{ -webkit-backdrop-filter:blur(var(--crtl-blur)) saturate(160%); backdrop-filter:blur(var(--crtl-blur)) saturate(160%); }
}
.crtl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:38px; padding:0 16px; border-radius:999px; cursor:pointer; text-decoration:none;
  border:1px solid var(--crtl-line-2); background:#fff; color:var(--crtl-ink); font-weight:500;
  transition:background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.crtl-btn:hover{border-color:var(--crtl-ink-3); box-shadow:0 2px 8px rgba(18,18,18,.06)}
.crtl-btn:active{transform:translateY(1px)}
.crtl-btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.crtl-btn--primario{
  background:linear-gradient(180deg,#2a2a2a,#0d0d0d); color:#fff; border-color:#0d0d0d; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px -8px rgba(0,0,0,.5);
}
.crtl-btn--primario:hover{border-color:#000; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 8px 20px -8px rgba(0,0,0,.55)}
.crtl-btn--accento{ background:var(--crtl-accent); border-color:#E8C200; color:var(--crtl-accent-ink); font-weight:700; }
.crtl-btn--ghost{ background:transparent; border-color:transparent; }
.crtl-btn--ghost:hover{ background:rgba(18,18,18,.05); box-shadow:none; }
.crtl-pill{
  display:inline-flex; align-items:center; gap:.3rem; height:22px; padding:0 9px; border-radius:999px;
  font-size:12px; font-weight:500; background:var(--crtl-paper-2); border:1px solid var(--crtl-line); color:var(--crtl-ink-2); white-space:nowrap;
}
.crtl-pill--rosso{background:var(--crtl-red-soft); border-color:transparent; color:var(--crtl-red)}
.crtl-pill--ambra{background:var(--crtl-amber-soft); border-color:transparent; color:var(--crtl-ink)}
.crtl-pill--verde{background:var(--crtl-green-soft); border-color:transparent; color:var(--crtl-green)}
.crtl-pill--blu{background:var(--crtl-blue-soft); border-color:transparent; color:var(--crtl-blue)}
.crtl-pill--giallo{background:var(--crtl-accent-soft); border-color:transparent; color:var(--crtl-accent-ink)}

/* ============================================ 3 · GUSCIO ===== */
.crtl-shell{min-height:100%; display:flex; flex-direction:column}
.crtl-top{
  position:sticky; top:0; z-index:30; height:var(--crtl-top-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 var(--crtl-gutter);
  background:rgba(255,255,255,.82); border-bottom:1px solid rgba(232,230,224,.8);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .crtl-top{ -webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%); }
}
.crtl-top-sx,.crtl-top-dx{display:flex; align-items:center; gap:12px; min-width:0}
.crtl-marchio{width:34px;height:34px;border-radius:10px;background:#121212;color:var(--crtl-accent);display:grid;place-items:center}
/* 2026-10-04: logo «rinnovo» — niente quadrato nero, solo il simbolo (Y gialla + frecce tonde) */
.crtl-marchio--rinnovo{width:40px;height:40px;background:none;border-radius:0}
.crtl-marchio--rinnovo .crtl-i{width:40px;height:40px}
.crtl-top-titolo{font-weight:700; font-size:17px; letter-spacing:-.01em}
.crtl-top-sotto{font-size:12px; font-weight:500; color:var(--crtl-ink-3); padding:3px 9px; border:1px solid var(--crtl-line); border-radius:999px; background:#fff}
.crtl-top-agg{font-size:12px; color:var(--crtl-ink-3)}
.crtl-top-utente{font-weight:500; color:var(--crtl-ink-2)}
.crtl-top-link{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--crtl-ink); text-decoration:none}
.crtl-top-link .crtl-i{width:14px;height:14px}

.crtl-corpo{flex:1; display:grid; grid-template-columns:var(--crtl-side-w) minmax(0,1fr); gap:var(--crtl-gutter); padding:var(--crtl-gutter)}
.crtl-side{
  position:sticky; top:calc(var(--crtl-top-h) + var(--crtl-gutter)); align-self:start;
  display:flex; flex-direction:column; gap:4px; padding:10px;
  background:var(--crtl-glass); border:1px solid rgba(255,255,255,.9); border-radius:var(--crtl-radius);
  box-shadow:var(--crtl-shadow), inset 0 1px 0 rgba(255,255,255,.95);
}
.crtl-side-voce{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px;
  color:var(--crtl-ink-2); text-decoration:none; font-weight:500; transition:background .15s ease, color .15s ease;
}
.crtl-side-voce:hover{background:rgba(18,18,18,.04); color:var(--crtl-ink)}
.crtl-side-voce.is-attiva{background:#121212; color:#fff; box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.crtl-side-voce.is-attiva .crtl-i{color:var(--crtl-accent)}
.crtl-side-testo{flex:1; min-width:0}
.crtl-side-conta{font-size:12px; font-weight:700; min-width:24px; height:22px; padding:0 7px; border-radius:999px; display:inline-grid; place-items:center; background:var(--crtl-accent); color:var(--crtl-accent-ink)}

.crtl-main{min-width:0}
/* backwards (non both): a fine animazione non resta nessun transform, che
   renderebbe la sezione contenitore dei figli position:fixed. */
.crtl-sezione{min-width:0; animation:crtl-entra .35s ease backwards}
@keyframes crtl-entra{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ============================================ 4 · STATI ===== */
.crtl-gate{min-height:100vh; display:grid; place-items:center; padding:24px}
.crtl-gate-card{max-width:440px; text-align:center; padding:36px 32px; background:#fff; border:1px solid var(--crtl-line); border-radius:22px; box-shadow:var(--crtl-shadow)}
.crtl-gate-icona{width:52px;height:52px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;background:var(--crtl-accent-soft)}
.crtl-gate-icona .crtl-i{width:24px;height:24px}
.crtl-gate-titolo{font-size:20px; font-weight:700; margin:0 0 8px}
.crtl-gate-testo{color:var(--crtl-ink-2); margin:0 0 20px}
.crtl-gate-azioni{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}

.crtl-caricamento{display:flex; flex-direction:column; gap:14px}
.crtl-skel{height:120px; border-radius:var(--crtl-radius); background:linear-gradient(90deg,#efede7 0%,#f8f7f3 50%,#efede7 100%); background-size:200% 100%; animation:crtl-skel 1.2s linear infinite}
.crtl-skel--alto{height:180px}
@keyframes crtl-skel{from{background-position:200% 0} to{background-position:-200% 0}}

/* In ALTO a destra: in basso coprirebbero la barra azioni («Invia al Team Farm»). */
.crtl-toasts{position:fixed; right:20px; top:calc(var(--crtl-top-h) + 12px); z-index:200; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.crtl-toast{pointer-events:auto; min-width:240px; max-width:420px; padding:12px 16px; border-radius:12px; background:#121212; color:#fff; font-weight:500; box-shadow:0 12px 30px -12px rgba(0,0,0,.5); transition:opacity .4s ease, transform .4s ease}
.crtl-toast--ok{background:var(--crtl-green)}
.crtl-toast--errore{background:var(--crtl-red)}
.crtl-toast.is-via{opacity:0; transform:translateY(-6px)}

/* ============================================ 5 · RESPONSIVE ===== */
@media (max-width:1023px){
  body.crtl-app{--crtl-gutter:14px}
  .crtl-corpo{grid-template-columns:1fr}
  .crtl-side{position:sticky; top:var(--crtl-top-h); z-index:20; flex-direction:row; overflow-x:auto; padding:6px}
  .crtl-side-voce{flex:none; padding:9px 12px}
  .crtl-top-agg,.crtl-top-sotto{display:none}
}
@media (max-width:560px){
  .crtl-top-utente{display:none}
  .crtl-side-testo{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .crtl-sezione{animation:none}
  .crtl-skel{animation:none}
}