/* ============================================================
   PORTALE GENITORE — Mobile-first App UI
   ============================================================ */
:root {
  --pr:    #2563eb;   /* primary blu */
  --pr-d:  #1d4ed8;   /* primary dark */
  --pr-l:  #dbeafe;   /* primary light */
  --bg:    #f2f3f5;   /* sfondo pagina */
  --card:  #ffffff;   /* sfondo card */
  --text:  #1a1e26;   /* testo principale */
  --muted: #6b7280;   /* testo secondario */
  --brd:   #e5e7eb;   /* bordi */
  --grn:   #16a34a;   /* verde successo */
  --grn-l: #dcfce7;
  --red:   #dc2626;   /* rosso errore */
  --red-l: #fee2e2;
  --blu:   #2563eb;   /* blu info */
  --blu-l: #dbeafe;
  --ylw:   #d97706;   /* giallo warning */
  --ylw-l: #fef3c7;
  --nav-h: 64px;      /* altezza bottom nav */
  --hdr-h: 58px;      /* altezza header */
  --safe:  env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after { box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent }
html { height:100%;overscroll-behavior:none }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg); color:var(--text); font-size:15px;
  min-height:100vh; min-height:100dvh;
  display:flex; justify-content:center;
  -webkit-font-smoothing:antialiased;
}
/* ---- App shell ---- */
.app { width:100%; max-width:480px; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; position:relative; }
@media(min-width:520px){ .app { box-shadow:0 0 40px rgba(0,0,0,.10); } }

/* ---- Header ---- */
.app-hdr {
  position:sticky; top:0; z-index:100;
  height:var(--hdr-h); display:flex; align-items:center; gap:10px;
  padding:0 16px; background:var(--pr);
  color:#fff;
}
.app-hdr .back { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; text-decoration:none; flex-shrink:0 }
.app-hdr h1 { flex:1; font-size:17px; font-weight:700; letter-spacing:-.01em }
.app-hdr .hdr-act { display:flex; gap:8px }
.app-hdr .hdr-icon { width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(255,255,255,.18); color:#fff; text-decoration:none; flex-shrink:0 }
.app-hdr svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2;
               stroke-linecap:round; stroke-linejoin:round }

/* ---- Scroll area ---- */
.app-body {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding: 14px 14px calc(var(--nav-h) + var(--safe) + 14px);
  display:flex; flex-direction:column; gap:12px;
}

/* ---- Bottom nav ---- */
.app-nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; z-index:200;
  height:calc(var(--nav-h) + var(--safe));
  padding-bottom:var(--safe);
  background:#fff; border-top:1px solid var(--brd);
  display:flex; align-items:stretch;
  box-shadow:0 -2px 12px rgba(0,0,0,.07);
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px;
  text-decoration:none; color:var(--muted);
  font-size:11px; font-weight:500; padding-bottom:2px;
  transition:color .15s;
}
.nav-item svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8;
                stroke-linecap:round; stroke-linejoin:round; transition:transform .15s }
.nav-item.active { color:var(--pr) }
.nav-item.active svg { transform:scale(1.1) }
.nav-badge { background:var(--red); color:#fff; border-radius:999px;
             font-size:9px; font-weight:700; padding:1px 5px;
             position:absolute; top:6px; margin-left:14px }

/* ---- Card ---- */
.card {
  background:var(--card); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.card-pad { padding:16px }
.card-hdr { padding:14px 16px 0; font-size:12px; font-weight:700;
            text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }

.credit-hero {
  border-radius:16px; padding:22px 20px;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#bbf7d0 0%,#86efac 100%); color:#14532d;
}
.credit-hero::after {
  content:''; position:absolute; right:-30px; top:-30px;
  width:140px; height:140px; border-radius:50%;
  background:rgba(0,0,0,.05);
}
/* ---- Hero credito ---- */
/* Verde pastello — credito positivo */
.credit-hero.pos {
  background:linear-gradient(135deg,#bbf7d0 0%,#86efac 100%);
  color:#14532d;
}
/* Rosso pastello — credito zero o negativo */
.credit-hero.neg {
  background:linear-gradient(135deg,#fecaca 0%,#fca5a5 100%);
  color:#7f1d1d;
}
/* Rosso chiaro — credito in esaurimento (sotto soglia) */
.credit-hero.low {
  background:linear-gradient(135deg,#fee2e2 0%,#fecaca 100%);
  color:#991b1b;
}
/* Rosso — credito esaurito */
.credit-hero.zero {
  background:linear-gradient(135deg,#fecaca 0%,#fca5a5 100%);
  color:#7f1d1d;
}
.credit-lbl { font-size:12px; font-weight:700; opacity:.75; letter-spacing:.04em; text-transform:uppercase }
.credit-amt { font-size:38px; font-weight:800; letter-spacing:-.02em; margin-top:4px; line-height:1 }
.credit-sub { font-size:13px; opacity:.8; margin-top:6px }

/* ---- Meal status card ---- */
.meal-card { padding:16px }
.meal-date { font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px }
.meal-stato { display:flex; align-items:center; gap:10px; margin-bottom:14px }
.meal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.meal-dot.pren    { background:var(--grn) }
.meal-dot.dis     { background:var(--red) }
.meal-dot.cons    { background:var(--blu) }
.meal-dot.no      { background:var(--brd) }
.meal-name { font-size:16px; font-weight:700 }
.meal-menu { font-size:13px; color:var(--muted); margin-top:2px }

/* ---- Buttons ---- */
.btn-full {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:52px; border-radius:14px; border:none;
  font-size:16px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:opacity .15s, transform .1s;
  -webkit-appearance:none;
}
.btn-full:active { transform:scale(.97); opacity:.9 }
.btn-full.red     { background:var(--red); color:#fff }
.btn-full.grn     { background:var(--grn); color:#fff }
.btn-full.orange  { background:var(--pr); color:#fff }
.btn-full.outline { background:#fff; color:var(--pr); border:2px solid var(--pr) }
.btn-full.ghost   { background:var(--bg); color:var(--text) }
.btn-half { flex:1; height:50px; border-radius:12px; border:none;
  font-size:14px; font-weight:700; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:6px;
  text-decoration:none; -webkit-appearance:none }
.btn-half:active { opacity:.85 }
.btn-row { display:flex; gap:10px }

/* ---- Alert / flash ---- */
.flash { padding:12px 14px; border-radius:12px; font-size:14px; font-weight:500;
         display:flex; align-items:flex-start; gap:10px; margin-bottom:4px }
.flash.success { background:var(--grn-l); color:#14532d }
.flash.error   { background:var(--red-l); color:#7f1d1d }
.flash.warning { background:var(--ylw-l); color:#78350f }
.flash.info    { background:var(--blu-l); color:#1e3a8a }
.flash svg     { width:18px; height:18px; flex-shrink:0; margin-top:1px }

/* ---- List rows ---- */
.list-row {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--brd);
  text-decoration:none; color:var(--text);
}
.list-row:last-child { border-bottom:none }
.list-row:active { background:var(--bg) }
.list-icon { width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.li-grn { background:var(--grn-l) } .li-red { background:var(--red-l) }
.li-blu { background:var(--blu-l) } .li-ylw { background:var(--ylw-l) }
.li-gry { background:var(--bg) }
.list-icon svg { width:20px; height:20px; stroke:currentColor; fill:none;
                 stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.li-grn svg { stroke:var(--grn) } .li-red svg { stroke:var(--red) }
.li-blu svg { stroke:var(--blu) } .li-ylw svg { stroke:var(--ylw) }
.list-body { flex:1; min-width:0 }
.list-title { font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.list-sub   { font-size:12px; color:var(--muted); margin-top:1px }
.list-right { font-size:13px; font-weight:700; color:var(--muted); flex-shrink:0 }
.chevron    { width:18px; height:18px; stroke:var(--brd); flex-shrink:0 }

/* ---- Badge ---- */
.tag { display:inline-flex; align-items:center; border-radius:999px;
       padding:3px 10px; font-size:12px; font-weight:700 }
.tag.grn { background:var(--grn-l); color:#14532d }
.tag.red { background:var(--red-l); color:#7f1d1d }
.tag.blu { background:var(--blu-l); color:#1e3a8a }
.tag.ylw { background:var(--ylw-l); color:#78350f }
.tag.gry { background:var(--bg); color:var(--muted) }

/* ---- Section label ---- */
.section-lbl { font-size:12px; font-weight:700; text-transform:uppercase;
               letter-spacing:.06em; color:var(--muted); padding:0 2px; margin-top:4px }

/* ---- Child tabs ---- */
.child-tabs { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch }
.child-tabs::-webkit-scrollbar { display:none }
.child-tab { flex-shrink:0; display:flex; align-items:center; gap:6px;
  border:2px solid var(--brd); border-radius:999px; padding:7px 16px;
  font-size:13px; font-weight:600; color:var(--text); text-decoration:none;
  background:#fff; cursor:pointer; -webkit-appearance:none; }
.child-tab.active { border-color:var(--pr); background:var(--pr); color:#fff }

/* ---- Forms ---- */
.form-field { margin-bottom:12px }
.form-field label { display:block; font-size:13px; font-weight:600; color:var(--muted);
                    margin-bottom:5px; text-transform:uppercase; letter-spacing:.04em }
.form-field input,
.form-field select,
.form-field textarea {
  width:100%; background:#fff; border:2px solid var(--brd);
  border-radius:12px; padding:13px 14px; font-size:16px; color:var(--text);
  outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--pr) }
.form-field textarea { resize:vertical; min-height:90px }
.form-hint { font-size:12px; color:var(--muted); margin-top:5px }

/* ---- Divider ---- */
.divider { height:1px; background:var(--brd); margin:4px 0 }

/* ---- Info row ---- */
.info-row { display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--brd) }
.info-row:last-child { border-bottom:none }
.info-lbl { font-size:13px; color:var(--muted) }
.info-val { font-size:13px; font-weight:600 }

/* ---- Calendar grid ---- */
.cal-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.cal-grid { display:grid!important; grid-template-columns:repeat(7,minmax(40px,1fr));
            gap:3px; min-width:300px }
.cal-hdr  { text-align:center; font-size:10px; font-weight:700; color:var(--muted);
            padding:4px 0; }
.cal-hdr.we { color:var(--brd) }
.cal-day  { border-radius:8px; padding:6px 4px; min-height:56px; font-size:11px;
            background:#fff; border:1.5px solid var(--brd); cursor:default }
.cal-day.d-pren     { background:#f0fdf4; border-color:#86efac }
.cal-day.d-disdetto { background:#fff7ed; border-color:#fed7aa }
.cal-day.d-consumato{ background:#eff6ff; border-color:#93c5fd }
.cal-day.d-chiuso   { background:#fef2f2; border-color:#fca5a5 }
.cal-day.d-fest     { background:#fffbeb; border-color:#fde68a }
.cal-day.we         { background:#f9fafb; border-color:#e5e7eb }
.cal-day.oggi       { border-color:var(--pr)!important; border-width:2px }
.cal-day-n          { font-weight:700; font-size:12px; color:var(--text) }
.cal-day-n.oggi-n   { color:var(--pr) }
.cal-empty          { border-radius:8px; min-height:56px; background:transparent }

/* ---- Skeleton loading ---- */
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:.3} }
.skel { background:var(--brd); border-radius:8px; animation:pulse 1.5s infinite }

/* ---- Modal/Overlay ---- */
.overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300;
           display:flex; align-items:flex-end; justify-content:center }
.sheet { background:#fff; border-radius:20px 20px 0 0; padding:20px 20px calc(20px + var(--safe));
         width:100%; max-width:480px; animation:slideUp .2s ease }
.sheet-handle { width:36px; height:4px; background:var(--brd);
                border-radius:2px; margin:0 auto 16px }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ---- Login ---- */
.login-wrap { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column;
              align-items:center; justify-content:center; padding:24px 20px;
              background:linear-gradient(160deg,#2563eb 0%,#1d4ed8 60%,#1e3a8a 100%) }
.login-box { background:#fff; border-radius:24px; padding:28px 24px; width:100%; max-width:380px;
             box-shadow:0 20px 60px rgba(0,0,0,.2) }
.login-logo { text-align:center; margin-bottom:20px }
.login-logo svg { width:56px; height:56px; stroke:var(--pr); fill:none;
                  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.login-title { font-size:22px; font-weight:800; color:var(--text); text-align:center }
.login-sub   { font-size:14px; color:var(--muted); text-align:center; margin-top:4px; margin-bottom:20px }

/* ---- Scrollbar ---- */
.app-body::-webkit-scrollbar { display:none }

/* ---- Desktop centering ---- */
@media(min-width:520px) {
  body { background:#e0e3e8 }
  .app-nav { left:50%; transform:translateX(-50%) }
}

/* ============================================================
   RESTYLING — data / giorno / pasti / storico
   ============================================================ */

/* Banner "oggi" con data del giorno in evidenza */
.day-banner{ display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,var(--pr) 0%,var(--pr-d) 100%); color:#fff;
  border-radius:16px; padding:14px 16px; box-shadow:0 4px 14px rgba(37,99,235,.26) }
.day-banner .db-num{ width:54px; height:54px; flex-shrink:0; border-radius:13px;
  background:rgba(255,255,255,.18); display:flex; flex-direction:column;
  align-items:center; justify-content:center; line-height:1 }
.day-banner .db-num b{ font-size:26px; font-weight:800 }
.day-banner .db-num small{ font-size:9px; font-weight:700; letter-spacing:.08em; opacity:.9; text-transform:uppercase }
.day-banner .db-lbl{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.85 }
.day-banner .db-day{ font-size:18px; font-weight:800; text-transform:capitalize; margin-top:1px }

/* Badge data compatto (giorno + numero) per le liste pasti */
.date-badge{ width:46px; flex-shrink:0; text-align:center; border-radius:12px;
  padding:6px 0; background:var(--bg); border:1px solid var(--brd) }
.date-badge .db-dow{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--muted) }
.date-badge .db-d{ font-size:20px; font-weight:800; line-height:1; color:var(--text); margin-top:1px }
.date-badge.is-today{ background:var(--pr); border-color:var(--pr) }
.date-badge.is-today .db-dow,.date-badge.is-today .db-d{ color:#fff }

/* Navigatore mese */
.month-nav{ display:flex; align-items:center; justify-content:space-between;
  background:var(--card); border-radius:14px; padding:8px 10px; box-shadow:0 1px 4px rgba(0,0,0,.06) }
.month-nav .mn-btn{ width:38px; height:38px; border-radius:10px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--text); text-decoration:none; flex-shrink:0 }
.month-nav .mn-btn:active{ background:var(--brd) }
.month-nav .mn-btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2 }
.month-nav .mn-title{ font-size:15px; font-weight:800; text-transform:capitalize }

/* Tile statistiche (riepilogo mese) */
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.stat-tile{ background:var(--card); border-radius:14px; padding:12px 8px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.06) }
.stat-tile .st-lbl{ font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--muted) }
.stat-tile .st-val{ font-size:19px; font-weight:800; margin-top:3px }

/* Accento di stato a sinistra sulle card pasto */
.meal-card{ border-left:4px solid var(--brd) }
.meal-card.s-pren{ border-left-color:var(--grn) }
.meal-card.s-dis { border-left-color:var(--red) }
.meal-card.s-cons{ border-left-color:var(--blu) }

/* Timeline storico movimenti */
.timeline{ position:relative }
.tl-item{ position:relative; display:flex; gap:12px; padding:9px 0 }
.tl-item::before{ content:''; position:absolute; left:11px; top:0; bottom:0; width:2px; background:var(--brd) }
.tl-item:first-child::before{ top:16px }
.tl-item:last-child::before{ height:16px; bottom:auto }
.tl-dot{ position:relative; z-index:1; width:24px; height:24px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--card); border:2px solid var(--brd) }
.tl-dot svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.4 }
.tl-dot.pos{ border-color:var(--grn); color:var(--grn) }
.tl-dot.neg{ border-color:var(--red); color:var(--red) }
.tl-body{ flex:1; min-width:0; padding-top:2px }
.tl-title{ font-weight:600; font-size:14px }
.tl-sub{ font-size:12px; color:var(--muted); margin-top:1px }
.tl-amt{ font-size:15px; font-weight:800; flex-shrink:0; padding-top:2px }

/* Card "Installa l'app" (PWA) — in-flusso (dashboard sotto le azioni rapide, login) */
.install-card{ display:flex; align-items:center; gap:12px; position:relative;
  background:var(--pr-l); border:1px solid #bfdbfe; border-radius:16px; padding:13px 14px }
.install-card .ic-ico{ width:44px; height:44px; border-radius:11px; flex-shrink:0 }
.install-card .ic-body{ flex:1; min-width:0; padding-right:14px }
.install-card .ic-title{ font-weight:700; font-size:14px; color:var(--pr-d) }
.install-card .ic-sub{ font-size:12px; color:var(--muted); margin-top:1px }
.install-card .ic-help{ font-size:12px; color:var(--text); margin-top:7px; line-height:1.4 }
.install-card .ic-btn{ flex-shrink:0; background:var(--pr); color:#fff; border:none; border-radius:10px;
  padding:9px 16px; font-size:13px; font-weight:700; cursor:pointer }
.install-card .ic-btn:active{ opacity:.85 }
.install-card .ic-close{ position:absolute; top:5px; right:7px; background:none; border:none;
  color:var(--muted); font-size:18px; line-height:1; cursor:pointer; padding:2px 4px }