/**
 * Global Styles - Expertos Landing Page
 * Design Tokens & Custom Styles
 */

/* ============================================
   CSS VARIABLES (Design Tokens)
   ============================================ */
:root {
    /* Primary Colors - HSL(19, 100%, L) */
    --color-primary-50: hsl(19, 100%, 96%);   /* L: 96 */
    --color-primary-100: hsl(19, 100%, 92%);  /* L: 92 */
    --color-primary-200: hsl(19, 100%, 84%); /* L: 84 */
    --color-primary-300: hsl(19, 100%, 76%);  /* L: 76 */
    --color-primary-400: hsl(19, 100%, 66%);  /* L: 66 */
    --color-primary-500: hsl(19, 100%, 54%);  /* L: 54 */
    --color-primary-600: hsl(19, 100%, 44%); /* L: 44 */
    --color-primary-700: hsl(19, 100%, 32%);  /* L: 32 */
    --color-primary-800: hsl(19, 100%, 22%); /* L: 22 */
    --color-primary-900: hsl(19, 100%, 12%); /* L: 12 */

    /* Gray Colors - HSL(0, 0%, L) basado en 300 = 76% */
    --color-gray-50: hsl(0, 0%, 96%);
    --color-gray-100: hsl(0, 0%, 92%);
    --color-gray-200: hsl(0, 0%, 84%);
    --color-gray-300: hsl(0, 0%, 76%);  /* Base: L 76 */
    --color-gray-400: hsl(0, 0%, 66%);
    --color-gray-500: hsl(0, 0%, 54%);
    --color-gray-600: hsl(0, 0%, 44%);
    --color-gray-700: hsl(0, 0%, 32%);
    --color-gray-800: hsl(0, 0%, 22%);
    --color-gray-900: hsl(0, 0%, 12%);

    /* Text Colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-light: var(--color-gray-400);
    --color-text-white: #ffffff;

    /* Background Colors */
    --color-bg-primary: #F9FAFB;
    --color-bg-secondary: #FFFFFF;
    --color-bg-dark: var(--color-gray-900);

    /* Typography - Font Families */
    --font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-display: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    
    /* Typography - Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Typography - Display Sizes (Poppins) - Mobile First */
    --font-size-display-large: 34px;
    --font-size-display-medium: 32px;
    --font-size-display-small: 30px;
    
    /* Typography - Heading Sizes (Poppins) - Mobile First */
    --font-size-heading-large: 28px;
    --font-size-heading-medium: 24px;
    --font-size-heading-small: 20px;
    
    /* Typography - Title Sizes (Inter) - Mobile First */
    --font-size-title-large: 22px;
    --font-size-title-medium: 16px;
    --font-size-title-small: 14px;
    
    /* Typography - Body Sizes (Inter) - Mobile First */
    --font-size-body-xlarge: 16px;
    --font-size-body-large: 14px;
    --font-size-body-medium: 14px;
    
    /* Typography - Label Sizes (Inter) - Mobile First */
    --font-size-label-xlarge: 16px;
    --font-size-label-large: 14px;
    --font-size-label-medium: 12px;
    --font-size-label-small: 12px;
    
    --line-height-tight: 1.1;
    --line-height-normal: 1.25;
    --line-height-relaxed: 1.5;
    
    /* Spacing - Mobile First */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1rem;      /* 16px */
    --spacing-xl: 1.5rem;    /* 24px */
    --spacing-2xl: 1.7rem;   /* 27px */
    --spacing-3xl: 2rem;     /* 32px */
    
    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;
    
    /* 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 -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ============================================
   RESPONSIVE VARIABLES (Mobile First)
   ============================================ */
/* Mobile: Los valores base en :root ya están definidos arriba (Mobile First) */

/* Tablet y Desktop (768px+) */
@media (min-width: 768px) {
    :root {
        /* Typography - Display Sizes (Desktop) */
        --font-size-display-large: 44px;
        --font-size-display-medium: 36px;
        --font-size-display-small: 32px;
        
        /* Typography - Heading Sizes (Desktop) */
        --font-size-heading-large: 32px;
        --font-size-heading-medium: 28px;
        --font-size-heading-small: 24px;
        
        /* Typography - Title Sizes (Desktop) */
        --font-size-title-large: 24px;
        --font-size-title-medium: 18px;
        --font-size-title-small: 16px;
        
        /* Typography - Body Sizes (Desktop) */
        --font-size-body-xlarge: 18px;
        --font-size-body-large: 16px;
        --font-size-body-medium: 14px;
        
        /* Typography - Label Sizes (Desktop) */
        --font-size-label-xlarge: 18px;
        --font-size-label-large: 16px;
        --font-size-label-medium: 14px;
        --font-size-label-small: 12px;
    
        --line-height-tight: 1.25;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.75;

        /* Spacing desktop */
        --spacing-xs: 0.25rem;   /* 4px */
        --spacing-sm: 0.5rem;    /* 8px */
        --spacing-md: 1rem;    /* 16px */
        --spacing-lg: 1.5rem;  /* 24px */
        --spacing-xl: 2rem;    /* 32px */
        --spacing-2xl: 3rem;   /* 48px */
        --spacing-3xl: 4rem;   /* 64px */
    }
}


/* ============================================
   PRIMARY COLOR CLASSES
   ============================================ */
/* Background Colors */
.bg-primary-50 { background-color: var(--color-primary-50); }
.bg-primary-100 { background-color: var(--color-primary-100); }
.bg-primary-200 { background-color: var(--color-primary-200); }
.bg-primary-300 { background-color: var(--color-primary-300); }
.bg-primary-400 { background-color: var(--color-primary-400); }
.bg-primary-500 { background-color: var(--color-primary-500); }
.bg-primary-600 { background-color: var(--color-primary-600); }
.bg-primary-700 { background-color: var(--color-primary-700); }
.bg-primary-800 { background-color: var(--color-primary-800); }
.bg-primary-900 { background-color: var(--color-primary-900); }

/* Text Colors */
.text-primary-50 { color: var(--color-primary-50); }
.text-primary-100 { color: var(--color-primary-100); }
.text-primary-200 { color: var(--color-primary-200); }
.text-primary-300 { color: var(--color-primary-300); }
.text-primary-400 { color: var(--color-primary-400); }
.text-primary-500 { color: var(--color-primary-500); }
.text-primary-600 { color: var(--color-primary-600); }
.text-primary-700 { color: var(--color-primary-700); }
.text-primary-800 { color: var(--color-primary-800); }
.text-primary-900 { color: var(--color-primary-900); }

/* Border Colors */
.border-primary-50 { border-color: var(--color-primary-50); }
.border-primary-100 { border-color: var(--color-primary-100); }
.border-primary-200 { border-color: var(--color-primary-200); }
.border-primary-300 { border-color: var(--color-primary-300); }
.border-primary-400 { border-color: var(--color-primary-400); }
.border-primary-500 { border-color: var(--color-primary-500); }
.border-primary-600 { border-color: var(--color-primary-600); }
.border-primary-700 { border-color: var(--color-primary-700); }
.border-primary-800 { border-color: var(--color-primary-800); }
.border-primary-900 { border-color: var(--color-primary-900); }

/* Hover States */
.hover\:bg-primary-600:hover { background-color: var(--color-primary-600); }
.hover\:bg-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:text-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-primary-700:hover { color: var(--color-primary-700); }

/* ============================================
   GRAY COLOR CLASSES
   ============================================ */
/* Background Colors */
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-200 { background-color: var(--color-gray-200); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-500 { background-color: var(--color-gray-500); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-700 { background-color: var(--color-gray-700); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }

/* Text Colors */
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }

/* ============================================
   TYPOGRAPHY SYSTEM
   ============================================ */

/* Display - Poppins Bold */
.text-display-large {
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-large);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.text-display-medium {
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-medium);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.text-display-small {
    font-family: var(--font-family-display);
    font-size: var(--font-size-display-small);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

/* Headings - Poppins Semibold */
.text-heading-large {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-heading-large);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.text-heading-medium {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-heading-medium);
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
}

.text-heading-small {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-heading-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

/* Title - Inter Regular */
.text-title-large {
    font-family: var(--font-family-base);
    font-size: var(--font-size-title-large);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

.text-title-medium {
    font-family: var(--font-family-base);
    font-size: var(--font-size-title-medium);
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
}

.text-title-small {
    font-family: var(--font-family-base);
    font-size: var(--font-size-title-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
}

/* Body - Inter Regular */
.text-body-xlarge {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-xlarge);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

.text-body-large {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-large);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

.text-body-medium {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
}

/* Label - Inter Regular */
.text-label-xlarge {
    font-family: var(--font-family-base);
    font-size: var(--font-size-label-xlarge);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

.text-label-large {
    font-family: var(--font-family-base);
    font-size: var(--font-size-label-large);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

.text-label-medium {
    font-family: var(--font-family-base);
    font-size: var(--font-size-label-medium);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

.text-label-small {
    font-family: var(--font-family-base);
    font-size: var(--font-size-label-small);
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

/* ============================================
   BUTTON CLASSES
   ============================================ */
.btn-primary {
    font-family: var(--font-family-base);
    font-size: var(--font-size-label-xlarge); /* text-label-xlarge */
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    background-color: var(--color-primary-500);
    color: var(--color-text-white) !important; /* Forzar color frente a estilos globales de <a> */
    -webkit-text-fill-color: var(--color-text-white); /* iOS Safari */
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    border: none;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.btn-primary:hover {
    background-color: var(--color-primary-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

/* ============================================
   UTILITY CLASSES
   ============================================ */
.primary-label-color {
    color: var(--color-primary-700);
}

.primary-bg-button {
    background-color: var(--color-primary-500);
    color: var(--color-text-white);
}

.primary-bg-button:hover {
    background-color: var(--color-primary-600);
}

.home-section-mx {
    /* Mobile: padding lateral seguro para evitar overflow */
    padding: 3rem 5vw;
}

/* Hero section: centrado vertical perfecto */
section.hero-section {
    /* Usar padding-top para compensar navbar sin afectar el centrado */
    padding-top: 4rem; /* Compensar navbar h-16 (64px) + espacio adicional */
    box-sizing: border-box; /* Asegurar que padding esté incluido */
    overflow: hidden; /* Evitar overflow horizontal en iOS */
}

/* El contenedor interno debe tomar la altura completa menos el padding-top */
section.hero-section > .home-section-mx {
    min-height: calc(100vh - 4rem); /* Altura total menos padding-top */
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* Prevenir scroll lateral por subpíxeles */
}

/* Mobile: más padding superior y ajuste de altura */
@media (max-width: 767px) {
    section.hero-section {
        padding-top: 5rem; /* Más espacio en mobile */
    }
    
    section.hero-section > .home-section-mx {
        min-height: calc(100vh - 5rem); /* Altura total menos padding-top en mobile */
    }
}

/* Desktop: padding horizontal más amplio para hero */
@media (min-width: 768px) {
    /* section.hero-section > .home-section-mx {
        padding-left: calc(var(--spacing-xl) + var(--spacing-2xl));
        padding-right: calc(var(--spacing-xl) + var(--spacing-2xl));
    } */
}

/* ============================================
   BASE STYLES
   ============================================ */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base); /* Inter */
    font-size: var(--font-size-body-large); /* b-large */
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* Prevenir scroll horizontal */
    max-width: 100vw; /* Asegurar que no exceda el viewport */
}

/* Asegurar que contenedores principales no generen scroll lateral */
main, .home-section-mx {
    max-width: 100%;
    overflow-x: hidden;
}

/* Medios nunca deben exceder el ancho del contenedor */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   DEFAULT HEADINGS (usando sistema tipográfico)
   ============================================ */
h1 {
    font-family: var(--font-family-heading); /* Poppins */
    font-size: var(--font-size-heading-large); /* h-large */
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-top: 0;
}

h2 {
    font-family: var(--font-family-heading); /* Poppins */
    font-size: var(--font-size-heading-medium); /* h-medium */
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    color: var(--color-text-primary);
    margin-top: 0;
}

h3 {
    font-family: var(--font-family-heading); /* Poppins */
    font-size: var(--font-size-heading-small); /* h-small */
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-top: 0;
}

h4, h5, h6 {
    font-family: var(--font-family-heading); /* Poppins */
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-top: 0;
}

p {
    margin-bottom: var(--spacing-md);
}

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

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

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */
/* Las clases tipográficas ahora usan automáticamente las variables redefinidas en mobile
   gracias al sistema de variables CSS responsivas implementado arriba */

/* Tablet y Desktop (768px+) - body font-size */
@media (min-width: 768px) {
    body {
        font-size: var(--font-size-body-xlarge);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    /* Desktop specific styles */
}

/* ============================================
   FORM ELEMENTS (Complementing Tailwind)
   ============================================ */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
select,
textarea {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-large);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Mobile: Asegurar mínimo 16px para prevenir zoom automático en iOS */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary-500) !important;
    border-width: 1.5px !important;
    box-shadow: 0 0 0 3px rgba(19, 100%, 54%, 0.1);
}

/* Estilos para las opciones del select */
select option {
    color: var(--color-text-primary);
    background-color: white;
}

select option:disabled {
    color: var(--color-text-light);
}

select option:checked {
    color: var(--color-text-primary);
    background-color: white;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-tooltip);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: slideIn var(--transition-base);
    max-width: 400px;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-success {
    background-color: #10b981;
    color: white;
}

.toast-error {
    background-color: #ef4444;
    color: white;
}

/* ============================================
   FILE INPUT STYLES
   ============================================ */
.file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-input-wrapper input[type=file] {
    position: absolute;
    left: -9999px;
}

.file-input-button {
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--color-text-sec--color-text-primaryondary);
}

.file-input-button:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.file-preview {
    margin-top: var(--spacing-md);
    display: none;
}

.file-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    margin-top: var(--spacing-md);
}

/* ============================================
   UTILITY CLASSES (Responsive)
   ============================================ */
/* Hide on mobile (hasta 767px) */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop (desde 768px) */
@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ============================================
   SCROLL BEHAVIOR
   ============================================ */
html {
    scroll-behavior: smooth;
    overflow-x: hidden; /* Prevenir scroll horizontal */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }
}

/* ============================================
   iOS SAFARI DATE INPUT FIX
   ============================================ */
@supports (-webkit-touch-callout: none) {
    /* Detecta iOS Safari */
    /* Asegurar que el input date no sobresalga */
    input[type="date"].date-input-ios {
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden;
    }
    
    /* Forzar que los elementos internos respeten el ancho */
    input[type="date"].date-input-ios::-webkit-datetime-edit {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        display: inline-block;
    }
    
    input[type="date"].date-input-ios::-webkit-datetime-edit-fields-wrapper {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
        display: inline-block;
        color: transparent;
    }
    
    input[type="date"].date-input-ios:not([value])::-webkit-datetime-edit-fields-wrapper {
        color: var(--color-text-light);
    }
    
    input[type="date"].date-input-ios::-webkit-datetime-edit-text {
        color: var(--color-text-light);
        box-sizing: border-box;
    }
    
    input[type="date"].date-input-ios:not([value])::-webkit-datetime-edit-text {
        opacity: 0.6;
    }
    
    input[type="date"].date-input-ios:invalid::-webkit-datetime-edit {
        color: var(--color-text-light);
    }
    
    /* Forzar placeholder cuando está vacío */
    input[type="date"].date-input-ios:not([value])::-webkit-datetime-edit {
        opacity: 0.6;
    }
    
    /* Asegurar que los campos internos no sobresalgan */
    input[type="date"].date-input-ios::-webkit-datetime-edit-year-field,
    input[type="date"].date-input-ios::-webkit-datetime-edit-month-field,
    input[type="date"].date-input-ios::-webkit-datetime-edit-day-field {
        max-width: 100%;
        box-sizing: border-box;
    }
}