/* ==========================================
   RESPONSIVE DESIGN FIXES
   Nueva Clínica - Responsive Corrections
   ========================================== */

/* Mobile First Approach - Base styles for all devices */
:root {
    --mobile-breakpoint: 576px;
    --tablet-breakpoint: 768px;
    --desktop-breakpoint: 992px;
    --large-desktop: 1200px;
}

/* ==========================================
   GLOBAL RESPONSIVE FIXES
   ========================================== */

/* Fix viewport and scaling issues */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Container responsiveness */
.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* ==========================================
   NAVBAR RESPONSIVE FIXES
   ========================================== */

/* Mobile navbar adjustments */
@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
}

/* ==========================================
   HERO SECTION RESPONSIVE
   ========================================== */

/* Hero section fixes */
header#inicio {
    padding: 3rem 1rem;
    min-height: auto;
}

@media (max-width: 768px) {
    header#inicio {
        padding: 2rem 1rem;
    }
    
    header#inicio .display-4 {
        font-size: 1.75rem;
    }
    
    header#inicio .lead {
        font-size: 1rem;
    }
}

/* ==========================================
   CAROUSEL RESPONSIVE FIXES
   ========================================== */

/* Carousel image responsive */
.img-carrusel {
    height: auto;
    max-height: 300px;
}

@media (max-width: 768px) {
    .img-carrusel {
        max-height: 200px;
    }
}

@media (max-width: 576px) {
    .img-carrusel {
        max-height: 150px;
    }
}

/* ==========================================
   CARD LAYOUT RESPONSIVE
   ========================================== */

/* Card responsive grid */
@media (max-width: 768px) {
    .row-cols-md-3 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================
   FORM RESPONSIVE FIXES
   ========================================== */

/* Form responsive */
@media (max-width: 768px) {
    .form-control,
    .form-select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .btn {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
}

/* ==========================================
   TYPOGRAPHY RESPONSIVE
   ========================================== */

/* Responsive typography */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    h6 { font-size: 1rem; }
    
    .display-4 {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.875rem; }
    
    .display-4 {
        font-size: 1.5rem;
    }
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Responsive utilities */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .mb-mobile-3 {
        margin-bottom: 1rem !important;
    }
    
    .px-mobile-2 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ==========================================
   DEBUG HELPERS (Remove in production)
   ========================================== */

/* .debug-responsive {
    border: 1px solid red;
} */

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    .navbar,
    footer,
    .offcanvas,
    .modal {
        display: none !important;
    }
    
    .container {
        max-width: none !important;
    }
}