/* Pagine ospitate del servizio identita: colori dell'app (teal + arancione), nessuna dipendenza esterna. */
:root {
    --primario: #00656b;
    --primario-scuro: #00565b;
    --accento: #ff8928;
    --accento-testo: #642f00;
    --inchiostro: #111c2c;
    --inchiostro-tenue: #424750;
    --linea: #c3c6d2;
    --sfondo: #f9f9ff;
    --scheda: #ffffff;
    --errore: #ba1a1a;
    --errore-sfondo: #ffdad6;
    --ok: #0f9d6b;
    --ok-sfondo: #dcf5ea;
    --info-sfondo: #e7eeff;
    --raggio: 12px;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--inchiostro);
    background: var(--sfondo);
}

a { color: var(--primario); }
a:hover { color: var(--primario-scuro); }

.contenitore {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

main.contenitore { padding-top: 24px; padding-bottom: 48px; }

/* testata */
.testata { background: var(--primario); color: #fff; }
.testata-riga { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; flex-wrap: wrap; }
.marchio { color: #fff; font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.marchio:hover { color: #fff; }
.menu { display: flex; gap: 16px; flex-wrap: wrap; }
.menu a { color: #fff; text-decoration: none; font-weight: 500; }
.menu a:hover { text-decoration: underline; color: #fff; }

.piede { color: var(--inchiostro-tenue); font-size: 0.875rem; padding: 24px 0; border-top: 1px solid var(--linea); }

/* schede */
.scheda {
    background: var(--scheda);
    border: 1px solid var(--linea);
    border-radius: var(--raggio);
    padding: 24px;
    margin-bottom: 24px;
}
.scheda.stretta { max-width: 480px; margin-left: auto; margin-right: auto; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.125rem; margin: 24px 0 8px; }

/* moduli */
.modulo { display: flex; flex-direction: column; gap: 8px; }
.modulo label { font-weight: 600; margin-top: 8px; }
.modulo label.scelta { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=password], .modulo input:not([type]),
.modulo select {
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    color: var(--inchiostro);
}
.modulo input:focus, .modulo select:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: var(--primario); }
.modulo input[type=checkbox] { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--primario); }
.aiuto { margin: 0; font-size: 0.875rem; color: var(--inchiostro-tenue); }
.nota { font-size: 0.9375rem; margin: 12px 0 0; }
.griglia { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 640px) { .griglia { grid-template-columns: 1fr 1fr; } }
.griglia > div { display: flex; flex-direction: column; gap: 8px; }

/* bottoni */
.bottone {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 20px;
    font: inherit;
    font-weight: 600;
    color: var(--accento-testo);
    background: var(--accento);
    border: 0;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.bottone:hover { filter: brightness(0.95); color: var(--accento-testo); }
.bottone.secondario { background: transparent; color: var(--primario); border: 2px solid var(--primario); }
.collegamenti { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.collegamenti .bottone { margin-top: 0; }

/* avvisi */
.avviso { border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.avviso ul { margin: 0; padding-left: 20px; }
.avviso.errore { background: var(--errore-sfondo); color: var(--errore); }
.avviso.ok { background: var(--ok-sfondo); color: #0b5d40; }
.avviso.info { background: var(--info-sfondo); color: var(--inchiostro); }

/* elenco dei clienti */
.elenco { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.elenco li { border: 1px solid var(--linea); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.stato { font-weight: 600; }
.stato.attivo { color: var(--ok); }
.stato.attesa { color: var(--accento-testo); }
.stato.chiuso { color: var(--inchiostro-tenue); }
.dettaglio { font-size: 0.9375rem; color: var(--inchiostro-tenue); }