:root {
    /* Paleta de colores suave y profesional */
    --primary: #FF9A5F;     /* Naranja cálido y acogedor */
    --primary-light: #FFC7A8; /* Naranja muy claro y suave */
    --primary-lighter: #FFF0E8; /* Naranja super claro para fondos */
    --primary-dark: #E67A4A;  /* Naranja oscuro más suave */
    
    --secondary: #4A6B8A;    /* Azul suave y profesional */
    --accent: #F8FAFC;       /* Fondo blanco azulado muy suave */
    --light: #FFFFFF;        /* Blanco puro */
    
    /* Escala de grises mejorada */
    --gray-50: #F9FAFB;     /* Gris muy muy claro */
    --gray-100: #F3F4F6;    /* Gris muy claro */
    --gray-200: #E5E7EB;    /* Gris claro */
    --gray-300: #D1D5DB;    /* Gris medio claro */
    --gray-400: #9CA3AF;    /* Gris medio */
    --gray-500: #6B7280;    /* Gris */
    --gray-600: #4B5563;    /* Gris oscuro */
    --gray-700: #374151;    /* Gris muy oscuro */
    --gray-800: #1F2937;    /* Gris casi negro */
    --gray-900: #111827;    /* Negro suave */
    
    --dark: #1E293B;         /* Azul grisáceo oscuro mejorado */
    
    /* Colores de estado más suaves */
    --success: #10B981;     /* Verde suave */
    --info: #3B82F6;        /* Azul suave */
    --warning: #F59E0B;     /* Amarillo suave */
    --danger: #EF4444;      /* Rojo suave */
    
    /* Sombras más sutiles */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

/* Sobrescribir colores de Bootstrap */
:root {
    --bs-primary: var(--primary);
    --bs-primary-rgb: 255, 154, 95;
    --bs-secondary: var(--secondary);
    --bs-secondary-rgb: 74, 107, 138;
    --bs-success: var(--success);
    --bs-info: var(--info);
    --bs-warning: var(--warning);
    --bs-danger: var(--danger);
    --bs-light: var(--light);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    color: var(--gray-800);
    background-color: #f5f7fa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Estructura de página completa */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content-wrapper {
    flex: 1 0 auto;
    width: 100%;
}

footer {
    flex-shrink: 0;
    width: 100%;
}

/* Estilos para el menú activo */
.nav-link.active {
    font-weight: 600;
    color: var(--primary) !important;
}

/* Estilos para las tarjetas */
.card {
    border: none;
    border-radius: 0.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Botones */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Formularios */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(255, 154, 95, 0.25);
}

/* Alertas */
.alert {
    border: none;
    border-radius: 0.5rem;
}

/* Tablas */
.table {
    --bs-table-striped-bg: var(--gray-50);
}

.table-hover tbody tr:hover {
    background-color: var(--primary-lighter);
}

/* Paginación */
.page-link {
    color: var(--primary);
}

.page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Badges */
.badge {
    font-weight: 500;
    padding: 0.35em 0.65em;
}

/* Tema oscuro */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--gray-900);
    --bs-body-color: var(--gray-200);
    --bs-body-color-rgb: 229, 231, 235;
    --bs-secondary-bg: var(--gray-800);
    --bs-tertiary-bg: var(--gray-800);
    --bs-emphasis-color: #fff;
    --bs-border-color: var(--gray-700);
}