/* DASHBOARD: GRAFICAS Y PANEL DE CONSUMIBLES */
.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.chart-box {
    position: relative;
    height: 260px;
    width: 100%;
}

.card-header-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--warning);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 999px;
    padding: 2px 10px;
}

/* Nivel de toner en la lista del dashboard */
.dash-toner-level {
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.dash-toner-critical { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
.dash-toner-low      { color: var(--warning); background: rgba(245, 158, 11, 0.14); }
.dash-toner-medium   { color: var(--accent); background: rgba(14, 165, 233, 0.12); }
.dash-toner-good     { color: var(--success); background: rgba(16, 185, 129, 0.12); }

/* El avatar del listado reutiliza los mismos tonos */
.list-item-avatar.dash-toner-critical { color: var(--danger); background: rgba(239, 68, 68, 0.12); }
.list-item-avatar.dash-toner-low      { color: var(--warning); background: rgba(245, 158, 11, 0.14); }
.list-item-avatar.dash-toner-medium   { color: var(--accent); background: rgba(14, 165, 233, 0.12); }
.list-item-avatar.dash-toner-good     { color: var(--success); background: rgba(16, 185, 129, 0.12); }

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

/* DASHBOARD: GRAFICA DE TENDENCIA */
.dashboard-trend {
    margin-bottom: 24px;
}

.chart-box-lg {
    height: 300px;
}

.card-subtitle {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-top: 2px;
}

.trend-chip {
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 4px 12px;
    white-space: nowrap;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.trend-chip-up {
    color: var(--success);
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.3);
}

.trend-chip-down {
    color: var(--danger);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
}

@media (max-width: 768px) {
    .chart-box-lg { height: 240px; }
}

/* Paginación de tablas (historial global de lecturas, etc.) */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-top: 1px solid var(--border-color, rgba(148, 163, 184, 0.15));
}

.table-pagination .pagination-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

.table-pagination .pagination-controls {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.82rem;
}

.btn-sm i {
    width: 15px;
    height: 15px;
}

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}