/*
Theme Name: Illan Pro Ecosystem
Theme URI: https://illan.pro
Author: Jose Illan & Gemini IA
Description: Ecosistema Web de Alto Rendimiento. Migración a WordPress Headless/Híbrido. Shell unificado.
Version: 1.1.0
Text Domain: illan-pro
*/

/* ==========================================================================
   VARIABLES GLOBALES (GLASSMORPHISM & BRANDING)
   ========================================================================== */
:root {
	
	
	/* Mantenemos variables antiguas para evitar errores por ahora */
    --bg-dark: #0a0a0a;
    --glass-bg: rgba(20, 20, 22, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-hover: rgba(255, 255, 255, 0.12);
    
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --danger: #ef4444;
    
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --radius-lg: 16px;
    --radius-md: 12px;
    --transition: 0.3s ease;
	/* Fin variables antiguas /*
	
	
	/* ==========================================================================
       CONTENEDORES
       ========================================================================== */
    --layout-compact: 600px;
    --layout-standard: 800px;
    --layout-large: 1200px;
    
    /* Espaciado Fluido: 1rem (móvil) -> crece al 3% de la pantalla -> 1.5rem (PC) */
    --layout-margin-space: clamp(1rem, 3vw, 1.5rem); 
    
    --layout-color-background: #111111;
    --layout-glass-background: rgba(20, 20, 22, 0.65);
    --layout-border-glass: rgba(255, 255, 255, 0.08);

    /* ==========================================================================
       BOTONES
       ========================================================================== */
    --button-font: 'Inter', system-ui, sans-serif;
	--button-size: 1rem;
	--button-margin-space:0.5rem;
    --button-radius: 8px; /* Redondeo unificado */
    --button-hover-bg: #050505; /* Negro profundo al pasar el ratón */
    --button-hover-text: #ffffff; /* Aseguramos que el texto destaque en negro */
    --button-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Curva de animación premium */
    --button-press-transform: scale(0.96) translateY(2px); /* Efecto físico de "hundimiento" */
	
    /* ==========================================================================
       COLORES
       ========================================================================== */	
    --color-success: #10b981; /* Verde */
    --color-error: #ef4444;   /* Rojo */
    --color-info: #0ea5e9;    /* Azul claro */
    --color-alert: #f59e0b;   /* Naranja/Amarillo */
    --color-primary: #3b82f6; /* Azul corporativo */
    --color-secondary: #374151; /* Gris oscuro / neutro */

    /* ==========================================================================
       TÍTULOS (TIPOGRAFÍA FLUIDA MATEMÁTICA)
       ========================================================================== */
    --title-font: 'Inter', system-ui, sans-serif;
    --title-color: #f3f4f6;
    
    /* clamp(Mínimo en móvil, Ritmo de crecimiento vw, Máximo en escritorio) */
    --size-h1-title: clamp(1.8rem, 5vw, 2.5rem);
    --size-h2-title: clamp(1.5rem, 4vw, 2rem);
    --size-h3-title: clamp(1.3rem, 3vw, 1.75rem);
    --size-h4-title: clamp(1.15rem, 2.5vw, 1.5rem);
    --size-h5-title: clamp(1.05rem, 2vw, 1.25rem);
    --size-h6-title: clamp(0.95rem, 1.5vw, 1rem);
    
    --size-h7-title: 0.875rem; 
    --size-h8-title: 0.75rem;

    /* ==========================================================================
       RENDERIZADO DE TEXTO
       ========================================================================== */
    --font-general-text: 'Inter', system-ui, sans-serif;
    --size-general-text: 1rem; /* Mantenemos 1rem fijo (16px) para lectura perfecta en cualquier pantalla */
    --color-general-text: #9ca3af;
    --color-link-general-text: #3b82f6;

	/* ==========================================================================
       FORMULARIOS (INPUTS, SELECTS, TEXTAREAS)
       ========================================================================== */
    --form-bg: #0f0f11;               /* Fondo oscuro profundo para el campo */
    --form-bg-focus: #141417;         /* Ligeramente más claro al hacer focus */
    --form-border: rgba(255, 255, 255, 0.12); /* Borde sutil por defecto */
    
    --form-text-color: #ffffff;       /* Texto tecleado por el usuario */
    --form-placeholder-color: #6b7280;/* Gris apagado para la pista */
    
    --form-padding: 0.8rem 1.2rem;    /* Espaciado interior del campo */
    --form-radius: 8px;               /* Podría ser igual a --button-radius */
    
    --form-transition: all 0.3s ease; /* Transición suave para el focus */
	
	/* Etiquetas de Formulario (Labels) */
    --form-label-size: 0.9rem;
    --form-label-weight: 500;
    --form-label-color: var(--title-color);
    --form-label-spacing: 0.5rem;
    
    /* Halo de Enfoque (Focus Ring) */
    --form-focus-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); /* Sincronizado en opacidad con --color-primary */

	/* ==========================================================================
       EJE Z (CAPAS Y PROFUNDIDAD)
       ========================================================================== */
    --z-base: 1;           /* Elementos normales en el flujo */
    --z-elevated: 10;      /* Tarjetas con hover, elementos superpuestos simples */
    --z-dropdown: 100;     /* Menús desplegables (Selects personalizados, menús de usuario) */
    --z-sticky: 200;       /* Cabeceras que se quedan fijas al hacer scroll */
    --z-tooltip: 300;      /* Tooltips (deben flotar sobre casi todo) */
    --z-modal: 400;        /* Ventanas emergentes y superposiciones (Oscurecen la pantalla) */
	
}

/* ==========================================================================
   RESET Y ESTRUCTURA BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

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

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

/* Corrección estricta para el Autocompletado de WebKit (Chrome/Safari/Edge) en Dark Mode */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 50px var(--form-bg) inset !important;
    -webkit-text-fill-color: var(--form-text-color) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* ==========================================================================
   EL LIENZO DEL ECOSISTEMA (CANVAS)
   ========================================================================== */
.ecosystem-main {
    flex: 1;
    /* Degradado CSS: Verde oscuro corporativo (arriba-izq) a Negro profundo (abajo-der) */
    background: linear-gradient(135deg, #132719 0%, #080a08 100%);
    display: flex;
    flex-direction: column;
}

/* Contenedor principal que envuelve todo (antes immersive-wrapper) */
.ecosystem-canvas {
    width: 100%;
    min-height: 100vh;
    padding: 2rem 4rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Permite scroll natural */
    align-items: center;
}

@media (max-width: 992px) {
    .ecosystem-canvas {
        padding: 5.5rem 2rem 2rem 2rem; /* Espacio superior para el botón del sidebar en móvil */
    }
}

/* Comportamiento responsive móvil */
@media (max-width: 768px) {
    /* Respiro vital para paneles inmersivos y widgets en móvil */
    .ecosystem-canvas {
        padding: 5.5rem 1rem 1.5rem 1rem;
    }
}

/* ==========================================================================
   PERSONALIZACIÓN DE SCROLLBAR (WEBKIT)
   ========================================================================== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--layout-color-background); /* El fondo más oscuro del ecosistema */
}
::-webkit-scrollbar-thumb {
    background: var(--layout-border-glass); /* La barra en sí como si fuera cristal */
    border-radius: 10px;
    border: 2px solid var(--layout-color-background); /* Respiro interior */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-secondary);
}