/* 
 * mobile-first.css - Estilos Mobile First
 * Orden: Mobile → Tablet → Desktop
 */

/* ========== ESTILOS BASE PARA MÓVIL (320px+) ========== */
body {
    font-size: 16px;
    line-height: 1.5;
}

/* Header móvil */
.navbar-brand {
    font-size: 1.1rem;
}

.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
}

/* Hero móvil */
.hero-section {
    margin-top: 0;
}

.carousel-caption h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.carousel-caption p {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

/* Cards móvil */
.card {
    margin-bottom: 1rem;
}

.card-body {
    padding: 1rem;
}

/* Botones móvil */
.btn {
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

/* Formularios móvil */
.form-control {
    padding: 0.75rem;
    font-size: 1rem;
}

/* Timeline móvil */
.timeline {
    padding-left: 30px;
}

.step-number {
    width: 30px;
    height: 30px;
    left: -30px;
    font-size: 0.875rem;
}

/* ========== TABLET (768px+) ========== */
@media (min-width: 768px) {
    body {
        font-size: 17px;
    }
    
    /* Header tablet */
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    /* Hero tablet */
    .carousel-caption h2 {
        font-size: 2rem;
    }
    
    .carousel-caption p {
        font-size: 1.1rem;
    }
    
    /* Grid tablet */
    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    
    /* Cards tablet */
    .card {
        margin-bottom: 1.5rem;
    }
    
    /* Botones tablet */
    .btn {
        margin-bottom: 0;
    }
    
    /* Timeline tablet */
    .timeline {
        padding-left: 40px;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        left: -40px;
        font-size: 1rem;
    }
}

/* ========== DESKTOP (992px+) ========== */
@media (min-width: 992px) {
    body {
        font-size: 18px;
    }
    
    /* Header desktop */
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    /* Hero desktop */
    .carousel-caption h2 {
        font-size: 2.5rem;
    }
    
    .carousel-caption p {
        font-size: 1.25rem;
    }
    
    /* Grid desktop */
    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    
    /* Sidebar sticky */
    .sticky-top {
        position: sticky;
        top: 2rem;
        z-index: 1020;
    }
    
    /* Timeline desktop */
    .timeline {
        padding-left: 50px;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        left: -50px;
        font-size: 1.25rem;
    }
}

/* ========== DESKTOP GRANDE (1200px+) ========== */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .carousel-caption {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* ========== IMPRESIÓN ========== */
@media print {
    .accessibility-bar,
    .navbar-toggler,
    .btn,
    .carousel,
    .hero-section {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}