/*
   Traduzione del disegno originale in MAUI (test\MauiApp1\MainPage.xaml, blocco commentato).
   Colori, corpi tipografici e proporzioni sono ripresi da lì; cambia solo il mezzo.
*/

@font-face { font-family: "Space"; src: url("font/SpaceGrotesk-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space"; src: url("font/SpaceGrotesk-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space"; src: url("font/SpaceGrotesk-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space"; src: url("font/SpaceGrotesk-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("font/Roboto-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("font/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Icone"; src: url("font/fontello.woff") format("woff"), url("font/fontello.ttf") format("truetype"); font-display: block; }

:root {
    /* Palette dell'originale: Gray900 di sfondo, Gray100 e Gray200 per i testi. */
    --sfondo: #212121;
    /* Gray700 era referenziato ma non esisteva nella palette: sta fra Gray600 e Gray900. */
    --pannello: #343434;
    --testo-1: #e1e1e1;
    --testo-2: #c8c8c8;
    --testo-3: #8f8f8f;
    --accento: #9b2743;
    --bordo: #3d3d3d;

    /* Oltre questa larghezza l'app si centra invece di stirarsi: è la misura per cui è
       disegnata, e su un monitor da 27 pollici una griglia larga quanto lo schermo sarebbe
       solo più vuota. */
    --larghezza-app: 520px;

    --sicura-alto: env(safe-area-inset-top, 0px);
    --sicura-basso: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--sfondo);
    color: var(--testo-1);
    font-family: "Roboto", system-ui, sans-serif;
    /* In cantina si tocca, non si seleziona: il testo selezionato per sbaglio è solo fastidio. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.ico { font-family: "Icone"; font-style: normal; font-weight: normal; line-height: 1; speak: none; }

/* ------------------------------------------------------------------ intestazione */

.intestazione {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: calc(var(--sicura-alto) + 12px) 16px 12px;
}

.intestazione__azione {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--testo-2);
    font-size: 20px;
}

.intestazione__titolo {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: var(--testo-2);
    margin: 0;
}

/* ------------------------------------------------------------------ scheda vino */

.scheda {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.scheda__nome {
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1.15;
    color: var(--testo-1);
    margin: 4px 20px 2px;
}

.scheda__produttore {
    font-family: "Space", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--testo-3);
    margin: 0 20px 10px;
}

/*
   Il corpo dell'originale: pannello stretto a sinistra, bottiglia larga a destra che
   scivola sotto al pannello. Il pannello sta sopra (z-index), l'immagine sotto.
*/
.scheda__corpo {
    position: relative;
    display: grid;
    /* Un po' più di respiro a sinistra: con 0.34fr "dal 2023 al 2032" e "Francia, Bordeaux"
       andavano a capo su quasi tutti i telefoni. */
    grid-template-columns: minmax(132px, 0.40fr) 0.60fr;
    align-items: stretch;
    margin-bottom: 8px;
}

.dati {
    position: relative;
    z-index: 2;
    min-width: 0;
    background: var(--pannello);
    /* L'angolo asimmetrico è la firma del disegno: CornerRadius="0,40,0,40". */
    border-radius: 0 40px 0 40px;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    padding: 14px 8px 14px 14px;
    gap: 10px;
}

.dati__voce { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dati__etichetta {
    font-family: "Space", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--testo-2);
}

.dati__valore {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--testo-1);
    min-width: 0;
}

.dati__valore .ico { font-size: 16px; color: var(--testo-2); flex: none; }
.dati__valore span:last-child { overflow-wrap: anywhere; }

/*
   Il disegno originale presupponeva una bottiglia scontornata, con lo sfondo trasparente,
   che sbordava sopra il pannello. Una foto vera è un rettangolo, quasi sempre chiaro: senza
   cornice sembra un buco nell'interfaccia, e il bordo dritto contro l'angolo tondo del
   pannello sembra un difetto di allineamento.
   Diventa quindi una lastra dichiarata, con lo stesso raggio del pannello ma rovesciato,
   così le due forme si leggono come una coppia invece che come una collisione.
*/
.bottiglia {
    position: relative;
    z-index: 1;

    /* Senza questo la lastra non scende sotto la larghezza naturale della foto: gli elementi
       di una griglia hanno min-width:auto, e per un'immagine "auto" vuol dire la sua
       dimensione intrinseca. Sotto i 390 px di schermo il riquadro usciva dallo schermo e
       la scheda si poteva scorrere lateralmente. */
    min-width: 0;

    margin-left: 10px;
    display: grid;
    place-items: center;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 40px 0 40px 0;
    background: var(--pannello);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
}

.bottiglia img {
    width: 100%;
    height: 100%;

    /* 'cover' e non 'contain': le foto di bottiglia sono verticali e centrate, quindi il
       ritaglio toglie sfondo e non etichetta, e tutte le schede vengono della stessa forma
       qualunque sia la foto. */
    object-fit: cover;
}

/* Un filo di bordo interno: senza, una foto su fondo bianco arriva fino al taglio e la
   cornice non si vede più. */
.bottiglia::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    pointer-events: none;
}

/* ------------------------------------------------------------------ prosa */

.prosa { padding: 0 20px calc(var(--sicura-basso) + 24px); }

.prosa__titolo {
    font-family: "Space", sans-serif;
    font-weight: 500;
    font-size: 18px;
    text-align: center;
    color: var(--testo-1);
    margin: 18px 0 8px;
}

.prosa__testo {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.5;
    color: var(--testo-2);
    margin: 0;
}

.etichette { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.etichetta {
    font-family: "Space", sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--testo-2);
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 5px 12px;
}

/* ------------------------------------------------------------------ griglia cantina */

.cantina { display: flex; flex-direction: column; min-height: 100dvh; }

/*
   Su desktop l'app non si stira: resta larga come un telefono e si centra.
   Una griglia di bottiglie larga 1400 px non è più leggibile, è solo più vuota — e tutto il
   disegno, dalle tessere ai pulsanti in basso a destra, è pensato per una mano sola.
*/
.cantina,
.scheda,
.mirino > *:not(.mirino__video) {
    width: 100%;
    max-width: var(--larghezza-app);
    margin-inline: auto;
}

/*
   Gli elementi fissi devono seguire la colonna, non il bordo dello schermo: su un monitor
   largo, un pulsante ancorato a destra finirebbe a mezzo metro dalla griglia che comanda.
   Si centrano sulla stessa larghezza dell'app e si allineano dentro.
*/
.azioni,
.avviso-grave {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(100%, var(--larghezza-app));
}

.cerca {
    margin: 0 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    padding: 0 14px;
}

.cerca .ico { color: var(--testo-3); font-size: 16px; }

.cerca input {
    flex: 1;
    background: none;
    border: 0;
    outline: none;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 16px; /* sotto i 16px iOS ingrandisce la pagina al focus */
    padding: 13px 0;
    -webkit-user-select: text;
    user-select: text;
}

.cerca input::placeholder { color: var(--testo-3); }

.filtri { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.filtri::-webkit-scrollbar { display: none; }

.filtro {
    flex: none;
    font-family: "Space", sans-serif;
    font-size: 13px;
    color: var(--testo-2);
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 7px 14px;
}

.filtro[aria-pressed="true"] { background: var(--testo-1); color: #1a1a1a; border-color: var(--testo-1); font-weight: 500; }

.griglia {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 0 16px calc(var(--sicura-basso) + 96px);
}

@media (min-width: 620px) { .griglia { grid-template-columns: repeat(5, 1fr); } }

/* Bersaglio grande: in cantina si tocca al buio, spesso con le mani occupate. */
.tessera {
    position: relative;
    aspect-ratio: 3 / 4;
    min-height: 96px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-align: left;
    transition: transform 90ms ease;
}

.tessera:active { transform: scale(0.95); }

.tessera img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }

.tessera__velo {
    position: absolute;
    inset: auto 0 0 0;
    padding: 16px 8px 7px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0));
}

.tessera__nome {
    font-family: "Space", sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    color: var(--testo-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tessera__annata { font-family: "Space", sans-serif; font-size: 10px; color: var(--testo-3); }

.tessera__qty {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid var(--bordo);
    color: var(--testo-1);
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 12px;
    display: grid;
    place-items: center;
}

.tessera--vuota { opacity: 0.4; }
.tessera--vuota .tessera__qty { background: var(--accento); border-color: var(--accento); }

.vuoto { padding: 48px 24px; text-align: center; color: var(--testo-3); font-size: 15px; }

/* ------------------------------------------------------------------ azione principale */

.azione {
    position: fixed;
    right: 20px;
    bottom: calc(var(--sicura-basso) + 20px);
    width: 64px;
    height: 64px;
    border-radius: 32px;
    background: var(--accento);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 28px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    z-index: 30;
}

/* ------------------------------------------------------------------ annullamento */

/*
   La sicurezza dello scarico viene da qui, non da una richiesta di conferma: un dialogo
   a ogni bottiglia distruggerebbe il "un gesto" che è tutto il punto.
*/
.annulla {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(var(--sicura-basso) + 16px);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #efefef;
    color: #1a1a1a;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    animation: sali 160ms ease-out;
}

@keyframes sali { from { transform: translateY(14px); opacity: 0; } }

.annulla__testo {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.annulla__azione { font-family: "Space", sans-serif; font-weight: 700; font-size: 14px; color: var(--accento); padding: 6px 4px; }

.annulla__tempo {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .annulla { animation: none; }
    .tessera { transition: none; }
}

/* ------------------------------------------------------------------ infrastruttura Blazor */

/*
   Queste regole arrivavano dal foglio di stile del template, che ho sostituito con questo.
   Senza di esse il pannello di errore resta visibile sempre, perché è markup presente
   nella pagina che va nascosto via CSS: sembra un'app rotta quando non lo è.
*/
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    box-sizing: border-box;
    padding: 12px 40px 12px 16px;
    background: #f3d3a0;
    color: #2a1a00;
    color-scheme: light only;
    font-size: 14px;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.4);
}

#blazor-error-ui .dismiss {
    position: absolute;
    top: 8px;
    right: 14px;
    cursor: pointer;
}

.blazor-error-boundary {
    background: #7a1b1b;
    color: #fff;
    padding: 14px 16px;
}

/* Avanzamento del caricamento, nei colori dell'app invece del blu del template. */
.loading-progress {
    position: absolute;
    display: block;
    width: 7rem;
    height: 7rem;
    inset: 32dvh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #2f2f2f;
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--accento);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    inset: calc(32dvh + 3rem) 0 auto 0;
    color: var(--testo-3);
    font-family: "Space", sans-serif;
    font-size: 13px;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Carico la cantina...");
}

/* ------------------------------------------------------------------ mirino */

.nascosto { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.mirino { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; }

.intestazione--sopra { position: relative; z-index: 3; background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent); }

.mirino__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.mirino__video--spenta { display: none; }

.mirino__avviso {
    position: relative;
    z-index: 2;
    margin: auto 24px;
    text-align: center;
    color: var(--testo-2);
    font-size: 15px;
    line-height: 1.5;
}

.mirino__avviso-nota { color: var(--testo-3); font-size: 13px; }

.mirino__comandi {
    position: relative;
    z-index: 3;
    margin-top: auto;
    display: grid;
    place-items: center;
    padding: 18px 0 calc(var(--sicura-basso) + 18px);
}

/* Bersaglio grande e al centro: si scatta con una mano sola, spesso al buio. */
.otturatore {
    width: 74px;
    height: 74px;
    border-radius: 37px;
    background: #fff;
    border: 5px solid rgba(255, 255, 255, .45);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .6);
    display: block;
}

.otturatore:active { transform: scale(.92); }
.otturatore:disabled { opacity: .5; }
.otturatore--file { cursor: pointer; }

/* Striscia dei provini: si vede subito che lo scatto è stato preso in carico. */
.vassoio {
    position: relative;
    z-index: 3;
    display: flex;
    gap: 8px;
    padding: 0 16px calc(var(--sicura-basso) + 12px);
    overflow-x: auto;
    scrollbar-width: none;
}

.vassoio::-webkit-scrollbar { display: none; }

.provino {
    position: relative;
    flex: none;
    width: 54px;
    height: 72px;
    border-radius: 9px;
    overflow: hidden;
    border: 2px solid var(--bordo);
    background: var(--pannello);
}

.provino img { width: 100%; height: 100%; object-fit: cover; }

.provino__stato {
    position: absolute;
    inset: auto 0 0 0;
    font-family: "Space", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    line-height: 18px;
}

.provino--lettura { border-color: #c8a24a; }
.provino--completata { border-color: #4a9d5f; }
.provino--fallita { border-color: var(--accento); }

/* ------------------------------------------------------------------ foglio di revisione */

.foglio {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(0, 0, 0, .6);
    display: flex;
    align-items: flex-end;
}

.foglio__contenuto {
    width: 100%;
    max-height: 88dvh;
    overflow-y: auto;
    background: var(--sfondo);
    border-top: 1px solid var(--bordo);
    border-radius: 20px 20px 0 0;
    padding: 18px 18px calc(var(--sicura-basso) + 18px);
    animation: sali 180ms ease-out;
}

.foglio__testa { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }

.foglio__miniatura { width: 76px; height: 100px; object-fit: cover; border-radius: 10px; flex: none; }

.foglio__titolo h2 {
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--testo-1);
}

.foglio__sottotitolo { margin: 0; color: var(--testo-3); font-size: 14px; }
.foglio__attesa { margin: 0; color: var(--testo-2); }
.foglio__errore { margin: 0; color: #e8a0a0; font-size: 14px; line-height: 1.45; }

.foglio__azioni { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

.bottone {
    padding: 13px 16px;
    border-radius: 12px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    color: var(--testo-1);
    font-family: "Space", sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
}

.bottone--primario { background: var(--accento); border-color: var(--accento); color: #fff; font-weight: 700; }
.bottone--secondario { background: transparent; color: var(--testo-3); }
.bottone--pericolo { background: transparent; border-color: #5a2430; color: #e8a0a0; }
.bottone:disabled { opacity: .55; }

.avviso {
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.avviso p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; color: var(--testo-2); }
.avviso__azioni { display: flex; flex-direction: column; gap: 6px; }

.divergenze { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.divergenza {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px 10px;
    align-items: center;
    font-size: 13px;
    color: var(--testo-2);
    border-top: 1px solid var(--bordo);
    padding-top: 8px;
}

.divergenza__campo { grid-column: 1 / -1; font-family: "Space", sans-serif; font-weight: 600; color: var(--testo-1); }
.divergenza__valori em { color: var(--testo-1); font-style: normal; }
.divergenza__azione { font-family: "Space", sans-serif; font-size: 13px; color: var(--accento); padding: 4px 6px; }

.quantita { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.quantita__etichetta { font-size: 14px; color: var(--testo-2); }
.quantita__comandi { display: flex; align-items: center; gap: 14px; }

.quantita__passo {
    width: 42px;
    height: 42px;
    border-radius: 21px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    font-size: 20px;
    color: var(--testo-1);
}

.quantita__valore { font-family: "Space", sans-serif; font-weight: 700; font-size: 20px; min-width: 24px; text-align: center; }

/* ------------------------------------------------------------------ moduli */

.modulo { padding: 0 18px 32px; display: flex; flex-direction: column; gap: 14px; }
.modulo__nota { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--testo-3); }
.modulo__nota--attenzione { color: #c9a67a; }
.modulo__errore { margin: 0; font-size: 14px; color: #e8a0a0; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo span { font-size: 13px; color: var(--testo-2); font-family: "Space", sans-serif; }

.campo input {
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}

/* ------------------------------------------------------------------ stato sincronizzazione */

.stato-sync {
    position: fixed;
    top: calc(var(--sicura-alto) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 32px);
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(52, 52, 52, .95);
    border: 1px solid var(--bordo);
    color: var(--testo-2);
    font-family: "Space", sans-serif;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

.stato-sync__punto { width: 7px; height: 7px; border-radius: 4px; flex: none; background: var(--testo-3); }

.stato-sync--corso .stato-sync__punto { background: #c8a24a; animation: pulsa 1s ease-in-out infinite; }
.stato-sync--attesa .stato-sync__punto { background: #c8a24a; }
.stato-sync--offline .stato-sync__punto { background: var(--testo-3); }

/* Oltre le ventiquattro ore l'avviso non deve più essere discreto. */
.stato-sync--allarme {
    background: var(--accento);
    border-color: var(--accento);
    color: #fff;
    font-weight: 600;
}

.stato-sync--allarme .stato-sync__punto { background: #fff; }

@keyframes pulsa { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .stato-sync--corso .stato-sync__punto { animation: none; }
}

/* ------------------------------------------------------------------ avviso grave */

/*
   Quando l'archivio locale non si apre, i dati esistono solo in memoria. È una
   condizione che l'utente deve conoscere prima di fotografare venti bottiglie.
*/
.avviso-grave {
    position: fixed;
    top: calc(var(--sicura-alto) + 8px);
    padding-inline: 12px;
    z-index: 60;
    background: var(--accento);
    color: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}

.avviso-grave__motivo {
    display: block;
    margin-top: 4px;
    opacity: .75;
    font-size: 11px;
    word-break: break-word;
}

/* ------------------------------------------------------------------ modulo del vino */

.campi-affiancati { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.campo select,
.campo textarea {
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}

.campo textarea { resize: vertical; line-height: 1.45; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-3); }

/* Un vino inserito a mano non ha la foto dell'etichetta: al suo posto un segnaposto,
   non un'immagine rotta. */
.tessera__segnaposto {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--pannello);
    color: var(--testo-3);
    font-size: 30px;
}

.mirino__a-mano { margin-bottom: 14px; min-width: 190px; }

/* Due azioni affiancate: fotografare e aggiungere a mano. */
.azioni {
    position: fixed;
    bottom: calc(var(--sicura-basso) + 20px);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;

    /* La barra copre tutta la colonna: se intercettasse i tocchi, coprirebbe le tessere
       sotto di essa. I pulsanti dentro li ricevono. */
    pointer-events: none;
    gap: 12px;
}

.azioni .azione { position: static; }

.azione--minore {
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    color: var(--testo-1);
    font-family: "Space", sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

.mirino__alternative { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.mirino__alternative .bottone { cursor: pointer; }

/* ------------------------------------------------------------------ voto e note mie */

.voto { display: flex; align-items: center; gap: 2px; }

.voto__stella {
    font-size: 26px;
    line-height: 1;
    color: var(--testo-3);
    padding: 4px 2px;
    transition: color 120ms ease;
}

.voto__stella--piena { color: #d9a441; }
.voto__stella:disabled { opacity: 1; }

.voto--compatto .voto__stella { font-size: 15px; padding: 0 1px; }

.voto__azzera { margin-left: 8px; font-size: 12px; color: var(--testo-3); text-decoration: underline; }

.mie {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0 6px;
    padding: 14px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    border-radius: 14px;
}

.mie__voce { display: flex; flex-direction: column; gap: 6px; }

.mie__titolo { font-family: "Space", sans-serif; font-size: 13px; color: var(--testo-2); }

.mie__dove {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    padding: 6px 0;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
}

.mie__prezzo {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    padding: 6px 0;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    -webkit-user-select: text;
    user-select: text;
    width: 8ch;
}

.mie__dove::placeholder,
.mie__prezzo::placeholder { color: var(--testo-3); }
.mie__cancella { margin-top: 22px; width: 100%; }

.quantita__anomalia {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #e8a0a0;
    margin-top: 2px;
}

.bottiglia__segnaposto { font-size: 64px; color: var(--testo-3); opacity: .5; }

/* Anche il pannello dei dati si allunga con la lastra: le due colonne devono finire alla
   stessa altezza, altrimenti l'asimmetria sembra un errore. */
.scheda__corpo > .dati { align-self: stretch; }

/* L'angolo in alto a sinistra tiene insieme voto e pastiglia: erano due elementi
   assoluti con la stessa origine e sul vino che ha tutti e due si disegnavano uno sopra
   l'altro. Qui ci stanno in colonna, e l'angolo in alto a destra resta alla giacenza. */
.tessera__angolo {
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* Il voto anche nella griglia: si vede a colpo d'occhio quali valeva la pena. */
.tessera__voto {
    font-size: 11px;
    color: #d9a441;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    letter-spacing: -1px;
}

.vuoto__come { font-size: 14px; color: var(--testo-3); line-height: 1.5; max-width: 26rem; margin: 6px auto; }
.vuoto__demo { margin: 18px auto 4px; display: block; max-width: 22rem; }

/* I figli della barra tornano toccabili. */
.azioni > * { pointer-events: auto; }

/* ------------------------------------------------------------------ modalità scarico */

/*
   Lo scarico è l'unica azione distruttiva a portata di un tocco singolo, quindi non può
   essere il comportamento predefinito: si entra in modalità di proposito, e finché si è
   dentro lo schermo lo dice a chiare lettere.
*/
.modo__entra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 16px 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    color: var(--testo-1);
    font-family: "Space", sans-serif;
    font-size: 15px;
    font-weight: 500;
    width: calc(100% - 32px);
}

.modo__entra .ico { font-size: 18px; color: var(--testo-2); }

.modo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 16px 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--accento);
    color: #fff;
}

.modo__testo { flex: 1; font-family: "Space", sans-serif; font-size: 15px; font-weight: 600; }

.modo__fine {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 7px 16px;
    color: #fff;
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 14px;
}

/* In modalità scarico le tessere si distinguono a colpo d'occhio. */
.tessera--scarico { border-color: var(--accento); }
.tessera--scarico .tessera__qty { background: var(--accento); border-color: var(--accento); }

/* Il rimando alla configurazione del server: utile, ma non deve gridare. */
.modulo__nota--dove { font-size: 13px; line-height: 1.6; color: var(--testo-2); }
.modulo__nota--dove code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px;
    background: rgba(255, 255, 255, .07);
    border-radius: 4px;
    padding: 1px 5px;
}

/* --------------------------------------------------- avvisi e comandi sopra il mirino */

/*
   Sul mirino il fondo è nero o è l'immagine dal vivo: un pulsante "trasparente con testo
   grigio" sparisce in entrambi i casi. Qui serve una pastiglia che si legga comunque.
*/
.mirino__alternative .bottone--secondario {
    background: rgba(0, 0, 0, .55);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
    backdrop-filter: blur(6px);
}

.mirino__prova {
    position: relative;
    z-index: 3;
    margin: 0 16px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(122, 32, 46, .92);
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
}

.mirino__stato {
    position: relative;
    z-index: 3;
    margin: 0 16px 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* La quota quasi finita avvisa, ma non allarma: il rosso pieno è per quando è finita. */
.mirino__prova--attenzione { background: rgba(60, 60, 60, .94); }

/* ------------------------------------------------------------------ selettore cantina */

/*
   Si vede solo quando serve: con una cantina sola sarebbe un menu con una voce. Sta sotto
   il titolo e sopra la ricerca, perché "dove sono" va letto prima di "cosa cerco".
*/
.scelta-cantina { position: relative; margin: 0 16px 10px; }

.scelta-cantina__attuale {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    color: var(--testo-1);
    font-family: "Space", sans-serif;
    font-size: 14px;
}

.scelta-cantina__attuale .ico { color: var(--testo-2); font-size: 15px; }
.scelta-cantina__nome { flex: 1; text-align: left; font-weight: 500; }
.scelta-cantina__freccia { color: var(--testo-3); font-size: 10px; }

.scelta-cantina__elenco {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 6px;
    padding: 6px;
    border-radius: 12px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
}

.scelta-cantina__voce {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 10px;
    border-radius: 8px;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    text-align: left;
}

.scelta-cantina__voce--attiva { background: rgba(255, 255, 255, .07); font-weight: 600; }
.scelta-cantina__voce--aggiungi { color: var(--testo-2); font-family: "Space", sans-serif; font-size: 14px; }
.scelta-cantina__quante { color: var(--testo-3); font-size: 13px; }

.scelta-cantina__nuova { display: flex; gap: 8px; padding: 6px; }

.scelta-cantina__nuova input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--bordo);
    padding: 6px 0;
    color: var(--testo-1);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
}

.scelta-cantina__nuova .bottone { padding: 8px 14px; }

/* Il limite di piano si legge qui, dove si e' provato a superarlo. */
.scelta-cantina__errore {
    margin: 4px 8px 6px;
    font-size: 13px;
    line-height: 1.4;
    color: #e8a0a0;
}

/* Conferma di quello che e' appena entrato in cantina. Si legge e se ne va da sola. */
.mirino__fatto {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 16px 10px;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(28, 92, 58, .95);
    color: #fff;
    font-size: 14px;
}

.mirino__fatto-testo { flex: 1; line-height: 1.35; }

.mirino__fatto-vai {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 6px 13px;
    color: #fff;
    font-family: "Space", sans-serif;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

/* Colore e tipo: due etichette in cima alla prosa, non nel pannello dei dati, che è già pieno. */
.etichette--natura { justify-content: center; margin-bottom: 4px; }

.etichetta--rosso { border-color: #6b2230; color: #e6a9b4; }
.etichetta--bianco { border-color: #6d6330; color: #e3d69f; }
.etichetta--rosato { border-color: #6d3a48; color: #f0bcc7; }
.etichetta--arancione { border-color: #6d4a25; color: #e8c294; }

/* ------------------------------------------------------------------ piede e informazioni */

/*
   Il piede sta sotto la griglia, non fisso: deve trovarsi quando lo si cerca — per leggere
   la versione durante una segnalazione — e sparire mentre si lavora.
*/
.piede {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: 26px 16px calc(var(--sicura-basso) + 96px);
    font-size: 12px;
    color: var(--testo-3);
}

.piede a { color: var(--testo-3); text-decoration: none; border-bottom: 1px dotted var(--bordo); }

.info { padding: 8px 20px calc(var(--sicura-basso) + 32px); text-align: center; }

.info__nome {
    margin: 0;
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--testo-1);
}

.info__claim { margin: 4px 0 22px; font-size: 14px; color: var(--testo-2); }

.info__dati {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0 0 20px;
    text-align: left;
    background: var(--pannello);
    border-radius: 12px;
    padding: 14px;
}

.info__dati dt { font-size: 13px; color: var(--testo-2); }
.info__dati dd { margin: 0; font-size: 13px; color: var(--testo-1); word-break: break-all; }

.info__nota { font-size: 13px; line-height: 1.5; color: var(--testo-2); margin-bottom: 18px; }
.info__autore { margin-top: 26px; font-size: 12px; color: var(--testo-3); }
.info__autore a { color: var(--testo-2); }

/* Il marchio nell'intestazione occupa lo stesso spazio di un pulsante: la riga resta
   bilanciata e il titolo centrato. */

/* ------------------------------------------------------------------ barre di utilizzo */

.uso { margin-bottom: 16px; text-align: left; }

.uso__testa { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.uso__titolo { flex: 1; font-size: 14px; color: var(--testo-2); }

.uso__cifre {
    font-family: "Space", sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--testo-1);
}

.uso__su { color: var(--testo-3); font-weight: 400; }

.uso__barra {
    height: 8px;
    border-radius: 4px;
    background: #2e2e2e;
    overflow: hidden;
}

.uso__barra i { display: block; height: 100%; background: #5b8c5a; transition: width .25s; }
.uso__barra i.uso--quasi { background: #c9a227; }
.uso__barra i.uso--finito { background: var(--accento); }

.uso__nota { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--testo-3); }

.licenza { background: var(--pannello); border-radius: 12px; padding: 16px 16px 4px; margin-bottom: 20px; }
.licenza__piano { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.licenza__nome { font-family: "Space", sans-serif; font-weight: 700; font-size: 17px; }
.licenza__etichetta { font-size: 12px; color: var(--testo-3); text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------------------------ logotipo */

.logotipo { display: block; color: var(--testo-1); overflow: visible; }

.logotipo__nome {
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.5px;
    fill: currentColor;
}

.intestazione__titolo--marchio { display: flex; justify-content: center; }
.intestazione__titolo--marchio a { display: block; line-height: 0; }

.info__marchio { display: flex; justify-content: center; margin: 16px 0 6px; }

/* ------------------------------------------------------------------ dispositivi e invito */

.dispositivi { list-style: none; margin: 0 0 10px; padding: 0; text-align: left; }

.dispositivo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--bordo);
}

.dispositivo--revocato { opacity: .5; }
.dispositivo__testo { flex: 1; min-width: 0; }
.dispositivo__nome { display: block; font-size: 15px; color: var(--testo-1); }

.dispositivo__questo {
    font-style: normal;
    font-size: 11px;
    color: var(--testo-3);
    border: 1px solid var(--bordo);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 7px;
}

.dispositivo__quando { display: block; font-size: 12px; color: var(--testo-3); margin-top: 2px; }

.dispositivo__revoca {
    background: transparent;
    border: 1px solid #5a2430;
    border-radius: 999px;
    padding: 6px 13px;
    color: #e8a0a0;
    font-size: 13px;
}

.invito { background: var(--pannello); border-radius: 12px; padding: 16px; margin-bottom: 14px; }
.invito__istruzioni { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--testo-2); }

/* Il codice si detta a voce: grande, spaziato, impossibile da confondere. */
.invito__codice {
    margin: 0 0 12px;
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: 8px;
    color: var(--testo-1);
}

.invito__nota { margin: 0 0 14px; font-size: 12px; line-height: 1.5; color: var(--testo-3); }

/* ------------------------------------------------------------------ storico movimenti */

.storico { list-style: none; margin: 0 0 4px; padding: 0; text-align: left; }

.storico__riga {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bordo);
}

/* Il segno e la quantità per primi, incolonnati: si legge "cosa è cambiato" prima di
   "perché", che è l'ordine in cui si guarda un registro. */
.storico__delta {
    flex: 0 0 34px;
    text-align: right;
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 15px;
}

.storico__delta--su { color: #7fb07e; }
.storico__delta--giu { color: #e8a0a0; }

.storico__testo { flex: 1; min-width: 0; }
.storico__causale { display: block; font-size: 14px; color: var(--testo-1); }
.storico__quando { display: block; font-size: 12px; color: var(--testo-3); margin-top: 1px; }
.storico__vuoto { text-align: center; color: var(--testo-3); font-size: 13px; }

/* ------------------------------------------------------------------ pannello dei filtri */

.filtri__apri {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 16px 12px;
    width: calc(100% - 32px);
    padding: 10px;
    border-radius: 10px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
    color: var(--testo-2);
    font-family: "Space", sans-serif;
    font-size: 14px;
}

.filtri__apri--aperto { color: var(--testo-1); border-color: var(--testo-3); }
.filtri__apri .ico { font-size: 14px; }

.filtri__conteggio {
    background: var(--accento);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    padding: 1px 6px;
    font-size: 12px;
    font-weight: 700;
}

.pannello-filtri {
    margin: 0 16px 12px;
    padding: 14px;
    border-radius: 12px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
}

.pannello-filtri__gruppo { margin-bottom: 14px; }

.pannello-filtri__titolo {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--testo-3);
}

.pannello-filtri__scelte { display: flex; flex-wrap: wrap; gap: 8px; }

.scelta {
    padding: 7px 13px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--bordo);
    color: var(--testo-2);
    font-size: 14px;
}

.scelta--attiva { background: var(--accento); border-color: var(--accento); color: #fff; }

.pannello-filtri__pulisci {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--bordo);
    color: var(--testo-3);
    font-size: 13px;
}

/* --- l'attesa mentre il modello legge ------------------------------------------------ */

.lettura {
    margin: 0 16px 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--pannello);
    border: 1px solid var(--bordo);
}

/* Barra indeterminata: non finge di sapere a che punto è, perché non lo sa. Dice solo
   "sta lavorando", che è l'unica cosa vera da dire. */
.lettura__barra {
    height: 3px;
    border-radius: 2px;
    background: var(--bordo);
    overflow: hidden;
}

.lettura__barra span {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: var(--accento);
    animation: lettura-scorre 1.4s ease-in-out infinite;
}

@keyframes lettura-scorre {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* Chi ha attivato "riduci animazioni" sta dicendo che il movimento gli dà fastidio, non
   che vuole meno informazioni: la barra resta, ferma e piena a metà. */
@media (prefers-reduced-motion: reduce) {
    .lettura__barra span { animation: none; width: 100%; opacity: .5; }
}

.lettura__stato {
    margin: 10px 0 0;
    font-family: "Space", sans-serif;
    font-size: 14px;
    color: var(--testo-1);
}

.lettura__tempo { color: var(--testo-3); font-family: inherit; font-size: 12px; }

.lettura__nota { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--testo-2); }

/* --- ordinamento e scadenza ---------------------------------------------------------- */

.ordine-attivo {
    margin: 0 16px 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--testo-3);
}

.ordine-attivo strong { color: var(--testo-1); }

/* La pastiglia sta a sinistra, sotto il voto (vedi .tessera__angolo): in alto a destra
   c'è già la giacenza, e due numeri nello stesso angolo si leggono come uno solo. */
.tessera__quando {
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid var(--bordo);
}

.tessera__quando--oltre { background: var(--accento); border-color: var(--accento); }
.tessera__quando--questanno { background: #8a6d1f; border-color: #8a6d1f; }

.pannello-filtri__altro {
    width: 100%;
    white-space: normal;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid var(--bordo);
    color: var(--testo-2);
    font-size: 13.5px;
    text-align: left;
}

/* --- riordino della cantinetta -------------------------------------------------------- */

.zone-scelta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }

.campo--stretto input { max-width: 100%; }

.info__nota--piccola { font-size: 12px; color: var(--testo-3); }

.zona {
    width: 100%;
    max-width: var(--larghezza-app);
    margin: 0 auto 6px;
    padding: 0 16px;
}

.zona__titolo {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 16px 0 8px;
    font-family: "Space", sans-serif;
    font-size: 15px;
    color: var(--testo-1);
}

.zona__gradi {
    font-weight: 700;
    color: var(--accento);
}

.zona__conteggio { margin-left: auto; font-size: 12px; color: var(--testo-3); }

.zona__vuota { margin: 0; font-size: 13px; color: var(--testo-3); }

.zona__elenco { list-style: none; margin: 0; padding: 0; }

.riga-vino + .riga-vino { border-top: 1px solid var(--bordo); }

.riga-vino__apri {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    background: transparent;
    border: 0;
    color: var(--testo-1);
    font-size: 14px;
    text-align: left;
}

.riga-vino__nome { flex: 1; min-width: 0; }

.riga-vino__qty { color: var(--testo-3); font-size: 12px; margin-left: 6px; }

.riga-vino__gradi {
    font-family: "Space", sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--testo-2);
    white-space: nowrap;
}

/* Una temperatura dedotta non deve avere lo stesso peso di una letta: stesso posto,
   meno inchiostro. */
.riga-vino__gradi--stimata { color: var(--testo-3); font-weight: 500; }

/* --- spiegazione del filtro e avviso di scadenza -------------------------------------- */

.filtro-spiega {
    width: 100%;
    max-width: var(--larghezza-app);
    margin: -2px auto 10px;
    padding: 0 16px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--testo-3);
}

/* L'avviso è un pulsante, non un cartello: se dice che due bottiglie scadono, toccarlo
   deve portarti a vederle. Un avviso che non fa niente si impara a saltare. */
.allerta {
    width: calc(100% - 32px);
    max-width: calc(var(--larghezza-app) - 32px);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(155, 39, 67, 0.16);
    border: 1px solid var(--accento);
    color: var(--testo-1);
    text-align: left;
}

.allerta__punto {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--accento);
}

.allerta__testo { flex: 1; min-width: 0; display: grid; gap: 1px; }

.allerta__testo strong { font-size: 13.5px; font-weight: 600; }

.allerta__nota { font-size: 11.5px; color: var(--testo-3); }

.allerta__vai {
    flex: none;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accento);
}

/* --- la finestra di consumo nella scheda ---------------------------------------------- */

/* Non è un campo: è quello che l'app ha capito, detto a chi sta scrivendo. Perciò non ha
   il bordo di una casella — chi lo vede non deve provare a scriverci dentro. */
.finestra {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -2px 0 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--bordo);
}

.finestra__detto { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; color: var(--testo-2); }

.finestra__correggi {
    flex: none;
    padding: 5px 11px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--bordo);
    color: var(--testo-2);
    font-size: 12.5px;
}

/* ------------------------------------------------------------------ acquisti

   I due pulsanti per comprare, nella pagina Informazioni. Compaiono solo se il server ha
   l'incasso configurato, quindi su un'installazione senza Stripe questo blocco non esiste
   proprio: niente spazio vuoto, niente pulsanti spenti. */

.acquisti {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0 4px;
}

.acquisti__nota {
    margin: -2px 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--testo-3);
}

.acquisti__nota:last-child { margin-bottom: 0; }