/**
 * Impostazioni.
 *
 * Quasi tutta la schermata e' fatta di pezzi del kit: schede, righe, campi,
 * pastiglie. Le cose sue sono quattro: la spalla con le cinque voci, la griglia
 * degli orari, il cerchio del logo e la fascia della copertina.
 *
 * `mytap-profile.css` e `mytap-profile-mobile.css` **non si caricano piu'**:
 * vestivano il markup vecchio (`.pf-page`, `.pf-section`, `.pf-hero-card`), che
 * non esiste piu'. Erano diventati due fogli che non agganciavano piu' niente.
 *
 * LA SPALLA STA QUI E NON NEL KIT, e la ragione e' la stessa per cui il kit
 * esiste: nel disegno `.subnav` e `.split` sono classi generali, ma nell'app le
 * usa **una schermata sola**. Una regola nel kit e' una regola che tutti si
 * portano dietro; se domani servisse anche altrove, si sposta allora, con due
 * casi veri davanti invece che con uno immaginato.
 * (`fedelta.css` ha gia' un `.fedelta-split` che fa la stessa cosa: quando
 * saranno tre, diventeranno una sola nel kit. E' segnato nel ripasso finale.)
 */

/* Stesso cappello delle altre sezioni del giro. */
.imp-sezione { max-width: 1240px; }

/* ── La spalla con le cinque voci ──────────────────────────────────── */

.imp-split {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.imp-subnav {
    width: 186px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.imp-subnav button {
    border: 0;
    background: transparent;
    font-family: var(--nk-font);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--nk-muted);
    text-align: left;
    padding: 9px 12px;
    border-radius: var(--nk-r-sm);
    cursor: pointer;
    transition: background .18s var(--nk-ease), color .18s var(--nk-ease);
}

.imp-subnav button:hover { color: var(--nk-paper); background: var(--nk-ink-2); }

.imp-subnav button[aria-selected="true"] {
    background: var(--nk-ink-2);
    color: var(--nk-accent-ink);
    font-weight: 600;
}

.imp-subnav button:focus-visible { outline: 2px solid var(--nk-accent); outline-offset: 2px; }

.imp-corpo { flex: 1; min-width: 0; }

/* `hidden` da solo perde contro qualunque regola di display che arrivi dopo.
   Detto una volta qui, invece di accendere e spegnere con lo stile in linea. */
.imp-voce[hidden] { display: none; }

/* ── Le file di campi ──────────────────────────────────────────────── */

/**
 * ⚠ IL NUMERO DI COLONNE SI DECIDE.
 *
 * `.nk-g2` e `.nk-g3` del kit sono `auto-fit minmax(...)`: dentro la colonna
 * stretta che resta accanto alla spalla aprono una traccia in piu' o in meno a
 * seconda dei pixel, e i campi si spostano da soli mentre si scrive. E' la
 * quarta volta in questo giro, dopo Pagine, i Premi e Statistiche.
 */
.imp-due  { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.imp-tre  { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

@media (max-width: 620px) {
    .imp-due, .imp-tre { grid-template-columns: minmax(0, 1fr); }
}

/* Dentro una griglia il margine sotto al campo lo fa gia' il `gap`. */
.imp-due > .nk-fld:last-child,
.imp-tre > .nk-fld:last-child { margin-bottom: 0; }

.imp-fondo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* ── Il logo ───────────────────────────────────────────────────────── */

.imp-logo-riga {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}

.imp-logo {
    width: 64px;
    height: 64px;
    border-radius: var(--nk-r-md);
    background: var(--nk-ink-3);
    border: 1px solid var(--nk-line);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--nk-muted-2);
}

.imp-logo img { width: 100%; height: 100%; object-fit: cover; }

/* ── La copertina ──────────────────────────────────────────────────── */

.imp-banner {
    height: 128px;
    border-radius: var(--nk-r-sm);
    background: var(--nk-ink-3) center / cover no-repeat;
    border: 1px solid var(--nk-line);
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 11px;
}

/* ── Gli orari ─────────────────────────────────────────────────────── */

/**
 * Sette righe, e ognuna deve restare leggibile mentre si compila. Le colonne
 * sono fisse e non `auto`: con `auto` la larghezza del nome del giorno cambia
 * da riga a riga («Lunedi'» contro «Mercoledi'») e le caselle dell'ora ballano
 * in verticale, che su sette righe si vede benissimo.
 */
.imp-orari { display: flex; flex-direction: column; }

.imp-giorno {
    display: grid;
    grid-template-columns: 104px 92px 1fr;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--nk-line);
}

.imp-giorno:last-child { border-bottom: 0; }

.imp-giorno-nome { font-size: 13.5px; font-weight: 550; letter-spacing: -.012em; }

.imp-giorno-chiuso { font-size: 12.5px; color: var(--nk-muted); }
.imp-giorno-chiuso input { margin-top: 0; }

.imp-fasce { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.imp-fascia { display: inline-flex; align-items: center; gap: 6px; }

.imp-fascia .nk-inp { width: auto; min-width: 104px; padding: 6px 9px; font-size: 12.5px; }

.imp-tratto { color: var(--nk-muted-2); font-size: 12px; }

/* Chiuso: gli orari restano nel documento (se riapri il martedi' li ritrovi)
   ma si spengono, perche' un giorno chiuso con «12:00-14:30» accanto dice due
   cose insieme. */
.imp-giorno.e-chiuso .imp-fasce { opacity: .32; pointer-events: none; }

.imp-orari-aiuto { margin-top: 11px; }

@media (max-width: 760px) {
    .imp-giorno {
        grid-template-columns: 1fr auto;
        row-gap: 6px;
        padding: 11px 0;
    }
    .imp-fasce { grid-column: 1 / -1; }
}

/* ── Lo stato dei canali ───────────────────────────────────────────── */

/* Testo e non pastiglia, come in fedelta': la pastiglia colorata accanto a un
   pallino grigio dice due cose diverse sulla stessa riga. */
.imp-stato { font-size: 12px; color: var(--nk-muted); }
.imp-stato.e-ok { color: var(--nk-success-ink); font-weight: 600; }

/* «Da finire»: collegamento cominciato e non concluso. Arancione e non rosso,
   perche' non e' un guasto, e' una cosa a meta'. Grigio come «Non collegato»
   sarebbe peggio di tutto: chi si e' fermato a meta' non saprebbe di doverci
   tornare. */
.imp-stato.e-mezzo { color: var(--nk-warn-ink); font-weight: 600; }

/* ── Le pagine della vetrina ───────────────────────────────────────── */

.imp-pagina { cursor: pointer; gap: 11px; }
.imp-pagina input { width: 16px; height: 16px; accent-color: var(--nk-accent); flex-shrink: 0; }
.imp-pagina input:disabled { cursor: default; }

/* ── Sito e social, chiusi finche' non servono ─────────────────────── */

.imp-social > summary {
    cursor: pointer;
    list-style: none;
    margin-bottom: 0;
}
.imp-social > summary::-webkit-details-marker { display: none; }
.imp-social > summary::after {
    content: ' +';
    color: var(--nk-accent);
    font-weight: 700;
}
.imp-social[open] > summary::after { content: ' –'; }

/* ── Scarica i tuoi dati ───────────────────────────────────────────── */

.imp-scarica { display: flex; gap: 9px; flex-wrap: wrap; }

/* ── Il telefono ───────────────────────────────────────────────────── */

/**
 * La spalla diventa una fila che scorre, come nel disegno
 * (`.vp[data-w=mobile] .subnav`). Non un menu a tendina: cinque voci sono
 * poche, e una tendina nasconde dove sei.
 */
@media (max-width: 900px) {
    .imp-split { flex-direction: column; gap: 14px; }

    .imp-subnav {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .imp-subnav::-webkit-scrollbar { display: none; }
    .imp-subnav button { white-space: nowrap; flex-shrink: 0; }

    .imp-corpo { width: 100%; }
}