/* Media queries */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    /* Header responsive */
    .header-center {
        display: none;
    }
    
    .header-right {
        margin-left: auto;
    }
    
    .mobile-menu-button {
        display: block;
    }

    .main-nav {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--surface);
        padding: 1rem;
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow);
        z-index: 49;
    }

    .main-nav.show {
        display: block;
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }
    
    .nav-link.active::after {
        display: none;
    }
    
    .user-dropdown {
        position: fixed;
        top: 60px;
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    /* Footer responsive */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-contact li {
        justify-content: center;
    }
    
    /* Cards y formularios responsive */
    .form-grid, 
    .form-grid-2 {
        grid-template-columns: 1fr;
    }
    
    .card-header {
        padding: 1rem;
    }
    
    .card-body {
        padding: 1rem;
    }
    
    /* Dashboard responsive */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    /* Tablas responsive */
    .table-container {
        margin: 0 -1rem;
        padding: 0.5rem;
    }
    
    th, td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Modales responsive */
    .modal {
        width: 90%;
        max-height: 80vh;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
    
    /* Botones responsive */
    .btn-block {
        width: 100%;
    }
    
    .filters-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .filters-actions .btn {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .mobile-menu-button {
        display: none;
    }
    
    .main-nav {
        display: flex;
    }
}

/* Media queries adicionales para pantallas más pequeñas */
@media (max-width: 480px) {
    .container {
        padding: 0.75rem;
    }
    
    /* Header más pequeño */
    .header-container {
        padding: 0.5rem 0.75rem;
    }
    
    .brand span {
        font-size: 1.25rem;
    }
    
    .notification-link,
    .user-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .notification-link i,
    .mobile-menu-button i {
        width: 1.125rem;
        height: 1.125rem;
    }
    
    .user-info {
        padding: 1rem;
    }
    
    .user-avatar-large {
        width: 3rem;
        height: 3rem;
        font-size: 1rem;
    }
    
    /* Cards y contenido más compacto */
    .card {
        margin-bottom: 1rem;
    }
    
    .card-header h2,
    .card-header h3 {
        font-size: 1.125rem;
    }
    
    /* Dashboard más compacto */
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    /* Formularios más compactos */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Estado badges más pequeños */
    .estado-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Tablas aún más compactas */
    th, td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }
    
    /* Modales aún más ajustados */
    .modal-header h3 {
        font-size: 1.125rem;
    }
    
    /* Botones más pequeños */
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Media queries para pantallas grandes */
@media (min-width: 1280px) {
    .container {
        max-width: 80rem;
    }
    
    .header-container {
        max-width: 80rem;
    }
    
    /* Más espacio para mejorar legibilidad */
    .card {
        padding: 0;
    }
    
    .table-container {
        padding: 1.5rem;
    }
    
    /* Mejor layout para dashboard */
    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    /* Formularios en pantallas grandes */
    .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Soporte para modo oscuro */
@media (prefers-color-scheme: dark) {
    /* Ajustes para mejorar contraste en modo oscuro */
    .nav-link.active {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .notification-badge {
        background-color: var(--danger);
    }
    
    .user-avatar {
        background-color: var(--primary-dark);
    }
    
    .user-dropdown {
        background-color: var(--surface-dark, #1e1e1e);
        border-color: var(--border-dark, #2d2d2d);
    }
    
    .user-info {
        background-color: var(--background-dark, #121212);
    }
}

/* Soporte para preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}