/* ============================================================================
   Araldo Scuola — le Persone (Revisione 2, B4; tavole 4, 5–5d, 6, 6b, 9–9c
   di docs/Revisione2/04_WEB_SCUOLA.md; docs/WEB_SCUOLA.md §5quater)

   Gli elenchi hanno la testata bianca delle schede (titolo, conteggio, azioni
   a destra, filtri sotto); la riga apre la scheda, le azioni della riga stanno
   in «⋯». La scheda ha la testata bianca FISSA con la striscia del tipo (la
   striscia e' quella del guscio: body[data-tipo]), nome, badge, azioni a
   destra (Annulla · Salva o «Tutto salvato», «⋯»), le tab su una riga a
   parte con l'icona. Mai pulsanti in basso (W9).
   ========================================================================== */

:root {
    --bambino: #E86A92; --bambino-tinta: #FCE4EC;
    --familiare: #1FA89B; --familiare-tinta: #D9F3F0;
    --personale: #5B7290; --personale-tinta: #E3E9F2;
}

/* --- Elenchi --------------------------------------------------------------- */
body[data-modulo="bambini"] .contenuto, body[data-modulo="famiglie"] .contenuto, body[data-modulo="personale"] .contenuto { gap: 16px; }

.elenco-testa { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 22px 24px 18px; background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); }
.elenco-testa > div:first-child { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 2px; }
.elenco-testa h1 { font-size: 30px; line-height: 36px; }
.elenco-testa .sottotitolo { font-size: 15px; color: var(--testo-2); font-weight: 600; }

.elenco-filtri { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.elenco-filtri .campo-gruppo { flex: 1 1 260px; max-width: 420px; }
.elenco-filtri .pillole { display: flex; gap: 6px; flex-wrap: wrap; }
.elenco-filtri select.campo { width: auto; min-width: 180px; }
.elenco-filtri .ambito { font-size: 13px; color: var(--testo-2); font-weight: 700; align-self: center; }

.elenco { background: var(--superficie); border: 1px solid var(--riquadro-bordo); border-radius: 12px; box-shadow: var(--ombra-riquadro); overflow: hidden; }
.elenco-intesta, .elenco-riga { display: grid; align-items: center; gap: 14px; padding: 0 20px; }
.elenco-intesta { height: 40px; font-size: 12px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid var(--linea); background: #FFFCF7; }
.elenco-riga { min-height: var(--riga); border-bottom: 1px solid var(--linea); cursor: pointer; color: var(--inchiostro); text-decoration: none; font-size: 15px; }
.elenco-riga:last-child { border-bottom: 0; }
.elenco-riga:hover { background: var(--marchio-tinta-chiara); }
.elenco-riga > * { min-width: 0; }
.elenco-riga .chi { display: flex; align-items: center; gap: 12px; }
.elenco-riga .chi .avatar { --lato: calc(var(--riga) - 2 * var(--riga-pad) - 4px); }
.elenco-riga .chi > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.elenco-riga .chi b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elenco-riga .chi small { font-size: 12px; color: var(--testo-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elenco-riga .muto { font-size: 14px; }
.elenco-riga .num { font-variant-numeric: tabular-nums; }
.elenco-riga .menu { justify-self: end; position: relative; }
.elenco-riga .menu .pls { opacity: .6; }
.elenco-riga:hover .menu .pls, .elenco-riga .menu .pls[aria-expanded="true"] { opacity: 1; }
.elenco-riga .menu .tendina { top: 40px; }
html[data-densita="compatta"] .elenco-riga { font-size: 14px; }
html[data-densita="compatta"] .elenco-riga .chi small { display: none; }
.elenco-vuoto { padding: 48px 20px; }
.elenco-piede { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; font-size: 13px; color: var(--testo-2); font-weight: 700; border-top: 1px solid var(--linea); background: #FFFCF7; }

.colonne-bambini   { grid-template-columns: minmax(220px, 2fr) minmax(120px, 1fr) minmax(180px, 2fr) 110px 44px; }
.colonne-famiglie  { grid-template-columns: minmax(220px, 2fr) minmax(220px, 2fr) minmax(140px, 1.2fr) 120px 44px; }
.colonne-personale { grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(160px, 1.4fr) minmax(120px, 1fr) 110px 44px; }
@media (max-width: 1000px) {
    .colonne-bambini   { grid-template-columns: minmax(200px, 2fr) minmax(110px, 1fr) 100px 44px; }
    .colonne-bambini .col-famiglia { display: none; }
    .colonne-famiglie  { grid-template-columns: minmax(200px, 2fr) minmax(180px, 2fr) 44px; }
    .colonne-famiglie .col-contatti, .colonne-famiglie .col-accesso { display: none; }
    .colonne-personale { grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(140px, 1.4fr) 44px; }
    .colonne-personale .col-contatti, .colonne-personale .col-oggi { display: none; }
}

/* --- Badge e stati ----------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 800; white-space: nowrap; background: var(--sabbia); color: var(--testo-3); max-width: 100%; }
.badge > span { overflow: hidden; text-overflow: ellipsis; }
.badge .punto { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.badge-bambino { background: var(--bambino-tinta); color: #9A2F55; }
.badge-familiare { background: var(--familiare-tinta); color: #0F6E64; }
.badge-personale { background: var(--personale-tinta); color: #3A4D68; }
.badge-ok { background: var(--presente-tinta); color: var(--presente-testo); }
.badge-attesa { background: var(--assente-tinta); color: var(--assente-testo); }
.badge-spento { background: var(--sabbia); color: var(--testo-2); }
.badge-rosso { background: var(--pericolo-tinta); color: var(--pericolo); }
.badge-lavanda { background: var(--gruppo); color: var(--gruppo-testo); }
.badge-contorno { background: transparent; border: 1.5px solid var(--linea-campo); }
.badge .ico { width: 14px; height: 14px; }

/* --- La scheda ----------------------------------------------------------- */
body[data-tipo] .contenuto { padding-top: 0; gap: 20px; }
.scheda-testa {
    position: sticky; top: calc(var(--testa-alta) + var(--striscia-alta)); z-index: 20;
    margin: 0 -40px; padding: 18px 40px 0; background: var(--superficie); border-bottom: 1px solid var(--riquadro-bordo); box-shadow: 0 2px 6px rgba(58, 20, 5, .05);
}
.scheda-identita { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; }
.scheda-foto { position: relative; width: 72px; height: 72px; flex: none; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.scheda-foto .avatar { --lato: 72px; font-size: 28px; }
.scheda-foto::after { content: "Foto"; position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0 5px; font-size: 11px; font-weight: 800; border-radius: 0 0 36px 36px; background: rgba(18, 59, 53, .72); color: #FFF; opacity: 0; transition: opacity .12s; }
.scheda-foto:hover::after, .scheda-foto:focus-visible::after { opacity: 1; }
.scheda-foto[disabled] { cursor: default; }
.scheda-foto[disabled]::after { display: none; }
.scheda-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.scheda-nome h1 { font-size: 30px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scheda-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--testo-2); font-weight: 700; }
.scheda-badge .sep { color: var(--campo-bordo); }
.scheda-azioni { display: flex; align-items: center; gap: 10px; flex: none; position: relative; }
.scheda-azioni .salvato { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: var(--testo-2); }
.scheda-azioni .salvato .ico { color: var(--presente); }
.scheda-azioni .modifiche { font-size: 14px; font-weight: 800; color: var(--marchio); }
.scheda-azioni .tendina { top: 48px; }

.scheda-tab { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.scheda-tab::-webkit-scrollbar { display: none; }
.scheda-tab button {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px;
    border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--testo-2);
    font-weight: 800; font-size: 15px; white-space: nowrap; position: relative;
}
.scheda-tab button:hover { color: var(--inchiostro); }
.scheda-tab button[aria-selected="true"] { color: var(--inchiostro); border-bottom-color: var(--marchio); }
.scheda-tab button .pallino { width: 8px; height: 8px; border-radius: 4px; background: var(--marchio); }
.scheda-tab button .conta { min-width: 20px; height: 20px; font-size: 11px; background: var(--sabbia); color: var(--testo-3); }

.scheda-corpo { display: flex; flex-direction: column; gap: 20px; }
.scheda-corpo [role="tabpanel"] { display: flex; flex-direction: column; gap: 20px; }
.scheda-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.scheda-colonne > .riquadro.larga { grid-column: span 2; }
@media (max-width: 1000px) { .scheda-colonne { grid-template-columns: 1fr; } .scheda-colonne > .riquadro.larga { grid-column: auto; } }
.riquadro h2 { display: flex; align-items: center; gap: 10px; font-size: 19px; line-height: 24px; }
.riquadro h2 .spazio { flex: 1; }
.riquadro h2 .pls { height: 36px; }
.riquadro .nota { font-size: 14px; color: var(--testo-2); }
.griglia-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.griglia-campi .larga { grid-column: span 2; }
@media (max-width: 700px) { .griglia-campi { grid-template-columns: 1fr; } .griglia-campi .larga { grid-column: auto; } }
.campo[readonly] { background: var(--sabbia); border-color: var(--linea-campo); color: var(--testo-3); }
.campo-sola-lettura { height: var(--campo-alto); display: flex; align-items: center; padding: 0 2px; font-weight: 700; }

/* Righe dentro i riquadri: una persona, una sezione, un periodo */
.righe { display: flex; flex-direction: column; }
.riga { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.riga:first-child { border-top: 0; }
.riga > .testo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.riga > .testo b { font-size: 15px; }
.riga > .testo span { color: var(--testo-2); }
.riga > .testo a { font-weight: 800; text-decoration: none; }
.riga > .testo a:hover { text-decoration: underline; }
.riga .destra { display: flex; align-items: center; gap: 8px; flex: none; }
.riga.spenta { opacity: .55; }

/* Il legame (W26): ruolo, i quattro diritti, la scadenza; il pallino segna il diverso dal default */
.legame { display: flex; flex-direction: column; gap: 10px; padding: 14px 0; border-top: 1px solid var(--linea); }
.legame:first-child { border-top: 0; }
.legame-testa { display: flex; align-items: center; gap: 12px; }
.legame-testa .testo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.legame-testa .testo b { font-size: 15px; }
.legame-testa .testo span { color: var(--testo-2); font-size: 13px; }
.legame-testa select.campo { width: auto; height: 38px; }
.legame-diritti { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-left: 52px; }
.legame-fine { display: flex; align-items: center; gap: 10px; padding-left: 52px; font-size: 13px; color: var(--testo-2); font-weight: 700; }
.legame-fine input.campo { width: 160px; height: 36px; }
.interruttore { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--testo-3); cursor: pointer; position: relative; }
.interruttore input { width: 36px; height: 20px; appearance: none; border-radius: 10px; background: var(--linea-campo); position: relative; transition: background .15s; cursor: pointer; margin: 0; }
.interruttore input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #FFF; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.interruttore input:checked { background: var(--marchio); }
.interruttore input:checked::after { left: 18px; }
.interruttore input:disabled { opacity: .5; cursor: default; }
.interruttore .diverso { width: 8px; height: 8px; border-radius: 4px; background: var(--marchio); }

/* Caselle (diete, moduli del diario) */
.caselle { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.casella { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--testo-3); cursor: pointer; }
.casella input { width: 18px; height: 18px; accent-color: var(--marchio); margin: 0; }

/* Le tessere delle sezioni e dei figli */
.tessere { display: flex; flex-wrap: wrap; gap: 10px; }
.tessera-persona { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1.5px solid var(--riquadro-bordo); border-radius: 10px; text-decoration: none; color: var(--inchiostro); background: var(--superficie); }
.tessera-persona:hover { border-color: var(--marchio); color: var(--inchiostro); }
.tessera-persona > span { display: flex; flex-direction: column; line-height: 1.2; }
.tessera-persona b { font-size: 14px; }
.tessera-persona small { font-size: 12px; color: var(--testo-2); font-weight: 700; }

/* Lo stato dell'accesso del genitore (AB21) */
.accesso-stato { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.accesso-stato.pieno { background: var(--presente-tinta); color: var(--presente-testo); }
.accesso-stato.consultazione { background: var(--assente-tinta); color: var(--assente-testo); }
.accesso-stato.nessuno { background: var(--sabbia); color: var(--testo-3); }

/* Il registro (W14): filtri a pillole, eventi in colonna con la riga del tempo */
.registro-filtri { display: flex; flex-wrap: wrap; gap: 6px; }
.registro { display: flex; flex-direction: column; }
.registro-evento { display: grid; grid-template-columns: 110px 34px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.registro-evento:first-child { border-top: 0; }
.registro-evento .quando { display: flex; flex-direction: column; line-height: 1.2; color: var(--testo-2); font-weight: 700; font-size: 13px; }
.registro-evento .quando b { color: var(--inchiostro); font-size: 14px; }
.registro-evento .tessera { width: 30px; height: 30px; }
.registro-evento .tessera .ico { width: 16px; height: 16px; }
.registro-evento .testo { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.registro-evento .testo small { color: var(--testo-2); font-weight: 700; }
.registro-evento .testo .badge { align-self: flex-start; margin-bottom: 2px; }
.registro-giorno { padding: 14px 0 4px; font-size: 13px; font-weight: 800; color: var(--testo-2); text-transform: uppercase; letter-spacing: .03em; }

/* Password generata una volta sola */
.password-mostrata { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 10px; background: var(--assente-tinta); color: var(--inchiostro); }
.password-mostrata code { font: 800 22px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; }

/* Finestre delle Persone: cerca una persona, scegli, conferma */
.scelta-persone { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; }
.scelta-persone .riga-scelta { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--linea); background: transparent; text-align: left; cursor: pointer; color: var(--inchiostro); font-size: 14px; }
.scelta-persone .riga-scelta:last-child { border-bottom: 0; }
.scelta-persone .riga-scelta:hover { background: var(--marchio-tinta-chiara); }
.scelta-persone .riga-scelta[aria-pressed="true"] { background: var(--marchio-tinta); }
.scelta-persone .riga-scelta > span { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.scelta-persone .riga-scelta small { font-size: 12px; color: var(--testo-2); font-weight: 700; }
.pls-riga { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 1024px) {
    .scheda-testa { margin: 0 -20px; padding: 14px 20px 0; }
    .scheda-nome h1 { font-size: 24px; line-height: 30px; }
    .scheda-foto { width: 56px; height: 56px; }
    .scheda-foto .avatar { --lato: 56px; font-size: 22px; }
}