@font-face { font-family: "Source Sans 3"; src: url("font/SourceSans3-Regular.otf") format("opentype"); font-weight: 300 450; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/SourceSans3-Semibold.otf") format("opentype"); font-weight: 451 650; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/SourceSans3-Bold.otf") format("opentype"); font-weight: 651 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/SourceSans3-It.otf") format("opentype"); font-style: italic; font-display: swap; }

:root {
  /* Grafica chiara come la pagina Maugeri Creative Studio (approvata il 4/11/2026). */
  --sfondo: #f4f4f6; --carta: #ffffff; --carta2: #f8f8fa; --campo: #ffffff; --inchiostro: #1f1f21; --titolo: #1f1f21;
  --secondario: #55555c; --spento: #8e8e96; --linea: #e6e6ea; --linea-forte: #d3d3d8;
  --oro: #b8975a; --oro-chiaro: #c6a76b; --oro-testo: #8a6d3b; --pieno-testo: #ffffff;
  --attiva: #1f1f21; --attiva-testo: #ffffff; --bloccato: #2b2a27; --bloccato-testo: #ffffff;
  --verde: #2f9a5f; --arancio: #d7731d; --rosso: #cf3d3d; --azzurro: #3d78db; --mattina: #d08a3e; --pomeriggio: #4f86c6;
  --matrimonio: #b94a4a; --battesimo: #c35f9e; --diciottesimo: #3f7fc0; --altro: #2e8b57;
  --velo: rgba(20,20,24,.38); color-scheme: light;
  --serif: "Source Sans 3", -apple-system, Helvetica, Arial, sans-serif; --sans: "Source Sans 3", -apple-system, Helvetica, Arial, sans-serif;
  --ombra: 0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.04);
  --raggio: 14px;
  --pulsante: #ececef; --pulsante-hover: #e2e2e6; --riquadro: #efeff1; --riga: #ececef; --barra-tel: rgba(255,255,255,.96);
  --ombra-forte: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.07); --finestra-ombra: 0 10px 40px rgba(0,0,0,.18);
  /* Derivati */
  --nero: var(--attiva);
  --hover: #f3f3f6;
  --badge: #f0f0f3;
  --verde-fondo: color-mix(in srgb, var(--verde) 12%, var(--carta));
  --arancio-fondo: color-mix(in srgb, var(--arancio) 12%, var(--carta));
  --rosso-fondo: color-mix(in srgb, var(--rosso) 12%, var(--carta));
  --oro-fondo: color-mix(in srgb, var(--oro-chiaro) 14%, var(--carta));
  --matrimonio-fondo: color-mix(in srgb, var(--matrimonio) 14%, var(--carta));
  --battesimo-fondo: color-mix(in srgb, var(--battesimo) 14%, var(--carta));
  --diciottesimo-fondo: color-mix(in srgb, var(--diciottesimo) 14%, var(--carta));
  --altro-fondo: color-mix(in srgb, var(--altro) 14%, var(--carta));
}
/* Tema scuro (predefinito): i colori di Gestione Cataloghi e della Suite originale, con le scritte più chiare. */
:root[data-tema="scuro"] {
  --sfondo: #121212; --carta: #1d1d1d; --carta2: #191919; --campo: #0f0f0f; --inchiostro: #ede9e3; --titolo: #f5f3ef;
  --secondario: #b5b0a8; --spento: #7f7a73; --linea: #2c2c2c; --linea-forte: #3d3d3d;
  --oro: #c6a76b; --oro-chiaro: #c6a76b; --oro-testo: #d6b97f; --pieno-testo: #141414;
  --attiva: #c6a76b; --attiva-testo: #141414; --bloccato: #e2ded8; --bloccato-testo: #141414;
  --verde: #6fbf73; --arancio: #e8a85c; --rosso: #ff8a80; --azzurro: #7fb2ff; --mattina: #e8a85c; --pomeriggio: #7fb2ff;
  --matrimonio: #d9746f; --battesimo: #d98ac0; --diciottesimo: #6fa6e0; --altro: #5fbf86;
  --velo: rgba(0,0,0,.62); color-scheme: dark;
  --ombra: 0 0 0 1px #262626; --ombra-forte: 0 0 0 1px #3a3a3a; --finestra-ombra: 0 0 0 1px #333, 0 12px 40px rgba(0,0,0,.6);
  --hover: #262626; --badge: #262626;
  --pulsante: #2a2a2a; --pulsante-hover: #353535; --riquadro: #262626; --riga: #2a2a2a; --barra-tel: rgba(22,22,22,.95);
  --verde-fondo: color-mix(in srgb, var(--verde) 16%, var(--carta));
  --arancio-fondo: color-mix(in srgb, var(--arancio) 16%, var(--carta));
  --rosso-fondo: color-mix(in srgb, var(--rosso) 16%, var(--carta));
  --oro-fondo: color-mix(in srgb, var(--oro-chiaro) 16%, var(--carta));
  --matrimonio-fondo: color-mix(in srgb, var(--matrimonio) 18%, var(--carta));
  --battesimo-fondo: color-mix(in srgb, var(--battesimo) 18%, var(--carta));
  --diciottesimo-fondo: color-mix(in srgb, var(--diciottesimo) 18%, var(--carta));
  --altro-fondo: color-mix(in srgb, var(--altro) 18%, var(--carta));
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--sfondo); color: var(--inchiostro); font-family: var(--sans); font-size: 15px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--oro-testo); }
:focus-visible { outline: 3px solid var(--oro-chiaro); outline-offset: 2px; }
.caricamento { text-align: center; color: var(--secondario); padding: 80px 20px; }
.nascosto { display: none !important; }

/* ---------- Marchio ---------- */
.marchio { text-align: center; line-height: 1; }
.marchio .nome { font-family: var(--serif); font-weight: 500; font-size: 30px; letter-spacing: .06em; color: var(--titolo); }
.marchio .sotto { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; color: var(--oro-chiaro);
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
.marchio .sotto::before, .marchio .sotto::after { content: ""; width: 40px; height: 1px; background: var(--oro-chiaro); }

/* ---------- Accesso ---------- */
.accesso { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.accesso form { width: min(380px, 100%); background: var(--carta); border: 1px solid var(--linea); border-radius: 14px; padding: 34px 28px 26px; text-align: center; }
.accesso h1 { font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 26px 0 18px; }
.accesso input { width: 100%; border: 1px solid var(--linea-forte); border-radius: 7px; padding: 12px; font-size: 16px; text-align: center; background: var(--campo); color: var(--inchiostro); }
.accesso button { width: 100%; margin-top: 12px; }
.errore { color: var(--rosso); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ---------- Intestazione ---------- */
header.testa { background: var(--carta); border-bottom: 1px solid var(--linea); padding: 18px 16px 14px; }
nav.schede { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
nav.schede button { background: var(--carta); border: 1px solid var(--linea); border-radius: 7px; padding: 10px 18px; font-size: 14px;
  letter-spacing: .03em; color: var(--inchiostro); cursor: pointer; min-height: 42px; }
nav.schede button:hover { border-color: var(--linea-forte); }
nav.schede button.attiva { background: var(--attiva); border-color: var(--attiva); color: var(--attiva-testo); }
nav.schede .conta { display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 6px; border-radius: 10px; background: var(--oro-chiaro); color: var(--pieno-testo); font-size: 11px; }
.strumenti { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }

/* ---------- Avviso copia ---------- */
.copia { max-width: 1180px; margin: 14px auto 0; padding: 9px 14px; border: 1px solid var(--linea); border-radius: 9px; background: var(--carta2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12.5px; color: var(--secondario); }
.copia strong { color: var(--inchiostro); font-weight: 500; }
.copia .avviso { color: var(--arancio); }
.copia .spazio { flex: 1; }

/* ---------- Pulsanti ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--carta); border: 1px solid var(--linea-forte);
  border-radius: 7px; padding: 8px 14px; min-height: 38px; cursor: pointer; color: var(--inchiostro); text-decoration: none; font-size: 13px; }
.btn:hover { border-color: var(--oro); }
.btn.oro { color: var(--oro-testo); border-color: var(--oro-chiaro); }
.btn.pieno { background: var(--oro); border-color: var(--oro); color: var(--pieno-testo); }
.btn.rosso { color: var(--rosso); border-color: color-mix(in srgb, var(--rosso) 35%, var(--carta)); }
.btn.piccolo { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* ---------- Contenuto ---------- */
main { max-width: 1180px; margin: 0 auto; padding: 18px 16px 60px; }
h2.titolo { font-family: var(--serif); font-weight: 500; font-size: 30px; margin: 6px 0 14px; color: var(--titolo); }
.filtri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.chip { border: 1px solid var(--linea); background: var(--carta); border-radius: 20px; padding: 7px 14px; cursor: pointer; font-size: 13px; min-height: 36px; }
.chip.attiva { background: var(--attiva); color: var(--attiva-testo); border-color: var(--attiva); }
.filtri input[type=search], .filtri select, .filtri input[type=date] { border: 1px solid var(--linea-forte); border-radius: 7px; padding: 8px 10px; min-height: 38px; background: var(--campo); color: var(--inchiostro); }
.filtri input[type=search] { min-width: 220px; }
.risultati { color: var(--secondario); font-size: 12px; margin: 0 0 10px; }
.vuoto { text-align: center; color: var(--secondario); padding: 40px 10px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; }

.schede-riep { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.riep { background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.riep .l { font-size: 12px; color: var(--secondario); text-transform: uppercase; letter-spacing: .08em; }
.riep .v { font-family: var(--serif); font-size: 28px; margin-top: 4px; }
.riep .v.oro { color: var(--oro-testo); }

/* ---------- Tabelle ---------- */
.tabella-box { background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; overflow: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tab th { text-align: left; padding: 11px 12px; font-size: 11px; font-weight: 500; color: var(--secondario); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 1px solid var(--linea); white-space: nowrap; background: var(--carta2); }
table.tab td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.tab tbody tr:last-child td { border-bottom: 0; }
table.tab tr.cliccabile { cursor: pointer; }
table.tab tr.cliccabile:hover td { background: var(--hover); }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.data { white-space: nowrap; }
.mut { color: var(--secondario); font-size: 12px; }
.forte { font-weight: 500; }
.nome { font-weight: 500; }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; border: 1px solid var(--linea); background: var(--badge); white-space: nowrap; }
.badge.verde { color: var(--verde); background: var(--verde-fondo); border-color: color-mix(in srgb, var(--verde) 35%, var(--carta)); }
.badge.arancio { color: var(--arancio); background: var(--arancio-fondo); border-color: color-mix(in srgb, var(--arancio) 35%, var(--carta)); }
.badge.rosso { color: var(--rosso); background: var(--rosso-fondo); border-color: color-mix(in srgb, var(--rosso) 35%, var(--carta)); }
.badge.grigio { color: var(--secondario); }
.badge.oro { color: var(--oro-testo); background: var(--oro-fondo); border-color: color-mix(in srgb, var(--oro-chiaro) 45%, var(--carta)); }
.spunta { color: var(--verde); font-weight: 600; }
.da-incassare { color: var(--arancio); font-weight: 500; }
.iniziale { display: inline-block; min-width: 22px; text-align: center; border: 1px solid var(--linea); border-radius: 5px; font-weight: 600; font-size: 11px; padding: 2px 0; margin-right: 6px; }

/* Tabelle con il tono della tabella dell'app (se l'app lo manda) */
.tabella-box { background: var(--tab-sfondo, var(--carta)); color: var(--tab-testo, var(--inchiostro)); border-color: var(--tab-linea, var(--linea)); }
.tabella-box table.tab th { background: color-mix(in srgb, var(--tab-sfondo, var(--carta2)) 93%, var(--tab-testo, var(--inchiostro)));
  color: var(--tab-secondario, var(--secondario)); border-bottom-color: var(--tab-linea, var(--linea)); }
.tabella-box table.tab td { border-bottom-color: var(--tab-linea, var(--linea)); }
.tabella-box .mut, .tabella-box td[data-l]::before { color: var(--tab-secondario, var(--secondario)); }
.tabella-box a { color: var(--tab-oro, var(--oro-testo)); }
.tabella-box .btn { background: transparent; color: var(--tab-testo, var(--inchiostro)); border-color: var(--tab-linea, var(--linea-forte)); }
.tabella-box table.tab tr.cliccabile:hover td { background: color-mix(in srgb, var(--tab-sfondo, var(--carta)) 90%, var(--oro-chiaro)); }
.tabella-box tr.dettaglio td { background: color-mix(in srgb, var(--tab-sfondo, var(--carta2)) 94%, var(--tab-testo, var(--inchiostro))); }
.tabella-box .iniziale { border-color: var(--tab-linea, var(--linea)); }

/* Dettaglio che si apre sotto una riga */
tr.dettaglio td { background: var(--carta2); padding: 14px 16px 18px; }
.griglia-dett { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; }
.griglia-dett div span { display: block; font-size: 11px; color: var(--secondario); text-transform: uppercase; letter-spacing: .06em; }
.testo-lungo { white-space: pre-wrap; line-height: 1.5; margin-top: 10px; }
.azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* ---------- Agenda ---------- */
.agenda-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 16px; }
.mese-nav { display: flex; align-items: center; gap: 12px; }
.mese-nav h2 { font-family: var(--serif); font-weight: 500; font-size: 34px; margin: 0; min-width: 250px; text-align: center; color: var(--titolo); }
.mese-nav .btn { width: 44px; font-size: 18px; }
.griglia-mese { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.giorno-nome { text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; color: var(--secondario); padding-bottom: 4px; }
.giorno { min-height: 112px; background: var(--carta); border: 1px solid var(--linea); border-radius: 7px; padding: 8px; cursor: pointer; overflow: hidden; }
.giorno.vuoto-c { background: transparent; border: 0; cursor: default; }
.giorno .n { font-size: 18px; font-weight: 600; }
.giorno.oggi { border: 2px solid var(--oro-chiaro); }
.giorno.scelto { box-shadow: 0 0 0 2px var(--nero) inset; }
.giorno.matrimonio { background: var(--matrimonio-fondo); }
.giorno.battesimo { background: var(--battesimo-fondo); }
.giorno.diciottesimo { background: var(--diciottesimo-fondo); }
.giorno.altro { background: var(--altro-fondo); }
.giorno.bloccato-full { background: var(--bloccato); color: var(--bloccato-testo); }
.giorno.bloccato-full .voce { background: rgba(255,255,255,.12); color: var(--bloccato-testo); }
.voce { display: block; margin-top: 5px; padding: 3px 6px; border-left: 3px solid var(--spento); border-radius: 4px; background: var(--carta); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce.matrimonio { border-color: var(--matrimonio); color: color-mix(in srgb, var(--matrimonio) 65%, var(--inchiostro)); }
.voce.battesimo { border-color: var(--battesimo); color: color-mix(in srgb, var(--battesimo) 65%, var(--inchiostro)); }
.voce.diciottesimo { border-color: var(--diciottesimo); color: color-mix(in srgb, var(--diciottesimo) 65%, var(--inchiostro)); }
.voce.altro { border-color: var(--altro); color: color-mix(in srgb, var(--altro) 65%, var(--inchiostro)); }
.voce.attesa { background: transparent; border-style: dashed; border-left-width: 3px; }
.voce.lead { border-left: 3px dotted var(--oro-chiaro); color: var(--oro-testo); background: var(--oro-fondo); }
.periodo { display: inline-block; margin-top: 6px; margin-right: 4px; padding: 2px 7px; border-radius: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.periodo.morning { border: 1px solid var(--mattina); color: var(--mattina); }
.periodo.afternoon { border: 1px solid var(--pomeriggio); color: var(--pomeriggio); }
.periodo.full { background: var(--bloccato); color: var(--bloccato-testo); }
.periodo.orario { border: 1px dashed var(--pomeriggio); color: var(--pomeriggio); text-transform: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: 14px; color: var(--secondario); }
.legenda span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; background: var(--c, #999); }
.legenda .quadrato::before { border-radius: 3px; }
.dettaglio-giorno { margin-top: 16px; background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 14px 16px; }
.dettaglio-giorno h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 8px; }
.dettaglio-giorno .riga { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--linea); }
.dettaglio-giorno .riga:first-of-type { border-top: 0; }

.griglia-anno { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mini { background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: 10px; cursor: pointer; }
.mini h4 { font-family: var(--serif); font-weight: 500; font-size: 19px; margin: 0 0 6px; text-align: center; }
.mini .g7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-size: 13px; text-align: center; }
.mini .g { padding: 3px 0; border-radius: 4px; }
.mini .g.matrimonio { background: var(--matrimonio); color: var(--su-colore, #fff); }
.mini .g.battesimo { background: var(--battesimo); color: var(--su-colore, #fff); }
.mini .g.diciottesimo { background: var(--diciottesimo); color: var(--su-colore, #fff); }
.mini .g.altro { background: var(--altro); color: var(--su-colore, #fff); }
.mini .g.attesa { box-shadow: 0 0 0 1px var(--oro-chiaro) inset; }
.mini .g.lead { text-decoration: underline dotted var(--oro-chiaro); }
.mini .g.full { background: var(--bloccato); color: var(--bloccato-testo); }
.mini .g.oggi { box-shadow: 0 0 0 2px var(--oro-chiaro) inset; }

/* ---------- Finestra ---------- */
.velo { position: fixed; inset: 0; background: var(--velo); display: grid; place-items: center; padding: 16px; z-index: 50; }
.finestra { background: var(--carta); border-radius: 14px; padding: 22px; width: min(560px, 100%); max-height: 90vh; overflow: auto; }
.finestra h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 10px; }
.finestra .link { word-break: break-all; background: var(--carta2); border: 1px solid var(--linea); border-radius: 7px; padding: 10px; font-size: 12px; margin: 8px 0; }

/* ---------- Telefono ---------- */
@media (max-width: 760px) {
  .marchio .nome { font-size: 22px; }
  nav.schede { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  nav.schede button { flex: 0 0 auto; padding: 9px 13px; }
  .filtri input[type=search] { min-width: 0; width: 100%; font-size: 16px; }
  table.tab thead { display: none; }
  table.tab, table.tab tbody, table.tab tr, table.tab td { display: block; width: 100%; }
  table.tab tr { border-bottom: 1px solid var(--linea); padding: 8px 4px; }
  table.tab td { border: 0; padding: 4px 10px; text-align: left !important; }
  table.tab td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 96px; color: var(--secondario); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
  .mese-nav h2 { font-size: 24px; min-width: 0; }
  .griglia-mese { gap: 3px; }
  .giorno { min-height: 58px; padding: 4px; }
  .giorno .voce { display: none; }
  .giorno .punti { display: flex; gap: 2px; margin-top: 4px; flex-wrap: wrap; }
  .periodo { display: block; font-size: 0; padding: 0; height: 4px; margin: 4px 0 0; border: 0 !important; border-radius: 2px; }
  .periodo.morning { background: var(--mattina); } .periodo.afternoon { background: var(--pomeriggio); } .periodo.orario { background: var(--pomeriggio); opacity: .55; }
  td .badge { white-space: normal; max-width: 100%; }
}
@media (min-width: 761px) { .giorno .punti { display: none; } }
.punti i { width: 7px; height: 7px; border-radius: 50%; background: var(--spento); display: inline-block; }
.punti i.matrimonio { background: var(--matrimonio); } .punti i.battesimo { background: var(--battesimo); }
.punti i.diciottesimo { background: var(--diciottesimo); } .punti i.altro { background: var(--altro); } .punti i.lead { background: var(--oro-chiaro); }

/* Etichette leggibili anche sul tono della tabella (chiaro dentro un'interfaccia scura) */
.tabella-box .badge { background: color-mix(in srgb, var(--tab-testo, var(--inchiostro)) 6%, var(--tab-sfondo, var(--carta)));
  color: var(--tab-testo, var(--inchiostro)); border-color: var(--tab-linea, var(--linea)); }
.tabella-box .badge.verde { color: color-mix(in srgb, var(--verde) 60%, var(--tab-testo, var(--inchiostro))); background: color-mix(in srgb, var(--verde) 16%, var(--tab-sfondo, var(--carta))); }
.tabella-box .badge.arancio { color: color-mix(in srgb, var(--arancio) 60%, var(--tab-testo, var(--inchiostro))); background: color-mix(in srgb, var(--arancio) 16%, var(--tab-sfondo, var(--carta))); }
.tabella-box .badge.rosso { color: color-mix(in srgb, var(--rosso) 60%, var(--tab-testo, var(--inchiostro))); background: color-mix(in srgb, var(--rosso) 16%, var(--tab-sfondo, var(--carta))); }
.tabella-box .badge.oro { color: color-mix(in srgb, var(--oro-chiaro) 55%, var(--tab-testo, var(--inchiostro))); background: color-mix(in srgb, var(--oro-chiaro) 18%, var(--tab-sfondo, var(--carta))); }
.tabella-box .badge.grigio { color: var(--tab-secondario, var(--secondario)); }
.tabella-box .da-incassare { color: color-mix(in srgb, var(--arancio) 65%, var(--tab-testo, var(--inchiostro))); }
.tabella-box .spunta { color: color-mix(in srgb, var(--verde) 65%, var(--tab-testo, var(--inchiostro))); }

/* ---------- Modifiche ---------- */
.spunta-pag { background: transparent; border: 1px solid var(--tab-linea, var(--linea)); border-radius: 6px; padding: 4px 8px; cursor: pointer;
  color: var(--tab-secondario, var(--secondario)); font: inherit; white-space: nowrap; }
.spunta-pag:hover { border-color: var(--oro-chiaro); }
.spunta-pag.fatto { color: color-mix(in srgb, var(--verde) 65%, var(--tab-testo, var(--inchiostro))); border-color: color-mix(in srgb, var(--verde) 45%, var(--tab-sfondo, var(--carta))); }
.notifica { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--attiva); color: var(--attiva-testo);
  padding: 10px 18px; border-radius: 20px; font-size: 13px; z-index: 60; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.finestra select, .finestra input, .azioni select, .riferimenti input { border: 1px solid var(--linea-forte); border-radius: 7px; padding: 7px 9px;
  background: var(--campo); color: var(--inchiostro); min-height: 36px; width: 100%; }
.finestra label span, .riferimenti label span { display: block; font-size: 11px; color: var(--secondario); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tabella-box .riferimenti label span { color: var(--tab-secondario, var(--secondario)); }
.azioni .scelta { display: inline-flex; align-items: center; gap: 6px; }
.azioni .scelta select { width: auto; }
.riferimenti { margin-top: 12px; }
.finestra .azioni { justify-content: flex-end; margin-top: 18px; }

/* ---------- Totali e riepilogo dei pagamenti ---------- */
table.tab tfoot tr.totali td { border-top: 2px solid var(--tab-linea, var(--linea-forte)); border-bottom: 0; font-weight: 600;
  background: color-mix(in srgb, var(--tab-sfondo, var(--carta2)) 90%, var(--oro-chiaro)); padding-top: 14px; padding-bottom: 14px; }
table.tab tfoot tr.totali td .mut { font-weight: 400; }
.quadro { margin-top: 22px; background: var(--carta); border: 1px solid var(--oro-chiaro); border-radius: 14px; padding: 18px 20px 20px; }
.quadro h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; margin: 0 0 12px; color: var(--titolo); }
.barra-incasso { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--arancio) 30%, var(--carta)); overflow: hidden; margin-bottom: 16px; }
.barra-incasso .pieno-barra { display: block; height: 100%; width: 0; background: var(--verde); border-radius: 6px; }
.quadro-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.quadro-rate { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea); }
.voce-quadro { min-width: 0; }
.voce-quadro.rata .v { font-size: 26px; }
.voce-quadro .v.verde-testo { color: var(--verde); }
.barra-incasso.sottile { height: 6px; margin: 8px 0 6px; }
.voce-quadro .manca { font-size: 12.5px; color: var(--arancio); }
.voce-quadro .manca.zero { color: var(--verde); }
.voce-quadro .l { font-size: 11.5px; color: var(--secondario); text-transform: uppercase; letter-spacing: .08em; }
.voce-quadro .v { font-family: var(--serif); font-size: 30px; margin: 4px 0 2px; color: var(--titolo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voce-quadro.verde .v { color: var(--verde); }
.voce-quadro.arancio .v { color: var(--arancio); }
@media (max-width: 760px) {
  table.tab tfoot, table.tab tfoot tr { display: block; width: 100%; }
  .voce-quadro .v { font-size: 24px; }
}

/* ---------- Moduli di modifica ---------- */
.titolo-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.riquadro { background: var(--carta); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; }
.riquadro h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 0 0 12px; color: var(--titolo); }
.griglia-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; }
.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo.largo { grid-column: 1 / -1; }
.campo span { font-size: 11px; color: var(--secondario); text-transform: uppercase; letter-spacing: .06em; }
.campo input, .campo select, .campo textarea, .azioni > select { border: 1px solid var(--linea-forte); border-radius: 7px; padding: 8px 10px; min-height: 38px;
  background: var(--campo); color: var(--inchiostro); font: inherit; width: 100%; }
.campo textarea { resize: vertical; line-height: 1.45; }
.azioni > select { width: auto; max-width: 100%; }
.voci { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.voce-riga { display: grid; grid-template-columns: minmax(0, 1fr) 80px 110px 90px auto; gap: 8px; align-items: end; }
.voce-riga > .num { padding-bottom: 10px; text-align: right; }
.servizi-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 18px; margin-bottom: 12px; }
.servizio { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 7px; cursor: pointer; }
.servizio:hover { background: var(--hover); }
.servizio input { width: 18px; height: 18px; accent-color: var(--oro-chiaro); }
.totali-editor { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea); }
.totali-editor .grande { font-size: 16px; }
.totali-editor .grande strong { font-family: var(--serif); font-size: 24px; color: var(--titolo); }
.barra-salva { position: sticky; bottom: 0; background: var(--sfondo); padding: 12px 0; justify-content: flex-end; border-top: 1px solid var(--linea); }
.spunta-riga { display: flex; align-items: center; gap: 8px; }
.spunta-riga input { width: auto; min-height: 0; }
@media (max-width: 760px) {
  .voce-riga { grid-template-columns: 1fr 1fr; }
  .voce-riga > .campo:first-child { grid-column: 1 / -1; }
  .voce-riga { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--linea); }
}

/* Telefono: etichetta a sinistra, contenuto (anche su più righe) allineato a destra dell'etichetta */
@media (max-width: 760px) {
  table.tab td[data-l] { position: relative; padding-left: 118px; min-height: 26px; }
  table.tab td[data-l]::before { position: absolute; left: 10px; top: 6px; width: 100px; min-width: 0; }
  table.tab td[data-l=""] { display: none; }
  table.tab td.num, table.tab th.num { text-align: left !important; }
  table.tab tfoot tr.totali td { padding-top: 8px; padding-bottom: 8px; }
  .quadro-griglia { grid-template-columns: 1fr 1fr; }
  .quadro-griglia > .voce-quadro:first-child { grid-column: 1 / -1; }
  .quadro-rate { grid-template-columns: 1fr; }
  .titolo-riga .btn { width: 100%; }
  .barra-salva { flex-wrap: wrap; }
  .barra-salva .btn { flex: 1 1 auto; }
  .finestra { padding: 18px 16px; }
  .finestra .azioni .btn { flex: 1 1 auto; }
  .totali-editor { flex-direction: column; align-items: flex-end; gap: 4px; }
}

/* Svuota cestino delle richieste */
.finestra .btn.rosso { background: var(--rosso); color: #fff; border-color: var(--rosso); }
.elenco-svuota { max-height: 40vh; overflow-y: auto; margin: 6px 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }

/* ---------- Pagamenti: registro degli incassi (righe compatte, dettaglio sotto) ---------- */
.verde-testo { color: var(--verde); }
.arancio-testo { color: var(--arancio); }
.inc-riep { display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; margin: 2px 0 14px; padding: 10px 16px;
  background: var(--tab-sfondo, var(--carta)); border: 1px solid var(--tab-linea, var(--linea)); border-radius: 10px; }
.inc-riep > div { display: flex; align-items: baseline; gap: 8px; }
.inc-riep .l, .inc-colonna .l { font-size: 11px; color: var(--tab-secondario, var(--secondario)); text-transform: uppercase; letter-spacing: .08em; }
.inc-riep strong { font-family: var(--serif); font-size: 22px; font-weight: 500; }
.filtri .separa { width: 1px; height: 22px; background: var(--linea-forte); margin: 0 4px; }
.inc-lista { background: var(--tab-sfondo, var(--carta)); color: var(--tab-testo, var(--inchiostro)); border: 1px solid var(--tab-linea, var(--linea)); border-radius: 10px; overflow: hidden; }
.inc-riga + .inc-riga { border-top: 1px solid var(--tab-linea, var(--linea)); }
.inc-testa { display: grid; grid-template-columns: 96px minmax(180px, 1fr) minmax(150px, 210px) 150px auto; gap: 14px; align-items: center;
  padding: 8px 14px; min-height: 46px; cursor: pointer; font-size: 13px; }
.inc-testa:hover, .inc-riga.aperta > .inc-testa { background: color-mix(in srgb, var(--tab-sfondo, var(--carta)) 92%, var(--oro-chiaro)); }
.inc-data { color: var(--tab-secondario, var(--secondario)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.inc-nome { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-nome strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.inc-nome .mut { overflow: hidden; text-overflow: ellipsis; }
.punto-tipo { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--altro); }
.punto-tipo.matrimonio { background: var(--matrimonio); } .punto-tipo.battesimo { background: var(--battesimo); } .punto-tipo.diciottesimo { background: var(--diciottesimo); }
.inc-avanz { display: flex; flex-direction: column; gap: 4px; }
.inc-avanz .mut { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.inc-barra { display: block; height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--arancio) 22%, var(--tab-sfondo, var(--carta))); }
.inc-barra .pieno { display: block; height: 100%; background: var(--oro-chiaro); border-radius: 3px; }
.inc-barra.ok .pieno { background: var(--verde); }
.inc-stato { text-align: right; }
.inc-azioni { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 112px; }
.inc-azioni .freccia { width: 16px; text-align: center; color: var(--tab-secondario, var(--secondario)); }
.inc-dettaglio { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 6px 14px 16px 124px;
  background: color-mix(in srgb, var(--tab-sfondo, var(--carta2)) 95%, var(--tab-testo, var(--inchiostro))); border-top: 1px dashed var(--tab-linea, var(--linea)); }
.inc-colonna { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-top: 8px; }
.inc-colonna.laterale > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.inc-mov { width: 100%; border-collapse: collapse; font-size: 13px; }
.inc-mov td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--tab-linea, var(--linea)); vertical-align: middle; }
.inc-mov tr:last-child td { border-bottom: 0; }
.inc-mov td.data { width: 92px; color: var(--tab-secondario, var(--secondario)); }
.inc-mov td.num { width: 90px; text-align: right; padding-right: 16px; }
.inc-mov .azioni-mov { text-align: right; white-space: nowrap; }
.inc-mov .azioni-mov .btn { margin-left: 4px; }
.inc-rapide { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-piano { display: flex; flex-wrap: wrap; gap: 6px; }
.voce-piano { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--tab-linea, var(--linea)); }
.inc-chip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.inc-chip .chip { min-height: 30px; padding: 4px 12px; font-size: 12.5px; }
.inc-esito { margin: 12px 0 0; min-height: 20px; }
.ricevuta-anteprima { border: 1px solid var(--linea); border-left: 3px solid var(--oro-chiaro); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; background: var(--carta2); }
.ricevuta-anteprima .ric-titolo { font-family: var(--serif); font-size: 19px; margin-bottom: 6px; }
.ricevuta-anteprima dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 10px; margin: 0 0 8px; font-size: 13px; }
.ricevuta-anteprima dt { color: var(--secondario); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.ricevuta-anteprima dd { margin: 0; }
@media (max-width: 760px) {
  .inc-testa { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "data data" "nome stato" "avanz azioni"; gap: 6px 10px; }
  .inc-data { grid-area: data; font-size: 11.5px; }
  .inc-nome { grid-area: nome; }
  .inc-nome .mut { display: none; }
  .inc-stato { grid-area: stato; }
  .inc-avanz { grid-area: avanz; align-self: center; }
  .inc-azioni { grid-area: azioni; min-width: 0; }
  .inc-dettaglio { grid-template-columns: 1fr; padding-left: 14px; }
  .inc-mov, .inc-mov tbody { display: block; }
  .inc-mov tr { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--tab-linea, var(--linea)); }
  .inc-mov tr:last-child { border-bottom: 0; }
  .inc-mov td { border: 0; padding: 0; width: auto; }
  .inc-mov td.data { width: auto; }
  .inc-mov td.num { width: auto; text-align: left; padding: 0; }
  .inc-mov td:nth-child(3), .inc-mov .azioni-mov { grid-column: 1 / -1; }
  .inc-mov .azioni-mov { text-align: left; white-space: normal; }
  .inc-mov .azioni-mov .btn { margin: 4px 6px 0 0; }
  .filtri .separa { display: none; }
}
.inc-mov .piccolo { font-size: 12px; }

/* =====================================================================
   Grafica chiara 2026 (Maugeri Creative Studio): struttura, Home, telefono e iPad
   ===================================================================== */
main { max-width: none; margin: 0; padding: 4px 28px 60px 8px; }
h2.titolo { font-weight: 600; font-size: 26px; margin: 4px 0 14px; letter-spacing: 0; }
.titolo-riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.icona { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pallino { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: var(--verde); }
.pallino.arancio { background: var(--arancio); } .pallino.rosso { background: var(--rosso); } .pallino.azzurro { background: var(--azzurro); }
.pallino.spento { background: var(--spento); } .pallino.verde { background: var(--verde); }

/* Pulsanti a pillola, come in Creative Studio */
.btn { border: 0; border-radius: 999px; background: var(--pulsante); color: var(--inchiostro); font-weight: 600; padding: 8px 16px; min-height: 36px; font-size: 14px; }
.btn:hover { background: var(--pulsante-hover); border-color: transparent; }
.btn.piccolo { min-height: 30px; padding: 5px 13px; font-size: 13px; }
.btn.pieno, .btn.scuro { background: var(--attiva); color: var(--attiva-testo); }
.btn.pieno:hover, .btn.scuro:hover { filter: brightness(1.15); }
.btn.oro { background: var(--oro-fondo); color: var(--oro-testo); }
.btn.rosso { background: var(--rosso-fondo); color: var(--rosso); }
.chip { border: 0; background: var(--pulsante); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 13.5px; min-height: 34px; }
.chip.attiva { background: var(--attiva); color: var(--attiva-testo); }
.filtri input[type=search], .filtri select, .filtri input[type=date] { border: 1.5px solid var(--linea-forte); border-radius: 999px; padding: 7px 14px; }
.tabella-box, .vuoto, .dettaglio-giorno, .mini, .riep, .giorno { border-color: transparent; box-shadow: var(--ombra); }
.tabella-box { border-radius: var(--raggio); }
table.tab th { background: var(--carta2); }
.velo .finestra { border-radius: 18px; box-shadow: var(--finestra-ombra); }
.finestra h3 { font-weight: 600; }

/* Struttura: barra laterale + contenuto */
.guscio { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.lato { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 20px 14px 14px; display: flex; flex-direction: column; gap: 3px; }
.marchio-barra { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.marchio-barra img { width: 34px; height: 34px; }
.marchio-barra b { display: block; font-weight: 600; font-size: 17px; line-height: 1.1; }
.marchio-barra span { font-size: 12px; color: var(--secondario); }
.voce-lato { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--inchiostro); font-size: 15px; text-align: left; cursor: pointer; }
.voce-lato .icona { color: var(--secondario); }
.voce-lato:hover { background: var(--hover); }
.voce-lato.attiva { background: var(--carta); box-shadow: var(--ombra); font-weight: 600; }
.voce-lato.attiva .icona { color: var(--inchiostro); }
.voce-lato.piccola { font-size: 13.5px; color: var(--secondario); padding: 7px 12px; }
.voce-lato .conta, .barra-telefono .conta, .menu-altro .conta { margin-left: auto; font-size: 12px; font-weight: 600; font-style: normal; background: var(--oro-chiaro); color: #fff; border-radius: 10px; padding: 1px 8px; }
.voce-lato .conta.arancio { background: var(--arancio); }
.spazio-lato { flex: 1; min-height: 16px; }
.stato-copia { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--secondario); font-size: 12.5px;
  text-align: left; padding: 10px 12px; border-radius: 10px; cursor: pointer; line-height: 1.3; }
.stato-copia:hover { background: var(--hover); }
.stato-copia.attenzione .pallino { background: var(--arancio); }
.corpo { min-width: 0; }
.barra-alta { display: flex; align-items: center; gap: 14px; padding: 18px 28px 18px 8px; }
.marchio-telefono { display: none; align-items: center; gap: 8px; }
.marchio-telefono img { width: 28px; height: 28px; }
.marchio-telefono b { font-weight: 600; font-size: 17px; }
.cerca-tutto { flex: 1; max-width: 580px; margin: 0 auto; display: flex; align-items: center; gap: 10px; background: var(--campo); border: 1.5px solid var(--linea-forte);
  border-radius: 999px; padding: 0 16px; color: var(--secondario); }
.cerca-tutto:focus-within { border-color: var(--inchiostro); }
.cerca-tutto input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 10px 0; font-size: 15px; color: var(--inchiostro); }
.pulsanti-alti { display: flex; gap: 10px; }

/* Home */
.saluto h1 { font-size: 27px; font-weight: 600; margin: 0 0 4px; }
.saluto p { color: var(--secondario); margin: 0 0 20px; }
.scheda { background: var(--carta); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px; border: 0; text-align: left; color: inherit; font: inherit; }
button.scheda { cursor: pointer; width: 100%; }
button.scheda:hover { box-shadow: var(--ombra-forte); }
.numeri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.numero span { color: var(--secondario); font-size: 13.5px; }
.numero b { display: block; font-size: 30px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.numero b.arancio { color: var(--arancio); }
.numero small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--secondario); }
.griglia-home { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.griglia-home h2, .gruppo-risultati h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; }
.griglia-home h2 small, .gruppo-risultati h2 small { font-size: 13px; color: var(--secondario); font-weight: 400; }
.fare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.compito { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.compito .tipo { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondario); text-transform: uppercase; letter-spacing: .04em; }
.compito b { font-size: 16px; font-weight: 600; }
.compito p { margin: 0; color: var(--secondario); font-size: 14px; }
.compito .azioni { margin-top: auto; justify-content: flex-end; padding-top: 8px; }
.vuoto-fare { color: var(--secondario); text-align: center; padding: 36px 18px; }
.colonna-destra { display: flex; flex-direction: column; gap: 18px; }
.riga-evento { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; padding: 10px 0;
  border: 0; border-top: 1px solid var(--riga); background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.eventi h2 + .riga-evento { border-top: 0; }
.riga-evento:hover .nome { text-decoration: underline; }
.giorno-box { text-align: center; background: var(--riquadro); border-radius: 10px; padding: 5px 0; line-height: 1.05; }
.giorno-box b { display: block; font-size: 19px; }
.giorno-box span { font-size: 11px; text-transform: uppercase; color: var(--secondario); }
.testo-evento { min-width: 0; }
.testo-evento .nome, .testo-evento .mut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etichetta-tipo { font-size: 11.5px; font-weight: 600; border-radius: 6px; padding: 2px 8px; color: #fff; background: var(--altro); white-space: nowrap; }
.etichetta-tipo.matrimonio { background: var(--matrimonio); } .etichetta-tipo.battesimo { background: var(--battesimo); }
.etichetta-tipo.diciottesimo { background: var(--diciottesimo); }
.mini-mese { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.mini-mese .gs { color: var(--secondario); font-size: 12.5px; font-weight: 600; padding-bottom: 2px; }
.mini-mese .g { position: relative; height: 46px; border: 1px solid var(--linea-forte); border-radius: 9px; background: transparent; font: inherit;
  color: var(--inchiostro); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.mini-mese .g .n { font-size: 17px; font-weight: 600; }
.mini-mese .g:hover { background: var(--hover); }
.mini-mese .g.passato { color: var(--spento); border-color: var(--linea); }
.mini-mese .g.oggi { border: 2px solid var(--oro-chiaro); }
.mini-mese .g.oggi .n { color: var(--oro-testo); }
.mini-mese .g.bloccato-full { background: var(--bloccato); color: var(--bloccato-testo); border-color: var(--bloccato); }
.mini-mese .punto { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--altro); }
.mini-mese .punto.matrimonio { background: var(--matrimonio); } .mini-mese .punto.battesimo { background: var(--battesimo); }
.mini-mese .punto.diciottesimo { background: var(--diciottesimo); }
.mini-mese .barre { position: absolute; left: 6px; right: 6px; bottom: 5px; display: flex; gap: 3px; }
.mini-mese .barra { flex: 1; height: 4px; border-radius: 2px; background: var(--pomeriggio); }
.mini-mese .barra.morning { background: var(--mattina); } .mini-mese .barra.orario { background: var(--pomeriggio); opacity: .6; }
.sottotitolo { font-size: 18px; font-weight: 600; margin: 22px 0 12px; display: flex; align-items: baseline; gap: 8px; }
.sottotitolo small { font-size: 13px; color: var(--secondario); font-weight: 400; }
.fare.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numero .barra-incassi { margin: 8px 0 0; }
.cambia-tema { margin-bottom: 2px; }
.barra-incassi { height: 8px; border-radius: 5px; background: var(--pulsante); overflow: hidden; margin: 2px 0 8px; }
.barra-incassi div { height: 100%; background: var(--verde); }
.righe-incassi { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--secondario); flex-wrap: wrap; }
.righe-incassi b { color: var(--inchiostro); }
.copia-telefono { display: none; margin-top: 18px; }

/* Ricerca in tutta la Suite */
.gruppo-risultati { margin-bottom: 14px; }
.riga-risultato { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; width: 100%; border: 0; border-top: 1px solid var(--riga);
  background: transparent; padding: 10px 2px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.gruppo-risultati h2 + .riga-risultato { border-top: 0; }
.riga-risultato:hover b { text-decoration: underline; }

/* Accesso */
.accesso form { border: 0; box-shadow: var(--ombra); border-radius: 18px; }
.marchio .monogramma { width: 64px; height: 64px; display: block; margin: 0 auto 10px; }
.marchio .scritta { width: 230px; max-width: 100%; display: block; margin: 0 auto; }
.accesso h1 { font-weight: 600; font-size: 22px; }
.accesso input { border-radius: 999px; }

/* Telefono: barra in basso */
.barra-telefono { display: none; }
.menu-altro, .velo-altro { display: none; }

/* iPad (13" in verticale e computer piccoli): barra laterale con sole icone ed etichetta sotto */
@media (max-width: 1279px) and (min-width: 761px) {
  .guscio { grid-template-columns: 92px minmax(0, 1fr); }
  .lato { padding: 16px 8px 12px; align-items: stretch; }
  .marchio-barra { justify-content: center; padding: 0 0 14px; }
  .marchio-barra .nome-barra { display: none; }
  .voce-lato { flex-direction: column; gap: 4px; padding: 9px 4px; font-size: 11.5px; text-align: center; position: relative; }
  .voce-lato .icona { width: 22px; height: 22px; }
  .voce-lato .conta { position: absolute; top: 4px; right: 10px; margin: 0; padding: 0 6px; font-size: 11px; }
  .stato-copia { flex-direction: column; text-align: center; font-size: 11px; padding: 8px 2px; }
  .pulsanti-alti .btn:not(.scuro) { display: none; }
  main { padding: 4px 20px 50px 4px; }
  .barra-alta { padding: 16px 20px 16px 4px; }
  .griglia-home { grid-template-columns: minmax(0, 1fr); }
  .colonna-destra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonna-destra .eventi { grid-row: span 2; }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fare.tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) and (min-width: 1000px) {
  .numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Telefono */
@media (max-width: 760px) {
  .guscio { display: block; }
  .lato { display: none; }
  .barra-alta { flex-wrap: wrap; padding: 14px 16px 12px; gap: 12px; }
  .marchio-telefono { display: flex; width: 100%; }
  .cerca-tutto { max-width: none; width: 100%; }
  .cerca-tutto input { font-size: 16px; }
  .pulsanti-alti { display: none; }
  main { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
  .saluto h1 { font-size: 23px; }
  .numeri { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .numero b { font-size: 23px; }
  .griglia-home, .fare, .fare.tre { grid-template-columns: minmax(0, 1fr); }
  .compito { min-height: 0; }
  .copia-telefono { display: block; }
  .barra-telefono { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around;
    background: var(--barra-tel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--linea);
    padding: 6px 2px calc(8px + env(safe-area-inset-bottom)); }
  .barra-telefono button { position: relative; flex: 1; border: 0; background: transparent; color: var(--secondario); font: inherit; font-size: 10.5px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
  .barra-telefono button.attiva { color: var(--inchiostro); font-weight: 600; }
  .barra-telefono .icona { width: 23px; height: 23px; }
  .barra-telefono button:last-child .icona { stroke-width: 3; }
  .barra-telefono .conta { position: absolute; top: 0; left: 50%; margin-left: 6px; padding: 0 5px; font-size: 10px; }
  .velo-altro { display: block; position: fixed; inset: 0; z-index: 38; background: var(--velo); }
  .menu-altro { display: flex; flex-direction: column; position: fixed; left: 12px; right: 12px; z-index: 39; bottom: calc(76px + env(safe-area-inset-bottom));
    background: var(--carta); border-radius: 18px; padding: 8px; box-shadow: var(--finestra-ombra); }
  .menu-altro button { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; font: inherit; font-size: 16px; padding: 13px 12px;
    border-radius: 10px; text-align: left; color: var(--inchiostro); }
  .menu-altro button:active { background: var(--hover); }
  .notifica { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Loghi: versione per il chiaro e per lo scuro */
:root[data-tema="scuro"] .solo-chiaro, :root:not([data-tema="scuro"]) .solo-scuro { display: none !important; }
.marchio .completo { width: 190px; max-width: 100%; display: block; margin: 0 auto; }

/* Campi per il Portachiavi */
.nascosto-accessibile { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.modulo-password .campo-form { display: block; margin: 12px 0 0; }
.modulo-password .campo-form span { display: block; font-size: 13px; color: var(--secondario); margin-bottom: 5px; }
.modulo-password input[type=password] { width: 100%; border: 1.5px solid var(--linea-forte); border-radius: 10px; padding: 10px 12px; font-size: 16px; background: var(--campo); color: var(--inchiostro); }
.modulo-password .azioni { justify-content: flex-end; margin-top: 16px; }
.campo-np { display: block; text-align: left; margin: 12px 0 0; }
.campo-np span { display: block; font-size: 13px; color: var(--secondario); margin-bottom: 5px; }
.campo-np input { text-align: left !important; }
#salva { margin-top: 18px; }

/* Nuova consegna */
.modulo-consegna { width: min(640px, 100%); }
.modulo-consegna .campo-form { display: block; margin: 12px 0 0; }
.modulo-consegna .campo-form span { display: block; font-size: 13px; color: var(--secondario); margin-bottom: 5px; }
.modulo-consegna input:not([type=checkbox]), .modulo-consegna select, .modulo-consegna textarea { width: 100%; border: 1.5px solid var(--linea-forte);
  border-radius: 10px; padding: 9px 12px; font-size: 15px; background: var(--campo); color: var(--inchiostro); font-family: inherit; }
.modulo-consegna .due-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.modulo-consegna .spunte-consegna { display: flex; gap: 22px; margin-top: 14px; font-size: 15px; }
.modulo-consegna .scelta-clienti { margin-top: 6px; max-height: 240px; overflow: auto; }
.modulo-consegna .azioni { justify-content: flex-end; margin-top: 16px; }
@media (max-width: 760px) { .modulo-consegna .due-campi { grid-template-columns: 1fr; } }
.modulo-consegna .spunte-consegna label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.modulo-consegna input[type=checkbox] { width: 18px; height: 18px; padding: 0; margin: 0; min-height: 0; accent-color: var(--oro); }