:root {
  --fondo: #F4F7F9; --carta: #FFFFFF; --inchiostro: #1B1F23; --secondario: #4A5159;
  --bordo: #D5D8DC; --bordo-forte: #B9BEC4; --linea: #ECEEF0;
  /* colori Automa Group (dal logo) */
  --ag-blu: #004E82; --ag-blu-scuro: #003A61; --ag-azzurro: #B8EAF1; --ag-azzurro-chiaro: #E8F7FA;
  --ag-rosso: #E30614; --ag-arancio: #FF8C00; --ag-nero: #111111;
  --arancio: var(--ag-arancio); --arancio-scuro: #A34E00; --verde: #2F6B45; --verde-chiaro: #E9F4EC;
  --blu: var(--ag-blu); --rosso: #B0040F;
  --raggio: 10px;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  color: var(--inchiostro); background: var(--fondo); font-size: 15px; line-height: 1.4;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); }
h1 { font-size: 22px; margin: 0; } h2 { font-size: 17px; margin: 0 0 12px; } h3 { font-size: 15px; margin: 16px 0 6px; }
a { color: var(--blu); }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { min-height: 44px; padding: 0 12px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--carta); width: 100%; }
textarea { padding: 10px 12px; resize: vertical; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 0; padding: 0; accent-color: var(--inchiostro); }
input[type=file] { padding: 10px; }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 2px; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.muto { color: var(--secondario); } .piccolo { font-size: 13px; } .grande { font-size: 17px; }
.verde { color: var(--verde); } .arancio { color: var(--arancio-scuro); } .rosso { color: var(--rosso); }
.nascosto { display: none !important; }
.riga { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.riga-sb { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bordo { border-top: 1px solid var(--linea); padding-top: 10px; margin-top: 2px; }
.scorri { overflow-x: auto; }

/* pulsanti */
.btn { min-height: 44px; padding: 0 16px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--carta); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--inchiostro); }
.btn:hover { border-color: var(--inchiostro); }
.btn:disabled { background: #DADDE0; color: #5A6169; border-color: #DADDE0; cursor: not-allowed; }
.btn.primario { background: var(--ag-blu); border-color: var(--ag-blu); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--ag-blu-scuro); }
.btn.primario:disabled { background: #DADDE0; border-color: #DADDE0; color: #5A6169; }
.btn.scuro { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost.rosso, .btn.rosso { color: var(--rosso); }
.btn.piccolo { min-height: 36px; padding: 0 10px; font-size: 13px; }
.btn.icona { width: 44px; padding: 0; }
.btn.largo { width: 100%; } .btn.alto { min-height: 52px; font-size: 16px; }
.btn.tratteggio { border: 1px dashed var(--verde); color: #1F4D30; }
.btn.scuro { background: var(--ag-blu); border-color: var(--ag-blu); }
.btn.tratteggio.fatto { background: var(--verde); color: #fff; border-style: solid; }

/* testata */
.testata { background: #fff; color: var(--inchiostro); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 10px 24px 14px;
  padding-top: max(10px, env(safe-area-inset-top)); position: sticky; top: 0; z-index: 10; box-shadow: 0 1px 0 var(--bordo); }
.testata::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--ag-azzurro) 0 25%, var(--ag-blu) 25% 50%, var(--ag-rosso) 50% 75%, var(--ag-arancio) 75% 100%); }
.marchio { display: flex; align-items: center; gap: 12px; }
.marchio img { height: 46px; width: auto; display: block; }
.marchio strong { display: block; font-size: 16px; color: var(--ag-blu); letter-spacing: .2px; } .marchio span { font-size: 12px; color: var(--secondario); }
.logo-login { height: 96px; width: auto; align-self: flex-start; }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.menu a { color: var(--ag-blu); text-decoration: none; padding: 9px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.menu a:hover { background: var(--ag-azzurro-chiaro); } .menu a.attivo { background: var(--ag-blu); color: #fff; }
.destra { display: flex; align-items: center; gap: 10px; }
.rete { font-size: 12px; padding: 4px 10px; border-radius: 999px; }
.rete.ok { background: var(--verde-chiaro); color: var(--verde); } .rete.off { background: #FFF1E0; color: var(--arancio-scuro); } .rete.attesa { background: var(--ag-azzurro-chiaro); color: var(--ag-blu); }

.contenuto { padding: 20px 24px 60px; max-width: 1500px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.barra { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.card { background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.card.stretta { padding: 12px; border-radius: var(--raggio); }
.card.vuoto { color: var(--secondario); text-align: center; padding: 28px; }
.card.link { flex-direction: row; gap: 6px; align-items: baseline; text-decoration: none; color: var(--inchiostro); }
.card.link b { font-size: 20px; } .card.link.attenzione { border-color: var(--rosso); color: var(--rosso); }
.card.errore { border-color: var(--rosso); color: var(--rosso); }
.avviso { background: #FFF4E5; border: 1px solid #F0C48A; border-radius: var(--raggio); padding: 10px 12px; font-size: 14px; color: #7A3E00; }
.avviso.errore { background: #FDE8EE; border-color: #E3B3C1; color: var(--rosso); }

/* chip tipi */
.chip { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #EEF0F2; }
.t-rip { color: #9A3A06; background: #FDEDE4; } .t-man { color: var(--blu); background: #E8F0FB; } .t-agg { color: #5B3391; background: #F1EAFB; }
.t-tar { color: #0E6464; background: #E1F3F2; } .t-rit { color: var(--rosso); background: #FDE8EE; } .t-ric { color: #3F4A12; background: #EEF3D8; }

/* pillole */
.pillole { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pillole.col { flex-direction: column; align-items: stretch; }
.pillole.tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pillola { min-height: 44px; padding: 6px 14px; border: 1px solid var(--bordo-forte); border-radius: 8px; background: var(--carta); font-weight: 600; cursor: pointer; text-align: left; }
.pillole.tre .pillola { text-align: center; font-size: 13px; padding: 6px; }
.pillola.on { background: var(--ag-blu); color: #fff; border-color: var(--ag-blu); }
.conteggio { margin-left: 8px; font-size: 12px; opacity: .7; }

/* campi */
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--secondario); }
.campo > input, .campo > select, .campo > textarea, .campo > div { color: var(--inchiostro); font-weight: 400; font-size: 15px; }
.campo small { font-weight: 400; }
.campo.stretto { max-width: 420px; }
.spunta { display: flex; align-items: center; gap: 10px; min-height: 44px; background: var(--carta); border: 1px solid var(--bordo); border-radius: 8px; padding: 0 12px; font-weight: 600; }
.form-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form-griglia > p, .fine-form { grid-column: 1 / -1; }
.fine-form { justify-content: flex-end; }
.aggiungi { align-items: flex-end; margin-top: 8px; } .aggiungi .campo { flex: 1 1 220px; }

/* planner */
.giorni { display: flex; flex-wrap: wrap; gap: 8px; }
.planner { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.colonne-wrap { flex: 999 1 640px; min-width: 0; overflow-x: auto; }
.colonne { display: grid; gap: 12px; }
.colonna { background: var(--ag-azzurro-chiaro); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 380px; }
.colonna-testa { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; }
.mini-campi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mini-campi select, .mini-campi input { min-height: 36px; font-size: 13px; padding: 0 6px; }
.mini-campi .btn { grid-column: 1 / -1; }
.lato { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
.kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kpi .k { background: #EEF0F2; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; }
.kpi .k b { font-size: 24px; } .kpi .k span { font-size: 12px; }
.kpi .k.verde { background: var(--verde-chiaro); color: var(--verde); } .kpi .k.arancio { background: #FDEDE4; color: var(--arancio-scuro); }
.kpi .k.blu { background: #E8F0FB; color: var(--blu); } .kpi .k.rosso { background: #FDE8EE; color: var(--rosso); }

/* tabelle */
.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { text-align: left; font-weight: 600; padding: 10px 8px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella td { padding: 10px 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella td select, .tabella td input:not([type=checkbox]) { min-height: 36px; }
.tabella.dettaglio th { width: 40%; color: var(--secondario); font-weight: 500; white-space: normal; }
.foto-fv { max-width: 100%; border-radius: 8px; border: 1px solid var(--bordo); margin: 8px 0; }

/* import */
.zona-file { border: 2px dashed var(--bordo-forte); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; align-items: center; background: #FAFAF9; }
.mappa-col { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.import-area { display: flex; flex-direction: column; gap: 10px; }

/* modale */
.overlay { position: fixed; inset: 0; background: rgba(27, 31, 35, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow-y: auto; }
.modal { background: var(--carta); border-radius: 14px; width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal.largo { max-width: 1000px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--linea); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* tecnico */
.giro-testa { display: flex; align-items: center; gap: 10px; }
.giro-titolo { flex: 1; text-align: center; } .giro-titolo h1 { font-size: 19px; text-transform: capitalize; }
.tappe { display: flex; flex-direction: column; gap: 12px; max-width: 640px; width: 100%; margin: 0 auto; }
.tappa.chiusa { opacity: .85; }
.contatto { display: flex; align-items: center; gap: 8px; background: var(--fondo); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.contatto .mono { margin-left: auto; }
.nota { margin: 0; font-size: 14px; background: #FFF8E8; border-radius: 8px; padding: 8px 10px; }
.azioni-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 4px; }
.azioni-3 .btn { padding: 0 6px; font-size: 14px; }
.chiusura { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding-bottom: 90px; }
.chiusura-testa { display: flex; align-items: center; gap: 12px; }
.chiusura fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.chiusura legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.foglio-verde { background: var(--verde-chiaro); border: 2px solid var(--verde); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.foglio-verde label { font-weight: 700; color: #1F4D30; } .foglio-verde input { border-color: var(--verde); font-size: 18px; }
.foglio-verde small { color: #1F4D30; }
.anteprima { max-height: 220px; object-fit: contain; border-radius: 8px; background: #fff; }
.rientro { padding-left: 12px; }
.griglia-ore { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.piede-fisso { position: fixed; left: 0; right: 0; bottom: 0; background: var(--carta); border-top: 1px solid var(--bordo); padding: 12px 16px max(14px, env(safe-area-inset-bottom)); z-index: 5; }
.piede-fisso .btn { max-width: 640px; margin: 0 auto; display: flex; }
.fine { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 48px 16px; max-width: 420px; margin: 0 auto; }
.cerchio-ok { width: 84px; height: 84px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; }

/* login */
.centro { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login { width: 100%; max-width: 380px; gap: 14px; align-items: stretch; }
.login h1 { text-align: left; }

/* notifiche */
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 100; width: min(92vw, 460px); }
.toast { background: var(--inchiostro); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.toast.errore { background: var(--rosso); }

@media (max-width: 720px) {
  .testata { padding: 10px 14px; }
  .testata .destra { margin-left: auto; }
  .marchio img { height: 38px; }
  .menu { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .contenuto { padding: 14px 14px 60px; }
  .griglia-ore { grid-template-columns: 1fr; }
}

/* ---------- dashboard ---------- */
.benvenuto { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.benvenuto h1 { font-size: 26px; color: var(--ag-blu); }
.benvenuto .data { color: var(--secondario); text-transform: capitalize; }
.kpi-settimana { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi-card { background: #fff; border: 1px solid var(--bordo); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--inchiostro); position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 4px; background: var(--c, var(--ag-blu)); }
.kpi-card b { font-size: 30px; line-height: 1.1; color: var(--c-testo, var(--ag-blu)); }
.kpi-card span { font-size: 13px; color: var(--secondario); }
.kpi-card .barra-prog { height: 6px; background: #EEF1F4; border-radius: 99px; margin-top: 8px; overflow: hidden; }
.kpi-card .barra-prog i { display: block; height: 100%; background: var(--verde); border-radius: 99px; }
a.kpi-card:hover { border-color: var(--ag-blu); }
.colonna-testa .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ag-blu); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; flex: none; }
.colonna-testa .nome { display: flex; align-items: center; }
.card.stretta { box-shadow: 0 1px 2px rgba(0, 46, 77, .06); }
.card.stretta.st-fatto { border-color: #BFDCC9; }
.card.stretta.st-non_concluso { border-color: #F5C99A; }
.giorni .pillola { border-radius: 999px; }

/* ---------- ore e grafici ---------- */
.titolo-periodo { margin: 0; }
.griglia-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.grafico { width: 100%; height: auto; min-width: 520px; display: block; font-family: inherit; }
.griglia-2 .grafico { min-width: 0; }
.grafico .griglia { stroke: #E6EAEE; stroke-width: 1; }
.grafico .asse { stroke: #B9BEC4; stroke-width: 1; }
.grafico .etich { fill: var(--secondario); font-size: 12px; }
.grafico .etich-forte { fill: var(--inchiostro); font-size: 13px; font-weight: 500; }
.grafico .valore { fill: var(--inchiostro); font-size: 12px; font-weight: 600; }
.grafico .segmento:hover, .grafico rect:hover { opacity: .85; cursor: default; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--secondario); }
.legenda span, .tec { display: inline-flex; align-items: center; gap: 6px; }
.legenda i, .tec i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.tooltip { position: fixed; display: none; z-index: 200; background: #fff; border: 1px solid var(--bordo); border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 8px 24px rgba(0, 46, 77, .15); font-size: 13px; pointer-events: none; max-width: 260px; }
.tt-titolo { font-weight: 700; text-transform: capitalize; margin-bottom: 2px; } .tt-riga { color: var(--secondario); }
.tabella.ore .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabella.ore .riga-giorno th, .tabella.ore .riga-giorno td { background: var(--ag-azzurro-chiaro); color: var(--ag-blu); font-weight: 700; }
.tabella.ore .riga-giorno th { text-transform: capitalize; }
.tabella.ore .subtot td { color: var(--secondario); font-style: italic; border-bottom: 1px solid var(--bordo); }
/* attività */
.timeline { display: flex; flex-direction: column; }
.tl-giorno { text-transform: capitalize; color: var(--ag-blu); margin: 18px 0 6px; } .tl-giorno:first-child { margin-top: 0; }
.tl-voce { display: grid; grid-template-columns: 48px 110px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.ruolo-responsabile { color: var(--ag-blu); background: var(--ag-azzurro-chiaro); }
.ruolo-tecnico { color: var(--verde); background: var(--verde-chiaro); }
.ruolo-direzione { color: #fff; background: var(--ag-nero); }
@media (max-width: 720px) { .tl-voce { grid-template-columns: 44px 1fr; } .tl-voce > div { grid-column: 1 / -1; } }

/* ---------- planning settimanale (tecnico × giorno) ---------- */
.titolo-settimana { margin: 0; font-size: 19px; }
.settimana-card { padding: 12px; }
.planning { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 980px; table-layout: fixed; }
.planning th, .planning td { border-bottom: 1px solid var(--linea); border-right: 1px solid var(--linea); vertical-align: top; }
.planning thead th { border-bottom: 2px solid var(--bordo); background: #fff; position: sticky; top: 0; z-index: 1; }
.planning .col-tec { width: 210px; text-align: left; background: #fff; padding: 10px; position: sticky; left: 0; z-index: 2; }
.planning thead .col-tec { font-size: 13px; color: var(--secondario); font-weight: 600; vertical-align: bottom; }
.testa-giorno { width: 100%; border: 0; background: none; cursor: pointer; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 0; border-radius: 8px; font: inherit; color: var(--inchiostro); }
.testa-giorno:hover { background: var(--ag-azzurro-chiaro); }
.testa-giorno .gs { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--secondario); font-weight: 600; }
.testa-giorno .gn { font-size: 22px; font-weight: 700; line-height: 1.2; }
.testa-giorno .gc { font-size: 12px; color: var(--secondario); }
.planning th.oggi .testa-giorno { background: var(--ag-blu); color: #fff; }
.planning th.oggi .testa-giorno .gs, .planning th.oggi .testa-giorno .gc { color: #D6E7F2; }
.planning td.cella { padding: 6px; height: 96px; background: #fff; transition: background .15s; }
.planning td.cella.oggi { background: #F6FBFD; }
.planning td.cella.sopra { background: var(--ag-azzurro-chiaro); outline: 2px dashed var(--ag-blu); outline-offset: -3px; }
.cella-int { display: flex; flex-direction: column; gap: 5px; height: 100%; }
.cella-agg { margin-top: auto; align-self: stretch; min-height: 28px; border: 1px dashed transparent; border-radius: 6px; background: none; color: var(--secondario); font-size: 18px; cursor: pointer; opacity: 0; }
.planning td.cella:hover .cella-agg, .cella-agg:focus-visible, .planning td.cella.vuota .cella-agg { opacity: 1; border-color: var(--bordo); }
.cella-agg:hover { border-color: var(--ag-blu) !important; color: var(--ag-blu); background: var(--ag-azzurro-chiaro); }
.tec-cella { display: flex; gap: 10px; align-items: flex-start; }
.tec-cella .avatar, .colonna-testa .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ag-blu); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.avatar.grigio { background: #8A9199; }
.barra-prog.piccola { height: 5px; margin-top: 6px; background: #EEF1F4; border-radius: 99px; overflow: hidden; width: 120px; }
.barra-prog.piccola i { display: block; height: 100%; background: var(--verde); }
/* mini intervento nella casella */
.mini-int { display: flex; flex-direction: column; gap: 1px; text-align: left; width: 100%; border: 1px solid var(--bordo); border-radius: 8px; padding: 5px 7px 5px 9px;
  background: #fff; cursor: pointer; font: inherit; color: var(--inchiostro); position: relative; overflow: hidden; }
.mini-int::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: currentColor; }
.mini-int:hover { border-color: var(--ag-blu); box-shadow: 0 2px 6px rgba(0, 46, 77, .12); }
.mini-int[draggable="true"] { cursor: grab; } .mini-int.trascina { opacity: .4; }
.mini-int .mi-riga { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--secondario); min-height: 14px; }
.mini-int .mi-cliente { font-size: 13px; font-weight: 600; color: var(--inchiostro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-int .mi-tipo { font-size: 11px; color: var(--secondario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-int .mi-stato { font-weight: 800; font-size: 13px; }
.mini-int.st-fatto { background: #F3FAF5; border-color: #CFE6D7; } .mini-int.st-fatto .mi-stato { color: var(--verde); }
.mini-int.st-non_concluso { background: #FFF6EC; border-color: #F5D2AA; } .mini-int.st-non_concluso .mi-stato { color: var(--arancio-scuro); }
/* il colore della barretta a sinistra segue il tipo (via currentColor) */
.mini-int.t-rip { color: #C2410C; } .mini-int.t-man { color: var(--ag-blu); } .mini-int.t-agg { color: #6B3FA0; }
.mini-int.t-tar { color: #0E7C7B; } .mini-int.t-rit { color: var(--ag-rosso); } .mini-int.t-ric { color: #4D5B12; }
.legenda .leg-tipo { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: currentColor; }
.legenda .leg-tipo.t-rip { color: #C2410C; } .legenda .leg-tipo.t-man { color: var(--ag-blu); } .legenda .leg-tipo.t-agg { color: #6B3FA0; }
.legenda .leg-tipo.t-tar { color: #0E7C7B; } .legenda .leg-tipo.t-rit { color: var(--ag-rosso); } .legenda .leg-tipo.t-ric { color: #4D5B12; }
.settimana-card .legenda { margin-top: 10px; }

.tabella.dettaglio td { white-space: pre-line; }

/* ---------- board del tecnico ---------- */
.board-tecnico { max-width: 640px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.hero-tec { background: linear-gradient(135deg, var(--ag-blu) 0%, #00699F 100%); color: #fff; border-radius: 18px; padding: 18px 18px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; overflow: hidden; }
.hero-tec::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--ag-azzurro) 0 25%, #fff 25% 50%, var(--ag-rosso) 50% 75%, var(--ag-arancio) 75% 100%); opacity: .9; }
.hero-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-saluto { font-size: 14px; color: #CFE3F0; }
.hero-tec h1 { font-size: 22px; color: #fff; }
.hero-tec h1::first-letter { text-transform: uppercase; }
.hero-data { font-size: 13px; color: #CFE3F0; text-transform: capitalize; }
.hero-prog { display: flex; align-items: center; gap: 10px; flex: none; }
.hero-prog b { display: block; font-size: 22px; line-height: 1; } .hero-prog span { font-size: 12px; color: #CFE3F0; }
.striscia { display: grid; grid-template-columns: 32px repeat(6, minmax(0, 1fr)) 32px; gap: 6px; align-items: stretch; }
.str-freccia { border: 0; background: none; color: var(--ag-blu); cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.str-freccia:hover { background: var(--ag-azzurro-chiaro); }
.str-giorno { border: 1px solid var(--bordo); background: #fff; border-radius: 12px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px;
  cursor: pointer; font: inherit; color: var(--inchiostro); min-height: 64px; }
.str-giorno .sg { font-size: 11px; text-transform: uppercase; color: var(--secondario); font-weight: 600; }
.str-giorno .sn { font-size: 19px; font-weight: 700; line-height: 1.1; }
.str-giorno .sc { font-size: 11px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--ag-azzurro-chiaro); color: var(--ag-blu); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.str-giorno .sc.ok { background: var(--verde-chiaro); color: var(--verde); }
.str-giorno.oggi { border-color: var(--ag-blu); }
.str-giorno.on { background: var(--ag-blu); border-color: var(--ag-blu); color: #fff; }
.str-giorno.on .sg { color: #CFE3F0; } .str-giorno.on .sc { background: rgba(255,255,255,.2); color: #fff; }
.etichetta-sez { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--secondario); margin: 4px 0 8px; }
.grande-vuoto { display: flex; flex-direction: column; gap: 4px; }
.tutto-fatto { flex-direction: row; align-items: center; gap: 12px; background: var(--verde-chiaro); border-color: #BFDCC9; color: var(--verde); }
.tutto-fatto span { display: block; font-size: 14px; color: #2C5A3C; }
.tappa { gap: 10px; }
.tappa-testa { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.tappa-testa h3 { margin: 6px 0 2px; font-size: 18px; }
.tappa-dx { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.ora-grande { font-size: 22px; font-weight: 700; color: var(--ag-blu); }
.tappa.evidenza { border: 2px solid var(--ag-blu); box-shadow: 0 6px 18px rgba(0, 78, 130, .12); }
.tappa.chiusa { background: #FAFBFC; } .tappa.chiusa h3 { font-size: 16px; }
.badge { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.verde-b { background: var(--verde-chiaro); color: var(--verde); } .arancio-b { background: #FFF1E0; color: var(--arancio-scuro); }
.azioni-tappa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.btn.azione { flex-direction: column; gap: 2px; min-height: 60px; font-size: 13px; border-radius: 12px; color: var(--ag-blu); }
.btn.azione.primario { color: #fff; }
.azioni-tappa.ridotte .btn.azione { min-height: 44px; flex-direction: row; gap: 6px; }
.timeline-tec { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.timeline-tec li { display: grid; grid-template-columns: 46px 14px 1fr; gap: 6px; align-items: start; position: relative; }
.tl-ora { font-size: 13px; color: var(--secondario); padding-top: 16px; text-align: right; }
.tl-punto { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--ag-blu); margin-top: 18px; position: relative; z-index: 1; }
.timeline-tec li::before { content: ''; position: absolute; left: 57px; top: 0; bottom: -10px; width: 2px; background: var(--bordo); }
.timeline-tec li:last-child::before { bottom: auto; height: 24px; }
.timeline-tec li.fatta .tl-punto { background: var(--verde); border-color: var(--verde); }
/* ritiri nella chiusura */
.ritiri { display: flex; flex-direction: column; gap: 10px; }
.ritiro { background: #fff; border: 1px solid var(--bordo); border-left: 4px solid var(--ag-arancio); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.agg-ritiro { display: flex; flex-direction: column; gap: 8px; }
.pillola.piccola { min-height: 40px; font-size: 13px; padding: 4px 12px; }
@media (max-width: 420px) { .hero-tec h1 { font-size: 19px; } .striscia { grid-template-columns: 24px repeat(6, minmax(0, 1fr)) 24px; gap: 4px; } }
.tabella.utenti td { vertical-align: middle; }
.tabella.utenti input:not([type=checkbox]) { min-width: 160px; }
.tabella.utenti tr.disattivato td { background: #F7F7F8; color: var(--secondario); }
.spunta.compatta { min-height: 36px; border: 0; padding: 0; background: none; font-weight: 500; white-space: nowrap; }