/* ============================================================
   DATA-ANALYTICS.CSS — Datanavis
   ============================================================ */

/* DASHBOARD DEMO */
#dashboard { background: var(--bg); }
.dash-wrapper {
  background: rgba(0,21,48,.8); border: 1px solid var(--border);
  border-radius: 24px; padding: 2rem; overflow: hidden;
  max-width: 1000px; margin: 0 auto;
}
.dash-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;
}
.dash-title    { font-size: 1rem; font-weight: 700; color: var(--white); }
.dash-subtitle { font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.dash-period {
  background: rgba(164,190,60,.1); border: 1px solid var(--border);
  border-radius: 8px; padding: .4rem .9rem;
  font-size: .75rem; color: var(--accent); cursor: pointer;
}

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 1.2rem; }
.kpi-label { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }
.kpi-value { font-size: 1.6rem; font-weight: 900; color: var(--white); margin-bottom: .2rem; }
.kpi-delta { font-size: .72rem; font-weight: 600; }
.kpi-delta.up   { color: var(--accent); }
.kpi-delta.down { color: #ff6b6b; }

/* CHARTS */
.charts-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.chart-box  { background: var(--card); border: 1px solid var(--border2); border-radius: 14px; padding: 1.2rem; }
.chart-label { font-size: .75rem; color: var(--muted); margin-bottom: 1rem; font-weight: 600; }

/* Bar chart */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.bar-wrap  { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; flex: 1; height: 100%; }
.bar {
  border-radius: 4px 4px 0 0; width: 100%;
  background: linear-gradient(0deg, var(--accent-dark), var(--accent));
  transition: height .8s ease; min-width: 8px;
}
.bar-month { font-size: .6rem; color: var(--muted); }

/* Donut */
.donut-wrap   { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.donut-svg    { flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: .5rem; }
.legend-item  { display: flex; align-items: center; gap: .5rem; font-size: .73rem; color: var(--muted); }
.legend-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Mini table */
.table-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mini-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.mini-table th {
  color: var(--muted); text-align: left;
  padding: .5rem .8rem; border-bottom: 1px solid var(--border2);
  font-weight: 600; font-size: .68rem; text-transform: uppercase;
}
.mini-table td {
  padding: .55rem .8rem;
  border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text);
}
.mini-table tr:last-child td { border-bottom: none; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: .4rem; }

/* Dash footer */
.dash-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border2); flex-wrap: wrap; gap: .5rem;
}
.dash-footer span { font-size: .7rem; color: var(--muted); }
.dash-footer .live { color: var(--accent); display: flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 600; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: blink 1.5s ease infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }

/* WHY DATA */
#why { background: var(--bg2); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.why-card {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; padding: 2rem;
  transition: border-color .3s, transform .3s;
}
.why-card:hover { border-color: var(--border); transform: translateY(-4px); }
.why-icon  { font-size: 2rem; margin-bottom: 1rem; }
.why-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: .5rem; }
.why-desc  { font-size: .85rem; color: var(--muted); line-height: 1.75; }
.why-stat  { font-size: 1.4rem; font-weight: 900; color: var(--accent); margin-top: .8rem; }

/* Secciones específicas */
#reportes     { background: var(--bg); }
#servicios    { background: var(--bg); }
#herramientas { background: var(--bg2); }
#faq          { background: var(--bg); }

@media (max-width: 900px) {
  .charts-row { grid-template-columns: 1fr; }
  .table-row  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
}