/* ReceTap — dashboard del titolare */

.db { max-width: 1200px; margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 18px max(40px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 20px; }
.db-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.db-marchio { display: flex; align-items: center; gap: 14px; min-width: 0; }
.db-icona { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.db-per { font-size: 13px; display: block; }
.db-testa h1 { font-size: clamp(21px, 5vw, 27px); font-weight: 600; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.db-testa h1 .paese { font-weight: 400; color: var(--testo-3); }
.db-controlli { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.segmenti { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--bordo); }
.segmenti button { min-height: 40px; min-width: 56px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.segmenti button[aria-pressed="true"] { background: #fff; color: var(--bg); }

.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.kpi-card { padding: 16px 18px; min-width: 0; display: flex; flex-direction: column; gap: 8px; animation: sali .5s ease-out both; }
.kpi-card:nth-child(2) { animation-delay: .05s; } .kpi-card:nth-child(3) { animation-delay: .1s; } .kpi-card:nth-child(4) { animation-delay: .15s; }
.kpi-card .lbl { font-size: 13px; color: var(--testo-2); }
.kpi-card .val { font-size: clamp(26px, 7vw, 40px); overflow-wrap: anywhere; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-card .nota { font-size: 13px; color: var(--testo-3); }
.kpi-card .nota.su { color: var(--ok-testo); }
.kpi-card .nota.giu { color: var(--err); }
@keyframes sali { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.card { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card h2 { font-size: 17px; font-weight: 600; }
.card-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.card-testa .muto { font-size: 13px; }

.grafico { height: 220px; position: relative; }
.grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico .linea { stroke-dasharray: 1000; animation: disegna 1.6s ease-out both; }
.grafico .area { animation: fade 1s ease-out both; }
@keyframes disegna { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.asse { display: flex; justify-content: space-between; font-size: 11px; color: var(--testo-3); }
.grafico-vuoto { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--testo-3); font-size: 14px; padding: 0 20px; }

.riga { display: flex; flex-wrap: wrap; gap: 16px; }
.riga .largo { flex: 2 1 560px; }
.colonna { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 640px) { .riga .largo { flex-basis: 100%; } }

.calore-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px 4px; }
.calore { min-width: 540px; display: flex; flex-direction: column; gap: 5px; }
.calore-riga { display: grid; gap: 5px; align-items: center; }
.calore-riga .g { font-size: 12px; color: var(--testo-2); }
.calore-riga .h { font-size: 10px; color: var(--testo-3); text-align: center; font-family: var(--mono); }
.calore-riga .c { height: 26px; border-radius: 6px; background: rgba(165,140,255,.06); transition: transform .15s; }
.calore-riga .c:hover { transform: scale(1.15); }
@media (max-width: 600px) {
  .calore-scroll { overflow-x: visible; }
  .calore { min-width: 0; gap: 3px; }
  .calore-riga { gap: 3px; }
  .calore-riga .c { height: 22px; border-radius: 4px; }
  .calore-riga .h { font-size: 9px; }
}

.barra { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.barra div { transition: width .6s ease; }
.legenda { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; margin-top: 12px; }
.legenda span { display: flex; align-items: center; gap: 8px; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.punto-riga { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 14px; }
.punto-riga .t { display: flex; justify-content: space-between; gap: 10px; }
.punto-riga .t b { font-weight: 500; }
.punto-riga .v { font-family: var(--mono); color: var(--testo-2); }
.punto-riga .b { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); }
.punto-riga .b div { height: 100%; border-radius: 999px; background: var(--ciano); transition: width .6s ease; }
.vuoto-piccolo { color: var(--testo-3); font-size: 14px; margin-top: 8px; }

.cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: rgba(124,92,255,.16); border-color: rgba(165,140,255,.45); }
.cta p { margin: 6px 0 0; }

.db-piede { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 12px; }

.db-messaggio { padding: 28px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.db-messaggio h2 { font-size: 20px; }
.db-messaggio p { margin: 0; color: var(--testo-2); max-width: 460px; line-height: 1.5; }

/* +1 in diretta */
.live { align-self: center; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: rgba(74,222,128,.14); border: 1px solid rgba(74,222,128,.5); font-weight: 600; font-size: 15px; animation: pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.live .piu { font-size: 20px; color: var(--ok); }
.live .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(74,222,128,.7); animation: pulsa 1.6s infinite; }
@keyframes pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.7); } 70% { box-shadow: 0 0 0 12px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.kpi-card.lampo { animation: lampo 1.2s ease-out; }
@keyframes lampo { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.0); } 30% { box-shadow: 0 0 0 4px rgba(74,222,128,.55); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }

/* Guida installazione */
.installa { position: fixed; left: 12px; right: 12px; margin: 0 auto; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 40; max-width: 420px; padding: 20px; display: flex; flex-direction: column; gap: 14px; background: rgba(26, 24, 56, 0.86); border-color: var(--bordo-forte); box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: sali .45s ease-out both; }
.installa-testa { display: flex; gap: 12px; align-items: center; padding-right: 30px; }
.installa-testa img { border-radius: 12px; flex-shrink: 0; }
.installa h2 { font-size: 17px; font-weight: 600; }
.installa p { margin: 2px 0 0; font-size: 13px; }
.installa-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--testo-2); font-size: 16px; cursor: pointer; border-radius: 12px; }
.passi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.passi li { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.4; }
.passi .n { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1px solid var(--bordo-forte); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.ico-share { vertical-align: -3px; color: var(--link); }
.freccia { align-self: center; animation: rimbalza 1.2s ease-in-out infinite; }
@keyframes rimbalza { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.installa-dopo { align-self: center; background: transparent; border-color: transparent; color: var(--testo-3); }
.installa .piccolo { margin: 0; font-size: 12px; }