/* Nuvem Bot — Planilha (histórico de sessões).
   Segue os tokens de style.css (fundo #03070d, azul, verde/vermelho de resultado,
   cantos 14-16px, Manrope, rótulos em caixa alta). Classes prefixadas com pl- pra
   não colidir com o resto do app. */

#planilha-app { position: relative; }
.pl-corpo { display: flex; flex-direction: column; gap: 18px; }

/* cores de resultado — mesma paleta do restante do app */
.pl-pos { color: #2ee06a; }
.pl-neg { color: #ff6b63; }
.pl-zero { color: var(--txt-fraco, #61748f); }

/* ══ KPIs (Hoje / Semana / Mês) ══════════════════════════════════════════ */
.pl-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pl-kpi {
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: linear-gradient(160deg, rgba(10, 20, 34, 0.9), rgba(6, 12, 22, 0.9));
}
.pl-kpi-l {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--txt-suave, #9fb4cf);
}
.pl-kpi-v {
  margin-top: 8px;
  font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -0.01em;
}
.pl-kpi-s {
  margin-top: 5px;
  font-size: 11.5px; color: var(--txt-fraco, #61748f);
}

/* ══ cartões (gráfico / lista) ═══════════════════════════════════════════ */
.pl-card {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(58, 164, 255, 0.22);
  background: rgba(8, 16, 28, 0.55);
}
.pl-card-tit {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--azul-claro, #6fc0ff);
}
.pl-card-sub {
  color: var(--txt-fraco, #61748f);
  font-weight: 700; letter-spacing: 0.12em;
}

/* ══ gráfico de barras ═══════════════════════════════════════════════════ */
.pl-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 172px;
  padding: 8px 4px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pl-chart::-webkit-scrollbar { height: 6px; }
.pl-chart::-webkit-scrollbar-thumb { background: rgba(58, 164, 255, 0.3); border-radius: 6px; }

.pl-col {
  flex: 0 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  height: 100%;
}
@media (min-width: 760px) {
  .pl-col { flex: 1 1 0; min-width: 26px; }
}
.pl-bar {
  width: 26px;
  border-radius: 6px 6px 0 0;
  min-height: 3px;
  transition: height .3s;
}
.pl-bar.pl-pos { background: linear-gradient(180deg, #2ee06a, #159249); }
.pl-bar.pl-neg { background: linear-gradient(180deg, #ff6b63, #b8362f); }
.pl-bar.pl-zero { background: rgba(97, 116, 143, 0.4); }
.pl-col-dia { font-size: 9.5px; color: var(--txt-fraco, #61748f); white-space: nowrap; }
.pl-chart-vazio {
  width: 100%; padding: 30px 10px; text-align: center;
  font-size: 12.5px; color: var(--txt-fraco, #61748f);
}

/* ══ lista de sessões ════════════════════════════════════════════════════ */
.pl-lista { display: flex; flex-direction: column; }
.pl-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid rgba(58, 164, 255, 0.14);
  flex-wrap: wrap;
}
.pl-row:first-child { border-top: none; }
.pl-row-dia {
  font-size: 11.5px; font-weight: 700; color: var(--txt-suave, #9fb4cf);
  min-width: 42px;
}
.pl-row-info { flex: 1; min-width: 0; }
.pl-row-jogo { font-size: 13.5px; font-weight: 700; color: var(--txt, #eaf2ff); }
.pl-row-motivo { margin-top: 2px; font-size: 11.5px; color: var(--txt-fraco, #61748f); }
.pl-row-v { font-weight: 800; font-size: 14px; white-space: nowrap; }
.pl-row-del {
  flex-shrink: 0;
  width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 8px; background: transparent;
  color: #ff6b63; cursor: pointer; font-size: 13px;
  transition: background .15s;
}
.pl-row-del:hover { background: rgba(255, 107, 99, 0.12); }
.pl-row-del:disabled { opacity: .5; cursor: default; }

.pl-vazio {
  padding: 28px 16px; text-align: center;
  font-size: 13px; line-height: 1.6; color: var(--txt-fraco, #61748f);
  border: 1px dashed rgba(58, 164, 255, 0.22); border-radius: 14px;
}
.pl-erro {
  padding: 14px; border-radius: 12px;
  background: rgba(255, 107, 99, 0.10); border: 1px solid rgba(255, 107, 99, 0.35);
  color: #ffada7; font-size: 12.5px; text-align: center;
}

/* ══ esqueleto (loading) ═════════════════════════════════════════════════ */
@keyframes pl-pulso {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.75; }
}
.pl-skel-linha, .pl-skel-bar {
  background: rgba(58, 164, 255, 0.16);
  border-radius: 6px;
  animation: pl-pulso 1.3s ease-in-out infinite;
}
.pl-skel-linha-l { width: 46%; height: 10px; }
.pl-skel-linha-v { width: 70%; height: 22px; margin-top: 10px; }
.pl-skel-linha-s { width: 60%; height: 10px; margin-top: 8px; }
.pl-skel-bar { width: 26px; border-radius: 6px 6px 0 0; }
.pl-skel-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.pl-skel-linha-chip { width: 40px; height: 12px; flex-shrink: 0; }
.pl-skel-linha-mid { flex: 1; height: 12px; }

/* ══ responsivo ══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .pl-kpis { grid-template-columns: 1fr; }
  .pl-row { gap: 10px; }
  .pl-row-motivo { width: 100%; }
}
@media (min-width: 1000px) {
  .pl-corpo { max-width: 1100px; margin: 0 auto; }
}

/* botão de nova tentativa: erro sem saída é beco sem saída */
.pl-retry {
  margin-top: 12px; padding: 11px 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(79, 178, 255, 0.5); background: rgba(13, 44, 78, 0.6);
  color: #dcecff; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
}
.pl-retry:hover { background: rgba(20, 66, 116, 0.75); }