/* =======================================
   RESPONSIVE GLOBAL - CENUVE.COM
   Solo móviles / pantallas chicas
   ======================================= */

@media (max-width: 768px) {

    /* General */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

    body {
        font-size: 14px;
    }

    /* Contenedores principales - menos agresivo */
    .container,
    .main-content,
    .page-content,
    .content-wrapper,
    .section,
    .wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* Portal container específico */
    .portal-container {
        padding: 10px !important;
        margin: 10px auto !important;
    }

    /* Cabeceras / hero */
    header,
    .hero,
    .top-bar {
        padding: 10px 15px !important;
    }

    h1, h2 {
        font-size: 1.4rem !important;
    }

    h3 {
        font-size: 1.2rem !important;
    }

    /* Formularios - mantener estructura pero ajustar tamaños */
    form {
        width: 100% !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin-bottom: 10px;
        font-size: 16px; /* Mejor para móviles */
    }

    button,
    .btn,
    .btn-primary,
    .btn-primario {
        width: auto !important;
        min-width: 120px;
        padding: 12px 16px !important;
        font-size: 1rem;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    label {
        display: block;
        margin-bottom: 6px;
        font-size: 0.95rem;
    }

    /* Cards - mantener flexibilidad */
    .card,
    .paciente-card,
    .card-mascota,
    .card-historial,
    .card-consulta {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        box-sizing: border-box;
    }

    /* Listas de tarjetas - scroll horizontal en lugar de block */
    .lista-mascotas,
    .lista-pacientes {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .card-mascota {
        flex: 0 0 auto !important;
        width: 280px !important;
        height: auto !important;
        min-height: 80px;
    }

    /* Tablas - scroll horizontal */
    .table-container,
    .tabla-admin,
    .tabla-resultados {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
        width: 100%;
    }

    table th,
    table td {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
    }

    /* Grids → una columna */
    .grid-2,
    .grid-3,
    .grid-4 {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px;
    }

    .columnas-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
    }

    /* Tabs - ajuste responsivo */
    .tabs,
    .tabs-submenu,
    .page-tabs,
    .menu-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .tab,
    .tab-sub,
    .tab-btn,
    .menu-tab {
        flex: 1 1 calc(50% - 8px);
        min-width: 140px;
        text-align: center;
        margin-bottom: 8px;
        font-size: 0.9rem;
        padding: 10px 8px;
    }

    /* Modales */
    .modal-content,
    .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* Iframes */
    iframe,
    .dieta-iframe,
    .doc-iframe {
        width: 100% !important;
        height: 60vh !important;
    }

    /* Imágenes */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .foto-animal {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto 15px auto !important;
        display: block;
    }

    /* Info tutor y grids */
    .info-tutor-row,
    .resumen-fechas {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .resumen-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    /* Dieta específica */
    .dieta-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 15px;
    }

    .btn-descargar {
        width: 100% !important;
        justify-content: center;
    }

    .dieta-content {
        height: 65vh !important;
        min-height: 400px;
    }

    /* Historial - mantener estructura */
    .card-historial {
        padding: 12px 15px !important;
    }

    .grupo-estudios-tutor {
        gap: 10px;
    }

    .bloque-estudio {
        padding: 12px !important;
        margin-bottom: 16px !important;
    }

    .item-resultado {
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
    }

    /* Asegurar que el header sea visible */
    .info-tutor {
        padding: 15px;
        margin-bottom: 15px;
    }
}

/* Ajustes adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
    .portal-container {
        padding: 8px !important;
    }

    .tab-content {
        padding: 15px !important;
    }

    .card-mascota {
        width: 250px !important;
    }

    .tabs-submenu {
        gap: 6px;
    }

    .tab-sub {
        flex: 1 1 100%;
        font-size: 0.85rem;
        padding: 8px 6px;
    }
}

@media (max-width: 768px) {
    /* Ajustes específicos para dieta */
    #tab-dieta {
        padding: 0 !important;
        margin: 0 !important;
    }

    .dieta-container {
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .dieta-content {
        height: 75vh !important; /* Más alto */
        min-height: 500px !important;
    }

    .dieta-iframe {
        height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
    }

    .dieta-header {
        padding: 15px 20px !important;
        flex-direction: row !important; /* Mantener en línea */
        align-items: center !important;
        gap: 15px !important;
    }

    .btn-descargar {
        width: auto !important;
        min-width: 140px;
    }
}

@media (max-width: 768px) {
    /* Header visible completo */
    header,
    .top-bar,
    .hero {
        width: 100% !important;
        min-height: auto !important;
        padding: 12px 15px !important;
        box-sizing: border-box;
        position: relative !important;
        overflow: visible !important;
    }

    /* Info tutor arriba - asegurar que se vea completo */
    .info-tutor,
    .info-tutor-row {
        width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 15px !important;
        box-sizing: border-box;
        white-space: normal !important;
        word-wrap: break-word;
    }

    .info-tutor-row {
        flex-direction: column;
        gap: 8px;
    }

    /* Asegurar que el portal container no corte contenido */
    .portal-container {
        min-height: auto !important;
        overflow: visible !important;
    }

    /* Body sin overflow hidden que pueda cortar */
    body {
        overflow-x: hidden;
        overflow-y: auto !important; /* Permitir scroll vertical */
    }
}

@media (max-width: 480px) {
    .dieta-content {
        height: 70vh !important;
        min-height: 450px !important;
    }

    .dieta-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .btn-descargar {
        width: 100% !important;
        justify-content: center;
    }

    /* Header más compacto pero visible */
    header {
        padding: 10px 12px !important;
    }
}

/* =======================================
   HEADER RESPONSIVE ADICIONAL
   ======================================= */

@media (max-width: 768px) {
    /* Asegurar que el header no se corte */
    .header {
        position: relative !important;
        overflow: visible !important;
    }

    /* Ajustar contenido principal para header móvil */
    body {
        padding-top: 0 !important;
    }

    .container {
        padding-top: 20px !important;
    }

    /* Portal específico ajustado */
    .portal-container {
        margin-top: 10px !important;
    }

    /* Login container ajustado */
    .login-container {
        margin-top: 40px !important;
    }
}

/* Ajustes para cuando sidebar está activo */
@media (max-width: 768px) {
    .sidebar-principal.active {
        top: 0;
        height: 100vh;
    }

    .sidebar-overlay-principal.active {
        top: 0;
        height: 100vh;
    }
}