/**
 * Responsive Overrides - LuuaPlay
 * Media queries personalizadas que complementan Bootstrap 5.3.7
 * Solo para casos específicos que Bootstrap no cubre
 * 
 * Principio: Bootstrap primero, este archivo solo para ajustes específicos LUUA
 */

/* ===== SWEETALERT2 RESPONSIVE ===== */

/* Ajustes para SweetAlert2 en móviles */
@media (max-width: 575.98px) {
    .swal2-popup {
        width: 95% !important;
        margin: 1rem auto !important;
        padding: 1rem !important;
    }
    
    .swal2-title {
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .swal2-html-container {
        font-size: 0.875rem !important;
        margin: 0.75rem 0 !important;
    }
    
    .swal2-styled {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
        min-width: 44px; /* Touch target mínimo */
        min-height: 44px;
    }
    
    .swal2-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .swal2-confirm,
    .swal2-cancel {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* Inputs dentro de SweetAlert2 también deben tener tamaño mínimo */
    .swal2-popup .form-control,
    .swal2-popup input[type="text"],
    .swal2-popup input[type="email"],
    .swal2-popup input[type="password"],
    .swal2-popup input[type="tel"],
    .swal2-popup textarea,
    .swal2-popup select {
        font-size: 16px !important;
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
}

/* Ajustes para tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
    .swal2-popup {
        width: 85% !important;
        max-width: 500px !important;
    }
}

/* ===== NAVBAR/SIDEBAR RESPONSIVE ===== */

/* Optimización de touch targets en móviles */
@media (max-width: 991.98px) {
    /* Navbar items táctiles */
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem !important; /* Min 44px height */
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Dropdown items táctiles */
    .dropdown-item {
        padding: 0.75rem 1.25rem !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Navbar toggler más grande */
    .navbar-toggler {
        padding: 0.5rem 0.75rem;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Avatar en navbar más visible */
    .avatar-sidebar {
        width: 36px;
        height: 36px;
    }
    
    /* Dropdown menu full width en móviles */
    .dropdown-menu {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ===== TABLAS RESPONSIVE ===== */

/* Tablas en móviles - ocultar columnas menos importantes */
@media (max-width: 767.98px) {
    /* Ocultar columnas específicas en tablas administrativas */
    .table-responsive .d-md-table-cell {
        display: none !important;
    }
    
    /* Ajustar padding de celdas en móviles */
    .table-responsive td,
    .table-responsive th {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
    }
    
    /* Badges más pequeños en móviles */
    .table-responsive .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ===== FORMULARIOS RESPONSIVE ===== */

/* Inputs optimizados para móviles */
@media (max-width: 575.98px) {
    /* Inputs con tamaño mínimo para evitar zoom en iOS */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Evita zoom automático en iOS */
        padding: 0.75rem 1rem;
        min-height: 44px; /* Touch target */
    }
    
    /* Asegurar tamaño mínimo en todos los inputs (incluyendo los que tienen style inline) */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px !important;
        min-height: 44px;
    }
    
    /* Labels más visibles */
    .form-label {
        font-size: 0.9375rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    /* Botones full width en móviles pequeños (excepto en grupos de botones) */
    .btn:not(.btn-sm):not(.btn-lg):not(.btn-group .btn) {
        width: 100%;
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
    
    /* Botones en grupos mantienen tamaño normal */
    .btn-group .btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
    
    /* Input groups responsive */
    .input-group {
        flex-direction: column;
    }
    
    .input-group .form-control,
    .input-group .btn {
        width: 100%;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem;
    }
    
    .input-group .btn:last-child {
        margin-bottom: 0;
    }
}

/* ===== MODALES RESPONSIVE ===== */

/* Modales fullscreen en móviles pequeños */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100vh;
    }
    
    .modal-content {
        border-radius: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .modal-header {
        border-radius: 0;
        flex-shrink: 0;
    }
    
    .modal-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: #000; /* Fondo negro para inmersión en móvil */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .modal-footer {
        flex-shrink: 0;
        border-radius: 0;
        background: #121212;
        border-top: 1px solid #333;
    }
    
    /* Botón de cierre más grande */
    .btn-close {
        width: 44px;
        height: 44px;
        padding: 0;
        background-size: 1.5rem;
    }
}

/* Modales ajustados en tablets */
@media (min-width: 576px) and (max-width: 991.98px) {
    .modal-dialog {
        max-width: 90%;
        margin: 1rem auto;
    }
}

/* ===== TARJETAS Y COMPONENTES RESPONSIVE ===== */

/* Tarjetas de categorías en móviles */
@media (max-width: 575.98px) {
    .categoria-image-wrapper,
    .categoria-icon-wrapper {
        height: 140px;
    }
    
    .categoria-content {
        padding: 1rem;
    }
    
    .categoria-title {
        font-size: 0.9375rem;
    }
    
    .categoria-icon {
        font-size: 2rem;
    }
    
    .categoria-icon-bg {
        width: 70px;
        height: 70px;
    }
}

/* Stats cards en móviles */
@media (max-width: 575.98px) {
    .luua-stats-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .luua-stats-number {
        font-size: 1.75rem;
    }
    
    .luua-stats-icon {
        font-size: 1.75rem;
    }
}

/* ===== CARRUSEL RESPONSIVE ===== */

/* Carrusel optimizado para móviles */
@media (max-width: 767.98px) {
    .carousel-control-prev,
    .carousel-control-next {
        width: 44px;
        height: 44px;
        opacity: 0.8;
        min-width: 44px;
        min-height: 44px;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    /* Indicadores más grandes y táctiles */
    .carousel-indicators {
        margin-bottom: 0.5rem;
    }
    
    .carousel-indicators button {
        width: 12px;
        height: 12px;
        min-width: 12px;
        min-height: 12px;
        border-radius: 50%;
        margin: 0 4px;
    }
    
}

/* Videos responsive */
@media (max-width: 767.98px) {
    iframe[src*="youtube"],
    iframe[src*="vimeo"],
    iframe[src*="embed"] {
        width: 100%;
        height: auto;
        min-height: 200px;
        aspect-ratio: 16 / 9;
    }
    
    /* Controles de audio más grandes en móviles */
    audio {
        min-height: 44px;
    }
    
    audio::-webkit-media-controls-play-button,
    audio::-webkit-media-controls-panel {
        min-height: 44px;
    }
}

/* ===== IMMERSIVE CONTENT VIEWER ===== */
/* Estilos para el modal de visualización de recursos */
#visorRecursoModal .modal-content {
    background: #000;
    border: none;
}

#visorRecursoModal .modal-header {
    background: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

#visorRecursoModal .modal-footer {
    background: rgba(0, 0, 0, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

#visorRecursoModal iframe,
#visorRecursoModal video {
    width: 100%;
    height: 100%;
    border: none;
}

/* Asegurar que los iframes de YouTube/Vimeo sean responsive */
@media (max-width: 767.98px) {
    #visorRecursoModal .visor-container-height {
        height: calc(100vh - 120px);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    #visorRecursoModal iframe {
        max-width: 100%;
        max-height: 100%;
    }
}

/* ===== IMÁGENES RESPONSIVE ===== */

/* Asegurar que las imágenes no se rompan */
img {
    max-width: 100%;
    height: auto;
}

/* Logo del navbar debe mantener su tamaño */
.navbar-brand img {
    height: 40px !important;
    width: auto;
}

/* Optimización para imágenes de portadas */
.img-recurso-cover,
.categoria-image,
.libro-cover img {
    object-fit: cover;
}

/* ===== BREADCRUMB RESPONSIVE ===== */

/* Breadcrumb en móviles */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
    }
    
    .breadcrumb-item {
        display: inline-block;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding: 0 0.5rem;
    }
}

/* ===== UTILIDADES RESPONSIVE ADICIONALES ===== */

/* Espaciado responsive para contenedores */
@media (max-width: 575.98px) {
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
    
    .row > * {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Texto responsive */
@media (max-width: 575.98px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9375rem; }
}

/* ===== AVATARES RESPONSIVE ===== */

@media (max-width: 575.98px) {
    .avatar-preview {
        width: 100px;
        height: 100px;
    }
    
    .avatar-large {
        width: 120px;
        height: 120px;
    }
    
    .avatar-circle-large {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* ===== PESTAÑAS RESPONSIVE (TABS) ===== */

@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: 2px solid var(--luua-turquoise-20);
    }
    
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        min-height: 44px;
        font-size: 0.875rem;
        flex: 1;
        text-align: center;
    }
    
    .nav-tabs .nav-link.active {
        border-bottom-width: 3px;
    }
}

/* ===== BADGES Y ALERTS RESPONSIVE ===== */

@media (max-width: 575.98px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    .alert {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .alert-dismissible .btn-close {
        width: 32px;
        height: 32px;
        padding: 0;
    }
}