/**
 * AsistenciaV2 - Sistema de Recursos Humanos
 * Archivo CSS principal - Importa todos los estilos en orden correcto
 */

/* ====================================
   1. CORE - Estilos fundamentales
   ==================================== */

/* Reset y normalización */
@import 'core/reset.css';

/* Variables CSS (custom properties) */
@import 'core/variables.css';

/* Tipografía */
@import 'core/typography.css';

/* Utilidades */
@import 'core/utilities.css';


/* ====================================
   2. COMPONENTS - Componentes reutilizables
   ==================================== */

/* Botones */
@import 'components/buttons.css';

/* Cards */
@import 'components/cards.css';

/* Formularios */
@import 'components/forms.css';

/* Tablas */
@import 'components/tables.css';

/* Modales */
@import 'components/modals.css';

/* Alertas, toasts y badges */
@import 'components/alerts.css';

/* Paginación */
@import 'components/pagination.css';

/* Breadcrumbs */
@import 'components/breadcrumbs.css';

/* Dropdowns */
@import 'components/dropdowns.css';


/* ====================================
   3. LAYOUTS - Estructura de página
   ==================================== */

/* Header */
@import 'layouts/header.css';

/* Sidebar */
@import 'layouts/sidebar.css';

/* Contenido principal */
@import 'layouts/content.css';

/* Footer */
@import 'layouts/footer.css';


/* ====================================
   4. MODULES - Estilos específicos por módulo
   ==================================== */

/* Dashboard */
@import 'modules/dashboard.css';

/* Empleados */
@import 'modules/empleados.css';

/* Asistencias */
@import 'modules/asistencias.css';

/* Vacaciones */
@import 'modules/vacaciones.css';

/* Permisos */
@import 'modules/permisos.css';

/* Reportes */
@import 'modules/reportes.css';

/* Expedientes */
@import 'modules/expedientes.css';

/* Kiosko */
@import 'modules/kiosko.css';

/* Autenticación (login, reset password) */
@import 'modules/auth.css';


/* ====================================
   5. UTILITIES - Sobrescrituras finales
   ==================================== */

.hidden {
    display: none !important;
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Animaciones personalizadas */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Clases de animación */
.fade-in {
    animation: fadeIn var(--transition-base) ease-in;
}

.fade-out {
    animation: fadeOut var(--transition-base) ease-out;
}

.slide-in-up {
    animation: slideInUp var(--transition-base) ease-out;
}

.slide-in-down {
    animation: slideInDown var(--transition-base) ease-out;
}

.pulse {
    animation: pulse 2s infinite;
}

.spin {
    animation: spin 1s linear infinite;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 32px;
    height: 32px;
    border-width: 3px;
}

/* Skeleton loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
    border-radius: var(--border-radius);
}

.skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius-circle);
}

.skeleton-rect {
    width: 100%;
    height: 200px;
    border-radius: var(--border-radius);
}