/*
 * Stile ispirato ai siti Per Le Uve (perleuve.it) e 4Grapes (4grapes.it):
 * Montserrat maiuscolo per i titoli, Source Sans per il testo, verde lime del marchio come
 * accento, grigio ardesia per il testo, viola scuro per i titoli, fondi chiari.
 * I colori dei tematismi (legenda) arrivano da TematismiBigot e non dipendono da qui.
 */

/* Caratteri serviti dal sito (wwwroot/fonts, licenza OFL), non da Google Fonts: font variabili,
   un file per famiglia copre tutti i pesi usati. */
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Source Sans 3";
    src: url("../fonts/SourceSans3-wght.ttf") format("truetype");
    font-weight: 200 900;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;

    --verde: #8dc63e;
    --verde-scuro: #4f7a1f;
    --verde-tenue: rgba(141, 198, 62, 0.16);
    --giallo: #eae711;
    --viola: #3c3950;
    --notte: #212331;
    --ardesia: #5f727f;
    --ardesia-chiaro: #99a9b5;
    --fondo: #f4f6f7;
    --crema: #fbf7f4;
    --bordo: #dfe5e8;
    --bianco: #ffffff;
    --avviso-fondo: #fff8e1;
    --avviso-bordo: #e6cf7a;
    --avviso-testo: #6b4e00;

    --font-titoli: "Montserrat", "Segoe UI", system-ui, sans-serif;
    --font-testo: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, sans-serif;

    --raggio: 6px;
    --ombra: 0 1px 3px rgba(33, 35, 49, 0.12), 0 4px 14px rgba(33, 35, 49, 0.06);
    --altezza-header: 64px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    background-color: var(--fondo);
    color: var(--ardesia);
    font-family: var(--font-testo);
    font-size: 16px;
    line-height: 1.45;
}

h1,
h2,
h3 {
    font-family: var(--font-titoli);
    color: var(--viola);
    margin: 0;
}

a {
    color: var(--verde-scuro);
}

button,
select,
input {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.nota {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ardesia);
    font-style: italic;
}

/* ---------- Header ---------- */

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.top-row {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--altezza-header);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem;
    background-color: var(--bianco);
    border-bottom: 3px solid var(--verde);
    box-shadow: 0 1px 6px rgba(33, 35, 49, 0.08);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    text-decoration: none;
}

.brand-marchio {
    display: grid;
    flex-shrink: 0;
    padding-left: 0.6rem;
    border-left: 4px solid var(--verde);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1.05;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--notte);
}

.brand-testo {
    display: grid;
    min-width: 0;
    padding-left: 0.8rem;
    border-left: 1px solid var(--bordo);
}

.brand-titolo {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--viola);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-sottotitolo {
    font-size: 0.8rem;
    color: var(--ardesia-chiaro);
    white-space: nowrap;
}

.top-row nav a {
    padding: 0.4rem 0.2rem;
    font-family: var(--font-titoli);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ardesia);
    border-bottom: 2px solid transparent;
}

.top-row nav a:hover,
.top-row nav a.active {
    color: var(--viola);
    border-bottom-color: var(--verde);
}

main {
    flex: 1;
    min-height: 0;
}

/* ---------- Pagina Aziende ---------- */

.contenitore {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 3rem;
}

.intestazione-pagina {
    margin-bottom: 2rem;
}

.titolo-pagina {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Il trattino verde sotto i titoli, come nei titoli di sezione di perleuve.it. */
.titolo-pagina::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 0.8rem;
    background-color: var(--verde);
}

.sottotitolo {
    margin: 0.8rem 0 0;
    font-size: 1.05rem;
}

.griglia-aziende {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.visualmente-nascosto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Ricerca e ordinamento sopra le schede. */
.aziende-strumenti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.aziende-ricerca {
    flex: 1 1 320px;
    max-width: 560px;
}

.aziende-ricerca input,
.aziende-ordine select {
    font: inherit;
    color: var(--notte);
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.aziende-ricerca input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 1.05rem;
}

.aziende-ordine {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.95rem;
}

.aziende-ordine select {
    padding: 0.45rem 0.6rem;
}

.aziende-ricerca input:focus,
.aziende-ordine select:focus {
    border-color: var(--verde);
    outline: none;
    box-shadow: 0 0 0 3px var(--verde-tenue);
}

/* Linguette per gruppo, con il conteggio. */
.linguette-gruppi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bordo);
}

.linguetta {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background-color: var(--bianco);
    color: var(--viola);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.linguetta .conteggio {
    min-width: 1.6em;
    padding: 0 0.4em;
    border-radius: 999px;
    background-color: var(--fondo);
    color: var(--ardesia);
    font-size: 0.85rem;
    text-align: center;
}

.linguetta:hover {
    border-color: var(--verde);
}

.linguetta[aria-pressed="true"] {
    border-color: var(--viola);
    background-color: var(--viola);
    color: var(--bianco);
}

.linguetta[aria-pressed="true"] .conteggio {
    background-color: var(--verde);
    color: var(--notte);
}

.aziende-stato {
    padding: 0.8rem 1.1rem;
    border-radius: var(--raggio);
    background-color: var(--bianco);
    box-shadow: var(--ombra);
}

.aziende-nota {
    margin: 0 0 1rem;
}

.scheda-azienda {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    height: 100%;
    padding: 0.9rem 1rem;
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--bordo);
    border-radius: var(--raggio);
    text-decoration: none;
    color: var(--ardesia);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.scheda-azienda .nome {
    font-weight: 600;
    color: var(--viola);
    overflow-wrap: anywhere;
}

.scheda-azienda .numeri,
.scheda-azienda .bigot {
    font-size: 0.92rem;
}

.scheda-azienda .bigot {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.scheda-azienda .bigot strong {
    color: var(--notte);
}

.scheda-azienda .bigot.vuoto {
    color: var(--ardesia-chiaro);
}

/* Meteo dell'azienda sotto il nome (task #67): «7 gg: 42 mm · peronospora alta». */
.scheda-azienda .cartellino-meteo {
    align-self: flex-start;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: var(--fondo);
    color: var(--ardesia);
    font-size: 0.85rem;
}

.scheda-azienda .cartellino-meteo.vuoto {
    color: var(--ardesia-chiaro);
}

.scheda-azienda .cartellino-meteo.allerta {
    background-color: var(--avviso-fondo);
    color: var(--avviso-testo);
}

.scheda-azienda .pallino {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(33, 35, 49, 0.25);
}

/* «Apri la mappa» in fondo alla scheda, sempre allineato fra schede di altezza diversa. */
.scheda-azienda .apri {
    margin-top: auto;
    padding-top: 0.4rem;
    color: var(--verde-scuro);
    font-family: var(--font-titoli);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.scheda-azienda:hover {
    border-color: var(--verde);
    box-shadow: var(--ombra);
}

.scheda-azienda:hover .apri {
    text-decoration: underline;
}

/* ---------- Pagina Mappa ---------- */

.mappa-layout {
    display: flex;
    height: calc(100vh - var(--altezza-header));
}

.vigneti-list {
    width: 330px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
    overflow-y: auto;
    background-color: var(--fondo);
    border-right: 1px solid var(--bordo);
}

.scheda {
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 0.8rem 0.9rem;
}

.titolo-sezione {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--viola);
}

.titolo-sezione::before {
    content: "";
    width: 14px;
    height: 3px;
    background-color: var(--verde);
    flex-shrink: 0;
}

.titolo-sezione .contatore {
    margin-left: auto;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background-color: var(--verde-tenue);
    color: var(--verde-scuro);
    font-family: var(--font-testo);
    font-size: 0.8rem;
    letter-spacing: 0;
}

.tematismo-controlli {
    display: grid;
    gap: 0.55rem;
}

.tematismo-controlli .titolo-sezione {
    margin-bottom: 0.1rem;
}

.tematismo-controlli label {
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ardesia);
}

/* Interruttore a casella (es. «Vigneti senza poligono»): casella e testo sulla stessa riga. */
.tematismo-controlli label.casella {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
}

.tematismo-controlli label.casella input {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    accent-color: var(--verde);
}

/* Dispositivi (task #69): colori dei segnaposti, della legenda nei Filtri e del puntino della pagina iniziale. */
.segnaposto-dispositivo,
.pallino-dispositivo {
    --colore-dispositivo: #8a959c;
}

.segnaposto-dispositivo.verde,
.pallino-dispositivo.verde {
    --colore-dispositivo: #3f9a2f;
}

.segnaposto-dispositivo.giallo,
.pallino-dispositivo.giallo {
    --colore-dispositivo: #d9a400;
}

.segnaposto-dispositivo.rosso,
.pallino-dispositivo.rosso {
    --colore-dispositivo: #d0342c;
}

.segnaposto-dispositivo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 2px solid var(--bianco);
    border-radius: 50%;
    background-color: var(--colore-dispositivo);
    box-shadow: 0 1px 4px rgba(33, 35, 49, 0.45);
    cursor: pointer;
}

/* Area di tocco più grande del disegno, per il dito. */
.segnaposto-dispositivo::after {
    content: "";
    position: absolute;
    inset: -8px;
}

.segnaposto-dispositivo svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--bianco);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.popup-dispositivo {
    font-family: var(--font-testo);
    font-size: 0.9rem;
    color: var(--ardesia);
}

.popup-dispositivo strong {
    display: block;
    color: var(--viola);
    padding-right: 1rem; /* spazio per la crocetta di chiusura */
}

.legenda-dispositivi {
    margin: 0 0 0.4rem;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
    color: var(--ardesia);
}

.legenda-dispositivi li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.pallino-dispositivo {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background-color: var(--colore-dispositivo);
    flex: none;
}

/* Pagina iniziale: azienda con dispositivi fermi. */
.scheda-azienda .puntino-fermi {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.4rem;
    border-radius: 50%;
    background-color: #d0342c;
    vertical-align: 0.1em;
}

/* Scelta degli anni: pillole «Anno» e «Confronta con» (quella attiva in verde) e sotto la barra
   dei soli anni con dati. Nella barra: pieno verde = anno mostrato, bordo scuro = anno di confronto. */
.scelta-anni {
    display: grid;
    gap: 0.4rem;
}

.pillole {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pillola,
.pillola.confronto button {
    font: inherit;
    font-size: 0.8rem;
    color: var(--viola);
    cursor: pointer;
}

.pillola {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2.1rem;
    padding: 0.2rem 0.75rem;
    border: 1px solid rgba(60, 57, 80, 0.25);
    border-radius: 999px;
    background-color: #fff;
}

.pillola .titolo {
    color: var(--ardesia);
}

.pillola strong {
    font-size: 0.95rem;
}

.pillola.attiva {
    border-color: var(--verde);
    background-color: var(--verde-tenue);
    box-shadow: inset 0 0 0 1px var(--verde);
}

.pillola.aggiungi {
    border-style: dashed;
    color: var(--ardesia);
}

.pillola.aggiungi:disabled {
    opacity: 0.5;
    cursor: default;
}

/* La pillola del confronto ha due pulsanti: sceglierla e spegnere il confronto (×). */
.pillola.confronto {
    padding: 0 0.2rem 0 0.75rem;
}

.pillola.confronto button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0;
    border: none;
    background: none;
}

.pillola.confronto .togli {
    justify-content: center;
    width: 1.7rem;
    border-radius: 50%;
    font-size: 1.1rem;
    color: var(--ardesia);
}

.pillola.confronto .togli:hover {
    background-color: rgba(60, 57, 80, 0.1);
}

.barra-anni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.barra-anni button {
    min-width: 3.1rem;
    min-height: 2rem;
    padding: 0.15rem 0.4rem;
    border: 1px solid rgba(60, 57, 80, 0.2);
    border-radius: 4px;
    background-color: #fff;
    font: inherit;
    font-size: 0.8rem;
    color: var(--viola);
    cursor: pointer;
}

.barra-anni button:hover:not(:disabled) {
    border-color: var(--verde);
}

.barra-anni button.scelto {
    border-color: var(--verde);
    background-color: var(--verde);
    color: var(--notte);
    font-weight: 600;
}

.barra-anni button.confronto {
    border: 2px solid var(--viola);
    font-weight: 600;
}

.barra-anni button:disabled {
    cursor: default;
}

/* Variazione in evidenza (scheda, riepilogo): numero bianco su fondo del colore della sua classe. */
.variazione {
    display: inline-block;
    min-width: 3rem;
    padding: 0.05rem 0.4rem;
    border-radius: 4px;
    background-color: var(--colore, #bababa);
    color: #fff;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}

.confronto-scheda {
    margin: 0.5rem 0;
    padding: 0.5rem 0.6rem;
    border-radius: var(--raggio);
    background-color: var(--fondo);
    color: var(--viola);
}

.confronto-scheda p {
    margin: 0;
}

.confronto-scheda .titolo-confronto {
    font-weight: 600;
}

.confronto-scheda .riga-confronto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0.25rem 0;
}

.confronto-scheda .riga-confronto .variazione {
    font-size: 1.05rem;
}

.parametri-cambiati {
    display: grid;
    gap: 0.2rem;
    margin: 0.2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.85rem;
}

.parametri-cambiati li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

select {
    width: 100%;
    /* Nomi lunghi (aziende, vigne) non devono allargare la barra laterale. */
    min-width: 0;
    text-overflow: ellipsis;
    padding: 0.4rem 2rem 0.4rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--notte);
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 4px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f727f' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    cursor: pointer;
}

select:hover:not(:disabled) {
    border-color: var(--ardesia-chiaro);
}

select:focus {
    border-color: var(--verde);
    outline: none;
    box-shadow: 0 0 0 3px var(--verde-tenue);
}

select:disabled {
    color: var(--ardesia-chiaro);
    background-color: var(--fondo);
    cursor: default;
}

/* Casella di ricerca in cima al pannello: proposte sotto, nel flusso (niente tendine sovrapposte). */
.ricerca .titolo-sezione {
    margin-bottom: 0.4rem;
}

.ricerca input {
    width: 100%;
    font: inherit;
    font-size: 0.92rem;
    padding: 0.4rem 0.6rem;
    color: var(--notte);
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: 4px;
}

.ricerca input:focus {
    border-color: var(--verde);
    outline: none;
    box-shadow: 0 0 0 3px var(--verde-tenue);
}

.ricerca .nota {
    margin: 0.5rem 0 0;
}

.vigneti-list .risultati-ricerca {
    margin-top: 0.4rem;
    max-height: 18rem;
    overflow-y: auto;
}

.risultati-ricerca .tipo {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--verde-scuro);
}

.vigneti-list .risultati-ricerca li.attivo button {
    background-color: var(--verde-tenue);
    border-left-color: var(--verde);
}

/* Elenco vigneti, subito sotto la ricerca: occupa lo spazio rimasto e scorre da solo, così resta
   sempre visibile anche con i riquadri Filtri e Mappe tematiche aperti sotto di lui. */
.elenco-vigneti {
    /* Almeno ~6 voci (non si accorcia), poi tutto lo spazio che resta: sono Filtri e Mappe
       tematiche a ridursi (e a scorrere da soli) quando la colonna non basta. */
    flex: 1 0 22rem;
    display: flex;
    flex-direction: column;
}

.elenco-vigneti > ul {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
}

.elenco-vigneti .ordina {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.2rem 0 0.4rem;
    font-size: 0.8rem;
    color: var(--ardesia);
}

.elenco-vigneti .ordina select {
    width: auto;
    flex: 1;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    font-size: 0.8rem;
}

/* Voce: nome e, con un parametro scelto, il valore col pallino del colore della classe. */
.elenco-vigneti .riga {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.elenco-vigneti .riga .nome {
    flex: 1;
    min-width: 0;
}

.elenco-vigneti .valore {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.8rem;
    color: var(--notte);
    white-space: nowrap;
}

.elenco-vigneti .campione {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.elenco-vigneti .campione.vuoto {
    visibility: hidden;
}

/* Vigneto sotto il mouse sulla mappa (data-evidenza lo mette mappa.js). */
.vigneti-list li[data-evidenza] button {
    background-color: var(--fondo);
    border-left-color: var(--viola);
}

/* Riquadri richiudibili (Filtri, Mappe tematiche): il titolo è il pulsante. */
.riquadro {
    flex: 0 1 auto;
    min-height: 3rem;
    overflow-y: auto;
}

.riquadro .titolo-sezione {
    margin: 0;
}

.riquadro .apri-chiudi {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
}

.riquadro .apri-chiudi .contatore {
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11rem;
}

.riquadro .apri-chiudi .freccia {
    margin-left: auto;
    color: var(--ardesia);
}

.riquadro .apri-chiudi .contatore + .freccia {
    margin-left: 0;
}

.vigneti-list ul {
    list-style: none;
    padding: 0;
    margin: 0 -0.4rem;
}

.vigneti-list li button {
    display: grid;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.6rem;
    border: none;
    border-left: 3px solid transparent;
    background: none;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
    color: var(--notte);
}

.vigneti-list li button:hover {
    background-color: var(--fondo);
}

.vigneti-list li .dettaglio {
    font-size: 0.8rem;
    color: var(--ardesia);
}

/* Vigneto in elenco ma non sulla mappa (es. poligono oltre la soglia). */
.vigneti-list li .dettaglio.avviso {
    color: var(--avviso-testo);
    font-style: italic;
}

.vigneti-list li.selezionato button {
    background-color: var(--verde-tenue);
    border-left-color: var(--verde);
}

.vigneti-list li.selezionato .nome {
    font-weight: 700;
    color: var(--viola);
}


.mappa-area {
    position: relative;
    flex: 1;
    min-width: 0;
    background-color: #eef1f2;
}

.mappa {
    position: absolute;
    inset: 0;
}

/* Controlli e schede sopra la mappa: stesso linguaggio (bianco, bordo tenue, ombra). */
.mappa-controlli {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    max-width: calc(100% - 24px - 360px);
}

.mappa-controlli button,
.mappa-controlli select {
    width: auto;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bordo);
    background-color: var(--bianco);
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-titoli);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--viola);
    box-shadow: var(--ombra);
}

.mappa-controlli select {
    padding-right: 2rem;
    max-width: 260px;
    font-family: var(--font-testo);
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.mappa-controlli button:hover:not(:disabled) {
    border-color: var(--verde);
}

.mappa-controlli button.attivo {
    background-color: var(--verde);
    border-color: var(--verde);
    color: var(--notte);
}

.mappa-controlli button:disabled {
    opacity: 0.5;
    cursor: default;
}

.gruppo-pulsanti {
    display: flex;
    box-shadow: var(--ombra);
    border-radius: 4px;
}

.gruppo-pulsanti button {
    box-shadow: none;
}

.gruppo-pulsanti button:first-child {
    border-radius: 4px 0 0 4px;
}

.gruppo-pulsanti button:last-child {
    border-radius: 0 4px 4px 0;
}

.gruppo-pulsanti button + button {
    border-left: none;
}

.gruppo-pulsanti button:not(:first-child):not(:last-child) {
    border-radius: 0;
}

/* Comandi leggeri («Inquadra», «⋯ Azioni»): stesso peso fra loro, meno degli stili della mappa. */
.mappa-controlli button.leggero,
.menu-azioni > summary {
    font-family: var(--font-testo);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ardesia);
}

/* «Dove sono»: mirino (e la scritta sul computer); acceso = verde finché segue la posizione. */
.mappa-controlli button.dove-sono {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.mappa-controlli button.dove-sono.attivo {
    color: var(--notte);
}

/* Menu «⋯ Azioni»: Copia link e Scarica, separati dagli stili (lo chiude mappa.js, collegaMenu). */
.menu-azioni {
    position: relative;
    margin-left: 0.5rem;
}

.menu-azioni > summary {
    list-style: none;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    background-color: var(--bianco);
    box-shadow: var(--ombra);
    cursor: pointer;
    user-select: none;
}

.menu-azioni > summary::-webkit-details-marker {
    display: none;
}

.menu-azioni > summary:hover,
.menu-azioni[open] > summary {
    border-color: var(--verde);
}

.menu-azioni > summary.attivo {
    border-color: var(--verde);
    color: var(--verde-scuro);
}

.menu-voci {
    position: absolute;
    z-index: 4;
    top: calc(100% + 6px);
    left: 0;
    width: 250px;
    padding: 0.4rem;
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.mappa-controlli .menu-voci button,
.menu-voci a {
    display: block;
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    font-family: var(--font-testo);
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    text-decoration: none;
    color: var(--notte);
    cursor: pointer;
}

.mappa-controlli .menu-voci button:hover,
.menu-voci a:hover {
    background-color: var(--verde-tenue);
}

.menu-voci .menu-titolo {
    margin: 0.4rem 0 0.1rem;
    padding: 0.35rem 0.5rem 0;
    border-top: 1px solid var(--bordo);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ardesia);
}

.menu-voci .nota {
    margin: 0.3rem 0.5rem 0.2rem;
}

/* Colonna di destra sopra la mappa: in alto la scheda del vigneto (accanto ai controlli di
   navigazione MapLibre), in basso la legenda, sopra i crediti. La scheda si accorcia e scorre per
   lasciare posto alla legenda (che non si accorcia: al massimo 75% della colonna, poi scorre lei):
   non si coprono mai e la legenda resta intera. Fuori dai due riquadri la mappa resta cliccabile. */
.mappa-destra {
    position: absolute;
    /* Sopra i controlli MapLibre (attribuzione, z-index 2). */
    z-index: 3;
    top: 12px;
    right: 12px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: calc(100% - 24px);
    pointer-events: none;
}

.mappa-destra > * {
    pointer-events: auto;
}

/* Scheda del vigneto selezionato. */
.info-panel {
    flex: 0 1 auto;
    min-height: 0;
    width: 320px;
    max-width: calc(100% - 40px);
    margin-right: 40px;
    overflow-y: auto;
    padding: 0.9rem 1rem 1rem;
    background-color: var(--bianco);
    border-top: 4px solid var(--verde);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

.info-intestazione {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.info-intestazione h2 {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.chiudi {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background-color: var(--fondo);
    color: var(--ardesia);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.chiudi:hover {
    background-color: var(--bordo);
    color: var(--viola);
}

.info-dati {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.8rem;
    margin: 0 0 0.6rem;
    font-size: 0.9rem;
}

.info-dati dt {
    color: var(--ardesia-chiaro);
}

.info-dati dd {
    margin: 0;
    color: var(--notte);
}

.info-panel .titolo-sezione {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--bordo);
}

.valori-bigot {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.valori-bigot th,
.valori-bigot td {
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--fondo);
}

.valori-bigot th {
    text-align: left;
    font-weight: 400;
    color: var(--ardesia);
    padding-right: 0.5rem;
}

.valori-bigot td {
    text-align: right;
    color: var(--notte);
    font-weight: 600;
}

.valori-bigot tr.evidenza th,
.valori-bigot tr.evidenza td {
    color: var(--viola);
    font-weight: 700;
}

/* Andamento NDVI nella scheda (task #84): anno in verde, anno prima in grigio chiaro. */
.grafico-ndvi {
    margin: 0.3rem 0 0.4rem;
}

.grafico-ndvi svg {
    display: block;
    width: 100%;
    height: auto;
}

.grafico-ndvi .griglia {
    stroke: var(--bordo);
    stroke-width: 0.5;
}

.grafico-ndvi .asse {
    font-size: 8px;
    fill: var(--ardesia);
}

.grafico-ndvi polyline {
    fill: none;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.grafico-ndvi polyline.anno { stroke: #1d6427; }
.grafico-ndvi polyline.precedente { stroke: #c8c8c8; }
.grafico-ndvi .punto { cursor: pointer; }
.grafico-ndvi .punto.anno circle { fill: #1d6427; }
.grafico-ndvi .punto.precedente circle { fill: #c8c8c8; }
.grafico-ndvi .punto circle.tocco { fill: transparent; }
.grafico-ndvi .punto.scelto circle:not(.tocco) { stroke: var(--viola); stroke-width: 1.5; }

.grafico-ndvi figcaption {
    font-size: 0.8rem;
    color: var(--ardesia);
    text-align: center;
}

.grafico-ndvi .legenda-grafico .linea {
    display: inline-block;
    width: 1rem;
    height: 2px;
    margin: 0 0.25rem 0.2rem 0.5rem;
    vertical-align: middle;
}

.grafico-ndvi .legenda-grafico .linea.anno { background: #1d6427; }
.grafico-ndvi .legenda-grafico .linea.precedente { background: #c8c8c8; }

/* Valore con il quadratino del colore di legenda, allineato a destra. */
.valore-colore {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.info-panel .campione {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.info-panel .campione.vuoto {
    border-color: transparent;
}

/* Anni precedenti: stessa tabella, in piccolo. */
.valori-bigot.precedenti {
    margin-top: 0.7rem;
    font-size: 0.74rem;
}

.valori-bigot.precedenti thead th {
    color: var(--ardesia-chiaro);
    font-weight: 600;
    text-align: right;
}

.valori-bigot.precedenti thead th:first-child {
    text-align: left;
}

.valori-bigot.precedenti td {
    font-weight: 400;
    padding-left: 0.35rem;
    white-space: nowrap;
}

.valori-bigot.precedenti .campione {
    width: 8px;
    height: 8px;
}

.info-titoli {
    flex: 1;
    min-width: 0;
}

.info-sottotitolo {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--ardesia);
    overflow-wrap: anywhere;
}

.info-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}

.info-azioni .pulsante {
    display: inline-block;
    width: auto;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    background-color: var(--bianco);
    color: var(--viola);
    font-family: var(--font-titoli);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.info-azioni .pulsante:hover {
    border-color: var(--verde);
}

.info-azioni .pulsante.attivo {
    background-color: var(--verde);
    border-color: var(--verde);
    color: var(--notte);
}

/* Legenda: riquadro compatto in basso a destra, riducibile a una linguetta (button.linguetta) col
   nome del parametro e l'ora dei dati. */
.mappa-legenda {
    /* Non si accorcia per la scheda del vigneto: si accorcia (e scorre) la scheda. */
    flex: 0 0 auto;
    min-height: 0;
    margin-top: auto;
    width: 280px;
    max-width: 100%;
    max-height: 75%;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
    background-color: rgba(255, 255, 255, 0.96);
    border-left: 4px solid var(--verde);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    font-size: 0.82rem;
    color: var(--notte);
}

.mappa-legenda strong {
    font-family: var(--font-titoli);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--viola);
}

.mappa-legenda .nota {
    margin-top: 0.2rem;
}

.legenda-intestazione {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.legenda-intestazione .chiudi {
    margin: -0.2rem -0.3rem 0 0;
    font-size: 0.9rem;
}

.mappa-legenda .aggiornamento {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    color: var(--ardesia);
}

/* Legenda ridotta: una linguetta che la riapre. */
button.mappa-legenda.linguetta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    width: auto;
    max-width: 320px;
    border-top: none;
    border-right: none;
    border-bottom: none;
    font: inherit;
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.linguetta .aggiornamento {
    margin: 0;
}

.linguetta .freccia {
    margin-left: auto;
    color: var(--ardesia);
}

.mappa-legenda ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.mappa-legenda li {
    margin: 0.1rem 0;
}

/* Ogni voce è un pulsante: il clic mostra solo i suoi vigneti, il secondo clic li mostra tutti. */
.mappa-legenda li button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.15rem 0.3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.mappa-legenda li button:hover:not(:disabled) {
    background-color: rgba(141, 198, 62, 0.12);
}

.mappa-legenda li button.attiva {
    border-color: var(--verde);
    background-color: rgba(141, 198, 62, 0.18);
    font-weight: 600;
}

.mappa-legenda li button.spenta,
.mappa-legenda li button:disabled {
    opacity: 0.5;
}

.mappa-legenda li button:disabled {
    cursor: default;
}

.mappa-legenda .campione {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.mappa-legenda .campione.nd {
    background-color: rgba(158, 158, 158, 0.35);
}

/* Fuori perimetro BIGOT: sulla mappa resta solo il bordo. */
.mappa-legenda .campione.fp {
    background-color: transparent;
    border: 1px dashed rgba(0, 0, 0, 0.45);
}

.mappa-legenda .conteggio {
    margin-left: auto;
    padding-left: 0.4rem;
    color: var(--ardesia);
    font-variant-numeric: tabular-nums;
}

/* Classe della scala senza vigneti: resta per leggere la scala intera, in grigio chiaro. */
.mappa-legenda li button.vuota,
.mappa-legenda li button.vuota .conteggio {
    opacity: 1;
    color: var(--ardesia-chiaro);
}

.mappa-legenda li button.vuota .campione {
    opacity: 0.3;
}

/* Riepilogo del confronto, sopra le voci: barra delle classi, variazione media, elenco dal peggiore. */
.riepilogo-confronto {
    margin-top: 0.45rem;
}

.riepilogo-confronto p {
    margin: 0.3rem 0 0;
}

.barra-classi {
    display: flex;
    height: 10px;
    overflow: hidden;
    border-radius: 3px;
}

.barra-classi span {
    flex-basis: 0;
}

.mappa-legenda .variazione-media {
    font-family: inherit;
    font-size: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.vigneti-variazione summary {
    margin-top: 0.3rem;
    color: var(--verde-scuro);
    font-weight: 600;
    cursor: pointer;
}

.vigneti-variazione ol {
    max-height: 12rem;
    margin: 0.3rem 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.vigneti-variazione button {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.15rem 0.2rem;
    border: none;
    border-radius: 4px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.vigneti-variazione button:hover,
.vigneti-variazione button.selezionato {
    background-color: var(--verde-tenue);
}

.vigneti-variazione .nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Avvisi sulla mappa (basemap di riserva, sfondo che non risponde): impilati in basso al centro. */
.mappa-avvisi {
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    max-width: calc(100% - 2rem);
}

.mappa-avviso {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0.85rem;
    background-color: var(--avviso-fondo);
    border: 1px solid var(--avviso-bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    color: var(--avviso-testo);
}

/* «Sei a 120 m da …»: un'informazione, non un problema. */
.mappa-avviso.posizione {
    background-color: var(--bianco);
    border-color: var(--bordo);
    color: var(--viola);
    font-weight: 600;
}

.mappa-avviso button {
    border: none;
    background: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
}

/* Stato del caricamento al centro della mappa: "Carico i vigneti…" oppure errore con "Riprova". */
.mappa-stato {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    max-width: calc(100% - 2rem);
    padding: 0.8rem 1.1rem;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    text-align: center;
}

.mappa-stato.errore {
    background-color: var(--avviso-fondo);
    border: 1px solid var(--avviso-bordo);
    color: var(--avviso-testo);
}

.mappa-stato p {
    margin: 0;
}

/* Errore di caricamento fuori dalla mappa (elenco aziende). */
.messaggio-errore {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border: 1px solid var(--avviso-bordo);
    border-radius: var(--raggio);
    background-color: var(--avviso-fondo);
    color: var(--avviso-testo);
}

.messaggio-errore p {
    margin: 0;
}

/* "Riprova" dentro una nota: un collegamento, non un pulsante pieno. */
button.riprova {
    padding: 0;
    border: none;
    background: none;
    color: var(--verde-scuro);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Controlli MapLibre allineati allo stile. */
.maplibregl-ctrl-group {
    border-radius: 4px;
    box-shadow: var(--ombra) !important;
}

.maplibregl-ctrl-attrib {
    font-family: var(--font-testo);
}

/* ---------- Schermi stretti (tablet in verticale, smartphone) ---------- */

/* Elementi solo del telefono / solo del desktop: vincono su ogni display dei componenti
   (.solo-desktop è nascosto nel blocco del telefono, in fondo). */
@media (min-width: 801px) {
    .solo-mobile {
        display: none !important;
    }
}

/* ---------- Accesso (login) ---------- */

.scheda-accesso {
    max-width: 380px;
    margin: 0 auto;
    padding: 1.6rem 1.5rem;
    box-shadow: var(--ombra);
}

.scheda-accesso form {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.2rem;
}

.scheda-accesso label {
    display: grid;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--viola);
}

.scheda-accesso input {
    font: inherit;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--notte);
}

.scheda-accesso input:focus {
    outline: 2px solid var(--verde);
    outline-offset: 1px;
}

.errore-accesso {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--avviso-bordo);
    border-radius: var(--raggio);
    background-color: var(--avviso-fondo);
    color: var(--avviso-testo);
}

.pulsante-principale {
    padding: 0.65rem 1rem;
    border: none;
    border-radius: var(--raggio);
    background-color: var(--verde);
    color: var(--notte);
    font-family: var(--font-titoli);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
}

.pulsante-principale:hover {
    background-color: var(--verde-scuro);
    color: var(--bianco);
}

.top-row nav {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.top-row form.esci {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-size: 0.85rem;
}

.top-row form.esci button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: var(--bianco);
    color: var(--ardesia);
    font: inherit;
    cursor: pointer;
}

.top-row form.esci button:hover {
    border-color: var(--verde);
    color: var(--viola);
}

/* ---------- Telefono e tablet in verticale (≤ 800px: stesso valore in mappa.js) ----------
   Comandi alti almeno 44px (--tocco), campi a 16px (iOS non ingrandisce la pagina), niente sotto la
   tacca o la barra di sistema (safe-area, con viewport-fit=cover in App.razor), pannelli dal basso
   con maniglia che seguono il dito (data-foglio, vedi collegaFogli in mappa.js). */
/* ---------- Avvisi (task #70) ---------- */
/* Pagina iniziale: una riga con il numero di avvisi, link alla pagina Avvisi. */
.avvisi-riassunto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 1rem;
    padding: 0.7rem 1rem;
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-left: 4px solid var(--verde);
    border-radius: var(--raggio);
    color: var(--viola);
    font-weight: 600;
    text-decoration: none;
}

.avvisi-riassunto.con-avvisi {
    border-left-color: #d0342c;
}

.avvisi-riassunto .apri {
    color: var(--ardesia);
    font-weight: 400;
}

.avvisi-riassunto:hover {
    border-color: var(--verde);
}

.avvisi-azienda {
    margin: 1.5rem 0 0;
}

.avvisi-azienda h2 {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.avvisi-azienda h2 a {
    color: var(--viola);
    overflow-wrap: anywhere;
}

.avvisi-azienda h2 .conteggio {
    min-width: 1.6em;
    padding: 0 0.4em;
    border-radius: 999px;
    background-color: var(--fondo);
    color: var(--ardesia);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.avvisi-azienda ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avviso {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    min-height: var(--tocco, auto);
    padding: 0.6rem 0.8rem;
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    color: var(--ardesia);
    text-decoration: none;
}

.avviso:hover {
    border-color: var(--verde);
}

.avviso-nome {
    font-weight: 600;
    color: var(--viola);
    overflow-wrap: anywhere;
}

.avviso-valore {
    font-size: 0.92rem;
}

/* Etichetta della regola: un colore per regola, nell'ordine della configurazione. */
.avviso-regola {
    align-self: flex-start;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    background-color: #fde2e1;
    color: #8f1d17;
}

.avviso-regola.regola-1 {
    background-color: #fff1d6;
    color: #7a4b00;
}

.avviso-regola.regola-2 {
    background-color: #e6ebef;
    color: var(--ardesia);
}

.avviso-regola.regola-3 {
    background-color: #e3ecf8;
    color: #1f4a7a;
}

.avviso-regola.regola-4 {
    background-color: #ece6f5;
    color: var(--viola);
}

/* Pagina Avvisi (task #82): aziende chiuse, una riga con nome, conteggi per regola e «apri». */
.avvisi-azienda {
    padding: 0.6rem 0.8rem;
    background-color: var(--bianco);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
}

.avvisi-azienda + .avvisi-azienda {
    margin-top: 0.5rem;
}

.avvisi-azienda-testa {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.8rem;
    align-items: center;
}

.avvisi-azienda-testa h2 {
    margin: 0;
}

.avvisi-conteggi {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.avvisi-azienda.aperta ul {
    margin-top: 0.7rem;
}

.avvisi-azienda.aperta .avviso {
    background-color: var(--fondo);
}

.avvisi-apri {
    min-height: var(--tocco, auto);
    padding: 0.25rem 0.9rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background-color: var(--bianco);
    color: var(--verde-scuro);
    font-weight: 600;
    cursor: pointer;
}

.avvisi-apri:hover {
    border-color: var(--verde);
}

.avvisi-tutti {
    margin-top: 0.6rem;
}

/* ---------- Guida (task #88): HTML da docs/mappe/guida.md ---------- */

.guida {
    max-width: 46rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Il primo titolo del Markdown fa da titolo della pagina, come .titolo-pagina. */
.guida h1 {
    margin: 0 0 2rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.guida h1::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin-top: 0.8rem;
    background-color: var(--verde);
}

.guida h2 {
    margin: 2.2rem 0 0.8rem;
    font-size: 1.15rem;
}

.guida ol,
.guida ul {
    margin: 0;
    padding-left: 1.6rem;
}

.guida li {
    margin-bottom: 0.7rem;
}

.guida li::marker {
    color: var(--verde-scuro);
    font-weight: 700;
}

.guida strong {
    color: var(--viola);
}

/* Gli indirizzi lunghi vanno a capo invece di allargare la pagina sul telefono. */
.guida a {
    overflow-wrap: anywhere;
}

@media (max-width: 800px) {
    .guida {
        font-size: 1rem;
    }

    .guida h1 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }

    .guida ol,
    .guida ul {
        padding-left: 1.3rem;
    }
}

/* In stampa: solo il marchio e il testo, nero su bianco. */
@media print {
    .top-row nav,
    .menu-intestazione {
        display: none !important;
    }

    html,
    body {
        background: #fff;
    }

    .contenitore {
        padding: 0;
    }

    .guida {
        max-width: none;
        color: #000;
    }

    .guida li {
        break-inside: avoid;
    }
}

/* Il titolo riceve il fuoco a ogni cambio di pagina (FocusOnNavigate, per i lettori di schermo):
   niente riquadro verde, non è un comando. */
h1:focus,
h1:focus-visible {
    outline: none;
}

@media (max-width: 800px) {
    :root {
        --altezza-header: calc(52px + env(safe-area-inset-top, 0px));
        --margine-basso: env(safe-area-inset-bottom, 0px);
        --tocco: 44px;
    }

    .solo-desktop {
        display: none !important;
    }

    /* Intestazione: logo piccolo, titolo corto che non si tronca, menu con Aziende ed Esci. */
    .top-row {
        gap: 0.5rem;
        padding: env(safe-area-inset-top, 0px) max(0.75rem, env(safe-area-inset-right, 0px)) 0 max(0.75rem, env(safe-area-inset-left, 0px));
        border-bottom-width: 2px;
    }

    .brand {
        gap: 0.55rem;
    }

    .brand-marchio {
        padding-left: 0.4rem;
        border-left-width: 3px;
        font-size: 0.56rem;
        letter-spacing: 0.18em;
    }

    .brand-testo {
        padding-left: 0.55rem;
    }

    .brand-sottotitolo {
        display: none;
    }

    .brand-titolo {
        font-size: 0.9rem;
        overflow: visible;
    }

    .menu-intestazione {
        position: relative;
        flex-shrink: 0;
    }

    .menu-intestazione > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--tocco);
        height: var(--tocco);
        list-style: none;
        border: 1px solid var(--bordo);
        border-radius: var(--raggio);
        background-color: var(--bianco);
        color: var(--viola);
        font-size: 1.25rem;
        cursor: pointer;
        user-select: none;
    }

    .menu-intestazione > summary::-webkit-details-marker {
        display: none;
    }

    .menu-intestazione[open] > summary {
        border-color: var(--verde);
    }

    .menu-intestazione .menu-voci {
        z-index: 20;
        left: auto;
        right: 0;
        width: min(260px, calc(100vw - 1.5rem));
    }

    .menu-intestazione form {
        margin: 0;
    }

    .menu-intestazione .menu-titolo {
        overflow-wrap: anywhere;
        font-weight: 400;
    }

    .menu-voci a,
    .menu-voci button,
    .mappa-controlli .menu-voci button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--tocco);
        padding: 0 0.7rem;
        border: none;
        border-radius: 4px;
        background: none;
        font-family: var(--font-testo);
        font-size: 1rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        text-align: left;
        text-decoration: none;
        color: var(--notte);
        cursor: pointer;
    }

    .menu-voci a.active {
        font-weight: 600;
        color: var(--verde-scuro);
    }

    /* Campi a 16px: sotto, iOS ingrandisce la pagina quando li tocchi. */
    input,
    select,
    textarea {
        font-size: 16px;
    }

    select,
    .ricerca input {
        min-height: var(--tocco);
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* La mappa occupa tutto lo schermo sotto l'header; dvh segue la barra degli indirizzi mobile.
       La pagina della mappa non scorre mai: niente scorrimento di html/body e la mappa «tagliata»
       (clip: nemmeno uno scroll dato da programma può spostarla). */
    html:has(.mappa-layout),
    body:has(.mappa-layout) {
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    .mappa-layout {
        --altezza-mappa: calc(100vh - var(--altezza-header));
        --altezza-mappa: calc(100dvh - var(--altezza-header));
        position: relative;
        height: var(--altezza-mappa);
        overflow: hidden;
        overflow: clip;
    }

    .mappa-area {
        overflow: clip;
    }

    .mappa-area {
        flex: 1;
    }

    /* Scheda e pannelli tornano posizionati sulla mappa (vedi sotto), senza la colonna di destra. */
    .mappa-destra {
        display: contents;
    }

    /* --- Pannelli dal basso: Filtri (la barra laterale), Mappe tematiche, scheda del vigneto ---
       Seguono il dito trascinati dalla maniglia (.trascinato, da mappa.js), poi tornano a posto o si
       chiudono con una transizione breve. Il contenuto scorre senza trascinare la pagina. */
    /* fixed: ancorati al fondo dello schermo qualunque cosa succeda alla pagina. */
    .vigneti-list,
    .foglio,
    .info-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0 0.9rem calc(1rem + var(--margine-basso));
        border: none;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(33, 35, 49, 0.22);
        overflow-y: auto;
        overscroll-behavior: contain;
        transition: transform 0.25s ease;
    }

    .trascinato {
        transition: none !important;
    }

    [data-maniglia] {
        touch-action: none;
        user-select: none;
        cursor: grab;
    }

    /* Filtri e Mappe tematiche: fuori dallo schermo quando chiusi. Mappe tematiche resta più basso,
       così sopra la mappa si continua a vedere, pizzicare e ruotare. */
    .vigneti-list,
    .foglio {
        z-index: 5;
        max-height: calc(var(--altezza-mappa) * 0.82);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .foglio {
        max-height: calc(var(--altezza-mappa) * 0.62);
        background-color: var(--bianco);
    }

    .vigneti-list.aperto,
    .foglio.aperto {
        transform: none;
        visibility: visible;
        transition: transform 0.25s ease;
    }

    /* Intestazione con la maniglia: resta in cima mentre il contenuto scorre. */
    .pannello-intestazione,
    .foglio-intestazione {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        margin: 0 -0.9rem;
        padding: 1rem 0.9rem 0.4rem;
        background-color: inherit;
        border-bottom: 1px solid var(--bordo);
    }

    .pannello-intestazione::before,
    .foglio-intestazione::before,
    .info-maniglia::after {
        content: "";
        position: absolute;
        top: 7px;
        left: 50%;
        width: 40px;
        height: 5px;
        margin-left: -20px;
        border-radius: 3px;
        background-color: var(--ardesia-chiaro);
    }

    .pannello-intestazione .titolo-sezione,
    .foglio-intestazione .titolo-sezione {
        margin: 0;
    }

    .chiudi {
        width: var(--tocco);
        height: var(--tocco);
        font-size: 1.3rem;
    }

    /* Filtri: ricerca in cima, poi l'elenco dei vigneti e i filtri. Scorre il pannello intero. */
    .vigneti-list {
        gap: 0.6rem;
    }

    .elenco-vigneti,
    .riquadro {
        flex: none;
        min-height: 0;
        overflow: visible;
    }

    .elenco-vigneti > ul {
        flex: none;
        overflow: visible;
    }

    /* Sul telefono i filtri stanno sopra l'elenco, che può essere lungo. */
    .vigneti-list > .filtri {
        order: 1;
    }

    .vigneti-list > .elenco-vigneti {
        order: 2;
    }

    .vigneti-list li button,
    .riquadro .apri-chiudi,
    .risultati-ricerca button {
        min-height: var(--tocco);
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* Mappe tematiche: parametro e anni, poi la legenda (con l'ora dei dati). */
    .foglio-corpo {
        padding-top: 0.75rem;
    }

    .foglio .mappa-legenda {
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0.3rem 0 0;
        padding: 0.75rem 0 0;
        overflow: visible;
        background: none;
        border: none;
        border-top: 1px solid var(--bordo);
        border-radius: 0;
        box-shadow: none;
        font-size: 0.95rem;
    }

    .mappa-legenda li button,
    .vigneti-variazione button,
    .vigneti-variazione summary {
        min-height: var(--tocco);
    }

    .vigneti-variazione summary {
        display: flex;
        align-items: center;
    }

    .vigneti-variazione ol {
        max-height: none;
    }

    .pillola,
    .pillola.confronto button,
    .pillola.confronto .togli {
        min-height: var(--tocco);
    }

    .pillola.confronto .togli {
        min-width: var(--tocco);
    }

    .barra-anni button {
        min-width: 3.4rem;
        min-height: var(--tocco);
    }

    /* Linguetta in basso a sinistra che apre Mappe tematiche: sopra la riga dei crediti, mai sopra. */
    .linguetta-tema {
        position: absolute;
        z-index: 3;
        left: 10px;
        bottom: calc(38px + var(--margine-basso));
        display: flex;
        align-items: center;
        gap: 0.6rem;
        max-width: calc(100% - 20px);
        min-height: var(--tocco);
        padding: 0 0.9rem;
        border: none;
        border-left: 4px solid var(--verde);
        border-radius: var(--raggio);
        background-color: rgba(255, 255, 255, 0.97);
        box-shadow: var(--ombra);
        font-family: var(--font-titoli);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--viola);
        cursor: pointer;
    }

    .linguetta-tema .testo {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .linguetta-tema .freccia {
        color: var(--ardesia);
    }

    /* Scheda del vigneto: ridotta (nome, vitigno, valore del tematismo) o espansa (tutto). */
    .info-panel {
        z-index: 4;
        max-height: calc(var(--altezza-mappa) * 0.45);
        background-color: var(--bianco);
        animation: sale-dal-basso 0.25s ease;
    }

    .info-panel[data-espansa="true"] {
        max-height: calc(var(--altezza-mappa) - 8px);
    }

    .info-panel:not([data-espansa="true"]) > :not(.info-maniglia, .info-intestazione, .info-riassunto) {
        display: none;
    }

    .info-maniglia {
        position: sticky;
        top: 0;
        z-index: 1;
        display: block;
        width: calc(100% + 1.8rem);
        height: 24px;
        margin: 0 -0.9rem;
        padding: 0;
        border: none;
        background-color: var(--bianco);
    }

    .info-intestazione {
        align-items: center;
        margin-bottom: 0.25rem;
    }

    .info-riassunto {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        margin-bottom: 0.5rem;
    }

    .info-riassunto p {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem 0.8rem;
        min-width: 0;
        margin: 0;
        font-size: 0.95rem;
        color: var(--notte);
    }

    .info-espandi {
        flex-shrink: 0;
        min-height: var(--tocco);
        padding: 0 0.9rem;
        border: 1px solid var(--bordo);
        border-radius: 999px;
        background-color: var(--bianco);
        color: var(--viola);
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
    }

    .info-panel[data-espansa="true"] .se-ridotta,
    .info-panel:not([data-espansa="true"]) .se-espansa {
        display: none;
    }

    .info-azioni .pulsante {
        display: inline-flex;
        align-items: center;
        min-height: var(--tocco);
    }

    /* --- Pulsanti in alto: una riga sola (Filtri, Mappa/Satellite, «⋯») --- */
    .mappa-controlli {
        top: 8px;
        left: 8px;
        right: 8px;
        flex-wrap: nowrap;
        gap: 5px;
        max-width: none;
    }

    /* I selettori basemap/imagery sono solo per lo sviluppo: su mobile non c'è spazio. */
    .mappa-controlli > select {
        display: none;
    }

    .mappa-controlli button,
    .menu-azioni > summary {
        min-height: var(--tocco);
    }

    .apri-pannello {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.3rem;
        padding: 0 0.7rem;
        letter-spacing: 0.05em;
        background-color: var(--viola) !important;
        border-color: var(--viola) !important;
        color: var(--bianco) !important;
    }

    .apri-pannello .contatore {
        padding: 0 0.45rem;
        border-radius: 999px;
        background-color: var(--verde);
        color: var(--notte);
        font-family: var(--font-testo);
        letter-spacing: 0;
    }

    /* Mappa / Satellite: due pillole piccole nello stesso guscio. */
    .tipo-mappa {
        flex-shrink: 0;
        border-radius: 999px;
        background-color: var(--bianco);
    }

    .tipo-mappa button,
    .tipo-mappa button:first-child,
    .tipo-mappa button:last-child {
        padding: 0 0.5rem;
        border: none;
        border-radius: 999px;
        background: none;
        box-shadow: none;
        font-size: 0.68rem;
        letter-spacing: 0.05em;
    }

    .tipo-mappa button.attivo {
        background-color: var(--verde);
    }

    /* Telefoni stretti: con «Dove sono» la riga non ci sta, resta ☰ col numero. */
    @media (max-width: 380px) {
        .apri-pannello .etichetta {
            display: none;
        }
    }

    .mappa-controlli button.dove-sono {
        flex-shrink: 0;
        justify-content: center;
        min-width: var(--tocco);
        padding: 0;
    }

    .menu-azioni {
        margin-left: auto;
    }

    .menu-azioni > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: var(--tocco);
        padding: 0 0.6rem;
        font-size: 1.3rem;
        line-height: 1;
    }

    .menu-voci {
        left: auto;
        right: 0;
        width: min(270px, calc(100vw - 16px));
    }

    .mappa-controlli .menu-voci button.attivo {
        background-color: var(--verde-tenue);
    }

    /* Controlli di MapLibre: sotto la riga dei pulsanti. Lo zoom si fa con le dita; resta la bussola
       (riporta il nord dopo una rotazione), grande come un dito. Crediti sopra la barra di sistema. */
    .maplibregl-ctrl-top-right {
        top: 52px;
    }

    .maplibregl-ctrl-group .maplibregl-ctrl-zoom-in,
    .maplibregl-ctrl-group .maplibregl-ctrl-zoom-out {
        display: none;
    }

    .maplibregl-ctrl-group button.maplibregl-ctrl-compass {
        width: var(--tocco);
        height: var(--tocco);
    }

    .maplibregl-ctrl-bottom-right,
    .maplibregl-ctrl-bottom-left {
        bottom: var(--margine-basso);
    }

    .mappa-avvisi {
        bottom: calc(92px + var(--margine-basso));
        width: calc(100% - 20px);
    }

    .mappa-avviso {
        width: 100%;
    }

    .mappa-avviso button {
        min-width: var(--tocco);
        min-height: var(--tocco);
    }

    .contenitore {
        padding: 1.5rem 1rem 2rem;
    }

    .titolo-pagina {
        font-size: 1.3rem;
    }

    .griglia-aziende {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Linguette su una riga sola, scorrevoli col dito; tasti alti almeno quanto un dito. */
    .linguette-gruppi {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -1rem;
        padding-right: 1rem;
        scrollbar-width: none;
    }

    .linguetta {
        flex: none;
        min-height: var(--tocco);
    }

    .aziende-ricerca input,
    .aziende-ordine select {
        min-height: var(--tocco);
    }
}

@keyframes sale-dal-basso {
    from {
        transform: translateY(100%);
    }
}

/* Pannello «Meteo» della mappa (task #67): pioggia dei 7 giorni a barrette, temperature di ieri,
   probabilità di infezione di oggi. Barra laterale sul computer, pannello «Mappe tematiche» sul telefono. */
.meteo-azienda p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.meteo-azienda .meteo-totale strong {
    color: var(--notte);
}

.meteo-barre {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin: 0.4rem 0;
    padding: 0;
    list-style: none;
}

.meteo-barre li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.72rem;
    color: var(--ardesia);
}

.meteo-barre .colonna {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 3rem;
    background-color: var(--fondo);
    border-radius: 3px;
}

.meteo-barre .barra {
    display: block;
    width: 100%;
    background-color: #4a8fc7;
    border-radius: 3px 3px 0 0;
}

.meteo-barre .senza-dato .colonna {
    background: repeating-linear-gradient(135deg, var(--fondo), var(--fondo) 4px, var(--bianco) 4px, var(--bianco) 8px);
}

.meteo-barre .giorno {
    white-space: nowrap;
}

.meteo-infezioni {
    margin: 0.4rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.meteo-infezioni li {
    margin: 0.15rem 0;
    padding-left: 0.5rem;
    border-left: 3px solid var(--bordo);
}

.meteo-infezioni li.alta {
    border-left-color: var(--avviso-bordo);
    color: var(--avviso-testo);
}

.foglio-tema .meteo-azienda {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bordo);
}

/* ---------- Layout di stampa (task #90) ----------
   Il foglio ha le misure vere (mm): quello che si vede è quello che si stampa. Le altezze dei blocchi
   arrivano da FoglioStampa (C#); qui solo l'aspetto. stampa.js ridisegna il foglio nel PNG leggendo
   gli stili calcolati: niente ombre o sfumature dentro il foglio, che nel PNG non ci sarebbero. */

.stampa-pagina {
    display: flex;
    align-items: flex-start;
    min-height: calc(100vh - var(--altezza-header));
}

.stampa-controlli {
    position: sticky;
    top: var(--altezza-header);
    flex: 0 0 300px;
    box-sizing: border-box;
    max-height: calc(100vh - var(--altezza-header));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.2rem 1.2rem 2rem;
    background-color: var(--bianco);
    border-right: 1px solid var(--bordo);
}

.stampa-controlli h1 {
    font-size: 1.15rem;
}

.stampa-controlli .torna {
    font-size: 0.9rem;
    text-decoration: none;
}

.stampa-controlli label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--viola);
}

.stampa-controlli label.interruttore {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.stampa-controlli label .nota {
    font-weight: 400;
}

.stampa-controlli input[type="text"],
.stampa-controlli select {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    background-color: var(--bianco);
    font-weight: 400;
}

.stampa-controlli input[type="range"] {
    accent-color: var(--verde-scuro);
}

.stampa-gruppo {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stampa-gruppo > .titolo {
    font-weight: 600;
    color: var(--viola);
}

.pulsanti-scelta {
    display: flex;
}

.pulsanti-scelta button,
.stampa-controlli button {
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bordo);
    background-color: var(--bianco);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    color: var(--viola);
}

.pulsanti-scelta button {
    flex: 1;
    border-radius: 0;
}

.pulsanti-scelta button:first-child {
    border-radius: 4px 0 0 4px;
}

.pulsanti-scelta button:last-child {
    border-radius: 0 4px 4px 0;
}

.pulsanti-scelta button + button {
    border-left: none;
}

.stampa-controlli button.attivo {
    background-color: var(--verde);
    border-color: var(--verde);
    color: var(--notte);
}

.stampa-controlli button:hover:not(:disabled) {
    border-color: var(--verde);
}

.stampa-controlli button:disabled {
    opacity: 0.5;
    cursor: default;
}

.stampa-controlli button.leggero {
    font-weight: 400;
    color: var(--ardesia);
}

.stampa-elenco-riquadri {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stampa-elenco-riquadri li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--bordo);
    font-size: 0.9rem;
}

.stampa-elenco-riquadri li.nascosto {
    opacity: 0.55;
}

.stampa-elenco-riquadri .lettera {
    min-width: 1.6rem;
    font-family: var(--font-titoli);
    font-weight: 700;
    color: var(--viola);
}

.stampa-elenco-riquadri .conteggio {
    flex: 1;
}

.stampa-elenco-riquadri select,
.stampa-elenco-riquadri button {
    padding: 0.2rem 0.4rem;
    font-size: 0.85rem;
}

.stampa-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stampa-azioni button:not(.leggero) {
    background-color: var(--verde);
    border-color: var(--verde);
    color: var(--notte);
}

.avviso-leggero {
    color: var(--avviso-testo);
}

.stampa-errore {
    margin: 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--avviso-bordo);
    border-radius: 4px;
    background-color: var(--avviso-fondo);
    color: var(--avviso-testo);
}

.stampa-anteprima {
    flex: 1;
    min-width: 0;
    overflow: auto;
    padding: 1.5rem;
}

.stampa-fogli {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stampa-foglio {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
    background-color: #ffffff;
    box-shadow: var(--ombra);
    color: var(--notte);
    font-family: var(--font-testo);
    font-size: 7.5pt;
    line-height: 1.35;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.stampa-intestazione {
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 5mm;
    border-bottom: 0.6mm solid var(--verde);
}

.stampa-marchio {
    display: grid;
    flex-shrink: 0;
    padding-left: 2mm;
    border-left: 1.2mm solid var(--verde);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 7.5pt;
    line-height: 1.1;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--notte);
}

.stampa-titoli {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.stampa-titoli h2 {
    font-size: 14pt;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
}

.stampa-titoli p {
    margin: 0.5mm 0 0;
    font-size: 9pt;
    color: var(--ardesia);
    white-space: nowrap;
    overflow: hidden;
}

.stampa-data {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    font-size: 8pt;
    color: var(--ardesia);
}

/* Posizione e misure di ogni riquadro in mm da RiquadriStampa.Disponi (task #91). */
.stampa-riquadri {
    flex-shrink: 0;
    position: relative;
}

.stampa-riquadro {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border: 0.3mm solid var(--ardesia-chiaro);
    background-color: #eef1f2;
}

.riquadro-mappa {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.riquadro-tela,
.riquadro-immagine {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Linee di richiamo dei numeri spostati (stampa.js, sistemaNumeri): sotto i numeri. */
.riquadro-richiami {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--notte);
    pointer-events: none;
}

.riquadro-numero {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 3.2mm;
    padding: 0 0.6mm;
    box-sizing: border-box;
    border: 0.2mm solid var(--notte);
    border-radius: 1.6mm;
    background-color: #ffffff;
    font-size: 6pt;
    font-weight: 700;
    line-height: 3mm;
    text-align: center;
    color: var(--notte);
}

.riquadro-scala {
    position: absolute;
    left: 2mm;
    bottom: 2mm;
    width: 100%;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

.riquadro-scala .linea {
    height: 1.2mm;
    box-sizing: border-box;
    border: 0.3mm solid var(--notte);
    border-top: none;
    background-color: rgba(255, 255, 255, 0.8);
}

.riquadro-scala .testo {
    align-self: flex-start;
    padding: 0 0.8mm;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 6.5pt;
    font-weight: 600;
}

.riquadro-lettera {
    position: absolute;
    top: 1.5mm;
    left: 1.5mm;
    padding: 0.3mm 1.6mm;
    background-color: var(--viola);
    color: #ffffff;
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 8pt;
}

.riquadro-nord {
    position: absolute;
    top: 1.5mm;
    right: 1.5mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5mm;
    padding: 0.5mm 0;
    background-color: rgba(255, 255, 255, 0.85);
    border-radius: 1mm;
    color: var(--notte);
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 6.5pt;
    line-height: 1;
}

.riquadro-nord svg {
    width: 2.6mm;
    height: 3.5mm;
}

.riquadro-errore {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ardesia);
}

.stampa-fascia {
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    gap: 4mm;
    overflow: hidden;
}

.stampa-legenda,
.stampa-indice {
    min-height: 0;
    overflow: hidden;
}

.stampa-legenda {
    flex-shrink: 0;
}

.stampa-indice {
    flex: 1;
    min-width: 0;
}

.stampa-indice.seguito {
    flex: none;
}

.indice-colonne {
    display: grid;
    column-gap: 4mm;
}

.stampa-fascia h3 {
    font-size: 8pt;
    line-height: 1.35;
    margin-bottom: 0.8mm;
}

.stampa-legenda ul,
.stampa-indice ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stampa-legenda li,
.stampa-indice li {
    display: flex;
    align-items: center;
    gap: 1.2mm;
    height: 3.3mm; /* FoglioStampa.AltezzaRiga */
    white-space: nowrap;
    break-inside: avoid;
}

/* L'indice è secondario (task #91): carattere piccolo, colonne compatte. */
.stampa-indice {
    font-size: 7pt;
}

/* Senza indice accanto: voci in fila sotto i riquadri, a colonne. */
.stampa-legenda.compatta {
    flex: 1;
    min-width: 0;
}

.stampa-legenda.compatta ul {
    display: grid;
    column-gap: 3mm;
}

.stampa-legenda li.vuota {
    color: var(--ardesia-chiaro);
}

.stampa-legenda .campione,
.stampa-indice .campione {
    flex-shrink: 0;
    width: 2.6mm;
    height: 2.6mm;
    box-sizing: border-box;
    border: 0.2mm solid rgba(0, 0, 0, 0.2);
}

.stampa-legenda .campione.nd {
    background-color: rgba(158, 158, 158, 0.35);
}

.stampa-legenda .campione.fp {
    border-style: dashed;
    border-color: rgba(0, 0, 0, 0.45);
}

.stampa-indice .campione.vuoto {
    border-color: transparent;
}

.stampa-legenda li.vuota .campione {
    opacity: 0.3;
}

.stampa-legenda .etichetta,
.stampa-indice .nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.stampa-legenda .conteggio {
    color: var(--ardesia);
}

.stampa-indice .numero {
    flex-shrink: 0;
    min-width: 4mm;
    font-weight: 700;
    text-align: right;
}

.stampa-indice .vigna {
    color: var(--ardesia);
}

/* Larghezza fissa e allineata a destra: le superfici stanno in colonna. */
.stampa-indice .superficie {
    flex-shrink: 0;
    width: 11mm;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ardesia);
}

.stampa-indice .superficie.solo-punto {
    font-style: italic;
}

/* Il testo arriva già accorciato (TestiStampa.Accorcia): qui non si taglia a metà. */
.stampa-indice .valore {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.8mm;
    width: 23mm;
    overflow: hidden;
}

.stampa-piede {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4mm;
    font-size: 6.5pt;
    color: var(--ardesia);
    white-space: nowrap;
    overflow: hidden;
}

/* ---------- Layout di stampa manuale (task #92) ----------
   Mappa d'insieme sopra il foglio (stampa.js, apriInsieme) con i riquadri dell'utente come rettangoli
   HTML: si spostano dall'etichetta e si ridimensionano dalle maniglie; dentro si naviga la mappa. */

.stampa-insieme {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
}

.stampa-insieme > .nota {
    margin: 0;
}

.stampa-insieme-mappa {
    position: relative;
    height: max(360px, 62vh);
    border: 1px solid var(--bordo);
    border-radius: 4px;
}

.insieme-livello {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

.insieme-riquadro,
.insieme-nuovo {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--viola);
    background-color: rgba(60, 57, 80, 0.06);
}

.insieme-nuovo {
    border-style: dashed;
}

.insieme-riquadro.in-movimento {
    border-color: var(--verde-scuro);
}

.insieme-etichetta {
    position: absolute;
    left: -2px;
    bottom: 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.1rem 0.2rem 0.1rem 0.45rem;
    background-color: var(--viola);
    color: #ffffff;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: move;
    pointer-events: auto;
    touch-action: none;
    user-select: none;
}

.insieme-etichetta strong {
    font-family: var(--font-titoli);
}

.insieme-elimina {
    padding: 0 0.35rem;
    border: none;
    background: none;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
}

.insieme-elimina:hover {
    color: var(--verde);
}

.insieme-maniglia {
    position: absolute;
    pointer-events: auto;
    touch-action: none;
}

.insieme-maniglia.n, .insieme-maniglia.s { left: 6px; right: 6px; height: 8px; cursor: ns-resize; }
.insieme-maniglia.e, .insieme-maniglia.w { top: 6px; bottom: 6px; width: 8px; cursor: ew-resize; }
.insieme-maniglia.n { top: -5px; }
.insieme-maniglia.s { bottom: -5px; }
.insieme-maniglia.e { right: -5px; }
.insieme-maniglia.w { left: -5px; }

.insieme-maniglia.ne, .insieme-maniglia.nw, .insieme-maniglia.se, .insieme-maniglia.sw {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid var(--viola);
    background-color: #ffffff;
}

.insieme-maniglia.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.insieme-maniglia.se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.insieme-maniglia.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.insieme-maniglia.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }

/* Durante il disegno uno strato prende il trascinamento (la mappa non si sposta). */
.insieme-cattura {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    pointer-events: auto;
    touch-action: none;
}

.stampa-insieme.in-disegno .stampa-insieme-mappa {
    border-color: var(--verde-scuro);
}

.stampa-riquadro[draggable="true"] {
    cursor: grab;
}

.stampa-elenco-riquadri.manuale li {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Titoletto di una pagina nell'elenco dei riquadri (task #94). */
.stampa-elenco-riquadri.manuale li.pagina {
    justify-content: space-between;
    padding-top: 0.5rem;
    border-bottom-color: var(--ardesia);
    font-family: var(--font-titoli);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ardesia);
    text-transform: uppercase;
}

/* «Pagina 2 di 3» sopra ogni foglio, solo a video: fuori dal foglio, non va in stampa né nel PNG. */
.stampa-etichetta-pagina {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: -1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ardesia);
}

.stampa-etichetta-pagina button {
    padding: 0 0.45rem;
    line-height: 1.4;
}

.stampa-pagina-vuota {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 1rem;
    border: 2px dashed var(--bordo);
    color: var(--ardesia);
    font-size: 0.9rem;
    text-align: center;
}

.stampa-elenco-riquadri.manuale button.lettera {
    min-width: 1.8rem;
    padding: 0.15rem 0.3rem;
    font-family: var(--font-titoli);
    font-weight: 700;
}

.stampa-controlli label.pulsante-file {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--bordo);
    border-radius: 4px;
    font-weight: 400;
    color: var(--ardesia);
    cursor: pointer;
}

.stampa-controlli label.pulsante-file:hover,
.stampa-controlli label.pulsante-file:focus-within {
    border-color: var(--verde);
}

/* Telefono: la barra sopra il foglio, che si scorre di lato (l'uso principale è il computer). */
@media (max-width: 800px) {
    .stampa-pagina {
        flex-direction: column;
        align-items: stretch;
    }

    .stampa-controlli {
        position: static;
        flex-basis: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--bordo);
    }

    .stampa-anteprima {
        padding: 0.75rem;
    }
}

@media print {
    body:has(.stampa-pagina) {
        background-color: #ffffff;
    }

    body:has(.stampa-pagina) .top-row,
    .stampa-controlli,
    .stampa-insieme,
    .stampa-etichetta-pagina,
    .stampa-pagina-vuota {
        display: none !important;
    }

    body:has(.stampa-pagina) .page {
        min-height: 0;
    }

    .stampa-pagina {
        display: block;
        min-height: 0;
    }

    .stampa-anteprima {
        padding: 0;
        overflow: visible;
    }

    .stampa-fogli {
        gap: 0;
    }

    /* Un foglio per pagina, nel formato scelto (@page di stampa.js). */
    .stampa-foglio {
        margin: 0;
        box-shadow: none;
        break-inside: avoid;
        break-after: page;
    }

    .stampa-foglio:last-child {
        break-after: auto;
    }
}

/* ---------- Filari (task #95): riga ed editor nella scheda, «×» sulla mappa ---------- */
.filari-vigneto .istruzione {
    margin: 0.4rem 0;
    padding: 0.5rem 0.6rem;
    border-left: 3px solid #ff7a00;
    background: var(--crema);
}

.filari-vigneto .conteggio-filari {
    margin: 0.4rem 0;
}

.filari-vigneto .cursore {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.4rem 0;
}

.filari-vigneto .cursore input[type="range"] {
    width: 100%;
    min-height: 32px;
    accent-color: #ff7a00;
}

.filari-vigneto .note-filari input {
    display: block;
    width: 100%;
    margin-top: 0.2rem;
}

.filari-vigneto .info-azioni {
    flex-wrap: wrap;
}

.filari-vigneto .avviso {
    color: var(--avviso-testo);
}

.storico-filari {
    list-style: none;
    margin: 0.4rem 0;
    padding: 0;
    font-size: 0.9rem;
}

.storico-filari li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.6rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--bordo);
}

.elimina-filare {
    width: 28px;
    height: 28px;
    border: 2px solid var(--bianco);
    border-radius: 50%;
    background: #c62828;
    color: var(--bianco);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--ombra);
}