/*
 * ═══════════════════════════════════════════════════════════════════════════
 *  BIOMA · I COMPONENTI COMUNI (disegnati una volta)
 *
 *  Regola: i mock includono questo file con
 *      <link rel="stylesheet" href="../comune/componenti.css">
 *  e mettono su un contenitore la classe del tema:
 *      .tema-chiaro  → gestionali (pannello aziende, studio medico)
 *      .tema-scuro   → app (web app operatori, app cliente)
 *  I componenti hanno il prefisso `b-` per non scontrarsi con le classi dei
 *  mock. Prima di disegnare un componente nuovo in un mock, guardare qui.
 *
 *  Leggibilità (contrasto WCAG AA, misurato sul fondo del riquadro):
 *    chiaro  testo 15,2:1 · testo2 7,2:1 · testo3 5,6:1 · rosso 5,9:1
 *    scuro   testo 15,6:1 · testo2 9,1:1 · testo3 6,0:1 (bianco al 56%)
 *  Pillole solo per gli stati. Un solo livello di riquadri. L'accento solo
 *  per l'azione principale e per ciò che è scelto.
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ── i token ── */
.tema-chiaro {
  --b-fondo: #ECEBE7;
  --b-scheda: #F7F6F3;
  --b-superficie: #FFFFFF;
  --b-testo: #1F2021;
  --b-testo2: #4E5053;
  --b-testo3: #5F6164;
  --b-linea: #E2E1DC;
  --b-scuro: #2B2C2D;
  --b-su-scuro: #FFFFFF;
  --b-primario: #E6F14A;         /* il giallo: azione principale e selezione */
  --b-su-primario: #1F2021;
  --b-accento-tenue: rgba(230, 241, 74, .32);
  --b-rosso: #B33A24;
  --b-rosso-tenue: #F7E1DA;
  --b-su-rosso-tenue: #8A2A18;
  --b-verde: #2F5E3B;
  --b-verde-tenue: #E3EEE5;
  --b-grigio-segno: #8D8C88;
  --b-raggio: 22px;
  --b-ombra: none;
  color: var(--b-testo);
}
.tema-scuro {
  --b-fondo: #232425;
  --b-scheda: rgba(38, 39, 40, .60);   /* il vetro antracite uniforme */
  --b-superficie: rgba(255, 255, 255, .06);
  --b-testo: #F3F4F5;
  --b-testo2: rgba(255, 255, 255, .74);
  --b-testo3: rgba(255, 255, 255, .56);
  --b-linea: rgba(255, 255, 255, .13);
  --b-scuro: #E8E8E6;                  /* la perla: nell'app il «pieno» è chiaro */
  --b-su-scuro: #232425;
  --b-primario: #E8E8E6;               /* azione principale = pulsante perla */
  --b-su-primario: #232425;
  --b-accento-tenue: rgba(169, 201, 212, .22);   /* il ghiaccio, solo come velo della selezione */
  --b-ghiaccio: #A9C9D4;
  --b-rosso: #EBA192;
  --b-rosso-tenue: rgba(224, 122, 102, .16);
  --b-su-rosso-tenue: #F2B6A9;
  --b-verde: #9FD0AE;
  --b-verde-tenue: rgba(159, 208, 174, .14);
  --b-grigio-segno: rgba(255, 255, 255, .45);
  --b-raggio: 22px;
  --b-ombra: 0 10px 24px rgba(0, 0, 0, .20);
  color: var(--b-testo);
}
.tema-chiaro, .tema-scuro { font-family: Outfit, system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
.tema-chiaro *, .tema-scuro * { box-sizing: border-box; }
.b-icona { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── riquadro (l'unico livello di contenitore) ── */
.b-riquadro { background: var(--b-scheda); border-radius: var(--b-raggio); padding: 20px; }
.tema-scuro .b-riquadro { border: 1px solid var(--b-linea); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: var(--b-ombra); }
.b-titolo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.b-titolo h3 { font-size: 16px; font-weight: 500; margin: 0; }
.b-titolo span { color: var(--b-testo3); font-size: 13px; }
.b-nota { color: var(--b-testo3); font-size: 13px; }
.b-righe > * + * { border-top: 1px solid var(--b-linea); }

/* ── pulsanti ── */
.b-pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 11px 20px; font: inherit; font-size: 14.5px; font-weight: 500; border: 1px solid var(--b-linea); background: var(--b-superficie); color: var(--b-testo); cursor: pointer; white-space: nowrap; }
.b-pulsante.primario { background: var(--b-primario); color: var(--b-su-primario); border-color: transparent; }
.b-pulsante.scuro { background: var(--b-scuro); color: var(--b-su-scuro); border-color: transparent; }
.b-pulsante.testuale { background: none; border: 0; padding: 11px 6px; color: var(--b-testo2); text-decoration: underline; text-underline-offset: 3px; font-weight: 400; }
.b-pulsante:disabled { opacity: .4; cursor: default; }

/* ── pillola di stato: SOLO per gli stati ── */
.b-stato { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 13px; white-space: nowrap; background: var(--b-superficie); color: var(--b-testo2); border: 1px solid var(--b-linea); }
.b-stato::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.b-stato.attenzione { background: var(--b-rosso-tenue); color: var(--b-su-rosso-tenue); border-color: transparent; }
.b-stato.ok { background: var(--b-verde-tenue); color: var(--b-verde); border-color: transparent; }
.b-stato.evidenza { background: var(--b-primario); color: var(--b-su-primario); border-color: transparent; }
.b-stato.evidenza::before { display: none; }

/* ── controllo segmentato ── */
.b-segmenti { display: inline-flex; background: var(--b-superficie); border: 1px solid var(--b-linea); border-radius: 999px; padding: 3px; gap: 2px; }
.b-segmenti button { font: inherit; font-size: 14px; border: 0; background: none; color: var(--b-testo2); padding: 7px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.b-segmenti button.attivo { background: var(--b-scuro); color: var(--b-su-scuro); }

/* ── avatar ── */
.b-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 500; background: #DDD9D1; color: #4E5053; overflow: hidden; position: relative; }
.tema-scuro .b-avatar { background: rgba(255, 255, 255, .12); color: var(--b-testo); }
.b-avatar.grande { width: 64px; height: 64px; border-radius: 18px; font-size: 18px; }
.b-avatar.foto { background: linear-gradient(160deg, #D6CFC3, #ADA396); }
.b-avatar.foto svg { position: absolute; bottom: 0; width: 80%; }

/* ── scheda dell'operatore (cliente: «chi viene»; aziende: squadra) ── */
.b-operatore { display: flex; gap: 14px; align-items: center; }
.b-operatore b { display: block; font-weight: 500; font-size: 16px; }
.b-operatore .ruolo { color: var(--b-testo2); }
.b-operatore .verifica { display: flex; gap: 6px; align-items: center; color: var(--b-testo2); font-size: 13.5px; margin-top: 4px; }
.b-operatore .verifica svg { color: var(--b-verde); width: 15px; height: 15px; }
.b-operatore .azienda { color: var(--b-testo3); font-size: 13px; margin-top: 2px; }

/* ── riga del documento, con la provenienza ── */
.b-doc { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 2px; }
.b-doc > svg { color: var(--b-testo3); }
.b-doc b { font-weight: 400; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-doc .da { color: var(--b-testo3); font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-doc .da em { font-style: normal; color: var(--b-testo2); }
.b-doc .quando { text-align: right; font-size: 14px; color: var(--b-testo2); white-space: nowrap; }
.b-segno-fuori { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--b-rosso); margin-left: 8px; vertical-align: 1px; }
.b-segno-nuovo { font-size: 11.5px; font-weight: 500; background: var(--b-primario); color: var(--b-su-primario); border-radius: 4px; padding: 0 5px; margin-left: 8px; vertical-align: 1px; }

/* ── riga del valore d'esame, con l'andamento ── */
.b-valore { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(90px, 1.4fr) 96px; gap: 14px; align-items: center; padding: 10px 0; }
.b-valore .nome b { font-weight: 400; display: block; }
.b-valore .nome small { color: var(--b-testo3); font-size: 13px; }
.b-valore svg { width: 100%; height: 30px; display: block; overflow: visible; }
.b-valore .num { text-align: right; font-size: 18px; }
.b-valore .num small { color: var(--b-testo3); font-size: 12.5px; display: block; }
.b-valore.fuori .num { color: var(--b-rosso); }
.b-valore .norma { fill: var(--b-verde-tenue); }
.b-valore .linea { fill: none; stroke: var(--b-testo); stroke-width: 1.6; }
.b-valore .ultimo { fill: var(--b-testo); stroke: var(--b-fondo); stroke-width: 2; }
.b-valore.fuori .ultimo { fill: var(--b-rosso); }

/* ── centro avvisi: la campanella e l'elenco ── */
.b-campanella { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--b-superficie); border: 1px solid var(--b-linea); display: grid; place-items: center; color: var(--b-testo); cursor: pointer; }
.b-campanella i { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--b-rosso); color: #fff; font-style: normal; font-size: 11.5px; font-weight: 500; display: grid; place-items: center; padding: 0 5px; }
.tema-scuro .b-campanella i { color: #232425; }
.b-avvisi { background: var(--b-scheda); border-radius: var(--b-raggio); padding: 8px; width: 100%; max-width: 380px; }
.tema-chiaro .b-avvisi { background: var(--b-superficie); box-shadow: 0 8px 28px rgba(31, 32, 33, .12); }
.tema-scuro .b-avvisi { border: 1px solid var(--b-linea); }
.b-avvisi .testa { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px 10px; }
.b-avvisi .testa b { font-weight: 500; }
.b-avviso { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 10px; border-radius: 14px; cursor: pointer; }
.b-avviso:hover { background: var(--b-accento-tenue); }
.b-avviso .punto { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: transparent; }
.b-avviso.nuovo .punto { background: var(--b-rosso); }
.b-avviso .testo { color: var(--b-testo); }
.b-avviso .quando { color: var(--b-testo3); font-size: 13px; display: block; }
.b-avviso .azioni { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.b-avviso .azioni .b-pulsante { padding: 7px 14px; font-size: 13.5px; }

/* ── stato vuoto e stato d'errore ── */
.b-vuoto, .b-errore { text-align: center; padding: 28px 20px; color: var(--b-testo2); }
.b-vuoto svg, .b-errore svg { width: 34px; height: 34px; color: var(--b-testo3); margin-bottom: 8px; }
.b-vuoto b, .b-errore b { display: block; color: var(--b-testo); font-weight: 500; margin-bottom: 4px; }
.b-vuoto p, .b-errore p { margin: 0 auto 14px; max-width: 320px; }
.b-errore svg { color: var(--b-rosso); }

/* ── scheda della prestazione: il tronco comune + lo spazio del blocco ── */
.b-prestazione { display: flex; flex-direction: column; gap: 0; }
.b-prestazione .testa { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-bottom: 14px; }
.b-prestazione .testa .tipo { color: var(--b-testo3); font-size: 13px; display: flex; gap: 6px; align-items: center; }
.b-prestazione .testa h3 { font-size: 19px; font-weight: 500; margin: 2px 0 0; }
.b-tronco { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; border-top: 1px solid var(--b-linea); }
.b-tronco > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--b-linea); }
.b-tronco span { color: var(--b-testo2); }
.b-tronco .fatto { color: var(--b-verde); }
.b-tronco .manca { color: var(--b-rosso); }
.b-blocco { margin: 16px 0 4px; padding: 16px; border-radius: 16px; border: 1.5px dashed var(--b-linea); }
.b-blocco .etichetta { font-size: 13px; color: var(--b-testo3); margin-bottom: 8px; display: block; }
.b-blocco h4 { margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.b-prestazione .piede { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding-top: 14px; }

/* ── conversazione ── */
.b-conversazione { display: flex; flex-direction: column; gap: 8px; }
.b-conversazione .finestra { text-align: center; color: var(--b-testo3); font-size: 12.5px; margin: 4px 0; }
.b-msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; background: var(--b-superficie); border: 1px solid var(--b-linea); }
.b-msg small { display: block; color: var(--b-testo3); font-size: 12px; margin-top: 3px; }
.b-msg.mio { align-self: flex-end; background: var(--b-scuro); color: var(--b-su-scuro); border-color: transparent; }
.b-msg.mio small { color: inherit; opacity: .7; }
.b-scrivi { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.b-scrivi input { flex: 1; min-width: 0; font: inherit; color: var(--b-testo); background: var(--b-superficie); border: 1px solid var(--b-linea); border-radius: 999px; padding: 10px 16px; outline: none; }
.b-scrivi input::placeholder { color: var(--b-testo3); }

/* ── chiamata (in corso e in arrivo) ── */
.b-chiamata { border-radius: var(--b-raggio); padding: 22px; text-align: center; background: #1B1C1D; color: #F3F4F5; position: relative; overflow: hidden; }
.b-chiamata .chi { font-size: 18px; font-weight: 500; margin-top: 10px; }
.b-chiamata .stato-ch { color: rgba(255, 255, 255, .72); font-size: 14px; }
.b-chiamata .avviso-ch { color: rgba(255, 255, 255, .72); font-size: 12.5px; margin-top: 8px; }
.b-chiamata .comandi { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.b-chiamata .comandi button { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.b-chiamata .comandi button.chiudi { background: #C2412B; }
.b-chiamata .comandi button.rispondi { background: #3F7A4E; }
.b-chiamata .b-avatar { margin: 0 auto; width: 72px; height: 72px; font-size: 22px; background: rgba(255, 255, 255, .14); color: #fff; }