/**
 * REPO: dashboard-consulenti
 * MODULE: public/css/centro-rinnovi-plancia.css
 * PURPOSE: Stile della «plancia del giorno» del Centro Rinnovi (fascia
 *          orizzontale in testa alla pagina: foglio di calendario + saluto,
 *          agenda 7 giorni, tre riquadri KPI, prossima chiamata). Il markup
 *          e' generato da js/centro-rinnovi-plancia.js (window.CRPlancia).
 * DEPENDENCIES: gettoni --cr-* e font Sofia Pro definiti in
 *          css/centro-rinnovi.css (qui usati sempre con fallback
 *          var(--cr-x, <valore>), cosi' il foglio funziona anche da solo,
 *          es. nel banco di prova, se quel file non fosse ancora caricato).
 *          Nessun altro file CSS.
 * EXPOSES: solo selettori con prefisso .crp- — nessuna classe condivisa con
 *          altri fogli della pagina.
 * LAST REVIEWED: 2026-10-03
 * WARNINGS: tutto il markup cliccabile generato da CRPlancia e' un
 *          <button>: qui si cura lo stato :focus-visible e [disabled], mai
 *          toglierli. .crp-agenda scorre ORIZZONTALMENTE AL SUO INTERNO
 *          sotto i 1024px (overflow-x:auto) apposta per non far scrollare
 *          la pagina intera a 390px: non toglierlo.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-02 [AI] Added: prima stesura (operaio K1, in parallelo con K2
 *          [mappa scadenze], K3 [integrazione nella pagina] e K4 [banco di
 *          prova]).
 * 2026-10-03 [AI] Fixed (operaio G): niente arancione — --cr-amber ora e' il
 *          giallo marchio (regista). Il testo di .crp-kpi-azione.is-ambra
 *          («N senza promemoria») era rimasto in var(--cr-amber): giallo su
 *          bianco, illeggibile. Testo portato a --cr-ink, sottolineatura
 *          neutra (--cr-line-2) e un pallino giallo (::before) accanto per
 *          mantenere il richiamo visivo senza testo colorato.
 */

.crp-root [hidden] { display: none !important; }

.crp-root {
    font-family: var(--cr-font, 'Sofia Pro', system-ui, sans-serif);
    color: var(--cr-ink, #121212);
    box-sizing: border-box;
    width: 100%;
}
.crp-root *, .crp-root *::before, .crp-root *::after { box-sizing: border-box; }

.crp-vuoto {
    margin: 0;
    padding: 24px;
    color: var(--cr-ink-3, #8C897F);
    font-size: 14px;
}

/* ---------------------------------------------------------------------
   LAYOUT — griglia a 4 zone: intro (foglio+saluto) | agenda | kpi | prossima
   <1024 impilato, 1024-1279 due righe, >=1280 una riga sola.
--------------------------------------------------------------------- */
.crp-plancia {
    display: grid;
    gap: 14px;
    padding: 16px;
    background: var(--cr-paper, #FAFAF7);
    border: 1px solid var(--cr-line, #ECEAE4);
    border-radius: var(--cr-radius, 14px);
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "agenda" "kpi" "prossima";
}
.crp-cella-intro {
    grid-area: intro;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}
.crp-cella-agenda { grid-area: agenda; min-width: 0; }
.crp-cella-kpi {
    grid-area: kpi;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.crp-cella-prossima { grid-area: prossima; min-width: 0; display: flex; }

@media (max-width: 1023px) {
    .crp-plancia { padding: 14px; gap: 12px; }
}
@media (max-width: 480px) {
    .crp-cella-intro { flex-direction: column; align-items: flex-start; }
    /* .crp-foglio e .crp-saluto per questo breakpoint sono in fondo al
       file (dopo le rispettive regole base): stessa specificita', quindi
       l'ordine nel file conta — qui verrebbero sovrascritte. */
}

/* Colonne a larghezza ESPLICITA (minmax, mai "auto"): con un item a
   min-width:0 dentro, una colonna "auto" si rimette in gara alla pari con
   la colonna 1fr dell'agenda e puo' schiacciarla a 0 — verificato con
   puppeteer (vedi CHANGE LOG). */
@media (min-width: 1024px) {
    .crp-plancia {
        grid-template-columns: minmax(230px, 270px) minmax(260px, 1fr) minmax(340px, 400px);
        grid-template-areas: "intro agenda kpi" "prossima prossima prossima";
    }
}
@media (min-width: 1280px) {
    .crp-plancia {
        grid-template-columns: minmax(230px, 270px) minmax(300px, 1fr) minmax(340px, 400px) minmax(200px, 220px);
        grid-template-areas: "intro agenda kpi prossima";
    }
}

/* ---------------------------------------------------------------------
   FOGLIO DI CALENDARIO + SALUTO
--------------------------------------------------------------------- */
.crp-foglio {
    flex: 0 0 auto;
    min-width: 108px;
    padding: 10px 14px;
    background: var(--cr-bg, #FFFFFF);
    border: 1px solid var(--cr-line, #ECEAE4);
    border-radius: var(--cr-radius-sm, 10px);
    text-align: center;
}
.crp-foglio-giorno {
    margin: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cr-ink-3, #8C897F);
}
.crp-foglio-numero {
    margin: 2px 0;
    font-family: var(--cr-font, 'Sofia Pro'), sans-serif;
    font-weight: 300;
    font-size: 44px;
    line-height: 1;
    color: var(--cr-ink, #121212);
    font-variant-numeric: tabular-nums;
}
.crp-foglio-mese {
    margin: 0;
    font-size: 12px;
    color: var(--cr-ink-2, #4F4D47);
    text-transform: capitalize;
}
.crp-foglio-settimana {
    margin: 4px 0 0;
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cr-ink-3, #8C897F);
}

.crp-saluto { flex: 1 1 150px; min-width: 150px; }
.crp-saluto-testo {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 500;
    color: var(--cr-ink, #121212);
}
.crp-saluto-frase {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cr-ink-2, #4F4D47);
}

/* ---------------------------------------------------------------------
   AGENDA 7 GIORNI — scorre orizzontalmente AL SUO INTERNO sotto i 1024px
   (vedi WARNINGS in testa al file: mai farla scrollare con la pagina).
--------------------------------------------------------------------- */
.crp-agenda-titolo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cr-ink-3, #8C897F);
}
.crp-agenda {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    /* padding-top: spazio di sicurezza per il badge "+N in ritardo" (vedi
       sotto), che sporge sopra la cella Oggi con top negativo: senza
       questo spazio verrebbe tagliato dal bordo dell'overflow-x:auto
       (overflow-x e overflow-y non possono avere valori "scollegati": se
       uno e' auto/scroll, l'altro visible diventa comunque auto). */
    padding: 16px 2px 2px;
    -webkit-overflow-scrolling: touch;
}
.crp-giorno-wrap { position: relative; flex: 1 1 0; min-width: 54px; }
.crp-giorno {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 4px 6px;
    background: var(--cr-bg, #FFFFFF);
    border: 1px solid var(--cr-line, #ECEAE4);
    border-radius: var(--cr-radius-sm, 10px);
    cursor: pointer;
    font-family: inherit;
    color: var(--cr-ink, #121212);
    transition: background-color .15s ease, border-color .15s ease;
}
.crp-giorno:hover { border-color: var(--cr-line-2, #DEDBD2); }
.crp-giorno.is-vuota { opacity: .55; }
.crp-giorno.is-attiva {
    background: var(--cr-accent-soft, #FFF6CC);
    border-color: var(--cr-accent, #FFD60A);
}
.crp-giorno-etichetta {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--cr-ink-2, #4F4D47);
    white-space: nowrap;
}
.crp-giorno-numero {
    font-family: var(--cr-font, 'Sofia Pro'), sans-serif;
    font-weight: 300;
    font-size: 22px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.crp-giorno-barra {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: var(--cr-line, #ECEAE4);
    overflow: hidden;
}
.crp-giorno-barra-riempi {
    display: block;
    height: 100%;
    background: var(--cr-accent, #FFD60A);
    border-radius: inherit;
}
.crp-giorno.is-vuota .crp-giorno-barra-riempi { background: var(--cr-line-2, #DEDBD2); }

.crp-giorno-badge {
    /* Ancorato a sinistra (non a destra): e' sempre la prima cella della
       riga (Oggi), quindi crescere verso destra (dentro lo spazio delle
       celle successive) invece che verso sinistra evita che il testo
       venga tagliato dal bordo sinistro di .crp-agenda (overflow-x:auto). */
    position: absolute;
    top: -12px;
    left: 2px;
    border: none;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 9.5px;
    font-weight: 600;
    color: #fff;
    background: var(--cr-red, #D93636);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(18, 18, 18, .18);
}
.crp-giorno-badge.is-attivo { outline: 2px solid var(--cr-accent, #FFD60A); outline-offset: 1px; }

/* ---------------------------------------------------------------------
   TRE RIQUADRI KPI — titolo parlante + numero grande + riga cliccabile
--------------------------------------------------------------------- */
.crp-kpi {
    flex: 1 1 122px;
    min-width: 122px;
    padding: 10px 12px;
    background: var(--cr-bg, #FFFFFF);
    border: 1px solid var(--cr-line, #ECEAE4);
    border-radius: var(--cr-radius-sm, 10px);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.crp-kpi-titolo {
    margin: 0;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cr-ink-3, #8C897F);
}
.crp-kpi-numero {
    margin: 0;
    font-family: var(--cr-font, 'Sofia Pro'), sans-serif;
    font-weight: 300;
    font-size: 28px;
    line-height: 1.15;
    color: var(--cr-ink, #121212);
    font-variant-numeric: tabular-nums;
}
.crp-kpi-azione {
    margin-top: 2px;
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--cr-ink-2, #4F4D47);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--cr-line-2, #DEDBD2);
    text-underline-offset: 2px;
}
.crp-kpi-azione:hover { color: var(--cr-ink, #121212); }
/* 2026-10-03 [AI] "Ambra" = giallo marchio ora: niente piu' testo giallo su
   bianco (illeggibile). Nero + pallino giallo accanto (::before). */
.crp-kpi-azione.is-ambra { color: var(--cr-ink, #121212); text-decoration-color: var(--cr-line-2, #DEDBD2); }
.crp-kpi-azione.is-ambra::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--cr-amber, #FFD60A);
    vertical-align: middle;
}
.crp-kpi-azione.is-attiva {
    color: var(--cr-accent-ink, #1F1A00);
    background: var(--cr-accent-soft, #FFF6CC);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: -6px;
}
.crp-kpi-azione[disabled] { cursor: default; color: var(--cr-ink-3, #8C897F); text-decoration: none; }
.crp-kpi-azione strong { font-weight: 600; color: inherit; }

/* ---------------------------------------------------------------------
   PROSSIMA CHIAMATA
--------------------------------------------------------------------- */
.crp-prossima {
    width: 100%;
    min-width: 220px;
    padding: 14px 16px;
    background: var(--cr-accent-soft, #FFF6CC);
    border: 1px solid var(--cr-accent, #FFD60A);
    border-radius: var(--cr-radius-sm, 10px);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.crp-prossima-titolo {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cr-accent-ink, #1F1A00);
    opacity: .75;
}
.crp-prossima-cliente { margin: 0; font-size: 16px; font-weight: 600; color: var(--cr-ink, #121212); }
.crp-prossima-auto { margin: 0; font-size: 12.5px; color: var(--cr-ink-2, #4F4D47); }
.crp-prossima-motivo { margin: 0 0 8px; font-size: 12.5px; color: var(--cr-ink-2, #4F4D47); }
.crp-prossima-ok { margin: 4px 0 0; font-size: 14px; color: var(--cr-ink-2, #4F4D47); }
.crp-btn-primario {
    align-self: flex-start;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    background: var(--cr-ink, #121212);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .1s ease, background-color .15s ease;
}
.crp-btn-primario:hover { background: #000; }
.crp-btn-primario:active { transform: scale(.97); }

/* ---------------------------------------------------------------------
   FOCUS, ACCESSIBILITA' E MOVIMENTO RIDOTTO
--------------------------------------------------------------------- */
:where(.crp-root) :where(button) { font: inherit; } /* 2026-10-02 [regista] specificita' zero: prima batteva il font-size delle classi (.crp-kpi-azione usciva a 16px) */
.crp-root button:focus-visible {
    outline: 2px solid var(--cr-blue, #2B59C3);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .crp-root * { transition: none !important; animation: none !important; }
}

/* Sotto i 480px .crp-cella-intro passa a colonna (vedi sopra): il foglio
   diventa a tutta larghezza e il testo si allinea a sinistra come il
   saluto sotto, invece di restare centrato in una card stretta. Deve stare
   DOPO la regola base .crp-foglio{text-align:center} per vincere a parita'
   di specificita'. */
@media (max-width: 480px) {
    .crp-foglio { text-align: left; width: 100%; }
    /* In flex-direction:column (vedi sopra) il "150px" di
       .crp-saluto{flex:1 1 150px} (regola base, pensata per la riga
       desktop) verrebbe letto come ALTEZZA minima invece che larghezza,
       lasciando un vuoto sotto la frase: qui si azzera la flex-basis e si
       passa a width:100%. */
    .crp-saluto { flex: 0 0 auto; min-width: 0; width: 100%; }
}