/* ============================================
   LaboralPro — Design System
   Sistema de Gestión Laboral para Contadores
   ============================================ */

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

/* ── CSS Custom Properties ── */
:root {
    /* ── Colores Principales ── */
    --color-primary:        #2563EB;
    --color-primary-hover:  #1D4ED8;
    --color-primary-light:  #DBEAFE;
    --color-primary-lighter:#EFF6FF;
    --color-primary-dark:   #1E3A8A;

    /* ── Colores Funcionales ── */
    --color-success:        #22C55E;
    --color-success-light:  #DCFCE7;
    --color-success-dark:   #15803D;
    --color-warning:        #F59E0B;
    --color-warning-light:  #FEF3C7;
    --color-warning-dark:   #B45309;
    --color-error:          #EF4444;
    --color-error-light:    #FEE2E2;
    --color-error-dark:     #DC2626;
    --color-info:           #3B82F6;
    --color-info-light:     #DBEAFE;

    /* ── Colores por Módulo ── */
    --module-dashboard:     #2563EB;
    --module-empresas:      #38BDF8;
    --module-trabajadores:  #22C55E;
    --module-contratos:     #1E3A8A;
    --module-permisos:      #F59E0B;
    --module-vacaciones:    #14B8A6;
    --module-documentos:    #8B5CF6;
    --module-calendario:    #F97316;
    --module-config:        #6B7280;

    /* ── Neutros ── */
    --color-bg:             #F8FAFC;
    --color-surface:        #FFFFFF;
    --color-text:           #374151;
    --color-text-secondary: #6B7280;
    --color-text-muted:     #9CA3AF;
    --color-border:         #E5E7EB;
    --color-border-light:   #F1F5F9;
    --color-divider:        #E2E8F0;

    /* ── Tipografía ── */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs:         11px;
    --font-size-sm:         12px;
    --font-size-base:       14px;
    --font-size-md:         16px;
    --font-size-lg:         20px;
    --font-size-xl:         24px;
    --font-size-2xl:        30px;
    --font-size-3xl:        36px;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;

    /* ── Espaciado (8pt grid) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Bordes Redondeados ── */
    --radius-sm:   4px;
    --radius-base: 8px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* ── Sombras ── */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-base:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
    --shadow-md:    0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
    --shadow-lg:    0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.15);

    /* ── Transiciones ── */
    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   250ms ease;
    --transition-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 72px;
    --topbar-height:     64px;
    --content-max-width: 1440px;
    --bottom-nav-height: 64px;
}

/* ── CSS Reset Moderno ── */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
}

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

a:hover {
    color: var(--color-primary-hover);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
}

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

ul, ol {
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

/* ── Utilidades Tipográficas ── */
.text-xs      { font-size: var(--font-size-xs); }
.text-sm      { font-size: var(--font-size-sm); }
.text-base    { font-size: var(--font-size-base); }
.text-md      { font-size: var(--font-size-md); }
.text-lg      { font-size: var(--font-size-lg); }
.text-xl      { font-size: var(--font-size-xl); }
.text-2xl     { font-size: var(--font-size-2xl); }
.text-3xl     { font-size: var(--font-size-3xl); }

.font-regular  { font-weight: var(--font-weight-regular); }
.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

.text-primary    { color: var(--color-primary); }
.text-secondary  { color: var(--color-text-secondary); }
.text-muted      { color: var(--color-text-muted); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-error      { color: var(--color-error); }
.text-white      { color: #FFFFFF; }

.uppercase { text-transform: uppercase; letter-spacing: 0.05em; }

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

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

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.animate-fade-in    { animation: fadeIn var(--transition-base) ease forwards; }
.animate-fade-in-up { animation: fadeInUp var(--transition-slow) ease forwards; }
.animate-scale-in   { animation: scaleIn var(--transition-base) ease forwards; }
.animate-shake      { animation: shake 0.5s ease; }

/* Staggered delays */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }

/* ── Scrollbar Custom ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* ── Selection ── */
::selection {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
}