/* ============ VARIABLES CSS ============ */
:root {
	/* Paleta de colores - Tema oscuro (default) */
	--bg-dark: #121212;
	--bg-medium: #1e1e1e;
	--bg-light: #2d2d2d;
	--element-dark: #575757;
	--element-light: #505050;
	--text-light: #f8f9fa;
	--text-medium: #e0e0e0;
	--text-muted: #ffffff;
	--accent-1: #4f8df5; /* Azul */
	--accent-2: #ff006a; /* Rojo */
	--accent-3: #00ff62; /* Verde */
	--accent-4: #ffcc00; /* Amarillo */
	--accent-5: #b794f4; /* Morado */
	--accent-6: #fd9b24; /* Naranja */
	--shadow-color: rgba(0, 0, 0, 0.4);
	--card-gradient: linear-gradient(145deg, var(--bg-light), var(--bg-medium));
	--card-border: 1px solid rgba(255, 255, 255, 0.05);
	--chart-grid-color: rgba(255, 255, 255, 0.08);
	--transition-speed: 0.3s;
	--bg-dark-rgb: 18, 18, 18; /* Equivalente a #121212 para gradientes con rgba */
	--header-height: 72px; /* Altura base del header para calcular el espacio */
	--header-height-scrolled: 56px; /* Altura reducida del header al hacer scroll */
}

/* Tema claro */
:root.light-theme {
	--bg-dark: #f8f9fa;
	--bg-medium: #f1f3f5;
	--bg-light: #ffffff;
	--element-dark: #383838;
	--element-light: #dee2e6;
	--text-light: #212529;
	--text-medium: #495057;
	--text-muted: #6c757d;
	--shadow-color: rgba(0, 0, 0, 0.1);
	--card-gradient: linear-gradient(145deg, #ffffff, #f8f9fa);
	--card-border: 1px solid rgba(0, 0, 0, 0.05);
	--chart-grid-color: rgba(0, 0, 0, 0.08);
	--bg-dark-rgb: 248, 249, 250; /* Equivalente a #f8f9fa para gradientes con rgba */
}

/* Detección automática del tema del navegador */
@media (prefers-color-scheme: light) {
	:root {
		--bg-dark: #d3d3d3;
		--bg-medium: #f1f3f5;
		--bg-light: #ffffff;
		--element-dark: #e9ecef;
		--element-light: #dee2e6;
		--text-light: #020202;
		--text-medium: #495057;
		--text-muted: #000000;
		--shadow-color: rgba(0, 0, 0, 0.1);
		--card-gradient: linear-gradient(145deg, #ffffff, #f8f9fa);
		--card-border: 1px solid rgba(0, 0, 0, 0.05);
		--chart-grid-color: rgba(0, 0, 0, 0.08);
		--bg-dark-rgb: 248, 249, 250;
	}
}

/* ============ ESTILOS GENERALES ============ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	background-color: var(--bg-dark);
	color: var(--text-light);
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin: 0;
	transition: background-color var(--transition-speed),
		color var(--transition-speed);
	/* Variable para controlar la altura de gráficas */
	--chart-height-hour: 400px;
}

/* Eliminar scrollbar */
html,
body {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE y Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

/* ============ CONTENEDOR PRINCIPAL ============ */
.main-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: visible;
}

/* ============ ESTILOS DEL HEADER TIPO PLATAFORMA ============ */
.dashboard-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--card-gradient);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 4px 20px var(--shadow-color);
	margin: 0 16px 16px 16px;
	padding: 20px 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all 0.3s ease-in-out;
	border-top: none;
	border-left: var(--card-border);
	border-right: var(--card-border);
	border-bottom: var(--card-border);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transform: translateY(0);
	height: var(--header-height);
}

/* Estado del header cuando se hace scroll */
.dashboard-header.scrolled {
	padding: 12px 24px;
	border-radius: 0 0 20px 20px;
	background: linear-gradient(
		to bottom,
		var(--bg-dark) 0%,
		rgba(var(--bg-dark-rgb), 0.95) 70%,
		rgba(var(--bg-dark-rgb), 0.9) 100%
	);
	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	height: var(--header-height-scrolled);
}

/* Animación para el header */
@keyframes headerSlideIn {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Ajustes para el título y subtítulo */
.header-left {
	display: flex;
	flex-direction: column;
	transition: all 0.3s ease;
}

.dashboard-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	transition: all 0.3s ease;
	color: var(--text-light);
}

.dashboard-subtitle {
	font-size: 0.9rem;
	color: var(--text-muted);
	transition: all 0.3s ease;
	font-weight: 500;
}

/* Cuando se hace scroll, reducir el tamaño del título */
.scrolled .dashboard-title {
	font-size: 1.2rem;
}

.scrolled .dashboard-subtitle {
	font-size: 0.8rem;
	opacity: 0.9;
}

/* ============ ESTILOS PARA BOTONES DEL HEADER ============ */
.header-actions {
	display: flex;
	gap: 16px;
}

.btn-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all 0.3s ease;
}

.header-btn {
	background-color: var(--element-dark);
	border: none;
	border-radius: 10px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-medium);
	transition: all 0.3s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-btn:hover {
	background-color: var(--element-light);
	transform: translateY(-2px);
	color: var(--text-light);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-top: 6px;
	transition: all 0.3s ease;
}

/* Cuando se hace scroll, reducir el tamaño de los botones */
.scrolled .header-btn {
	width: 32px;
	height: 32px;
}

.scrolled .btn-label {
	font-size: 0.7rem;
	opacity: 0.8;
}

/* ============ BOTÓN DE CAMBIO DE TEMA ============ */
.theme-toggle {
	background-color: var(--element-dark);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-light);
	transition: all var(--transition-speed);
}

.theme-toggle:hover {
	background-color: var(--element-light);
	transform: translateY(-2px);
}

.theme-toggle svg {
	transition: all 0.3s;
}

.theme-toggle .sun-icon {
	display: none;
}

.light-theme .theme-toggle .moon-icon {
	display: none;
}

.light-theme .theme-toggle .sun-icon {
	display: block;
}

/* ============ PANEL PRINCIPAL DE GRÁFICAS ============ */
.dashboard-content {
    flex: 1;
    padding: 16px;
    background-color: var(--bg-dark);
    overflow-x: auto;  /* ? AGREGADO */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background-color var(--transition-speed);
    padding-top: calc(16px + var(--header-height-scrolled));
    margin-top: calc(-1 * var(--header-height));
}

/* ============ PANEL DE ESTADÍSTICAS PRINCIPALES ============ */
.stats-panel {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	background: var(--card-gradient);
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 4px 12px var(--shadow-color);
	border: var(--card-border);
}

.stats-row {
	display: flex;
	gap: 16px;
	width: 100%;
}

.stats-item {
	flex: 1;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.stats-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--text-light);
	margin-bottom: 10px;
	letter-spacing: 0.5px;
}

.stats-value {
	font-size: 3rem;
	font-weight: 700;
	color: var(--text-light);
	line-height: 1.2;
	margin-bottom: 10px;
}

.stats-subtitle {
	font-size: 0.75rem;
	color: var(--text-muted);
	margin-bottom: 5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.stats-percentage {
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-light);
}

.main-stat {
	display: flex;
	align-items: center;
	padding: 16px;
	background-color: rgba(79, 141, 245, 0.1);
	border-radius: 12px;
	flex: 0 0 250px;
}

.main-icon {
	width: 48px;
	height: 48px;
	background-color: rgba(79, 141, 245, 0.2);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
	margin-right: 16px;
}

.main-value {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--text-light);
	display: block;
	line-height: 1.2;
}

.secondary-stats {
	display: flex;
	flex: 1;
	gap: 16px;
}

.stat-item {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 12px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	flex: 1;
	transition: all var(--transition-speed);
}

.stat-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 12px var(--shadow-color);
}

.stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background-color: rgba(79, 141, 245, 0.15);
	color: var(--accent-1);
	margin-right: 12px;
	flex-shrink: 0;
}

.total-ilesos .stat-icon {
	background-color: rgba(0, 255, 98, 0.304);
	color: rgb(0, 212, 81);
}

.total-lesionados .stat-icon {
	background-color: rgba(255, 217, 0, 0.397);
	color: rgb(255, 191, 0);
}

.total-fallecidos .stat-icon {
	background-color: rgba(255, 0, 0, 0.397);
	color: var(--accent-2);
}

.total-siniaccidentes .stat-icon {
	background-color: rgba(252, 173, 62, 0.15);
	color: var(--accent-6);
}

.stat-content {
	display: flex;
	flex-direction: column;
}

.stat-label {
	font-size: 0.7rem;
	color: var(--text-muted);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.stat-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--text-light);
}

/* ============ MODERN CHART GRID LAYOUT ============ */
.charts-parent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(8, minmax(350px, auto));  /* ? AUMENTADO A 350px */
    gap: 16px;
    width: 100%;
    margin-top: 16px;
    min-width: fit-content;  /* ? AGREGADO */
}

.chart-container {
    background: var(--card-gradient);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: var(--card-border);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    overflow: visible;  /* ? CORREGIDO */
    position: relative;
    padding-top: 15px !important;
    min-height: 350px;  /* ? AGREGADO */
	 
}
/* Eliminamos cualquier posible ocultamiento de etiquetas por padres */
.chart-container [class*="chartjs-"] {
	visibility: visible !important;
	opacity: 1 !important;
}

.chart-container::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	background: linear-gradient(135deg, transparent 50%);
	border-radius: 0 0 0 8px;
	opacity: 0.7;
}

.chart-container:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.chart-header-modern {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-header-modern h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-light);
}

.chart-actions-modern {
	display: flex;
	gap: 8px;
}

.chart-action-btn-modern {
	background-color: transparent;
	border: none;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-medium);
	transition: all 0.2s ease;
}

.chart-action-btn-modern:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--text-light);
	transform: translateY(-2px);
}

.chart-body-modern {
	flex: 1;
	padding: 10px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.chart-scroll-wrapper {
    flex: 1;
	width: 100%;
    overflow-x: auto;
    overflow-y: visible;  /* ? CORREGIDO */
    padding-bottom: 10px;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--element-dark) transparent;
    min-height: 300px !important;  /* ? AUMENTADO */
    padding-top: 20px;  /* ? AGREGADO */
    padding-right: 20px;  /* ? AGREGADO */
}

.chart-scroll-wrapper::-webkit-scrollbar {
	height: 6px;
	background: transparent;
}

.chart-scroll-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--element-dark);
	border-radius: 6px;
}

.chart-scroll-wrapper::-webkit-scrollbar-thumb:hover {
	background-color: var(--element-light);
}

/* Grid positioning classes */
.div1 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
}

.div3 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 3;
}

.div4 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 5;
}

.div5 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-row-start: 3;
}

.div6 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 3;
	grid-row-start: 3;
}

.div7 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-column-start: 5;
	grid-row-start: 3;
}

.div8 {
	grid-column: span 2 / span 2;
	grid-row: span 2 / span 2;
	grid-row-start: 5;
}

.div9 {
	grid-column: span 4 / span 4;
	grid-row: span 2 / span 2;
	grid-column-start: 3;
	grid-row-start: 5;
}

.div10 {
	grid-column: span 6 / span 6;
	grid-row: span 2 / span 2;
	grid-row-start: 7;
}

/* ============ ESTILOS PARA FILTROS FLOTANTES ============ */
.floating-filters {
	position: fixed;
	top: 20px;
	right: 20px;
	background: var(--card-gradient);
	border-radius: 12px;
	box-shadow: 0 4px 12px var(--shadow-color);
	padding: 12px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: 15px;
	border: var(--card-border);
	transition: all var(--transition-speed);
}

.floating-filters:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px var(--shadow-color);
}

.floating-filters .filter-group {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.floating-filters .filter-btn,
.floating-filters .clear-filters-btn {
	background-color: var(--element-dark);
	border: none;
	border-radius: 8px;
	width: 40px;
	height: 40px;
	cursor: pointer;
	transition: all var(--transition-speed);
	color: var(--text-medium);
	display: flex;
	align-items: center;
	justify-content: center;
}

.floating-filters .filter-btn:hover,
.floating-filters .clear-filters-btn:hover {
	background-color: var(--element-light);
	transform: translateY(-2px);
	color: var(--text-light);
}

.floating-filters .btn-label {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-align: center;
	margin-top: 6px;
	user-select: none;
	font-weight: 500;
}

/* ============ ESTILOS PARA MODALES ============ */
/* Estilos del modal */
.modal {
	display: none;
	position: fixed;
	z-index: 1002;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5); /* Color más sutil */
	backdrop-filter: blur(5px);
	animation: fadeInModal 0.3s ease-out;
}

@keyframes fadeInModal {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Contenido del modal */
.modal-content {
	background: var(--bg-light); /* Color de fondo más limpio */
	color: var(--text-light);
	margin: 5% auto;
	padding: 15px; /* Padding más pequeño */
	width: 90%;
	max-width: 400px;
	border-radius: 8px; /* Bordes más suaves */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra más sutil */
	max-height: 80vh;
	overflow-y: auto;
}

/* Contenedor de opciones de filtro */
.filter-options-container {
	display: flex;
	flex-direction: column;
	gap: 6px; /* Espaciado reducido */
}

/* Títulos dentro del modal */
.modal-content h2 {
	color: var(--text-light);
	margin: 0 0 12px 0; /* Eliminado margen superior */
	font-size: 1.1rem; /* Tamaño de texto más pequeño */
}

/* Estilos de etiquetas */
.modal-content label {
	display: flex;
	align-items: center;
	margin: 0;
	color: var(--text-medium);
	font-size: 0.9rem; /* Tamaño de texto más pequeño */
	cursor: pointer;
	padding: 4px; /* Padding más pequeño */
	border-radius: 4px; /* Bordes más suaves */
	transition: background-color 0.1s; /* Transición rápida */
}

.modal-content label:hover {
	background-color: var(--element-dark);
}

/* Estilos para checkbox */
.modal-content input[type="checkbox"] {
	margin-right: 6px; /* Espaciado menor */
	accent-color: var(--accent-1);
}

/* Botón de cerrar el modal */
.close-btn {
	color: var(--text-muted);
	position: absolute;
	top: 10px; /* Ajustar la posición */
	right: 15px;
	font-size: 24px; /* Tamaño del icono más pequeño */
	cursor: pointer;
	transition: color 0.1s;
}

.close-btn:hover {
	color: var(--text-light);
}

/* Botón para aplicar filtros */
.apply-filters-btn {
	background: var(--accent-1); /* Color uniforme */
	color: white;
	border: none;
	padding: 8px 12px; /* Padding más pequeño */
	border-radius: 4px; /* Bordes más suaves */
	cursor: pointer;
	font-size: 0.85rem; /* Texto más pequeño */
	margin-top: 8px; /* Margen superior reducido */
	transition: background-color 0.2s;
}

.apply-filters-btn:hover {
	background: var(--accent-5); /* Color diferente en hover */
}

/* ============ MEJORAS PARA GRÁFICAS ============ */
/* Contenedor específico para la gráfica de hora - hacerla más grande */
.chart-container[data-filter-keys="hour"] {
	height: auto !important;
	min-height: 450px !important; /* Aumentar altura mínima para la gráfica de hora */
	overflow: visible !important; /* Crucial para que las etiquetas no se corten */
}

.chart-container[data-filter-keys="hour"] .chart-body-modern {
	padding-top: 50px !important; /* Más espacio en la parte superior */
	min-height: 400px !important;
	overflow: visible !important;
}

.chart-container[data-filter-keys="hour"] .chart-scroll-wrapper {
	min-height: 400px !important;
	padding-top: 40px !important;
	overflow: visible !important; /* Importante para que las etiquetas no se corten */
}

/* ? AGREGAR ESTA SECCIÓN COMPLETA 
.chart-container[data-filter-keys*="cause"] {
    grid-column: span 6;
    min-height: 600px !important;
}*/

.chart-container[data-filter-keys*="cause"] .chart-scroll-wrapper {
    min-width: 1200px;
    min-height: 500px !important;
    overflow-x: auto;
    overflow-y: visible;
    padding: 30px;
}

/* ESTILOS CRÍTICOS PARA ASEGURAR LA VISIBILIDAD DE LAS ETIQUETAS */
.chartjs-datalabels {
	background-color: rgba(128, 128, 128, 0.35) !important;
	border-radius: 3px !important;
	padding: 3px 4px !important;
	font-weight: bold !important;
	color: var(--text-light) !important;
	font-size: 10px !important;
	text-align: center !important;
	white-space: pre !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
	z-index: 10 !important; /* Asegurar que esté encima de otros elementos */
	opacity: 1 !important; /* Asegurar que sea completamente visible */
	pointer-events: none !important; /* Evitar interferencia con interacciones */
	display: block !important; /* Forzar la visualización */
}

/* Estilos específicos para la gráfica de hora */
#chart-hour + .chartjs-datalabels, /* Para Chart.js v2 */
#chart-hour ~ .chartjs-datalabels, /* Para Chart.js v3 */
canvas#chart-hour + .chartjs-datalabels-layer .chartjs-datalabels {
	font-size: 9px !important;
	line-height: 1.2 !important;
	min-width: 40px !important;
	/* Añadir un borde sutil para resaltar en cualquier fondo */
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	/* Añadir un sutil texto sombreado para legibilidad */
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Ajustes para Canvas de la gráfica de hora */
#chart-hour {
	margin-top: 25px !important;
	margin-bottom: 20px !important;
	min-height: 350px !important;
}

/* Forzar la visualización correcta de las etiquetas en tema claro y oscuro */
:root.light-theme .chartjs-datalabels,
:root.light-theme #chart-hour ~ .chartjs-datalabels,
:root.light-theme #chart-hour + .chartjs-datalabels {
	color: var(--text-light) !important;
	background-color: rgba(
		160,
		160,
		160,
		0.35
	) !important; /* Ligeramente más oscuro para modo claro */
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) !important;
}



/* Asegurarse de que el contenedor del gráfico no oculte nada */
.chart-body-modern {
	overflow: visible !important;
}

/* Tooltips siempre visibles y con buen contraste */
.chartjs-tooltip {
	background-color: rgba(20, 20, 20, 0.85) !important;
	color: white !important;
	border-radius: 4px !important;
	padding: 8px 12px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
	font-weight: 500 !important;
	z-index: 9999 !important;
}

/* ============ MEDIA QUERIES MEJORADOS PARA RESPONSIVIDAD ============ */
/* Pantallas grandes */
@media (min-width: 1201px) {
	.dashboard-header {
		margin: 0 24px 20px 24px;
	}
}

/* Pantallas medianas */
@media (max-width: 1200px) {
	.charts-parent {
		grid-template-columns: repeat(4, 1fr);
	}

	.div4,
	.div7 {
		grid-column-start: auto;
		grid-row-start: auto;
	}

	.div9 {
		grid-column: span 4;
	}

	.div10 {
		grid-column: span 4;
	}
}

/* Tablets */
@media (max-width: 992px) {
	.stats-row {
		flex-direction: column;
	}

	.main-stat {
		flex: 1;
	}

	.secondary-stats {
		flex-direction: column;
	}

	.dashboard-header {
		margin: 0 12px 12px 12px;
		padding: 16px 20px;
	}

	.dashboard-header.scrolled {
		padding: 10px 16px;
	}
}

/* Tablets pequeñas y móviles grandes */
@media (max-width: 768px) {
	.charts-parent {
		grid-template-columns: repeat(2, 1fr);
	}

	.div1,
	.div3,
	.div4,
	.div5,
	.div6,
	.div7,
	.div8 {
		grid-column: span 2;
	}

	.div9,
	.div10 {
		grid-column: span 2;
	}

	.dashboard-header {
		margin: 0 8px 8px 8px;
		padding: 16px;
		--header-height: 64px;
		--header-height-scrolled: 48px;
	}

	.scrolled {
		padding: 8px 12px;
	}

	.dashboard-title {
		font-size: 1.3rem;
	}

	.scrolled .dashboard-title {
		font-size: 1.1rem;
	}

	.dashboard-subtitle {
		font-size: 0.85rem;
	}

	.scrolled .dashboard-subtitle {
		font-size: 0.75rem;
	}

	.header-btn {
		width: 34px;
		height: 34px;
	}

	.scrolled .header-btn {
		width: 30px;
		height: 30px;
	}

	.floating-filters {
		top: calc(var(--header-height-scrolled) + 10px);
		right: 10px;
		padding: 8px;
	}

	.floating-filters .filter-btn,
	.floating-filters .clear-filters-btn {
		width: 36px;
		height: 36px;
	}

	.floating-filters .btn-label {
		font-size: 0.7rem;
	}

	.header-actions {
		gap: 12px;
	}

	.chart-container[data-filter-keys="hour"] {
		min-height: 350px !important;
	}

	.chart-container[data-filter-keys="hour"] .chart-body-modern {
		padding-top: 30px !important;
	}

	#chart-hour .chartjs-datalabels {
		font-size: 8px !important;
		padding: 2px 3px !important;
		min-width: 30px !important;
	}
}

/* Móviles */
@media (max-width: 480px) {
.chart-container{
		width:100% !important;
	}

	.charts-parent {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.div1,
	.div3,
	.div4,
	.div5,
	.div6,
	.div7,
	.div8,
	.div9,
	.div10 {
		grid-column: span 1;
		grid-row: span 1;
width:100% !important;
	}

	.chart-header-modern {
		padding: 12px 16px;
	}

	.chart-header-modern h3 {
		font-size: 0.9rem;
	}

	.dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		--header-height: 120px; /* Altura ajustada para layout en columna */
		--header-height-scrolled: 90px;
		padding: 12px;
	}

	.dashboard-header.scrolled {
		padding: 8px;
	}

	.header-actions {
		align-self: flex-end;
		margin-top: 5px;
	}

	.dashboard-title {
		font-size: 1.2rem;
	}

	.dashboard-subtitle {
		font-size: 0.8rem;
	}

	.scrolled .dashboard-title {
		font-size: 1rem;
	}

	.scrolled .dashboard-subtitle {
		font-size: 0.7rem;
	}

	.btn-container {
		flex-direction: row;
		gap: 4px;
		align-items: center;
	}

	.btn-label {
		margin-top: 0;
		margin-left: 4px;
	}

	.stats-row {
		gap: 10px;
	}

	.secondary-stats {
		gap: 10px;
	}

	.modal-content {
		width: 95%;
		margin: 5% auto;
		padding: 15px;
	}

	/* Ajuste específico para el header en modo columna */
	.dashboard-content {
		padding-top: calc(
			16px + var(--header-height-scrolled)
		); /* Más espacio para el header en columna */
	}
}

/* Móviles pequeños */
@media (max-width: 360px) {
	.header-btn {
		width: 32px;
		height: 32px;
	}

	.scrolled .header-btn {
		width: 28px;
		height: 28px;
	}

	.btn-label {
		font-size: 0.7rem;
	}

	.scrolled .btn-label {
		font-size: 0.65rem;
	}

	.stat-item {
		padding: 10px;
	}
}

/* ============ CORRECCIONES ADICIONALES PARA GRÁFICAS ============ */
canvas {
    max-width: 100% !important;
    height: auto !important;
}

.chart-container.problematic {
    overflow: visible !important;
    z-index: 10;
}

/* Forzar visibilidad de etiquetas en cualquier tema */
:root .chartjs-datalabels,
:root.light-theme .chartjs-datalabels {
    z-index: 1000 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* ============ MEJORAS ESPECÍFICAS PARA GRÁFICA DE HORA ============ */

/* Contenedor específico para gráfica de hora */
.chart-container[data-filter-keys="hour"] {
    min-height: 520px !important;
    overflow: visible !important;
    padding-bottom: 20px !important;
}

.chart-container[data-filter-keys="hour"] .chart-body-modern {
    padding-top: 30px !important;
    min-height: 480px !important;
    overflow: visible !important;
}

.chart-container[data-filter-keys="hour"] .chart-scroll-wrapper {
    min-height: 480px !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
    overflow: visible !important;
}

/* Canvas específico para gráfica de hora */
.hour-chart-enhanced {
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    min-height: 420px !important;
}

/* Mejoras para los datalabels de la gráfica de hora */
.chart-container[data-filter-keys="hour"] .chartjs-datalabels {
    z-index: 1001 !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(1px) !important;
}

/* Responsive para gráfica de hora */
@media (max-width: 768px) {
    .chart-container[data-filter-keys="hour"] {
        min-height: 400px !important;
    }
    
    .chart-container[data-filter-keys="hour"] .chart-scroll-wrapper {
        min-height: 350px !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }
    
    .hour-chart-enhanced {
        min-height: 320px !important;
        margin-top: 30px !important;
    }
}

@media (max-width: 480px) {
    .chart-container[data-filter-keys="hour"] {
        min-height: 350px !important;
    }
    
    .chart-container[data-filter-keys="hour"] .chart-scroll-wrapper {
        min-height: 300px !important;
        padding-top: 35px !important;
    }
    
    .hour-chart-enhanced {
        min-height: 280px !important;
        margin-top: 25px !important;
    }
}