/* Carico Pacchetti — stile di base con i colori e i font Partner Solution (brandkit). */
:root {
    --ps-yellow: #feca16;
    --ps-yellow-hover: #fbe9b2;
    --ps-ink: #030303;
    --ps-black: #000000;
    --ps-white: #ffffff;
    --ps-font-heading: 'Nunito', Arial, sans-serif;
    --ps-font-body: 'Varela Round', Arial, sans-serif;

    /* Neutri e stati funzionali (non colori di brand). */
    --ps-superficie: #f7f6f2;
    --ps-bordo: #e2e0d8;
    --ps-muted: #5c5a55;
    --ps-riga-hover: #fffbea;
    --ps-azioni: #fffaf0;
    --ps-errore: #b42318;
    --ps-errore-sfondo: #fdecea;
    --ps-ok: #1d6b3a;
    --ps-ok-sfondo: #e7f5ec;
    --ps-attenzione-sfondo: #fff4cc;
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--ps-font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--ps-ink);
    background: var(--ps-white);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
    font-family: var(--ps-font-heading);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 .75rem;
}

h1 {
    font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

h2 {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
}

a {
    color: var(--ps-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--ps-ink);
    outline-offset: 2px;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
    padding: .55rem .7rem;
    border: 1px solid #bdbab0;
    border-radius: 8px;
    background: var(--ps-white);
    min-height: 2.5rem;
    max-width: 100%;
}

input[type="checkbox"] {
    min-height: 0;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--ps-ink);
}

button {
    font: inherit;
    cursor: pointer;
    min-height: 2.5rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid #bdbab0;
    background: var(--ps-white);
    color: var(--ps-ink);
}

button:disabled {
    cursor: not-allowed;
    opacity: .5;
}

.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-decoration: none;
    border-radius: 999px;
    padding: .55rem 1.25rem;
    border: 2px solid transparent;
    min-height: 2.5rem;
}

.pulsante-primario {
    background: var(--ps-yellow);
    color: var(--ps-black);
}

.pulsante-primario:hover:not(:disabled) {
    background: var(--ps-yellow-hover);
}

.pulsante-secondario {
    background: var(--ps-white);
    border-color: var(--ps-ink);
}

.pulsante-pericolo {
    background: var(--ps-errore);
    border-color: var(--ps-errore);
    color: var(--ps-white);
}

/* Il titolo riceve il fuoco a ogni cambio pagina (per i lettori di schermo): niente riquadro. */
h1:focus {
    outline: none;
}

/* Pulsanti nelle righe delle tabelle: compatti, bordo sottile, distanziati. */
.azioni-riga {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.pulsante-azione {
    min-height: 2rem;
    padding: .3rem .9rem;
    font-size: .875rem;
    font-weight: 600;
    font-family: var(--ps-font-heading);
    background: var(--ps-white);
    color: var(--ps-ink);
    border: 1px solid #cfc9bb;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: background-color .15s, border-color .15s, color .15s;
}

.pulsante-azione:hover {
    border-color: var(--ps-ink);
    background: #fffbea;
}

.pulsante-azione-pericolo {
    color: var(--ps-errore);
}

.pulsante-azione-pericolo:hover {
    border-color: var(--ps-errore);
    background: var(--ps-errore-sfondo);
}

.pulsante-azione.pulsante-pericolo,
.pulsante-azione.pulsante-pericolo:hover {
    background: var(--ps-errore);
    border-color: var(--ps-errore);
    color: var(--ps-white);
}

.pulsante-piccolo {
    min-height: 2rem;
    padding: .25rem .75rem;
    font-size: .9rem;
}

.marchio {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    font-family: var(--ps-font-heading);
    font-weight: 800;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--ps-ink);
    white-space: nowrap;
}

/* Logo Partner Solution (originale, su fondo bianco) e marchio di Charge. */
.logo-ps {
    display: block;
    height: 2.2rem;
    width: auto;
}

.logo-ps-accesso {
    height: 2.6rem;
    margin: 0 auto 1.25rem;
}

.logo-divisore {
    align-self: stretch;
    width: 1px;
    margin: .2rem 0 .2rem .25rem;
    background: #d9d4c7;
}

.marchio-charge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.marchio-icona {
    width: 2.1rem;
    height: 2.1rem;
    flex: none;
}

.marchio-testi {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.marchio-nome {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -.01em;
}

.marchio-sotto {
    font-family: var(--ps-font-heading);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ps-muted);
}





.intestazione-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.intestazione-pagina h1 {
    margin: 0;
}

.sottotitolo {
    color: var(--ps-muted);
    margin-top: -.25rem;
}

/* Moduli */
.modulo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modulo-stretto {
    max-width: 28rem;
}

.campo {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.campo label {
    font-size: .9rem;
}

.campo .aiuto {
    font-size: .85rem;
    color: var(--ps-muted);
}

.griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.spunta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.errore-campo,
.validation-message {
    color: var(--ps-errore);
    font-size: .875rem;
}

.nota {
    font-size: .9rem;
    color: var(--ps-muted);
}

.comandi {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Avvisi */
.avviso {
    padding: .75rem 1rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.avviso-errore {
    background: var(--ps-errore-sfondo);
    color: var(--ps-errore);
}

.avviso-ok {
    background: var(--ps-ok-sfondo);
    color: var(--ps-ok);
}

.avviso-attenzione {
    background: var(--ps-attenzione-sfondo);
}

/* Etichette di stato */
.etichetta {
    display: inline-block;
    padding: .1rem .6rem;
    border-radius: 999px;
    font-size: .85rem;
    background: var(--ps-superficie);
    border: 1px solid var(--ps-bordo);
}

.etichetta-ok {
    background: var(--ps-ok-sfondo);
    border-color: transparent;
    color: var(--ps-ok);
}

.etichetta-attenzione {
    background: var(--ps-attenzione-sfondo);
    border-color: transparent;
}

.etichetta-errore {
    background: var(--ps-errore-sfondo);
    border-color: transparent;
    color: var(--ps-errore);
}

/* Pannello laterale per creare e modificare */
.pannello-sfondo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 40;
}

.pannello {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(34rem, 100vw);
    overflow-y: auto;
    background: var(--ps-white);
    padding: 1.5rem 16px 2rem;
    z-index: 41;
    box-shadow: -10px 0 30px rgba(0, 0, 0, .2);
}

.pannello-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pannello-testa h2 {
    margin: 0;
}

/* Pagina di accesso */
.accesso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 16px;
    background: linear-gradient(180deg, var(--ps-yellow) 0 38%, var(--ps-white) 38%);
}

.accesso-scheda {
    width: min(26rem, 100%);
    background: var(--ps-white);
    border-radius: 18px;
    padding: 2rem 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .15);
}

.accesso-scheda .marchio {
    margin-bottom: 1.5rem;
}

.accesso-scheda .pulsante-primario {
    width: 100%;
}

.accesso-firma {
    margin: 1.5rem 0 0;
    font-size: .8rem;
    color: var(--ps-muted);
    text-align: center;
}

/* Errore non gestito di Blazor */
#blazor-error-ui {
    background: var(--ps-yellow);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, .2);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.blazor-error-boundary {
    background: var(--ps-errore-sfondo);
    padding: 1rem;
    color: var(--ps-errore);
    border-radius: 10px;
}

.blazor-error-boundary::after {
    content: "Si è verificato un errore in questa parte della pagina.";
}

/* Riquadri delle pagine di importazione e bozza */
.riquadro {
    border: 1px solid var(--ps-bordo);
    border-radius: 14px;
    padding: 1rem 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--ps-white);
}

.riquadro h2 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
}

textarea {
    width: 100%;
    resize: vertical;
}

.zona-file {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7rem;
    padding: 1rem;
    border: 2px dashed #bdbab0;
    border-radius: 12px;
    background: var(--ps-superficie);
    text-align: center;
    cursor: pointer;
}

.zona-file.zona-attiva,
.zona-file:hover {
    border-color: var(--ps-ink);
    background: var(--ps-riga-hover);
}

.zona-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.elenco-file {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.elenco-file li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .4rem .6rem;
    background: var(--ps-superficie);
    border-radius: 8px;
    overflow-wrap: anywhere;
}

.registratore {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: .5rem 0 1rem;
}

.punto-rosso {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--ps-errore);
    animation: pulsa 1s infinite;
}

.nota-vocale {
    margin-bottom: .75rem;
}

.nota-vocale button {
    align-self: flex-start;
}

.lettura-in-corso {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 14px;
    background: var(--ps-attenzione-sfondo);
}

.lettura-in-corso p {
    margin: .25rem 0 0;
}

.ruota {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid var(--ps-bordo);
    border-top-color: var(--ps-ink);
    border-radius: 50%;
    animation: gira 1s linear infinite;
}

@keyframes gira {
    to { transform: rotate(360deg); }
}

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

.problemi {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.problema-errore {
    color: var(--ps-errore);
}

.riepilogo {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1rem;
    margin: 0 0 1rem;
}

.riepilogo dt {
    color: var(--ps-muted);
}

.riepilogo dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.tabella-semplice {
    width: 100%;
    border-collapse: collapse;
}

.tabella-semplice th,
.tabella-semplice td {
    padding: .5rem .65rem;
    border-bottom: 1px solid var(--ps-bordo);
    text-align: left;
    white-space: nowrap;
}

.tabella-semplice th {
    font-family: var(--ps-font-heading);
    font-weight: 700;
    background: var(--ps-superficie);
}

/* Editor della bozza */
.editor-stato {
    min-height: 1.5rem;
    text-align: right;
    font-size: .9rem;
}

.schede,
.sottoschede {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--ps-bordo);
}

.scheda,
.sottoscheda {
    flex: none;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: transparent;
    padding: .55rem .9rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.scheda.attiva,
.sottoscheda.attiva {
    border-bottom-color: var(--ps-ink);
    background: var(--ps-superficie);
    font-family: var(--ps-font-heading);
    font-weight: 700;
}

.sottoschede {
    border-bottom-width: 1px;
}

.sottoscheda {
    font-size: .92rem;
}

.sottoscheda.aggiungi {
    color: var(--ps-muted);
}

.contatore {
    display: inline-grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--ps-errore);
    color: var(--ps-white);
    font-size: .75rem;
    font-family: var(--ps-font-body);
    font-weight: 400;
}

.scheda-corpo {
    min-width: 0;
}

.scheda-corpo fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.problemi-scheda {
    margin-bottom: 1rem;
    padding: .75rem 1rem .75rem 2rem;
    background: var(--ps-superficie);
    border-radius: 10px;
}

.campo-largo {
    grid-column: 1 / -1;
}

.riquadro-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.riquadro-testa .campo {
    flex: 1 1 18rem;
}

.riquadro-testa h3 {
    margin: 0;
}

.giorni {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    border: 0;
    padding: 0;
    margin: .5rem 0;
}

.giorni legend {
    width: 100%;
    font-size: .9rem;
    margin-bottom: .25rem;
}

.giorni label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.editor-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.anteprima-testo {
    padding: .75rem 1rem;
    border: 1px solid var(--ps-bordo);
    border-radius: 8px;
    background: var(--ps-superficie);
    max-height: 26rem;
    overflow: auto;
}

/* Tabelle e griglie modificabili */
.tabella-modifica,
.griglia-prezzi {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.tabella-modifica th,
.tabella-modifica td,
.griglia-prezzi th,
.griglia-prezzi td {
    padding: .35rem .4rem;
    border-bottom: 1px solid var(--ps-bordo);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.tabella-modifica thead th,
.griglia-prezzi thead th {
    background: var(--ps-superficie);
    font-family: var(--ps-font-heading);
    font-weight: 700;
    font-size: .9rem;
}

.tabella-modifica input,
.tabella-modifica select,
.griglia-prezzi input {
    min-height: 2.2rem;
    padding: .3rem .5rem;
}

.griglia-prezzi input {
    width: 6.5rem;
    text-align: right;
}

.griglia-prezzi tbody th {
    font-family: var(--ps-font-body);
    font-weight: 400;
    background: var(--ps-white);
    position: sticky;
    left: 0;
    z-index: 1;
}

.colonna-riduzione {
    background: var(--ps-riga-hover);
}

input.corto {
    width: 4.5rem;
}

input.medio {
    width: 7rem;
}

input.lungo {
    width: 14rem;
}

.nome-aeroporto {
    display: block;
    font-size: .8rem;
}

.riga-aggiungi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin: .75rem 0;
}

.riga-aggiungi .campo {
    flex: 1 1 16rem;
}

details summary {
    cursor: pointer;
    font-family: var(--ps-font-heading);
    font-weight: 700;
    margin: .25rem 0;
}

/* Foto */
.galleria {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: .75rem;
}

.galleria li {
    border: 2px solid var(--ps-bordo);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ps-white);
}

.galleria li.inclusa {
    border-color: var(--ps-yellow);
}

.galleria img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--ps-superficie);
}

.galleria-dati {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .5rem;
}

.galleria-piccola {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
}

.scegli-foto {
    all: unset;
    display: block;
    cursor: pointer;
    width: 100%;
}

.scegli-foto:focus-visible {
    outline: 3px solid var(--ps-ink);
}

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

.scheda-corpo .modulo > button,
.scheda-corpo > button {
    align-self: flex-start;
}

.avviso.scrittura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.avviso.scrittura > div {
    flex: 1 1 20rem;
}

progress {
    width: 100%;
    max-width: 30rem;
    height: .75rem;
    accent-color: var(--ps-ink);
    display: block;
    margin-top: .4rem;
}