/* =================================================================
   AgentePixju - Estilos Responsivos Globales
   Optimizado para móvil y tablet
   ================================================================= */

/* =================================================================
   BREAKPOINTS
   ================================================================= */
/* Mobile: < 576px */
/* Tablet: 576px - 991.98px */
/* Desktop: >= 992px */

/* =================================================================
   UTILIDADES RESPONSIVAS GLOBALES
   ================================================================= */

/* Headers responsivos - Todos los títulos deben ser más pequeños en móvil */
@media (max-width: 575.98px) {
    h1, .h1 {
        font-size: 1.5rem !important;
    }
    
    h2, .h2 {
        font-size: 1.25rem !important;
    }
    
    h3, .h3 {
        font-size: 1.1rem !important;
    }
}

/* Contenedores responsivos */
@media (max-width: 991.98px) {
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Cards más compactos en móvil */
    .card-body {
        padding: 1rem !important;
    }
    
    /* Espaciado reducido entre elementos */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mb-5 {
        margin-bottom: 2rem !important;
    }
}

/* =================================================================
   HEADERS Y NAVEGACIÓN RESPONSIVA
   ================================================================= */

@media (max-width: 991.98px) {
    /* Headers de página con botones - Stack vertical */
    .d-flex.justify-content-between.align-items-center,
    .row > div:first-child + div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }
    
    /* Botones en header - Full width en móvil */
    .d-flex.gap-2 {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .d-flex.gap-2 .btn {
        flex: 1 1 auto;
        min-width: calc(50% - 0.5rem);
    }
    
    /* Botones con iconos - Ajustar tamaño en móvil */
    .btn i {
        margin-right: 0.25rem !important;
    }
    
    .btn .me-2 {
        margin-right: 0.25rem !important;
    }
}

/* =================================================================
   CARDS Y MÉTRICAS RESPONSIVAS
   ================================================================= */

@media (max-width: 575.98px) {
    /* Cards de métricas - Stack completo en móvil pequeño */
    .row.g-3 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* Métricas - Más compactas */
    .card-body .d-flex.align-items-center {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    /* Iconos de métricas más pequeños */
    .metric-icon,
    .bg-opacity-10 {
        width: 48px !important;
        height: 48px !important;
        padding: 0.75rem !important;
    }
    
    .metric-icon i,
    .bg-opacity-10 i {
        font-size: 1.5rem !important;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    /* Cards en tablet - 2 columnas */
    .row.g-3 > [class*="col-xl-3"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* =================================================================
   FORMULARIOS RESPONSIVOS
   ================================================================= */

@media (max-width: 991.98px) {
    /* Inputs más grandes en móvil para mejor usabilidad */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Previene zoom en iOS */
        padding: 0.75rem !important;
    }
    
    /* Inputs en filas - Stack vertical */
    .row.g-3 .col-md-6,
    .row.g-3 .col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
    
    /* Botones de acción - Full width en móvil */
    .btn-primary,
    .btn-outline-primary,
    .btn-secondary {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Formularios en modales - Más espaciado */
    .modal-body {
        padding: 1rem !important;
    }
}

/* =================================================================
   TABLAS RESPONSIVAS
   ================================================================= */

@media (max-width: 991.98px) {
    /* Tablas - Sin scroll en móvil para productos */
    .table-responsive-md {
        border: none;
        overflow-x: visible !important;
        -webkit-overflow-scrolling: auto;
        border-radius: 8px;
    }

    /* Para otras tablas que sí necesitan scroll */
    .table-responsive:not(.table-responsive-md) {
        border: none;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 8px;
        min-height: 200px;
    }
    
    /* Tablas generales - Ajustes de tamaño y espaciado */
    .table {
        font-size: 0.9rem;
        margin-bottom: 0;
        width: 100%;
    }

    /* Tabla de productos específica - Sin min-width en móvil */
    @media (max-width: 767.98px) {
        .products-table {
            min-width: 100% !important;
        }
    }

    .table thead th {
        font-size: 0.85rem;
        white-space: nowrap;
        padding: 0.75rem 0.5rem !important;
        font-weight: 600;
        background-color: var(--bg-light, #f8f9fa) !important;
    }

    .table tbody td {
        padding: 0.75rem 0.5rem !important;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* Ajustar padding horizontal en móvil */
    .table th.px-4,
    .table td.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Botones en tablas móviles - Más compactos */
    .table .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        min-width: 36px;
    }

    /* Mejorar espaciado en celdas con contenido complejo */
    .table td > .d-flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Badges y etiquetas en tablas móviles */
    .table .badge {
        font-size: 0.7rem;
        padding: 0.25em 0.5em;
        white-space: nowrap;
    }

    /* Ajustar switches en tablas móviles */
    .table .form-check-switch,
    .table .form-check {
        transform: scale(0.9);
        margin: 0;
    }

    /* Tabla específica de productos */
    .products-table {
        min-width: 700px;
    }

    .products-table th,
    .products-table td {
        min-width: 80px;
    }

    .products-table th:first-child,
    .products-table td:first-child {
        min-width: 50px;
    }

    .products-table th:last-child,
    .products-table td:last-child {
        min-width: 120px;
    }

    @media (min-width: 768px) {
        .products-table {
            min-width: 700px;
        }

        .products-table th,
        .products-table td {
            min-width: 80px;
        }

        .products-table th:first-child,
        .products-table td:first-child {
            min-width: 50px;
        }

        .products-table th:last-child,
        .products-table td:last-child {
            min-width: 120px;
        }
    }

    /* Tabla específica de contactos */
    .contacts-table {
        min-width: 650px;
    }

    .contacts-table th,
    .contacts-table td {
        min-width: 100px;
    }

    .contacts-table th:first-child,
    .contacts-table td:first-child {
        min-width: 200px;
    }

    /* Tabla específica de usuarios */
    .users-table {
        min-width: 700px;
    }

    .users-table th,
    .users-table td {
        min-width: 100px;
    }

    .users-table th:first-child,
    .users-table td:first-child {
        min-width: 180px;
    }

    /* Tabla específica de reservas */
    .reservations-table {
        min-width: 600px;
    }

    .reservations-table th,
    .reservations-table td {
        min-width: 90px;
    }

    .reservations-table th:first-child,
    .reservations-table td:first-child {
        min-width: 100px;
    }

    /* Tabla específica de prompts */
    .prompts-table {
        min-width: 550px;
    }

    .prompts-table th,
    .prompts-table td {
        min-width: 100px;
    }

    .prompts-table th:first-child,
    .prompts-table td:first-child {
        min-width: 200px;
    }

    /* Mejorar visibilidad de iconos en tablas móviles */
    .table i {
        font-size: 1rem;
    }

    /* Ajustar avatares en tablas móviles */
    .table .rounded-circle,
    .table .user-avatar {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.8rem !important;
    }

    /* Texto truncado mejorado en tablas */
    .table .text-truncate {
        max-width: 150px;
        display: inline-block;
    }
}

/* Ajustes adicionales para móviles muy pequeños */
@media (max-width: 575.98px) {
    .table-responsive {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .table {
        font-size: 0.85rem;
        min-width: 550px;
    }

    .table thead th {
        font-size: 0.8rem;
        padding: 0.5rem 0.25rem !important;
    }

    .table tbody td {
        padding: 0.5rem 0.25rem !important;
    }
}

/* =================================================================
   BÚSQUEDAS Y FILTROS RESPONSIVOS
   ================================================================= */

@media (max-width: 991.98px) {
    /* Barra de búsqueda - Full width */
    .input-group,
    .search-bar input {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    /* Filtros - Stack vertical */
    .d-flex.gap-2.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    /* Dropdowns - Full width */
    .form-select,
    .dropdown-toggle {
        width: 100% !important;
    }
}

/* =================================================================
   MODALES RESPONSIVOS
   ================================================================= */

@media (max-width: 991.98px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header,
    .modal-footer {
        padding: 1rem !important;
    }
    
    /* Botones en footer de modal - Stack vertical */
    .modal-footer .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .modal-footer .btn:last-child {
        margin-bottom: 0;
    }
}

/* =================================================================
   GRÁFICOS RESPONSIVOS
   ================================================================= */

@media (max-width: 991.98px) {
    /* Contenedores de gráficos - Full width */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Chart containers */
    .chart-container {
        position: relative;
        height: 300px !important;
        width: 100%;
    }
}

/* =================================================================
   ESPACIADO Y PADDING AJUSTADOS
   ================================================================= */

@media (max-width: 575.98px) {
    .p-4 {
        padding: 1rem !important;
    }
    
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* =================================================================
   BREADCRUMBS RESPONSIVOS
   ================================================================= */

@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.875rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .breadcrumb-item {
        white-space: nowrap;
    }
}

/* =================================================================
   TABS RESPONSIVOS
   ================================================================= */

@media (max-width: 575.98px) {
    .nav-tabs {
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border-color);
    }
    
    .nav-tabs .nav-link {
        flex: 1 1 auto;
        min-width: calc(50% - 0.5rem);
        text-align: center;
        font-size: 0.875rem;
        padding: 0.75rem 0.5rem;
    }
}

/* =================================================================
   UTILIDADES ESPECÍFICAS
   ================================================================= */

/* Ocultar elementos en móvil */
@media (max-width: 991.98px) {
    .d-desktop {
        display: none !important;
    }
}

/* Ocultar elementos en desktop */
@media (min-width: 992px) {
    .d-mobile {
        display: none !important;
    }
}

/* Texto truncado mejorado */
@media (max-width: 575.98px) {
    .text-truncate {
        max-width: 150px;
    }
}