/* ============================================================
   AREA RISERVATA — SCANSIONE (barcode + lotto)
   Riveste le due finestre condivise (_UnifiedBarcodeScanner e
   _LottoAiCameraModal) con la carta, l'inchiostro e il blu del
   resto dell'area. I namespace restano quelli originali
   (.hgb-* e .hg-lcam-*): qui non si tocca nessuna logica.

   Priorita' al telefono: la finestra e' a tutto schermo, la
   fotocamera occupa la larghezza piena, i comandi stanno in
   fondo sotto il pollice e non scorrono via.
   ============================================================ */

/* ------------------------------------------------------------
   1. CORNICE DELLE FINESTRE
   ------------------------------------------------------------ */
#hgbSourceModal .modal-content,
#hgbWebcamModal .modal-content,
#hgbMobileQrModal .modal-content,
.hg-lcam-modal .modal-content {
    border: 1px solid var(--hg-rule);
    border-radius: 18px;
    background: var(--hg-paper);
    box-shadow: 0 24px 60px rgba(12, 20, 32, .18);
}

#hgbSourceModal .modal-header,
#hgbWebcamModal .modal-header,
#hgbMobileQrModal .modal-header,
.hg-lcam-modal .modal-header {
    /* via il gradiente viola: intestazione di carta come le altre pagine */
    background: var(--hg-paper) !important;
    color: var(--hg-ink) !important;
    border-bottom: 1px solid var(--hg-rule);
    padding: 14px 18px;
}

#hgbSourceModal .modal-title,
#hgbWebcamModal .modal-title,
#hgbMobileQrModal .modal-title,
.hg-lcam-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: -.015em;
    color: var(--hg-ink);
}

#hgbSourceModal .modal-title i,
#hgbWebcamModal .modal-title i,
#hgbMobileQrModal .modal-title i,
.hg-lcam-modal .modal-title i { color: var(--hg-blue); }

/* la X era bianca su viola: ora e' scura su carta */
#hgbSourceModal .btn-close,
#hgbWebcamModal .btn-close,
#hgbMobileQrModal .btn-close,
.hg-lcam-modal .modal-header .btn-close {
    filter: none !important;
    opacity: .55;
    padding: 12px;
    margin: -12px -6px -12px auto;
}

#hgbSourceModal .modal-body,
#hgbWebcamModal .modal-body,
#hgbMobileQrModal .modal-body,
.hg-lcam-modal .modal-body { padding: 18px; }

#hgbMobileQrModal .modal-footer,
.hg-lcam-modal .modal-footer {
    border-top: 1px solid var(--hg-rule);
    padding: 12px 18px;
    gap: 8px;
}

/* etichetta di contesto ("Prodotto 3") accanto al titolo */
.hg-lcam-context-label {
    background: var(--hg-blue-soft) !important;
    color: var(--hg-blue) !important;
    font-family: var(--ars-mono);
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px !important;
    border-radius: 6px !important;
}

/* ------------------------------------------------------------
   2. SCELTA DELLA SORGENTE (fotocamera / telefono)
   Due bersagli grandi: si scelgono col pollice senza mirare.
   ------------------------------------------------------------ */
.hgb-source-grid,
.hg-lcam-mode-selector {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px !important;
    margin-bottom: 0 !important;
}

.hgb-source-btn,
.hg-lcam-mode-btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 104px;
    max-width: none !important;
    padding: 16px 12px !important;
    border: 1px dashed var(--hg-rule) !important;
    border-radius: 14px !important;
    background: var(--hg-porcelain) !important;
    color: var(--hg-slate) !important;
    text-align: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.hgb-source-btn:hover,
.hgb-source-btn:focus-visible,
.hg-lcam-mode-btn:hover,
.hg-lcam-mode-btn.active {
    border-color: var(--hg-blue) !important;
    background: var(--hg-blue-soft) !important;
    color: var(--hg-blue) !important;
}

.hgb-source-btn .ico,
.hgb-source-btn .ico i,
.hg-lcam-mode-btn i {
    font-size: 24px !important;
    line-height: 1;
    margin-bottom: 2px !important;
    color: var(--hg-blue) !important;
}

/* titolo della scelta: <h6> nel barcode, <div> nel lotto */
.hgb-source-btn h6,
.hg-lcam-mode-btn > div {
    margin: 0 !important;
    font-size: 13.5px;
    font-weight: 640;
    line-height: 1.25;
    color: var(--hg-ink);
}

.hgb-source-btn p,
.hg-lcam-mode-btn small {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35;
    color: var(--hg-mute) !important;
}

/* ------------------------------------------------------------
   3. FOTOCAMERA
   ------------------------------------------------------------ */
#hgbPcScanner,
.hg-lcam-camera-container {
    max-width: 100% !important;
    border-radius: 14px !important;
    overflow: hidden;
    background: #0B0F14 !important;
}

#hgbPcScanner video,
.hg-lcam-camera-preview {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 52vh !important;
    height: auto !important;
    display: block;
    border-radius: 14px !important;
    background: #0B0F14 !important;
    object-fit: cover;
}

.hg-lcam-capture-overlay {
    border: 2px dashed rgba(255, 255, 255, .85) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06) !important;
    font-size: 12.5px !important;
}

.hg-lcam-quality {
    border-radius: 999px !important;
    font-family: var(--ars-mono);
    font-size: 10.5px !important;
    font-weight: 700;
    letter-spacing: .06em;
}

/* riga comandi sotto la fotocamera */
#hgbWebcamModal .modal-body > .d-flex {
    gap: 8px !important;
    margin-top: 14px !important;
}

#hgbPcScanFeedback {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--hg-mute);
}

/* ------------------------------------------------------------
   4. QR PER IL TELEFONO
   ------------------------------------------------------------ */
.hg-lcam-qr-section,
#hgbMobileQrModal .modal-body > .bg-white {
    border: 1px dashed var(--hg-rule) !important;
    border-radius: 14px !important;
    background: var(--hg-porcelain) !important;
    padding: 18px !important;
}

.hg-lcam-qr-container {
    background: var(--hg-paper) !important;
    border: 1px solid var(--hg-rule);
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 14px !important;
    margin: 12px 0 !important;
}

.hg-lcam-mobile-url,
.hg-lcam-qr-instructions { font-size: 12.5px !important; color: var(--hg-mute) !important; }

.hg-lcam-mobile-url {
    font-family: var(--ars-mono) !important;
    background: var(--hg-mist) !important;
    border-radius: 8px;
    padding: 8px 10px !important;
    word-break: break-all;
}

/* pallino di stato "in attesa / collegato" */
.hgb-mobile-status {
    background: var(--hg-mist) !important;
    color: var(--hg-mute) !important;
    font-size: 12.5px !important;
    padding: 5px 12px !important;
}

.hgb-mobile-status .dot { background: var(--hg-mute) !important; }
.hgb-mobile-status.online { background: #E8F6EC !important; color: #15803d !important; }
.hgb-mobile-status.online .dot { background: #15803d !important; }

/* sessione telefono gia' attiva */
.hgb-session-active {
    border: 1px solid #BFE3CB !important;
    background: #E8F6EC !important;
    color: #15803d !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 12.5px !important;
}

.hgb-session-active code { color: #15803d !important; }

/* ------------------------------------------------------------
   5. ESITO DELL'ANALISI AI DEL LOTTO
   ------------------------------------------------------------ */
.hg-lcam-detected {
    border: 1px solid #BFE3CB !important;
    background: #E8F6EC !important;
    border-radius: 12px !important;
    color: var(--hg-ink) !important;
    font-family: var(--ars-mono) !important;
    font-size: 17px !important;
    padding: 14px !important;
}

.hg-lcam-analysis {
    border: 1px solid var(--hg-rule) !important;
    background: var(--hg-porcelain) !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    color: var(--hg-slate) !important;
}

.hg-lcam-progress {
    border-radius: 12px !important;
    background: var(--hg-blue) !important;
    color: #fff !important;
    padding: 16px !important;
    font-size: 13.5px;
}

.hg-lcam-device-indicator {
    background: var(--hg-mist) !important;
    color: var(--hg-mute) !important;
    border-radius: 6px !important;
    font-family: var(--ars-mono);
    font-size: 10px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px !important;
}

.hg-lcam-btn-ai {
    background: var(--hg-blue) !important;
    border: 1px solid var(--hg-blue) !important;
    color: #fff !important;
}

.hg-lcam-btn-ai:hover { background: var(--hg-blue-d) !important; border-color: var(--hg-blue-d) !important; }

/* ------------------------------------------------------------
   6. BOTTONI DENTRO LE FINESTRE
   ------------------------------------------------------------ */
#hgbSourceModal .btn,
#hgbWebcamModal .btn,
#hgbMobileQrModal .btn,
.hg-lcam-modal .btn {
    min-height: 44px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 640;
    touch-action: manipulation;
}

#hgbWebcamModal .btn-primary,
.hg-lcam-modal .btn-primary,
.hg-lcam-modal .btn-success {
    background: var(--hg-blue);
    border-color: var(--hg-blue);
    color: #fff;
}

#hgbWebcamModal .btn-primary:hover,
.hg-lcam-modal .btn-primary:hover,
.hg-lcam-modal .btn-success:hover { background: var(--hg-blue-d); border-color: var(--hg-blue-d); }

#hgbWebcamModal .btn-outline-secondary,
#hgbMobileQrModal .btn-outline-secondary,
.hg-lcam-modal .btn-outline-secondary {
    border-color: var(--hg-rule);
    color: var(--hg-slate);
    background: var(--hg-paper);
}

#hgbWebcamModal .btn-outline-secondary:hover,
#hgbMobileQrModal .btn-outline-secondary:hover,
.hg-lcam-modal .btn-outline-secondary:hover { border-color: var(--hg-ink); color: var(--hg-ink); }

#hgbWebcamModal .btn-outline-warning {
    border-color: #FCD9A0;
    background: #FFF8EC;
    color: #7A4E00;
}

/* ------------------------------------------------------------
   7. TELEFONO — la finestra e' l'app: comandi sempre a portata
   (il layer mobile globale la porta gia' a tutto schermo)
   ------------------------------------------------------------ */
@media (max-width: 575.98px) {
    #hgbSourceModal .modal-header,
    #hgbWebcamModal .modal-header,
    #hgbMobileQrModal .modal-header,
    .hg-lcam-modal .modal-header {
        position: sticky;
        top: 0;
        z-index: 3;
        padding: 12px 14px;
    }

    #hgbSourceModal .modal-body,
    #hgbWebcamModal .modal-body,
    #hgbMobileQrModal .modal-body,
    .hg-lcam-modal .modal-body { padding: 14px; }

    /* le due scelte diventano righe larghe: bersaglio pieno schermo */
    .hgb-source-grid,
    .hg-lcam-mode-selector { grid-template-columns: 1fr; }

    /* icona a sinistra, titolo e descrizione incolonnati a destra.
       I tre pezzi sono fratelli senza contenitore, quindi serve una griglia
       con aree: in riga finivano uno accanto all'altro. */
    .hgb-source-btn,
    .hg-lcam-mode-btn {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas: "ico titolo" "ico desc";
        align-items: center;
        column-gap: 13px;
        row-gap: 2px;
        min-height: 72px;
        text-align: left !important;
        padding: 14px !important;
    }

    .hgb-source-btn .ico,
    .hg-lcam-mode-btn > i { grid-area: ico; margin-bottom: 0 !important; align-self: center; }

    .hgb-source-btn h6,
    .hg-lcam-mode-btn > div { grid-area: titolo; align-self: end; }

    .hgb-source-btn p,
    .hg-lcam-mode-btn > small { grid-area: desc; align-self: start; }

    /* la fotocamera prende tutta la larghezza e piu' altezza */
    #hgbPcScanner video,
    .hg-lcam-camera-preview { max-height: 58vh !important; border-radius: 12px !important; }

    /* comandi in fondo, affiancati e larghi uguali */
    #hgbWebcamModal .modal-body > .d-flex {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 10px 0 calc(6px + env(safe-area-inset-bottom, 0px));
        margin-top: 10px !important;
        background: var(--hg-paper);
        border-top: 1px solid var(--hg-rule);
    }

    #hgbWebcamModal .modal-body > .d-flex .btn { flex: 1 1 0; min-width: 0; }

    #hgbMobileQrModal .modal-footer,
    .hg-lcam-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    #hgbMobileQrModal .modal-footer .btn,
    .hg-lcam-modal .modal-footer .btn { width: 100%; margin: 0; }

    .hg-lcam-qr-section { padding: 14px !important; }
    .hg-lcam-qr-container { padding: 10px !important; margin: 10px 0 !important; }
    .hg-lcam-qr-instructions ol { padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .hgb-source-btn,
    .hg-lcam-mode-btn { transition: none; }
}

/* ============================================================
   8. FINESTRE DI SCANSIONE ANCORA "IN CASA" (.hg-scan-modal)
   ------------------------------------------------------------
   Alcune pagine hanno una propria finestra di scansione invece di
   usare ArScan (Prodotti/Create e EditDraft, Prodotti/QuickEntry,
   CatalogoBarcode/QuickEntry, EtichetteLegacy/DettaglioValori).
   Finche' non passano tutte alla versione condivisa, basta la
   classe .hg-scan-modal sulla finestra per vestirle uguale.

   I nomi delle classi interne sono quelli copiati da pagina a
   pagina (.camera-container, .qr-section, .barcode-mode-btn…):
   qui li si aggancia una volta sola. Bastano due classi per
   vincere sui fogli locali senza !important sparsi.
   ============================================================ */

.hg-scan-modal .modal-content {
    border: 1px solid var(--hg-rule);
    border-radius: 18px;
    background: var(--hg-paper);
    box-shadow: 0 24px 60px rgba(12, 20, 32, .18);
}

.hg-scan-modal .modal-header {
    background: var(--hg-paper) !important;   /* i gradienti erano inline */
    color: var(--hg-ink) !important;
    border-bottom: 1px solid var(--hg-rule);
    padding: 14px 18px;
}

.hg-scan-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 1rem;
    font-weight: 640;
    letter-spacing: -.015em;
    color: var(--hg-ink);
}

.hg-scan-modal .modal-title i { color: var(--hg-blue); }

.hg-scan-modal .btn-close {
    filter: none !important;
    opacity: .55;
    padding: 12px;
    margin: -12px -6px -12px auto;
}

.hg-scan-modal .modal-body { padding: 18px; }
.hg-scan-modal .modal-footer { border-top: 1px solid var(--hg-rule); padding: 12px 18px; gap: 8px; }

/* --- scelta della sorgente --- */
.hg-scan-modal .capture-mode-selector,
.hg-scan-modal .barcode-mode-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.hg-scan-modal .capture-mode-selector button,
.hg-scan-modal .barcode-mode-btn,
.hg-scan-modal .capture-mode-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "ico titolo" "ico desc";
    align-items: center;
    column-gap: 13px;
    row-gap: 2px;
    max-width: none;
    min-height: 76px;
    padding: 14px;
    border: 1px dashed var(--hg-rule);
    border-radius: 14px;
    background: var(--hg-porcelain);
    color: var(--hg-slate);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.hg-scan-modal .capture-mode-selector button:hover,
.hg-scan-modal .capture-mode-selector button.active,
.hg-scan-modal .barcode-mode-btn:hover,
.hg-scan-modal .barcode-mode-btn.active,
.hg-scan-modal .capture-mode-btn:hover,
.hg-scan-modal .capture-mode-btn.active {
    border-color: var(--hg-blue);
    background: var(--hg-blue-soft);
    color: var(--hg-blue);
}

.hg-scan-modal .capture-mode-selector i,
.hg-scan-modal .barcode-mode-btn i,
.hg-scan-modal .capture-mode-btn i {
    grid-area: ico;
    margin: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--hg-blue);
}

.hg-scan-modal .capture-mode-selector button > div,
.hg-scan-modal .capture-mode-selector button > strong,
.hg-scan-modal .barcode-mode-btn > div,
.hg-scan-modal .barcode-mode-btn > strong {
    grid-area: titolo;
    align-self: end;
    font-size: 13.5px;
    font-weight: 640;
    line-height: 1.25;
    color: var(--hg-ink);
}

.hg-scan-modal .capture-mode-selector button > small,
.hg-scan-modal .barcode-mode-btn > small {
    grid-area: desc;
    align-self: start;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--hg-mute);
}

/* --- fotocamera --- */
.hg-scan-modal .camera-container {
    border-radius: 14px;
    overflow: hidden;
    background: #0B0F14;
}

.hg-scan-modal .camera-preview,
.hg-scan-modal video {
    width: 100%;
    max-height: 52vh;
    height: auto;
    display: block;
    border-radius: 14px;
    background: #0B0F14;
}

.hg-scan-modal .capture-overlay {
    border: 2px dashed rgba(255, 255, 255, .85);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    font-size: 12.5px;
}

.hg-scan-modal .quality-indicator {
    border-radius: 999px;
    font-family: var(--ars-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
}

/* --- QR per il telefono --- */
.hg-scan-modal .qr-section {
    border: 1px dashed var(--hg-rule);
    border-radius: 14px;
    background: var(--hg-porcelain);
    padding: 18px;
}

.hg-scan-modal .qr-container {
    background: var(--hg-paper);
    border: 1px solid var(--hg-rule);
    border-radius: 12px;
    box-shadow: none;
    padding: 14px;
    margin: 12px 0;
}

.hg-scan-modal .qr-instructions { font-size: 12.5px; color: var(--hg-mute); }

.hg-scan-modal .mobile-url {
    font-family: var(--ars-mono);
    font-size: 11.5px;
    background: var(--hg-mist);
    border-radius: 8px;
    padding: 8px 10px;
    word-break: break-all;
}

.hg-scan-modal .device-indicator {
    background: var(--hg-mist);
    color: var(--hg-mute);
    border-radius: 6px;
    font-family: var(--ars-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 4px 9px;
}

.hg-scan-modal .device-desktop,
.hg-scan-modal .device-mobile { background: var(--hg-mist); color: var(--hg-mute); }

/* --- esito dell'analisi --- */
.hg-scan-modal .detected-text {
    border: 1px solid #BFE3CB;
    background: #E8F6EC;
    border-radius: 12px;
    color: var(--hg-ink);
    font-family: var(--ars-mono);
    font-size: 17px;
    padding: 14px;
}

.hg-scan-modal .ai-analysis {
    border: 1px solid var(--hg-rule);
    background: var(--hg-porcelain);
    border-radius: 12px;
    font-size: 12.5px;
    color: var(--hg-slate);
}

.hg-scan-modal .ai-progress {
    background: var(--hg-blue);
    border-radius: 12px;
    color: #fff;
    padding: 16px;
    font-size: 13.5px;
}

.hg-scan-modal .confidence-high   { color: #15803d; }
.hg-scan-modal .confidence-medium { color: #B54708; }
.hg-scan-modal .confidence-low    { color: #B42318; }

/* --- avvisi e suggerimenti dentro la finestra --- */
.hg-scan-modal .alert {
    border: 1px solid var(--hg-rule);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
}

.hg-scan-modal .alert-info,
.hg-scan-modal .alert-light,
.hg-scan-modal .alert-secondary { background: var(--hg-porcelain); color: var(--hg-slate); }
.hg-scan-modal .alert-success { background: #E8F6EC; border-color: #BFE3CB; color: #15803d; }
.hg-scan-modal .alert-warning { background: #FFF8EC; border-color: #FCD9A0; color: #7A4E00; }
.hg-scan-modal .alert-danger  { background: #FEF3F2; border-color: #FECDCA; color: #B42318; }

/* --- bottoni --- */
.hg-scan-modal .btn {
    min-height: 44px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 640;
    touch-action: manipulation;
}

.hg-scan-modal .btn-camera,
.hg-scan-modal .btn-ai,
.hg-scan-modal .btn-primary,
.hg-scan-modal .btn-success {
    background: var(--hg-blue);
    border: 1px solid var(--hg-blue);
    color: #fff;
}

.hg-scan-modal .btn-camera:hover,
.hg-scan-modal .btn-ai:hover,
.hg-scan-modal .btn-primary:hover,
.hg-scan-modal .btn-success:hover {
    background: var(--hg-blue-d);
    border-color: var(--hg-blue-d);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.hg-scan-modal .btn-outline-secondary,
.hg-scan-modal .btn-secondary {
    background: var(--hg-paper);
    border: 1px solid var(--hg-rule);
    color: var(--hg-slate);
}

.hg-scan-modal .btn-outline-secondary:hover,
.hg-scan-modal .btn-secondary:hover { border-color: var(--hg-ink); color: var(--hg-ink); background: var(--hg-mist); }

/* --- campi dentro la finestra --- */
/* 16px sul telefono: sotto questa misura iOS zooma da solo al focus. */
.hg-scan-modal .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 640;
    color: var(--hg-ink);
}

.hg-scan-modal .form-control,
.hg-scan-modal .form-select {
    min-height: 46px;
    padding: 11px 13px;
    border: 1px solid var(--hg-rule);
    border-radius: 10px;
    background: var(--hg-paper);
    color: var(--hg-ink);
    font-size: 16px;
    box-shadow: none;
}

.hg-scan-modal .form-control:focus,
.hg-scan-modal .form-select:focus { border-color: var(--hg-blue); box-shadow: 0 0 0 3px rgba(0, 87, 255, .14); }
.hg-scan-modal .form-control.is-invalid { border-color: var(--danger); }

/* ------------------------------------------------------------
   8b. "AGGIUNGI AL CATALOGO" (_CatalogAddModal)
   Stessa finestra di scansione, contenuto diverso: un invito a
   fotografare l'etichetta e due campi.
   ------------------------------------------------------------ */
.hg-scan-modal .hgca-lead { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--hg-mute); }
.hg-scan-modal .hgca-lead strong { font-family: var(--ars-mono); font-size: 12px; color: var(--hg-ink); }
.hg-scan-modal .hgca-opt { font-weight: 400; color: var(--hg-mute); }

.hg-scan-modal .hgca-gs1 {
    margin-bottom: 10px;
    padding: 9px 11px;
    border: 1px solid #BFE3CB;
    border-radius: 10px;
    background: #E8F6EC;
    font-size: 12.5px;
    color: #15803d;
}

.hg-scan-modal .hgca-tip {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 13px;
    border: 1px dashed var(--hg-rule);
    border-radius: 12px;
    background: var(--hg-porcelain);
}

.hg-scan-modal .hgca-tip-b { min-width: 0; }

.hg-scan-modal .hgca-tip-t {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 640;
    color: var(--hg-ink);
}

.hg-scan-modal .hgca-tip-s { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: var(--hg-mute); }

.hg-scan-modal .hgca-chip {
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--hg-blue-soft);
    color: var(--hg-blue);
    font-family: var(--ars-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hg-scan-modal .hgca-chip.is-deluxe { background: rgba(4, 115, 129, .10); color: var(--hg-teal); }
.hg-scan-modal .hgca-tip .btn-sm { min-height: 40px; padding: 8px 13px; font-size: 12.5px; }

/* esito della lettura AI: a capo, sotto entrambe le colonne */
.hg-scan-modal .hgca-tip-out { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; }
.hg-scan-modal .hgca-tip-out:empty { display: none; }

.hg-scan-modal .hgca-foot { display: flex; gap: 9px; margin-top: 18px; }
.hg-scan-modal .hgca-foot .btn { flex: 1 1 0; }
.hg-scan-modal .hgca-foot .btn-secondary { flex: 0 1 auto; }

/* --- telefono --- */
@media (max-width: 575.98px) {
    .hg-scan-modal .modal-header { position: sticky; top: 0; z-index: 3; padding: 12px 14px; }
    .hg-scan-modal .modal-body { padding: 14px; }

    /* invito e bottone incolonnati: il bottone prende tutta la riga */
    .hg-scan-modal .hgca-tip { grid-template-columns: 1fr; }
    .hg-scan-modal .hgca-tip .btn-sm { width: 100%; }
    .hg-scan-modal .hgca-foot { flex-direction: column-reverse; }
    .hg-scan-modal .hgca-foot .btn { width: 100%; flex: none; }

    .hg-scan-modal .capture-mode-selector,
    .hg-scan-modal .barcode-mode-selector { grid-template-columns: 1fr; }

    .hg-scan-modal .camera-preview,
    .hg-scan-modal video { max-height: 58vh; border-radius: 12px; }

    .hg-scan-modal .qr-section { padding: 14px; }
    .hg-scan-modal .qr-container { padding: 10px; margin: 10px 0; }
    .hg-scan-modal .qr-instructions ol { padding-left: 18px; }

    .hg-scan-modal .modal-footer { flex-direction: column-reverse; align-items: stretch; }
    .hg-scan-modal .modal-footer .btn { width: 100%; margin: 0; }
}