/* Dashboard responsive utilities */
:root {
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --accent: #0ea5e9;
  --accent-dark: #0369a1;
  --warn: #f59e0b;
  --success: #10b981;
}
.kpi-grid { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.card { background-color: #ffffff; color: var(--text-primary); border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1rem; }
.dark .card { background-color: #0f172a; color: #e2e8f0; }

.chart-wrap { width: 100%; position: relative; }
.chart-wrap canvas { width: 100% !important; height: auto !important; }

.table-scroll { width: 100%; overflow-x: auto; }

.skeleton { animation: pulse 1.5s ease-in-out infinite; background-color: #e2e8f0; border-radius: 0.5rem; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
.dark .skeleton { background-color: #334155; }

/* Visual polish for dashboard */
.card { transition: box-shadow .2s ease, transform .2s ease; }
.card:hover { box-shadow: 0 6px 16px rgba(0,0,0,.07); transform: translateY(-1px); }

.kpi-grid { gap: 1rem; }
.kpi-grid .card h3 { font-size: 1rem; color: var(--text-secondary); }
body.dark .kpi-grid .card h3 { color: #d1d5db; }

.chart-wrap { position: relative; min-height: 280px; padding: .5rem; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; }
body.dark .chart-wrap { border-color: rgba(255,255,255,.08); }

/* Estado vacío para charts */
.chart-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.9rem; color: var(--text-secondary); background: rgba(255,255,255,0.7); border-radius: 10px; }
.dark .chart-empty { background: rgba(2,6,23,0.6); }

/* Badges used in mini table */
.badge { display:inline-block; padding: 4px 8px; border-radius: 999px; font-size: .85rem; font-weight: 600; letter-spacing: .01em; }
.badge-amber { background:#f59e0b; color:#111827; }
.badge-indigo { background:#6366f1; color:#fff; }
.badge-emerald { background:#10b981; color:#062016; }
.badge-rose { background:#f43f5e; color:#fff; }
.badge-gray { background:#6b7280; color:#fff; }

/* Table improvements */
.table-wrap table { border-collapse: separate; border-spacing: 0; }
.table-wrap th, .table-wrap td { border-bottom: 1px solid rgba(0,0,0,.06); }
body.dark .table-wrap th, body.dark .table-wrap td { border-bottom-color: rgba(255,255,255,.08); }
.table-wrap tr:hover td { background: rgba(59,130,246,.06); }
body.dark .table-wrap tr:hover td { background: rgba(59,130,246,.12); }

/* Calendar tweaks */
.calendar .day { transition: background-color .15s ease, box-shadow .15s ease; }
.calendar .day.has { box-shadow: inset 0 0 0 2px rgba(59,130,246,.4); }
.calendar .day:hover { background: rgba(59,130,246,.08); }
body.dark .calendar .day:hover { background: rgba(59,130,246,.16); }

/* Export buttons */
.export-btns button { border: 1px solid rgba(0,0,0,.1); }
body.dark .export-btns button { border-color: rgba(255,255,255,.18); }

@media (max-width: 768px){
  .chart-wrap { min-height: 220px; }
}