/* Sportelli — foglio di stile delle schermate delle operatrici.
   Disegno approvato il 16/09/2026, capitolo 8 della specifica.
   Colori presi dal logo Beeasy: teal #188098, arancio #F09810.
   Le due serie del grafico sono validate su fondo chiaro e scuro. */

:root{
    --ground:#edf1f3;
    --surface:#ffffff;
    --surface-2:#f6f9fa;
    --ink:#0f2028;
    --ink-2:#38505a;
    --muted:#637b85;
    --line:#d2dce0;
    --line-strong:#b3c2c8;

    /* accento: sovrascritto per committente */
    --accent:#106b83;
    --accent-ink:#ffffff;
    --accent-soft:#dff0f4;

    --busy:#188098;
    --busy-fill:#e6f2f5;
    --full:#b26b06;
    --full-fill:#fdf0da;
    --full-band:#f09810;
    --free-fill:#ffffff;
    --closed-line:#dde4e7;

    /* serie del grafico — validate su superficie chiara e scura */
    --s-ok:#00849F;
    --s-ko:#B07105;
    --ok-fill:#e3f3f7;
    --ko-fill:#fbefdc;
    --ok-ink:#0a6579;
    --ko-ink:#8c5a04;

    --shadow:0 1px 2px rgba(15,32,40,.06), 0 8px 24px -16px rgba(15,32,40,.3);
    --r:4px;
    --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ground:#0b1418;
      --surface:#121e23;
      --surface-2:#18262c;
      --ink:#e3edf1;
      --ink-2:#b4c6cd;
      --muted:#7d959e;
      --line:#24343b;
      --line-strong:#374b53;
      --accent:#4fb9d1;
      --accent-ink:#04222b;
      --accent-soft:#12323c;
      --busy:#6fc0d6;
      --busy-fill:#122a33;
      --full:#f0a83c;
      --full-fill:#2e2113;
      --full-band:#f09810;
      --free-fill:#121e23;
      --closed-line:#1e2c32;
      --ok-fill:#102a31;
      --ko-fill:#2b2011;
      --ok-ink:#6fc0d6;
      --ko-ink:#e6a640;
      --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -16px rgba(0,0,0,.85);
    }
  }
  :root[data-theme="dark"]{
    --ground:#0b1418;
    --surface:#121e23;
    --surface-2:#18262c;
    --ink:#e3edf1;
    --ink-2:#b4c6cd;
    --muted:#7d959e;
    --line:#24343b;
    --line-strong:#374b53;
    --accent:#4fb9d1;
    --accent-ink:#04222b;
    --accent-soft:#12323c;
    --busy:#6fc0d6;
    --busy-fill:#122a33;
    --full:#f0a83c;
    --full-fill:#2e2113;
    --full-band:#f09810;
    --free-fill:#121e23;
    --closed-line:#1e2c32;
    --ok-fill:#102a31;
    --ko-fill:#2b2011;
    --ok-ink:#6fc0d6;
    --ko-ink:#e6a640;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 8px 24px -16px rgba(0,0,0,.85);
  }

  *{box-sizing:border-box}
  body{
    background:var(--ground);color:var(--ink);font-family:var(--sans);
    font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  }
  .wrap{padding:16px;padding-block:16px;max-width:1560px;margin:0 auto}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
  [hidden]{display:none !important}

  /* ---------- barra superiore ---------- */
  .topbar{
    display:flex;align-items:center;gap:18px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:12px 16px;box-shadow:var(--shadow);margin-bottom:12px;
  }
  .brand{display:flex;align-items:center;gap:16px;padding-right:18px;border-right:1px solid var(--line)}
  .brand img{height:34px;width:auto;display:block}
  .brand .prod{font-size:17px;font-weight:600;letter-spacing:-.015em;color:var(--accent);line-height:1.1}
  .brand .prod small{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:2px}

  .tabs{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:2px}
  .tabs button, .tabs a{
    border:0;background:transparent;border-radius:3px;padding:6px 13px;cursor:pointer;
    font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;
    text-decoration:none;display:inline-block;
  }
  .tabs button:hover, .tabs a:hover{color:var(--ink)}
  .tabs button[aria-selected="true"], .tabs a[aria-selected="true"]{
    background:var(--surface);color:var(--accent);font-weight:600;box-shadow:var(--shadow);
  }

  /* ---------- ricerca ---------- */
  .search{position:relative}
  .search input{
    font:inherit;font-size:13px;color:var(--ink);background:var(--surface-2);
    border:1px solid var(--line-strong);border-radius:var(--r);padding:6px 10px;width:250px;
  }
  .search input:focus{background:var(--surface);border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
  .search .res{
    position:absolute;top:calc(100% + 5px);left:0;width:392px;max-width:80vw;z-index:30;
    background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
    box-shadow:var(--shadow);max-height:328px;overflow:auto;
  }
  .search .res button{
    display:block;width:100%;text-align:left;border:0;background:transparent;cursor:pointer;
    padding:8px 12px;border-bottom:1px solid var(--line);
  }
  .search .res button:last-child{border-bottom:0}
  .search .res button:hover{background:var(--surface-2)}
  .search .r1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .search .r1 b{font-size:13px;font-weight:600}
  .search .r1 .cod{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
  .search .r2{font-size:11.5px;color:var(--muted);margin-top:1px;display:flex;gap:7px;align-items:baseline}
  .search .r2 .fut{color:var(--accent);font-weight:600}
  .search .vuoto{padding:10px 12px;font-size:12px;color:var(--muted)}
  @media (max-width:760px){ .search input{width:100%} .search{width:100%} }

  .weeknav{display:flex;align-items:center;gap:8px}
  .weeknav .label{font-family:var(--mono);font-size:13px;font-weight:500;min-width:168px}
  .weeknav .label em{font-style:normal;color:var(--muted)}
  .kpis{display:flex;gap:20px;margin-left:auto;align-items:center;flex-wrap:wrap}
  .kpi{display:flex;flex-direction:column;gap:1px;line-height:1.15}
  .kpi b{font-family:var(--mono);font-size:19px;font-weight:600;font-variant-numeric:tabular-nums}
  .kpi span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
  .kpi.warn b{color:var(--full)}

  button{font:inherit;color:inherit}
  a.btn{text-decoration:none;display:inline-block}
  .btn{
    background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);
    padding:6px 12px;cursor:pointer;font-size:13px;font-weight:500;
    transition:background .12s ease,border-color .12s ease;
  }
  .btn:hover{background:var(--surface-2);border-color:var(--muted)}
  .btn.icon{padding:6px 9px;font-family:var(--mono)}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
  .btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
  .btn.ghost{border-color:transparent;background:transparent;color:var(--muted)}
  .btn.ghost:hover{background:var(--surface-2);color:var(--ink)}

  .layout{display:grid;grid-template-columns:186px minmax(0,1fr) 316px;gap:12px;align-items:start}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
  .card > h2{
    margin:0;padding:10px 14px;border-bottom:1px solid var(--line);
    font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;
    display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  }
  .card > h2 .r{letter-spacing:0;text-transform:none;font-weight:500;font-size:11.5px}

  /* ---------- colonna sportelli ---------- */
  .rail ul{list-style:none;margin:0;padding:6px}
  .rail a{text-decoration:none;color:inherit}
  .rail button, .rail a{
    width:100%;text-align:left;background:transparent;border:0;border-radius:3px;
    padding:7px 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  }
  .rail button:hover, .rail a:hover{background:var(--surface-2)}
  .rail button[aria-current="true"], .rail a[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
  .rail button[aria-current="true"] .nm, .rail a[aria-current="true"] .nm{font-weight:600;color:var(--accent)}
  .rail .nm{font-size:13.5px}
  .rail .ct{font-family:var(--mono);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .rail .sep{margin:8px 10px 4px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}

  .tasti{padding:10px 14px 13px;display:flex;flex-direction:column;gap:7px}
  .tasti div{display:flex;align-items:baseline;gap:9px;font-size:12px;color:var(--ink-2)}
  .tasti kbd{flex:none;min-width:52px;text-align:center;white-space:nowrap}
  .legend{padding:10px 14px 13px;display:flex;flex-direction:column;gap:7px}
  .legend div{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-2)}
  .sw{width:22px;height:14px;border:1px solid var(--line-strong);border-radius:2px;flex:none}
  .sw.free{background:var(--free-fill)}
  .sw.busy{background:var(--busy-fill);border-left:3px solid var(--busy)}
  .sw.full{background:var(--full-fill);border-left:3px solid var(--full-band)}
  .sw.closed{background:repeating-linear-gradient(-45deg,transparent 0 4px,var(--closed-line) 4px 5px)}

  /* ---------- griglia settimana ---------- */
  .gridwrap{overflow-x:auto}
  table.week{border-collapse:separate;border-spacing:0;width:100%;min-width:760px}
  table.week th, table.week td{border-bottom:1px solid var(--line);padding:0}
  table.week thead th{
    position:sticky;top:0;z-index:2;background:var(--surface);
    border-bottom:1px solid var(--line-strong);padding:8px 10px;text-align:left;vertical-align:bottom;
  }
  .dow{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .dnum{font-family:var(--mono);font-size:17px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
  th.today .dnum,th.today .dow{color:var(--accent)}
  th.today{box-shadow:inset 0 -2px 0 var(--accent)}
  th.hcol{width:62px;border-right:1px solid var(--line)}
  td.hcol{
    border-right:1px solid var(--line);vertical-align:top;padding:7px 10px 0 0;text-align:right;
    font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;
  }
  .slot{
    width:100%;text-align:left;background:var(--free-fill);border:0;border-left:3px solid transparent;
    cursor:pointer;padding:6px 9px;min-height:54px;display:block;transition:background .1s ease;
    -webkit-user-select:none;user-select:none;
  }
  .slot:hover{background:var(--surface-2)}
  .slot .hd{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
  .slot .cnt{font-family:var(--mono);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
  .slot .who{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.25;margin-top:1px;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
  .slot .why{font-size:11.5px;color:var(--muted);line-height:1.25;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
  .slot .free{font-size:12px;color:var(--muted)}
  .slot.full{background:var(--full-fill);border-left-color:var(--full-band)}
  .slot.full .cnt{color:var(--full);font-weight:600}
  .slot.busy{background:var(--busy-fill);border-left-color:var(--busy)}
  .slot.busy .cnt{color:var(--busy);font-weight:500}
  .slot.sel{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
  td.closed{background:repeating-linear-gradient(-45deg,transparent 0 5px,var(--closed-line) 5px 6px)}
  td.closed .lbl{display:block;padding:8px 9px;font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
  .mailmark{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-left:5px;flex:none}

  /* ---------- pannello presa ---------- */
  .panel.apre{animation:apre .14s ease-out}
  @keyframes apre{ from{box-shadow:0 0 0 3px var(--accent-soft), var(--shadow)} to{box-shadow:var(--shadow)} }
  .panel .body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:11px}
  .when{background:var(--surface-2);border:1px solid var(--line);border-radius:3px;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
  .when .d{font-family:var(--mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
  .when .s{font-size:12px;color:var(--muted)}
  .f{display:flex;flex-direction:column;gap:4px}
  .f label{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .f input,.f select,.f textarea{
    font:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:3px;padding:7px 9px;width:100%;
  }
  .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:-1px}
  .f textarea{resize:vertical;min-height:52px;line-height:1.4}
  .f .hint{font-size:11.5px;color:var(--muted)}
  .f .hint.ok{color:var(--accent);font-weight:500}
  .f.opt label::after{content:"facoltativo";float:right;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--muted);opacity:.85}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .actions{display:flex;gap:8px;align-items:center;margin-top:2px}
  .actions .btn.primary{flex:1;padding:9px 12px}
  kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:3px;padding:1px 4px;color:var(--muted);background:var(--surface-2)}

  /* ---------- registro invii ---------- */
  .reg{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
  .tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:13px 15px}
  .tile .lab{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
  .tile .val{font-family:var(--mono);font-size:29px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;margin-top:3px}
  .tile .sub{font-size:11.5px;color:var(--muted);margin-top:1px}
  .tile.ok .val{color:var(--ok-ink)}
  .tile.ko{border-left:3px solid var(--s-ko)}
  .tile.ko .val{color:var(--ko-ink)}

  .chartbox{padding:14px 16px 10px}
  .chart{position:relative;height:172px;margin:6px 0 0 34px}
  .gridline{position:absolute;left:0;right:0;border-top:1px solid var(--line);z-index:0}
  .gridline span{
    position:absolute;left:-34px;top:-8px;width:28px;text-align:right;
    font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  }
  .bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px;z-index:1}
  .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;height:100%;position:relative;cursor:default;background:transparent;border:0;padding:0}
  .col:hover .seg{filter:brightness(1.1)}
  .seg{width:100%;border-radius:0}
  .seg.top{border-radius:4px 4px 0 0}
  .seg.ok{background:var(--s-ok)}
  .seg.ko{background:var(--s-ko)}
  .col .flag{
    position:absolute;left:50%;transform:translateX(-50%);
    font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ko-ink);white-space:nowrap;
  }
  .xaxis{display:flex;gap:6px;margin:7px 0 0 34px;border-top:1px solid var(--line-strong);padding-top:6px}
  .xaxis div{flex:1;text-align:center;font-family:var(--mono);font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
  .xaxis div.mark{color:var(--ko-ink);font-weight:600}
  .chartlegend{display:flex;gap:16px;align-items:center;margin-top:10px;flex-wrap:wrap}
  .chartlegend i{width:11px;height:11px;border-radius:2px;display:inline-block;vertical-align:-1px;margin-right:6px}
  .chartlegend span{font-size:12px;color:var(--ink-2)}
  .tip{
    position:absolute;z-index:5;pointer-events:none;background:var(--surface);border:1px solid var(--line-strong);
    border-radius:3px;box-shadow:var(--shadow);padding:7px 10px;font-size:12px;min-width:150px;
  }
  .tip b{display:block;font-family:var(--mono);font-size:12px;margin-bottom:3px}
  .tip .l{display:flex;justify-content:space-between;gap:14px;font-variant-numeric:tabular-nums}
  .tip .l i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px}

  table.log{border-collapse:separate;border-spacing:0;width:100%;min-width:880px;font-size:13px}
  table.log th{
    text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-strong);
    font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;white-space:nowrap;
  }
  table.log td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
  table.log tr:hover td{background:var(--surface-2)}
  table.log .who{font-weight:600}
  table.log .sub{color:var(--muted);font-size:11.5px}
  .pill{
    display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:2px 9px 2px 7px;
    font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;
  }
  .pill i{width:7px;height:7px;border-radius:50%;flex:none}
  .pill.ok{background:var(--ok-fill);color:var(--ok-ink);border-color:var(--s-ok)}
  .pill.ok i{background:var(--s-ok)}
  .pill.wait{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
  .pill.wait i{background:var(--muted)}
  .pill.ko{background:var(--ko-fill);color:var(--ko-ink);border-color:var(--s-ko)}
  .pill.ko i{background:var(--s-ko)}
  .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
  .filters select,.filters input{
    font:inherit;font-size:13px;color:var(--ink);background:var(--surface);
    border:1px solid var(--line-strong);border-radius:3px;padding:5px 8px;
  }

  .banner{
    display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border-radius:var(--r);
    background:var(--ko-fill);border:1px solid var(--s-ko);border-left-width:3px;font-size:13px;color:var(--ink);
  }
  .banner b{color:var(--ko-ink)}

  /* ---------- vista committente ---------- */
  .cliente-bar{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);
    border-radius:var(--r);padding:13px 16px;box-shadow:var(--shadow);margin-bottom:12px;
  }
  .cliente-bar .logo{height:44px;width:auto;display:block}
  .cliente-bar .nome{font-size:16px;font-weight:600;line-height:1.2}
  .cliente-bar .nome small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:2px}
  .cliente-bar .by{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}
  .cliente-bar .by img{height:22px;width:auto;display:block;opacity:.85}
  .switcher{display:flex;gap:6px;flex-wrap:wrap}
  .switcher button{
    border:1px solid var(--line-strong);background:var(--surface);border-radius:99px;
    padding:4px 12px;font-size:12.5px;cursor:pointer;display:flex;align-items:center;gap:7px;
  }
  .switcher button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);font-weight:600;background:var(--accent-soft)}
  .switcher i{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}

  .note{
    margin-top:12px;padding:11px 14px;border:1px solid var(--line);border-left:3px solid var(--accent);
    border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow);
    font-size:12.5px;color:var(--ink-2);line-height:1.5;
  }
  .note b{color:var(--ink);font-weight:600}
  .scroll{overflow-x:auto}

  @media (max-width:1240px){
    .layout{grid-template-columns:170px minmax(0,1fr)}
    .panel{grid-column:1 / -1}
    .panel .body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-items:start}
    .panel .when,.panel .actions{grid-column:1 / -1}
    .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:760px){
    .wrap{padding:12px}
    .layout{grid-template-columns:minmax(0,1fr)}
    .rail{order:2}
    .panel .body{grid-template-columns:minmax(0,1fr)}
    .kpis{margin-left:0;gap:16px}
    .brand{border-right:0;padding-right:0}
    .brand img{height:26px}
    .tiles{grid-template-columns:minmax(0,1fr)}
    .cliente-bar .by{margin-left:0;width:100%}
  }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }

/* ---------- aggiunte rispetto alla bozza ---------- */

.messaggi{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.avviso{
  pointer-events:auto;background:var(--surface);border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);border-radius:var(--r);box-shadow:var(--shadow);
  padding:10px 14px;font-size:13px;display:flex;align-items:center;gap:14px;max-width:min(560px,92vw);
}
.avviso.ko{border-left-color:var(--s-ko)}
.avviso button{
  border:1px solid var(--line-strong);background:var(--surface-2);border-radius:3px;
  padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;flex:none;
}

.errore-campo{font-size:11.5px;color:var(--ko-ink);font-weight:500}
.f input.sbagliato,.f select.sbagliato{border-color:var(--s-ko)}

.accesso{max-width:360px;margin:9vh auto;padding:0 16px}
.accesso .card{padding:22px 22px 24px}
.accesso img{height:40px;width:auto;display:block;margin-bottom:20px}
.accesso h1{font-size:17px;margin:0 0 16px;font-weight:600}
.accesso .f{margin-bottom:13px}
.accesso .btn.primary{width:100%;padding:9px}
.accesso .errore{
  background:var(--ko-fill);border:1px solid var(--s-ko);border-radius:3px;
  padding:9px 11px;font-size:12.5px;color:var(--ink);margin-bottom:14px;
}

.vuoto-centro{max-width:520px;margin:12vh auto;text-align:center;color:var(--ink-2);font-size:14px;line-height:1.6}

a{color:var(--accent)}
.utente{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.utente b{color:var(--ink);font-weight:600}