/* Estadísticas del diario: fichas y gráfico semanal
   (archivo: css/pages/diary-stats.css) */
#cal-stats {
  --dst-surface: #12161f;
  --dst-bar: #C08600;          /* validado contra la superficie (dataviz) */
  --dst-bar-now: #FFD700;      /* semana actual */
  --dst-grid: #262c38;
  --dst-ink: #f2f2f2;
  --dst-muted: #8b93a3;
  margin-top: 26px;
  padding: 18px 18px 16px;
  background: var(--dst-surface);
  border: 5px solid #000;
  border-radius: 20px;
  box-shadow: 0 10px 0 #000, 0 20px 40px rgba(0,0,0,.55);
}
#cal-stats-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
#cal-stats-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--yellow-bright, #FFD700);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}
#cal-stats-sub { font-size: .78rem; color: var(--dst-muted); }

/* ── Fichas ── */
#cal-stats-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dst-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px;
  background: #0b0e14;
  border: 3px solid #000;
  border-radius: 14px;
  min-width: 0;
}
.dst-label { font-size: .76rem; color: var(--dst-muted); }
.dst-value {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--dst-ink);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.dst-sub { font-size: .72rem; color: var(--dst-muted); }

/* ── Gráfico ── */
#cal-stats-chart-wrap { position: relative; margin-top: 18px; }
#cal-stats-chart-title { font-size: .82rem; color: var(--dst-muted); margin-bottom: 8px; }
#cal-stats-chart { position: relative; height: 170px; margin: 0 0 26px 30px; }
.dst-grid { position: absolute; inset: 0; pointer-events: none; }
.dst-grid span { position: absolute; left: 0; right: 0; height: 1px; background: var(--dst-grid); }
.dst-grid i {
  position: absolute; right: calc(100% + 6px); top: -8px;
  font-style: normal; font-size: .7rem; color: var(--dst-muted);
  font-variant-numeric: tabular-nums;
}
.dst-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; }
.dst-col {
  position: relative;
  flex: 1;
  height: 100%;
  display: flex; align-items: flex-end; justify-content: center;
  cursor: default;
  outline: none;
  border-radius: 6px;
}
.dst-col.hover, .dst-col:focus-visible { background: rgba(255,255,255,.04); }
.dst-col:focus-visible { box-shadow: inset 0 0 0 2px var(--dst-ink); }
.dst-bar {
  width: min(24px, 62%);
  background: var(--dst-bar);
  border-radius: 4px 4px 0 0;
  transition: height .35s ease;
}
.dst-col.current .dst-bar { background: var(--dst-bar-now); }
.dst-cap {
  position: absolute; left: 50%; transform: translate(-50%, -4px);
  font-size: .74rem; font-weight: 600; color: var(--dst-ink);
  font-variant-numeric: tabular-nums;
}
.dst-x {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: .68rem; color: var(--dst-muted); white-space: nowrap;
}
.dst-col.current .dst-x { color: var(--dst-ink); font-weight: 600; }

#cal-stats-tip {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  font-size: .76rem; color: var(--dst-ink); white-space: nowrap;
  background: #000;
  border: 2px solid #3a4152;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
#cal-stats-tip.on { opacity: 1; }

/* ── Tabla ── */
#cal-stats-table-wrap { margin-top: 4px; }
#cal-stats-table-wrap summary { cursor: pointer; font-size: .8rem; color: var(--dst-muted); }
#cal-stats-table-wrap summary:hover { color: var(--dst-ink); }
#cal-stats-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: .8rem; color: var(--dst-ink); }
#cal-stats-table th { text-align: left; font-weight: 600; color: var(--dst-muted); padding: 5px 8px; border-bottom: 1px solid var(--dst-grid); }
#cal-stats-table td { padding: 5px 8px; border-bottom: 1px solid #1b2029; font-variant-numeric: tabular-nums; }
#cal-stats-table td:not(:first-child), #cal-stats-table th:not(:first-child) { text-align: right; }

#cal-stats-empty { padding: 14px 4px 4px; font-size: .86rem; color: var(--dst-muted); }

@media (max-width: 760px) {
  #cal-stats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dst-x.odd { visibility: hidden; }
}
@media (max-width: 420px) {
  #cal-stats { padding: 14px 12px 12px; }
  .dst-value { font-size: 1.25rem; }
  #cal-stats-tip { white-space: normal; width: max-content; max-width: 90%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .dst-bar { transition: none; }
}
@media (forced-colors: active) {
  .dst-bar { background: CanvasText; }
  .dst-col.current .dst-bar { background: Highlight; }
}