/* Base */
html,
body {
    background: #0a0a0a;
    color: #fff;
    font-family: 'Segoe UI', Arial, sans-serif;
}

/* Altura del header */
.app-header {
    height: 72px;
}

/* Colores personalizados utilizados en el HTML (sin Tailwind config inline) */
.bg-dark-bg {
    background-color: #0a0a0a !important;
}

.bg-dark-card {
    background-color: #1a1a1a !important;
}

.bg-dark-secondary {
    background-color: #181818 !important;
}

.text-sion-red {
    color: #ef4444 !important;
}

.bg-sion-red {
    background-color: #ef4444 !important;
}

.border-sion-red {
    border-color: #ef4444 !important;
}

/* Simulación de variante hover de Tailwind para color personalizado */
.hover\:bg-sion-red-dark:hover {
    background-color: #dc2626 !important;
}

/* Sidebar */
.sidebar-link.active,
.sidebar-link:hover {
    background: #181818 !important;
    color: #ef4444 !important;
}

/* Selección de texto */
::selection {
    background: #ef4444;
    color: #fff;
}

/* Barras de progreso */
.progress-bar {
    transition: width 0.5s ease;
}

/* Responsive sidebar (match original) */
@media (max-width: 900px) {
    aside {
        width: 100% !important;
        min-width: 0;
    }

    .sidebar-link {
        justify-content: center;
    }
}