/* ============================================================================
   SORVEGLIANZA SANITARIA - tema
   Path: /assets/css/theme.css
   ----------------------------------------------------------------------------
   Stesso impianto del gestionale: sidebar bianca a sinistra, header bianco in
   alto, fondo pagina grigio chiarissimo, blu come unico accento.
   Colori tenuti bassi apposta: ci si passa la giornata dentro.
   Integra Bootstrap 5, non lo sostituisce.
   ============================================================================ */

:root {
    --blu:          #185fa5;
    --blu-scuro:    #0c447c;
    --blu-chiaro:   #e6f1fb;
    --testo:        #2c2c2a;
    --testo-medio:  #5f5e5a;
    --testo-tenue:  #888780;
    --bordo:        #e5e5e5;
    --sfondo:       #f5f5f7;
    --verde:        #1d9e75;
    --verde-bg:     #e8f6f1;
    --ambra:        #b26b00;
    --ambra-bg:     #fdf3e2;
    --rosso:        #b3261e;
    --rosso-bg:     #fbeae8;
    --sidebar-w:    240px;
    --header-h:     56px;
}

* { box-sizing: border-box; }

body.app {
    margin: 0;
    padding: 0;
    background: var(--sfondo);
    color: var(--testo);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
}

a { color: var(--blu); text-decoration: none; }
a:hover { color: var(--blu-scuro); }

/* ---------- HEADER ---------- */

.app-header {
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.app-header .hamburger {
    background: none; border: none; font-size: 22px;
    color: var(--testo-medio); cursor: pointer; padding: 4px;
}
.app-header .hamburger:hover { color: var(--testo); }
.app-header .logo {
    display: flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 15px; color: var(--testo);
}
.app-header .logo i { color: var(--blu); font-size: 22px; }
.app-header .spacer { flex: 1; }
.app-header .oggi { color: var(--testo-medio); font-size: 12.5px; }
.app-header .profilo {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: 18px;
    background: var(--sfondo); border: 1px solid var(--bordo);
    color: var(--testo); font-size: 12px;
}
.app-header .profilo:hover { background: #ececec; color: var(--testo); }
.app-header .profilo i { font-size: 16px; color: var(--testo-medio); }

/* ---------- LAYOUT ---------- */

.app-layout { display: flex; min-height: calc(100vh - var(--header-h)); }

.app-sidebar {
    width: var(--sidebar-w);
    background: #fff;
    border-right: 1px solid var(--bordo);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 12px 0 24px;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    transition: transform .2s ease;
}
.app-sidebar.collapsed {
    transform: translateX(calc(-1 * var(--sidebar-w)));
    margin-right: calc(-1 * var(--sidebar-w));
}

.app-sidebar .azioni { padding: 0 12px 12px; }
.app-sidebar .btn-principale {
    width: 100%; padding: 10px 14px;
    background: var(--blu); color: #fff; border: none; border-radius: 4px;
    font-size: 13px; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
}
.app-sidebar .btn-principale:hover { background: var(--blu-scuro); color: #fff; }

.app-sidebar .group-label {
    font-size: 10px; font-weight: 600; color: var(--testo-tenue);
    padding: 14px 18px 6px; text-transform: uppercase; letter-spacing: .6px;
}
.app-sidebar .menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px; font-size: 13px; color: var(--testo);
    border-left: 3px solid transparent; line-height: 1.3;
    transition: background .15s, color .15s;
}
.app-sidebar .menu-item:hover { background: #f8f9fb; color: var(--blu); }
.app-sidebar .menu-item.active {
    background: var(--blu-chiaro); color: var(--blu);
    border-left-color: var(--blu); font-weight: 500;
}
.app-sidebar .menu-item i { font-size: 16px; color: var(--testo-medio); flex-shrink: 0; }
.app-sidebar .menu-item.active i, .app-sidebar .menu-item:hover i { color: var(--blu); }
.app-sidebar .menu-item .conteggio {
    margin-left: auto; font-size: 11px; font-weight: 600;
    background: var(--rosso-bg); color: var(--rosso);
    padding: 1px 7px; border-radius: 10px;
}
.app-sidebar .piede {
    margin-top: 28px; padding: 16px 18px 0;
    border-top: 1px solid var(--bordo);
    font-size: 11px; color: var(--testo-tenue); text-align: center; line-height: 1.6;
}

.app-content { flex: 1; padding: 24px 28px; min-width: 0; overflow-x: auto; }

/* ---------- TESTATA DI PAGINA ---------- */

.testata { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.testata h1 { font-size: 21px; font-weight: 600; margin: 0; letter-spacing: -.2px; }
.testata p  { margin: 4px 0 0; color: var(--testo-medio); font-size: 12.5px; }
.occhiello  { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu); font-weight: 600; margin-bottom: 5px; }

/* ---------- CARD ---------- */

.card-box {
    background: #fff; border: 1px solid var(--bordo);
    border-radius: 8px; overflow: hidden;
}
.card-box + .card-box { margin-top: 16px; }
.card-box > .intestazione {
    padding: 12px 16px; border-bottom: 1px solid var(--bordo);
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.card-box > .intestazione h2 {
    margin: 0; font-size: 12px; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--testo-medio);
}
.card-box > .corpo { padding: 16px; }

/* ---------- RIQUADRI NUMERICI ---------- */

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.numero {
    background: #fff; border: 1px solid var(--bordo); border-radius: 8px;
    padding: 16px 18px; display: block; color: var(--testo);
    border-top: 3px solid var(--bordo);
}
.numero:hover { border-color: #d3d3d3; color: var(--testo); }
.numero .valore { font-size: 26px; font-weight: 600; line-height: 1.1; }
.numero .etichetta { font-size: 12px; color: var(--testo-medio); margin-top: 4px; }
.numero.rosso  { border-top-color: var(--rosso); }
.numero.rosso  .valore { color: var(--rosso); }
.numero.ambra  { border-top-color: var(--ambra); }
.numero.ambra  .valore { color: var(--ambra); }
.numero.verde  { border-top-color: var(--verde); }
.numero.blu    { border-top-color: var(--blu); }

/* ---------- TABELLE ---------- */

.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th {
    text-align: left; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em; color: var(--testo-tenue);
    padding: 10px 16px; border-bottom: 1px solid var(--bordo); white-space: nowrap;
}
.tabella td { padding: 11px 16px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.tabella tr:last-child td { border-bottom: none; }
.tabella tbody tr:hover { background: #f8fafc; }
.tabella .nome { font-weight: 600; }
.tabella .sotto { color: var(--testo-medio); font-size: 12px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* ---------- ETICHETTE DI STATO ---------- */

.stato { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.stato.ok     { background: var(--verde-bg); color: var(--verde); }
.stato.attesa { background: var(--ambra-bg); color: var(--ambra); }
.stato.male   { background: var(--rosso-bg); color: var(--rosso); }
.stato.neutro { background: #eef0f2;         color: var(--testo-medio); }

/* ---------- BOTTONI ---------- */

.btn-app {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--blu); color: #fff; border: 1px solid var(--blu);
    border-radius: 5px; padding: 8px 14px; font-size: 13px; font-weight: 500;
    cursor: pointer;
}
.btn-app:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
.btn-app.chiaro { background: #fff; color: var(--blu); border-color: var(--bordo); }
.btn-app.chiaro:hover { background: #fff; border-color: var(--blu); color: var(--blu); }
.btn-app.piccolo { padding: 5px 10px; font-size: 12.5px; }

/* ---------- VUOTO ---------- */

.vuoto { padding: 38px 20px; text-align: center; color: var(--testo-medio); }
.vuoto strong { display: block; color: var(--testo); font-size: 15px; margin-bottom: 5px; }
.vuoto i { font-size: 26px; color: var(--testo-tenue); display: block; margin-bottom: 10px; }

/* ---------- AVVISI ---------- */

.avviso { padding: 11px 15px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; border: 1px solid; }
.avviso.ok    { background: var(--verde-bg); border-color: #c6e6da; color: #14634a; }
.avviso.info  { background: var(--blu-chiaro); border-color: #cbe0f5; color: var(--blu-scuro); }
.avviso.err   { background: var(--rosso-bg);  border-color: #f0cbc7; color: var(--rosso); }
.avviso.warn  { background: var(--ambra-bg);  border-color: #f0dcb8; color: var(--ambra); }

/* ---------- LOGIN ---------- */

body.pagina-login {
    background: var(--sfondo);
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; margin: 0;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--testo); font-size: 13px;
}
.riquadro-login {
    background: #fff; border: 1px solid var(--bordo); border-radius: 10px;
    width: 100%; max-width: 380px; padding: 32px 30px;
    box-shadow: 0 2px 18px rgba(16,38,46,.06);
}
.riquadro-login .marchio { text-align: center; margin-bottom: 24px; }
.riquadro-login .marchio i { font-size: 32px; color: var(--blu); }
.riquadro-login .marchio h1 { font-size: 17px; font-weight: 600; margin: 10px 0 3px; }
.riquadro-login .marchio p  { font-size: 11px; color: var(--testo-tenue); margin: 0; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- FORM ---------- */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--testo-medio); margin-bottom: 5px; }
.campo input, .campo select, .campo textarea {
    width: 100%; background: #fff; border: 1px solid var(--bordo);
    border-radius: 5px; padding: 9px 11px; font-size: 13px; color: var(--testo);
    font-family: inherit;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 2px solid var(--blu-chiaro); outline-offset: 0; border-color: var(--blu);
}
button:focus-visible, a:focus-visible, input:focus-visible {
    outline: 2px solid var(--blu); outline-offset: 2px;
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {
    .app-sidebar {
        position: fixed; z-index: 1050;
        box-shadow: 2px 0 16px rgba(0,0,0,.15);
    }
    .app-sidebar:not(.open) { transform: translateX(calc(-1 * var(--sidebar-w))); margin-right: calc(-1 * var(--sidebar-w)); }
    .app-content { padding: 16px; }
    .app-header .oggi { display: none; }
    .velo { display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 1040; }
    .velo.open { display: block; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* =============================================================================
   PAGINE INTERNE - revisione 30/08/2026
   -----------------------------------------------------------------------------
   Stessi colori di prima, nessuno tolto e nessuno aggiunto. Qui si sistemano
   tre cose che facevano sembrare i moduli sfasati:

   1. la griglia aveva solo alcune larghezze (c2 c3 c4 c6 c8 c12). Le pagine
      usano anche c1 c5 c7 c9 c10 c11, che non esistendo facevano collassare
      quei campi a una colonna: e' il motivo per cui "Prov" usciva dal bordo e
      "Dove sono custodite le cartelle" restava un francobollo. Ora ci sono
      tutte e dodici.
   2. i moduli stavano attaccati al bordo della card, perche' il margine
      interno era previsto solo per .corpo e i form sono figli diretti.
   3. altezza dei campi e dei bottoni non allineata sulla stessa riga.
   ========================================================================== */

/* ---------- GRIGLIA COMPLETA ---------- */

.griglia { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 18px; align-items: start; }
.griglia > .c1  { grid-column: span 1; }
.griglia > .c2  { grid-column: span 2; }
.griglia > .c3  { grid-column: span 3; }
.griglia > .c4  { grid-column: span 4; }
.griglia > .c5  { grid-column: span 5; }
.griglia > .c6  { grid-column: span 6; }
.griglia > .c7  { grid-column: span 7; }
.griglia > .c8  { grid-column: span 8; }
.griglia > .c9  { grid-column: span 9; }
.griglia > .c10 { grid-column: span 10; }
.griglia > .c11 { grid-column: span 11; }
.griglia > .c12 { grid-column: span 12; }

/* Schermi medi: si passa a mezze larghezze invece di schiacciare tutto. */
@media (max-width: 1200px) {
    .griglia > .c1, .griglia > .c2, .griglia > .c3 { grid-column: span 3; }
    .griglia > .c4, .griglia > .c5                 { grid-column: span 6; }
    .griglia > .c7, .griglia > .c8, .griglia > .c9,
    .griglia > .c10, .griglia > .c11               { grid-column: span 12; }
}
@media (max-width: 820px) {
    .griglia > [class*="c"] { grid-column: span 12 !important; }
}

/* ---------- MARGINE INTERNO DELLE CARD ----------
   Una regola sola invece di sette: tutto quello che sta dentro una card ha lo
   stesso margine laterale. Le TABELLE fanno eccezione e restano a tutta
   larghezza, perche' il bordo della riga deve arrivare in fondo: il margine
   glielo danno le celle, con lo stesso valore, cosi' il testo e' comunque
   allineato con quello sopra e sotto.
   Il valore e' uno solo, --pad-card: cambiandolo li' si sposta tutto insieme. */

:root { --pad-card: 18px; }

.card-box > *              { padding-left: var(--pad-card); padding-right: var(--pad-card); }
.card-box > .intestazione  { padding-left: var(--pad-card); padding-right: var(--pad-card); }
.card-box > table.tabella  { padding-left: 0; padding-right: 0; }
.card-box > table.tabella th:first-child,
.card-box > table.tabella td:first-child { padding-left: var(--pad-card); }
.card-box > table.tabella th:last-child,
.card-box > table.tabella td:last-child  { padding-right: var(--pad-card); }

/* Quello che sta gia' dentro un form non prende il margine due volte */
.card-box > form > *       { padding-left: 0; padding-right: 0; }
.card-box > form > table.tabella th:first-child,
.card-box > form > table.tabella td:first-child { padding-left: 0; }

/* Ritmo verticale: il primo elemento respira sotto l'intestazione, l'ultimo
   non lascia un buco in fondo alla card */
.card-box > form,
.card-box > .griglia,
.card-box > .blocco-riservato,
.card-box > .pillole,
.card-box > .barra-filtri,
.card-box > p              { padding-top: 16px; }
.card-box > table.tabella  { padding-top: 0; }
.card-box > *:last-child   { padding-bottom: 16px; }
.card-box > table.tabella:last-child { padding-bottom: 0; }
.card-box > .intestazione + p,
.card-box > .intestazione + .griglia,
.card-box > .intestazione + form { padding-top: 14px; }
.card-box > p + form,
.card-box > p + .griglia   { padding-top: 0; }
.card-box > .vuoto         { padding-top: 8px; padding-bottom: 8px; }

/* Un form che segue una tabella: la riga di separazione parte da bordo a bordo */
.card-box > table.tabella + form {
    border-top: 1px solid var(--bordo); margin-top: 0; padding-top: 16px;
}
.card-box > .tabella tr:last-child td { border-bottom: none; }

/* Le sezioni dentro un form lungo, separate dai divisori */
.card-box form > .griglia + .griglia { padding-top: 4px; }

/* ---------- CAMPI ---------- */

.campo { margin-bottom: 16px; min-width: 0; }
.campo label {
    display: block; font-size: 11.5px; font-weight: 600; color: var(--testo-medio);
    margin-bottom: 6px; letter-spacing: .01em; line-height: 1.35;
    /* due righe di altezza minima: se un'etichetta va a capo, il campo
       accanto non si abbassa e la riga resta dritta */
    min-height: 16px;
}
.campo input, .campo select, .campo textarea {
    width: 100%; min-width: 0; height: 38px;
    background: #fff; border: 1px solid var(--bordo); border-radius: 6px;
    padding: 0 11px; font-size: 13px; color: var(--testo); font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.campo textarea { height: auto; padding: 9px 11px; line-height: 1.5; resize: vertical; min-height: 76px; }
.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235f5e5a' d='M2 4.5 6 8.5 10 4.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center;
    padding-right: 30px; cursor: pointer;
}
.campo select[multiple] { height: auto; padding: 6px; background-image: none; }
.campo input::placeholder, .campo textarea::placeholder { color: #b0afa9; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #cfcfcf; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none; border-color: var(--blu);
    box-shadow: 0 0 0 3px var(--blu-chiaro);
}
.campo input[type="file"] { height: auto; padding: 8px 11px; font-size: 12.5px; background: #fafafa; }
.campo input[type="date"] { padding-right: 8px; }

/* Le caselle di spunta hanno bisogno di una riga tutta loro, allineata. */
.campo > label > input[type="checkbox"],
.campo > label > .spunta { margin-right: 8px; vertical-align: -2px; }
.campo label:has(> input[type="checkbox"]) {
    font-weight: 400; font-size: 13px; color: var(--testo);
    display: flex; align-items: center; gap: 8px; margin-bottom: 0;
    min-height: 38px;
}
.spunta { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blu); flex: none; }

/* ---------- DIVISORE DENTRO UN MODULO ---------- */

.divisore,
.griglia > .divisore {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin: 6px 0 16px; padding-top: 14px;
    border-top: 1px solid var(--bordo);
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--testo-tenue);
}
.divisore:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ---------- AIUTO ---------- */

.aiuto {
    font-size: 12.5px; color: var(--testo-medio); line-height: 1.55;
    margin: 0 0 16px; max-width: 80ch;
}
.aiuto code {
    background: #f0f1f3; padding: 1px 5px; border-radius: 4px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px;
}

/* ---------- BARRA FILTRI ---------- */

.barra-filtri {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
    margin-bottom: 18px; background: #fff; border: 1px solid var(--bordo);
    border-radius: 8px; padding: 14px 16px;
}
.barra-filtri .campo { margin-bottom: 0; }
.barra-filtri input, .barra-filtri select { min-width: 190px; }
.barra-filtri .btn-app { height: 38px; }

/* ---------- PILLOLE ---------- */

.pillole { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pillola {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 99px; text-decoration: none;
    font-size: 12.5px; font-weight: 500; font-family: inherit;
    background: #fff; color: var(--testo-medio);
    border: 1px solid var(--bordo); cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.pillola:hover { border-color: var(--blu); color: var(--blu); background: #fff; }
.pillola.attiva { background: var(--blu); color: #fff; border-color: var(--blu); }
.pillola.attiva:hover { background: var(--blu-scuro); color: #fff; }
.pillola i { font-size: 14px; }

/* ---------- BOTTONI ---------- */

.btn-app {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--blu); color: #fff; border: 1px solid var(--blu);
    border-radius: 6px; padding: 0 16px; height: 38px;
    font-size: 13px; font-weight: 500; font-family: inherit;
    cursor: pointer; white-space: nowrap; line-height: 1;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-app:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
.btn-app:active { transform: translateY(1px); }
.btn-app i { font-size: 15px; }
.btn-app.chiaro { background: #fff; color: var(--testo); border-color: var(--bordo); }
.btn-app.chiaro:hover { background: #fafafa; border-color: var(--blu); color: var(--blu); }
.btn-app.piccolo { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 5px; }
.btn-app.piccolo i { font-size: 13px; }
.btn-app[disabled] { opacity: .5; cursor: not-allowed; }

/* Un form in linea dentro una cella non deve rompere l'allineamento */
.tabella td form { display: inline-block; margin: 0; vertical-align: middle; }
.tabella td form + .btn-app, .tabella td .btn-app + form { margin-left: 4px; }
.tabella td.strette { white-space: nowrap; }
.tabella td.strette > * { vertical-align: middle; }
.tabella td input[type="date"], .tabella td input[type="text"],
.tabella td input:not([type]), .tabella td select {
    height: 32px; padding: 0 8px; font-size: 12.5px;
    border: 1px solid var(--bordo); border-radius: 5px; font-family: inherit;
    background: #fff; color: var(--testo); max-width: 100%;
}
.tabella td input[type="file"] { font-size: 11.5px; max-width: 210px; }
.tabella td input:focus, .tabella td select:focus {
    outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro);
}

/* ---------- AZIONI IN FONDO AL MODULO ---------- */

.azioni-fondo {
    display: flex; gap: 10px; justify-content: flex-end; align-items: center;
    padding-top: 16px; margin-top: 4px;
    border-top: 1px solid var(--bordo); flex-wrap: wrap;
}

/* ---------- RIGHE DEGLI ESAMI ---------- */

.riga-esame {
    display: grid;
    grid-template-columns: minmax(160px,2.2fr) minmax(90px,1fr) 90px 90px 90px 74px;
    gap: 8px; align-items: center; margin-bottom: 8px;
}
.riga-esame input, .riga-esame select {
    width: 100%; min-width: 0; height: 34px; padding: 0 10px;
    border: 1px solid var(--bordo); border-radius: 5px;
    font-size: 12.5px; font-family: inherit; background: #fff; color: var(--testo);
}
.riga-esame input:focus, .riga-esame select:focus {
    outline: none; border-color: var(--blu); box-shadow: 0 0 0 3px var(--blu-chiaro);
}
.riga-esame .via {
    background: none; border: none; cursor: pointer; color: var(--testo-tenue);
    font-size: 19px; line-height: 1; padding: 2px 6px; border-radius: 4px;
}
.riga-esame .via:hover { color: var(--rosso); background: var(--rosso-bg); }
.riga-esame.intestazione-righe {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    color: var(--testo-tenue); letter-spacing: .06em; margin-bottom: 6px;
    padding-bottom: 6px; border-bottom: 1px solid var(--bordo);
}
@media (max-width: 900px) {
    .riga-esame { grid-template-columns: 1fr 1fr; }
    .riga-esame.intestazione-righe { display: none; }
}

/* ---------- BLOCCO RISERVATO ---------- */

.blocco-riservato {
    border-left: 3px solid var(--ambra);
    background: var(--ambra-bg);
    padding: 16px 18px; border-radius: 0 8px 8px 0; margin-bottom: 18px;
}
.blocco-riservato .avvertenza {
    font-size: 11.5px; color: var(--ambra); font-weight: 600;
    margin-bottom: 12px; display: flex; align-items: center; gap: 7px;
    text-transform: uppercase; letter-spacing: .04em;
}
.blocco-riservato .campo input, .blocco-riservato .campo textarea,
.blocco-riservato .campo select { background: #fff; }

/* ---------- SIDEBAR: RIFINITURE ---------- */

.app-sidebar .azioni { padding: 4px 12px 14px; }
.app-sidebar .btn-principale {
    width: 100%; height: 38px; padding: 0 14px;
    border-radius: 6px; justify-content: center; gap: 8px;
    font-size: 13px; font-weight: 500;
}
.app-sidebar .group-label { padding: 16px 18px 6px; }
.app-sidebar .menu-item {
    padding: 9px 18px; gap: 11px;
    border-left-width: 3px; border-radius: 0;
}
.app-sidebar .menu-item span { flex: 1; min-width: 0; }
.app-sidebar .menu-item .conteggio { margin-left: auto; flex: none; }
.app-sidebar .piede { margin-top: 24px; padding: 14px 18px 0; }

/* ---------- TESTATA ---------- */

.testata { margin-bottom: 22px; }
.testata > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- STAMPA ---------- */

@media print {
    .app-header, .app-sidebar, .velo, .azioni-fondo, .barra-filtri, .btn-app { display: none !important; }
    .app-content { padding: 0; }
    .card-box { border: none; }
}

/* ---------- SUGGERIMENTI DELLA RICERCA (comuni, stati esteri) ---------- */
.suggerimenti {
    display: none; position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
    background: #fff; border: 1px solid var(--bordo); border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 18px rgba(16,38,46,.10);
    max-height: 280px; overflow-y: auto;
}
.suggerimenti .voce { padding: 8px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f4f4f4; }
.suggerimenti .voce:last-child { border-bottom: none; }
.suggerimenti .voce:hover { background: var(--blu-chiaro); }
.suggerimenti .voce .sotto { color: var(--testo-medio); font-size: 12px; }

/* ---------- SCELTA DEL MEDICO NELLA BARRA IN ALTO ---------- */
.scelta-medico {
    display: flex; align-items: center; gap: 7px;
    background: var(--sfondo, #f7f7f5); border: 1px solid var(--bordo);
    border-radius: 99px; padding: 3px 12px 3px 13px; margin-right: 10px;
}
.scelta-medico i { color: var(--testo-medio); font-size: 14px; }
.scelta-medico select {
    border: none; background: none; font-family: inherit; font-size: 13px;
    color: var(--testo); cursor: pointer; padding: 4px 2px; max-width: 230px;
}
.scelta-medico select:focus { outline: none; }
@media (max-width: 900px) { .scelta-medico select { max-width: 130px; } }

.avviso-filtro {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--testo-medio);
    margin-bottom: 14px;
}
.avviso-filtro strong { color: var(--testo); }

/* ---------- SIGILLO DELLA VISITA CHIUSA ---------- */
.card-box.sigillo { border-color: var(--verde, #1d9e75); }
.card-box.sigillo .intestazione { background: #f0faf6; }
.card-box.sigillo .intestazione h2 { display: flex; align-items: center; gap: 8px; }
.card-box.sigillo .intestazione h2 i { color: var(--verde, #1d9e75); font-size: 17px; }

/* ---------- SCELTA DEL MEDICO IN FONDO AL MENU ---------- */
.app-sidebar .piede-medico {
    text-align: left; padding: 0 0 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--bordo);
}
.app-sidebar .piede-medico .et {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--testo-tenue); margin-bottom: 5px;
}
.app-sidebar .piede-medico select {
    width: 100%; font-family: inherit; font-size: 12.5px; color: var(--testo);
    background: #fff; border: 1px solid var(--bordo); border-radius: 6px;
    padding: 6px 8px; cursor: pointer;
}
.app-sidebar .piede-medico select:focus { outline: none; border-color: var(--blu); }
.app-sidebar .piede-medico a {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--blu); text-decoration: none; margin-top: 7px;
}
.app-sidebar .piede-medico a:hover { text-decoration: underline; }
.scelta-medico a { color: var(--testo-medio); text-decoration: none; display: flex; }
.scelta-medico a:hover { color: var(--blu); }

/* =============================================================================
   MARGINI E SPAZI - revisione 30/08/2026
   ========================================================================== */

/* ---------- RITMO DELLA PAGINA ---------- */
.app-content { padding: 26px 30px 40px; }
.testata { margin-bottom: 20px; }
.card-box { margin-bottom: 18px; }
.card-box + .card-box { margin-top: 0; }
.numeri { margin-bottom: 18px; }
@media (max-width: 900px) { .app-content { padding: 18px 16px 32px; } }

/* ---------- INTESTAZIONE DELLE CARD ---------- */
.card-box > .intestazione {
    padding-top: 13px; padding-bottom: 13px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}

/* ---------- TABELLE ---------- */
.tabella th { padding: 9px 14px; }
.tabella td { padding: 12px 14px; }
.tabella td .sotto { margin-top: 2px; line-height: 1.35; }
.tabella td > div + div { margin-top: 3px; }

/* ---------- GRIGLIA ---------- */
.griglia { gap: 0 18px; }
.campo { margin-bottom: 16px; }
.griglia > .campo:last-child { margin-bottom: 16px; }

/* ---------- BARRA FILTRI E AVVISI ---------- */
.barra-filtri { margin-bottom: 16px; padding: 14px 16px; }
.avviso { margin-bottom: 16px; padding: 12px 15px; }
.avviso-filtro { margin: -4px 0 16px; }

/* ---------- ALLEGATI: ELENCO LEGGIBILE ---------- */
.allegato {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px; margin-bottom: 5px;
    background: #fafafa; border: 1px solid var(--bordo); border-radius: 7px;
    font-size: 12.5px;
}
.allegato .nome-file {
    flex: 1; min-width: 0; color: var(--testo); text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.allegato .nome-file:hover { color: var(--blu); text-decoration: underline; }
.allegato .nome-file i { margin-right: 5px; color: var(--testo-medio); }
.allegato .peso { color: var(--testo-tenue); font-size: 11.5px; flex: none; }
.allegato .azione {
    flex: none; color: var(--testo-medio); text-decoration: none;
    padding: 3px 5px; border-radius: 5px; line-height: 1;
}
.allegato .azione:hover { color: var(--blu); background: var(--blu-chiaro); }
.allegato .azione.togli:hover { color: var(--rosso); background: var(--rosso-bg); }

/* ---------- CARICAMENTO DI UN FILE ---------- */
.carica-file {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px 10px; border: 1px dashed var(--bordo); border-radius: 7px;
    background: #fcfcfc; font-size: 12.5px;
}
.carica-file input[type="file"] { font-size: 12px; max-width: 100%; }
.carica-file .nota { color: var(--testo-tenue); font-size: 11.5px; }

/* ---------- AVVISO SUI PERMESSI ---------- */
.avviso.permessi { background: var(--ambra-bg); border-color: var(--ambra); color: #7a4b00; }