/* ============================================
   CONTROL RELOJ - SISTEMA DE ESTILOS MODULAR
   ============================================
   Arquitectura: ITCSS (Inverted Triangle CSS)
   
   Orden de importación (de genérico a específico):
   1. Settings    - Variables CSS
   2. Base        - Reset y estilos base
   3. Layout      - Estructura principal
   4. Components  - Componentes UI
   5. Utilities   - Utilidades y responsive
   ============================================ */

/* 1. SETTINGS - Variables y configuración */
@import url('./01-settings/variables.css');

/* 2. BASE - Reset y estilos fundamentales */
@import url('./02-base/reset.css');

/* 3. LAYOUT - Estructura de la aplicación */
@import url('./03-layout/container.css');
@import url('./03-layout/screen.css');

/* 4. COMPONENTS - Componentes de UI */
@import url('./04-components/buttons.css');
@import url('./04-components/time-display.css');
@import url('./04-components/date-navigation.css');
@import url('./04-components/hours-counter.css');
@import url('./04-components/records.css');
@import url('./04-components/modal.css');
@import url('./04-components/forms.css');
@import url('./04-components/settings/settings-page.css');
@import url('./04-components/settings/settings-stats.css');
@import url('./04-components/settings/workdays.css');
@import url('./04-components/settings/progress.css');
@import url('./04-components/settings/leave-days.css');
@import url('./04-components/recent-records-footer.css');
@import url('./04-components/bottom-nav-bar.css'); /* 👈 NUEVO */

/* 5. UTILITIES - Utilidades y responsive */
@import url('./05-utilities/responsive.css');
@import url('./05-utilities/scrollbar.css');


/* Estilos para el Badge de saldo de horas */
.balance-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    font-weight: bold;
    font-size: 1rem;
    margin-left: 1rem;
}

.balance-value {
    margin-right: 0.5rem;
}

.balance-positive {
    background-color: var(--color-green-light);
    color: var(--color-green-dark);
}

.balance-negative {
    background-color: var(--color-red-light);
    color: var(--color-red-dark);
}

.balance-neutral {
    background-color: var(--color-grey-light);
    color: var(--color-grey-dark);
}

/* ============================================
   NOT AUTHORIZED PAGE
   ============================================ */

.not-authorized-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--screen-bg);
    padding: var(--spacing-xl);
}

.not-authorized-container {
    text-align: center;
    max-width: 400px;
}

.not-authorized-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto var(--spacing-2xl);
    background: rgba(255, 69, 58, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-authorized-icon svg {
    width: 50px;
    height: 50px;
    stroke: var(--accent-red);
}

.not-authorized-title {
    font-size: var(--font-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

.not-authorized-message {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-2xl);
}

.not-authorized-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--accent-blue);
    color: white;
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-base);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

.not-authorized-btn:hover {
    background: #0071e3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.4);
}

.not-authorized-btn:active {
    transform: translateY(0);
}

.not-authorized-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}