/* ═══════════════════════════════════════════════════════════════════════════
   Farmacia Ianni — foglio di stile condiviso
   Un solo posto per colori, tipografia e componenti: sito pubblico, pagina
   "Gestisci la tua prenotazione", area operatori, pannello e cruscotto.
   I nomi delle classi sono quelli gia' in uso nel pannello, cosi' ogni pagina
   puo' adottarlo cancellando le proprie regole locali.
   Nessuna sfumatura decorativa, nessuna trasparenza: superfici piene, un bordo,
   una griglia. Il colore marca cio' che si puo' fare, non fa da ornamento.
   Servito da /static/ianni.css. Icone: /static/icons.svg (Lucide).
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Blu dell'insegna (#002c50 nel logo): struttura, testate, titoli ── */
  --navy-50:#eef2f6; --navy-100:#d3dde6; --navy-200:#a3b6c7; --navy-300:#6c8ba6;
  --navy-400:#2d6289; --navy-500:#002c50; --navy-600:#002443; --navy-700:#001c35;
  --navy-800:#001528; --navy-900:#000f1d;

  /* ── Verde dell'insegna, quello vero: #80ba27 e #6a971f del logo.
        Regola: il verde e' sempre una superficie, mai un testo. Sopra il verde
        va il blu (#002c50 su #80ba27 fa 6,08:1), non il bianco (2,34:1).
        Cosi' non serve scurirlo, e non diventa oliva. ── */
  --green-50:#f5faea; --green-100:#e8f4cd; --green-200:#cfe79c; --green-300:#aed863;
  --green-400:#80ba27; --green-500:#6a971f; --green-700:#5c8319;
  /* Verde chiaro: si usa per lo stato attivo e il passaggio del mouse.
     Si chiama per quello che e', perche' il vecchio nome --green-600 era piu'
     chiaro del 400 e faceva sbagliare. Il vecchio nome resta come sinonimo. */
  --green-chiaro:#94c93f; --green-600:var(--green-chiaro);
  --green-800:#4a6a14;
  --su-verde:#002c50;   /* il testo che sta sopra il verde */

  /* ── Neutri, appena virati di blu ── */
  --n0:#fff; --n50:#f7f8fa; --n100:#eef0f4; --n200:#dfe2e9; --n300:#c3c8d4;
  --n400:#9aa0b0; --n500:#697084; --n600:#4b5264; --n700:#333a4a; --n800:#1d2330; --n900:#0d1119;

  /* ── Stati ── */
  --ok-bg:#f5faea; --ok:#002c50; --ok-bd:#cfe79c;
  --warn-bg:#fdf6e9; --warn:#8a5d00; --warn-bd:#eedfb8;
  --err-bg:#fdf1f1; --err:#b52525; --err-bd:#eecccc;
  --info-bg:#eef4fb; --info:#1558a8; --info-bd:#cddef2;

  /* ── Tipografia: una sola famiglia ── */
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-md:.875rem; --t-base:.9375rem;
  --t-lg:1.0625rem; --t-xl:1.25rem; --t-2xl:1.5rem; --t-3xl:1.875rem;

  /* ── Spaziature: multipli di 4 ── */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem; --s7:3rem;

  /* ── Raggi: una sola famiglia, niente forme a pastiglia ── */
  --r-xs:4px; --r-sm:6px; --r:8px; --r-lg:12px; --r-xl:16px;

  /* ── Ombre: solo dove un piano sta davvero sopra un altro ── */
  --sh-sm:0 1px 2px rgba(0,21,40,.06);
  --sh-md:0 2px 8px rgba(0,21,40,.08);
  --sh-lg:0 12px 32px rgba(0,21,40,.14);

  --ring:0 0 0 3px rgba(128,186,39,.45);
  --ring-navy:0 0 0 3px rgba(45,98,137,.28);

  --sidebar-w:248px;
  --ease:.15s cubic-bezier(.4,0,.2,1);
}

/* ═══ BASE ═══ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
body{margin:0;font-family:var(--font);font-size:1rem;line-height:1.55;color:var(--n800);background:var(--n50)}
h1,h2,h3,h4{margin:0;line-height:1.25;color:var(--navy-500);font-weight:700;letter-spacing:-.011em}
h1{font-size:var(--t-2xl)} h2{font-size:var(--t-xl)} h3{font-size:var(--t-lg)} h4{font-size:var(--t-base)}
p{margin:0}
a{color:var(--navy-400);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:var(--t-base);color:inherit}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-xs)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ ICONE — Lucide, dal foglio /static/icons.svg. Mai emoji. ═══ */
.ico{width:1.05em;height:1.05em;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em}
.ico-s{width:15px;height:15px} .ico-m{width:18px;height:18px} .ico-l{width:22px;height:22px}
.ico-xl{width:28px;height:28px;stroke-width:1.6}

/* ═══ BOTTONI ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border-radius:var(--r);padding:.6rem 1rem;font-size:var(--t-base);font-weight:600;
  border:1px solid transparent;transition:background var(--ease),border-color var(--ease),color var(--ease);
  white-space:nowrap;line-height:1.3;min-height:40px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:default}
.btn:focus-visible{box-shadow:var(--ring)}
.btn-p{background:var(--green-400);color:var(--su-verde)}
.btn-p:hover:not(:disabled){background:var(--green-chiaro)}
.btn-p:active{background:var(--green-500)}
.btn-n{background:var(--navy-500);color:#fff}
.btn-n:hover:not(:disabled){background:var(--navy-400)}
.btn-n:focus-visible{box-shadow:var(--ring-navy)}
.btn-g{background:var(--n0);border-color:var(--n200);color:var(--n700)}
.btn-g:hover:not(:disabled){background:var(--n50);border-color:var(--n300)}
.btn-d{color:var(--err);border-color:var(--err-bd);background:var(--n0)}
.btn-d:hover:not(:disabled){background:var(--err-bg)}
.btn-t{background:none;color:var(--n500);padding:.35rem .5rem;min-height:32px;border-radius:var(--r-sm)}
.btn-t:hover:not(:disabled){background:var(--n100);color:var(--n700)}
.btn-s{padding:.35rem .65rem;font-size:var(--t-sm);min-height:32px}
.btn-w{width:100%}

/* ═══ CAMPI ═══ */
.fg{margin-bottom:var(--s4)}
.fg label,label.lbl{display:block;font-size:var(--t-xs);font-weight:600;color:var(--n600);
  letter-spacing:.01em;margin-bottom:.35rem}
.inp{width:100%;background:var(--n0);border:1px solid var(--n300);border-radius:var(--r);
  padding:.6rem .75rem;min-height:40px;color:var(--n800);
  transition:border-color var(--ease),box-shadow var(--ease)}
.inp::placeholder{color:var(--n500);opacity:1}
.inp:hover:not(:disabled):not(:focus){border-color:var(--n400)}
.inp:focus{border-color:var(--green-500);box-shadow:var(--ring)}
.inp:disabled{background:var(--n100);color:var(--n500);cursor:default}
.inp-s{padding:.35rem .6rem;min-height:32px;font-size:var(--t-sm)}
select.inp{appearance:none;padding-right:2rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697084' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;background-size:15px}
textarea.inp{min-height:80px;resize:vertical;line-height:1.5}
.hint{font-size:var(--t-sm);color:var(--n500);margin-top:.3rem}
.chk{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--t-md);color:var(--n700);cursor:pointer;line-height:1.5}
.chk input{width:17px;height:17px;margin-top:.12rem;accent-color:var(--green-500);flex:0 0 auto;cursor:pointer}

/* ═══ SCHEDE — bordo, non ombra ═══ */
.card{background:var(--n0);border:1px solid var(--n200);border-radius:var(--r-lg);margin-bottom:var(--s5)}
.card__hd{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--n200)}
.card__ti{display:flex;align-items:center;gap:.5rem;font-size:var(--t-base);font-weight:700;color:var(--navy-500)}
.card__ti .ico{color:var(--n400)}
.card__body{padding:1.25rem}
.card--flag{border-left:3px solid var(--green-400)}

/* ═══ BADGE DI STATO ═══ */
.bs{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-xs);font-weight:600;
  padding:.2rem .5rem;border-radius:var(--r-sm);border:1px solid var(--n200);
  background:var(--n50);color:var(--n600);white-space:nowrap}
.bs-confirmed,.bs-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.bs-completed,.bs-info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.bs-cancelled,.bs-err{background:var(--err-bg);color:var(--err);border-color:var(--err-bd)}
.bs-no_show,.bs-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}

/* ═══ TABELLE ═══ */
table{width:100%;border-collapse:collapse;font-size:var(--t-md)}
thead th{text-align:left;font-size:var(--t-xs);font-weight:600;color:var(--n500);
  letter-spacing:.02em;padding:.6rem 1.25rem;background:var(--n50);
  border-bottom:1px solid var(--n200);white-space:nowrap}
tbody td{padding:.75rem 1.25rem;border-bottom:1px solid var(--n100);vertical-align:middle;color:var(--n700)}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--ease)}
tbody tr:hover{background:var(--n50)}
td .num,td b{color:var(--navy-500);font-weight:700;font-variant-numeric:tabular-nums}

/* ═══ AVVISI ═══ */
.msg{display:flex;gap:.6rem;align-items:flex-start;border-radius:var(--r);padding:.7rem .9rem;
  font-size:var(--t-md);line-height:1.5;border:1px solid transparent}
.msg .ico{margin-top:.12rem}
.msg.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-bd)}
.msg.err{background:var(--err-bg);color:var(--err);border-color:var(--err-bd)}
.msg.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-bd)}
.msg.info{background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}

/* ═══ STATO VUOTO ═══ */
.empty{text-align:center;color:var(--n500);padding:2.5rem 1.25rem;font-size:var(--t-md)}
.empty b{display:block;color:var(--n700);font-size:var(--t-base);margin-bottom:.25rem}
.empty .ico{color:var(--n300);margin-bottom:.6rem}

/* ═══ MODALI ═══ */
.mo{position:fixed;inset:0;background:rgba(0,21,40,.5);display:none;align-items:center;
  justify-content:center;padding:var(--s4);z-index:200}
.mo.open{display:flex}
.mo__box{background:var(--n0);border-radius:var(--r-xl);padding:1.75rem;width:100%;max-width:540px;
  box-shadow:var(--sh-lg);max-height:92vh;overflow-y:auto}
.mo__box h3{margin-bottom:var(--s4)}
.f-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:var(--s5)}

/* ═══ TESTATA DI PAGINA ═══ */
.hdr{background:var(--navy-500);color:#fff;padding:.75rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.hdr img{height:26px;width:auto;display:block}
.hdr .who{font-size:var(--t-md);font-weight:600}
.hdr .who small{display:block;opacity:.7;font-size:var(--t-xs);font-weight:400}
.hdr .btn-g{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.hdr .btn-g:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}

/* ═══ ACCESSO — una sola maschera per le tre aree ═══ */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:var(--s5) var(--s4);background:var(--navy-500)}
.auth__card{background:var(--n0);border-radius:var(--r-xl);box-shadow:var(--sh-lg);
  width:100%;max-width:392px;padding:2.25rem 2rem}
.auth__logo{height:38px;width:auto;margin:0 0 1.5rem;display:block}
.auth__card h1{font-size:var(--t-xl);margin-bottom:.3rem}
.auth__sub{color:var(--n500);font-size:var(--t-md);margin-bottom:1.5rem}
.auth__err{display:none;color:var(--err);font-size:var(--t-sm);margin-top:.75rem}
.auth__err.on{display:block}
.auth__foot{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--n100);
  font-size:var(--t-sm);color:var(--n500)}

/* ═══ SCELTE DEL SITO: giorni, orari, sedi ═══ */
.days{display:flex;gap:.3rem}
.day{flex:1;min-width:0;text-align:center;padding:.5rem .15rem;border-radius:var(--r);
  border:1px solid transparent;background:none;font-size:var(--t-xs);color:var(--n500);
  transition:all var(--ease);line-height:1.3}
.day .n{display:block;font-size:var(--t-lg);font-weight:700;color:var(--n700)}
.day:hover:not(:disabled):not(.on){background:var(--n100)}
.day.on{background:var(--navy-500);color:rgba(255,255,255,.72)}
.day.on .n{color:#fff}
.day:disabled{opacity:.35;cursor:default}
.slot{border:1px solid var(--n300);background:var(--n0);color:var(--n700);border-radius:var(--r);
  padding:.45rem .85rem;font-size:var(--t-md);font-weight:600;font-variant-numeric:tabular-nums;
  transition:all var(--ease);min-height:38px}
.slot:hover:not(.on){border-color:var(--green-500);background:var(--green-50);color:var(--navy-500)}
.slot.on{background:var(--green-400);border-color:var(--green-500);color:var(--su-verde)}
.pick{display:flex;gap:.75rem;align-items:flex-start;width:100%;text-align:left;
  border:1px solid var(--n200);background:var(--n0);border-radius:var(--r-lg);
  padding:.9rem 1rem;transition:all var(--ease)}
.pick:hover:not(.on){border-color:var(--n300);background:var(--n50)}
.pick.on{border-color:var(--green-500);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green-500)}
.pick .ico{color:var(--n400);margin-top:.15rem}
.pick.on .ico{color:var(--green-700)}
.pick b{display:block;color:var(--navy-500);font-size:var(--t-base)}
.pick span{display:block;color:var(--n500);font-size:var(--t-sm);margin-top:.1rem}

/* ═══ PASSI DEL SITO ═══ */
.steps{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);color:var(--n400)}
.steps .st{display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.steps .st i{width:20px;height:20px;border-radius:50%;border:1px solid var(--n300);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-style:normal;font-weight:700}
.steps .st.on{color:var(--navy-500);font-weight:600}
.steps .st.on i{background:var(--navy-500);border-color:var(--navy-500);color:#fff}
.steps .st.done{color:var(--navy-500)}
.steps .st.done i{background:var(--green-400);border-color:var(--green-400);color:var(--su-verde)}
.steps .sep{flex:1;height:1px;background:var(--n200);min-width:12px}

/* ═══ TABELLE STRETTE: scorrono invece di sbordare ═══ */
.t-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.t-scroll table{min-width:520px}

/* ═══ UTILITA' MINIME ═══ */
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.row-e{justify-content:flex-end}
.row-b{justify-content:space-between}
.stack>*+*{margin-top:var(--s3)}
.muted{color:var(--n500)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.g2>*,.g3>*{min-width:0}
@media (max-width:640px){
  .g2,.g3{grid-template-columns:1fr}
  /* i passi si riducono ai pallini: resta scritto solo quello in corso */
  .steps{font-size:0;gap:.35rem}
  .steps .st{font-size:0}
  .steps .st.on{font-size:var(--t-sm)}
  .card__body,.card__hd{padding:1rem}
  thead th,tbody td{padding:.65rem .85rem}
  .auth__card{padding:1.75rem 1.35rem}
  .btn{min-height:44px}
}