/* ==========================================
   AJUSTES PARA PANTALLAS ANGOSTAS
   Se carga después de la hoja principal de cada página.
   Sin estas reglas la página queda más ancha que el celular,
   el navegador la achica y el asistente IA queda fuera de la vista.
========================================== */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    /* Barra de navegación: los enlaces pasan a una fila desplazable */
    .navbar {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
        gap: 10px;
    }

    .nav-links {
        order: 3;
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 18px;
        padding-bottom: 4px;
    }

    .nav-links a {
        white-space: nowrap;
    }

    /* Inicio */
    .portada {
        flex-direction: column;
        padding: 28px 20px;
    }

    .portada-content {
        width: 100%;
        max-width: 100%;
    }

    .portada-illustration img {
        width: 220px;
    }

    /* Carreras y guardados */
    .filters-row {
        flex-wrap: wrap;
    }

    .filter-group {
        flex: 1 1 140px;
        min-width: 0;
    }

    .career-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .card-right-content {
        width: 100%;
        justify-content: space-between;
    }

    /* Comparador */
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .comparison-table {
        overflow-x: auto;
    }

    .feature-label {
        width: auto;
        min-width: 140px;
    }

    /* Login y registro */
    .login-wrapper {
        flex-direction: column;
    }

    .login-left,
    .login-right {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .login-form-container {
        width: 100%;
        max-width: 400px;
    }

    .login-hero-text p {
        width: auto;
    }
}

@media (max-width: 480px) {
    /* Asistente IA: ocupa el ancho disponible sin salirse de la pantalla */
    #ai-assistant-wrapper {
        right: 16px;
        bottom: 16px;
    }

    .ai-chat-box {
        width: calc(100vw - 32px);
        height: min(420px, 70vh);
    }
}