/* ============================================================================
   PORTFOLIO - MAIN STYLES
   ============================================================================
   Este archivo importa todos los módulos CSS del proyecto.
   No agregar estilos directamente aquí, solo imports.
   ============================================================================ */


/* Base - Variables y configuración global */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/utilities.css';

/* Componentes - Elementos reutilizables */
@import 'components/buttons.css';
@import 'components/navbar.css';
@import 'components/terminal-bar.css';
@import 'components/floating.css';
@import 'components/cards.css';
@import 'components/certifications.css';  /* ← NUEVO MÓDULO */
@import 'components/techstack.css';     /* ← NUEVO MÓDULO */
@import 'components/logo.css';          /* ← NUEVO MÓDULO */

/* Layout - Estructura de páginas */
@import 'layout/hero.css';
@import 'layout/sections.css';
@import 'layout/contact.css';
@import 'layout/footer.css';

/* Animaciones - Todas las @keyframes */
@import 'animations.css';

/* ============================================================================
   RESPONSIVE DESIGN - MEDIA QUERIES GLOBALES
   ============================================================================ */

/* Tablet Landscape (hasta 1024px) */
@media (max-width: 1024px) {
    :root {
        --container-padding: var(--space-lg);
    }
    
    .hero {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .pillars-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cert-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .contact-section {
        grid-template-columns: 1fr;
    }
    
    .aptitudes-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .professional-item {
        grid-template-columns: 1fr 1.5fr 0.5fr;
    }
}

/* Tablet Portrait (hasta 768px) */
@media (max-width: 768px) {
    :root {
        --container-padding: var(--space-md);
    }
    
    .about-section,
    .pillars-grid,
    .blog-grid,
    .cert-grid,
    .labs-grid,
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .hero-stats {
        flex-wrap: wrap;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .stat-card .stat-number {
        font-size: 2.5rem;
    }
    
    .category-header {
        flex-wrap: wrap;
    }
    
    .category-badge {
        margin-left: auto;
    }
    
    .professional-item {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
        text-align: left;
    }
    
    .prof-percent {
        text-align: left;
    }
    
    .aptitudes-section::before {
        display: none;
    }

    .interaction {
        margin-left: 1rem;
    }
}

/* Movil Mediano (hasta 640px) */
@media (max-width: 640px) {

    .interaction {
        margin-left: 1rem;
        font-size: 0.7rem;
    }
}

/* Móvil Grande (hasta 480px) */
@media (max-width: 480px) {

    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
    }
    
    .btn {
        text-align: center;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    
    .aptitudes-category {
        padding: var(--space-lg);
    }
    
    .category-header h3 {
        font-size: 1rem;
    }
    
    .aptitudes-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
    
    .apt-percent {
        align-self: flex-start;
    }

    .interaction {
        margin-left: 1rem;
        font-size: 0.6rem;
    }
}

/* Móvil Pequeño (hasta 390px) - Menú hamburguesa activo */
@media (max-width: 390px) {
    
    .interaction {
        margin-left: 1rem;
        font-size: 0.6rem;
    }

}

/* Móvil Muy Pequeño (hasta 320px) */
@media (max-width: 320px) {
    .hero-content h1 {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
        padding: var(--space-sm) var(--space-md);
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .container {
        padding: 0 var(--space-sm);
    }
    
    .stat-card {
        padding: var(--space-lg);
    }
    
    .stat-card .stat-number {
        font-size: 2rem;
    }
    
    .pillar-card,
    .blog-card,
    .lab-card {
        padding: var(--space-lg);
    }
    
    .footer {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }

    .interaction {
        margin-left: 1rem;
        font-size: 0.5rem;
    }
}

/* ============================================================================
   VARIANTES ADICIONALES
   ============================================================================ */

/* WhatsApp button con número */
.whatsapp-button.with-number {
    width: auto;
    border-radius: 30px;
    padding: 0.5rem 1.2rem 0.5rem 1rem;
    gap: 0.5rem;
    animation: none;
}

.whatsapp-button.with-number span:not(.whatsapp-tooltip) {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 500;
    color: currentColor;
}

.whatsapp-button.with-number:hover {
    transform: translateY(-5px);
}

.whatsapp-button.mini {
    width: 40px;
    height: 40px;
    bottom: 140px;
}

.whatsapp-button.mini i {
    font-size: 1.4rem;
}

/* System status dinámico */
.system-status.dynamic {
    min-width: 140px;
    justify-content: center;
}

.system-status.dynamic .status-text {
    transition: var(--transition-base);
}

.system-status.typing .status-text::after {
    content: '█';
    animation: cursorBlink 1s infinite;
    margin-left: 2px;
    opacity: 0.7;
}

/* Back to top con variantes */
.back-to-top:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.theme-toggle:focus-visible,
.audio-control:focus-visible,
.whatsapp-button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Ajustes de posición para elementos flotantes en móvil */
@media (max-width: 768px) {
    .theme-toggle + .system-status {
        bottom: 140px;
    }
}

@media (max-width: 480px) {
    .theme-toggle + .system-status {
        bottom: 120px;
    }
}

@media (max-width: 390px) {
    .theme-toggle + .system-status {
        bottom: 120px;
    }
}