:root {
  color-scheme: dark;
  --fondo: #061A2E; --vetro: rgba(255,255,255,.055); --vetro-2: rgba(255,255,255,.09); --bordo: rgba(255,255,255,.11);
  --testo: #EAF4FB; --tenue: #A9C4D8; --bianco: #fff; --cielo: #25A3DE; --su-cielo: #06223A;
  --azzurro: #7CCBF2; --oro: #D5BC94; --rosso: #FF9A8F; --verde: #8FE3B0; --ambra: #F5CE7A;
  --ombra: 0 10px 30px rgba(0,0,0,.28);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; color: var(--testo); background-color: var(--fondo); background-attachment: fixed;
  background-image: radial-gradient(900px 560px at 12% -8%, rgba(17,120,191,.52), transparent 70%),
    radial-gradient(800px 520px at 92% 8%, rgba(37,163,222,.26), transparent 70%),
    radial-gradient(900px 620px at 55% 112%, rgba(10,90,148,.46), transparent 70%);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--bianco); line-height: 1.2; margin: 0; letter-spacing: -.01em; font-weight: 600; }
h1 { font-size: 27px; } h2 { font-size: 17px; } h3 { font-size: 15px; margin-bottom: 10px; }
a { color: inherit; text-decoration: none; }
small { display: block; color: var(--tenue); font-size: 13px; }
button, input, select, textarea { font: inherit; color: inherit; }
button {
  border: 0; border-radius: 22px; padding: 8px 15px; min-height: 38px; background: var(--cielo); color: var(--su-cielo);
  font-weight: 600; cursor: pointer; transition: background .12s, transform .06s, opacity .12s;
}
button:hover { background: #55BCEB; }
button:active { transform: scale(.98); }
button:disabled { opacity: .6; cursor: default; }
button.secondario { background: var(--vetro-2); color: var(--testo); border: 1px solid var(--bordo); }
button.secondario:hover { background: rgba(255,255,255,.15); }
button.silenzioso { background: transparent; color: var(--tenue); padding: 6px 9px; }
button.silenzioso:hover { background: var(--vetro-2); color: var(--testo); }
button.rosso { background: var(--rosso); color: #300; }
button.rosso-testo { color: var(--rosso); }
:focus-visible { outline: 2px solid var(--cielo); outline-offset: 2px; }
input, select, textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--bordo); border-radius: 12px; background: rgba(0,0,0,.24); min-height: 38px;
}
::placeholder { color: var(--tenue); opacity: 1; }
option { background: #0F2A44; color: var(--testo); }
textarea { min-height: 74px; resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--testo); }
label input, label select, label textarea { margin-top: 4px; font-weight: 400; font-size: 15px; }
kbd { font: inherit; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--bordo); background: var(--vetro-2); color: var(--tenue); }
/* Ricerca: lente a sinistra e X di cancellazione disegnate qui, uguali su ogni browser. */
input[type=search] { -webkit-appearance: none; appearance: none; padding-left: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bccf' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px 50%; background-size: 17px; }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; width: 16px; height: 16px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bccf' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: .8; }
input[type=search]::-webkit-search-cancel-button:hover { opacity: 1; }

.accesso { max-width: 390px; margin: 11vh auto; padding: 0 16px; }
.carta {
  background: var(--vetro); border: 1px solid var(--bordo); border-radius: 18px; padding: 18px;
  box-shadow: var(--ombra); backdrop-filter: blur(16px);
}
.spazio { margin-top: 14px; }
.modulo { display: grid; gap: 13px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }
.azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.errore { color: var(--rosso); font-size: 14px; margin: 0; }
.errore:empty { display: none; }
.piccolo { font-size: 13px; color: var(--tenue); }
.etichetta-campo { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.campo { display: grid; gap: 6px; }

.guscio { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
.barra {
  grid-column: 1 / -1; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; backdrop-filter: blur(18px); background: rgba(6,26,46,.66);
}
.marchio { display: flex; gap: 7px; align-items: center; color: var(--bianco); font-size: 16px; white-space: nowrap; }
.marchio img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.logo-accesso { width: 64px; height: 64px; border-radius: 15px; display: block; margin-bottom: 14px; }
.barra nav {
  display: flex; gap: 2px; margin: 0 auto; padding: 4px; border-radius: 26px; background: var(--vetro); border: 1px solid var(--bordo); overflow-x: auto;
}
.barra nav a { display: flex; gap: 6px; padding: 6px 13px; border-radius: 20px; color: var(--tenue); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .12s, color .12s; }
.barra nav a:hover { color: var(--bianco); }
.barra nav a[aria-current] { background: var(--vetro-2); color: var(--bianco); }
.conteggio { font-size: 12px; font-weight: 700; color: var(--cielo); margin-left: 4px; }
.barra .cerca, .barra .esci { background: var(--vetro); border: 1px solid var(--bordo); color: var(--testo); font-weight: 400; display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.barra .cerca:hover, .barra .esci:hover { background: var(--vetro-2); }
.binario {
  position: sticky; top: 76px; align-self: start; justify-self: center; display: grid; gap: 6px; padding: 7px; margin-top: 12px;
  border-radius: 26px; background: var(--vetro); border: 1px solid var(--bordo);
}
.binario button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--tenue); font-size: 17px; font-weight: 400; }
.binario button:hover { background: var(--vetro-2); color: var(--bianco); }
.contenuto { min-width: 0; padding: 20px clamp(14px, 3vw, 32px) 60px 12px; max-width: 1380px; width: 100%; margin: 0 auto; }
.titolo-pagina { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.tessera { background: var(--vetro); border: 1px solid var(--bordo); border-radius: 18px; padding: 16px 18px; backdrop-filter: blur(16px); transition: transform .12s, background .12s; }
.tessera:hover { transform: translateY(-2px); background: var(--vetro-2); }
.tessera span { display: block; font-size: 13px; color: var(--tenue); }
.tessera strong { display: block; font-size: 26px; color: var(--bianco); font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.colonne { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 12px; }
.colonne h2 { margin-bottom: 10px; }
.lista { display: grid; gap: 2px; }
.riga-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; transition: background .1s; }
.riga-link:hover { background: var(--vetro-2); }
.riga-link > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.riga-link .piccolo { white-space: nowrap; }
.mese { text-transform: capitalize; margin-bottom: 8px; }
.giorno { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--vetro-2); font-weight: 700; color: var(--cielo); }
.vuoto { padding: 22px; text-align: center; color: var(--tenue); margin: 0; }

.filtri { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtri input { flex: 1 1 240px; width: auto; border-radius: 22px; }
.filtri select { width: auto; border-radius: 22px; }
.chip { background: var(--vetro); color: var(--tenue); border: 1px solid var(--bordo); min-height: 34px; padding: 4px 12px; font-size: 14px; }
.chip:hover { background: var(--vetro-2); color: var(--bianco); }
.chip.scelto { background: var(--bianco); color: #072A49; }
.segmenti { display: inline-flex; background: var(--vetro); border: 1px solid var(--bordo); border-radius: 22px; padding: 3px; }
.segmenti button { background: transparent; color: var(--tenue); min-height: 30px; padding: 3px 11px; font-size: 14px; }
.segmenti button:hover { color: var(--bianco); background: transparent; }
.segmenti button.scelto { background: var(--vetro-2); color: var(--bianco); }

.griglia-clienti { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.scheda-cliente {
  display: grid; gap: 2px; align-content: start; padding: 15px; border-radius: 18px; cursor: pointer; min-width: 0; overflow-wrap: anywhere;
  background: var(--vetro); border: 1px solid var(--bordo); backdrop-filter: blur(16px); transition: transform .12s, background .12s;
}
.scheda-cliente:hover { transform: translateY(-2px); background: var(--vetro-2); }
.scheda-testa { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--vetro-2); border: 1px solid var(--bordo); font-weight: 700; color: var(--bianco); }
.punto { width: 12px; height: 12px; border-radius: 50%; background: var(--tenue); }
.punto.ok { background: var(--cielo); box-shadow: 0 0 10px rgba(37,163,222,.6); }
.punto.attesa { background: var(--ambra); }
.punto.spento { background: var(--rosso); }
.mini-dati { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; padding: 10px; border-radius: 12px; background: rgba(0,0,0,.2); }
.mini-dati strong { display: block; color: var(--bianco); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-dati small { font-size: 12px; }
.scheda-piede { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.tondo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--vetro-2); border: 1px solid var(--bordo); transition: background .12s; }
.icona { display: block; flex: none; }
.tondo:hover { background: rgba(255,255,255,.2); }

.carta-pratica { display: grid; gap: 2px; padding: 11px; border-radius: 13px; background: rgba(0,0,0,.26); border: 1px solid var(--bordo); cursor: grab; overflow-wrap: anywhere; }
.carta-pratica:active { cursor: grabbing; }
.piede-pratica { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 7px; }
.piede-pratica strong { color: var(--bianco); font-weight: 600; white-space: nowrap; }
.piede-pratica select { width: auto; max-width: 118px; min-height: 30px; padding: 2px 6px; font-size: 13px; }

.tabella { background: var(--vetro); border: 1px solid var(--bordo); border-radius: 18px; overflow: hidden; backdrop-filter: blur(16px); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue); padding: 10px 14px; border-bottom: 1px solid var(--bordo); }
td { padding: 11px 14px; border-bottom: 1px solid var(--bordo); vertical-align: middle; overflow-wrap: anywhere; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; transition: background .08s; }
tbody tr:hover { background: var(--vetro-2); }
.forte { font-weight: 600; color: var(--bianco); }
.numero { text-align: right; font-variant-numeric: tabular-nums; }
.pillola { display: inline-block; padding: 1px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; background: rgba(124,203,242,.17); color: var(--azzurro); margin-right: 6px; }
.pillola.bu { background: rgba(213,188,148,.17); color: var(--oro); }
.pillola.ok { background: rgba(143,227,176,.15); color: var(--verde); margin-right: 0; }
.pillola.attesa { background: rgba(245,206,122,.15); color: var(--ambra); margin-right: 0; }
.pillola.spento { background: rgba(255,154,143,.15); color: var(--rosso); margin-right: 0; }
.carico .barra { height: 5px; border-radius: 3px; background: var(--vetro-2); overflow: hidden; margin-top: 5px; }
.carico .barra span { display: block; height: 100%; width: 0; background: var(--cielo); transition: width .2s; }

.scheletro { display: grid; gap: 10px; }
.scheletro div {
  height: 54px; border-radius: 12px; background: linear-gradient(90deg, var(--vetro) 25%, var(--vetro-2) 50%, var(--vetro) 75%);
  background-size: 200% 100%; animation: scorri 1.2s linear infinite;
}
@keyframes scorri { to { background-position: -200% 0; } }

dialog { border: 1px solid var(--bordo); color: var(--testo); padding: 0; background: #0B2238; }
dialog::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
dialog:focus-visible { outline: none; }
.finestra { border-radius: 20px; padding: 22px; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.cassetto { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(640px, 100vw); max-width: 100vw; overflow: auto; border-width: 0 0 0 1px; animation: entra .16s ease-out; }
@keyframes entra { from { transform: translateX(26px); opacity: .4; } }
.testa-cassetto {
  position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 20px; background: #0B2238; border-bottom: 1px solid var(--bordo);
}
.testa-cassetto > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.testa-cassetto h2 { font-size: 20px; margin-bottom: 4px; }
.testa-cassetto .azioni { flex-wrap: nowrap; flex-shrink: 0; }
.chiudi { background: transparent; color: var(--tenue); font-size: 22px; padding: 0 10px; line-height: 1; }
.chiudi:hover { background: var(--vetro-2); color: var(--bianco); }
.corpo-cassetto { padding: 18px 20px 40px; display: grid; gap: 22px; }
.legame { color: var(--azzurro); font-weight: 600; margin-right: 10px; }
.nota { background: var(--vetro); padding: 11px 13px; border-radius: 12px; margin: 0; white-space: pre-wrap; }
.nota-nuova { display: grid; gap: 8px; margin-bottom: 10px; }
.nota-riga { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--bordo); }
.nota-riga > div { min-width: 0; overflow-wrap: anywhere; }
.nota-riga p { margin: 4px 0 0; white-space: pre-wrap; }
.riga-doc { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--bordo); }
.riga-doc > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.riga-doc strong, .nota-riga strong { color: var(--bianco); font-weight: 600; }
.dato { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bordo); }
.dato span { color: var(--tenue); }
.dato strong { color: var(--bianco); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.zona { display: block; position: relative; border: 2px dashed rgba(37,163,222,.45); border-radius: 15px; padding: 22px 16px; text-align: center; background: var(--vetro); cursor: pointer; font-weight: 400; transition: background .12s, border-color .12s; }
.zona:hover, .zona.sopra { background: rgba(37,163,222,.12); border-color: var(--cielo); }
.zona strong { display: block; color: var(--bianco); font-size: 15px; }
.zona input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; min-height: 0; }
.carico { margin-top: 8px; }
.spunte { display: grid; gap: 3px; max-height: 170px; overflow: auto; padding: 8px; border: 1px solid var(--bordo); border-radius: 12px; }
.spunte label { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; }
.spunte input { width: auto; min-height: 0; margin: 0; }
.codice { padding: 13px; background: var(--vetro-2); border-radius: 12px; font-size: 23px; font-weight: 700; letter-spacing: 2px; text-align: center; color: var(--cielo); overflow-wrap: anywhere; }

.palette { border-radius: 18px; width: min(560px, calc(100vw - 24px)); margin: 12vh auto auto; padding: 8px; overflow: hidden; }
.palette input { border: 0; background-color: transparent; font-size: 17px; min-height: 44px; }
.palette input:focus-visible { outline: none; }
.risultati { max-height: 50vh; overflow: auto; display: grid; gap: 1px; border-top: 1px solid var(--bordo); padding-top: 6px; }
.risultati button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; border-radius: 11px; background: transparent; color: var(--testo); font-weight: 400; text-align: left; }
.risultati button.attiva, .risultati button:hover { background: var(--vetro-2); }

#avviso {
  position: fixed; inset: auto auto 22px 50%; transform: translateX(-50%); margin: 0; border: 1px solid var(--bordo); max-width: calc(100vw - 24px);
  padding: 10px 14px; background: #123450; color: var(--bianco); border-radius: 14px; box-shadow: var(--ombra);
}
#avviso:popover-open { display: flex; align-items: center; gap: 14px; }
#avviso button { background: transparent; color: var(--cielo); padding: 2px 6px; min-height: 0; }
#avviso button:hover { background: var(--vetro-2); }

.testo-legale { max-width: 760px; padding: 24px 16px 60px; }
.testo-legale h2 { margin: 24px 0 8px; }

@media (max-width: 860px) {
  .guscio { display: block; }
  .binario, .marchio, .barra .cerca kbd { display: none; }
  .barra { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
  .barra nav { order: 3; flex-basis: 100%; margin: 0; }
  .barra .cerca { flex: 1; }
  .contenuto { padding: 14px 14px 50px; }
  .facoltativa { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* Promemoria */
.da-fare { margin-top: 12px; }
.testa-sezione { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.testa-sezione h2, .testa-sezione h3 { margin: 0; }
.promemoria-riga { display: flex; align-items: flex-start; gap: 10px; padding: 9px 6px; border-radius: 12px; }
.promemoria-riga > div:not(.azioni) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.promemoria-riga strong { display: block; color: var(--bianco); font-weight: 600; }
.promemoria-riga small .legame { margin-right: 0; }
.promemoria-riga input[type=checkbox] { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--verde); }
.promemoria-riga.fatto strong { text-decoration: line-through; color: var(--tenue); }
.promemoria-riga.automatico:hover { background: var(--vetro-2); }
.segno-auto { display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 2px; border-radius: 50%; background: rgba(245,206,122,.18); color: var(--ambra); font-size: 12px; font-weight: 700; }
.in-ritardo { color: var(--ambra); font-weight: 600; }
.piu-avanti summary { cursor: pointer; color: var(--tenue); padding: 8px 6px 0; }

/* Programma del viaggio */
.finestra.larga { width: min(860px, calc(100vw - 24px)); }
.tappe { display: grid; gap: 12px; }
.tappa { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--bordo); border-radius: 14px; min-width: 0; }
.tappa-riga { display: flex; gap: 10px; align-items: flex-start; padding: 9px 2px; border-bottom: 1px solid var(--bordo); }
.tappa-riga > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.tappa-riga strong { color: var(--bianco); font-weight: 600; }
.tappa-riga .pillola { flex: none; margin-top: 1px; }

/* Appuntamenti */
.appuntamento { align-items: flex-start; flex-wrap: wrap; padding: 12px 2px; }
.appuntamento .giorno { width: auto; height: 32px; padding: 0 10px; font-size: 14px; }
/* Il testo prende lo spazio; su schermi stretti le azioni vanno sotto, a tutta riga. */
.appuntamento > div:not(.azioni) { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; overflow-wrap: break-word; }
.appuntamento .nota { margin: 4px 0 0; }
.appuntamento .azioni { flex: 0 1 auto; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
@media (max-width: 600px) {
  .appuntamento .azioni { flex-basis: 100%; justify-content: flex-start; padding-left: 0; }
}
.settimana { display: grid; gap: 8px; }
.settimana label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; }
.spunta { display: flex !important; align-items: center; gap: 8px; font-weight: 500; }
.spunta input { width: auto; min-height: 0; margin: 0; }
.spunte-riga { display: flex; flex-wrap: wrap; gap: 18px; }
.titolo-pagina .azioni { flex-wrap: wrap; }
.proposta { display: grid; gap: 8px; justify-items: start; padding: 12px 14px; margin: 8px 0; border-radius: 12px; background: rgba(124,203,242,.1); }
.proposta ul { margin: 0; padding-left: 18px; color: var(--ambra); }
.con-prefisso { display: flex; align-items: stretch; }
.con-prefisso .prefisso { display: grid; place-items: center; min-width: 52px; padding: 0 10px; border: 1px solid var(--bordo); border-right: 0; border-radius: 12px 0 0 12px; background: var(--vetro-2); font-weight: 700; color: var(--cielo); }
.con-prefisso input { border-top-left-radius: 0; border-bottom-left-radius: 0; min-width: 0; }

/* Ruoli */
.chi-sono { color: var(--tenue); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.chi-viaggio { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.chi-viaggio strong { color: var(--bianco); font-weight: 600; }
.registro-riga { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--bordo); }
.registro-riga > div { min-width: 0; overflow-wrap: anywhere; display: grid; gap: 2px; }
.registro-riga strong { color: var(--bianco); font-weight: 600; }
.registro-riga.eliminato strong { color: var(--rosso); }
@media (max-width: 600px) { .registro-riga { grid-template-columns: 1fr; gap: 2px; } }

/* Stampa degli accessi del team: solo la tabella, su carta bianca. */
.codice-piccolo { font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--cielo); }
@media print {
  body:has(dialog.da-stampare[open]) > :not(dialog.da-stampare) { display: none !important; }
  body:has(dialog.da-stampare[open]) { background: #fff !important; color: #000; }
  dialog.da-stampare { position: static; inset: auto; max-width: none; width: 100%; box-shadow: none; border: 0; background: #fff; color: #000; }
  dialog.da-stampare::backdrop { display: none; }
  dialog.da-stampare .azioni { display: none; }
  dialog.da-stampare .tabella { background: #fff; border-color: #999; backdrop-filter: none; }
  dialog.da-stampare th, dialog.da-stampare td, dialog.da-stampare code, dialog.da-stampare p { color: #000 !important; }
}

/* Nome in alto: apre la sicurezza del proprio accesso. */
button.chi-sono { background: none; border: 0; min-height: 0; color: var(--tenue); font-weight: 400; padding: 6px 8px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; }
button.chi-sono:hover, button.chi-sono:focus-visible { color: var(--testo); background: var(--vetro-2); }
/* QR della verifica in due passaggi: sempre nero su bianco, perché la fotocamera lo legga. */
.qr-riquadro { display: flex; justify-content: center; margin: 8px 0 14px; }
.qr-riquadro .qr { width: 220px; height: 220px; border-radius: 12px; background: #fff; }