/* tutor-mobile.css - Estilos específicos para el Portal del Tutor en móviles */

@media (max-width: 1200px) {
    .portal-container {
        max-width: 100%;
        padding: 15px;
    }
}

@media (max-width: 768px) {
    /* Layout General */
    .portal-container {
        padding: 10px;
        margin: 10px auto;
    }

    .tab-content {
        padding: 20px;
    }

    .info-tutor-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .info-tutor-row span {
        word-break: break-all; /* Para emails largos */
    }

    /* Navegación - Scrollable Tabs */
    .tabs-submenu {
        gap: 8px;
        overflow-x: auto;
        padding: 5px 2px;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start; /* Permitir scroll desde el inicio */
        scrollbar-width: none; /* Ocultar scrollbar en Firefox */
    }

    .tabs-submenu::-webkit-scrollbar {
        display: none; /* Ocultar scrollbar en Chrome/Safari */
    }

    .tab-sub {
        padding: 10px 16px;
        font-size: 14px;
        flex-shrink: 0; /* No se encogen */
        flex: none; /* Toman el ancho de su contenido */
        min-width: fit-content;
        text-align: center;
        white-space: nowrap;
    }

    /* Resumen del Paciente */
    .resumen-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 15px;
    }

    .resumen-fechas {
        flex-direction: column;
        gap: 12px;
        white-space: normal !important;
        align-items: flex-start;
        padding: 15px;
    }

    /* Contacto */
    #tab-contacto p {
        word-break: break-word;
        line-height: 1.5;
    }

    /* Tarjetas de Mascotas */
    .lista-mascotas {
        gap: 15px;
    }

    .card-mascota {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 80px;
        padding: 12px;
    }

    .card-mascota h3 {
        font-size: 18px;
    }

    /* Dieta Dinámica */
    .dieta-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
        padding: 15px 20px;
    }

    /* IMPORTANTE: Altura automática para que no se corte la dieta */
    .dieta-content {
        height: auto !important;
        min-height: 400px;
    }

    .dieta-dinamica-wrapper {
        padding: 15px;
    }

    .bloque-dieta-tutor h3 {
        font-size: 1.2rem;
    }

    .summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Tablas de Dieta */
    .table-container-responsive {
        margin: 10px -15px;
        padding: 0 15px;
    }

    .tabla-dieta-armada {
        font-size: 0.85rem;
    }

    .tabla-dieta-armada th, 
    .tabla-dieta-armada td {
        padding: 8px 5px;
    }

    /* Acciones */
    .btn-descargar {
        width: 100%;
        justify-content: center;
    }

    /* Imágenes */
    .img-size-grande, 
    .img-size-mediana, 
    .img-size-pequeña {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Fotos Historial/Galería */
    .foto-animal {
        width: 100%;
        max-width: 300px;
        margin-right: 0;
    }

    /* Modales */
    .modal-content-img {
        max-width: 95%;
    }
}

/* Soporte para móviles muy pequeños */
@media (max-width: 480px) {
    .login-container {
        margin: 30px 15px;
        padding: 30px 20px;
    }

    .card-mascota {
        height: auto;
        min-height: 70px;
        padding: 10px;
        width: 100%;
    }

    .card-mascota h3 {
        font-size: 16px;
    }

    .dieta-content {
        height: auto !important;
    }

    .header-img {
        max-width: 80%;
    }
}