/* ==========================================================================
   Erimapp — sistema visivo
   Palette Pantone (valori schermo):
     PANTONE 2955 C        #003865  navy      → sidebar, titoli, marchio
     PANTONE 3145 C        #00778B  teal      → azioni primarie, link, focus
     PANTONE 1235 C        #FFB81C  ambra     → accento: "in servizio", luce del marchio
     PANTONE 356 C         #007A33  verde     → firmato / esito positivo
     PANTONE 1795 C        #D22630  rosso     → critico / errori
     PANTONE Cool Gray 1 C #D9D9D6  linee
     PANTONE Cool Gray 11 C #53565A testo secondario
   ========================================================================== */

@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/vendor/fonts/manrope/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/vendor/fonts/manrope/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* marchio (fissi, indipendenti dal tema) */
  --navy: #003865;
  --navy-2: #0A4A80;
  --navy-deep: #002A4C;
  --teal: #00778B;
  --teal-2: #005F6F;
  --teal-soft: #3FA9BB;
  --amber: #FFB81C;
  --amber-ink: #8A5A00;
  --green: #007A33;
  --red: #D22630;
  /* superfici (cambiano col tema) */
  --bg: #F4F6F7;
  --surface: #FFFFFF;
  --surface-2: #F8FAFB;
  --text: #0F2233;
  --text-2: #53565A;
  --line: #D9D9D6;
  --line-soft: #E8EAEA;
  --heading: #003865;
  --shadow: 0 1px 2px rgba(0, 56, 101, .06), 0 1px 1px rgba(0, 56, 101, .04);
  --shadow-lg: 0 18px 40px -12px rgba(0, 42, 76, .28);
  /* sidebar: sempre navy */
  --side-bg: #003865;
  --side-text: #C7D5E2;
  --side-muted: #7F9BB5;
  --side-hover: rgba(255, 255, 255, .07);
  --side-active: rgba(255, 255, 255, .12);
  --nav-h: 64px;
  --r: 12px;
  --r-sm: 8px;

  --bs-body-font-family: 'Manrope', system-ui, sans-serif;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-primary: var(--teal);
  --bs-primary-rgb: 0, 119, 139;
  --bs-border-color: var(--line);
  --bs-link-color: var(--teal);
  --bs-link-color-rgb: 0, 119, 139;
  --bs-link-hover-color-rgb: 0, 95, 111;
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-emphasis-color: var(--text);
}

  :root[data-theme="dark"] {
    --bg: #071521;
    --surface: #0D2133;
    --surface-2: #10283D;
    --text: #E6EDF3;
    --text-2: #9DB0C2;
    --line: #1E3A54;
    --line-soft: #173149;
    --heading: #F2F6FA;
    --teal: #2A9DB0;
    --teal-2: #3FB3C6;
    --green: #2FA866;
    --red: #EF5A63;
    --amber-ink: #FFC94D;
    --shadow: none;
    --side-bg: #021A2E;
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --bs-border-color: var(--line);
    --bs-link-color: var(--teal-2);
    --bs-emphasis-color: var(--text);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);
    color-scheme: dark;
  }
  :root[data-theme="dark"] .form-control,
  :root[data-theme="dark"] .form-select { background-color: #091A29; color: var(--text); border-color: var(--line); }
  :root[data-theme="dark"] .form-control::placeholder { color: #5F7891; }
  :root[data-theme="dark"] .modal-content,
  :root[data-theme="dark"] .dropdown-menu { background: var(--surface); color: var(--text); border-color: var(--line); }
  :root[data-theme="dark"] .dropdown-item { color: var(--text); }
  :root[data-theme="dark"] .dropdown-item:hover { background: var(--surface-2); }
  :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--line); }
  :root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--line); }
  :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
  :root[data-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--text); --bs-btn-hover-border-color: var(--text-2); }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.5; font-feature-settings: 'tnum' 0; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, .display { font-family: 'Manrope', sans-serif; color: var(--heading); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: 1.65rem; margin: 0; }
h2 { font-size: 1.08rem; font-weight: 750; letter-spacing: -0.01em; }
h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--text-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
a { text-underline-offset: 2px; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--teal) 70%, transparent); outline-offset: 2px; }
main:focus { outline: none; }

.btn { border-radius: var(--r-sm); font-weight: 650; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; letter-spacing: -0.005em; }
.btn-sm { min-height: 34px; font-size: .85rem; gap: 6px; }
.btn .ico { width: 18px; height: 18px; }
.btn-primary { --bs-btn-bg: var(--teal); --bs-btn-border-color: var(--teal); --bs-btn-hover-bg: var(--teal-2); --bs-btn-hover-border-color: var(--teal-2); --bs-btn-active-bg: var(--teal-2); --bs-btn-active-border-color: var(--teal-2); --bs-btn-disabled-bg: var(--teal); --bs-btn-disabled-border-color: var(--teal); }
.btn-outline-secondary { --bs-btn-color: var(--heading); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-color: var(--heading); --bs-btn-hover-border-color: #B9C2CA; --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--heading); background: var(--surface); }
.btn-outline-danger { --bs-btn-color: var(--red); --bs-btn-border-color: color-mix(in srgb, var(--red) 45%, transparent); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); }
.btn-danger { --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red); }
.form-control, .form-select { min-height: 42px; border-radius: var(--r-sm); border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); }
.form-check-input:checked { background-color: var(--teal); border-color: var(--teal); }
.form-label { font-weight: 650; font-size: .86rem; margin-bottom: .3rem; color: var(--heading); }
.form-text { color: var(--text-2); }
.modal-content { border-radius: 16px; border: 0; box-shadow: var(--shadow-lg); }
.modal-title { font-weight: 800; color: var(--heading); }
.dropdown-menu { border-radius: 10px; border-color: var(--line); box-shadow: var(--shadow-lg); padding: 6px; }
.dropdown-item { border-radius: 6px; padding: 8px 12px; font-weight: 550; }

/* ---------- Icone ---------- */
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--side-bg);
  color: var(--side-text);
  padding: 20px 14px 16px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 22px; color: #fff; font-weight: 800; font-size: 1.32rem; letter-spacing: -0.035em; text-decoration: none; }
.brand:hover { color: #fff; }
.brand img { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.side a.nav-i { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 9px; color: var(--side-text); text-decoration: none; font-weight: 600; font-size: .94rem; }
.side a.nav-i .ico { color: var(--side-muted); }
.side a.nav-i:hover { background: var(--side-hover); color: #fff; }
.side a.nav-i:hover .ico { color: #fff; }
.side a.nav-i.on { background: var(--side-active); color: #fff; }
.side a.nav-i.on .ico { color: var(--amber); }
.side a.nav-i.on::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--amber); }
.side .grp { margin: 18px 12px 6px; font-size: .74rem; font-weight: 700; color: var(--side-muted); letter-spacing: .02em; }
.side .me { margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; grid-template-columns: 38px 1fr; gap: 2px 10px; align-items: center; }
.side .me .me-av { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; background: var(--amber); color: var(--navy); display: grid; place-items: center; font-weight: 800; font-size: .9rem; }
.side .me .me-name { color: #fff; font-weight: 700; text-decoration: none; font-size: .92rem; line-height: 1.2; }
.side .me .me-role { color: var(--side-muted); font-size: .8rem; }
.side .me .me-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.side .me .btn { color: var(--side-text); border-color: rgba(255,255,255,.18); background: transparent; }
.side .me .btn:hover { background: var(--side-hover); color: #fff; border-color: rgba(255,255,255,.3); }

main { padding: 28px 36px 56px; max-width: 1240px; width: 100%; }
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.top .sub { color: var(--text-2); margin-top: 4px; font-weight: 500; }
.bottom-nav, .mobile-head { display: none; }

@media (max-width: 960px) {
  .shell { display: block; }
  .side { display: none; }
  main { padding: 16px 16px calc(var(--nav-h) + 28px); }
  .mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--side-bg); color: #fff; position: sticky; top: 0; z-index: 20; }
  .mobile-head .brand { padding: 0; font-size: 1.15rem; }
  .mobile-head .brand img { width: 28px; height: 28px; border-radius: 7px; }
  .mobile-head a { color: #fff; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); z-index: 30; box-shadow: 0 -6px 20px -12px rgba(0, 42, 76, .25); }
  .bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-2); text-decoration: none; font-size: .72rem; font-weight: 650; }
  .bottom-nav a.on { color: var(--teal); }
  .bottom-nav a.on::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--teal); }
  h1 { font-size: 1.4rem; }
}

/* ---------- Blocchi ---------- */
.panel { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r); box-shadow: var(--shadow); }
.panel.scroll-x { overflow-x: auto; }
.panel > .rows > li:last-child { border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
.panel > .ph { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.panel > .ph h2, .panel > .ph h3 { margin: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-top: 1px solid var(--line-soft); }
.rows > li > .ico { color: var(--teal); }
.rows > li.link { cursor: pointer; transition: background .12s; }
.rows > li.link:hover { background: var(--surface-2); }
.rows .grow { flex: 1; min-width: 0; }
.rows .t { font-weight: 700; color: var(--heading); }
.rows .s { color: var(--text-2); font-size: .86rem; }
.empty { padding: 30px 18px; color: var(--text-2); text-align: center; }
.empty a { font-weight: 650; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 960px) { .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 14px; } }
.stack > * + * { margin-top: 18px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: color-mix(in srgb, var(--text-2) 12%, transparent); color: var(--text-2); white-space: nowrap; line-height: 1.4; }
.pill.ok { background: color-mix(in srgb, var(--green) 13%, transparent); color: var(--green); }
.pill.warn { background: color-mix(in srgb, var(--amber) 24%, transparent); color: var(--amber-ink); }
.pill.bad { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.pill.info { background: color-mix(in srgb, var(--teal) 13%, transparent); color: var(--teal); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--navy) 9%, var(--surface)); display: grid; place-items: center; font-weight: 800; font-size: .92rem; color: var(--navy); flex: none; overflow: hidden; }
 :root[data-theme="dark"] .avatar { background: #173A5A; color: #CFE1F2; } 
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.lg { width: 88px; height: 88px; font-size: 1.6rem; box-shadow: 0 0 0 4px var(--surface), 0 0 0 5px var(--line); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar .form-control, .toolbar .form-select { width: auto; min-width: 170px; background-color: var(--surface); }
.toolbar .search { flex: 1; min-width: 220px; padding-left: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353565A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 12px center; background-size: 17px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs button { background: none; border: 0; padding: 10px 14px; color: var(--text-2); font-weight: 650; border-bottom: 2.5px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.tabs button:hover { color: var(--heading); }
.tabs button.on { color: var(--heading); border-bottom-color: var(--teal); }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; padding: 4px 18px 18px; margin: 0; }
.kv dt { color: var(--text-2); font-weight: 600; font-size: .87rem; }
.kv dd { margin: 0; font-weight: 550; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* Righe persona (personale): layout che va a capo su schermi stretti */
.person .who-txt { min-width: 0; }
.person .who-txt .t, .person .who-txt .s { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .user { display: block; font-weight: 500; font-size: .82rem; color: var(--text-2); }
.person .tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 720px) {
  .rows > li.person { flex-wrap: wrap; row-gap: 8px; }
  .person .who-txt { flex: 1 1 0; }
  .person .tags { order: 3; flex-basis: 100%; justify-content: flex-start; padding-left: 58px; }
}

/* ---------- Dashboard ---------- */
.status-line {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r); margin-bottom: 18px; flex-wrap: wrap;
  background: var(--navy); color: #fff; box-shadow: var(--shadow-lg);
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(63,169,187,.35) 0%, transparent 55%);
}
.status-line.on { background-image: radial-gradient(120% 140% at 100% 0%, rgba(255,184,28,.28) 0%, transparent 55%); }
.status-line .big { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; }
.status-line .sl-sub { color: #B9CCDD; font-size: .88rem; }
.status-line .btn { margin-left: auto; }
.status-line .btn-light { --bs-btn-color: var(--navy); --bs-btn-bg: #fff; --bs-btn-hover-bg: #EAF2F7; --bs-btn-border-color: #fff; }
.status-line .btn-primary { --bs-btn-bg: var(--amber); --bs-btn-border-color: var(--amber); --bs-btn-color: var(--navy); --bs-btn-hover-bg: #FFC94D; --bs-btn-hover-border-color: #FFC94D; --bs-btn-hover-color: var(--navy); }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #5E7B95; flex: none; }
.status-line.on .status-dot { background: var(--amber); box-shadow: 0 0 0 5px rgba(255, 184, 28, .22); }
.occ { display: flex; gap: 3px; height: 7px; margin-top: 8px; max-width: 360px; }
.occ span { flex: 1; border-radius: 2px; background: var(--line-soft); }
.occ span.f { background: var(--teal); }
.alert-row { box-shadow: inset 4px 0 0 var(--red); }
.alert-row.warn { box-shadow: inset 4px 0 0 var(--amber); }

/* ---------- Registro firme ---------- */
.reg-head { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.reg-count { font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--heading); letter-spacing: -0.04em; }
.reg-count small { font-size: 1.05rem; color: var(--text-2); font-weight: 600; letter-spacing: 0; }
.reg-bar { flex: 1; min-width: 180px; height: 10px; border-radius: 6px; background: var(--line-soft); overflow: hidden; display: flex; }
.reg-bar i { display: block; height: 100%; }
.reg-bar .f { background: var(--green); } .reg-bar .a { background: var(--amber); }
.sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; padding: 0 18px 18px; }
.slot { position: relative; text-align: left; background: var(--surface); border: 1.5px dashed #BFC7CE; border-radius: 12px; padding: 12px; min-height: 140px; display: flex; flex-direction: column; gap: 8px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.slot:hover:not(:disabled) { border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 14%, transparent); }
.slot:disabled { opacity: .7; }
.slot .who { display: flex; gap: 10px; align-items: center; }
.slot .who .avatar { width: 38px; height: 38px; font-size: .85rem; }
.slot .nm { font-weight: 700; line-height: 1.2; font-size: .93rem; color: var(--heading); }
.slot .meta { font-size: .76rem; color: var(--text-2); }
.slot .ink { flex: 1; display: grid; place-items: center; border-top: 1px dashed var(--line); margin-top: 2px; padding-top: 6px; min-height: 54px; color: var(--teal); font-size: .82rem; font-weight: 650; }
.slot .ink img { max-width: 100%; max-height: 54px; }
.slot.signed { border-style: solid; border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: color-mix(in srgb, var(--green) 4%, var(--surface)); }
.slot.signed .ink { border-top-style: solid; }
.slot.absent { border-style: solid; border-color: color-mix(in srgb, var(--amber) 70%, var(--line)); background: color-mix(in srgb, var(--amber) 6%, var(--surface)); }
.slot.absent .ink { color: var(--amber-ink); }
.slot .stamp { position: absolute; bottom: 8px; right: 8px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); }
 :root[data-theme="dark"] .slot .ink img { filter: invert(1) hue-rotate(180deg); } :root[data-theme="dark"] .slot { border-color: #2A4A68; } 

/* ---------- Pad firma ---------- */
.sig-wrap { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; touch-action: none; }
.sig-wrap canvas { display: block; width: 100%; height: 260px; border-radius: 10px; cursor: crosshair; }
.sig-wrap .baseline { position: absolute; left: 24px; right: 24px; bottom: 56px; border-bottom: 1.5px solid #C9D0D6; pointer-events: none; }
.sig-wrap .hint { position: absolute; left: 24px; bottom: 30px; color: #8C979F; font-size: .8rem; pointer-events: none; }
.modal-fullscreen-sm-down .sig-wrap canvas { height: 46vh; }

/* ---------- Scanner & timbratura ---------- */
.scan-box { position: relative; background: #000; border-radius: 14px; overflow: hidden; aspect-ratio: 1; max-width: 420px; margin: 0 auto; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; }
.scan-box .frame { position: absolute; inset: 14%; border: 3px solid var(--amber); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0, 20, 40, .45); }
.clock-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.clock-btns .btn { min-height: 80px; font-size: 1.12rem; font-weight: 800; border-radius: 14px; }
.btn-in { background: var(--teal); color: #fff; border: 0; }
.btn-in:hover, .btn-in:focus { background: var(--teal-2); color: #fff; }
.btn-out { background: var(--navy); color: #fff; border: 0; }
.btn-out:hover, .btn-out:focus { background: var(--navy-2); color: #fff; }
.suggested { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--amber); }

/* ---------- Tabelle ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--line-soft); margin: 0; }
.table > :not(caption) > * > * { padding: 10px 14px; }
.table th { font-weight: 700; color: var(--text-2); font-size: .8rem; white-space: nowrap; background: var(--surface-2); }
.matrix { font-size: .78rem; }
.matrix > :not(caption) > * > * { padding: 5px 6px; text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); white-space: nowrap; font-weight: 600; }
.m-P { color: var(--green); font-weight: 800; } .m-A { color: var(--amber-ink); font-weight: 800; } .m-N { color: var(--red); font-weight: 800; }
.scroll-x { overflow-x: auto; }

/* ---------- Toast ---------- */
.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + 16px); z-index: 2000; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 440px); }
@media (min-width: 961px) { .toasts { bottom: 24px; } }
.toast-x { background: var(--navy); color: #fff; padding: 13px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); font-weight: 600; border-left: 4px solid var(--teal-soft); }
.toast-x.err { border-left-color: var(--red); }
.toast-x.ok { border-left-color: var(--amber); }

/* ---------- Login ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--bg); }
.auth .art {
  position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.auth .art::after { /* tetto stilizzato del marchio come grafica di sfondo */
  content: ''; position: absolute; right: -12%; bottom: -18%; width: 78%; aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M13 31.5 32 15l19 16.5' fill='none' stroke='%233FA9BB' stroke-opacity='.22' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19 30v19h26V30' fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='3'/%3E%3Cpath d='M27 49V39a5 5 0 0 1 10 0v10z' fill='%23FFB81C' fill-opacity='.85'/%3E%3C/svg%3E") no-repeat center / contain;
}
.auth .art > * { position: relative; z-index: 1; }
.auth .art .brand { padding: 0; font-size: 1.5rem; }
.auth .art .brand img { width: 42px; height: 42px; border-radius: 11px; }
.auth .art h1 { color: #fff; font-size: 2.7rem; line-height: 1.06; max-width: 13ch; letter-spacing: -0.035em; margin-bottom: 16px; }
.auth .art p { color: #B9CCDD; max-width: 40ch; font-size: 1.02rem; }
.auth .art .foot { color: #7F9BB5; }
.auth form { align-self: center; justify-self: center; width: min(400px, 90vw); padding: 36px 0; }
.auth form h2 { font-size: 1.6rem; font-weight: 800; }
.auth .qr { background: #fff; padding: 12px; border-radius: 12px; width: 220px; margin: 12px auto; border: 1px solid var(--line); }
.auth .secret { letter-spacing: .08em; word-break: break-all; text-align: center; font-size: .9rem; font-weight: 700; color: var(--heading); }
.otp { font-size: 1.6rem !important; font-weight: 800; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .auth { grid-template-columns: 1fr; }
  .auth .art { padding: 24px 20px 28px; }
  .auth .art::after { width: 46%; right: -6%; bottom: -30%; }
  .auth .art h1 { font-size: 1.7rem; margin-top: 18px; }
  .auth .art p:not(.foot) { font-size: .92rem; }
  .auth .art .foot { display: none; }
}

/* ---------- Kiosk ---------- */
.kiosk { min-height: 100vh; background: var(--navy); color: #fff; display: grid; grid-template-rows: auto 1fr auto; padding: 24px 32px; gap: 16px; background-image: radial-gradient(90% 120% at 100% 100%, rgba(63,169,187,.22) 0%, transparent 60%); }
.kiosk h1, .kiosk h2 { color: #fff; }
.kiosk header { display: flex; justify-content: space-between; align-items: center; }
.kiosk .k-brand { display: flex; align-items: center; gap: 12px; }
.kiosk .k-brand img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.kiosk .clock { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kiosk .stage { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; justify-content: center; }
.kiosk .qr-big { background: #fff; padding: 20px; border-radius: 22px; width: min(62vh, 80vw); aspect-ratio: 1; position: relative; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5), 0 0 0 6px rgba(255,184,28,.9); transition: opacity .3s; }
.kiosk .qr-big svg { width: 100%; height: 100%; display: block; }
.kiosk .ttl { position: absolute; left: 20px; right: 20px; bottom: 7px; height: 4px; background: #E3E8EC; border-radius: 2px; overflow: hidden; }
.kiosk .ttl i { display: block; height: 100%; background: var(--teal); transition: width 1s linear; }
.kiosk .side-txt h2 { font-size: 2.1rem; max-width: 15ch; color: #fff; font-weight: 800; letter-spacing: -0.03em; }
.kiosk .side-txt p { color: #B9CCDD; font-size: 1.06rem; max-width: 36ch; }
.kiosk .clock-btns .btn-out { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.kiosk .clock-btns .btn-out:hover { background: rgba(255,255,255,.18); }
.kiosk .result { font-size: 1.5rem; font-weight: 800; padding: 18px 22px; border-radius: 14px; }
.kiosk .result.ok { background: var(--teal); } .kiosk .result.err { background: var(--red); }
.kiosk .otp { background: #fff; color: var(--navy); }
.kiosk .scan-box { box-shadow: 0 0 0 6px rgba(255,184,28,.9); }
@media (orientation: portrait) { .kiosk .stage { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; } .kiosk .qr-big { width: min(80vw, 52vh); } .kiosk .clock-btns { margin: 0 auto; } }

/* ---------- Badge stampabile (CR80) ---------- */
.badge-card { width: 85.6mm; height: 54mm; border-radius: 3mm; display: grid; grid-template-columns: 1fr 30mm; grid-template-rows: 11mm 1fr; overflow: hidden; background: #fff; color: #0F2233; font-family: 'Manrope', sans-serif; border: 1px solid #D9D9D6; box-shadow: var(--shadow); }
.badge-card .b-band { grid-column: 1 / -1; background: #003865; color: #fff; display: flex; align-items: center; gap: 2mm; padding: 0 4mm; font-weight: 800; font-size: 10pt; letter-spacing: -0.02em; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.badge-card .b-band img { width: 6.5mm; height: 6.5mm; border-radius: 1.5mm; }
.badge-card .b-band span { margin-left: auto; font-weight: 600; font-size: 6.5pt; color: #FFB81C; }
.badge-card .b-body { padding: 3mm 0 3mm 4mm; display: flex; flex-direction: column; }
.badge-card .b-name { font-weight: 800; font-size: 12.5pt; line-height: 1.1; color: #003865; letter-spacing: -0.02em; }
.badge-card .b-role { font-size: 7.5pt; color: #00778B; font-weight: 700; margin-top: 1mm; }
.badge-card .b-meta { font-size: 6.2pt; color: #53565A; margin-top: auto; }
.badge-card .b-qr { padding: 2.5mm 3.5mm 3mm 1mm; }
.badge-card .b-qr svg { width: 100%; height: auto; display: block; }

@media print {
  body.printing-area * { visibility: hidden; }
  body.printing-area .print-area, body.printing-area .print-area * { visibility: visible; }
  body.printing-area .print-area { position: absolute; left: 0; top: 0; }
  .side, .bottom-nav, .mobile-head, .toolbar, .tabs { display: none !important; }
  .shell { display: block; }
  .panel { box-shadow: none; }
  @page { margin: 10mm; }
}
.print-only { display: none; }
@media print { .no-print { display: none !important; } .print-only { display: block; } main { padding: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }