/* Dashboard di Voxantis: pensata prima per il telefono. */

:root {
  --sfondo: #f6f5f2;
  --carta: #ffffff;
  --testo: #1d1c1a;
  --tenue: #6b6862;
  --bordo: #e3e0d9;
  --accento: #b4532a;
  --accento-testo: #ffffff;
  --accento-tenue: #f6e7df;
  --verde: #2f7d4f;
  --verde-tenue: #e3f2e8;
  --giallo: #8a6100;
  --giallo-tenue: #fbf0d3;
  --blu: #2c5d8f;
  --blu-tenue: #e2ecf6;
  --rosso: #b3261e;
  --rosso-tenue: #f9e1df;
  --raggio: 12px;
  --ombra: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sfondo: #161514;
    --carta: #211f1d;
    --testo: #eeebe6;
    --tenue: #a39f97;
    --bordo: #37342f;
    --accento: #e07b4f;
    --accento-testo: #1a1210;
    --accento-tenue: #3a2519;
    --verde: #7cc79a;
    --verde-tenue: #1d3326;
    --giallo: #e5c267;
    --giallo-tenue: #3a3019;
    --blu: #8fb8e3;
    --blu-tenue: #1b2a3a;
    --rosso: #f2857d;
    --rosso-tenue: #3d1f1c;
    --ombra: none;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--sfondo); color: var(--testo); }
button, input, select, textarea { font: inherit; color: inherit; }

.app { max-width: 820px; margin: 0 auto; padding: 0 16px 96px; }
.attesa, .tenue { color: var(--tenue); }
.attesa { padding: 32px 0; text-align: center; }
.errore { color: var(--rosso); }

/* --------------------------------------------------------------- testata */

.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 0 8px;
}
.testata > div { display: flex; flex-direction: column; min-width: 0; }
.marchio { font-size: 1.15rem; letter-spacing: -0.01em; }
.numero-assistente { color: var(--tenue); font-size: 0.85rem; }

.schede {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 4px; overflow-x: auto;
  padding: 8px 0; background: var(--sfondo);
  border-bottom: 1px solid var(--bordo);
}
.schede button {
  position: relative; flex: 0 0 auto;
  border: 0; background: none; padding: 8px 14px; border-radius: 999px;
  color: var(--tenue); cursor: pointer; font-weight: 500;
}
.schede button.attiva { background: var(--accento-tenue); color: var(--accento); }
.schede button[data-contatore]:not([data-contatore=""])::after {
  content: attr(data-contatore);
  margin-left: 6px; padding: 0 7px; border-radius: 999px;
  background: var(--accento); color: var(--accento-testo); font-size: 0.75rem;
}

.contenuto { padding-top: 16px; }

/* --------------------------------------------------------------- bottoni */

button { cursor: pointer; }
.primario {
  border: 0; border-radius: 10px; padding: 10px 18px;
  background: var(--accento); color: var(--accento-testo); font-weight: 600;
}
.primario:disabled { opacity: 0.6; cursor: progress; }
.grande { width: 100%; padding: 14px; font-size: 1.05rem; }
.leggero {
  border: 1px solid var(--bordo); border-radius: 10px; padding: 8px 14px;
  background: var(--carta);
}
.leggero.pericolo { color: var(--rosso); }
.collegamento { border: 0; background: none; color: var(--accento); padding: 12px 0 0; }
.icona {
  border: 0; background: none; color: var(--tenue); width: 36px; height: 36px;
  border-radius: 8px; flex: 0 0 auto;
}
.icona:hover { background: var(--sfondo); }

.barra { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.azioni { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.barra-salva {
  position: sticky; bottom: 0; padding: 12px 0;
  background: linear-gradient(transparent, var(--sfondo) 30%);
}

/* ---------------------------------------------------------------- schede */

.scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 20px; margin: 0 0 16px; box-shadow: var(--ombra);
}
fieldset.scheda { min-width: 0; }
.scheda h2 { margin: 0 0 8px; font-size: 1.25rem; }
legend { font-weight: 700; font-size: 1.05rem; padding: 0 4px; }
.nota { color: var(--tenue); margin: 0 0 16px; font-size: 0.93rem; }

.centrato { min-height: 90vh; display: grid; place-items: center; }
.accesso { width: 100%; max-width: 400px; }
.accesso .marchio { font-size: 1.6rem; margin: 0 0 4px; color: var(--accento); }

/* ----------------------------------------------------------------- campi */

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > span { font-weight: 500; font-size: 0.93rem; }
.campo em { color: var(--accento); font-style: normal; }
.campo small, .chi small { color: var(--tenue); }
input, select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--sfondo);
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accento); outline-offset: 1px;
}
input[type="checkbox"] { width: auto; }
textarea { resize: vertical; }

.riga-corta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.riga-corta label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }

/* scelta categoria */
.scelta-categorie { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.categoria {
  text-align: left; padding: 14px; border-radius: 10px;
  border: 1.5px solid var(--bordo); background: var(--sfondo);
}
.categoria.scelta { border-color: var(--accento); background: var(--accento-tenue); }

/* orari */
.orari { display: flex; flex-direction: column; gap: 6px; }
.giorno {
  display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
  padding: 8px 0; border-bottom: 1px dashed var(--bordo);
}
.giorno.chiuso .nome-giorno { color: var(--tenue); }
.nome-giorno { padding-top: 9px; font-weight: 500; text-transform: capitalize; }
.fasce { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fascia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fascia input { width: 110px; }
.notte { flex-basis: 100%; color: var(--blu); }
.etichetta-chiuso { color: var(--tenue); padding: 9px 0; }
.copia { align-self: flex-start; margin-top: 8px; }

/* liste modificabili */
.lista { display: flex; flex-direction: column; gap: 10px; }
.voce { display: flex; gap: 8px; align-items: flex-start; }
.voce > :first-child { flex: 1; min-width: 0; }
.servizio, .faq { display: flex; flex-direction: column; gap: 8px; }
.lista > .leggero { align-self: flex-start; }
.chi { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.9rem; }
.chip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 4px 10px; border: 1px solid var(--bordo); border-radius: 999px;
}

/* ---------------------------------------------------------------- elenchi */

.elenco h3 { margin: 24px 0 8px; font-size: 1rem; }
.elenco h3.oggi { color: var(--accento); }
.elenco h3 small { color: var(--tenue); font-weight: 400; }
.vuoto { text-align: center; padding: 40px 16px; color: var(--tenue); }
.vuoto p { color: var(--testo); font-weight: 500; margin: 0 0 4px; }

.prenotazione, .chiamata, .messaggio {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--ombra);
}
.prenotazione { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: start; }
.prenotazione .ora { font-weight: 700; font-size: 1.05rem; padding-top: 2px; }
.prenotazione .chi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prenotazione .chi > span { color: var(--tenue); font-size: 0.9rem; }
.note {
  margin: 4px 0 0; padding: 6px 10px; border-radius: 8px;
  background: var(--giallo-tenue); color: var(--testo); font-size: 0.9rem;
}
.telefono { color: var(--accento); text-decoration: none; font-size: 0.9rem; }

.intestazione-chiamata { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.etichetta { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.etichetta.verde { background: var(--verde-tenue); color: var(--verde); }
.etichetta.giallo { background: var(--giallo-tenue); color: var(--giallo); }
.etichetta.blu { background: var(--blu-tenue); color: var(--blu); }
.etichetta.grigio { background: var(--sfondo); color: var(--tenue); }
.etichetta.rosso { background: var(--rosso-tenue); color: var(--rosso); }

.trascrizione { margin-top: 10px; border-top: 1px solid var(--bordo); padding-top: 10px; }
.trascrizione p { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; max-width: 90%; }
.trascrizione p b { display: block; font-size: 0.75rem; color: var(--tenue); font-weight: 600; }
.trascrizione .assistente { background: var(--sfondo); }
.trascrizione .cliente { background: var(--accento-tenue); margin-left: auto; }

.messaggio.letto { opacity: 0.55; }
.messaggio p { margin: 4px 0 10px; }

/* ---------------------------------------------------------------- finestre */

.finestra {
  width: min(520px, calc(100vw - 24px)); border: 1px solid var(--bordo);
  border-radius: var(--raggio); padding: 20px; background: var(--carta); color: var(--testo);
}
.finestra::backdrop { background: rgb(0 0 0 / 0.4); }
.finestra h2 { margin-top: 0; }

/* ----------------------------------------------------------------- avvisi */

.avviso {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 150%);
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px;
  background: var(--testo); color: var(--sfondo); box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
  z-index: 50; pointer-events: none; opacity: 0; visibility: hidden;
}
.avviso.visibile { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.avviso.errore { background: var(--rosso); color: #fff; }

.link-accesso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.link-accesso .collegamento:disabled { opacity: 0.6; cursor: progress; }
a.collegamento { text-decoration: none; }

/* lingua della dashboard: IT · DE · EN */
.riga-marchio { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.selettore-lingua { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bordo); border-radius: 999px; }
.selettore-lingua button {
  border: 0; background: none; padding: 3px 9px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--tenue);
}
.selettore-lingua button[aria-pressed="true"] { background: var(--accento-tenue); color: var(--accento); }

/* la prova gratuita */
.etichetta-prova {
  display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--verde-tenue); color: var(--verde); font-size: 0.8rem; font-weight: 600;
}

.lingue-scelta { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lingue-scelta label { display: flex; align-items: center; gap: 8px; }

/* intervista: le domande che compaiono solo se servono */
[hidden] { display: none !important; }
.domanda { padding-top: 4px; }
.domanda > span { font-weight: 600; }
.si-no { display: flex; gap: 8px; }
.scelta-si-no {
  min-width: 72px; padding: 9px 18px; border-radius: 10px; font-weight: 600;
  border: 1px solid var(--bordo); background: var(--carta); color: var(--testo);
}
.scelta-si-no.attiva { background: var(--accento); border-color: var(--accento); color: var(--accento-testo); }
.scelte-multiple { display: flex; flex-wrap: wrap; gap: 8px; }
.scelte-multiple label {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border: 1px solid var(--bordo); border-radius: 999px; background: var(--carta); font-size: 0.93rem;
}
.scelte-multiple label:has(input:checked) { border-color: var(--accento); background: var(--accento-tenue); }
.esempi-note { background: var(--sfondo); border-radius: 10px; padding: 12px 16px; margin-bottom: 14px; font-size: 0.93rem; }
.esempi-note span { font-weight: 600; }
.esempi-note ul { margin: 6px 0 0; padding-left: 20px; color: var(--tenue); }

/* ------------------------------------------------ controllo spese (admin) */

.testata > .comandi { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.griglia-servizi {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.servizio-scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio);
  box-shadow: var(--ombra); padding: 14px 16px; border-top-width: 4px;
}
.servizio-scheda.verde { border-top-color: var(--verde); }
.servizio-scheda.giallo { border-top-color: var(--giallo); }
.servizio-scheda.rosso { border-top-color: var(--rosso); }
.servizio-scheda.grigio { border-top-color: var(--bordo); }
.servizio-scheda .tenue { margin: 6px 0 0; font-size: 0.9rem; }
.riga-dato {
  display: flex; justify-content: space-between; gap: 12px; padding: 4px 0;
  font-size: 0.93rem; border-bottom: 1px dashed var(--bordo);
}
.riga-dato:last-child { border-bottom: 0; }
.riga-dato > span { color: var(--tenue); }
.riga-dato > strong { text-align: right; font-variant-numeric: tabular-nums; }
.barra-livello { height: 8px; border-radius: 999px; background: var(--sfondo); overflow: hidden; margin: 8px 0; }
.riempimento { height: 100%; border-radius: 999px; }
.riempimento.verde { background: var(--verde); }
.riempimento.giallo { background: var(--giallo); }
.riempimento.rosso { background: var(--rosso); }
.grafico { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin-top: 10px; }
.grafico .colonna { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.grafico .colonna > div { width: 100%; background: var(--accento); border-radius: 3px 3px 0 0; opacity: 0.8; }
.avvisi-oggi { border-color: var(--rosso); }
.avviso-riga { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--sfondo); }
.avviso-riga.urgente { background: var(--rosso-tenue); }
.avviso-riga.attenzione { background: var(--giallo-tenue); }
.avviso-riga small { color: var(--tenue); }
.avviso-riga p { margin: 2px 0 0; white-space: pre-line; }
.riga-tre { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 8px; margin-bottom: 12px; }
.elenco-semplice { display: flex; flex-direction: column; }
details.scheda > summary { cursor: pointer; }
.soglie { margin-top: 14px; }

@media (max-width: 520px) {
  .riga-tre { grid-template-columns: 1fr 1fr; }
  .giorno { grid-template-columns: 1fr; gap: 4px; }
  .nome-giorno { padding-top: 0; }
  .prenotazione { grid-template-columns: 50px 1fr; }
  .prenotazione > button { grid-column: 2; justify-self: start; }
}