/* Nassau Finance, direzione grafica "C. La banca privata" (§6 del design, mockup approvati il 28/10/2026). */
:root {
    --notte: #0f2238;
    --notte-2: #17304d;
    --mare: #4aa79f;
    --mare-chiaro: #dff1ef;
    --mare-scuro: #2b6f69;
    --nebbia: #f3f5f8;
    --carta: #ffffff;
    --grigio: #6a7687;
    --linea: #e3e7ec;
    --ambra: #e0a83a;
    --ambra-chiaro: #fbf1dc;
    --ambra-scuro: #8a5a00;
    --rosso: #c2463d;
    --rosso-chiaro: #fbe9e7;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font: 15px/1.5 "Libre Franklin", system-ui, sans-serif; color: var(--notte); background: var(--nebbia); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
input, textarea, select, button { font: inherit; color: inherit; }
.contenitore { max-width: 1120px; margin: 0 auto; padding: 0 36px; }

/* Pulsanti */
.pulsante { display: inline-block; background: var(--mare); color: var(--notte); border: 0; border-radius: 24px; padding: 10px 22px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.pulsante:hover { background: #3f968f; }
.pulsante-secondario { background: transparent; border: 1.5px solid var(--linea); font-weight: 500; }
.pulsante-secondario:hover { background: var(--nebbia); }
.pulsante-pericolo { background: transparent; border: 1.5px solid var(--rosso); color: var(--rosso); font-weight: 500; }
.pulsante-pericolo:hover { background: var(--rosso-chiaro); }

/* Messaggi */
.messaggio { border-radius: 8px; padding: 10px 14px; margin: 18px 0 0; font-size: 14px; }
.messaggio.ok { background: var(--mare-chiaro); color: var(--mare-scuro); }
.messaggio.avviso { background: var(--ambra-chiaro); color: var(--ambra-scuro); }
.messaggio.errore { background: var(--rosso-chiaro); color: var(--rosso); margin: 0 0 16px; }
.errore { color: var(--rosso); font-size: 13px; margin-top: 4px; }
.nota { color: var(--grigio); font-size: 13px; }

/* Fascia blu notte */
.fascia { background: var(--notte); color: #fff; padding: 18px 0 64px; }
.fascia-bassa { padding-bottom: 30px; }
.testata { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
/* Logo: sugli sfondi blu notte la versione in negativo (img/logo-negativo.svg) */
.marchio { display: inline-flex; line-height: 0; }
.marchio img { height: 84px; width: auto; }
.fascia .testata { padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.testata nav { display: flex; gap: 22px; align-items: center; }
.testata nav a, .link-nav { text-decoration: none; opacity: .75; background: none; border: 0; cursor: pointer; padding: 0 0 2px; }
.testata nav a:hover, .link-nav:hover { opacity: 1; }
.testata nav a.attivo { opacity: 1; font-weight: 500; border-bottom: 2px solid var(--mare); }
.testata form { display: inline; }
.saluto { margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.saluto h1 { font-size: 28px; font-weight: 400; line-height: 1.15; max-width: 24ch; }
.contatore { text-align: right; }
.contatore big { display: block; font-size: 50px; font-weight: 300; line-height: 1; color: var(--mare); }
.contatore big span { font-size: 22px; color: #fff; opacity: .55; }
.contatore big.contatore-illimitate { font-size: 26px; font-weight: 400; }
.contatore small { display: block; opacity: .75; font-size: 13px; margin-top: 4px; }
.indietro { display: inline-block; font-size: 14px; opacity: .8; margin-top: 24px; text-decoration: none; }
.indietro::before { content: "‹ "; }
.barra-impersona { background: var(--ambra); color: var(--notte); padding: 8px 16px; font-size: 14px; display: flex; gap: 14px; justify-content: center; align-items: center; }
.barra-impersona button { background: var(--notte); color: #fff; border: 0; border-radius: 14px; padding: 3px 12px; cursor: pointer; }

/* Foglio appoggiato sulla fascia */
.foglio { background: var(--carta); border-radius: 10px; padding: 24px 26px; box-shadow: 0 10px 30px rgba(15, 34, 56, .12); }
main > .foglio:first-child, main > .messaggio + .foglio, main > .foglio.modulo-analisi { margin-top: -40px; position: relative; }
.campo label { display: block; font-size: 13px; font-weight: 500; color: var(--grigio); margin-bottom: 4px; }
.campo input, .campo textarea, .campo select { width: 100%; border: 0; border-bottom: 1.5px solid var(--linea); padding: 5px 0 7px; background: transparent; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-bottom-color: var(--mare); }
.campo ::placeholder { color: #a3acb8; }
.modulo-analisi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.campo-pieno { grid-column: 1 / -1; }
.modulo-analisi .messaggio { grid-column: 1 / -1; margin: 0; }
.invio { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 4px; }
.nascosto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Nuova analisi: modulo e consigli */
.sottotitolo { margin-top: 8px; max-width: 54ch; opacity: .8; }
.nuova { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; margin-bottom: 48px; }
main > .nuova:first-child { margin-top: -40px; position: relative; }
.consigli { margin-top: 64px; }
main > .messaggio + .nuova .consigli { margin-top: 0; }
.consigli h2 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.consigli dt { font-size: 13px; font-weight: 700; margin-top: 12px; }
.consigli dd { font-size: 13px; color: var(--grigio); }

/* Elenco dei report: righe dentro un foglio */
.pulsante-fascia { margin-top: 16px; }
.elenco-report { padding: 0; }
.elenco-testa { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--linea); }
.elenco-testa h2 { font-size: 15px; font-weight: 700; }
.cerca-report { display: flex; align-items: center; gap: 8px; }
.cerca-report input { border: 1px solid var(--linea); border-radius: 20px; padding: 7px 14px; width: 240px; }
.cerca-report input:focus { outline: none; border-color: var(--mare); }
.cerca-report .pulsante { padding: 7px 16px; }
.link-azzera { font-size: 13px; color: var(--grigio); }
.riga { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 150px; grid-template-areas: "titolo stato azione"; gap: 6px 24px; align-items: center; padding: 14px 24px; border-bottom: 1px solid var(--linea); }
.riga:last-child { border-bottom: 0; }
.riga-titolo { grid-area: titolo; min-width: 0; }
.riga-stato { grid-area: stato; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.riga-azione { grid-area: azione; text-align: right; }
.riga h3 { font-size: 16px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.riga h3 a { text-decoration: none; }
.riga h3 a:hover { text-decoration: underline; }
.riga-data { font-size: 12px; color: var(--grigio); }
.riga-etichetta { font-size: 13px; font-weight: 500; color: var(--grigio); }
.riga-testo { font-size: 13px; color: var(--grigio); }
.riga .barra { max-width: 240px; margin: 4px 0 2px; }
.riga-corso .riga-etichetta { color: var(--ambra-scuro); }
.riga-pronto .riga-etichetta { color: var(--mare-scuro); }
.riga-errore .riga-etichetta { color: var(--rosso); }
.riga-annullata { opacity: .7; }
.riga-azione .pulsante { padding: 8px 18px; white-space: nowrap; }
.link-dettaglio { font-size: 13px; font-weight: 500; color: var(--mare-scuro); text-decoration: none; }
.link-dettaglio:hover { text-decoration: underline; }
.vuoto-elenco { padding: 24px; color: var(--grigio); }
.elenco-report .paginazione { margin: 0; padding: 14px 24px; border-top: 1px solid var(--linea); }
.nota-elenco { margin: 14px 0 48px; }
.scheda { background: var(--carta); border-radius: 10px; padding: 16px 18px; border-left: 4px solid var(--linea); display: flex; flex-direction: column; gap: 4px; }
.scheda h3 { font-size: 17px; font-weight: 500; line-height: 1.25; }
.scheda h3 a { text-decoration: none; }
.scheda h3 a:hover { text-decoration: underline; }
.scheda-stato { font-size: 13px; color: var(--grigio); }
.scheda-testo { font-size: 14px; }
.scheda-data { font-size: 12px; color: var(--grigio); margin-top: auto; padding-top: 8px; }
.scheda .pulsante { align-self: flex-start; margin-top: 8px; }
.scheda-corso { border-left-color: var(--ambra); }
.scheda-corso .scheda-stato { color: var(--ambra-scuro); }
.scheda-pronto { border-left-color: var(--mare); }
.scheda-pronto .scheda-stato { color: var(--mare-scuro); }
.scheda-errore { border-left-color: var(--rosso); }
.scheda-errore .scheda-stato { color: var(--rosso); }
.scheda-annullata { opacity: .75; }
.barra { height: 8px; background: rgba(15, 34, 56, .1); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.barra i { display: block; height: 100%; background: var(--ambra); transition: width .6s ease; }
.paginazione { display: flex; gap: 18px; justify-content: center; align-items: center; margin-top: 20px; font-size: 14px; color: var(--grigio); }
.paginazione a { color: var(--notte); font-weight: 500; }

/* Dettaglio */
.dettaglio { display: grid; grid-template-columns: 1.25fr 1fr; gap: 28px; padding: 30px 0 48px; }
.dettaglio-dati dt { font-size: 13px; font-weight: 500; color: var(--grigio); margin-top: 14px; }
.dettaglio-dati dt:first-child { margin-top: 0; }
.dettaglio-stato .scheda { padding: 20px 22px; }
.dettaglio-stato .nota { margin-top: 8px; }

/* Pagine di accesso */
.pagina-accesso { background: var(--notte); min-height: 100vh; }
.accesso { max-width: 420px; margin: 0 auto; padding: 12vh 16px 40px; }
.accesso-marchio { width: fit-content; margin: 0 auto 28px; line-height: 0; }
.accesso-marchio img { height: 150px; width: auto; }
.accesso .foglio { padding: 28px; }
.accesso h1 { font-size: 24px; font-weight: 400; margin-bottom: 16px; }
.accesso label { display: block; font-size: 13px; font-weight: 500; color: var(--grigio); margin: 14px 0 4px; }
.accesso input { width: 100%; border: 0; border-bottom: 1.5px solid var(--linea); padding: 6px 0; background: transparent; }
.accesso input:focus { border-bottom-color: var(--mare); outline: none; }
.accesso button { margin-top: 22px; width: 100%; }
.accesso .link { display: block; text-align: center; font-size: 13px; color: var(--grigio); margin-top: 14px; }
.accesso .messaggio { margin: 0 0 12px; }
.accesso .nota { margin-bottom: 4px; }
.accesso a.pulsante { display: block; text-align: center; margin-top: 18px; }

/* Profilo */
.profilo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 48px; }
.profilo-sezione h2 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.profilo-sezione .campo { margin-bottom: 14px; }
.profilo-sezione .nota { margin: 6px 0 14px; }
.profilo-dati dt { font-size: 13px; font-weight: 500; color: var(--grigio); margin-top: 10px; }
.profilo-dati dt:first-child { margin-top: 0; }
.profilo-dati dd { overflow-wrap: anywhere; }
.bordo-mare { border-left: 3px solid var(--mare); padding-left: 18px; }
.scelta { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.scelta .interruttore { flex: none; }

@media (max-width: 760px) {
    .marchio img { height: 56px; }
    .fascia { padding: 14px 0 56px; }
    .fascia .testata { padding-bottom: 12px; }
    .contenitore { padding: 0 16px; }
    .testata nav { gap: 0; }
    .testata nav a, .testata .link-nav { padding: 10px 6px; white-space: nowrap; }
    .testata nav a.attivo { border-bottom: 0; box-shadow: inset 0 -2px 0 var(--mare); }
    .saluto { margin-top: 22px; flex-direction: column; align-items: flex-start; gap: 14px; }
    .saluto h1 { font-size: 24px; }
    .contatore { text-align: left; }
    .contatore big { font-size: 42px; }
    .foglio { padding: 20px 18px; }
    .modulo-analisi, .dettaglio, .profilo, .nuova { grid-template-columns: 1fr; }
    .nuova { gap: 22px; }
    .consigli { margin-top: 0; }
    .campo textarea { min-height: 4.6em; }
    .invio { flex-direction: column-reverse; align-items: stretch; text-align: center; }
    .invio .pulsante, .profilo-sezione .pulsante, .scheda .pulsante { width: 100%; text-align: center; padding-top: 12px; padding-bottom: 12px; }
    .elenco-report { padding: 0; }
    .elenco-testa { padding: 14px 16px; }
    .cerca-report { width: 100%; }
    .cerca-report input { width: auto; flex: 1; min-width: 0; }
    .riga { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titolo azione" "stato stato"; gap: 6px 12px; padding: 14px 16px; }
    .riga-azione .pulsante { padding: 8px 14px; }
    .elenco-report .paginazione { padding: 12px 16px; }
    .dettaglio { gap: 20px; padding: 22px 0 36px; }
    .dettaglio-stato { order: -1; }
    .profilo { gap: 22px; }
    .bordo-mare { padding-left: 14px; }
    .accesso { padding-top: 7vh; }
    .accesso-marchio img { height: 120px; }
    .accesso .foglio { padding: 22px 20px; }
    /* sotto i 16px Safari su iPhone ingrandisce la pagina quando si tocca un campo */
    input, textarea, select { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .barra i { transition: none; }
}

/* Area admin: stessa identità, più compatta (§6 del design) */
.pagina-admin { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; background: var(--carta); }
.admin-menu { background: var(--notte); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 14px; position: sticky; top: 0; height: 100vh; }
.admin-menu .marchio { margin: 0 8px 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.admin-menu .marchio img { height: 88px; }
.admin-menu nav { display: flex; flex-direction: column; gap: 2px; }
.admin-menu nav a { padding: 8px 10px; border-radius: 6px; opacity: .75; text-decoration: none; }
.admin-menu nav a:hover { opacity: 1; }
.admin-menu nav a.attivo { background: var(--notte-2); opacity: 1; box-shadow: inset 3px 0 0 var(--mare); }
.admin-menu form { margin-top: auto; padding: 8px 10px; }
.admin-contenuto { padding: 22px 28px 40px; min-width: 0; }
.admin-contenuto h1 { font-size: 22px; font-weight: 500; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.admin-contenuto h2 { font-size: 16px; font-weight: 700; margin: 22px 0 8px; }
.admin-contenuto .messaggio { margin: 0 0 16px; }
.cerca { display: flex; gap: 8px; }
.cerca input, .cerca select { border: 1px solid var(--linea); border-radius: 20px; padding: 6px 14px; font-size: 13px; min-width: 220px; }
.allarme { background: var(--rosso-chiaro); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px; }
.allarme > strong { color: var(--rosso); font-size: 13px; }
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th { text-align: left; font-weight: 500; color: var(--grigio); padding: 7px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.tabella td { padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella td small { display: block; color: var(--grigio); }
.tabella-scorre { overflow-x: auto; }
.pill { display: inline-block; border-radius: 12px; padding: 1px 9px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.pill-pronto { background: var(--mare-chiaro); color: var(--mare-scuro); }
.pill-corso { background: var(--ambra-chiaro); color: var(--ambra-scuro); }
.pill-errore { background: var(--rosso-chiaro); color: var(--rosso); }
.pill-coda, .pill-annullata { background: var(--nebbia); color: var(--grigio); }
.pill-spento { background: #eceff3; color: #7d8794; }
.azioni { white-space: nowrap; display: flex; gap: 10px; flex-wrap: wrap; }
.azioni form { display: inline; }
.azioni a, .azioni button { color: var(--mare-scuro); font-weight: 500; font-size: 13px; background: none; border: 0; cursor: pointer; text-decoration: none; padding: 0; }
.azioni button.pericolo { color: var(--rosso); }
.azioni a:hover, .azioni button:hover { text-decoration: underline; }
.interruttore { appearance: none; width: 32px; height: 18px; border-radius: 9px; background: #c9d0d8; position: relative; cursor: pointer; vertical-align: middle; border: 0; }
.interruttore::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.interruttore[aria-pressed="true"], .interruttore:checked { background: var(--mare); }
.interruttore[aria-pressed="true"]::after, .interruttore:checked::after { left: 16px; }
.modulo-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; max-width: 760px; }
.modulo-admin .campo-pieno { grid-column: 1 / -1; }
.riquadro { border: 1px solid var(--linea); border-radius: 10px; padding: 16px 18px; }
.colonne-admin { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.riquadro + .riquadro { margin-top: 16px; }
.admin-contenuto form.cerca { margin-bottom: 16px; flex-wrap: wrap; }
.riquadro h2 { margin-top: 0; }
.riquadro .campo { margin-bottom: 12px; }
.campo input[type="checkbox"] { width: auto; border: 0; padding: 0; margin: 0 6px 0 0; vertical-align: middle; }
.campo label:has(input[type="checkbox"]) { display: flex; align-items: center; margin: 8px 0 0; }
.elenco-accessi { list-style: none; padding: 0; margin: 0; font-size: 13px; columns: 2; max-height: 340px; overflow-y: auto; }
.elenco-accessi li { padding: 2px 0; }

@media (max-width: 860px) {
    .pagina-admin { grid-template-columns: 1fr; }
    .admin-menu { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px 0; }
    .admin-menu .marchio { margin: 0; padding: 0; border: 0; }
    .admin-menu .marchio img { height: 48px; }
    .admin-menu form { order: 1; margin: 0 0 0 auto; padding: 10px 0; }
    .admin-menu nav { order: 2; flex-direction: row; width: 100%; overflow-x: auto; gap: 4px; border-top: 1px solid rgba(255, 255, 255, .1); }
    .admin-menu nav a { padding: 12px 10px; border-radius: 0; white-space: nowrap; }
    .admin-menu nav a.attivo { background: none; box-shadow: inset 0 -2px 0 var(--mare); }
    .admin-contenuto { padding: 18px 16px 32px; }
    .admin-contenuto h1 { font-size: 20px; }
    .cerca { width: 100%; }
    .cerca input, .cerca select { min-width: 0; flex: 1 1 160px; font-size: 16px; }
    .modulo-admin, .colonne-admin { grid-template-columns: 1fr; }
    .modulo-admin input, .modulo-admin select, .riquadro input, .riquadro select { font-size: 16px; }
    .elenco-accessi { columns: 1; }
    .tabella td, .tabella th { padding: 8px 6px; }
}

/* Admin su telefono: le tabelle con classe tabella-schede diventano schede impilate */
@media (max-width: 760px) {
    .tabella-schede thead { display: none; }
    .tabella-schede, .tabella-schede tbody { display: block; }
    .tabella-schede tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
    .tabella-schede td { display: block; padding: 0; border: 0; }
    .tabella-schede td[data-etichetta]::before { content: attr(data-etichetta) " "; color: var(--grigio); }
    .tabella-schede .cella-principale { flex: 1 1 60%; font-size: 14px; }
    .tabella-schede .cella-intera { flex-basis: 100%; }
    .tabella-schede .azioni { gap: 16px; }
    .tabella-schede .cella-attivo { display: flex; align-items: center; gap: 6px; }
    .tabella-schede .azioni a, .tabella-schede .azioni button { padding: 6px 0; }
    .allarme .tabella-schede tr { border-bottom-color: rgba(194, 70, 61, .2); }
}

/* Admin, statistiche: numeri di riepilogo */
.riepilogo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.riepilogo div { border: 1px solid var(--linea); border-radius: 10px; padding: 12px 14px; }
.riepilogo strong { display: block; font-size: 26px; font-weight: 300; line-height: 1.1; color: var(--mare-scuro); }
.riepilogo span { font-size: 12px; color: var(--grigio); }
.tabella td.numero, .tabella th.numero { text-align: right; }
@media (max-width: 860px) { .riepilogo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }