@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 200 800; font-display: swap; src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 700; font-display: swap; src: url("/fonts/caveat-latin-700-normal.woff2") format("woff2"); }

:root {
  --inchiostro: #172441;
  --blu: #23487C;
  --sole: #F5C518;
  --sole-chiaro: #FFF4C7;
  --sfondo: #FFFDF7;
  --carta: #FFFFFF;
  --superficie: #F1F3F7;
  --linea: #E2E5EC;
  --tenue: #4A5670;
  --cielo: #E3EEFA;
  --pesca: #FFE7D6;
  --menta: #DFF3E8;
  --lilla: #EFE3F6;
  --ombra: 0 2px 10px rgba(23, 36, 65, 0.08);
  --titoli: "Bricolage Grotesque", "Atkinson Hyperlegible", system-ui, sans-serif;
  --testo: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mano: "Caveat", "Bradley Hand", cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; background: var(--sfondo); color: var(--inchiostro);
  font-family: var(--testo); font-size: 17px; line-height: 1.5;
  padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; }
a { color: var(--blu); }
h1, h2, h3 { font-family: var(--titoli); line-height: 1.1; margin: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }
.mano { font-family: var(--mano); font-weight: 700; }

.salta { position: absolute; left: -9999px; }
.salta:focus { left: 12px; top: 12px; z-index: 20; background: #fff; padding: 8px 12px; }

/* Testata */
.testata {
  position: sticky; top: 0; z-index: 10; background: var(--sfondo);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 18px 8px;
  display: flex; align-items: center; gap: 16px;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--sfondo); }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.marchio img { width: 46px; height: 46px; flex: none; }
.marchio strong { display: block; font-family: var(--titoli); font-weight: 800; font-size: 17px; line-height: 1.12; }
.marchio small { display: block; color: var(--tenue); font-size: 13px; }
.menu-largo { display: none; gap: 2px; }
.menu-largo a { padding: 10px 14px; border-radius: 14px; text-decoration: none; color: var(--inchiostro); font-weight: 700; }
.menu-largo a[aria-current="page"] { background: var(--sole); }

/* Barra in basso (telefono): una pillola scura sospesa */
.barra {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 10;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
  height: 66px; padding: 0 6px; border-radius: 24px; background: var(--inchiostro);
  box-shadow: 0 6px 20px rgba(23, 36, 65, 0.25);
}
.barra a {
  height: 54px; margin: 0 2px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; font-weight: 700; color: #C9D2E3; text-decoration: none;
}
.barra a[aria-current="page"] { background: var(--sole); color: var(--inchiostro); }
.barra svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

main { max-width: 1100px; margin: 0 auto; outline: none; }
.caricamento, .errore { padding: 32px 20px; }
.blocco { padding: 22px 20px 4px; }
.blocco > h2 { font-size: 22px; margin-bottom: 12px; }
.riga-titolo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.riga-titolo h2 { font-size: 22px; }
.riga-titolo a { font-weight: 700; font-size: 15px; text-decoration: none; }
.tenue { color: var(--tenue); }
.piccolo { font-size: 14px; }

/* Titoli delle pagine con l'evidenziatore giallo */
.titolo-pagina { font-size: 34px; font-weight: 800; padding: 16px 20px 12px; letter-spacing: -0.01em; }
.titolo-pagina span { background: linear-gradient(transparent 58%, var(--sole) 58%, var(--sole) 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; }

/* Oggi: testata con la pennellata */
.testa-oggi { padding: 6px 20px 4px; }
.zona-pennellata { position: relative; padding: 20px 20px 28px; margin: 0 -14px; }
.zona-pennellata > * { position: relative; }
.zona-pennellata .pennellata { position: absolute; inset: 0; width: 100%; height: 100%; }
.tempo-lit { display: flex; align-items: center; gap: 8px; }
.tempo-lit .mano { font-size: 28px; line-height: 1.05; }
.colore-lit { width: 14px; height: 14px; border-radius: 50%; flex: none; border: 2px solid var(--inchiostro); }
.testa-oggi h1 { font-size: clamp(36px, 10.5vw, 60px); font-weight: 800; letter-spacing: -0.02em; line-height: 0.98; margin: 4px 0 2px; }
.santo { font-size: 15px; margin-top: -2px; }
.santo.ricordo { color: var(--tenue); }

.giornata { margin: 22px 14px 0; background: var(--carta); border-radius: 22px; box-shadow: var(--ombra); padding: 14px 6px 8px; }
.giornata .riga-titolo { padding: 0 12px; margin-bottom: 4px; }
.giornata h2 { font-size: 19px; }
.voce-g { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 14px; }
.voce-g .ora { font-family: var(--titoli); font-weight: 800; font-size: 19px; width: 54px; flex: none; }
.voce-g .cosa { flex: 1; min-width: 0; }
.voce-g.passata { color: #8A93A8; }
.voce-g.passata .tenue { color: #A3AABB; }
.voce-g.prossima { background: var(--sole-chiaro); }
.voce-g .segno { font-family: var(--mano); font-weight: 700; font-size: 20px; color: #9A4A00; white-space: nowrap; }
.voce-g.evento .cosa strong { color: var(--blu); }

.avviso-speciale { background: var(--pesca); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.avviso-speciale hr { border: 0; height: 1px; background: rgba(154, 74, 0, 0.18); margin: 0; }

.scorrevole { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.scheda-giorno { flex: none; width: 172px; border-radius: 18px; padding: 12px 14px; scroll-snap-align: start; text-decoration: none; color: var(--inchiostro); }
.scheda-giorno:nth-child(4n+1) { background: var(--menta); }
.scheda-giorno:nth-child(4n+2) { background: var(--cielo); }
.scheda-giorno:nth-child(4n+3) { background: var(--pesca); }
.scheda-giorno:nth-child(4n+4) { background: var(--lilla); }
.scheda-giorno .quando { font-size: 13px; font-weight: 700; }
.scheda-giorno .ora { font-family: var(--titoli); font-weight: 800; font-size: 19px; display: block; }
.scheda-giorno strong { display: block; line-height: 1.25; }
.titolo-mano { font-family: var(--mano); font-weight: 700; color: var(--blu); font-size: 23px; }

.scorciatoie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.scorciatoie a { text-decoration: none; color: var(--inchiostro); font-size: 13px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scorciatoie span { width: 100%; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.scorciatoie a:nth-child(1) span { background: var(--sole); }
.scorciatoie a:nth-child(2) span { background: var(--pesca); }
.scorciatoie a:nth-child(3) span { background: var(--menta); }
.scorciatoie a:nth-child(4) span { background: var(--cielo); }
.scorciatoie svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.foglio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--carta); box-shadow: var(--ombra); text-decoration: none; color: var(--inchiostro); }

/* Filtri parrocchie */
.filtri { display: flex; gap: 8px; overflow-x: auto; padding: 0 20px 14px; scrollbar-width: none; }
.filtri button {
  flex: none; min-height: 42px; padding: 0 14px; border-radius: 21px; border: 0; box-shadow: var(--ombra);
  background: var(--carta); color: var(--inchiostro); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.filtri button[aria-pressed="true"] { background: var(--inchiostro); color: #fff; }
.pallino { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* Agenda */
.giorno { padding: 0 14px 16px; }
.giorno h2 { font-size: 18px; padding: 0 6px 8px; }
.giorno h2 .mano { font-size: 22px; color: #9A4A00; margin-right: 4px; }
.lista-giorno { background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); padding: 2px 14px; }
.evento { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.evento:last-child { border-bottom: 0; }
.evento .ora { font-family: var(--titoli); font-weight: 800; font-size: 17px; width: 54px; flex: none; }
.evento .corpo { flex: 1; min-width: 0; }
.evento .titolo { font-weight: 700; }
.evento .luogo { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; }
.tondo {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--cielo);
  color: var(--blu); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.tondo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vuoto { margin: 0 20px 20px; padding: 16px; background: var(--carta); border-radius: 18px; box-shadow: var(--ombra); }
.abbonati { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0 14px 18px; padding: 12px 14px; border-radius: 18px; background: var(--sole-chiaro); }
.abbonati .pulsante { margin-top: 0; flex: none; min-height: 44px; }

/* Messe */
.tabella { background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); padding: 2px 16px; }
.tabella .rigo { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.tabella .rigo:last-child { border-bottom: 0; }
.tabella .ora, .elenco .ora { font-family: var(--titoli); font-weight: 800; font-size: 19px; min-width: 58px; }
.elenco { background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); padding: 2px 16px; }
.elenco .rigo { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.elenco .rigo:last-child { border-bottom: 0; }
.elenco .giorno-breve { width: 96px; flex: none; font-weight: 700; }
.riquadro { background: var(--pesca); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.riquadro hr { border: 0; height: 1px; background: rgba(154, 74, 0, 0.18); margin: 0; width: 100%; }
.nota-carta { background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); padding: 14px 16px; }

/* Bacheca */
.cartolina { flex: none; width: 240px; border-radius: 20px; padding: 16px; background: var(--cielo); scroll-snap-align: start; }
.cartolina:nth-child(3n+1) { background: var(--inchiostro); color: #fff; }
.cartolina:nth-child(3n+1) .quando { color: var(--sole); }
.cartolina:nth-child(3n+1) .tenue { color: #D5DCE7; }
.cartolina:nth-child(3n+2) { background: var(--sole); }
.cartolina .quando { font-size: 13px; font-weight: 700; }
.cartolina h3 { font-size: 21px; margin: 6px 0; }
.griglia-locandine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.griglia-locandine button { border: 0; padding: 0; background: none; text-align: left; color: inherit; cursor: pointer; }
.griglia-locandine img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: var(--superficie); display: block; box-shadow: var(--ombra); }
.griglia-locandine b { display: block; margin-top: 8px; line-height: 1.25; }

dialog#locandina { border: 0; padding: 16px; width: min(560px, 100vw); max-height: 100vh; background: var(--inchiostro); color: #fff; border-radius: 20px; }
dialog#locandina::backdrop { background: rgba(23, 36, 65, 0.8); }
dialog#locandina img { width: 100%; max-height: 70vh; object-fit: contain; display: block; margin: 8px 0; }
dialog#locandina form { display: flex; justify-content: flex-end; }
dialog#locandina .descr { margin: 8px 0; }
dialog#locandina .pulsanti { margin-top: 8px; }
dialog#locandina a { color: var(--sole); }
dialog#locandina .pulsante { color: var(--inchiostro); }
.chiudi { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: #fff; color: var(--inchiostro); font-weight: 700; cursor: pointer; }

/* Iscrizioni, contatti, menu */
.carta { background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); padding: 16px; margin: 0 14px 14px; }
.carta.forte { box-shadow: 0 0 0 2px var(--sole), var(--ombra); }
.carta h2 { font-size: 24px; margin: 8px 0 6px; }
.stato { display: inline-block; font-weight: 700; font-size: 13px; padding: 3px 10px; border-radius: 10px; background: var(--superficie); }
.stato.aperte { background: var(--sole); }
.pulsante {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 12px; padding: 0 18px;
  border-radius: 14px; background: var(--inchiostro); color: #fff; font-weight: 700; text-decoration: none; border: 0;
}
.pulsante.giallo { background: var(--sole); color: var(--inchiostro); }
.pulsante.chiaro { background: var(--superficie); color: var(--inchiostro); }
.segreteria { background: var(--inchiostro); color: #fff; border-radius: 20px; padding: 16px; margin: 0 14px 14px; }
.segreteria .tenue { color: #D5DCE7; }
.segreteria a { color: var(--sole); }
.segreteria .pulsante { color: var(--inchiostro); }
.parrocchia { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--carta); box-shadow: var(--ombra); border-radius: 18px; margin: 0 14px 10px; }
.parrocchia .pallino { width: 14px; height: 14px; }
.parrocchia div { flex: 1; min-width: 0; }
.elenco-menu { display: flex; flex-direction: column; background: var(--carta); box-shadow: var(--ombra); border-radius: 20px; overflow: hidden; }
.voce-menu { display: flex; flex-direction: column; padding: 14px 16px; min-height: 56px; justify-content: center; text-decoration: none; color: var(--inchiostro); border-bottom: 1px solid var(--linea); }
.voce-menu:last-child { border-bottom: 0; }
.voce-menu:hover { background: var(--sole-chiaro); }
.voce-redazione { display: flex; flex-direction: column; padding: 12px 16px; border: 1px dashed #C5CBD8; border-radius: 18px; text-decoration: none; color: var(--inchiostro); font-weight: 700; }

/* Pulsanti e testi formattati */
.pulsanti { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pulsanti .pulsante { margin-top: 0; flex: 1 1 220px; text-align: center; padding: 10px 16px; line-height: 1.25; }
.pulsanti .piccolo-p { flex: 0 1 auto; min-height: 40px; font-size: 15px; background: var(--sole-chiaro); color: var(--inchiostro); }
.cartolina:nth-child(3n+1) .piccolo-p { background: var(--sole); }
.cartolina:nth-child(3n+2) .piccolo-p { background: #fff; }
.testo p { margin: 0 0 12px; }
.testo ul { margin: 0 0 12px; padding-left: 22px; }
.testo li { margin-bottom: 4px; }
.testo h2 { font-size: 22px; margin: 22px 0 8px; }
.testo h3 { font-size: 19px; margin: 18px 0 6px; }
.testo > :last-child { margin-bottom: 0; }
.pagina { padding-bottom: 28px; max-width: 760px; }
.pagina-carta { background: var(--carta); border-radius: 22px; box-shadow: var(--ombra); padding: 18px; margin: 0 14px; max-width: 760px; }
.briciole { padding: 10px 20px 0; font-weight: 700; }
.briciole a { text-decoration: none; }

/* Calendario */
dialog#calendario { border: 0; border-radius: 24px 24px 0 0; padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)); width: 100vw; max-width: 520px; margin: auto auto 0; background: var(--sfondo); }
@media (min-width: 600px) { dialog#calendario { border-radius: 24px; margin: auto; } }
dialog#calendario::backdrop { background: rgba(23, 36, 65, 0.55); }
dialog#calendario form { display: flex; justify-content: flex-end; }
dialog#calendario .chiudi { background: var(--superficie); }
dialog#calendario h2 { font-size: 24px; margin: 0 0 6px; }
.scelte-cal { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.scelte-cal .pulsante { margin-top: 0; width: 100%; font: inherit; font-weight: 700; cursor: pointer; }
button.link { border: 0; background: none; padding: 0; color: var(--blu); text-decoration: underline; font: inherit; font-weight: 700; cursor: pointer; }

.piede { color: var(--tenue); font-size: 14px; padding: 24px 20px; max-width: 1100px; margin: 0 auto; }

@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .barra { display: none; }
  .menu-largo { display: flex; }
  .testata { padding-left: max(24px, calc((100vw - 1100px) / 2)); padding-right: max(24px, calc((100vw - 1100px) / 2)); }
  /* due colonne che non si allargano mai oltre la pagina: a sinistra la giornata, a destra il resto */
  .home-griglia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 28px; align-items: start; padding: 0 20px; }
  .home-griglia > * { min-width: 0; }
  .home-griglia .giornata { margin: 22px 0 0; padding: 16px 10px 10px; }
  .home-griglia .blocco { padding-left: 0; padding-right: 0; }
  .home-griglia .voce-g .cosa { overflow-wrap: anywhere; }
  .giornata .riga-titolo { flex-wrap: wrap; }
  .carosello, .scorrevole { max-width: 100%; }
  .testa-oggi { padding-left: 20px; padding-right: 20px; }
  .zona-pennellata { margin: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }
.foglio svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.scheda-giorno .luogo-scheda { display: block; font-size: 14px; margin-top: 4px; opacity: .8; }
.avviso-speciale .luogo, .riquadro .luogo { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-top: 4px; }
.voce-g, .voce-speciale, .link-carta { color: inherit; text-decoration: none; }
a.voce-g:hover { background: var(--sole-chiaro); }
.voce-speciale { display: block; }
.evento { transition: background-color .6s; border-radius: 12px; }
.evento.evidenziato { background: var(--sole-chiaro); box-shadow: 0 0 0 8px var(--sole-chiaro); }

/* Testi liturgici e foglio avvisi */
blockquote.tutti { margin: 6px 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--sole-chiaro); font-weight: 700; }
blockquote.tutti::before { content: "Tutti"; display: block; font-family: var(--mano); font-size: 19px; color: #9A4A00; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.testo em { color: var(--tenue); }
.rif { display: inline-block; font-size: 12px; font-weight: 700; color: var(--blu); background: var(--cielo); border-radius: 8px; padding: 1px 7px; vertical-align: 1px; }
.sottotitolo-pagina { margin: -6px 20px 14px; color: var(--tenue); }
.foglio.periodo { background: var(--lilla); box-shadow: none; margin-bottom: 8px; }
.voce-menu.esterno strong::after { content: " ↗"; color: var(--tenue); font-weight: 400; }
.foglio-html .titolo-foglio { font-size: 24px; margin-bottom: 14px; }
.foglio-html h3 { font-size: 17px; margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 3px solid var(--sole); display: inline-block; }
.foglio-html p { margin: 0 0 8px; }
.foglio-html table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0; background: var(--sole-chiaro); border-radius: 14px; overflow: hidden; }
.foglio-html td, .foglio-html th { padding: 10px 12px; vertical-align: top; text-align: left; }
.foglio-html td p:last-child { margin-bottom: 0; }
.foglio-html ul, .foglio-html ol { padding-left: 22px; margin: 0 0 10px; }
.azioni-foglio { display: flex; flex-wrap: wrap; gap: 8px; }
.azioni-foglio .pulsante { margin-top: 0; flex: 1 1 220px; cursor: pointer; font: inherit; font-weight: 700; }
.versione { font-size: 12px; opacity: .7; }

@media print {
  .testata, .barra, .piede, .azioni-foglio, .titolo-pagina, .briciole, body::before { display: none !important; }
  body { background: #fff; padding: 0; font-size: 12pt; }
  .pagina-carta { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .foglio-html table { background: #fff; border: 1.5pt solid #172441; }
  section.blocco { display: none; }
}

.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Profilo, per te, notifiche */
.invito-profilo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 20px; background: var(--lilla); text-decoration: none; color: var(--inchiostro); }
.invito-profilo span { font-size: 15px; }
.per-te .scheda-giorno { box-shadow: inset 0 0 0 2px rgba(23, 36, 65, 0.08); }
.tag-perte { display: inline-block; font-family: var(--mano); font-size: 18px; color: #9A4A00; font-weight: 700; margin-left: 4px; }
.scelte-gruppi { display: grid; gap: 4px; }
@media (min-width: 600px) { .scelte-gruppi { grid-template-columns: 1fr 1fr; } }
.gruppo { display: flex; gap: 10px; align-items: flex-start; padding: 8px 4px; cursor: pointer; }
.gruppo input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--inchiostro); flex: none; }
.selezione { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #D3D8E2; border-radius: 12px; font: inherit; background: var(--carta); color: var(--inchiostro); }
.passi { padding-left: 22px; }
.passi li { margin-bottom: 6px; }
.avviso-breve { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--inchiostro); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; max-width: calc(100vw - 32px); }
.avviso-breve.visibile { opacity: 1; }
.campanella { width: 44px; height: 44px; border-radius: 22px; background: var(--carta); box-shadow: var(--ombra); display: flex; align-items: center; justify-content: center; color: var(--inchiostro); flex: none; }
.campanella svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .campanella { order: 3; } }

/* Appuntamenti con un colore scelto dalla redazione */
.scheda-giorno.colorata, .cartolina.colorata { box-shadow: none; }
.scheda-giorno.colorata .quando, .cartolina.colorata .quando, .cartolina.colorata .tenue, .scheda-giorno.colorata .luogo-scheda { color: inherit; opacity: .9; }
.cartolina.colorata .link-carta { color: inherit; }
.evento.colorata { box-shadow: inset 5px 0 0 var(--accento); padding-left: 12px; margin-left: -6px; border-radius: 6px; }
.ora .fine { display: block; font-family: var(--testo); font-weight: 400; font-size: 12px; color: var(--tenue); line-height: 1.2; }
.voce-g.passata .ora .fine { color: inherit; }

/* Filtri a due righe */
.pannello-filtri { margin: 0 14px 16px; padding: 10px 0 4px; background: var(--carta); border-radius: 20px; box-shadow: var(--ombra); }
.riga-filtro { padding: 2px 0 6px; }
.nome-filtro { display: block; padding: 0 14px 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.pannello-filtri .filtri { padding: 0 14px 4px; }
.pannello-filtri .filtri button { box-shadow: none; background: var(--superficie); min-height: 38px; }
.pannello-filtri .filtri button[aria-pressed="true"] { background: var(--inchiostro); color: #fff; }
.pannello-filtri .filtri.gruppi button[aria-pressed="true"] { background: var(--sole); color: var(--inchiostro); }
.filtri-attivi { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 14px 4px; padding: 8px 12px; border-radius: 12px; background: var(--sole-chiaro); font-size: 14px; }

/* Il prossimo grande appuntamento */
.evidenza { margin-top: 18px; }
.evidenza h2 { font-size: 21px; }
.carosello { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 14px 10px; scrollbar-width: none; }
.slide { position: relative; flex: none; width: calc(100% - 28px); max-width: 520px; min-height: 300px; border-radius: 24px; overflow: hidden; scroll-snap-align: center; box-shadow: 0 8px 24px rgba(23, 36, 65, 0.18); }
.contenuto-slide { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; }
.testa-slide { display: flex; gap: 14px; align-items: flex-start; }
.slide h3 { font-size: 21px; line-height: 1.12; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dettagli-slide { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; min-width: 0; }
.dettagli-slide .conto-slide { font-size: 26px; line-height: 1; }
.luogo-slide { font-weight: 400; overflow-wrap: anywhere; }
.descr-slide { margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.azioni-evidenza { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
.pill-chiara, .pill-vetro { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer; }
.pill-chiara { background: var(--sole); color: var(--inchiostro); }
.pill-vetro { background: rgba(255, 255, 255, 0.25); color: inherit; }
.senza-locandina .pill-vetro { background: rgba(255, 255, 255, 0.6); }
.con-locandina { color: #fff; background: var(--inchiostro); }
.con-locandina .sfondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) saturate(1.3); transform: scale(1.25); }
.con-locandina .velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 36, 65, 0.25), rgba(23, 36, 65, 0.82)); }
.con-locandina .miniatura { flex: none; width: 112px; height: 150px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); cursor: pointer; }
.con-locandina .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.data-in-linea b { font-family: var(--titoli); font-weight: 800; font-size: 40px; line-height: 1; }
.data-in-linea small { font-weight: 700; letter-spacing: .08em; }
.senza-locandina .data-grande { flex: none; width: 96px; height: 104px; border-radius: 18px; background: rgba(255, 255, 255, 0.65); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.senza-locandina .data-grande b { font-family: var(--titoli); font-weight: 800; font-size: 46px; line-height: .9; }
.senza-locandina .data-grande small { font-weight: 700; letter-spacing: .08em; font-size: 12px; }
.verso-bacheca { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px; background: var(--inchiostro); color: #fff; text-decoration: none; width: 70%; }
.verso-bacheca .pila { position: absolute; top: 18px; left: 18px; right: 18px; height: 150px; }
.verso-bacheca .pila img { position: absolute; width: 96px; height: 128px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }
.verso-bacheca .pila img:nth-child(1) { left: 0; top: 14px; transform: rotate(-7deg); }
.verso-bacheca .pila img:nth-child(2) { left: 30%; top: 0; transform: rotate(2deg); z-index: 1; }
.verso-bacheca .pila img:nth-child(3) { right: 0; top: 16px; transform: rotate(8deg); }
.verso-bacheca .pill-chiara { align-self: flex-start; }
.link-bacheca { margin: 2px 20px 0; text-align: right; font-weight: 700; }
.link-bacheca a { text-decoration: none; }

/* Ricorrenti e annullati */
.tag-ricorrente { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: var(--superficie); color: var(--tenue); vertical-align: 2px; }
.tag-annullato { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: #FDE2E1; color: #8A1C14; vertical-align: 2px; }
.evento.annullato .titolo, .evento.annullato .ora, .voce-g.annullato .ora { text-decoration: line-through; opacity: .7; }
.voce-g.annullato { color: #8A1C14; }
.interruttore { display: flex; gap: 10px; align-items: center; margin: -6px 20px 14px; font-size: 15px; cursor: pointer; }
.interruttore input { width: 22px; height: 22px; accent-color: var(--inchiostro); flex: none; }

/* Messe giorno per giorno */
.giorno-messe { margin-bottom: 14px; }
.giorno-messe h3 { font-size: 17px; margin: 0 4px 6px; }
.giorno-messe h3 .mano { font-size: 21px; color: #9A4A00; }
.elenco .rigo.sospesa { color: #8A1C14; }
.elenco .rigo.sospesa .ora { text-decoration: line-through; }

/* Tessere delle pagine in home (es. catechismo per parrocchia) */
.tessere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .tessere { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tessera { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; min-height: 92px; padding: 12px 14px; border-radius: 18px; background: var(--carta); box-shadow: inset 5px 0 0 var(--accento), var(--ombra); text-decoration: none; color: var(--inchiostro); }
.tessera strong { font-family: var(--titoli); font-size: 17px; line-height: 1.15; }
.tessera .piccolo { color: var(--tenue); }
.segnaposto-prossimi { margin: 6px 0 14px; }
.archivio-locandine summary { font-family: var(--titoli); font-weight: 700; font-size: 19px; cursor: pointer; }
.testo code { font-size: .92em; background: var(--superficie); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.fuori-periodo { margin: -4px 20px 14px; padding: 10px 14px; border-radius: 14px; background: var(--lilla); font-size: 15px; }