/* ================================================= */
/* 1. Variables y Estilos Base */
/* ================================================= */

:root {
    /* Paleta de Colores (Basada en tu propuesta) */
    --color-primary: #007BFF;
    --color-primary-dark: #0056b3;
    --color-secondary: #6C757D;
    --color-success: #28A745;
    --color-danger: #DC3545;
    --color-background: #F8F9FA;
    --color-white: #FFFFFF;
    --color-black-noir: #1a1a1a;
    --color-red: #ff1010;
    --color-light-red: #ffe2e2;

    --text-main: #333;
    --radius: 16px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    /* Variables de Diseño */
    --sidebar-width-expanded: 256px; /* Para Desktop: 64 unidades Tailwind */
    --sidebar-width-collapsed: 0px;  /* Para Desktop: 16 unidades Tailwind */
    --header-height: 64px;
    --transition-duration: 0.3s;
}

a {
    text-decoration: none;
}

html {
    background-color: var(--color-black-noir);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background-color: var(--color-background);
}

.app-container {
    display: flex;
    min-height: 100dvh;
    width: 100%;
    max-width: 100dvw;
    min-width: 0;
}