/* Storefy - Centralino (21/10, richiesta dell'utente).

   I box all'ingresso sono quelli di casa; qui dentro c'e' solo quello che
   nel portale non c'era: il cruscotto. L'utente l'ha chiesto "meno freddo",
   quindi il colore non e' decorazione - dice una cosa: verde va bene, rosso
   guarda qui, ambra tienilo d'occhio, grigio non e' successo niente. */

/* ---------- i quattro numeri in cima ---------- */
.cen-kpi {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cen-kpi-carta {
  position: relative; border-radius: 12px; padding: 14px 16px 12px;
  border: 1px solid var(--bordo); background: var(--carta); overflow: hidden;
}
.cen-kpi-carta::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--tinta, var(--blu));
}
.cen-kpi-segno {
  display: inline-flex; width: 30px; height: 30px; border-radius: 9px;
  align-items: center; justify-content: center; margin-bottom: 8px;
  background: var(--tinta-chiara, var(--blu-chiaro)); color: var(--tinta, var(--blu));
}
.cen-kpi-segno svg { width: 17px; height: 17px; }
.cen-kpi-nome {
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tenue);
}
.cen-kpi-valore {
  font-size: 26px; font-weight: 600; line-height: 1.15; color: var(--inchiostro);
  font-variant-numeric: tabular-nums;
}
.cen-kpi-sotto { font-size: 12.5px; color: var(--grigio); margin-top: 2px; }

/* le tinte: una classe, due variabili */
.blu    { --tinta: var(--blu);     --tinta-chiara: var(--blu-chiaro); }
.verde  { --tinta: var(--verde);   --tinta-chiara: var(--verde-chiaro); }
.ambra  { --tinta: var(--ambra);   --tinta-chiara: var(--ambra-chiaro); }
.rosso  { --tinta: var(--rosso);   --tinta-chiara: #fdf2f1; }
.viola  { --tinta: var(--viola);   --tinta-chiara: var(--viola-chiaro); }
.teal   { --tinta: var(--teal);    --tinta-chiara: var(--teal-chiaro); }
.grigio { --tinta: var(--grigio);  --tinta-chiara: var(--fondo); }

/* ---------- i riquadri che si chiudono ---------- */
.cen-scheda {
  background: var(--carta); border: 1px solid var(--bordo); border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
.cen-scheda-testa {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 14px; background: var(--tinta-chiara, var(--fondo));
  border-bottom: 1px solid var(--bordo);
}
.cen-scheda.chiusa .cen-scheda-testa { border-bottom: 0; }
.cen-scheda-testa h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.cen-scheda-segno { display: inline-flex; color: var(--tinta, var(--blu)); }
.cen-scheda-segno svg { width: 18px; height: 18px; }
.cen-scheda-destra { margin-left: auto; font-size: 12.5px; color: var(--grigio); }
.cen-scheda-gancio { color: var(--tenue); transition: transform .15s; }
.cen-scheda.chiusa .cen-scheda-gancio { transform: rotate(-90deg); }
.cen-scheda-dentro { padding: 14px; }
.cen-scheda.chiusa .cen-scheda-dentro { display: none; }
.cen-periodo { font-size: 12.5px; color: var(--grigio); }
.cen-periodo select { margin-left: 4px; }

/* ---------- i minuti ---------- */
.cen-due { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cen-verso {
  border: 1px solid var(--bordo); border-left: 4px solid var(--tinta, var(--teal));
  border-radius: 10px; padding: 10px 12px; background: var(--carta);
}
.cen-verso-testa {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta, var(--teal)); font-weight: 600; margin-bottom: 8px;
}
.cen-minuto {
  display: grid; grid-template-columns: 1fr 70px auto; gap: 8px;
  align-items: center; padding: 6px 0; border-bottom: 1px solid var(--bordo);
  font-size: 13.5px;
}
.cen-minuto:last-child { border-bottom: 0; }
.cen-minuto-nome { display: flex; align-items: center; gap: 6px; color: var(--grigio); }
.cen-minuto-nome svg { width: 15px; height: 15px; color: var(--tenue); }
.cen-minuto-ore { font-variant-numeric: tabular-nums; text-align: right; }
.cen-minuto-quante { font-size: 12px; color: var(--tenue); white-space: nowrap; }
.cen-minuto-tot { font-weight: 600; }
.cen-barra {
  display: block; height: 6px; border-radius: 4px; background: var(--fondo);
  overflow: hidden; min-width: 50px;
}
.cen-barra > span { display: block; height: 100%; background: var(--tinta, var(--blu)); }

/* ---------- cosa sta facendo ---------- */
.cen-vivo {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.cen-vivo::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tenue);
}
.cen-vivo.acceso { color: var(--verde); }
.cen-vivo.acceso::before { background: var(--verde); animation: cen-battito 2s infinite; }
.cen-vivo.fermo { color: var(--grigio); }
@keyframes cen-battito { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .cen-vivo.acceso::before { animation: none } }
.cen-facendo { margin: 0 0 6px; font-size: 14px; }
.cen-facendo code { background: var(--fondo); padding: 1px 6px; border-radius: 5px; }

/* ---------- la fila della pipeline ---------- */
.cen-fila { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.cen-passo {
  flex: 1 1 110px; border: 1px solid var(--bordo); border-top: 3px solid var(--tinta, var(--blu));
  border-radius: 10px; padding: 10px 12px; background: var(--carta); text-align: center;
}
.cen-passo-nome {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue);
}
.cen-passo-valore {
  font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--inchiostro);
}
.cen-passo-sotto { font-size: 11.5px; color: var(--tenue); }
.cen-freccia { align-self: center; color: var(--tenue); }

/* ---------- i filtri delle chiamate ---------- */
#cen-dentro .filtri-centralino {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  background: var(--fondo); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
}
#cen-dentro .filtri-centralino label { font-size: 12px; color: var(--grigio); }
.cen-cerca-grande { display: flex; gap: 8px; }
.cen-cerca-grande input { flex: 1; font-size: 15px; padding: 10px 12px; }

/* ---------- le chiamate, a tabella (21/10) ----------
   Nove colonne: su uno schermo stretto la tabella scorre dentro il suo
   riquadro, la pagina no (regola dell'utente: mai scorrere di lato). */
.cen-tabella-scorri {
  overflow-x: auto; border: 1px solid var(--bordo); border-radius: 10px;
  background: var(--carta);
}
.cen-tabella { font-size: 13.5px; margin: 0; }
.cen-tabella thead th {
  position: sticky; top: 0; background: var(--fondo); z-index: 1;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tenue); font-weight: 600; white-space: nowrap; padding: 8px 10px;
}
/* piu' forte di .tabella.elenco td, se no il testo va a capo e le righe
   diventano alte il doppio */
.tabella.elenco.cen-tabella td {
  padding: 6px 10px; white-space: nowrap; border-bottom: 0; width: auto;
}
.tabella.elenco.cen-tabella td.sotto { white-space: nowrap; }
.cen-verso-cella { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cen-riga-t { cursor: pointer; border-top: 1px solid var(--bordo); }
.cen-riga-t:hover, .cen-riassunto-r:hover { background: var(--fondo); }
.cen-riassunto-r td {
  padding: 0 10px 8px; color: var(--grigio); font-size: 12.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px;
}
.cen-dettaglio-r td { padding: 0; line-height: 0; }
.cen-dettaglio-r td:not(:empty) { line-height: 1.5; }
/* il dettaglio sta dentro una cella della tabella, dove tutto e' "nowrap":
   senza questa riga le battute del dialogo diventano una riga sola che
   scappa fuori dallo schermo, e quelle allineate a destra sembrano vuote.
   Serve piu' peso della regola sulle celle, non basta la classe. */
.tabella.elenco.cen-tabella td.cen-dettaglio,
.tabella.elenco.cen-tabella td.cen-dettaglio * { white-space: normal; }
/* niente display:block qui: una cella che smette di essere cella esce dal
   conto delle colonne e si stringe a quella prima (il dettaglio finiva in
   una colonnina da 190px). Resta una cella con colspan, larga quanto la
   tabella. */
.cen-dettaglio:not(:empty) { padding: 10px 12px 14px; }
.cen-chip {
  display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px;
  background: var(--tinta-chiara, var(--fondo)); color: var(--tinta, var(--grigio));
  border: 1px solid transparent; white-space: nowrap;
}
.cen-chip.verde { background: var(--verde-chiaro); color: var(--verde); }
.cen-chip.ambra { background: var(--ambra-chiaro); color: var(--ambra); }
.cen-chip.rosso { background: #fdf2f1; color: var(--rosso); }
.cen-chip.grigio { background: var(--fondo); color: var(--grigio); }
.cen-chip.blu { background: var(--blu-chiaro); color: var(--blu); }
/* schermo stretto: spariscono le colonne meno importanti, e quali siano lo
   dice la tabella con una classe - contare le colonne a mano aveva gia'
   fatto sparire l'urgenza dagli alert, che e' l'ultima cosa da nascondere */
@media (max-width: 900px) {
  .cen-tabella th.cen-se-largo, .cen-tabella td.cen-se-largo { display: none; }
}

/* la riga delle azioni sugli alert: spunta, quanti sono, cosa farci */
.cen-azioni-alert {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cen-spinta { flex: 1; }
.cen-letto td { opacity: .6; }

/* ---------- il dettaglio della chiamata (21/10) ---------- */
.cen-fatti { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.cen-fatto { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.cen-fatto-nome { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); }
.cen-riassunto-grande {
  margin: 0 0 10px; font-size: 14.5px; line-height: 1.55;
  border-left: 3px solid var(--blu); padding-left: 10px;
}
.cen-cose { background: var(--fondo); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.cen-cose b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--grigio); }
.cen-cose ul { margin: 4px 0 0; padding-left: 18px; font-size: 13.5px; }
.cen-titoletto { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tenue); }
.cen-audio { margin: 8px 0; }
.cen-audio audio { width: 100%; max-width: 420px; vertical-align: middle; }

/* la trascrizione come un dialogo: due voci, due lati */
.cen-dialogo { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.cen-battuta {
  margin: 0; max-width: 80%; padding: 7px 12px; border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; background: var(--fondo); position: relative;
}
.cen-battuta.uno { align-self: flex-start; background: var(--blu-chiaro); border-bottom-left-radius: 3px; }
.cen-battuta.due { align-self: flex-end; background: var(--verde-chiaro); border-bottom-right-radius: 3px; }
/* il testo si legge sempre da sinistra, anche nella bolla di destra */
.cen-battuta, .cen-dialogo { text-align: left; }
.cen-battuta.sola { align-self: stretch; max-width: none; }
.cen-voce {
  display: inline-block; width: 17px; height: 17px; border-radius: 50%;
  background: rgba(0,0,0,.08); font-size: 10px; font-weight: 700; text-align: center;
  line-height: 17px; margin-right: 6px; vertical-align: 1px;
}

/* la spunta "seleziona tutto": piccola, in riga con i bottoni, non un
   riquadro che si prende mezza schermata */
.cen-spunta-tutti {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--grigio); margin: 0;
}
.cen-spunta-tutti input { width: auto; margin: 0; }
.cen-tabella td input[type="checkbox"] { width: auto; margin: 0; vertical-align: middle; }