/* Portale Enoteca Italiana — tema vino, mobile-first
   Sistema di design: token (colori, spazi, raggi, ombre, tempi) + componenti. */

:root {
  /* Colori del marchio */
  --bordeaux: #5c1a27;
  --bordeaux-scuro: #451320;
  --bordeaux-chiaro: #7b2334;
  --bordeaux-tinta: #f6ecee;          /* sfondo tenue bordeaux */
  --oro: #c9a227;
  --oro-chiaro: #dbb63a;
  --oro-scuro: #a16207;               /* oro leggibile come testo (4.6:1 su bianco) */
  --oro-tinta: #fbf4df;
  --crema: #faf6f0;
  --crema-scura: #f1e9dd;
  --carta: #ffffff;
  --inchiostro: #2d1a1e;
  --attenuato: #6d5f58;               /* 5.6:1 su crema */
  --bordo: #e8ddd0;
  --bordo-forte: #d6c7b6;
  --ok: #2e7d32;      --ok-tinta: #e9f4ea;
  --errore: #b3261e;  --errore-tinta: #fbecea;
  --attesa: #a16207;  --attesa-tinta: #f4eedd;
  --avorio: #f5e9d6;                  /* testo su bordeaux */

  /* Spazi (scala 4/8) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;

  /* Forme e ombre */
  --raggio-sm: 8px; --raggio: 12px; --raggio-lg: 16px; --raggio-xl: 22px;
  --ombra: 0 1px 2px rgba(69, 19, 32, 0.05), 0 4px 14px rgba(69, 19, 32, 0.06);
  --ombra-alta: 0 10px 30px rgba(69, 19, 32, 0.14);

  /* Tempi */
  --t-rapida: 140ms; --t: 220ms; --curva: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Tipografia */
  --font-titoli: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-testo: "Karla", "Segoe UI", Arial, sans-serif;
  --barra-h: 64px;                    /* barra di navigazione in basso (telefono) */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--crema);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

h1, h2, h3, h4 { font-family: var(--font-titoli); color: var(--bordeaux); line-height: 1.2; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.8rem); margin: 0.9rem 0 0.4rem; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem); margin: 1.1rem 0 0.5rem; }
h3 { font-size: 1.1rem; margin: 1.1rem 0 0.5rem; }
p { margin: 0.6rem 0; }
small { font-size: 0.85em; }

a { color: var(--bordeaux-chiaro); text-underline-offset: 2px; transition: color var(--t-rapida); }
a:hover { color: var(--bordeaux); }

img { max-width: 100%; height: auto; }
.icona { flex-shrink: 0; vertical-align: -0.2em; }

.contenitore {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) { .contenitore { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); } }

main.contenitore { flex: 1; padding-bottom: var(--s-10); }
body.con-barra main.contenitore { padding-bottom: calc(var(--barra-h) + var(--s-6) + env(safe-area-inset-bottom)); }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--oro); color: var(--bordeaux-scuro);
  padding: 8px 16px; z-index: 100; border-radius: 0 0 6px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--oro-scuro); outline-offset: 2px; border-radius: 4px; }

/* ---------- Header ---------- */

.sito-header {
  background: var(--bordeaux);
  color: var(--avorio);
  box-shadow: 0 1px 6px rgba(69, 19, 32, 0.18);
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
}
.header-int { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; gap: 8px; min-height: 60px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--avorio); text-decoration: none; min-height: 44px; }
.logo-img { display: block; height: 40px; width: auto; max-width: min(56vw, 220px); object-fit: contain; }
.logo-testo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-titoli); font-size: 1.2rem; font-weight: 700; letter-spacing: 0.3px; }
.logo-icona { color: var(--oro); }
.logo:hover { color: var(--oro); }
@media (min-width: 860px) { .logo-img { height: 54px; max-width: 300px; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(245, 233, 214, 0.08); border: 1px solid rgba(245, 233, 214, 0.35); border-radius: var(--raggio-sm);
  color: var(--avorio); padding: 8px; min-width: 44px; min-height: 44px; cursor: pointer;
  transition: background var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida);
}
.nav-toggle:hover, .nav-toggle.attivo { border-color: var(--oro); color: var(--oro); background: rgba(245, 233, 214, 0.12); }
.nav-toggle:active { background: rgba(245, 233, 214, 0.2); }

.nav-principale { display: none; flex-direction: column; width: 100%; padding: 4px 0 10px; gap: 2px; max-height: calc(100dvh - 120px); overflow-y: auto; }
.nav-principale.aperta { display: flex; animation: scendi var(--t) var(--curva); }
@keyframes scendi { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.nav-principale a {
  color: var(--avorio); text-decoration: none; padding: 12px 14px; border-radius: var(--raggio-sm);
  min-height: 48px; display: flex; align-items: center; font-weight: 500;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.nav-principale a:hover { background: rgba(245, 233, 214, 0.12); color: var(--oro); }
.nav-principale a:active { background: rgba(245, 233, 214, 0.2); }
.nav-principale a.attivo { color: var(--oro); font-weight: 700; background: rgba(0, 0, 0, 0.18); }
.nav-principale a.nav-cta {
  background: var(--oro); color: var(--bordeaux-scuro); font-weight: 700; justify-content: center; margin-top: 6px;
}
.nav-principale a.nav-cta:hover, .nav-principale a.nav-cta.attivo { background: var(--oro-chiaro); color: var(--bordeaux-scuro); }

/* Telefono: il menu completo è un foglio che sale dal basso, sopra la barra */
@media (max-width: 859px) {
  body.con-barra .nav-toggle { display: none; }
  body.con-barra .nav-principale.aperta {
    position: fixed; left: 8px; right: 8px; bottom: calc(var(--barra-h) + env(safe-area-inset-bottom) + 8px); z-index: 70;
    background: var(--bordeaux); border-radius: var(--raggio-lg); padding: 10px; box-shadow: var(--ombra-alta);
    max-height: calc(100dvh - var(--barra-h) - 120px); animation: sali var(--t) var(--curva);
  }
  /* lo scrim sta SOTTO l'header (z 50): il foglio del menu vive dentro l'header e deve restare toccabile */
  body.menu-aperto::after { content: ''; position: fixed; inset: 0; background: rgba(45, 26, 30, 0.45); z-index: 45; }
  body.con-barra .nav-principale.aperta a { min-height: 46px; padding: 9px 14px; }
  @keyframes sali { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Desktop e tablet largo: header a due righe (logo e strumenti sopra, voci di menu sotto, mai a capo) */
.solo-desktop-nav { display: none; }
@media (min-width: 860px) {
  .nav-toggle, .solo-mobile-nav { display: none !important; }
  .solo-desktop-nav { display: block; }
  .header-int { padding-top: 6px; padding-bottom: 0; row-gap: 0; }
  .nav-principale {
    display: flex !important; flex-direction: row; width: 100%; order: 10; align-items: center; gap: 2px;
    padding: 2px 0 6px; max-height: none; overflow: visible; animation: none; flex-wrap: nowrap;
  }
  .nav-principale a { padding: 7px 11px; min-height: 40px; font-size: 0.95rem; white-space: nowrap; }
  .nav-principale a.attivo { background: rgba(0, 0, 0, 0.2); }
  .nav-principale a.nav-cta { margin: 0 4px 0 6px; padding: 7px 16px; }
  .account-menu { position: relative; margin-left: auto; }
  .account-menu summary {
    list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; min-height: 40px; border-radius: var(--raggio-sm);
    color: var(--avorio); font-weight: 500; font-size: 0.95rem; cursor: pointer; white-space: nowrap; transition: background var(--t-rapida), color var(--t-rapida);
  }
  .account-menu summary::-webkit-details-marker { display: none; }
  .account-menu summary:hover, .account-menu[open] summary { background: rgba(245, 233, 214, 0.12); color: var(--oro); }
  .account-menu summary.attivo { color: var(--oro); }
  .account-freccia { font-size: 0.7rem; opacity: 0.8; }
  .account-voci {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; z-index: 90;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-alta); padding: 6px; animation: scendi var(--t) var(--curva);
  }
  .account-voci a { color: var(--inchiostro) !important; display: flex; min-height: 42px; padding: 8px 12px !important; border-radius: var(--raggio-sm); }
  .account-voci a:hover { background: var(--crema); color: var(--bordeaux) !important; }
  .account-voci a.attivo { background: var(--oro-tinta) !important; color: var(--bordeaux) !important; font-weight: 700; }
}
@media (min-width: 860px) and (max-width: 1099px) {
  /* Con Presskit, Documenti e WineCard nel menu le voci possono andare su due righe */
  .nav-principale { flex-wrap: wrap; row-gap: 0; }
  .nav-principale a { padding: 6px 8px; min-height: 36px; font-size: 0.9rem; }
  .nav-principale a.nav-cta { padding: 6px 13px; }
  .logo-img { height: 44px; }
}
.nav-principale a.nav-esterno svg { opacity: 0.75; vertical-align: -1px; }

/* ---------- Barra di navigazione in basso (telefono) ---------- */

.barra-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(var(--barra-h) + env(safe-area-inset-bottom));
  padding: 0 8px env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordo); box-shadow: 0 -4px 16px rgba(69, 19, 32, 0.08);
}
.barra-mobile a, .barra-mobile button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--barra-h); min-width: 44px; padding: 6px 2px 8px; margin: 0;
  background: none; border: 0; font: inherit; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1px;
  color: var(--attenuato); text-decoration: none; cursor: pointer; border-radius: var(--raggio-sm);
  transition: color var(--t-rapida), background var(--t-rapida);
}
.barra-mobile a:active, .barra-mobile button:active { background: var(--crema-scura); }
.barra-mobile .attivo { color: var(--bordeaux); }
.barra-mobile .attivo .icona { stroke-width: 2.4; }
.barra-mobile .barra-cta { color: var(--bordeaux); }
.barra-cta-cerchio {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-top: -22px;
  border-radius: 50%; background: var(--oro); color: var(--bordeaux-scuro);
  box-shadow: 0 6px 16px rgba(201, 162, 39, 0.45), 0 0 0 4px var(--carta);
  transition: transform var(--t-rapida), background var(--t-rapida);
}
.barra-cta:active .barra-cta-cerchio { transform: scale(0.94); background: var(--oro-chiaro); }
@media (min-width: 860px) { .barra-mobile { display: none; } body.con-barra main.contenitore { padding-bottom: var(--s-10); } }

/* Lente di ricerca nell'header (telefono e desktop) */
.header-cerca { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--raggio-sm); color: var(--avorio); margin-left: auto; transition: background var(--t-rapida), color var(--t-rapida); }
.header-cerca:hover { color: var(--oro); background: rgba(245, 233, 214, 0.12); }
/* Desktop: lente e campanella insieme a destra, allineate al centro del logo */
@media (min-width: 860px) {
  .header-cerca { order: 2; margin-left: auto; }
  .campanella-box { order: 3; margin-left: 4px; }
}

/* ---------- Campanella e notifiche ---------- */
.campanella-box { position: relative; display: inline-flex; }
.campanella {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  background: none; border: 0; border-radius: var(--raggio-sm); color: var(--avorio); cursor: pointer; padding: 0;
  transition: background var(--t-rapida), color var(--t-rapida);
}
.campanella:hover, .campanella[aria-expanded="true"] { color: var(--oro); background: rgba(245, 233, 214, 0.12); }
.campanella.suona .icona { animation: scampanella 0.9s ease-in-out; transform-origin: 50% 10%; }
@keyframes scampanella { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.campanella-badge {
  position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--errore); color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--bordeaux);
}
.pannello-notifiche[hidden] { display: none !important; }
.pannello-notifiche {
  position: fixed; left: 8px; right: 8px; top: calc(64px + env(safe-area-inset-top)); z-index: 80;
  background: var(--carta); color: var(--inchiostro); border: 1px solid var(--bordo); border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-alta); max-height: min(70vh, 560px); display: flex; flex-direction: column; animation: scendi var(--t) var(--curva);
}
@media (min-width: 720px) { .pannello-notifiche { position: absolute; left: auto; right: 0; top: 50px; width: 380px; } }
.pannello-testata { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--bordo); }
.pannello-azioni { display: flex; gap: 4px; }
.pannello-link { background: none; border: 0; color: var(--bordeaux-chiaro); font: 600 0.82rem var(--font-testo); cursor: pointer; padding: 8px; min-height: 36px; border-radius: 8px; }
.pannello-link:hover { background: var(--crema); }
.pannello-elenco { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.pannello-vuoto { padding: 18px 14px; color: var(--attenuato); font-size: 0.9rem; text-align: center; }
.pannello-tutte { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--bordo); font-weight: 600; text-decoration: none; font-size: 0.9rem; min-height: 44px; }
.notifiche-elenco { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 8px; }
.notifica a {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; text-decoration: none; color: var(--inchiostro);
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); transition: background var(--t-rapida);
}
.pannello-elenco .notifica a { border: 0; border-radius: 0; border-bottom: 1px solid var(--bordo); }
.notifica a:hover { background: var(--crema); color: var(--inchiostro); }
.notifica.nuova a { background: var(--oro-tinta); }
.notifica.nuova .notifica-corpo strong::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--errore); margin-right: 6px; vertical-align: 1px; }
.notifica-icona { color: var(--bordeaux-chiaro); flex-shrink: 0; margin-top: 2px; }
.notifica-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notifica-corpo strong { color: var(--bordeaux); font-size: 0.95rem; }
.notifica-testo { font-size: 0.88rem; color: var(--inchiostro); overflow-wrap: anywhere; }
.notifica-corpo small { font-size: 0.76rem; }

/* ---------- Ricerca ---------- */
.ricerca-form { padding: 14px 16px; }
.ricerca-barra { display: flex; align-items: center; gap: 8px; }
.ricerca-barra .ricerca-icona { color: var(--attenuato); flex-shrink: 0; }
.ricerca-barra input[type="search"] {
  flex: 1; min-width: 0; font: 1rem var(--font-testo); color: var(--inchiostro); padding: 10px 12px; min-height: 46px;
  border: 1.5px solid var(--bordo-forte); border-radius: 10px; background: var(--carta); -webkit-appearance: none; appearance: none;
}
.ricerca-barra input[type="search"]:focus { border-color: var(--bordeaux-chiaro); outline: none; box-shadow: 0 0 0 3px rgba(123, 35, 52, 0.18); }
.ricerca-home { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); padding: 10px 12px; margin: 18px 0 4px; box-shadow: var(--ombra); }
.ricerca-filtri { margin-top: 10px; }
.ricerca-filtri summary { font-size: 0.9rem; min-height: 36px; }
.ricerca-griglia { display: grid; gap: 10px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 4px; }
@media (min-width: 720px) { .ricerca-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ricerca-griglia .campo { margin-bottom: 4px; }

/* ---------- Flash ---------- */

.flash {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--raggio);
  margin: 14px 0; border: 1px solid; border-left-width: 4px; font-weight: 500; box-shadow: var(--ombra); background: var(--carta);
}
.flash-icona { margin-top: 2px; }
.flash-ok { background: var(--ok-tinta); border-color: #bcd9bf; border-left-color: var(--ok); color: #1f5b23; }
.flash-errore { background: var(--errore-tinta); border-color: #f0c4c0; border-left-color: var(--errore); color: #8f1e17; }
.flash-info { background: var(--attesa-tinta); border-color: #e2d4a8; border-left-color: var(--oro-scuro); color: #7a4a05; }
.flash a { color: inherit; font-weight: 700; }

/* ---------- Hero ---------- */

.hero {
  background: linear-gradient(160deg, var(--bordeaux) 0%, var(--bordeaux-scuro) 100%);
  color: var(--avorio); border-radius: var(--raggio-lg); padding: 28px 22px; margin-top: 18px; box-shadow: var(--ombra-alta);
}
.hero h1 { color: var(--oro); margin: 0 0 8px; }
.hero p { margin: 0 0 16px; max-width: 60ch; }
.hero .azioni { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-testo); font-size: 1rem; font-weight: 600; line-height: 1.2;
  padding: 10px 20px; min-height: 44px; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida), box-shadow var(--t-rapida);
}
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--oro); color: var(--bordeaux-scuro); }
.btn-primario:hover { background: var(--oro-chiaro); color: var(--bordeaux-scuro); }
.btn-secondario { background: var(--bordeaux); color: var(--avorio); }
.btn-secondario:hover { background: var(--bordeaux-chiaro); color: #fff; }
.btn-contorno { background: var(--carta); border-color: var(--bordeaux); color: var(--bordeaux); }
.btn-contorno:hover { background: var(--bordeaux); color: var(--avorio); }
.btn-piccolo { font-size: 0.875rem; padding: 7px 14px; min-height: 38px; border-radius: 9px; }
.btn-pericolo { background: var(--carta); border-color: var(--errore); color: var(--errore); }
.btn-pericolo:hover { background: var(--errore); color: #fff; }
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (max-width: 640px) { .btn-piccolo { min-height: 42px; padding: 8px 14px; } }

/* ---------- Card ---------- */

.card {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg);
  padding: 16px; margin: 12px 0;
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }
@media (min-width: 720px) { .card { padding: 18px 20px; } }

.griglia-2 { display: grid; gap: 16px; }
@media (min-width: 720px) { .griglia-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Badge sala / stato ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; color: #fff; letter-spacing: 0.4px; line-height: 1.5; white-space: nowrap;
}
.badge-sopra { background: var(--oro-scuro); }
.badge-sotto { background: var(--bordeaux-chiaro); }
.badge-entrambe { background: linear-gradient(100deg, var(--oro-scuro) 0%, var(--oro-scuro) 45%, var(--bordeaux-chiaro) 55%, var(--bordeaux-chiaro) 100%); }

/* Tendina "Dettagli" negli elenchi */
.dettagli-tendina { margin-top: 2px; }
.dettagli-tendina summary {
  cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--bordeaux-chiaro);
  list-style: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
}
.dettagli-tendina summary::-webkit-details-marker { display: none; }
.dettagli-tendina summary::before {
  content: ''; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--t-rapida);
}
.dettagli-tendina[open] summary::before { transform: rotate(90deg); }
.dettagli-tendina p {
  margin: 4px 0 0; padding: 8px 10px; font-size: 0.84rem; white-space: pre-line;
  background: var(--crema); border: 1px solid var(--bordo); border-radius: var(--raggio-sm); max-width: 48ch;
}

/* Contatore accanto a una voce (es. scadenze) */
.nav-conteggio {
  display: inline-flex; align-items: center; justify-content: center; margin-left: 6px;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--errore); color: #fff; font-size: 0.7rem; font-weight: 700; vertical-align: middle;
}

.badge-periodo { background: transparent; border: 1px solid var(--bordeaux-chiaro); color: var(--bordeaux-chiaro); font-size: 0.72rem; font-weight: 600; }

.badge-scadenza { border: 1px solid; background: transparent; font-size: 0.72rem; }
.scadenza-superata { color: #fff; background: var(--errore); border-color: var(--errore); }
.scadenza-vicina { color: var(--oro-scuro); border-color: var(--oro-scuro); }
.scadenza-ok { color: var(--attenuato); border-color: var(--bordo-forte); }

tr.riga-attiva td { background: var(--oro-tinta); }
tr.riga-scaduta td { background: #fdf1f0; }
@media (max-width: 1199px) {
  /* in modalità schede il colore va sull'intera scheda, non sui singoli campi */
  table.schede-mobile tr.riga-attiva td, table.schede-mobile tr.riga-scaduta td { background: none; }
  table.schede-mobile tr.riga-attiva { border-color: var(--oro); background: var(--oro-tinta); }
  table.schede-mobile tr.riga-scaduta { border-color: #f0c4c0; background: #fdf1f0; }
}

.commenti-badge {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; margin-left: 4px;
  background: var(--oro); color: var(--bordeaux-scuro); text-decoration: none;
  border-radius: 999px; padding: 3px 9px; min-height: 24px; font-size: 0.72rem; font-weight: 700; line-height: 1.4;
  transition: background var(--t-rapida), transform var(--t-rapida);
}
a.commenti-badge:hover { background: var(--oro-chiaro); color: var(--bordeaux-scuro); }
a.commenti-badge:active { transform: scale(0.95); }
@media (max-width: 640px) { .calendario .commenti-badge { display: none; } }
.badge-stato { border: 1px solid; background: var(--carta); }
.badge-in_attesa { color: var(--attesa); border-color: var(--attesa); background: var(--attesa-tinta); }
.badge-confermata { color: var(--ok); border-color: var(--ok); background: var(--ok-tinta); }
.badge-annullata, .badge-rifiutata { color: var(--errore); border-color: var(--errore); background: var(--errore-tinta); }

.avviso-inline { color: var(--errore); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Calendario ---------- */

.cal-testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; }
.cal-testata h1, .cal-testata h2 { margin: 0; }
.cal-nav { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .cal-testata { margin-top: 14px; }
  .cal-nav { width: 100%; }
  .cal-nav .btn { flex: 1 1 auto; }
}

.cal-filtri { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: none; }
.cal-filtri::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .cal-filtri { margin: 0 0 12px; padding: 0; flex-wrap: wrap; } }
.cal-filtri a {
  font-size: 0.875rem; font-weight: 600; text-decoration: none; padding: 8px 16px; min-height: 40px; white-space: nowrap;
  display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--bordo); background: var(--carta); color: var(--attenuato);
  transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.cal-filtri a:active { background: var(--crema-scura); }
.cal-filtri a.attivo { border-color: var(--bordeaux); background: var(--bordeaux); color: var(--avorio); }

.calendario { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); overflow: hidden; table-layout: fixed; box-shadow: var(--ombra); }
.calendario th {
  background: var(--crema); color: var(--bordeaux); font-weight: 700; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 1px; padding: 10px 4px; border-bottom: 1px solid var(--bordo);
}
.calendario td { border-right: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); vertical-align: top; height: 96px; padding: 5px; transition: background var(--t-rapida); }
.calendario td:last-child { border-right: 0; }
.calendario tr:last-child td { border-bottom: 0; }
.calendario td.fuori-mese { background: var(--crema); }
.calendario td.oggi { background: var(--oro-tinta); box-shadow: inset 0 0 0 2px var(--oro); }
.cal-giorno-num { font-size: 0.82rem; font-weight: 700; color: var(--attenuato); display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; margin-bottom: 3px; text-decoration: none; }
.cal-giorno-num:hover { background: var(--crema-scura); color: var(--bordeaux); }
.oggi .cal-giorno-num { background: var(--oro); color: var(--bordeaux-scuro); }

.cal-evento {
  display: block; font-size: 0.72rem; line-height: 1.25; color: #fff; text-decoration: none;
  border-radius: 6px; padding: 3px 7px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: filter var(--t-rapida);
}
.cal-evento:hover { filter: brightness(1.12); color: #fff; }

.cal-pren {
  display: block; font-size: 0.72rem; line-height: 1.2; color: var(--inchiostro); text-decoration: none;
  background: var(--carta); border: 1.5px solid; border-radius: 6px; padding: 2px 6px; margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-pren:hover { background: var(--crema); color: var(--inchiostro); }
.cal-pren-entrambe { border-image: linear-gradient(90deg, var(--oro-scuro), var(--bordeaux-chiaro)) 1; }

@media (max-width: 640px) {
  .calendario { border-radius: var(--raggio); }
  .calendario th { padding: 8px 2px; font-size: 0.66rem; }
  .calendario td { height: 58px; padding: 3px 2px; text-align: center; }
  .cal-giorno-num { margin-bottom: 2px; min-width: 28px; height: 28px; }
  .cal-evento { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 1px 1.5px 0; }
  .cal-pren { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin: 1px 1.5px 0; background: transparent; border-width: 2px; }
}

.cal-legenda { display: flex; gap: 10px 18px; flex-wrap: wrap; margin: 12px 0; font-size: 0.85rem; color: var(--attenuato); }
.cal-legenda .pallino { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* ---------- Fascia eventi ---------- */

.eventi-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 12px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 8px; margin-bottom: 6px;
}
.evento-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg);
  box-shadow: var(--ombra); padding: 14px 16px; text-decoration: none; color: var(--inchiostro);
  scroll-snap-align: start; min-height: 44px; transition: border-color var(--t-rapida), transform var(--t-rapida);
}
.evento-card:hover { border-color: var(--bordeaux-chiaro); color: var(--inchiostro); }
.evento-card-data { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--oro-scuro); }
.evento-card-titolo { font-family: var(--font-titoli); font-size: 1.05rem; color: var(--bordeaux); line-height: 1.25; }
.evento-card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: var(--attenuato); margin-top: auto; }

/* ---------- Elenco eventi ---------- */

.evento-riga {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg);
  padding: 14px 16px; margin: 10px 0; box-shadow: var(--ombra);
}
.evento-data {
  flex-shrink: 0; text-align: center; background: var(--crema); border: 1px solid var(--bordo);
  border-radius: var(--raggio-sm); padding: 8px 10px; min-width: 62px;
}
.evento-data .giorno { display: block; font-family: var(--font-titoli); font-size: 1.4rem; font-weight: 700; color: var(--bordeaux); line-height: 1; }
.evento-data .mese { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--attenuato); margin-top: 3px; }
.evento-corpo { flex: 1; min-width: 0; }
.evento-corpo h3 { margin: 0 0 4px; }
.evento-corpo h3 a { text-decoration: none; }
.evento-meta { font-size: 0.875rem; color: var(--attenuato); margin: 4px 0; display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Form ---------- */

form.modulo { max-width: 560px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; margin-bottom: 6px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: var(--font-testo); font-size: 1rem; color: var(--inchiostro);
  padding: 10px 12px; min-height: 46px; border: 1.5px solid var(--bordo-forte); border-radius: 10px; background: var(--carta);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.campo select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d5f58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px; }
.campo textarea { min-height: 96px; resize: vertical; }
.campo input[type="checkbox"], .campo input[type="radio"] {
  width: auto; min-height: 0; min-width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: -5px; accent-color: var(--bordeaux);
}
.campo label input[type="checkbox"] + * { vertical-align: middle; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--bordeaux-chiaro); outline: none; box-shadow: 0 0 0 3px rgba(123, 35, 52, 0.18); }
.campo input[aria-invalid="true"], .campo input.errore { border-color: var(--errore); }
.campo .aiuto, .aiuto { font-size: 0.82rem; color: var(--attenuato); margin-top: 4px; }
.campi-orizzontali { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .campi-orizzontali { grid-template-columns: 1fr; } }
input[type="date"], input[type="time"] { min-width: 0; }

/* ---------- Tabelle ---------- */

.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.dati { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); box-shadow: var(--ombra); font-size: 0.9rem; overflow: hidden; }
table.dati th { background: var(--crema); color: var(--bordeaux); text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--bordo); white-space: nowrap; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; }
table.dati td { padding: 11px 12px; border-bottom: 1px solid var(--bordo); vertical-align: top; }
table.dati tr:last-child td { border-bottom: none; }
table.dati tbody tr { transition: background var(--t-rapida); }
table.dati tbody tr:hover td { background: #fdfbf7; }
/* Scadenze: badge con sotto il campo per prorogare */
.cella-scadenza .badge { margin-bottom: 6px; }
.proroga-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.proroga-form input[type="date"] { font: 0.9rem var(--font-testo); padding: 6px 8px; min-height: 38px; border: 1.5px solid var(--bordo-forte); border-radius: 9px; background: var(--carta); width: 150px; max-width: 100%; }
@media (min-width: 1200px) { .cella-scadenza { min-width: 170px; } .badge-scadenza { white-space: normal; } }

/* Tabella vera (da 1200 px): colonne con respiro, azioni su due righe al massimo */
@media (min-width: 1200px) {
  table.schede-mobile td[data-etichetta=""] { min-width: 196px; }
  table.schede-mobile td[data-etichetta="Orario"] { white-space: nowrap; }
  table.schede-mobile td[data-etichetta="Data"] { min-width: 120px; }
  table.schede-mobile td[data-etichetta="Cliente"] { min-width: 200px; }
  table.schede-mobile td[data-etichetta="Recapiti"] { min-width: 118px; }
  table.schede-mobile td[data-etichetta="Recapiti"] small { overflow-wrap: anywhere; }
}

/* Tabelle larghe: sotto i 1200 px diventano schede, così il testo non si spezza una parola per riga */
@media (min-width: 641px) and (max-width: 1199px) {
  table.schede-mobile { display: block; border: none; background: none; box-shadow: none; overflow: visible; }
  table.schede-mobile thead { display: none; }
  table.schede-mobile tbody { display: block; }
  table.schede-mobile tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; align-items: start;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); box-shadow: var(--ombra); margin-bottom: 12px; padding: 14px 18px;
  }
  table.schede-mobile tbody tr:hover td { background: none; }
  table.schede-mobile td { display: block; border: none; padding: 0; line-height: 1.45; }
  table.schede-mobile td[data-etichetta]:not([data-etichetta=""])::before {
    content: attr(data-etichetta); display: block; margin-bottom: 2px;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--attenuato);
  }
  table.schede-mobile td[data-etichetta="Cliente"], table.schede-mobile td[data-etichetta="File"],
  table.schede-mobile td[data-etichetta="Descrizione"], table.schede-mobile td[data-etichetta="Dettaglio"], table.schede-mobile td[data-etichetta="Note"] { grid-column: 1 / -1; }
  table.schede-mobile td[data-etichetta=""] { grid-column: 1 / -1; padding-top: 10px; border-top: 1px dashed var(--bordo); }
  table.schede-mobile td .badge, table.schede-mobile td .commenti-badge { margin: 2px 4px 2px 0; }
  table.schede-mobile td[style*="min-width"] { min-width: 0 !important; }
}

@media (max-width: 640px) {
  table.schede-mobile { display: block; border: none; background: none; box-shadow: none; overflow: visible; }
  table.schede-mobile thead { display: none; }
  table.schede-mobile tbody { display: block; }
  table.schede-mobile tr {
    display: block; background: var(--carta); border: 1px solid var(--bordo);
    border-radius: var(--raggio-lg); box-shadow: var(--ombra); margin-bottom: 12px; padding: 8px 0;
  }
  table.schede-mobile tbody tr:hover td { background: none; }
  table.schede-mobile td { display: block; border: none; padding: 7px 14px; text-align: left; line-height: 1.45; }
  table.schede-mobile td[data-etichetta]:not([data-etichetta=""])::before {
    content: attr(data-etichetta); display: block; margin-bottom: 2px;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--attenuato);
  }
  table.schede-mobile td .badge, table.schede-mobile td .commenti-badge { margin: 2px 4px 2px 0; }
  table.schede-mobile td[data-etichetta=""] { padding-top: 10px; border-top: 1px dashed var(--bordo); margin-top: 4px; }
  table.schede-mobile tr:last-child { margin-bottom: 0; }
}

/* ---------- Admin ---------- */

.admin-menu { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px -16px 16px; padding: 2px 16px 8px; scrollbar-width: none; }
.admin-menu::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .admin-menu { margin: 16px 0; padding: 0; flex-wrap: wrap; } }
.admin-menu a {
  text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 9px 16px; min-height: 42px; white-space: nowrap;
  display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--bordo); background: var(--carta); color: var(--bordeaux);
  transition: background var(--t-rapida), color var(--t-rapida), border-color var(--t-rapida);
}
.admin-menu a.attivo, .admin-menu a:hover { background: var(--bordeaux); color: var(--avorio); border-color: var(--bordeaux); }

.statistiche { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin: 16px 0; }
@media (min-width: 720px) { .statistiche { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.statistica { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); padding: 16px; box-shadow: var(--ombra); }
.statistica .numero { font-family: var(--font-titoli); font-size: 1.9rem; font-weight: 700; color: var(--bordeaux); display: block; line-height: 1.1; }
.statistica .etichetta { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--attenuato); }

.azioni-riga { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.azioni-riga form { display: inline; }

/* ---------- Footer ---------- */

.sito-footer { background: var(--bordeaux-scuro); color: #d8c8ba; margin-top: auto; }
.footer-int { padding: 24px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
body.con-barra .footer-int { padding-bottom: calc(24px + var(--barra-h) + env(safe-area-inset-bottom)); }
@media (min-width: 860px) { body.con-barra .footer-int { padding-bottom: 24px; } }
.footer-int p { margin: 2px 0; }
.footer-logo { height: 36px; width: auto; max-width: 200px; opacity: 0.9; margin-bottom: 6px; }
.footer-nota { font-size: 0.82rem; color: #b5a393; }

/* ---------- Utility ---------- */

.testo-attenuato { color: var(--attenuato); }
.mt-0 { margin-top: 0; }
.separatore { border: none; border-top: 1px solid var(--bordo); margin: 20px 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pagina di accesso ---------- */

body.pagina-accesso { background: radial-gradient(120% 80% at 50% 0%, #fdf9f2 0%, var(--crema) 55%, var(--crema-scura) 100%); justify-content: center; align-items: center; }
.accesso-contenitore {
  width: 100%; display: flex; justify-content: center; align-items: flex-start;
  padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.accesso-card {
  width: 100%; max-width: 430px; background: var(--carta); border-radius: var(--raggio-xl);
  box-shadow: var(--ombra-alta); padding: 26px 26px 22px; margin: 0; border: 1px solid var(--bordo);
}
.accesso-logo { display: flex; justify-content: center; margin: 2px 0 14px; color: var(--bordeaux); }
.accesso-logo img { max-height: 96px; width: auto; max-width: 260px; object-fit: contain; }
.accesso-logo svg { width: 56px; height: 56px; color: var(--oro-scuro); }
.accesso-titolo { text-align: center; font-size: 2rem; margin: 6px 0 8px; color: var(--bordeaux-chiaro); }
.accesso-sottotitolo { text-align: center; color: var(--attenuato); margin: 0 0 18px; font-size: 0.98rem; }
.accesso-etichetta { display: block; font-weight: 700; font-size: 1rem; margin: 0 0 6px; color: var(--inchiostro); }
.accesso-utente {
  width: 100%; font: 1.1rem var(--font-testo); padding: 14px 16px; min-height: 52px;
  border: 1.5px solid var(--bordo-forte); border-radius: 12px; color: var(--inchiostro); background: var(--carta);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.accesso-utente:focus { border-color: var(--bordeaux-chiaro); outline: none; box-shadow: 0 0 0 3px rgba(123, 35, 52, 0.18); }
.accesso-utente.errore { border-color: var(--errore); }
.accesso-pin {
  width: 100%; margin-top: 14px; min-height: 72px; text-align: center; font-size: 2rem; letter-spacing: 0.35em;
  color: var(--bordeaux-chiaro); border: 1.5px solid var(--bordo-forte); border-radius: 12px; background: var(--crema);
  padding: 0 14px; caret-color: transparent; font-family: var(--font-testo); transition: border-color var(--t-rapida);
}
.accesso-pin::placeholder { color: var(--bordeaux-chiaro); opacity: 0.55; font-size: 1.4rem; letter-spacing: 0.45em; }
.accesso-pin.pieno { border-color: var(--bordeaux-chiaro); background: var(--carta); }
.accesso-pin.errore { border-color: var(--errore); animation: scuoti 0.4s; }
@keyframes scuoti { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.tastierino { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.tasto {
  font: 700 1.6rem var(--font-testo); color: var(--bordeaux-chiaro); background: var(--carta);
  border: 1.5px solid var(--bordo); border-radius: 14px; min-height: 72px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(69, 19, 32, 0.06);
  transition: background var(--t-rapida), transform 80ms, border-color var(--t-rapida);
}
.tasto:hover { background: var(--crema); border-color: var(--bordo-forte); }
.tasto:active { transform: scale(0.95); background: var(--crema-scura); }
.tasto-ok { background: var(--bordeaux-chiaro); color: #fff; border-color: var(--bordeaux-chiaro); font-size: 1.5rem; letter-spacing: 1px; }
.tasto-ok:hover { background: var(--bordeaux); border-color: var(--bordeaux); }
.tasto-ok:active { background: var(--bordeaux-scuro); }

.accesso-nota { text-align: center; font-size: 0.82rem; color: var(--attenuato); margin: 16px 0 0; }
.accesso-card .flash { margin: 0 0 14px; }

@media (max-width: 400px) {
  .accesso-card { padding: 22px 18px 18px; border-radius: var(--raggio-lg); }
  .accesso-logo img { max-height: 80px; }
  .tasto { min-height: 62px; font-size: 1.45rem; }
  .accesso-pin { min-height: 64px; }
}

/* ---------- Righe musica / personale ---------- */

.musica-riga { color: var(--oro-scuro); font-weight: 600; }
.musica-riga svg { vertical-align: -1px; }
.personale-riga { color: var(--bordeaux-chiaro); font-weight: 600; }
.personale-riga svg { vertical-align: -1px; }
.personale-lista { display: grid; gap: 8px; }
.personale-voce {
  display: grid; grid-template-columns: 1fr minmax(140px, 200px); gap: 10px; align-items: center;
  padding: 8px 12px; border: 1px solid var(--bordo); border-radius: 10px; background: var(--carta); transition: border-color var(--t-rapida), background var(--t-rapida);
}
.personale-voce.presente { border-color: var(--oro); background: var(--oro-tinta); }
.personale-voce .personale-nome { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 0; min-height: 36px; }
.personale-voce input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--bordeaux); }
.personale-voce select {
  font-family: var(--font-testo); font-size: 0.95rem; padding: 8px 10px; min-height: 42px;
  border: 1.5px solid var(--bordo-forte); border-radius: 10px; background: var(--carta); color: var(--inchiostro); width: 100%;
}
@media (max-width: 480px) { .personale-voce { grid-template-columns: 1fr; } }

/* ---------- Copia su altri giorni ---------- */

.copia-form { margin-top: 8px; max-width: 560px; }
.copia-date { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.copia-date input[type="date"] { width: 100%; padding: 8px 10px; border: 1.5px solid var(--bordo-forte); border-radius: 10px; min-height: 44px; font: inherit; }

/* ---------- Turni settimanali ---------- */

.turni-griglia { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .turni-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .turni-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.turni-giorno { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-lg); padding: 10px 12px; min-height: 90px; box-shadow: var(--ombra); }
.turni-giorno.oggi { border-color: var(--oro); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }
.turni-giorno-testata { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; border-bottom: 1px solid var(--bordo); padding-bottom: 6px; min-height: 36px; }
.turni-giorno-testata a { text-decoration: none; color: var(--bordeaux); }
.turni-giorno.oggi .turni-giorno-testata strong::after { content: ' · oggi'; color: var(--oro-scuro); font-weight: 600; font-size: 0.8em; }
.turni-aggiungi { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--oro); color: var(--bordeaux-scuro) !important; font-weight: 700; font-size: 1.3rem; line-height: 1; transition: background var(--t-rapida), transform var(--t-rapida); }
.turni-aggiungi:hover { background: var(--oro-chiaro); }
.turni-aggiungi:active { transform: scale(0.94); }
.turni-vuoto { color: var(--attenuato); font-size: 0.85rem; margin: 4px 0; }
.turni-lista { list-style: none; margin: 0; padding: 0; }
.turni-lista li { padding: 6px 0; border-bottom: 1px dashed var(--bordo); font-size: 0.92rem; }
.turni-lista li:last-child { border-bottom: 0; }
.turno { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; align-items: baseline; }
.turno.mio { background: var(--oro-tinta); margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 8px; }
.turno-ora { font-weight: 700; color: var(--bordeaux); white-space: nowrap; font-variant-numeric: tabular-nums; }
.turno-chi { font-weight: 600; }
.turno-mansione { grid-column: 2; color: var(--attenuato); font-size: 0.85rem; }
.turno-note { grid-column: 2; color: var(--attenuato); font-size: 0.8rem; font-style: italic; }
.turno-azioni { grid-column: 3; grid-row: 1 / span 3; display: flex; gap: 6px; align-items: center; font-size: 0.8rem; }
.turno-azioni a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 4px; }
.turno-azioni form { display: inline; }
.turno-elimina { background: var(--carta); border: 1px solid var(--bordo-forte); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; color: var(--errore); font-size: 1.1rem; line-height: 1; transition: background var(--t-rapida); }
.turno-elimina:hover { background: var(--errore-tinta); }
.badge-jolly { background: var(--attesa-tinta); color: var(--oro-scuro); border: 1px solid #e2d4a8; font-size: 0.68rem; }
.turno-ora.giornata { color: var(--oro-scuro); text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.8em; }
.campo-giornata label { display: flex; align-items: center; gap: 8px; font-weight: 500; padding: 10px 12px; border: 1.5px solid var(--bordo); border-radius: 10px; background: var(--oro-tinta); }
.campo-giornata input { margin: 0; }
.turni-riepilogo { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.92rem; }
.turni-giorni-scelta { display: flex; flex-wrap: wrap; gap: 8px; }
.turni-giorno-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--bordo-forte); border-radius: 999px; padding: 8px 14px; min-height: 42px; font-weight: 500 !important; cursor: pointer; margin: 0 !important; background: var(--carta); transition: background var(--t-rapida), border-color var(--t-rapida); }
.turni-giorno-chip.scelto { background: var(--oro); border-color: var(--oro); color: var(--bordeaux-scuro); font-weight: 700 !important; }
.turni-giorno-chip input { margin: 0; accent-color: var(--bordeaux); }
.orari-abituali td { vertical-align: middle; }
.orari-abituali input[type="time"], .orari-abituali input[type="text"] { padding: 6px 8px; border: 1.5px solid var(--bordo-forte); border-radius: 8px; font: inherit; min-height: 40px; }
.giorni-abituali { white-space: nowrap; }
.giorni-abituali label { display: inline-block; margin-right: 4px; font-weight: 500; }
.giorni-abituali input { margin-right: 1px; accent-color: var(--bordeaux); }

@media (max-width: 640px) {
  .solo-desktop { display: none !important; }
  .turni-azioni-settimana form, .turni-azioni-settimana .btn { width: 100%; }
  .turni-giorno { padding: 10px 12px; }
  .turni-lista li { font-size: 0.95rem; padding: 8px 0; }
  .turno { grid-template-columns: auto 1fr; }
  .turno-azioni { grid-column: 1 / span 2; grid-row: auto; justify-content: flex-end; }
  .turni-pdf-lista .btn { width: 100%; }
}

/* ---------- Stampa ---------- */

@media print {
  .solo-schermo, .sito-header, .sito-footer, .flash, .barra-mobile { display: none !important; }
  body { background: #fff; }
  .turni-griglia { grid-template-columns: repeat(7, 1fr); gap: 4px; }
  .turni-giorno { break-inside: avoid; box-shadow: none; }
}

/* ---------- Presskit, galleria, documenti ---------- */
.intro { margin: 0 0 10px; color: var(--attenuato); font-size: 0.95rem; max-width: 70ch; }
.quota-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--attenuato); }
.quota-barra { display: block; height: 8px; width: 110px; background: var(--crema-scura); border-radius: 999px; overflow: hidden; }
.quota-barra span { display: block; height: 100%; background: var(--oro-scuro); border-radius: 999px; transition: width var(--t); }
.caricamento { padding: 12px 14px; }
.caricamento-testa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; }
.caricamento-testa h2 { margin: 0; font-size: 1.05rem; }
.dropzone {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 64px; cursor: pointer;
  border: 1.5px dashed var(--bordo-forte); border-radius: 10px; background: var(--crema); color: var(--attenuato); font-size: 0.9rem; line-height: 1.4;
  transition: background var(--t-rapida), border-color var(--t-rapida);
}
.dropzone:hover, .dropzone.sopra { border-color: var(--bordeaux-chiaro); background: var(--oro-tinta); }
.dropzone.con-file { border-style: solid; }
.dropzone strong { color: var(--bordeaux); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dropzone .icona { color: var(--bordeaux-chiaro); flex-shrink: 0; }
.caricamento-griglia { display: grid; gap: 12px; }
@media (min-width: 860px) { .caricamento-griglia { grid-template-columns: minmax(260px, 1fr) 1.4fr; align-items: start; } }
.caricamento-campi { display: grid; gap: 8px 12px; grid-template-columns: 1fr 1fr; }
.caricamento-campi .campo { margin: 0; }
.caricamento-campi .campo label { font-size: 0.85rem; margin-bottom: 4px; }
.caricamento-campi .campo input { min-height: 40px; padding: 8px 10px; }
.caricamento-campi .campo-largo { grid-column: 1 / -1; }
@media (max-width: 480px) { .caricamento-campi { grid-template-columns: 1fr; } }
.anteprime { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); margin-top: 10px; }
.anteprima { display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; color: var(--attenuato); min-width: 0; }
.anteprima img, .anteprima-ext { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--crema-scura); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--bordeaux); letter-spacing: 1px; }
.anteprima-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--inchiostro); }
.anteprima.troppo img, .anteprima.troppo .anteprima-ext { outline: 2px solid var(--errore); }
.anteprima.troppo .anteprima-dim { color: var(--errore); font-weight: 600; }
.caricamento-piede { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.caricamento-destinazione select { min-height: 36px; padding: 4px 28px 4px 10px; font-size: 0.875rem; max-width: 100%; }
.caricamento-stato { flex: 1; font-size: 0.85rem; color: var(--attenuato); min-width: 120px; }
.progresso { flex: 1 1 100%; height: 6px; background: var(--crema-scura); border-radius: 999px; overflow: hidden; }
.progresso span { display: block; height: 100%; width: 0; background: var(--oro-scuro); transition: width 0.15s linear; }
.caricamento.in-corso .dropzone { opacity: 0.6; pointer-events: none; }
.galleria-griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 8px 0 14px; }
@media (min-width: 720px) { .galleria-griglia { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } }
.foto-card { margin: 0; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; display: flex; flex-direction: column; }
.foto-card > a { display: block; aspect-ratio: 4 / 3; background: var(--crema-scura); }
.foto-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-card figcaption { padding: 7px 9px 2px; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; min-width: 0; }
.foto-card figcaption strong { overflow-wrap: anywhere; line-height: 1.3; }
.foto-card figcaption small { font-size: 0.72rem; }
.foto-azioni { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 9px 8px; font-size: 0.8rem; align-items: center; }
.foto-azioni form { display: inline; }
.foto-azioni a { display: inline-flex; align-items: center; gap: 3px; text-decoration: none; font-weight: 600; min-height: 28px; }
.link-azione { background: none; border: 0; padding: 0; min-height: 28px; font: 600 0.8rem var(--font-testo); color: var(--bordeaux-chiaro); cursor: pointer; }
.link-azione:hover { text-decoration: underline; }
.link-azione.pericolo { color: var(--errore); }
.link-azione:disabled { color: var(--bordo-forte); cursor: default; text-decoration: none; }
.titolo-form { display: flex; gap: 4px; margin: 2px 0; }
.titolo-form[hidden] { display: none; }
.titolo-form input[type="text"] { flex: 1; min-width: 0; font: 0.9rem var(--font-testo); padding: 6px 8px; border: 1.5px solid var(--bordo-forte); border-radius: 8px; min-height: 36px; }
.foto-scelta { position: relative; cursor: pointer; aspect-ratio: 4 / 3; }
.foto-scelta input { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; z-index: 2; accent-color: var(--bordeaux); margin: 0; }
.foto-scelta img { width: 100%; height: 100%; object-fit: cover; }
.foto-scelta span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 0.75rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.65)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-scelta:has(input:checked) { outline: 3px solid var(--oro); }
.album-griglia { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 8px 0 14px; }
.album-card { display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; text-decoration: none; color: var(--inchiostro); transition: border-color var(--t-rapida); }
.album-card:hover { border-color: var(--bordeaux-chiaro); color: var(--inchiostro); }
.album-copertina { position: relative; aspect-ratio: 4 / 3; background: var(--crema-scura); display: flex; align-items: center; justify-content: center; color: var(--attenuato); overflow: hidden; }
.album-copertina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.album-info { padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; }
.album-info strong { color: var(--bordeaux); }
.album-info small { color: var(--attenuato); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.album-nuovo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.album-nuovo input { font: 0.9rem var(--font-testo); padding: 7px 10px; border: 1.5px solid var(--bordo-forte); border-radius: 8px; min-height: 38px; width: 220px; max-width: 100%; }
.link-griglia { display: grid; gap: 8px 16px; }
@media (min-width: 860px) { .link-griglia { grid-template-columns: 1fr 1fr; } }
.link-pubblico { margin: 4px 0 8px; }
.link-pubblico label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
.link-riga { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.link-riga .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
.link-riga input[type="text"] { flex: 1 1 120px; min-width: 0; font: 0.88rem var(--font-testo); padding: 8px 10px; border: 1.5px solid var(--bordo-forte); border-radius: 9px; min-height: 40px; background: var(--crema); color: var(--inchiostro); }
.doc-cartella { font-size: 1rem; margin: 16px 0 6px; display: flex; align-items: center; gap: 6px; }
.doc-riga { display: flex; gap: 12px; align-items: flex-start; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 10px 12px; margin: 6px 0; }
.doc-icona { color: var(--attenuato); flex-shrink: 0; margin-top: 2px; }
.doc-pdf { color: var(--errore); } .doc-xls { color: var(--ok); }
.doc-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.doc-titolo { font-weight: 700; color: var(--bordeaux); text-decoration: none; overflow-wrap: anywhere; }
.doc-descrizione { margin: 0; font-size: 0.9rem; }
.doc-azioni { display: flex; gap: 10px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; font-size: 0.85rem; }
.doc-azioni form { display: inline; }
@media (max-width: 640px) { .doc-riga { flex-wrap: wrap; } .doc-azioni { width: 100%; justify-content: flex-start; } }
.ricerca-home { margin: 10px 0 4px; }
.ricerca-home select { font: 0.95rem var(--font-testo); padding: 8px 10px; border: 1.5px solid var(--bordo-forte); border-radius: 10px; min-height: 46px; background: var(--carta); }

/* Pagine pubbliche (galleria) */
body.pagina-pubblica { background: var(--crema); }
.pubblica-testata { background: var(--bordeaux); color: var(--avorio); padding: 20px 16px; padding-top: max(20px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pubblica-testata img { height: 48px; width: auto; max-width: 220px; }
.pubblica-testata h1 { color: var(--oro); margin: 0; font-size: 1.5rem; }
.pubblica-testata p { margin: 4px 0 0; max-width: 60ch; opacity: 0.9; }
.pubblica-corpo { padding-top: 10px; padding-bottom: 40px; flex: 1; }
.pubblica-piede { background: var(--bordeaux-scuro); color: #d8c8ba; text-align: center; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); font-size: 0.85rem; }
.galleria-griglia.pubblica .foto-card figcaption { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.galleria-griglia.pubblica .foto-card figcaption strong { overflow-wrap: normal; word-break: normal; }
.lightbox { position: fixed; inset: 0; background: rgba(20, 8, 10, 0.94); z-index: 200; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 94vw; max-height: 78vh; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.6); border-radius: 6px; }
.lightbox button { position: absolute; background: rgba(255,255,255,0.12); border: 0; color: #fff; font-size: 2rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.lb-chiudi { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.lb-prec { left: 8px; top: 50%; transform: translateY(-50%); } .lb-succ { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-piede { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: center; align-items: center; gap: 14px; color: #fff; padding: 0 16px; }