/* Timbrature — foglio di stile.
   Niente caratteri o librerie da internet: il programma deve funzionare
   anche su un PC senza connessione. */

:root {
  /* sabbia chiara: il blu del logo ci sta sopra come sul logo stesso */
  --sfondo: #f6f3ee;
  --superficie: #ffffff;
  --superficie-2: #faf8f4;
  --testo: #18212f;
  --tenue: #5d6878;
  --bordo: #e8e2d8;
  --bordo-forte: #d4ccbf;
  /* il blu-verde del logo Carbonifera */
  --accento: #42707f;
  --accento-scuro: #335a67;
  --accento-tenue: #e8f0f3;
  --domenica: #f5f1ea;
  --festa: #fbefef;
  --festa-testo: #a33a3a;
  --avviso: #9a5800;
  --avviso-tenue: #fff5dc;
  --errore: #b42318;
  --errore-tenue: #fdeeec;
  --ok: #127a46;
  --raggio: 12px;
  --ombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--accento); }
h1, h2 { line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 24px; margin: 0; font-weight: 650; }
h2 { font-size: 17px; margin: 0 0 12px; font-weight: 650; }
code { font-size: 12px; background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 4px; padding: 1px 4px; word-break: break-all; }
kbd {
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--superficie); border: 1px solid var(--bordo-forte); border-bottom-width: 2px;
  border-radius: 4px; padding: 2px 5px;
}
.nascosto {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.tenue { color: var(--tenue); }
.piccolo { font-size: 13px; }
.avvertenza { color: var(--avviso); }
.solo-stampa, .nota-stampa { display: none; }
/* l'attributo hidden deve vincere anche su .bottone (che e' inline-flex) */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- testata */

.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  height: 68px;
  /* logo e menu allineati ai bordi della pagina, anche sugli schermi larghi */
  padding: 0 max(32px, calc((100% - 1600px) / 2 + 32px));
  background: var(--superficie);
}
/* sotto la testata, al posto della riga dritta, la linea del mare del logo */
.testata::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='8' viewBox='0 0 44 8'%3E%3Cpath d='M0 4.5 C 5.5 1, 11 1, 16.5 4.5 S 27.5 8, 33 4.5 S 44 1, 44 1' fill='none' stroke='%2342707f' stroke-width='1.3' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E") repeat-x left center / 44px 8px;
}
.marchio { display: flex; align-items: center; gap: 10px; color: var(--testo); text-decoration: none; flex-shrink: 0; }
.logo { width: 32px; height: 32px; color: var(--accento); flex-shrink: 0; }
.logo-locale { width: 54px; height: 54px; flex-shrink: 0; display: block; }
.marchio-testo strong { display: block; font-size: 16px; font-weight: 650; }
/* il nome del locale scritto come nel logo: maiuscolo e spaziato */
.marchio-testo small {
  display: block; margin-top: 1px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 9.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--accento);
}
.menu { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a, .account a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  color: var(--tenue); text-decoration: none; font-weight: 550; white-space: nowrap;
}
.menu a:hover, .account a:hover { background: var(--sfondo); color: var(--testo); }
.menu a[aria-current="page"], .account a[aria-current="page"] {
  color: var(--accento-scuro);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M1 3.5 C 4 0.5, 7 0.5, 10 3.5 S 16 6.5, 19 3.5 S 25 0.5, 27 2.5' fill='none' stroke='%2342707f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom 1px / 26px 6px;
}
.menu a[aria-current="page"]:hover, .account a[aria-current="page"]:hover {
  background: var(--sfondo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='6' viewBox='0 0 28 6'%3E%3Cpath d='M1 3.5 C 4 0.5, 7 0.5, 10 3.5 S 16 6.5, 19 3.5 S 25 0.5, 27 2.5' fill='none' stroke='%2342707f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center bottom 1px / 26px 6px;
}
.account { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.account svg { width: 18px; height: 18px; }
.account form { margin: 0; }
.esci {
  font: inherit; font-weight: 550; color: var(--tenue); background: none; border: 0;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
}
.esci:hover { background: var(--sfondo); color: var(--testo); }

/* ---------------------------------------------------------------- pagina */

/* Larga fino a 1600 punti: sugli schermi del Mac (1440-1680) quasi tutta la
   larghezza, senza le strisce vuote ai lati; oltre, le tabelle diventerebbero
   troppo sparse per leggerle bene. */
.pagina { max-width: 1600px; margin: 0 auto; padding: 24px 32px 48px; }
.intestazione {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 14px 24px; margin-bottom: 18px;
}
.sottotitolo { margin: 6px 0 0; color: var(--tenue); }
.sottotitolo strong { color: var(--testo); font-variant-numeric: tabular-nums; }
.navigazione { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.salta { margin: 0; }
.salta input, .scegli-dipendente select {
  height: 38px; padding: 0 10px; font: inherit;
  border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--superficie); color: var(--testo);
}
.scegli-dipendente { margin: 0; }
.scegli-dipendente select { max-width: 230px; padding-right: 28px; cursor: pointer; }

/* il cartellino: il nome e' un titolo vero, con le iniziali in un cerchio
   come il logo; per cambiare dipendente c'e' la tendina tra i pulsanti */
.titolo-dipendente { display: flex; align-items: center; gap: 14px; min-width: 0; }
.iniziali {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accento-tenue); color: var(--accento-scuro);
  font-size: 19px; font-weight: 700; letter-spacing: .05em;
  box-shadow: inset 0 0 0 2px rgba(66, 112, 127, .45), 0 0 0 4px var(--superficie);
}
.etichetta-uscito {
  display: inline-block; margin-left: 6px; padding: 2px 9px; vertical-align: middle;
  font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--tenue);
  border: 1px solid var(--bordo-forte); border-radius: 999px; background: var(--superficie);
}

.messaggio {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--bordo); background: var(--superficie);
}
.messaggio-ok { border-color: #b9e2c9; background: #effaf3; color: #0f5f37; }
.messaggio-promemoria { border-color: #f1d49a; background: var(--avviso-tenue); color: #7a4a00; }
.messaggio-promemoria a { font-weight: 650; color: inherit; }
.messaggio-errore { border-color: #f5c2bc; background: var(--errore-tenue); color: #8f1d14; }

.scheda { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* La barra per scorrere di lato. Sul Mac le barre normali si disegnano SOPRA
   il contenuto e coprivano l'ultima riga (il Totale): cosi' invece la barra
   ha un posto suo sotto la tabella, ed e' sempre visibile, il che dice anche
   che la tabella continua a destra. Chrome, Safari ed Edge. */
.scorrevole::-webkit-scrollbar { height: 14px; }
.scorrevole::-webkit-scrollbar-track {
  background: var(--superficie-2); border-top: 1px solid var(--bordo);
  border-radius: 0 0 var(--raggio) var(--raggio);
}
.scorrevole::-webkit-scrollbar-thumb {
  background: #b7c6cc; border: 4px solid var(--superficie-2); border-radius: 999px; min-width: 40px;
}
.scorrevole::-webkit-scrollbar-thumb:hover { background: var(--accento); }
/* Firefox non ha quelle regole: un po' di spazio sotto, dove la barra si posa */
@supports (-moz-appearance: none) {
  .scorrevole { padding-bottom: 14px; }
}
.riquadro { padding: 20px; }
.riquadro p { margin: 0 0 10px; }
.colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.titolo-sezione { margin: 32px 0 12px; font-size: 16px; color: var(--tenue); }
.tutta-larghezza { grid-column: 1 / -1; }
.firma {
  display: flex; align-items: center; gap: 12px; margin: 12px 0 14px !important; padding: 12px 14px;
  border-radius: 10px; background: var(--accento-tenue); color: var(--accento-scuro);
}
.firma img { width: 40px; height: 40px; flex-shrink: 0; }
.firma strong { color: var(--testo); }
.firma small { color: var(--tenue); font-size: 12px; }
.campo select {
  height: 42px; padding: 0 10px; font: inherit; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--superficie);
}
.avviso-mese { margin: 8px 0 0; font-size: 13px; color: var(--avviso); }

.vuoto-grande { padding: 40px 24px 48px; text-align: center; }
.vuoto-grande::before {
  content: ""; display: block; width: 230px; height: 72px; margin: 0 auto 22px; opacity: .55;
  background: url("locale/capanna.png") no-repeat center / contain;
}
.vuoto-grande h1, .vuoto-grande h2 { margin-bottom: 8px; }
.vuoto-grande p { color: var(--tenue); margin: 0 auto 20px; max-width: 460px; }

.aiuto { margin: 14px 2px 0; color: var(--tenue); font-size: 13px; }
details.aiuto summary { cursor: pointer; font-weight: 550; color: var(--accento); width: fit-content; }
details.aiuto ul { margin: 10px 0 0; padding-left: 20px; max-width: 760px; }
details.aiuto li { margin-bottom: 6px; }

/* ---------------------------------------------------------------- piede */

.piede { margin: 56px auto 28px; text-align: center; color: var(--tenue); }
.piede-capanna { display: block; width: 170px; height: auto; margin: 0 auto 10px; opacity: .45; }
/* dove la capanna c'e' gia' (pagine vuote) non si ripete in fondo */
body:has(.vuoto-grande) .piede-capanna { display: none; }
.piede-marchio { margin: 0; font-size: 10px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--accento); opacity: .8; }
.piede-versione { margin: 3px 0 0; font-size: 11px; }

/* la pagina di accesso: in fondo il mare, tre onde leggere */
.pagina-accesso { position: relative; min-height: 100vh; }
.pagina-accesso::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 56px; pointer-events: none; opacity: .7;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='8' viewBox='0 0 44 8'%3E%3Cpath d='M0 4.5 C 5.5 1, 11 1, 16.5 4.5 S 27.5 8, 33 4.5 S 44 1, 44 1' fill='none' stroke='%2342707f' stroke-width='1.3' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E") repeat-x left 0 top 8px / 44px 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='8' viewBox='0 0 44 8'%3E%3Cpath d='M0 4.5 C 5.5 1, 11 1, 16.5 4.5 S 27.5 8, 33 4.5 S 44 1, 44 1' fill='none' stroke='%2342707f' stroke-width='1.3' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E") repeat-x left 22px top 26px / 44px 8px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='8' viewBox='0 0 44 8'%3E%3Cpath d='M0 4.5 C 5.5 1, 11 1, 16.5 4.5 S 27.5 8, 33 4.5 S 44 1, 44 1' fill='none' stroke='%2342707f' stroke-width='1.3' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E") repeat-x left 11px top 44px / 44px 8px;
}
.accesso-motto { margin: 6px 0 0 !important; font-size: 10px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--accento) !important; }

/* ---------------------------------------------------------------- bottoni */

.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px;
  font: inherit; font-weight: 550; white-space: nowrap;
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--bordo-forte); border-radius: 8px;
  text-decoration: none; cursor: pointer;
}
.bottone:hover { background: var(--superficie-2); border-color: #c2b8a9; }
.bottone:focus-visible, .menu a:focus-visible, .cella:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.bottone.icona { width: 38px; padding: 0; font-size: 22px; line-height: 1; }
.bottone.attuale { color: var(--accento-scuro); border-color: #b9ced6; background: var(--accento-tenue); }
.bottone.primario { color: #fff; background: var(--accento); border-color: var(--accento); }
.bottone.primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); }
.bottone.piccolo { height: 32px; padding: 0 10px; font-size: 13px; }
.bottone.pericolo { color: var(--errore); }
.bottone.pericolo:hover { background: var(--errore-tenue); border-color: #f0b2aa; }
.bottone.largo { width: 100%; height: 44px; }

/* ---------------------------------------------------------------- moduli */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label { font-weight: 550; font-size: 14px; }
.campo input {
  height: 42px; padding: 0 12px; font: inherit; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--superficie);
}
.campo input:focus, .aggiungi input:focus, .rinomina input:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento); }
.suggerimento { margin: 0; font-size: 13px; color: var(--tenue); }
.facoltativo { font-weight: 400; color: var(--tenue); font-size: 12px; margin-left: 4px; }

.pagina-accesso .pagina { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.accesso { width: 100%; max-width: 400px; margin: 0 auto; }
.accesso-marchio { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; }
.accesso-marchio .logo-locale { width: 168px; height: 168px; margin-bottom: 14px; }
.accesso-marchio h1 { font-size: 22px; }
.accesso-marchio p { margin: 4px 0 0; color: var(--tenue); }
.modulo { padding: 24px; }

.aggiungi { padding: 16px 20px; margin-bottom: 16px; }
.aggiungi label { display: block; font-weight: 550; font-size: 14px; margin-bottom: 8px; }
.aggiungi-riga { display: flex; gap: 8px; }
.aggiungi-riga input {
  flex: 1; min-width: 0; height: 38px; padding: 0 12px; font: inherit;
  border: 1px solid var(--bordo-forte); border-radius: 8px;
}
.rinomina { display: flex; gap: 8px; align-items: center; margin: 0; }
.rinomina input {
  width: 100%; min-width: 180px; max-width: 340px; height: 34px; padding: 0 8px; font: inherit; font-weight: 550;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--testo);
}
.rinomina input:hover { border-color: var(--bordo-forte); background: var(--superficie); }

/* ---------------------------------------------------------------- tabelle */

.griglia { width: 100%; border-collapse: separate; border-spacing: 0; }
.griglia th, .griglia td { padding: 8px 12px; border-bottom: 1px solid var(--bordo); text-align: left; vertical-align: middle; }
.griglia thead th {
  font-size: 12px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--tenue); background: var(--superficie-2); white-space: nowrap;
}
.griglia thead tr:first-child th:first-child { border-top-left-radius: var(--raggio); }
.griglia thead tr:first-child th:last-child { border-top-right-radius: var(--raggio); }
.griglia tbody th { font-weight: 550; }
.griglia tbody th a, .griglia .c-nome a { color: var(--testo); text-decoration: none; }
.griglia tbody th a:hover, .griglia .c-nome a:hover { color: var(--accento); text-decoration: underline; }
.griglia small { display: block; font-size: 12px; font-weight: 400; line-height: 1.3; }
.griglia tfoot th, .griglia tfoot td { border-bottom: 0; background: var(--superficie-2); font-weight: 650; }
.griglia tfoot tr:last-child > :first-child { border-bottom-left-radius: var(--raggio); }
.griglia tfoot tr:last-child > :last-child { border-bottom-right-radius: var(--raggio); }
.c-numero { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-totale { font-weight: 650; }
.c-azioni { text-align: right !important; white-space: nowrap; }
.c-azioni form { display: inline; margin: 0; }
.c-azioni .bottone { margin-left: 4px; }

/* la colonna dei nomi resta ferma quando la tabella scorre di lato */
.c-nome, .orari .c-etichetta { position: sticky; left: 0; z-index: 1; background: var(--superficie); }
thead .c-nome, thead .c-etichetta, tfoot .c-nome, tfoot .c-etichetta { background: var(--superficie-2); }
.c-nome { min-width: 170px; }
.c-nome small { color: var(--tenue); }

/* settimana */
.settimana .c-giorno { text-align: center; min-width: 96px; padding: 4px; }
.settimana thead .c-giorno { padding: 10px 4px; }
.giorno-nome { font-weight: 600; }
.giorno-numero { font-weight: 650; color: var(--testo); font-variant-numeric: tabular-nums; }
.nome-festa { color: var(--festa-testo) !important; text-transform: none; letter-spacing: 0; font-weight: 500 !important; }
.settimana thead .c-giorno.oggi { box-shadow: inset 0 -3px 0 var(--accento); color: var(--accento-scuro); }
.settimana thead .c-giorno.oggi::before, .mese thead .c-g.oggi::before {
  content: ""; display: block; width: 24px; height: 8px; margin: 0 auto 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9' viewBox='0 0 26 9'%3E%3Cg stroke='%2342707f' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M13 8.5V1.5M8.2 8.8 5.6 2.6M17.8 8.8 20.4 2.6M4.4 9.2 1 5M21.6 9.2 25 5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}
.settimana thead .c-giorno.oggi .giorno-numero { color: var(--accento-scuro); }
.domenica { background: var(--domenica); }
.festivo { background: var(--festa); }
thead .domenica, tfoot .domenica { background: #f1ece3; }
thead .festivo, tfoot .festivo { background: #f7e6e6; }
.cella {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 52px; padding: 5px 4px; border-radius: 8px;
  color: var(--testo); text-decoration: none; border: 1px solid transparent;
}
.cella:hover { background: var(--accento-tenue); border-color: #c9dbe1; }
.cella strong { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cella .orari { color: var(--tenue); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cella .nota-breve { color: var(--tenue); font-style: italic; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cella .vuoto { color: #c0c8d2; font-size: 18px; opacity: 0; transition: opacity .15s; }
.cella:hover .vuoto, .cella:focus .vuoto { opacity: 1; color: var(--accento); }
.da-controllare .cella { background: var(--avviso-tenue); border-color: #f3dca3; }
.settimana .c-totale { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; padding-right: 16px; }

/* righe degli orari (Giorno e Cartellino) */
.orari th, .orari td { padding: 6px 8px; }
.orari .c-etichetta { min-width: 150px; padding-left: 16px; white-space: nowrap; }
.cartellino .c-etichetta { min-width: 110px; }
.orari .c-ora { width: 84px; text-align: center; }
.orari .c-nota { min-width: 180px; }
/* larghezza fissa: quando compare un avviso la tabella non deve saltare */
.orari .ore { width: 158px; min-width: 158px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.orari .ore strong { font-size: 15px; }
.orari .ore small { white-space: normal; color: var(--avviso); }
.orari input {
  height: 34px; font: inherit; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 7px; background: var(--superficie);
}
.orari input.ora { width: 74px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
.orari input.nota { width: 100%; padding: 0 10px; }
.orari input::placeholder { color: #b8c0ca; }
.orari input:hover { border-color: #bfb4a4; }
.orari input:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento); background: #fff; }
.orari input.sbagliato { border-color: var(--errore); background: var(--errore-tenue); }
/* colore pieno: la colonna del nome sta ferma e sotto scorre il resto */
tr.riga-orari:hover > * { background-color: #f8fafb; }
tr.riga-orari.domenica > * { background-color: var(--domenica); }
tr.riga-orari.festivo > * { background-color: var(--festa); }
tr.riga-orari.oggi .c-etichetta { box-shadow: inset 3px 0 0 var(--accento); }
.riga-orari.anomalia .ore small { color: var(--avviso); }
.riga-orari.errore .ore small { color: var(--errore); font-weight: 550; }
tr.riga-orari.evidenziata > * { animation: evidenzia 1.8s ease-out; }
@keyframes evidenzia { from { background-color: #dce9ee; } }
.piu-uno {
  display: inline-block; margin-left: 6px; padding: 0 5px; vertical-align: 1px;
  font-size: 11px; font-weight: 600; color: var(--tenue);
  border: 1px solid var(--bordo-forte); border-radius: 4px;
}
.stato { width: 34px; text-align: center; padding-left: 0 !important; }
.segno { display: inline-block; min-width: 18px; font-weight: 700; }
.segno.in-corso::after { content: "…"; color: var(--tenue); }
.segno.ok { color: var(--ok); }
.segno.ok::after { content: "✓"; }
.segno.ok.sparisci { opacity: 0; transition: opacity 1.2s ease 1.5s; }
.segno.errore { color: var(--errore); cursor: pointer; }
.segno.errore::after { content: "!"; }
.segno-esempio.ok { color: var(--ok); font-weight: 700; }
.subtotale th, .subtotale td { background: var(--superficie-2); font-size: 13px; color: var(--tenue); font-weight: 500; border-bottom-color: var(--bordo-forte); }
.subtotale .ore strong { color: var(--testo); font-size: 14px; }
.subtotale th { padding-left: 16px !important; }
.totale-mese th, .totale-mese td { font-size: 15px; }
.totale-mese th { padding-left: 16px !important; }
.etichetta { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-right: 6px; }
.etichetta.festa { background: var(--festa); color: var(--festa-testo); }

/* riepilogo */
.riepilogo th, .riepilogo td { padding: 10px 14px; }
.riepilogo thead .c-numero { white-space: normal; line-height: 1.25; }
.riepilogo thead .tenue { text-transform: none; letter-spacing: 0; font-weight: 500; }
.riepilogo .c-totale { background: rgba(66, 112, 127, .045); }

/* elenco dipendenti */
.elenco-dipendenti td { padding: 8px 12px; }

/* ---------------------------------------------------------------- causali */

/* Un colore per causale: bollini, righe, celle del mese. */
.causale-ferie      { --c-sfondo: #e1f4e7; --c-testo: #17663a; --c-tenue: #f1faf4; }
.causale-riposo     { --c-sfondo: #e8ecf1; --c-testo: #475467; --c-tenue: #f5f7f9; }
.causale-malattia   { --c-sfondo: #fce4e4; --c-testo: #a8261b; --c-tenue: #fdf3f3; }
.causale-permesso   { --c-sfondo: #e3ecfc; --c-testo: #1d4fb8; --c-tenue: #f2f6fe; }
.causale-infortunio { --c-sfondo: #ffebd6; --c-testo: #9a4a00; --c-tenue: #fff6ec; }

.bollino {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: var(--c-sfondo, var(--sfondo)); color: var(--c-testo, var(--testo));
}
.cella .bollino { margin-bottom: 2px; }
.riassunto-causale { color: var(--tenue); }

.causale { display: flex; align-items: center; gap: 6px; }
.orari .c-causale { width: 190px; min-width: 190px; }
.orari select.causale-scelta {
  width: 116px; height: 34px; padding: 0 6px; font: inherit; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 7px; background-color: var(--superficie);
  cursor: pointer;
}
.orari select.causale-scelta.causale-ferie, .orari select.causale-scelta.causale-riposo,
.orari select.causale-scelta.causale-malattia, .orari select.causale-scelta.causale-permesso,
.orari select.causale-scelta.causale-infortunio {
  background-color: var(--c-sfondo); color: var(--c-testo); border-color: transparent; font-weight: 600;
}
.orari select.causale-scelta:focus { outline: 2px solid var(--accento); outline-offset: -1px; }
.orari input.ore-causale { width: 62px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }

/* la riga di un giorno con una causale prende un velo del suo colore */
tr.riga-orari[data-causale="ferie"] > *      { background-color: #f1faf4; }
tr.riga-orari[data-causale="riposo"] > *     { background-color: #f5f7f9; }
tr.riga-orari[data-causale="malattia"] > *   { background-color: #fdf3f3; }
tr.riga-orari[data-causale="permesso"] > *   { background-color: #f2f6fe; }
tr.riga-orari[data-causale="infortunio"] > * { background-color: #fff6ec; }

/* ---------------------------------------------------------------- il mese in orizzontale */

.pagina-larga .pagina { max-width: none; }
.mese th, .mese td { padding: 0; }
.mese .c-nome { padding: 8px 12px; min-width: 150px; }
.mese .c-g { min-width: 42px; text-align: center; border-left: 1px solid var(--bordo); }
.mese thead .c-g { padding: 6px 0; line-height: 1.2; letter-spacing: 0; }
.mese .g-num { display: block; font-size: 13px; font-weight: 650; color: var(--testo); }
.mese .g-nome { display: block; font-size: 10px; font-weight: 500; }
.mese thead .c-g.oggi { box-shadow: inset 0 -3px 0 var(--accento); }
.mese thead .c-g.oggi .g-num { color: var(--accento-scuro); }
.mese .g-cella {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  height: 44px; padding: 0 1px; color: var(--testo); text-decoration: none;
  font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mese .g-ore { font-weight: 500; }
/* sotto le ore: la causale a ore (PE 2:00), piccola e del suo colore */
.mese .g-sotto { font-size: 10px; font-weight: 700; line-height: 1.1; color: var(--c-testo, var(--tenue)); }
/* la causale di tutto il giorno: la cella diventa un blocco colorato con la sigla */
.mese .g-sigla-piena { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--c-testo); }
.g-sigla {
  display: inline-block; padding: 0 4px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  line-height: 1.5; background: var(--c-sfondo); color: var(--c-testo); white-space: nowrap;
}
.g-avviso { color: var(--avviso); font-weight: 700; }
/* righe alterne, per seguire un dipendente lungo tutto il mese */
.mese tbody tr:nth-child(even) > th, .mese tbody tr:nth-child(even) > td { background-color: #fbf9f5; }
.mese tbody td.domenica { background-color: #f3eee6; }
.mese tbody tr:nth-child(even) > td.domenica { background-color: #eee8de; }
.mese tbody td.festivo, .mese tbody tr:nth-child(even) > td.festivo { background-color: #fbeeee; }
.mese tbody td.oggi, .mese tbody tr:nth-child(even) > td.oggi { background-color: #edf4f6; }
.mese tbody td.con-causale, .mese tbody tr:nth-child(even) > td.con-causale { background-color: var(--c-tenue); }
.mese tbody td.intera, .mese tbody tr:nth-child(even) > td.intera { background-color: var(--c-sfondo); }
.mese td.da-controllare .g-cella { box-shadow: inset 0 0 0 2px #f3d58b; }
/* la riga sotto il mouse si accende, colori delle causali compresi */
.mese tbody tr:hover > * { box-shadow: inset 0 0 0 100vmax rgba(66, 112, 127, .07); }
.mese tbody tr:hover > .c-totale { box-shadow: inset 0 0 0 100vmax rgba(66, 112, 127, .07), -6px 0 8px -6px rgba(16, 24, 40, .18); }
.mese .g-cella:hover { background: rgba(66, 112, 127, .10); }
.mese .c-nome { white-space: nowrap; }
.mese .nome-riga { display: inline-flex; align-items: center; gap: 6px; }
.mese .c-nome.uscito a { color: var(--tenue); font-style: italic; }
.conta-avvisi {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; text-decoration: none;
  background: var(--avviso-tenue); color: var(--avviso) !important; border: 1px solid #f3d58b;
}
.assenze-mese { margin: 8px 0 0; color: var(--tenue); font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.campione {
  display: inline-block; min-width: 26px; padding: 1px 5px; border-radius: 4px; text-align: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--c-sfondo); color: var(--c-testo);
}
.mese thead .c-g.domenica .g-num, .mese thead .c-g.domenica .g-nome { color: #8a94a3; }
.mese thead .c-g.festivo .g-num { color: var(--festa-testo); }
.mese td.c-numero, .mese th.c-numero { padding: 8px 10px; }
.mese thead th.c-numero { white-space: normal; line-height: 1.25; }
.mese .c-assenze { padding: 6px 10px; min-width: 220px; text-align: left; border-left: 1px solid var(--bordo); }
.mese td.c-assenze { line-height: 1.9; }
.mese .c-assenze .g-sigla { margin-right: 4px; }
.mese tfoot .c-g { font-size: 11.5px; padding: 8px 1px; font-variant-numeric: tabular-nums; }
/* il totale del mese resta sempre in vista a destra, anche scorrendo i giorni */
.mese .c-totale {
  position: sticky; right: 0; z-index: 1;
  border-left: 1px solid var(--bordo-forte); background-color: #edf4f6 !important;
  box-shadow: -6px 0 8px -6px rgba(16, 24, 40, .18);
}
.mese .c-nome small a { font-weight: 600; text-decoration: none; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 2px 0; font-size: 12.5px; color: var(--tenue); }
.voce-legenda { white-space: nowrap; }

/* ---------------------------------------------------------------- cronologia */

.cronologia { padding: 6px 20px 14px; }
.cronologia-giorno {
  margin: 14px 0 4px; font-size: 13px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accento);
}
.cronologia ul { list-style: none; margin: 0; padding: 0; }
.cronologia li { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--bordo); line-height: 1.45; }
.cronologia li:last-child { border-bottom: 0; }
.cronologia-ora { flex-shrink: 0; width: 44px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.vuoto-cronologia { color: var(--tenue); margin: 24px 2px; }

/* ---------------------------------------------------------------- accessi */

/* il link appena creato, da mandare al dipendente */
.link-nuovo { padding: 16px 20px; margin-bottom: 16px; border-color: #b9ced6; background: var(--accento-tenue); }
.link-nuovo p { margin: 0 0 10px; }
.link-testo {
  padding: 8px 10px; word-break: break-all; user-select: all;
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 8px;
}
.link-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.c-accesso { white-space: nowrap; }
.c-accesso form { display: inline-block; margin: 0 0 0 4px; }
.stato-accesso { font-size: 13px; margin-right: 4px; }
.stato-accesso.attivo::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.da-dipendente { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--accento); }
.da-dipendente svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- il dipendente, dal telefono */

.testata-dipendente { justify-content: space-between; gap: 12px; }
.testata-dipendente .logo-locale { width: 44px; height: 44px; }
.testata-dipendente form { margin: 0; }
.pagina-dipendente .pagina { max-width: 560px; }
.installa {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 8px 12px 14px;
  background: var(--accento-tenue); border: 1px solid #b9ced6; border-radius: var(--raggio);
}
.installa-testo { flex: 1; min-width: 0; line-height: 1.35; }
.installa-testo strong { display: block; color: var(--accento-scuro); }
.installa-testo span { color: var(--tenue); font-size: 14px; }
.installa svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--accento); }
.installa-chiudi {
  flex-shrink: 0; padding: 4px 8px; font-size: 24px; line-height: 1;
  color: var(--tenue); background: none; border: 0; cursor: pointer;
}
.mese-dipendente { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.mese-titolo { text-align: center; line-height: 1.3; }
.mese-titolo strong { display: block; font-size: 20px; font-weight: 650; }
.mese-titolo span { color: var(--tenue); font-variant-numeric: tabular-nums; }
.mese-titolo b { color: var(--testo); }
.bottone.icona.spento { opacity: .35; cursor: default; }
.assenze-dipendente { text-align: center; margin: -4px 0 14px; }
.vuoto-dipendente { text-align: center; color: var(--tenue); margin: 24px 0; }
.giorni-dipendente { display: flex; flex-direction: column; gap: 8px; }
.giorno-dipendente { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); }
.giorno-dipendente.domenica { background: var(--domenica); }
.giorno-dipendente > summary {
  display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 10px 14px 10px 16px;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.giorno-dipendente > summary::-webkit-details-marker { display: none; }
.giorno-dipendente > summary::after { content: "›"; color: var(--tenue); font-size: 22px; line-height: 1; transition: transform .15s; }
.giorno-dipendente[open] > summary::after { transform: rotate(90deg); }
.giorno-dipendente[open] > summary { border-bottom: 1px solid var(--bordo); }
.gd-data { font-weight: 650; min-width: 60px; }
.giorno-dipendente.oggi .gd-data { color: var(--accento-scuro); }
.giorno-dipendente.festivo .gd-data { color: var(--festa-testo); }
.gd-riassunto {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 10px;
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums;
}
.gd-orari { color: var(--tenue); }
.gd-ore { font-size: 16px; }
.gd-vuoto { color: #b8c0ca; }
.gd-avviso { color: var(--avviso); font-weight: 700; }
.gd-data-lunga { margin: 0 0 6px; color: var(--tenue); font-size: 13px; }
.editor, .sola-lettura { padding: 12px 16px 14px; }
.riga-campo { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.riga-campo > label { flex: 0 0 100px; color: var(--tenue); }
/* almeno 16 punti: se no l'iPhone ingrandisce la pagina quando si tocca una casella */
.editor input, .editor select {
  height: 46px; font: inherit; font-size: 17px; color: var(--testo);
  border: 1px solid var(--bordo-forte); border-radius: 10px; background-color: var(--superficie);
}
.editor input.ora { width: 96px; padding: 0 6px; text-align: center; font-variant-numeric: tabular-nums; }
.editor input.nota { flex: 1; min-width: 0; padding: 0 12px; }
.editor .causale { flex: 1; min-width: 0; gap: 8px; }
.editor select.causale-scelta { flex: 1; min-width: 0; padding: 0 10px; }
.editor select.causale-scelta[class*=" causale-"] {
  background-color: var(--c-sfondo); color: var(--c-testo); border-color: transparent; font-weight: 600;
}
.editor input.ore-causale { width: 76px; padding: 0 6px; text-align: center; }
.editor input::placeholder { color: #c3cad2; }
.editor input:focus, .editor select:focus { outline: 2px solid var(--accento); outline-offset: -1px; border-color: var(--accento); }
.editor input.sbagliato { border-color: var(--errore); background-color: var(--errore-tenue); }
.bottone.adesso {
  height: 46px; padding: 0 14px; border-radius: 10px;
  color: var(--accento-scuro); background: var(--accento-tenue); border-color: #b9ced6;
}
.esito-riga {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 32px; margin-top: 6px; font-variant-numeric: tabular-nums;
}
.esito-riga .ore strong { font-size: 19px; }
.esito-riga .ore small { display: block; color: var(--avviso); }
.riga-orari.errore .esito-riga .ore small { color: var(--errore); font-weight: 550; }
.esito-riga .segno { font-size: 18px; }
.sola-lettura dl { margin: 0; }
.sola-lettura dl div { display: flex; gap: 10px; padding: 4px 0; }
.sola-lettura dt { flex: 0 0 100px; color: var(--tenue); }
.sola-lettura dd { margin: 0; }
.sola-lettura p.tenue { margin: 6px 0 0; font-size: 13px; }

/* ---------------------------------------------------------------- telefono */

@media (max-width: 800px) {
  .testata { flex-wrap: wrap; height: auto; gap: 6px 12px; padding: 10px 16px 0; }
  .menu { order: 3; flex-basis: 100%; margin: 0 -6px; padding-bottom: 6px; }
  .account { margin-left: auto; }
  .solo-largo { display: none; }
  .pagina { padding: 16px 16px 40px; }
  h1 { font-size: 21px; }
  .iniziali { width: 44px; height: 44px; font-size: 16px; }
  .intestazione { align-items: flex-start; }
  .c-nome { min-width: 128px; max-width: 150px; }
  .orari .c-etichetta { min-width: 120px; padding-left: 12px; }
  .cartellino .c-etichetta { min-width: 82px; }
  .riquadro { padding: 16px; }
  .testata-dipendente { flex-wrap: nowrap; padding-bottom: 10px; }
  .link-nuovo { padding: 14px 16px; }
}

/* ---------------------------------------------------------------- iPhone */

/* Le pagine del titolare sullo schermo stretto del telefono: niente tabelle
   da far scorrere di lato. Ogni riga diventa un riquadro, con l'etichetta
   sopra ogni casella; sul computer resta tutto com'era. */
.lista-telefono { display: none; }

@media (max-width: 640px) {
  /* 16 punti: sotto, l'iPhone ingrandisce la pagina quando si tocca una casella */
  input, select, textarea { font-size: 16px !important; }
  .menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4px; overflow: visible; }
  .menu a { justify-content: center; padding: 7px 2px; }
  [data-stampa] { display: none !important; }
  .scegli-dipendente { flex-basis: 100%; }
  .scegli-dipendente select { width: 100%; max-width: none; }

  /* Giorno e Cartellino */
  table.orari, table.orari tbody, table.orari tfoot { display: block; }
  table.orari thead { display: none; }
  table.orari tr.riga-orari {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
    grid-template-areas: "nome nome ore stato" "e pi pf u" "causale causale nota nota";
    padding: 12px 14px; border-bottom: 1px solid var(--bordo);
  }
  table.orari tr.riga-orari > * {
    position: static; width: auto !important; min-width: 0 !important; padding: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
  }
  table.orari tr.riga-orari > .c-etichetta { grid-area: nome; align-self: center; white-space: normal; }
  table.orari tr.riga-orari > :nth-child(2) { grid-area: e; }
  table.orari tr.riga-orari > :nth-child(3) { grid-area: pi; }
  table.orari tr.riga-orari > :nth-child(4) { grid-area: pf; }
  table.orari tr.riga-orari > :nth-child(5) { grid-area: u; }
  table.orari tr.riga-orari > .ore { grid-area: ore; text-align: right; align-self: center; white-space: normal; }
  table.orari tr.riga-orari > .c-causale { grid-area: causale; }
  table.orari tr.riga-orari > .c-nota { grid-area: nota; }
  table.orari tr.riga-orari > .stato { grid-area: stato; text-align: right; align-self: center; }
  table.orari td[data-etichetta]::before {
    content: attr(data-etichetta); display: block; margin-bottom: 3px;
    font-size: 11px; color: var(--tenue); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.orari input.ora, table.orari input.nota, table.orari select.causale-scelta { width: 100%; height: 42px; }
  table.orari input.ora { padding: 0 2px; }
  table.orari input.ore-causale { width: 58px; height: 42px; }
  table.orari .causale select.causale-scelta { flex: 1; min-width: 0; }
  table.orari tr.riga-orari.oggi { box-shadow: inset 3px 0 0 var(--accento); }
  table.orari tr.riga-orari.domenica { background: var(--domenica); }
  table.orari tr.riga-orari.festivo { background: var(--festa); }
  table.orari tr.riga-orari[data-causale="ferie"] { background: #f1faf4; }
  table.orari tr.riga-orari[data-causale="riposo"] { background: #f5f7f9; }
  table.orari tr.riga-orari[data-causale="malattia"] { background: #fdf3f3; }
  table.orari tr.riga-orari[data-causale="permesso"] { background: #f2f6fe; }
  table.orari tr.riga-orari[data-causale="infortunio"] { background: #fff6ec; }
  table.orari tr.subtotale, table.orari tfoot tr {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 14px;
  }
  table.orari tr.subtotale > *, table.orari tfoot tr > * { position: static; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0 !important; }
  table.orari tr.subtotale > td:empty, table.orari tfoot tr > td:empty { display: none; }

  /* Settimana: un riquadro per dipendente, i 7 giorni in fila */
  table.settimana, table.settimana tbody, table.settimana tfoot { display: block; }
  table.settimana thead { display: none; }
  table.settimana tr {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
    padding: 10px 8px 12px; border-bottom: 1px solid var(--bordo);
  }
  table.settimana tr > * { position: static; min-width: 0 !important; padding: 0 !important; border: 0 !important; }
  table.settimana .c-nome { grid-column: 1 / 6; grid-row: 1; max-width: none; background: none; }
  table.settimana .c-totale { grid-column: 6 / 8; grid-row: 1; background: none; text-align: right; font-size: 15px; }
  table.settimana .c-totale small { display: none; }
  table.settimana .c-giorno { grid-row: 2; border-radius: 8px; font-size: 13px; }
  table.settimana .c-giorno::before { content: attr(data-etichetta); display: block; padding-top: 3px; font-size: 10px; color: var(--tenue); }
  table.settimana .cella { min-height: 38px; padding: 2px 1px 4px; }
  table.settimana .cella strong { font-size: 13px; }
  table.settimana .cella .orari, table.settimana .cella .nota-breve, table.settimana .cella .avvertenza { display: none; }
  table.settimana .bollino { font-size: 0; padding: 0 5px; }
  table.settimana .bollino::after { content: attr(data-sigla); font-size: 10.5px; }
  table.settimana tfoot tr { background: var(--superficie-2); }

  /* Riepilogo: un dipendente per riga, la griglia del mese resta al computer */
  .riepilogo-griglia, .legenda { display: none; }
  .lista-telefono { display: block; }
  .voce-telefono {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--bordo); color: var(--testo); text-decoration: none;
  }
  .voce-nome { font-weight: 600; }
  .voce-ore { font-size: 17px; font-variant-numeric: tabular-nums; }
  .voce-dettagli { grid-column: 1 / -1; color: var(--tenue); font-size: 13px; }
  .voce-totale { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--superficie-2); font-weight: 600; border-radius: 0 0 var(--raggio) var(--raggio); }

  /* Dipendenti: un riquadro per persona */
  table.elenco-dipendenti, table.elenco-dipendenti tbody { display: block; }
  table.elenco-dipendenti thead { display: none; }
  table.elenco-dipendenti tr { display: block; padding: 10px 14px 12px; border-bottom: 1px solid var(--bordo); }
  table.elenco-dipendenti td { display: block; padding: 3px 0 !important; border: 0 !important; text-align: left !important; }
  table.elenco-dipendenti td[data-etichetta]::before { content: attr(data-etichetta); margin-right: 8px; color: var(--tenue); font-size: 13px; }
  table.elenco-dipendenti .rinomina input { min-width: 0; max-width: none; padding-left: 0; font-weight: 650; }
  .c-accesso { white-space: normal; }
  .c-accesso form { margin: 4px 4px 0 0; }
  .c-azioni { white-space: normal; padding-top: 6px !important; }
  .c-azioni .bottone { margin: 4px 4px 0 0; }
}

/* ---------------------------------------------------------------- stampa */

@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body { background: #fff; font-size: 10.5pt; color: #000; }
  .testata, .navigazione, .messaggio, .aiuto, .solo-schermo, .stato, .piede { display: none !important; }
  .settimana thead .c-giorno.oggi::before, .mese thead .c-g.oggi::before { display: none; }
  .solo-stampa { display: block; }
  .pagina { max-width: none; padding: 0; }
  .scheda { border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .testa-stampa { margin-bottom: 10px; display: flex; align-items: center; gap: 14px; }
  .testa-stampa .logo-stampa { width: 22mm; height: 22mm; flex-shrink: 0; }
  .testa-stampa .testo-stampa { min-width: 0; }
  .testa-stampa h1 { font-size: 17pt; margin: 1px 0 3px; }
  .testa-stampa p { margin: 0 0 2px; }
  .azienda-stampa { color: #444; }
  .griglia th, .griglia td { padding: 2.5px 6px; border-bottom: 1px solid #c8c8c8; }
  .griglia thead th { background: #eee !important; color: #000; }
  .c-nome, .orari .c-etichetta { position: static; }
  /* il cartellino: un mese intero, firme comprese, su un foglio A4 */
  .cartellino { font-size: 9.5pt; }
  .cartellino th, .cartellino td { padding: 1.5px 6px; }
  .orari input { border: 0 !important; background: none !important; height: auto; padding: 0; outline: none;
                 font-size: 9.5pt; line-height: 1.3; }
  /* larghe abbastanza per "00:00" intero: un campo non si allarga da solo */
  .orari input.ora { width: 4.4em; text-align: left; }
  .orari .c-ora { width: auto; }
  .orari .ore { width: auto; min-width: 0; }
  .orari .ore strong { font-size: 10pt; }
  .orari .ore small { font-size: 8pt; }
  .orari .c-nota { min-width: 0; }
  .riga-orari.oggi .c-etichetta { box-shadow: none; }
  .riga-orari .nome-festa { display: inline; margin-left: 4px; }
  .riga-orari.domenica > *, .riga-orari.festivo > *, .domenica, .festivo, .subtotale th, .subtotale td, .griglia tfoot th, .griglia tfoot td {
    background: #f1f1f1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .riga-orari:hover > * { background: none; }
  .griglia tbody tr { break-inside: avoid; }
  .firme { display: flex; gap: 48px; margin-top: 28px; break-inside: avoid; }
  /* causali in stampa: la tendina diventa testo */
  .orari select.causale-scelta { appearance: none; -webkit-appearance: none; border: 0; padding: 0;
                                 height: auto; width: auto; font-size: 9pt; background: none !important; }
  .orari input.ore-causale { width: 4em; }
  .orari .c-causale { width: auto; min-width: 0; }
  .orari input::placeholder { color: transparent; }
  /* una casella non va a capo e taglia il testo lungo: in stampa la nota
     si scrive come testo normale */
  .orari input.nota { display: none; }
  .nota-stampa { display: block; font-size: 8.5pt; line-height: 1.2; }
  .riga-orari[data-causale] > *, .mese td.con-causale, .g-sigla, .bollino, .mese .c-totale,
  .mese tbody tr:nth-child(even) > *, .campione {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* il mese in orizzontale: 31 giorni su un A4 coricato. Larghezze fisse:
     i giorni si dividono lo spazio in parti uguali, i totali non escono dal foglio */
  .mese { font-size: 6.8pt; table-layout: fixed; width: 100%; }
  .mese thead .c-nome { width: 27mm; }
  .mese thead th.c-numero { width: 12mm; }
  .mese thead .c-assenze { width: 29mm; font-size: 6pt; }
  .mese thead .c-totale { width: 13mm; }
  .mese .c-totale { position: static; box-shadow: none; }
  .mese .c-assenze { min-width: 0; padding: 1px 2px; }
  .mese td.c-assenze { line-height: 1.6; }
  .mese th, .mese td { padding: 0; }
  .mese .c-nome { padding: 2px 4px; min-width: 0; font-size: 7.5pt; }
  .mese .c-nome small { display: none; }
  .mese .c-g { min-width: 0; }
  .mese thead .c-g { padding: 2px 0; }
  .mese .g-num { font-size: 7pt; }
  .mese .g-nome { font-size: 5.5pt; }
  .mese .g-cella { height: auto; min-height: 0; padding: 2px 0; font-size: 6.2pt; }
  .mese .g-sotto { font-size: 5.2pt; }
  .mese .g-sigla-piena { font-size: 6.2pt; }
  .mese tbody tr:hover > * { box-shadow: none; }
  .conta-avvisi { display: none; }
  .g-sigla { font-size: 5.8pt; padding: 0 1px; }
  .mese td.c-numero, .mese th.c-numero { padding: 2px 3px; font-size: 7pt; }
  .mese thead th.c-numero { min-width: 0; font-size: 6pt; }
  .mese tfoot .c-g { font-size: 5.2pt; padding: 2px 0; }
  .mese td.da-controllare .g-cella { box-shadow: none; }
  .legenda { font-size: 7pt; margin-top: 6px; gap: 2px 10px; }
  .campione { font-size: 6.5pt; min-width: 0; padding: 0 3px; }
  .firme div { flex: 1; border-top: 1px solid #000; padding-top: 4px; font-size: 9pt; }
  a { color: #000; text-decoration: none; }
}