/**
 * ============================================================
 * EVENTMASTER PRO - RESPONSIVE STYLES
 * Estilos responsive para todos los dispositivos
 * ============================================================
 */

/* ============================================================
   BREAKPOINTS
   - xs: 0-575px (móviles pequeños)
   - sm: 576-767px (móviles grandes)
   - md: 768-991px (tablets)
   - lg: 992-1199px (laptops)
   - xl: 1200px+ (desktop)
   ============================================================ */

/* ============================================================
   DESKTOP FIRST - LARGE SCREENS (1200px+)
   ============================================================ */

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .events-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================
   LAPTOP (992px - 1199px)
   ============================================================ */

@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    .events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .event-detail-content {
        grid-template-columns: 1fr 320px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

/* ============================================================
   TABLET (768px - 991px)
   ============================================================ */

@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    /* Navbar */
    .navbar-menu {
        display: none;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        background-color: var(--bg-primary);
        flex-direction: column;
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-lg);
        gap: 0;
    }
    
    .navbar-menu.active {
        display: flex;
    }
    
    .navbar-menu a {
        padding: var(--spacing-md);
        width: 100%;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
    }
    
    .navbar-toggle {
        display: block;
    }
    
    /* Events Grid */
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    /* Event Detail */
    .event-detail-content {
        grid-template-columns: 1fr;
    }
    
    .purchase-sidebar {
        position: static;
    }
    
    /* Hero */
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.125rem;
    }
    
    /* Category Filters */
    .category-filters {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-md);
    }
    
    .category-filter {
        white-space: nowrap;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Countdown */
    .countdown-value {
        font-size: 2rem;
        min-width: 60px;
    }
    
    /* Seat Selection */
    .seat-legend {
        flex-wrap: wrap;
        gap: var(--spacing-md);
    }
    
    /* Forms */
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE LARGE (576px - 767px)
   ============================================================ */

@media (max-width: 767px) {
    .container {
        max-width: 540px;
    }
    
    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1.125rem; }
    
    /* Navbar */
    .navbar {
        padding: var(--spacing-md) 0;
    }
    
    .navbar-brand {
        font-size: 1.25rem;
    }
    
    /* Events Grid */
    .events-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .event-card-image {
        height: 180px;
    }
    
    /* Hero */
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* Search */
    .search-wrapper {
        flex-direction: column;
    }
    
    .search-btn {
        width: 100%;
    }
    
    /* Event Detail Header */
    .event-detail-header {
        height: 250px;
    }
    
    .event-detail-title {
        font-size: 1.75rem;
    }
    
    .event-info-grid {
        grid-template-columns: 1fr;
    }
    
    /* Countdown */
    .countdown-timer {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-sm);
    }
    
    .countdown-value {
        font-size: 1.5rem;
        min-width: 50px;
        padding: var(--spacing-sm);
    }
    
    .countdown-label {
        font-size: 0.65rem;
    }
    
    /* Purchase Card */
    .purchase-price-value {
        font-size: 2.5rem;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .btn-lg {
        padding: 0.875rem 1.75rem;
        font-size: 1rem;
    }
    
    /* Cards */
    .card-img-top {
        height: 180px;
    }
    
    /* Table */
    .table-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .table-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .table-footer {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }
    
    /* Modal */
    .modal {
        max-width: 95%;
        max-height: 95vh;
    }
    
    /* Seat Selection */
    .venue-layout {
        padding: var(--spacing-md);
    }
    
    .seat {
        width: 32px;
        height: 32px;
        font-size: 0.65rem;
    }
    
    .seat-legend {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .selection-summary {
        padding: var(--spacing-md);
    }
    
    .summary-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .summary-actions {
        width: 100%;
        flex-direction: column;
    }
    
    .summary-actions .btn {
        width: 100%;
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-xl) 0;
    }
}

/* ============================================================
   MOBILE SMALL (0 - 575px)
   ============================================================ */

@media (max-width: 575px) {
    .container {
        padding: 0 var(--spacing-sm);
    }
    
    /* Typography */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Hero */
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.9375rem;
    }
    
    /* Event Card */
    .event-card-title {
        font-size: 1.125rem;
    }
    
    .event-price {
        font-size: 1.25rem;
    }
    
    /* Event Detail */
    .event-detail-title {
        font-size: 1.5rem;
    }
    
    /* Countdown */
    .countdown-timer {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .countdown-value {
        font-size: 1.75rem;
    }
    
    /* Purchase Card */
    .purchase-price-value {
        font-size: 2rem;
    }
    
    /* Category Filters */
    .category-filter {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Stat Card */
    .stat-value {
        font-size: 1.75rem;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Forms */
    .form-control {
        padding: 0.625rem 0.875rem;
        font-size: 0.9375rem;
    }
    
    /* Seat Selection */
    .seat {
        width: 28px;
        height: 28px;
        font-size: 0.6rem;
    }
    
    .row-label {
        min-width: 25px;
        font-size: 0.7rem;
    }
    
    .stage {
        font-size: 0.75rem;
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    /* Admin Sidebar */
    .admin-sidebar {
        width: 100%;
    }
    
    .admin-content {
        padding: var(--spacing-md);
    }
    
    /* Map */
    .map-wrapper {
        height: 250px;
    }
}

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

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .show-mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
.show-tablet-only {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 991px) {
    .show-tablet-only {
        display: block !important;
    }
}

/* Show only on desktop */
.show-desktop-only {
    display: none !important;
}

@media (min-width: 992px) {
    .show-desktop-only {
        display: block !important;
    }
}

/* ============================================================
   TOUCH OPTIMIZATIONS
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .form-control,
    .navbar-menu a,
    .menu-item {
        min-height: 44px;
    }
    
    /* Remove hover effects on touch devices */
    .card:hover,
    .event-card:hover {
        transform: none;
    }
    
    /* Larger tap targets for seats */
    .seat {
        min-width: 40px;
        min-height: 40px;
    }
    
    /* Disable hover tooltips */
    .seat-tooltip {
        display: none;
    }
}

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

@media print {
    /* Hide non-essential elements */
    .navbar,
    .footer,
    .sidebar,
    .admin-sidebar,
    .topbar,
    .btn,
    .form-actions,
    .category-filters,
    .search-container,
    .share-buttons {
        display: none !important;
    }
    
    /* Adjust layout */
    .admin-content {
        margin-left: 0 !important;
    }
    
    .container {
        max-width: 100%;
    }
    
    /* Optimize colors for print */
    body {
        background-color: white;
    }
    
    .card,
    .table-container,
    .admin-form {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    /* Page breaks */
    .event-card,
    .stat-card,
    .table-container {
        page-break-inside: avoid;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* ============================================================
   LANDSCAPE ORIENTATION
   ============================================================ */

@media (max-width: 767px) and (orientation: landscape) {
    .hero-section {
        padding: 1.5rem 0;
    }
    
    .event-detail-header {
        height: 200px;
    }
    
    .countdown-timer {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .modal {
        max-height: 85vh;
    }
}

/* ============================================================
   HIGH DPI SCREENS
   ============================================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimize images and icons for retina displays */
    .navbar-brand-icon,
    .stat-icon,
    .event-card-badge {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================================ */

@media (prefers-color-scheme: dark) {
    /* Dark mode variables would go here */
    /* Currently using light mode only */
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .seat.selected {
        animation: none;
    }
    
    .spinner {
        animation: none;
    }
}

/* ============================================================
   ACCESSIBILITY - HIGH CONTRAST MODE
   ============================================================ */

@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .form-control {
        border-width: 2px;
    }
    
    .card,
    .table-container {
        border: 2px solid var(--border-color);
    }
}

/* ============================================================
   CUSTOM RESPONSIVE UTILITIES
   ============================================================ */

/* Flexible grid for different screen sizes */
.grid-responsive {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 576px) {
    .grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .grid-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Responsive spacing */
@media (max-width: 767px) {
    .section-spacing {
        padding: var(--spacing-lg) 0;
    }
}

@media (min-width: 768px) {
    .section-spacing {
        padding: var(--spacing-2xl) 0;
    }
}

/* Container padding adjustments */
@media (max-width: 575px) {
    .container,
    .container-fluid {
        padding: 0 var(--spacing-sm);
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .container,
    .container-fluid {
        padding: 0 var(--spacing-md);
    }
}

@media (min-width: 768px) {
    .container,
    .container-fluid {
        padding: 0 var(--spacing-lg);
    }
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */

@media (max-width: 991px) {
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: var(--z-modal-backdrop);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }
    
    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}