/**
 * REPO: yoyohub-v2
 * MODULE: public/css/crtl-verifica.css
 * PURPOSE: Stile della sezione «Da verificare» (js/crtl-verifica.js): testata,
 *          linguette con conteggio (Tutti/Numero errato/Non presente su
 *          MyBoard), schede a riga (non tabella) con telefono grande
 *          (barrato se errato), blocchi informativi (telefono/MyBoard), il
 *          modulo di verifica (esito a 3 scelte grandi + nota + invio) e
 *          messaggi di errore. Stesso aspetto professionale, pagina bianca,
 *          della sezione Analisi Farm.
 * DEPENDENCIES: css/centro-rinnovi-tl.css (gettoni --crtl-*, .crtl-card,
 *          .crtl-btn*, .crtl-pill*, [hidden]).
 * EXPOSES: classi .crtl-ve-* usate solo da js/crtl-verifica.js.
 * LAST REVIEWED: 2026-10-04
 * WARNINGS: Sofia Pro MAI font-weight:600. ZERO arancione: la pillola
 *          «Non su MyBoard» usa --crtl-amber-soft/--crtl-accent-soft (giallo)
 *          con testo NERO (--crtl-ink), mai testo giallo su bianco; l'esito
 *          «Era giusto» è NEUTRO (grigio/inchiostro), non giallo e non ambra.
 *          `.crtl-ve-root [hidden]{display:none!important}` anche se oggi
 *          questo foglio non usa `hidden` sui nodi dinamici (regola di
 *          sicurezza richiesta per ogni foglio nuovo). Breakpoint sulla
 *          LARGHEZZA DELLA FINESTRA (come crtl-analisi.css): 680px e 480px.
 *
 * CHANGE LOG
 * ----------
 * 2026-10-04 [AI] Added: prima stesura (operaio C).
 * 2026-10-04 [AI] Modified (operaio W7, CONTRATTO-4.txt punto 4): rimossi gli
 *          stili dei vecchi pulsanti per-blocco (Corretto/Il numero è
 *          giusto/Verificato, `.crtl-ve-blocco-azioni`); aggiunto il modulo
 *          unico di verifica `.crtl-ve-verifica` (3 pulsanti esito grandi
 *          `.crtl-ve-esito-btn--verde/--neutro/--rosso`, nota con contatore
 *          `.crtl-ve-nota-wrap`, pulsante `.crtl-ve-invia`); il blocco
 *          «numero errato» ora ha solo l'etichetta + il campo telefono
 *          (`.crtl-ve-campo-label`), il blocco MyBoard resta solo informativo.
 */

.crtl-ve-root [hidden]{display:none!important}

.crtl-ve-root{display:flex; flex-direction:column; gap:18px}

/* ============================================ 1 · TESTATA ===== */
.crtl-ve-testata{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap}
.crtl-ve-titolo{margin:0; font-size:22px; font-weight:700; letter-spacing:-.01em}
.crtl-ve-sotto{margin:2px 0 0; color:var(--crtl-ink-3); font-weight:500}

/* ============================================ 2 · LINGUETTE ===== */
.crtl-ve-tabs{display:flex; gap:8px; flex-wrap:wrap}
.crtl-ve-tab{
  height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--crtl-line-2); background:#fff;
  font:inherit; font-weight:500; cursor:pointer; display:inline-flex; align-items:center; gap:7px; color:var(--crtl-ink-2);
  transition:border-color .15s ease, background .15s ease;
}
.crtl-ve-tab:hover{border-color:var(--crtl-ink-3)}
.crtl-ve-tab.is-attiva{background:#121212; color:#fff; border-color:#121212}
.crtl-ve-tab-n{font-size:12px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center; background:var(--crtl-paper-2); color:var(--crtl-ink-2)}
.crtl-ve-tab.is-attiva .crtl-ve-tab-n{background:rgba(255,255,255,.18); color:#fff}
.crtl-ve-tab--rosso .crtl-ve-tab-n{background:var(--crtl-red-soft); color:var(--crtl-red)}
.crtl-ve-tab--giallo .crtl-ve-tab-n{background:var(--crtl-accent-soft); color:var(--crtl-accent-ink)}
.crtl-ve-tab--rosso.is-attiva{border-color:var(--crtl-red)}
.crtl-ve-tab--giallo.is-attiva{border-color:#E8C200}

/* ============================================ 3 · LISTA + SCHEDE ===== */
.crtl-ve-lista{display:flex; flex-direction:column; gap:12px}
.crtl-ve-vuoto{margin:0; padding:40px 20px; text-align:center; color:var(--crtl-ink-2); font-weight:500; font-size:15px; background:var(--crtl-green-soft); border:1px solid transparent; border-radius:var(--crtl-radius)}

.crtl-ve-card{
  background:#fff; border:1px solid var(--crtl-line); border-radius:var(--crtl-radius);
  box-shadow:var(--crtl-shadow); overflow:hidden;
}
.crtl-ve-card-testa{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:14px 18px; border-bottom:1px solid var(--crtl-line)}
.crtl-ve-card-id{display:flex; flex-direction:column; gap:2px; min-width:0}
.crtl-ve-card-cliente{font-weight:700; font-size:15px}
.crtl-ve-card-auto{font-size:12.5px; color:var(--crtl-ink-3); font-weight:500}
.crtl-ve-card-pills{display:flex; gap:6px; flex-wrap:wrap; flex:none}

.crtl-ve-card-corpo{padding:14px 18px 18px; display:flex; flex-direction:column; gap:14px}
.crtl-ve-riga-contatti{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.crtl-ve-telefono{font-size:22px; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums}
.crtl-ve-telefono--errato{color:var(--crtl-ink); text-decoration:line-through; text-decoration-color:var(--crtl-red); text-decoration-thickness:2px}
.crtl-ve-email{font-size:13px; color:var(--crtl-ink-3); font-weight:500; word-break:break-all}

.crtl-ve-meta{display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--crtl-ink-3)}
.crtl-ve-meta strong{color:var(--crtl-ink-2); font-weight:500}

.crtl-ve-blocco{padding:12px 14px; border-radius:var(--crtl-radius-sm); background:var(--crtl-paper-2); border:1px solid var(--crtl-line); display:flex; flex-direction:column; gap:10px}
.crtl-ve-segnalazione{margin:0; font-size:12.5px; color:var(--crtl-ink-3)}
.crtl-ve-campo-label{font-size:12px; color:var(--crtl-ink-3); font-weight:500}
.crtl-ve-input-telefono{height:38px; width:100%; max-width:320px; border-radius:9px; border:1px solid var(--crtl-line-2); padding:0 12px; font-size:14px; background:#fff; font-family:inherit}
.crtl-ve-input-telefono:focus-visible{outline:2px solid var(--crtl-ink); outline-offset:1px}

.crtl-ve-myboard-ids{display:flex; flex-direction:column; gap:6px}
.crtl-ve-myboard-id{display:flex; align-items:center; gap:8px; font-size:13px}
.crtl-ve-myboard-id code{background:#fff; border:1px solid var(--crtl-line); border-radius:7px; padding:3px 8px; font-family:ui-monospace,monospace}
.crtl-ve-copia{border:1px solid var(--crtl-line-2); background:#fff; border-radius:7px; width:26px; height:26px; cursor:pointer; color:var(--crtl-ink-2); flex:none}
.crtl-ve-copia:hover{border-color:var(--crtl-ink-3); color:var(--crtl-ink)}
.crtl-ve-myboard-vuoto{margin:0; font-size:12.5px; color:var(--crtl-ink-3)}

/* ============================================ 3b · MODULO DI VERIFICA ===== */
/* Esito (3 scelte grandi) + nota + «Invia al consulente»: UN modulo per
   riga, uguale sia per «numero errato» sia per «non su MyBoard». */
.crtl-ve-verifica{display:flex; flex-direction:column; gap:12px; padding-top:6px; border-top:1px dashed var(--crtl-line)}

.crtl-ve-esito{display:flex; gap:8px; flex-wrap:wrap}
.crtl-ve-esito-btn{
  flex:1 1 150px; min-width:150px; height:48px; border-radius:10px; border:1.5px solid var(--crtl-line-2);
  background:#fff; font:inherit; font-weight:500; font-size:14px; cursor:pointer; color:var(--crtl-ink-2);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.crtl-ve-esito-btn:hover{border-color:var(--crtl-ink-3)}
.crtl-ve-esito-btn[disabled]{opacity:.55; cursor:default}
.crtl-ve-esito-btn--verde.is-selezionato{background:var(--crtl-green-soft); border-color:var(--crtl-green); color:var(--crtl-green); font-weight:700}
.crtl-ve-esito-btn--neutro.is-selezionato{background:var(--crtl-paper-2); border-color:var(--crtl-ink); color:var(--crtl-ink); font-weight:700}
.crtl-ve-esito-btn--rosso.is-selezionato{background:var(--crtl-red-soft); border-color:var(--crtl-red); color:var(--crtl-red); font-weight:700}

.crtl-ve-nota-wrap{display:flex; flex-direction:column; gap:4px}
.crtl-ve-nota{min-height:64px; resize:vertical; border-radius:9px; border:1px solid var(--crtl-line-2); padding:10px 12px; font:inherit; font-size:14px; background:#fff; color:var(--crtl-ink)}
.crtl-ve-nota:focus-visible{outline:2px solid var(--crtl-ink); outline-offset:1px}
.crtl-ve-nota-conta{align-self:flex-end; font-size:11.5px; color:var(--crtl-ink-3)}

.crtl-ve-invia{align-self:flex-start; min-width:220px}
.crtl-ve-invia[disabled]{opacity:.5; cursor:default}

.crtl-ve-errore{font-size:13px; color:var(--crtl-red); background:var(--crtl-red-soft); border-radius:var(--crtl-radius-sm); padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.crtl-ve-link-btn{border:none; background:transparent; color:var(--crtl-red); font:inherit; font-weight:700; cursor:pointer; text-decoration:underline; padding:0}

/* ============================================ 4 · RESPONSIVE ===== */
@media (max-width:680px){
  .crtl-ve-card-testa{flex-direction:column}
  .crtl-ve-card-pills{flex-wrap:wrap}
  .crtl-ve-input-telefono{max-width:none}
  .crtl-ve-esito-btn{flex:1 1 100%}
  .crtl-ve-invia{align-self:stretch; width:100%}
}
@media (max-width:480px){
  .crtl-ve-tabs{gap:6px}
  .crtl-ve-tab{height:34px; padding:0 10px; font-size:12.5px}
  .crtl-ve-telefono{font-size:18px}
  .crtl-ve-meta{flex-direction:column; gap:6px}
  .crtl-ve-card-testa,.crtl-ve-card-corpo{padding-left:14px; padding-right:14px}
  .crtl-ve-esito-btn{height:44px}
}