@view-transition {
			navigation: auto;
		}

		:root {
			--color-danger: #bd2130;
			--color-danger-hover: #c82333;
			--color-danger-active: #dc3545;
			--color-red: #ef4444;
			--color-green: #22c55e;
		}

		header {
			margin-bottom: -2rem;
		}

		details {
			border: 1px solid var(--pico-muted-border-color);
			border-radius: 0.25rem;
			margin-bottom: 0.5rem;
			padding: 1rem;
		}

		button[data-danger="true"] {
			--pico-background-color: var(--color-danger);
			--pico-color: white;
			--pico-border-color: var(--color-danger);
		}

		button[data-danger="true"]:hover {
			--pico-background-color: var(--color-danger-hover);
			--pico-border-color: var(--color-danger-hover);
		}

		button[data-danger="true"]:active,
		button[data-danger="true"]:focus {
			--pico-background-color: var(--color-danger-active);
			--pico-border-color: var(--color-danger-active);
		}

		/* Ajustar el grosor del borde para que coincida con el azul */
		button[data-danger="true"]:focus {
			outline: none;
			box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
		}

		/* Opcional: Si quieres ambos más finos */
		button:focus {
			box-shadow: 0 0 0 0.1rem var(--pico-primary-focus);
		}

		button[data-danger="true"]:focus {
			box-shadow: 0 0 0 0.1rem rgba(220, 53, 69, 0.5);
		}

		.color-red {
			color: var(--color-red);
		}

		.color-green {
			color: var(--color-green);
		}

		.toaster {
			position: fixed;
			top: 1rem;
			right: 1rem;
			min-width: 250px;
			max-width: 400px;
			padding: 1rem;
			border-radius: 0.5rem;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			z-index: 1000;
			animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-out 2s forwards;
		}

		@keyframes slideIn {
			from {
				transform: translateX(100%);
				opacity: 0;
			}

			to {
				transform: translateX(0);
				opacity: 1;
			}
		}

		@keyframes fadeOut {
			to {
				opacity: 0;
				transform: translateX(100%);
			}
		}

		.toaster.success {
			background-color: #16a34a;
			color: white;
		}

		.toaster.error {
			background-color: #dc2626;
			color: white;
		}

		.toaster.warning {
			background-color: #f59e0b;
			color: white;
		}

		.toaster.info {
			background-color: #3b82f6;
			color: white;
		}

		/* Fix para el filtro de fecha */
		fieldset.date-filter {
			display: grid !important;
			grid-template-columns: auto 1fr auto !important;
			gap: 0 !important;
			align-items: center;
		}

		fieldset.date-filter button {
			justify-self: stretch;
		}

		fieldset.date-filter input[type="month"] {
			width: 100% !important;
			min-width: 0 !important;
			text-align: center;
		}

		/* Ocultar scrollbar pero mantener funcionalidad de scroll */
		.stats-scroll-container {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE/Edge */
		}

		.stats-scroll-container::-webkit-scrollbar {
			display: none; /* Chrome, Safari, Opera */
		}