/* Responsive Design para pantallas medianas (tablets) */
@media (max-width: 768px) {
    /* Contenedor del formulario de inicio de sesión */
    .login-container {
        padding: 20px;
        max-width: 90%;
        margin: 20px auto;
    }

    /* Título del formulario */
    .form-title {
        font-size: 20px;
    }

    /* Grupos de entrada */
    .input-group input {
        padding: 10px 35px;
        font-size: 14px;
    }

    /* Botón de inicio de sesión */
    .btn-login {
        padding: 10px;
        font-size: 14px;
    }

    /* Encabezado */
    .header {
        padding: 10px;
    }

    .header-container {
        width: 95%;
        max-width: none;
    }

    /* Menú lateral */
    .sidebar {
        width: 200px; /* Reducir ancho en tablets */
        top: 50px; /* Ajustar posición para evitar superposición con el encabezado */
    }

    /* Contenido principal */
    .content {
        margin-left: 200px; /* Ajustar margen para el menú lateral */
        padding: 20px;
    }

    /* Tarjetas de estadísticas */
    .stat-card {
        width: calc(50% - 20px);
    }
}

/* Responsive Design para pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    /* Contenedor del formulario de inicio de sesión */
    .login-container {
        padding: 15px;
        max-width: 95%;
        margin: 15px auto;
    }

    /* Logo */
    .logo {
        width: 60px;
    }

    /* Título del formulario */
    .form-title {
        font-size: 18px;
    }

    /* Grupos de entrada */
    .input-group input {
        padding: 8px 30px;
        font-size: 12px;
    }

    /* Botón de inicio de sesión */
    .btn-login {
        padding: 8px;
        font-size: 12px;
    }

    /* Encabezado */
    .header {
        padding: 8px;
    }

    .header-container {
        width: 100%;
        max-width: none;
    }

    /* Menú lateral */
    .sidebar {
        width: 100%; /* Expandir el menú lateral al 100% en móviles */
        top: 50px; /* Ajustar posición para evitar superposición con el encabezado */
    }

    /* Ocultar información del usuario en móviles */
    .user-info {
        display: none;
    }

    /* Contenido principal */
    .content {
        margin-left: 0; /* Eliminar margen izquierdo cuando el menú lateral está oculto */
        padding: 15px;
    }

    /* Tarjetas de estadísticas */
    .stat-card {
        width: 100%; /* Hacer las tarjetas de estadísticas ocupar todo el ancho */
    }

    /* Botones */
    .btn-submit {
        font-size: 12px;
        padding: 8px;
    }

    /* Tabla de reportes */
    .report-table th,
    .report-table td {
        font-size: 12px;
        padding: 6px;
    }

    /* Notificación */
    .notification {
        bottom: 10px;
        right: 10px;
        padding: 10px;
        font-size: 12px;
    }
}