/* Portale «Le mie ferie» (templates/portale). Marca ADS: U = 8px, niente ombre, raggio solo sui controlli,
   giunzioni da 1px. Esadecimali solo qui. */
/* I due caratteri del brand system (Marca ADS, repo design_system: assets/fonts e assets/css/tokens.css):
   Neue Montreal in tre pesi statici, Config Mono variabile con UNA regola a intervallo. Senza questi file il
   browser ripiegava su Arial/Helvetica (08/11/2026). */
@font-face { font-family: 'Neue Montreal'; src: url("../fonts/NeueMontreal-Regular.bce1e317edf7.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url("../fonts/NeueMontreal-Medium.2d50fa3a86b5.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url("../fonts/NeueMontreal-Bold.605d3e7dcd89.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Config Mono'; src: url("../fonts/ConfigMono-Variable.867a290bf71c.woff2") format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; }
.po, .po-ru, .po-pagina {
  --po-grafite: #111215; --po-carta: #F4F5F7; --po-campo: #FFFFFF; --po-filo: #D9DCE1; --po-filo-ctl: #9AA0AA;
  --po-testo: #111215; --po-muto: #5B616B; --po-verde: #1FB573; --po-verde-scuro: #09673E;
  --po-ambra-wash: #FDECC5; --po-ambra: #7A4705; --po-rosso: #E5241B; --po-verde-wash: #EAF7F0;
  --po-font: "Neue Montreal", "Helvetica Neue", Arial, sans-serif; --po-mono: "Config Mono", ui-monospace, Menlo, monospace;
}
.po-pagina { margin: 0; background: var(--po-carta); color: var(--po-testo); font: 400 16px/24px var(--po-font); }
.po { max-width: 880px; margin: 0 auto; padding: 24px 16px 16px; color: var(--po-testo); font: 400 16px/24px var(--po-font); }
.po-testa { margin-bottom: 24px; }
.po-testa h1 { font: 500 24px/32px var(--po-font); margin: 0; }
.po-testa p { margin: 0; font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-marchio { font: 500 13px/16px var(--po-mono); color: var(--po-muto); letter-spacing: .04em; }
.po-campo { background: var(--po-campo); border: 1px solid var(--po-filo); padding: 23px; margin-bottom: 16px; }
.po-campo h2 { font: 500 18px/24px var(--po-font); margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.po-campo h2 small { font: 400 13px/16px var(--po-mono); color: var(--po-muto); margin-left: auto; }
.po-nota { font: 400 14px/24px var(--po-font); color: var(--po-muto); margin: 8px 0 0; }
.po-saldi { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--po-filo); }
.po-saldo { padding: 15px 16px; border-right: 1px solid var(--po-filo); }
.po-saldo:last-child { border-right: 0; }
.po-saldo .n { font: 400 32px/40px var(--po-mono); }
.po-saldo .n small { font: 400 16px/24px var(--po-mono); color: var(--po-muto); }
.po-saldo .l { font: 500 14px/24px var(--po-font); }
.po-saldo .d { font: 400 13px/16px var(--po-font); color: var(--po-muto); }
.po-tab { width: 100%; border-collapse: collapse; }
.po-tab th { text-align: left; font: 400 13px/16px var(--po-mono); color: var(--po-muto); padding: 8px 16px 8px 0; border-bottom: 1px solid var(--po-filo); }
.po-tab td { padding: 8px 16px 8px 0; border-bottom: 1px solid var(--po-filo); font: 400 14px/24px var(--po-font); }
.po .mono { font-family: var(--po-mono); font-size: 13px; }
.po-pill { display: inline-block; padding: 0 11px; border-radius: 20px; border: 1px solid var(--po-ambra); background: var(--po-ambra-wash);
  color: var(--po-ambra); font: 400 13px/22px var(--po-mono); }
.po-presto { border-style: dashed; }
.po-piede { max-width: 880px; margin: 0 auto; padding: 0 16px 32px; font: 400 13px/16px var(--po-font); color: var(--po-muto); }
/* vista RU dentro Ago RU */
.po-ru { padding: 8px 0 24px; }
.po-scelta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 16px; font: 400 14px/24px var(--po-font); }
.po-scelta select { height: 40px; padding: 0 15px; border: 1px solid var(--po-filo-ctl); border-radius: 4px; background: var(--po-campo);
  font: 400 16px/24px var(--po-font); min-width: 320px; }
.po-anteprima { background: var(--po-carta); border: 1px solid var(--po-filo); }
@media (max-width: 640px) {
  .po-saldi { grid-template-columns: 1fr; }
  .po-saldo { border-right: 0; border-bottom: 1px solid var(--po-filo); }
  .po-saldo:last-child { border-bottom: 0; }
  .po-campo { padding: 15px; }
  .po-scelta select { min-width: 0; width: 100%; }
}

/* richieste */
.po-msg { background: var(--po-campo); border: 1px solid var(--po-filo); border-left: 4px solid var(--po-verde); padding: 12px 16px 12px 13px;
  margin: 0 0 16px; font: 400 14px/24px var(--po-font); }
.po-nota--sopra { margin: 0 0 16px; }
.po-btn { height: 40px; padding: 0 15px; border: 1px solid var(--po-filo-ctl); border-radius: 4px; background: var(--po-campo); color: var(--po-testo);
  font: 400 16px/24px var(--po-font); cursor: pointer; }
.po-btn:hover { background: var(--po-carta); }
.po-btn--primaria { background: var(--po-verde); border-color: var(--po-verde); color: var(--po-grafite); }
.po-btn--primaria:hover { background: var(--po-verde-scuro); border-color: var(--po-verde-scuro); color: #FFFFFF; }
.po-btn--piccolo { height: 32px; padding: 0 11px; font-size: 14px; }
.po-btn[disabled] { opacity: .5; cursor: default; }
.po input, .po select, .po textarea, .po-ru input[type=text], .po-resp select {
  height: 40px; padding: 0 15px; border: 1px solid var(--po-filo-ctl); border-radius: 4px; background: var(--po-campo);
  color: var(--po-testo); font: 400 16px/24px var(--po-font); }
.po textarea { height: 64px; padding: 7px 15px; resize: vertical; }
.po input[type=radio] { height: auto; }
.po input:focus-visible, .po select:focus-visible, .po textarea:focus-visible, .po-btn:focus-visible { outline: 2px solid var(--po-verde); outline-offset: 0; }
.po-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.po-form > label, .po-date > label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-intero { grid-column: 1 / -1; }
.po-modo { display: flex; gap: 24px; height: 40px; align-items: center; color: var(--po-testo); }
.po-modo label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.po-date { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.po-date.a-ore { grid-template-columns: 2fr 1fr 1fr; }
.po-manca, .po-richiesta { border: 1px solid var(--po-filo); padding: 15px 16px; margin-bottom: 8px; display: grid; gap: 8px 16px; align-items: end; }
.po-manca { grid-template-columns: 1fr 140px 2fr auto; }
.po-manca label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-manca .cosa, .po-richiesta .chi { align-self: center; display: flex; flex-direction: column; font: 400 14px/24px var(--po-font); }
.po-manca .cosa b, .po-richiesta .chi b { font: 500 16px/24px var(--po-font); }
.po-manca small, .po-richiesta small, .po-sotto { font: 400 13px/16px var(--po-font); color: var(--po-muto); display: block; }
.po-richiesta { grid-template-columns: 2fr 1fr auto; }
.po-richiesta .bottoni { display: flex; gap: 8px; }
.po-approva { border-left: 4px solid var(--po-verde); padding-left: 20px; }
.po-stato { display: inline-block; padding: 0 11px; border-radius: 20px; border: 1px solid; font: 400 13px/22px var(--po-mono); }
.po-stato--attesa { background: #FDECC5; color: #7A4705; border-color: #7A4705; }
.po-stato--approvata { background: #E3F3EA; color: #09673E; border-color: #09673E; }
.po-stato--rifiutata, .po-stato--errore { background: #FCE3DF; color: #83231C; border-color: #83231C; }
@media (max-width: 640px) {
  .po-form, .po-date { grid-template-columns: 1fr; }
  .po-date.a-ore { grid-template-columns: 1fr 1fr; }
  .po-date.a-ore > label:first-child { grid-column: 1 / -1; }
  .po-manca, .po-richiesta { grid-template-columns: 1fr; }
}
/* i campi nascosti restano nascosti anche dove il label è flex (giornate: Dal–Al; a ore: data, Dalle–Alle) */
.po [hidden] { display: none !important; }

/* badge dimenticato: entrata e uscita affiancate; il modulo libero sotto le timbrature mancanti */
.po-due { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.po-due label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-altra { margin-top: 8px; }
.po-altra summary { cursor: pointer; font: 500 14px/24px var(--po-font); color: var(--po-verde-scuro); padding: 8px 0; }
.po-manca--libera { grid-template-columns: 1fr 1fr 2fr 2fr auto; margin-top: 8px; }
@media (max-width: 640px) { .po-manca--libera { grid-template-columns: 1fr; } }

/* messaggi all'ufficio Risorse Umane (ticket) */
.po-pill--nuovo { margin-left: 8px; background: #E3F3EA; color: var(--po-verde-scuro); border-color: var(--po-verde-scuro); }
.po-tk { border: 1px solid var(--po-filo); margin-bottom: 8px; }
.po-tk summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font: 400 14px/24px var(--po-font); }
.po-tk summary small { color: var(--po-muto); font: 400 13px/16px var(--po-font); margin-left: auto; }
.po-chat { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.po-bolla { max-width: 85%; align-self: flex-end; background: var(--po-carta); border: 1px solid var(--po-filo); padding: 8px 12px;
  font: 400 14px/24px var(--po-font); }
.po-bolla--ru { align-self: flex-start; background: #E3F3EA; border-color: #BFE5CF; }
.po-bolla small { display: block; font: 400 12px/16px var(--po-font); color: var(--po-muto); }
.po-risposta { display: flex; gap: 8px; padding: 0 16px 16px; align-items: flex-end; }
.po-risposta textarea { flex: 1; height: 48px; }
.po-ticket-nuovo { margin-top: 16px; }
/* il modulo «Segnala una timbratura» (e le righe delle timbrature) restano dentro il riquadro: le colonne possono
   stringersi (minmax 0) e i campi prendono la larghezza della colonna */
.po-manca { grid-template-columns: minmax(0, 1fr) minmax(0, 140px) minmax(0, 2fr) auto; }
.po-manca--libera { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.6fr) auto; }
.po-manca input, .po-manca select, .po-due input { width: 100%; min-width: 0; box-sizing: border-box; }
.po-manca, .po-manca--libera { box-sizing: border-box; max-width: 100%; }
@media (max-width: 900px) { .po-manca--libera { grid-template-columns: 1fr 1fr; } .po-manca--libera .po-due, .po-manca--libera > label:last-of-type { grid-column: 1 / -1; } }
@media (max-width: 640px) { .po-manca, .po-manca--libera { grid-template-columns: 1fr; } }

.po-invii { margin: 0 0 16px; font: 400 14px/24px var(--po-font); }
.po-invii summary { cursor: pointer; color: var(--po-verde-scuro); font-weight: 500; }

/* allegati dei messaggi */
.po-allegato { display: block; margin-top: 4px; font: 400 13px/16px var(--po-font); color: var(--po-verde-scuro); word-break: break-all; }
.po-file { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--po-filo-ctl);
  border-radius: 4px; cursor: pointer; font-size: 18px; position: relative; overflow: hidden; flex: none; }
.po-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.po-file.ha-file { border-color: var(--po-verde); background: #E3F3EA; }
.po-ticket-nuovo input[type=file] { height: auto; padding: 8px 0; border: 0; }

/* trascinare i file sul modulo (PC) */
form.po-trascina-su { outline: 2px dashed var(--po-verde); outline-offset: 4px; background: #F2FAF6; }
.po-trascina-nota { display: block; font: 400 13px/16px var(--po-font); color: var(--po-muto); }
@media (hover: none) { .po-trascina-nota { display: none; } }   /* sul telefono non si trascina */
.po-certificato { white-space: pre-wrap; font: 400 13px/20px var(--po-mono); margin: 0; background: var(--po-carta); padding: 16px; border: 1px solid var(--po-filo); }
/* buste paga: riquadri che si toccano, giunti da un filo da 1px (la facciata); l'ultima arrivata porta la barra
   verde da 4px e l'etichetta, non solo il colore. Passaggio = cambio di fondo; fuoco rivoltato all'interno. */
.po-buste { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 1px; background: var(--po-filo); border: 1px solid var(--po-filo); }
.po-busta { display: flex; flex-direction: column; padding: 16px 16px 16px 24px; background: var(--po-campo); color: var(--po-testo); text-decoration: none; position: relative; transition: background-color 120ms cubic-bezier(.2, 0, 0, 1); }
.po-busta-ultima::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--po-verde); }
a.po-busta:hover { background: var(--po-carta); }
a.po-busta:active { background: var(--po-filo); }
a.po-busta:focus-visible { outline: 2px solid var(--po-verde); outline-offset: -2px; }
a.po-busta:focus-visible::after { content: ""; position: absolute; inset: 2px; border: 1px solid var(--po-grafite); pointer-events: none; }
.po-busta-cod { font: 400 11px/16px var(--po-mono); color: var(--po-muto); }
.po-busta-mese { font: 500 20px/32px var(--po-font); }
.po-busta-apri { font: 400 14px/24px var(--po-font); color: var(--po-verde-scuro); }
@media (max-width: 640px) { .po-buste { grid-template-columns: 1fr 1fr; } }
/* codice di conferma per le buste paga */
.po-buste-codice { border-left: 4px solid var(--po-verde); background: var(--po-carta); padding: 16px 16px 16px 20px; margin-bottom: 16px; }
.po-buste-codice p { margin: 0 0 16px; }
.po-buste-sblocca { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.po-buste-sblocca label { display: flex; flex-direction: column; font: 400 13px/16px var(--po-mono); color: var(--po-muto); gap: 4px; }
.po-buste-sblocca input { width: 152px; font: 400 16px/24px var(--po-mono); letter-spacing: .2em; }
.po-link { background: none; border: 0; padding: 0; color: var(--po-verde-scuro); font: 400 14px/24px var(--po-font); text-decoration: underline; cursor: pointer; }
div.po-busta { color: var(--po-muto); }
.po-titoletto { font: 500 16px/24px var(--po-font); margin: 24px 0 8px; }
/* cartellino delle timbrature (come Startweb): una riga per giorno, giorno | timbrature e giustificativi | ore */
.po-cartellino { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--po-filo); }
.po-cartellino li { display: grid; grid-template-columns: 80px 1fr 88px; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--po-filo); align-items: start; }
.po-cart-giorno { font: 400 13px/24px var(--po-mono); }
.po-cart-giorno b { font-weight: 500; }
.po-cart-festivo .po-cart-giorno { color: var(--po-muto); }
.po-cart-corpo { display: flex; flex-direction: column; min-width: 0; }
.po-cart-timbr { display: flex; flex-wrap: wrap; column-gap: 16px; font: 400 14px/24px var(--po-mono); }
.po-cart-giust { font: 400 14px/24px var(--po-font); color: var(--po-verde-scuro); }
.po-cart-anom { font: 400 14px/24px var(--po-font); color: var(--po-ambra); }
.po-cart-vuoto { font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-cart-ore { font: 400 14px/24px var(--po-mono); text-align: right; }
.po-cart-totale { display: flex; justify-content: space-between; margin: 8px 0 16px; font: 400 14px/24px var(--po-font); }
.po-cart-totale b { font: 500 16px/24px var(--po-mono); }
.po-cart-arrot { display: flex; flex-wrap: wrap; column-gap: 16px; font: 400 11px/16px var(--po-mono); color: var(--po-muto); }
.po-cart-ore small { display: block; font: 400 11px/16px var(--po-mono); color: var(--po-verde-scuro); }
.po-cart-ore small i { font-style: normal; color: var(--po-muto); }
.po-cart-totale { margin-bottom: 0; }
.po-cart-totale--busta { margin: 0 0 16px; padding-top: 8px; border-top: 1px solid var(--po-filo); }
.po-cart-totale--busta b { color: var(--po-verde-scuro); }
.po-cart-totale small { font: 400 13px/16px var(--po-font); color: var(--po-muto); }
/* Timbra con QR code: il pulsante in testa al portale, la fotocamera a tutto schermo, l'esito */
.po-timbra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 24px; }
.po-timbra-btn { height: 48px; padding: 0 23px; font-size: 16px; }
.po-scanner { position: fixed; inset: 0; z-index: 50; background: var(--po-grafite); color: #FFFFFF; display: flex; flex-direction: column; }
.po-scanner[hidden] { display: none !important; }
.po-scanner-testa { display: flex; justify-content: space-between; align-items: center; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); font: 500 16px/24px var(--po-font); }
.po-scanner-video { position: relative; flex: 1; overflow: hidden; }
.po-scanner-video video { width: 100%; height: 100%; object-fit: cover; }
.po-scanner-mirino { position: absolute; left: 50%; top: 50%; width: 64vmin; height: 64vmin; transform: translate(-50%, -50%); border: 2px solid var(--po-verde); }
.po-scanner-esito { margin: 0; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); font: 400 16px/24px var(--po-font); background: var(--po-grafite); }
.po-scanner-esito[data-tipo=ok] { background: var(--po-verde); color: var(--po-grafite); font-weight: 500; }
.po-scanner-esito[data-tipo=errore] { background: var(--po-ambra-wash); color: var(--po-ambra); }
.po-timbra-esito { margin: 0 0 16px; padding: 16px; border-left: 4px solid var(--po-verde); background: var(--po-carta); font: 500 20px/32px var(--po-font); }
.po-timbra-esito[data-tipo=errore] { border-left-color: var(--po-ambra); background: var(--po-ambra-wash); color: var(--po-ambra); font: 400 16px/24px var(--po-font); }
/* Campi su iPhone: data e ora hanno una larghezza minima loro (e vuoti si allargano) e sforano il riquadro;
   si tolgono dall'aspetto nativo e stanno nella colonna, allineati a sinistra come gli altri campi. */
.po input:not([type=radio]):not([type=checkbox]), .po select, .po textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.po input[type=date], .po input[type=time], .po input[type=datetime-local] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 40px; line-height: 38px; text-align: left; }
.po input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.po input::-webkit-datetime-edit { padding: 0; }
.po label, .po-due > * { min-width: 0; }
.po select { width: 100%; }
/* buste: giunti fatti dai bordi dei riquadri, così la casella vuota in fondo (mesi dispari) resta bianca */
.po-buste { gap: 0; background: none; border: 0; border-top: 1px solid var(--po-filo); border-left: 1px solid var(--po-filo); }
.po-busta { border-right: 1px solid var(--po-filo); border-bottom: 1px solid var(--po-filo); }
.po-qr-tab td { vertical-align: top; }
.po-qr-azioni form { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.po-qr-cancellata td { color: var(--po-muto); text-decoration: line-through; }
.po-qr-cancellata td:nth-child(5) { text-decoration: none; }
.po-ospite-apri { width: 100%; height: 64px; font: 500 20px/32px var(--po-font); }
.po-ospite-nuovo { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 16px; align-items: end; margin-bottom: 16px; }
.po-ospite-nuovo label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); min-width: 0; }
.po-ospite-nuovo input { width: 100%; box-sizing: border-box; min-width: 0; height: 40px; padding: 0 15px; border: 1px solid var(--po-filo-ctl); border-radius: 4px; font: 400 16px/24px var(--po-font); }
.po-ospite-revocato td { color: var(--po-muto); text-decoration: line-through; }
.po-ospite-azioni { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* «Mostra QR» dell'ingresso di un esterno: a tutto schermo, bianco, per farlo leggere a un altro telefono */
.po-qr-mostra { position: fixed; inset: 0; z-index: 1050; background: rgba(17, 18, 21, .72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.po-qr-mostra[hidden] { display: none !important; }
.po-qr-mostra-carta { background: var(--po-campo); padding: 24px; max-width: 400px; width: 100%; box-sizing: border-box; }
.po-qr-mostra-carta h2 { font: 500 24px/32px var(--po-font); margin: 8px 0 0; }
.po-qr-mostra-carta img { display: block; width: 100%; height: auto; aspect-ratio: 1; margin: 16px 0; background: #FFFFFF; }
.po-qr-mostra-carta p { font: 400 16px/24px var(--po-font); margin: 0 0 16px; }
/* pagina Esterni da sola (telefono): campi a tutta larghezza, tabella che diventa schede */
.po-esterni { padding-top: max(24px, env(safe-area-inset-top)); }
.po-esterni .po-campo > h2:first-child { display: none; }
@media (max-width: 640px) {
  .po-ospite-nuovo { grid-template-columns: 1fr 1fr; }
  .po-ospite-nuovo > label, .po-ospite-nuovo > button { grid-column: 1 / -1; }
  .po-ospite-nuovo > label.po-mezzo { grid-column: auto; }
  .po-ospite-nuovo button { height: 48px; }
  .po-esterni .po-tab thead { display: none; }
  .po-esterni .po-tab tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--po-filo); }
  .po-esterni .po-tab td { border: 0; padding: 0; }
  .po-esterni .po-tab td:last-child { grid-column: 1 / -1; }
  .po-esterni .po-ospite-azioni { justify-content: flex-start; }
  .po-esterni .po-ospite-azioni .po-btn { height: 40px; }
}
a.po-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.po-esterni .po-campo > .po-nota:first-of-type { margin: 0 0 16px; }
.po-foto { display: flex; gap: 4px; }
.po-foto img { width: 64px; height: 48px; object-fit: cover; display: block; border: 1px solid var(--po-filo); }
/* pagina Esterni da sola: .po-ru (pensato dentro Ago RU, senza margini) toglieva il respiro ai lati */
.po.po-esterni { padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; }
/* telecamere della porta: l'immagine intera con il rettangolo da tenere */
.po-camera { margin-bottom: 24px; }
.po-camera-quadro { position: relative; display: inline-block; max-width: 100%; touch-action: none; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.po-camera-quadro img { display: block; max-width: 100%; height: auto; min-height: 120px; min-width: 240px; background: var(--po-carta); }
.po-camera-rett { position: absolute; border: 2px solid var(--po-verde); outline: 9999px solid rgba(17, 18, 21, .45); pointer-events: none; }
.po-camera-quadro { overflow: hidden; }
.po-camera-bottoni { display: flex; flex-wrap: wrap; gap: 8px; }
/* campi un po' più compatti (sul computer 15px; sul telefono restano 16px, sotto iOS ingrandisce la pagina al tocco)
   e la colonna delle ore larga abbastanza da leggere l'ora accanto all'icona dell'orologio */
.po input:not([type=radio]):not([type=checkbox]), .po select, .po textarea { padding-left: 11px; padding-right: 11px; }
.po input[type=time] { min-width: 112px; }
.po-manca:not(.po-manca--libera) { grid-template-columns: minmax(0, 1fr) minmax(240px, 260px) minmax(0, 2fr) auto; }
/* «Segnala una timbratura»: giorno largo abbastanza per la data intera, poi cosa, le due ore, la nota, invia */
.po-manca--libera { grid-template-columns: minmax(160px, 1fr) minmax(170px, 1.3fr) minmax(240px, 260px); }
.po-manca--libera > label:last-of-type { grid-column: 1 / 3; }
.po-manca--libera > button { grid-column: 3; }
.po-manca--libera input[type=date] { min-width: 150px; }
@media (min-width: 641px) {
  .po input:not([type=radio]):not([type=checkbox]), .po select, .po textarea, .po-btn { font-size: 15px; }
}
@media (max-width: 900px) { .po-manca:not(.po-manca--libera) { grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); } .po-manca:not(.po-manca--libera) > label:last-of-type, .po-manca:not(.po-manca--libera) > button { grid-column: 1 / -1; } }
@media (max-width: 640px) { .po-manca, .po-manca:not(.po-manca--libera) { grid-template-columns: 1fr; } .po input[type=time] { min-width: 0; } }
/* Ore da giustificare: una riga per giorno (giorno e timbrature | voce | dalle-alle | motivo | invia) */
.po-giust { border: 1px solid var(--po-filo); padding: 15px 16px; margin-bottom: 8px; display: grid; gap: 8px 16px; align-items: end;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(240px, 260px) minmax(0, 1.6fr) auto; box-sizing: border-box; }
.po-giust label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); min-width: 0; }
.po-giust .cosa { align-self: center; display: flex; flex-direction: column; font: 400 14px/24px var(--po-font); min-width: 0; }
.po-giust .cosa b { font: 500 16px/24px var(--po-font); }
.po-giust .cosa small { font: 400 13px/16px var(--po-mono); color: var(--po-muto); }
@media (max-width: 900px) { .po-giust { grid-template-columns: 1fr 1fr; } .po-giust .cosa, .po-giust .po-giust-motivo, .po-giust > button { grid-column: 1 / -1; } }
@media (max-width: 640px) { .po-giust { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .po-manca--libera { grid-template-columns: 1fr 1fr; } .po-manca--libera .po-due, .po-manca--libera > label:last-of-type, .po-manca--libera > button { grid-column: 1 / -1; } }
@media (max-width: 640px) { .po-manca--libera { grid-template-columns: 1fr; } .po-manca--libera input[type=date] { min-width: 0; } }
/* istruzioni per i visitatori (Mod. Ru23.001) prima della presa visione */
.po-norme ul { margin: 0 0 8px; padding-left: 20px; }
.po-norme li { font: 400 15px/24px var(--po-font); margin-bottom: 4px; }
.po-norme .po-titoletto { margin: 16px 0 4px; }
.po-norme-112 { font: 500 20px/24px var(--po-mono); }
.po-norme-immagini { margin: 16px 0; }
.po-norme-immagini summary { cursor: pointer; color: var(--po-verde-scuro); font: 400 15px/24px var(--po-font); }
.po-norme-immagini img { display: block; max-width: 100%; height: auto; margin: 8px 0; border: 1px solid var(--po-filo); }
.po-norme-immagini .po-norme-plan { max-width: min(100%, 420px); }
.po-accetto { display: flex; gap: 8px; align-items: flex-start; font: 500 16px/24px var(--po-font); margin: 16px 0; }
.po-accetto input { width: 24px; height: 24px; flex: none; margin: 0; }
.po-visita-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.po-visita-form label { display: flex; flex-direction: column; gap: 8px; font: 400 14px/24px var(--po-font); color: var(--po-muto); min-width: 0; }
.po-visita-form .po-intero { grid-column: 1 / -1; }
@media (max-width: 640px) { .po-visita-form { grid-template-columns: 1fr; } }
.po-uscita-btn { width: 100%; height: 64px; font: 500 20px/32px var(--po-font); }
.po-lingue { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 16px; }
.po-lingue a { font: 400 14px/24px var(--po-font); color: var(--po-muto); text-decoration: none; }
.po-lingue a[aria-current] { color: var(--po-testo); font-weight: 500; text-decoration: underline; text-decoration-color: var(--po-verde); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.po-raccolta { display: flex; align-items: center; gap: 8px; font: 500 15px/24px var(--po-font); margin: 8px 0 0; }
.po-raccolta-segno { width: 16px; height: 16px; border-radius: 50%; background: var(--po-verde); flex: none; }
.po-qui { background: var(--po-rosso); }
.po-link-visitatori { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; word-break: break-all; }
/* firma col dito nel registro visitatori */
.po-firma { margin: 16px 0; }
.po-firma-testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font: 500 16px/24px var(--po-font); }
.po-firma canvas { display: block; width: 100%; height: 180px; background: var(--po-campo); border: 1px solid var(--po-filo-ctl); border-radius: 4px; touch-action: none; cursor: crosshair; }
.po-firma .po-nota { margin: 4px 0 0; }
.po-firma-mini { height: 32px; width: auto; max-width: 120px; background: #FFFFFF; border: 1px solid var(--po-filo); display: block; }
/* registro visitatori da link: tabella larga che scorre, filtri sotto le intestazioni */
.po.po-registro { max-width: 1400px; }
.po-reg-periodo { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-bottom: 16px; }
.po-reg-periodo label { display: flex; flex-direction: column; gap: 4px; font: 400 14px/24px var(--po-font); color: var(--po-muto); }
.po-reg-periodo .po-reg-dentro { flex-direction: row; align-items: center; gap: 8px; color: var(--po-testo); }
.po-reg-periodo input[type=date] { width: 170px; }
.po-reg-scorre { overflow-x: auto; border: 1px solid var(--po-filo); background: var(--po-campo); }
.po-reg-tab { min-width: 1100px; }
.po-reg-tab th, .po-reg-tab td { padding: 8px 12px; white-space: nowrap; }
.po-reg-tab td:nth-child(9) { white-space: normal; min-width: 160px; }
.po-reg-filtri th { padding-top: 0; }
.po-reg-filtri input, .po-reg-filtri select { width: 100%; min-width: 72px; height: 32px; padding: 0 8px; font-size: 14px; box-sizing: border-box; }
.po-reg-dentro-riga td { background: var(--po-verde-wash); }
.po-reg-link { margin-bottom: 16px; }
.po-reg-link form { display: flex; gap: 8px; }
.po-uscita-form { margin-top: 16px; }
/* il titolo delle pagine di visite.marca.it porta a www.marcagroup.it: stesso aspetto, nessuna sottolineatura */
.po-titolo-link, .po-titolo-link:hover, .po-titolo-link:visited { color: inherit; text-decoration: none; display: block; }