/* Portale assistenza DeltaLink — colori del marchio: blu #003765, arancione #FF4825 */
:root {
  --blu: #003765; --arancio: #FF4825;
  --sfondo: #f3f5f8; --carta: #fff; --testo: #1d2330; --tenue: #667085; --bordo: #e3e7ed;
  --blu-chiaro: #e9f0f7; --arancio-chiaro: #fff1ec; --verde: #1a7f37; --verde-chiaro: #e7f6ec;
  --giallo: #8a5a00; --giallo-chiaro: #fff4d6; --rosso: #b42318; --rosso-chiaro: #fdecea;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #12161c; --carta: #1b2028; --testo: #e7e9ec; --tenue: #9aa3ae; --bordo: #2c333d;
    --blu-chiaro: #1c2a3a; --arancio-chiaro: #3a2219; --verde: #6fcf8a; --verde-chiaro: #1b2e22;
    --giallo: #e5b94b; --giallo-chiaro: #33291a; --rosso: #f2867b; --rosso-chiaro: #3a1f1d;
  }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--sfondo); color: var(--testo); }
a { color: var(--blu); }
@media (prefers-color-scheme: dark) { a { color: #8bb8e6; } }
h1 { font-size: 1.6rem; margin: 0; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 0 0 .9rem; }

/* Intestazione: sempre chiara per la leggibilità del logo */
.barra { background: #fff; border-bottom: 3px solid var(--arancio); }
.barra-interna { max-width: 780px; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; gap: .9rem; }
.marchio img { display: block; height: 35px; width: auto; }
.nome-portale { color: var(--blu); font-weight: 600; font-size: .95rem; padding-left: .9rem; border-left: 1px solid #d6dbe1; }
.esci { margin-left: auto; color: var(--blu); font-weight: 600; font-size: .95rem; text-decoration: none; }
.esci:hover { text-decoration: underline; }
@media (max-width: 480px) { .nome-portale { display: none; } .marchio img { height: 30px; } }

main { max-width: 780px; margin: 0 auto; padding: 1.4rem 16px 1.5rem; }
footer { text-align: center; color: var(--tenue); font-size: .85rem; padding: .5rem 16px 2rem; }
footer a { color: inherit; }

.scheda { background: var(--carta); border: 1px solid var(--bordo); border-radius: 14px; padding: 1.4rem; margin-bottom: 1.1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.stretta { max-width: 430px; margin: 2rem auto; }
.accesso h1 { font-size: 1.45rem; margin-bottom: .4rem; color: var(--blu); }
@media (prefers-color-scheme: dark) { .accesso h1 { color: var(--testo); } }

.intestazione { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.sopratitolo { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); font-weight: 600; }

label { display: block; margin-bottom: 1rem; font-size: .92rem; color: var(--tenue); }
input, textarea { display: block; width: 100%; margin-top: .35rem; padding: .7rem .8rem; font: inherit; color: var(--testo); background: var(--sfondo); border: 1px solid var(--bordo); border-radius: 10px; }
input:focus, textarea:focus { outline: 2px solid var(--blu); outline-offset: 1px; border-color: transparent; }
textarea { resize: vertical; min-height: 6rem; }
input[type=file] { padding: .5rem; font-size: .9rem; }
button { padding: .75rem 1.4rem; font: inherit; font-weight: 700; color: #fff; background: var(--arancio); border: 0; border-radius: 10px; cursor: pointer; }
button:hover { filter: brightness(.95); }
button.pieno { width: 100%; }

/* Stato e avanzamento */
.stato { display: inline-block; padding: .3rem .8rem; border-radius: 99px; font-size: .85rem; font-weight: 700; white-space: nowrap; }
.s-aperto { background: var(--blu-chiaro); color: var(--blu); }
.s-in_lavorazione { background: var(--giallo-chiaro); color: var(--giallo); }
.s-in_attesa { background: var(--arancio-chiaro); color: var(--arancio); }
.s-chiuso { background: var(--verde-chiaro); color: var(--verde); }
@media (prefers-color-scheme: dark) { .s-aperto { color: #8bb8e6; } }

.passi { list-style: none; display: flex; margin: 1.3rem 0 1.2rem; padding: 0; }
.passi li { flex: 1; position: relative; text-align: center; font-size: .85rem; color: var(--tenue); padding-top: 1.6rem; }
.passi li::before { content: ""; position: absolute; top: .55rem; left: -50%; width: 100%; height: 3px; background: var(--bordo); }
.passi li:first-child::before { display: none; }
.passi .pallino { position: absolute; top: .15rem; left: 50%; transform: translateX(-50%); width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--carta); border: 3px solid var(--bordo); z-index: 1; }
.passi li.fatto, .passi li.attuale { color: var(--testo); font-weight: 600; }
.passi li.fatto::before, .passi li.attuale::before { background: var(--blu); }
.passi li.fatto .pallino { background: var(--blu); border-color: var(--blu); }
.passi li.attuale .pallino { border-color: var(--arancio); background: var(--arancio); box-shadow: 0 0 0 4px var(--arancio-chiaro); }
@media (prefers-color-scheme: dark) { .passi li.fatto::before, .passi li.attuale::before, .passi li.fatto .pallino { background: #8bb8e6; border-color: #8bb8e6; } }

.griglia-dati { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; padding: 1rem 0; border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.griglia-dati span { display: block; font-size: .8rem; color: var(--tenue); margin-bottom: .1rem; }
.griglia-dati em { color: var(--tenue); font-style: normal; }
@media (min-width: 640px) { .griglia-dati { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.descrizione { margin-top: 1rem; }
.descrizione summary { cursor: pointer; font-weight: 600; color: var(--blu); }
@media (prefers-color-scheme: dark) { .descrizione summary { color: #8bb8e6; } }
.testo { background: var(--sfondo); padding: .9rem 1rem; border-radius: 10px; margin-top: .6rem; overflow-wrap: anywhere; font-size: .95rem; }

/* Conversazione */
.conversazione { display: flex; flex-direction: column; gap: .8rem; }
.messaggio { max-width: 88%; padding: .75rem 1rem; border-radius: 14px; overflow-wrap: anywhere; font-size: .95rem; }
.testata-msg { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; margin-bottom: .25rem; }
.testata-msg span { color: var(--tenue); white-space: nowrap; }
.da-noi { align-self: flex-start; background: var(--blu-chiaro); border-top-left-radius: 4px; }
.da-noi .testata-msg strong { color: var(--blu); }
@media (prefers-color-scheme: dark) { .da-noi .testata-msg strong { color: #8bb8e6; } }
.da-cliente { align-self: flex-end; background: var(--sfondo); border: 1px solid var(--bordo); border-top-right-radius: 4px; }
@media (max-width: 480px) { .messaggio { max-width: 100%; } }
.allegati { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .5rem; font-size: .9rem; }

.nuovo-messaggio { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo); }
.riga-invio { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.riga-invio .file { flex: 1 1 260px; margin-bottom: 0; }
.riga-invio button { flex: 0 0 auto; }

.avviso { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; background: var(--verde-chiaro); color: var(--verde); }
.avviso.errore { background: var(--rosso-chiaro); color: var(--rosso); }
.avviso.attenzione { background: var(--arancio-chiaro); color: var(--testo); border-left: 4px solid var(--arancio); }
.tenue { color: var(--tenue); }
.piccolo { font-size: .85rem; margin-bottom: 0; }