/* ===== RESPONSIVE DESIGN ===== */

/* Tablet (768px en adelante) */
@media (min-width: 768px) {
    :root {
        --fs-4xl: 3rem;     /* 48px */
        --fs-3xl: 2.25rem;  /* 36px */
    }
    
    .container {
        padding: 0 var(--spacing-lg);
    }
    
    /* Header */
    .menu-toggle {
        display: none;
    }
    
    /* Hero Section */
    .hero-container {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }
    
    .hero-content {
        text-align: left;
    }
    
    .hero-actions {
        justify-content: flex-start;
    }
    
    /* About Section */
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Skills Section */
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Projects Section */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Contact Section */
    .contact-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        text-align: left;
    }
    
    .footer-brand {
        text-align: left;
    }
    
    .footer-tagline {
        margin-left: 0;
        margin-right: 0;
    }
    
    .footer-links {
        justify-content: flex-start;
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .footer-social {
        justify-content: flex-start;
    }
}

/* Desktop (1024px en adelante) */
@media (min-width: 1024px) {
    :root {
        --fs-4xl: 3.75rem;  /* 60px */
        --fs-3xl: 2.5rem;   /* 40px */
    }
    
    .container {
        padding: 0 var(--spacing-xl);
    }
    
    /* Skills Section */
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Timeline */
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        padding-left: 0;
        width: 50%;
    }
    
    .timeline-item:nth-child(odd) {
        padding-right: 50px;
        margin-left: auto;
        text-align: right;
    }
    
    .timeline-item:nth-child(even) {
        padding-left: 50px;
    }
    
    .timeline-date {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item:nth-child(odd) .timeline-date {
        left: auto;
        right: calc(100% + 20px);
        transform: translateX(0);
    }
    
    .timeline-item:nth-child(even) .timeline-date {
        left: calc(100% + 20px);
        transform: translateX(0);
    }
    
    .timeline-list li::before {
        content: '';
    }
    
    .timeline-item:nth-child(odd) .timeline-list li {
        padding-left: 0;
        padding-right: var(--spacing-md);
    }
    
    .timeline-item:nth-child(odd) .timeline-list li::before {
        right: 0;
        left: auto;
    }
    
    /* Projects Section */
    .projects-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Pantallas grandes (1280px en adelante) */
@media (min-width: 1280px) {
    .projects-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile (hasta 767px) */
@media (max-width: 767px) {
    /* Header Mobile */
    .navbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--bg-color);
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--border-color);
        box-shadow: var(--shadow-lg);
    }
    
    .navbar-menu.active {
        display: block;
    }
    
    .navbar-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    .language-selector {
        justify-content: center;
    }
    
    .theme-toggle {
        width: 100%;
    }
    
    .btn-download {
        justify-content: center;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    /* Ajustes de tamaño de fuente */
    .hero-title {
        font-size: var(--fs-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--fs-lg);
    }
    
    .hero-description {
        font-size: var(--fs-base);
    }
    
    /* Botones más pequeños */
    .btn-primary, .btn-secondary {
        padding: var(--spacing-sm) var(--spacing-lg);
        min-width: 120px;
    }
    
    /* Avatar más pequeño */
    .avatar-container {
        width: 250px;
        height: 250px;
    }
    
    /* Ajustes en secciones */
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .section-title {
        font-size: var(--fs-2xl);
    }
    
    /* Tarjetas más compactas */
    .about-card,
    .skill-category,
    .project-card,
    .contact-form {
        padding: var(--spacing-lg);
    }
    
    /* Timeline ajustado para mobile */
    .timeline-date {
        position: relative;
        display: inline-block;
        margin-bottom: var(--spacing-sm);
    }
    
    /* Botón volver arriba más pequeño */
    .back-to-top {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        width: 40px;
        height: 40px;
        font-size: var(--fs-base);
    }
}

/* Pantallas muy pequeñas (hasta 375px) */
@media (max-width: 375px) {
    :root {
        --fs-4xl: 2rem;     /* 32px */
        --fs-3xl: 1.75rem;  /* 28px */
        --fs-2xl: 1.25rem;  /* 20px */
    }
    
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    .hero-title .name {
        display: block;
        margin-top: var(--spacing-xs);
    }
    
    .hero-actions {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
    }
    
    .avatar-container {
        width: 200px;
        height: 200px;
    }
    
    /* Proyectos en columna única */
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    /* Links de proyecto en columna */
    .project-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    /* Footer más compacto */
    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
}

/* Orientación landscape en móviles */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding-top: 100px;
        padding-bottom: var(--spacing-xl);
    }
    
    .hero-container {
        grid-template-columns: 2fr 1fr;
        gap: var(--spacing-lg);
    }
    
    .avatar-container {
        width: 200px;
        height: 200px;
    }
    
    .hero-title {
        font-size: var(--fs-2xl);
    }
    
    .hero-subtitle {
        font-size: var(--fs-base);
    }
    
    .hero-description {
        font-size: var(--fs-sm);
    }
}

/* Impresión (solo para impresoras, no para PDF) */
@media print and (min-width: 768px) {
    /* Ocultar elementos no necesarios para impresión */
    .no-print {
        display: none !important;
    }
    
    /* Asegurar que el contenido ocupe todo el ancho */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Ajustar espaciado para impresión */
    section {
        padding: 1rem 0 !important;
        break-inside: avoid;
    }
    
    /* Asegurar que los enlaces se vean bien impresos */
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    /* URLs después de los enlaces */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        font-weight: normal;
    }
    
    /* Ajustar fuentes para impresión */
    body {
        font-size: 12pt !important;
        line-height: 1.4 !important;
    }
    
    h1, h2, h3 {
        break-after: avoid;
    }
    
    /* Evitar que las imágenes se dividan */
    img {
        max-width: 100% !important;
        break-inside: avoid;
    }
    
    /* Asegurar que el footer no se imprima en cada página */
    .footer {
        break-before: always;
    }
}