/* Media queries - Pantallas pequeñas <= 480px y preferencias */

/* Pantallas muy pequeñas */
@media (max-width: 480px) {
    .container { padding: 0.75rem; }
    .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;
    }

    .card { margin-bottom: 1rem; }
    .card-header h2, .card-header h3 { font-size: 1.125rem; }
    .hero-title { font-size: 1.5rem; }
    .hero-subtitle { font-size: 1rem; }
    .stat-value { font-size: 1.25rem; }
    .form-group { margin-bottom: 1rem; }

    .estado-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    th, td {
        padding: 0.5rem 0.375rem;
        font-size: 0.75rem;
    }

    .modal-header h3 { font-size: 1.125rem; }

    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* Preferencia: modo oscuro */
@media (prefers-color-scheme: dark) {
    .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); }
}

/* Preferencia: 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;
    }
}