/* ==========================================================================
   iLesso Admin Panel — Base Design System (app.css)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=Questrial&display=swap');

:root {
    /* Color Palette */
    --color-primary: #1E2D3D; /* Azul marino oscuro */
    --color-primary-rgb: 30, 45, 61;
    --color-secondary: #2c414b;
    --color-accent: #E8A030; /* Dorado / Ámbar */
    --color-accent-rgb: 232, 160, 48;
    --color-creme: #FFF8EE; /* Crema clara de acento */
    
    /* System Colors */
    --color-bg-main: #f8fafc;
    --color-bg-card: #ffffff;
    --color-border: #e2e8f0;
    
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-text-light: #ffffff;
    
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #0ea5e9;
    
    /* Layout & Sizing */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --topbar-height: 70px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-accent: 0 10px 15px -3px rgba(243, 169, 70, 0.15), 0 4px 6px -4px rgba(243, 169, 70, 0.1);
    
    /* Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Reset & Styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    font-family: "Century Gothic", CenturyGothic, "AppleGothic", "Questrial", sans-serif;
    letter-spacing: -0.005em;
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, th, .sidebar-logo span, .menu-label, .user-name {
    font-family: "Century Gothic", CenturyGothic, "AppleGothic", "Questrial", sans-serif;
    letter-spacing: -0.02em;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    outline: none;
}

ul {
    list-style: none;
}

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-column { flex-direction: column; }
.w-full { width: 100%; }

.m-0 { margin: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.p-3 { padding: 1.5rem; }

/* Micro-animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.animate-fade-in {
    animation: fadeIn var(--transition-normal) forwards;
}