/* ENOVA TKT — grafica della famiglia ENOVA (stessi colori e forme di ENOVA FISCALE / LEGALE) */
:root {
  --blu: #0b2e9e; --blu-scuro: #071c63; --blu-chiaro: #1547d6;
  --acqua: #0fc0aa; --ciano: #14bee0;
  --verde: #1a7f37; --verde-bg: #e4f5e9;
  --rosso: #c0392b; --rosso-bg: #fdecea;
  --giallo: #a8760a; --giallo-bg: #fdf4de;
  --arancio: #c2670f; --arancio-bg: #fdeede;
  --viola: #6d28d9; --viola-bg: #efe7fb;
  --sfondo: #f3f5f9; --superficie: #ffffff; --superficie-2: #f7f9fc;
  --linea: #e3e8ef; --linea-2: #c1cad6;
  --testo: #1b2530; --testo-2: #5f6f80;
  --blu-bg: #e6ecfa; --acqua-bg: #e3f8f5;
  --bordo-attivo: rgba(11,46,158,.35);
  --ombra: 0 1px 3px rgba(16,32,52,.10), 0 1px 2px rgba(16,32,52,.06);
  --ombra-media: 0 4px 14px rgba(16,32,52,.10);
  --ombra-alta: 0 10px 30px rgba(16,32,52,.18);
  --raggio: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #eef3fc; color: var(--testo); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 640px at 102% -8%, rgba(21,71,214,.42), rgba(20,190,224,.22) 40%, transparent 66%),
    radial-gradient(1000px 620px at -8% 106%, rgba(11,46,158,.46), rgba(21,71,214,.18) 45%, transparent 66%),
    radial-gradient(700px 420px at 55% 50%, rgba(15,192,170,.06), transparent 65%),
    linear-gradient(180deg, #e9effb 0%, #f0f4fd 55%, #ecf2fc 100%);
}
a { color: var(--blu); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nascosto { display: none !important; }

/* ------------------------------------------------------------- LOGIN */
#schermata-login {
  min-height: 100vh; display: none; align-items: center; justify-content: center; padding: 20px;
  background:
    radial-gradient(1000px 520px at 82% 6%, rgba(20,190,224,.35), transparent 62%),
    radial-gradient(760px 460px at 8% 96%, rgba(15,192,170,.30), transparent 60%),
    linear-gradient(146deg, #071c63 0%, #0a2a92 52%, #1547d6 100%);
}
#schermata-login.attiva { display: flex; }
.box-login {
  background: #fff; width: 100%; max-width: 420px; border-radius: 16px; padding: 34px 32px 30px;
  box-shadow: 0 20px 50px rgba(4,16,60,.34);
}
.box-login .logo { text-align: center; margin-bottom: 8px; }
.box-login .logo img { width: 260px; max-width: 84%; height: auto; display: inline-block; }
.box-login .sottotitolo { text-align: center; font-size: 13px; color: var(--testo-2); margin-bottom: 26px; }
.box-login .btn { width: 100%; margin-top: 6px; }
.box-login .piede { text-align: center; font-size: 12px; color: var(--testo-2); margin-top: 18px; }
.box-login .collegamento { display: block; text-align: center; margin-top: 12px; font-size: 13px; background: none; border: 0; color: var(--blu); cursor: pointer; width: 100%; }

/* ------------------------------------------------------------- CAMPI */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.campo > label, .etichetta { font-size: 11.5px; font-weight: 700; color: var(--testo-2); text-transform: uppercase; letter-spacing: .04em; }
.campo input, .campo select, .campo textarea, .inp {
  width: 100%; padding: 9px 12px; border: 1px solid var(--linea-2); border-radius: 8px; background: #fff; min-width: 0;
  transition: border-color .15s, box-shadow .15s; font-size: 14.5px;
}
.campo textarea, textarea.inp { min-height: 110px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .inp:focus { outline: none; border-color: var(--blu-chiaro); box-shadow: 0 0 0 3px rgba(21,71,214,.14); }
.campo .aiuto, .aiuto-campo { font-size: 12px; color: var(--testo-2); }
.pw-box { position: relative; }
.pw-box input { padding-right: 40px; }
.pw-box .occhio { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 15px; padding: 6px; opacity: .6; }
.griglia-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.spunta { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; margin: 4px 0; }
.spunta input { width: 17px; height: 17px; accent-color: var(--blu); }

/* ------------------------------------------------------------- PULSANTI */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 16px;
  border: 1px solid transparent; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
  white-space: nowrap; transition: background .15s, transform .06s, box-shadow .15s, filter .15s; background: none; text-decoration: none;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--blu); color: #fff; }
.btn-primario:hover { filter: brightness(.92); }
.btn-acqua { background: var(--acqua); color: #052b26; }
.btn-acqua:hover { filter: brightness(.95); }
.btn-chiaro { background: var(--superficie); color: var(--testo); border-color: var(--linea-2); }
.btn-chiaro:hover { background: var(--superficie-2); }
.btn-rosso { background: var(--rosso); color: #fff; }
.btn-tenue { background: transparent; color: var(--testo-2); }
.btn-tenue:hover { background: var(--sfondo); color: var(--testo); }
.btn-job { border: 1px solid #0fc0aa; background: #e7faf7; color: #0b2e9e; font-weight: 700; }
.btn-piccolo { padding: 6px 11px; font-size: 13px; border-radius: 7px; }
.btn-mini { padding: 3px 8px; font-size: 12px; border-radius: 6px; }
.btn-tondo { border-radius: 999px; }
.btn-grad { background: linear-gradient(135deg, #0b2e9e, #1547d6); color: #fff; border: none; border-radius: 999px; }
.btn-grad:hover { filter: brightness(1.08); }

/* ------------------------------------------------------------- INTESTAZIONE */
#schermata-app { display: none; min-height: 100vh; }
#schermata-app.attiva { display: block; }
.barra-alta {
  background: var(--superficie); padding: 0 20px; height: 64px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--linea), 0 4px 16px rgba(11,46,158,.06);
}
.barra-alta::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #0b2e9e, #0fc0aa 60%, #14bee0); pointer-events: none; }
.barra-alta .marchio { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.barra-alta .marchio img { height: 38px; width: auto; display: block; }
.barra-alta .spazio { flex: 1; }
.cerca { position: relative; flex: 0 1 380px; min-width: 180px; }
.cerca input { width: 100%; height: 40px; border-radius: 999px; padding: 0 16px 0 38px; background: var(--sfondo); border: 1px solid transparent; }
.cerca input:focus { outline: none; background: #fff; border-color: var(--blu-chiaro); box-shadow: 0 0 0 3px rgba(21,71,214,.12); }
.cerca .lente { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; font-size: 14px; }
.cerca .risultati { position: absolute; left: 0; right: 0; top: 46px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: var(--ombra-alta); overflow: hidden; z-index: 60; }
.cerca .risultati button { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: none; cursor: pointer; font-size: 14px; }
.cerca .risultati button:hover, .cerca .risultati button.sel { background: var(--blu-bg); }
.cerca .risultati .vuoto { padding: 12px 14px; color: var(--testo-2); font-size: 13px; }
.icona-tonda { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; display: grid; place-items: center; cursor: pointer; font-size: 17px; flex-shrink: 0; }
.icona-tonda:hover { background: var(--sfondo); }
.icona-tonda .conta { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--rosso); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; }
.utente-info { display: flex; align-items: center; gap: 9px; border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 3px 12px 3px 3px; cursor: pointer; max-width: 230px; }
.utente-info .nome { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utente-info .ruolo { font-size: 11px; color: var(--testo-2); line-height: 1; }

/* menu a pillole con icona */
.menu { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 4px; max-width: 1500px; margin: 0 auto; }
.menu button {
  display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: 12px; min-height: 48px; font-size: 13.5px; font-weight: 600; color: var(--testo-2); cursor: pointer; box-shadow: var(--ombra);
  transition: box-shadow .15s, transform .06s, border-color .15s, color .15s;
}
.menu button .mi { width: 32px; height: 32px; border-radius: 9px; background: var(--sfondo); display: grid; place-items: center; font-size: 16px; }
.menu button:hover { color: var(--blu); border-color: var(--bordo-attivo); }
.menu button.attivo { color: var(--blu); border-color: var(--bordo-attivo); box-shadow: inset 0 -3px 0 var(--acqua), var(--ombra); }
.menu button.attivo .mi { background: var(--blu-bg); }
.menu .crea { margin-left: auto; }
.menu .crea.btn { min-height: 48px; border-radius: 12px; padding: 8px 18px; font-size: 14px; background: linear-gradient(135deg, #0b2e9e, #1547d6); color: #fff; border: none; box-shadow: 0 6px 18px rgba(11,46,158,.28); }
.menu .crea.btn:hover { color: #fff; filter: brightness(1.08); }

/* ------------------------------------------------------------- CONTENUTO */
#contenuto { max-width: 1500px; margin: 0 auto; padding: 14px 20px 70px; }
.titolo-pagina { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.titolo-pagina h1 { font-size: 22px; margin: 0; color: var(--blu-scuro); letter-spacing: -.01em; }
.titolo-pagina .sotto { color: var(--testo-2); font-size: 13.5px; }
.titolo-pagina .azioni { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.riquadro { background: var(--superficie); border-radius: 14px; box-shadow: var(--ombra-media); padding: 18px; border: 1px solid rgba(227,232,239,.7); min-width: 0; }
.riquadro h2 { font-size: 15px; margin: 0 0 12px; color: var(--blu-scuro); display: flex; align-items: center; gap: 8px; }
.riquadro h2 .dx { margin-left: auto; font-weight: 500; font-size: 13px; }
.griglia-cruscotto { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.c-12 { grid-column: span 12; } .c-8 { grid-column: span 8; } .c-6 { grid-column: span 6; } .c-4 { grid-column: span 4; }

.kpi-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi { background: var(--superficie); border-radius: 14px; padding: 14px 16px; box-shadow: var(--ombra-media); cursor: pointer; border: 1px solid rgba(227,232,239,.7); position: relative; overflow: hidden; transition: transform .1s; }
.kpi:hover { transform: translateY(-2px); }
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--blu)); }
.kpi .num { font-size: 28px; font-weight: 800; color: var(--c, var(--blu-scuro)); line-height: 1.1; }
.kpi .lab { font-size: 12.5px; color: var(--testo-2); font-weight: 600; }

.barre .riga { display: grid; grid-template-columns: 150px 1fr 42px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 7px; cursor: pointer; }
.barre .riga .nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre .pista { height: 10px; background: var(--sfondo); border-radius: 99px; overflow: hidden; }
.barre .pista span { display: block; height: 100%; border-radius: 99px; }
.barre .n { text-align: right; font-weight: 700; }
.grafico-giorni { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px; }
.grafico-giorni .g { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.grafico-giorni .coppia { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.grafico-giorni .b { width: 42%; max-width: 14px; border-radius: 4px 4px 0 0; min-height: 2px; }
.grafico-giorni .d { font-size: 10.5px; color: var(--testo-2); }
.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--testo-2); margin-top: 8px; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* righe ticket compatte (cruscotto, sotto-attività) */
.righe-t { display: flex; flex-direction: column; }
.riga-t { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--linea); cursor: pointer; min-width: 0; font-size: 14px; }
.riga-t:last-child { border-bottom: 0; }
.riga-t:hover { background: var(--superficie-2); }
.riga-t .ch { font-weight: 700; color: var(--blu); font-size: 12.5px; white-space: nowrap; }
.riga-t .ti { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vuoto { color: var(--testo-2); font-size: 13.5px; padding: 14px 4px; text-align: center; }

/* etichette di stato, priorità, tipo */
.st { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.st-aperto { background: var(--blu-bg); color: var(--blu); }
.st-in_corso { background: #dff6fb; color: #0b7d96; }
.st-in_revisione { background: var(--viola-bg); color: var(--viola); }
.st-in_attesa { background: var(--giallo-bg); color: var(--giallo); }
.st-risolto { background: var(--verde-bg); color: var(--verde); }
.st-chiuso { background: #eceff3; color: #5f6f80; }
.pr { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.pr-bloccante { color: var(--rosso); } .pr-alta { color: var(--arancio); } .pr-media { color: var(--giallo); } .pr-bassa { color: #2f7d4f; }
.tp { font-size: 15px; line-height: 1; }
.eti { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--acqua-bg); color: #08766a; font-size: 11.5px; font-weight: 600; margin: 1px 3px 1px 0; }
.app-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 6px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--sfondo); color: var(--testo); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.app-pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sla { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.sla-ok { background: var(--verde-bg); color: var(--verde); } .sla-vicino { background: var(--giallo-bg); color: var(--giallo); } .sla-scaduto { background: var(--rosso-bg); color: var(--rosso); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--blu), var(--ciano)); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; flex-shrink: 0; letter-spacing: .02em; }
.avatar.grande { width: 34px; height: 34px; font-size: 13px; }
.avatar.vuoto { background: var(--sfondo); color: var(--testo-2); border: 1px dashed var(--linea-2); padding: 0; }

/* ------------------------------------------------------------- BARRA FILTRI */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtri select, .filtri input { height: 38px; border: 1px solid var(--linea-2); border-radius: 999px; padding: 0 14px; background: #fff; font-size: 13.5px; max-width: 100%; }
.filtri input[type=search] { min-width: 200px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chip { border: 1px solid var(--linea); background: #fff; border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--testo-2); box-shadow: var(--ombra); }
.chip:hover { color: var(--blu); border-color: var(--bordo-attivo); }
.chip.attivo { background: var(--blu); color: #fff; border-color: var(--blu); }
.filtri-avanzati { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; padding: 14px; background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 12px; }
.filtri-avanzati .campo { margin-bottom: 10px; }

/* ------------------------------------------------------------- TABELLA */
.tabella-box { background: #fff; border-radius: 14px; box-shadow: var(--ombra-media); overflow: hidden; border: 1px solid rgba(227,232,239,.7); }
.tabella-scorre { overflow-x: auto; }
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--testo-2); background: var(--superficie-2); padding: 10px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; cursor: default; user-select: none; }
table.tab th.ord { cursor: pointer; }
table.tab th.ord:hover { color: var(--blu); }
table.tab td { padding: 9px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab tbody tr { cursor: pointer; }
table.tab tbody tr:hover td { background: #f6f8fd; }
table.tab tbody tr.sel td { background: #eaf0ff; }
table.tab .titolo-cella { max-width: 460px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
table.tab .ch { font-weight: 700; color: var(--blu); white-space: nowrap; }
.paginazione { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; font-size: 13px; color: var(--testo-2); border-top: 1px solid var(--linea); flex-wrap: wrap; }
.barra-massiva { position: sticky; top: 72px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--blu-scuro); color: #fff; border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; box-shadow: var(--ombra-alta); }
.barra-massiva select { height: 34px; border-radius: 8px; border: 0; padding: 0 10px; font-size: 13px; max-width: 170px; }
.schede-mobile { display: none; }

/* ------------------------------------------------------------- BACHECA */
.bacheca { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.colonna { background: rgba(255,255,255,.62); border: 1px solid rgba(227,232,239,.9); border-radius: 14px; padding: 10px; min-height: 200px; backdrop-filter: blur(6px); }
.colonna .testa { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-2); }
.colonna .testa .n { background: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; color: var(--testo); box-shadow: var(--ombra); }
.colonna .lista { display: flex; flex-direction: column; gap: 8px; min-height: 120px; border-radius: 10px; transition: background .12s; }
.colonna.sopra .lista { background: rgba(21,71,214,.07); outline: 2px dashed rgba(21,71,214,.35); outline-offset: 2px; }
.carta { background: #fff; border-radius: 11px; padding: 10px 11px; box-shadow: var(--ombra); border: 1px solid var(--linea); cursor: pointer; border-left: 4px solid var(--col, var(--linea)); transition: box-shadow .12s, transform .06s; }
.carta:hover { box-shadow: var(--ombra-media); }
.carta.trascina { opacity: .45; }
.carta .t1 { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 7px; word-break: break-word; }
.carta .t2 { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--testo-2); flex-wrap: wrap; }
.carta .t2 .ch { font-weight: 700; color: var(--blu); }
.carta .t2 .dx { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.carta .scad-rossa { color: var(--rosso); font-weight: 700; }
.selettore-colonne { display: none; }

/* ------------------------------------------------------------- SCHEDA TICKET */
.scheda { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.percorso { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--testo-2); flex-wrap: wrap; margin: 4px 0 6px; }
.percorso a, .percorso button { color: var(--testo-2); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; font-size: 13px; }
.percorso a:hover, .percorso button:hover { color: var(--blu); }
.titolo-ticket { font-size: 24px; font-weight: 800; color: var(--blu-scuro); margin: 0 0 10px; line-height: 1.25; cursor: text; border-radius: 8px; padding: 2px 6px; margin-left: -6px; word-break: break-word; }
.titolo-ticket.modificabile:hover { background: rgba(255,255,255,.75); }
.azioni-ticket { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.sezione { margin-bottom: 14px; }
.sezione > .intesta { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--blu-scuro); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.sezione > .intesta .dx { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.testo-ricco { font-size: 14.5px; line-height: 1.6; word-break: break-word; }
.testo-ricco p { margin: 0 0 9px; }
.testo-ricco code { background: var(--sfondo); padding: 1px 5px; border-radius: 5px; font-size: 13px; }
.testo-ricco pre { background: #0f1830; color: #dce6ff; padding: 12px; border-radius: 9px; overflow-x: auto; font-size: 12.5px; }
.testo-ricco ul { margin: 0 0 9px; padding-left: 22px; }
.testo-ricco .menz { background: var(--blu-bg); color: var(--blu); padding: 0 4px; border-radius: 5px; font-weight: 600; }
.descrizione-vuota { color: var(--testo-2); font-style: italic; cursor: text; padding: 8px; border-radius: 8px; border: 1px dashed var(--linea-2); }
.modificabile-box { cursor: text; border-radius: 8px; padding: 6px; margin: -6px; }
.modificabile-box:hover { background: var(--superficie-2); }
.allegati { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.allegato { border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; background: #fff; position: relative; font-size: 12px; box-shadow: var(--ombra); }
.allegato .ant { height: 86px; display: grid; place-items: center; background: var(--superficie-2); font-size: 30px; cursor: pointer; overflow: hidden; }
.allegato .ant img { width: 100%; height: 100%; object-fit: cover; }
.allegato .nm { padding: 6px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allegato .x { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.92); border: 0; border-radius: 6px; cursor: pointer; padding: 1px 6px; font-size: 12px; }
.zona-carica { border: 2px dashed var(--linea-2); border-radius: 11px; padding: 14px; text-align: center; color: var(--testo-2); font-size: 13px; cursor: pointer; background: var(--superficie-2); transition: border-color .12s, background .12s; }
.zona-carica.sopra, .zona-carica:hover { border-color: var(--blu-chiaro); background: var(--blu-bg); color: var(--blu); }
.file-in-attesa { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.file-in-attesa span { background: var(--blu-bg); color: var(--blu); border-radius: 99px; padding: 3px 10px; font-size: 12px; display: inline-flex; gap: 6px; align-items: center; }
.file-in-attesa span button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0; font-weight: 800; }

.schede-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 12px; overflow-x: auto; }
.schede-tab button { border: 0; background: none; padding: 9px 13px; font-weight: 700; font-size: 13.5px; color: var(--testo-2); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.schede-tab button.attivo { color: var(--blu); border-bottom-color: var(--acqua); }
.commento { display: flex; gap: 10px; margin-bottom: 14px; }
.commento .corpo { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 10px 13px; box-shadow: var(--ombra); }
.commento.interno .corpo { background: #fff9e8; border-color: #f1dfa6; }
.commento .chi { font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.commento .chi b { color: var(--blu-scuro); }
.commento .chi .quando { color: var(--testo-2); font-size: 12px; }
.commento .chi .az { margin-left: auto; display: flex; gap: 4px; }
.etichetta-interna { background: var(--giallo-bg); color: var(--giallo); font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; text-transform: uppercase; }
.nuovo-commento { display: flex; gap: 10px; margin-bottom: 18px; }
.nuovo-commento .box { flex: 1; min-width: 0; }
.nuovo-commento textarea { min-height: 80px; }
.nuovo-commento .piede { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.suggerimenti { position: absolute; background: #fff; border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--ombra-alta); z-index: 300; min-width: 220px; max-height: 220px; overflow-y: auto; }
.suggerimenti button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 7px 11px; cursor: pointer; font-size: 13.5px; }
.suggerimenti button:hover, .suggerimenti button.sel { background: var(--blu-bg); }
.storico-riga { display: flex; gap: 10px; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.storico-riga .quando { color: var(--testo-2); white-space: nowrap; min-width: 118px; }
.storico-riga del { color: var(--testo-2); }

.lato .riquadro { padding: 14px 16px; }
.dettagli .voce { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: center; padding: 5px 0; font-size: 13.5px; min-height: 38px; }
.dettagli .voce > span:first-child { color: var(--testo-2); font-size: 12.5px; font-weight: 600; }
.dettagli select, .dettagli input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 7px; padding: 6px 8px; font-size: 13.5px; min-width: 0; cursor: pointer; }
.dettagli select:hover, .dettagli input:hover { background: var(--superficie-2); border-color: var(--linea); }
.dettagli select:focus, .dettagli input:focus { outline: none; background: #fff; border-color: var(--blu-chiaro); }
.dettagli select:disabled, .dettagli input:disabled { cursor: default; color: var(--testo); opacity: 1; -webkit-appearance: none; appearance: none; }
.dettagli select:disabled:hover, .dettagli input:disabled:hover { background: transparent; border-color: transparent; }
.box-sla { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.box-sla .r { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.date-piccole { font-size: 12px; color: var(--testo-2); line-height: 1.7; }
.tecnici { font-size: 12.5px; word-break: break-all; }
.tecnici div { padding: 3px 0; border-bottom: 1px dashed var(--linea); }
.tecnici b { color: var(--testo-2); font-weight: 600; }
.avanzamento { height: 8px; background: var(--sfondo); border-radius: 99px; overflow: hidden; }
.avanzamento span { display: block; height: 100%; background: linear-gradient(90deg, var(--acqua), var(--ciano)); border-radius: 99px; }

/* ------------------------------------------------------------- SPRINT */
.sprint { margin-bottom: 14px; }
.sprint .testa { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sprint .testa h3 { margin: 0; font-size: 16px; color: var(--blu-scuro); }
.sprint .righe-t .riga-t select { max-width: 170px; height: 30px; border-radius: 7px; border: 1px solid var(--linea-2); font-size: 12.5px; background: #fff; }

/* ------------------------------------------------------------- APPLICAZIONI */
.griglia-app { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tessera-app { background: #fff; border-radius: 14px; box-shadow: var(--ombra-media); padding: 14px 16px; cursor: pointer; border: 1px solid rgba(227,232,239,.8); border-top: 4px solid var(--col); transition: transform .1s; }
.tessera-app:hover { transform: translateY(-2px); }
.tessera-app .testa { display: flex; align-items: center; gap: 10px; }
.tessera-app .ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; font-size: 22px; background: var(--sfondo); }
.tessera-app .nome { font-weight: 800; color: var(--blu-scuro); }
.tessera-app .sigla { font-size: 12px; font-weight: 700; color: var(--testo-2); }
.tessera-app .num { display: flex; gap: 14px; margin-top: 10px; font-size: 12.5px; color: var(--testo-2); }
.tessera-app .num b { color: var(--testo); font-size: 15px; }
.tessera-app.spenta { opacity: .55; }
.codice { background: #0f1830; color: #dce6ff; border-radius: 10px; padding: 11px 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; overflow-x: auto; white-space: pre; position: relative; }
.chiave-api { display: flex; gap: 6px; align-items: center; }
.chiave-api input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; }
.nota { background: var(--blu-bg); border-radius: 10px; padding: 10px 13px; font-size: 13px; color: var(--blu-scuro); margin: 8px 0 12px; }
.nota.gialla { background: var(--giallo-bg); color: #6b4c05; }
.nota.verde { background: var(--verde-bg); color: #145c29; }

/* ------------------------------------------------------------- FINESTRE */
.velo { position: fixed; inset: 0; background: rgba(7,18,50,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; backdrop-filter: blur(2px); }
.finestra { background: #fff; border-radius: 16px; width: 100%; max-width: 640px; box-shadow: 0 24px 60px rgba(4,16,60,.35); overflow: hidden; animation: entra .16s ease-out; }
.finestra.larga { max-width: 900px; }
.finestra.stretta { max-width: 440px; }
@keyframes entra { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.finestra .testa { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--linea); position: relative; }
.finestra .testa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: linear-gradient(90deg, #0b2e9e, #0fc0aa 60%, #14bee0); }
.finestra .testa h3 { margin: 0; font-size: 17px; color: var(--blu-scuro); flex: 1; }
.finestra .testa .chiudi { border: 0; background: var(--sfondo); width: 34px; height: 34px; border-radius: 99px; cursor: pointer; font-size: 16px; }
.finestra .corpo { padding: 18px 20px; max-height: calc(100vh - 220px); overflow-y: auto; }
.finestra .piede { display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 12px 20px; border-top: 1px solid var(--linea); background: var(--superficie-2); flex-wrap: wrap; }
.finestra .piede .sx { margin-right: auto; }
.segmenti { display: flex; flex-wrap: wrap; gap: 6px; }
.segmenti button { border: 1px solid var(--linea-2); background: #fff; border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.segmenti button.attivo { background: var(--blu); color: #fff; border-color: var(--blu); }
details.altro { border: 1px solid var(--linea); border-radius: 11px; padding: 0 14px; margin-bottom: 14px; }
details.altro summary { cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 13.5px; color: var(--blu); }
details.altro[open] summary { margin-bottom: 4px; }

/* campanella */
.tendina { position: absolute; right: 0; top: 48px; width: 380px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--ombra-alta); z-index: 80; overflow: hidden; }
.tendina .testa { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--linea); font-weight: 800; color: var(--blu-scuro); }
.tendina .lista { max-height: 420px; overflow-y: auto; }
.tendina .noti { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--linea); background: none; padding: 10px 14px; cursor: pointer; font-size: 13.5px; }
.tendina .noti:hover { background: var(--superficie-2); }
.tendina .noti.nuova { background: #f2f6ff; }
.tendina .noti.nuova::before { content: "●"; color: var(--acqua); margin-right: 6px; }
.tendina .noti .q { font-size: 11.5px; color: var(--testo-2); display: block; margin-top: 2px; }
.ancora { position: relative; }

/* avvisi a scomparsa */
#avvisi-box { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--blu-scuro); color: #fff; border-radius: 12px; padding: 11px 18px; font-size: 14px; box-shadow: var(--ombra-alta); pointer-events: auto; max-width: 90vw; animation: entra .16s ease-out; }
.toast.errore { background: var(--rosso); }
.toast.ok { background: #0f6b52; }

/* istruzioni */
.istr { display: grid; grid-template-columns: 230px 1fr; gap: 0; min-height: 60vh; }
.istr nav { border-right: 1px solid var(--linea); padding: 10px; overflow-y: auto; max-height: calc(100vh - 230px); }
.istr nav button { display: flex; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--testo); }
.istr nav button:hover, .istr nav button.attivo { background: var(--blu-bg); color: var(--blu); }
.istr .testo { padding: 4px 22px 22px; overflow-y: auto; max-height: calc(100vh - 230px); font-size: 14.5px; }
.istr .testo h2 { color: var(--blu-scuro); font-size: 19px; margin-top: 14px; }
.istr .testo h3 { color: var(--blu); font-size: 15px; margin: 18px 0 6px; }
.istr .testo li { margin-bottom: 5px; }
.istr .testo .aiuto { background: var(--acqua-bg); border-radius: 10px; padding: 10px 13px; margin: 10px 0; font-size: 13.5px; }
.istr mark { background: #fff1a8; }

/* ------------------------------------------------------------- TELEFONO */
@media (max-width: 1100px) {
  .scheda { grid-template-columns: 1fr; }
  .c-8, .c-6, .c-4 { grid-column: span 12; }
}
@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  .barra-alta { padding: 0 10px; gap: 8px; height: 58px; }
  .barra-alta .marchio img { height: 30px; }
  .cerca { flex: 1 1 auto; min-width: 0; }
  .cerca input { height: 38px; font-size: 14px; }
  .utente-info .testo-u { display: none; }
  .utente-info { padding: 3px; }
  .icona-tonda { width: 38px; height: 38px; }
  .nascondi-tel { display: none !important; }
  .menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 10px 2px; }
  .menu button { flex-direction: column; gap: 3px; padding: 7px 4px; min-height: 62px; font-size: 11px; justify-content: center; text-align: center; }
  .menu button .mi { width: 28px; height: 28px; }
  .menu .crea { margin-left: 0; grid-column: 1 / -1; }
  .menu .crea.btn { min-height: 44px; flex-direction: row; font-size: 15px; }
  #contenuto { padding: 10px 10px 80px; }
  .titolo-pagina h1 { font-size: 19px; }
  .titolo-pagina .azioni { margin-left: 0; width: 100%; }
  .griglia-2, .griglia-3 { grid-template-columns: 1fr; }
  .filtri select, .filtri input, .filtri input[type=search] { flex: 1 1 140px; min-width: 0; }
  .tabella-box.si-scheda .tabella-scorre { display: none; }
  .tabella-box.si-scheda .schede-mobile { display: flex; flex-direction: column; }
  .scheda-riga { padding: 11px 13px; border-bottom: 1px solid var(--linea); display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
  .scheda-riga .r1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
  .scheda-riga .r1 .ch { font-weight: 700; color: var(--blu); }
  .scheda-riga .r2 { font-weight: 600; font-size: 14.5px; word-break: break-word; }
  .scheda-riga .r3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--testo-2); }
  .bacheca { display: block; overflow: visible; }
  .bacheca .colonna { display: none; }
  .bacheca .colonna.visibile { display: block; }
  .selettore-colonne { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 4px; }
  .selettore-colonne button { flex-shrink: 0; }
  .titolo-ticket { font-size: 20px; }
  .dettagli .voce { grid-template-columns: 105px 1fr; }
  .velo { padding: 0; align-items: stretch; }
  .finestra { border-radius: 0; max-width: none !important; min-height: 100vh; display: flex; flex-direction: column; }
  .finestra .corpo { max-height: none; flex: 1; }
  .istr { grid-template-columns: 1fr; }
  .istr nav { border-right: 0; border-bottom: 1px solid var(--linea); display: flex; overflow-x: auto; max-height: none; }
  .istr nav button { flex-shrink: 0; width: auto; }
  .barre .riga { grid-template-columns: 110px 1fr 34px; }
  .barra-massiva { top: 62px; }
  .riga-t { font-size: 13.5px; }
}
@media print {
  .barra-alta, .menu, #avvisi-box, .azioni-ticket, .nuovo-commento { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}