/* =======================================================
   K.e.Q — Ripiano ASPETTO
   Colori, Fasce, Pulsanti, Card, Menu, Home, Tablet
   (il FONT sta nel file separato font.css)
   ======================================================= */

/* ---------- Cassetto COLORI (i colori dell'app) ---------- */
:root{
  /* Interfaccia */
  --bg:#0D0D0D; --card:#1A1A1A; --sidebar:#1F1F1F; --muted-bg:#262626;
  --line:#2A2A2A; --warm:#3A2F26;
  /* Brand */
  --gold:#C4956A; --gold-glow:#D4A87B; --gold-dark:#9C7547;
  --sage:#6B8F71; --text:#E8E0D5; --muted:#8A8478;
  /* 6 colori dei protocolli (oro, salvia, tabacco, lavanda, terracotta, arancio) */
  --c-oro:#C4956A;       --c-oro-d:#9C7547;
  --c-salvia:#6B8F71;    --c-salvia-d:#4E6B53;
  --c-tabacco:#7B6E5D;   --c-tabacco-d:#574E42;
  --c-lavanda:#9B7EC8;   --c-lavanda-d:#6E5494;
  --c-terracotta:#C4725A;--c-terracotta-d:#8F4F3D;
  --c-arancio:#E8741A;   --c-arancio-d:#A85311;
  /* Font */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:var(--serif); -webkit-text-size-adjust:100%; }
body{ min-height:100dvh; }
h1,h2,h3{ font-weight:700; margin:0; }
p{ margin:0 0 12px; line-height:1.55; color:var(--text); }

/* ---------- Cassetto BARRA IN ALTO (crest a sinistra + lingua IT/EN a destra) ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center;
  padding:calc(env(safe-area-inset-top,8px) + 10px) 18px 8px;
  background:var(--bg); font-family:var(--serif); }
.topbar .crest{ color:var(--sage); font-size:13px; letter-spacing:2px; opacity:.9; }
.lang{ display:inline-flex; background:#1C2A1F; border-radius:18px; padding:3px; }
.lang button{ border:none; background:none; color:var(--muted); cursor:pointer;
  font-family:var(--serif); font-weight:700; font-size:14px; padding:5px 14px; border-radius:15px; }
.lang button.on{ background:var(--sage); color:#0D0D0D; }

/* ---------- Cassetto FASCE / GRADIENTI ---------- */
/* Fascia del logo (scura -> oro). Si può cambiare colore con --band */
.band{
  position:relative;
  background:linear-gradient(135deg,#1A1A1A 0%, var(--band, var(--gold)) 100%);
  padding:18px 20px 22px;
  text-align:center;
}
.logo{ color:var(--gold); font-size:40px; line-height:1.05; margin-top:10px; }
.tagline{ color:var(--text); opacity:.85; font-style:italic; font-size:14px;
  letter-spacing:1px; margin-top:2px; }

/* ---------- Cassetto CARD ---------- */
.wrap{ padding:18px 16px 40px; max-width:680px; margin:0 auto; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:18px 18px; margin-bottom:14px; }
.card h3{ color:var(--gold); font-size:22px; margin-bottom:4px; }
.card .sub{ color:var(--muted); font-size:14px; }

/* ---------- Cassetto PULSANTI ---------- */
/* Regola K.e.Q: gradient colore -> colore scuro + alone dello stesso colore */
.btn{ display:inline-block; border:none; cursor:pointer; color:#fff;
  font-family:var(--serif); font-weight:700; font-size:16px;
  padding:12px 20px; border-radius:13px; margin:4px 4px 4px 0;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  box-shadow:0 4px 15px rgba(196,149,106,.30); }
.btn:active{ transform:translateY(1px); }
.btn-oro{ background:linear-gradient(135deg,var(--c-oro),var(--c-oro-d)); box-shadow:0 4px 15px rgba(196,149,106,.30); }
.btn-salvia{ background:linear-gradient(135deg,var(--c-salvia),var(--c-salvia-d)); box-shadow:0 4px 15px rgba(107,143,113,.30); }
.btn-tabacco{ background:linear-gradient(135deg,var(--c-tabacco),var(--c-tabacco-d)); box-shadow:0 4px 15px rgba(123,110,93,.30); }
.btn-lavanda{ background:linear-gradient(135deg,var(--c-lavanda),var(--c-lavanda-d)); box-shadow:0 4px 15px rgba(155,126,200,.30); }
.btn-terracotta{ background:linear-gradient(135deg,var(--c-terracotta),var(--c-terracotta-d)); box-shadow:0 4px 15px rgba(196,114,90,.30); }
.btn-arancio{ background:linear-gradient(135deg,var(--c-arancio),var(--c-arancio-d)); box-shadow:0 4px 15px rgba(232,116,26,.30); }

/* pastiglia colore (per mostrare la palette) */
.swatch{ display:inline-block; width:54px; height:54px; border-radius:12px;
  margin:4px; border:1px solid var(--line); vertical-align:middle; }
.swrow{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; }
.swlab{ color:var(--muted); font-size:12px; width:100%; margin-top:2px; }

/* ---------- Cassetto VISTE + MENU IN BASSO (Motore) ---------- */
[hidden]{ display:none !important; }
body{ padding-bottom:calc(env(safe-area-inset-bottom,6px) + 62px); }

.page-head{ text-align:center; padding:24px 20px 8px; }
.page-head h2{ color:var(--gold); font-size:27px; }

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; align-items:center;
  background:#121212; border-top:1px solid var(--line);
  padding:8px 6px calc(env(safe-area-inset-bottom,6px) + 8px);
}
.nav-btn{
  flex:1; border:none; background:none; cursor:pointer;
  color:var(--muted); font-family:var(--serif); font-weight:700; font-size:14px;
  padding:4px 2px;
}
.nav-btn.on{ color:var(--gold); }

/* ---------- Cassetto AVVERTENZE (ⓘ sulla fascia + pagina) ---------- */
/* la ⓘ bianca cerchiata trasparente, in basso a destra della fascia */
.avv-i{ position:absolute; bottom:8px; right:12px; background:none; border:none;
  color:rgba(255,255,255,.92); font-size:24px; line-height:1; padding:4px; cursor:pointer;
  font-family:Georgia,serif; }

/* la pagina avvertenza (nascosta finché non serve) */
#keqAvvOv{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999;
  background:var(--bg); display:none; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
#keqAvvOv.show{ display:flex; }
#keqAvvOv .kb{ background:linear-gradient(135deg,#1A1A1A 0%, var(--gold) 100%);
  padding:28px 20px 20px; text-align:center; }
#keqAvvOv .kb-lg{ color:#F3E9DB; font-size:34px; font-weight:700; }
#keqAvvOv .kb-tg{ color:#F3E9DB; opacity:.85; font-style:italic; font-size:13px; margin-top:2px; }
#keqAvvOv .kc{ padding:22px 22px 34px; max-width:680px; margin:0 auto; width:100%; }
#keqAvvOv h2{ color:var(--gold); font-size:25px; margin:0 0 14px; }
#keqAvvOv p{ color:#D9D1C5; font-size:15px; line-height:1.6; text-align:justify; margin:0 0 18px; }
#keqAvvOv .avv-ok{ display:block; width:100%; color:#fff; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  padding:15px; border-radius:14px; font-size:17px; font-weight:700;
  font-family:var(--serif); box-shadow:0 6px 16px rgba(196,149,106,.32); }

/* ---------- Cassetto HOME (filtri categoria + carte protocolli) ---------- */
.cat-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 14px; }
.cat-pill{ border:none; cursor:pointer; font-family:var(--serif); font-weight:700; font-size:15px;
  padding:7px 16px; border-radius:18px; background:#262626; color:var(--muted); }

.proto-grid{ display:flex; flex-wrap:wrap; gap:12px; }
.proto-card{ flex:0 1 calc(50% - 6px); box-sizing:border-box;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px; text-align:left;
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:15px 14px;
  cursor:pointer; font-family:var(--serif); min-height:92px; }
.proto-badge{ font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  padding:3px 9px; border-radius:9px; }
.proto-name{ color:var(--text); font-size:18px; font-weight:700; line-height:1.18; }

/* tasto Indietro sulla pagina-protocollo */
.proto-back{ position:absolute; top:10px; left:12px; background:none; border:none;
  color:#F3E9DB; font-family:var(--serif); font-weight:700; font-size:15px; cursor:pointer; }

/* ---------- Cassetto TABLET / schermi larghi ---------- */
@media (min-width: 700px) {
  .wrap { max-width: 860px; }
  .proto-card { flex-basis: calc(33.333% - 8px); }   /* 3 colonne invece di 2 */
  .bottom-nav { justify-content: center; gap: 48px; }
  .nav-btn { flex: 0 0 auto; }
}

/* ---------- Cassetto PROTOCOLLO (passi, frasi, note) ---------- */
.proto-sec{ margin:2px 0 4px; }
.proto-h{ color:var(--gold); font-size:18px; font-weight:700; margin:16px 0 9px; }
.proto-steps{ margin:0; padding-left:24px; }
.proto-steps li{ color:var(--text); margin:0 0 10px; line-height:1.45; font-size:16px; }
.proto-frase{ background:var(--card); border-left:3px solid var(--gold); border-radius:9px;
  padding:11px 14px; margin:0 0 9px; color:var(--text); font-style:italic; font-size:16px; line-height:1.4; }
.proto-note{ background:var(--warm); border-radius:13px; padding:13px 15px; margin:16px 0 0;
  color:#CFC7BA; font-size:14.5px; line-height:1.5; }
.proto-note-t{ color:var(--gold); font-weight:700; font-size:13px; text-transform:uppercase;
  letter-spacing:.5px; margin-bottom:5px; }