/* ==========================================================================
   CHACHIN CONTROL - SISTEMA RESPONSIVO MULTI-DISPOSITIVO (ULTRA-RESPONSIVE)
   Adaptación fluida para Escritorio, Laptop, Tablet (Vertical/Horizontal),
   Smartphones (iOS/Android) y Pantallas Táctiles.
   ========================================================================== */

/* --- 0. PREVENCIÓN UNIVERSAL DE DESBORDAMIENTOS HORIZONTALES --- */
html {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    min-height: 100vh;
    /* El scroll de la página lo maneja el body, nunca los contenedores internos */
    height: auto !important;
    overflow-y: auto !important;
}

/* Los contenedores de la app fluyen con la página (nunca altura fija) */
#main-app,
#login-screen {
    width: 100% !important;
    max-width: 100vw;
    box-sizing: border-box;
    min-width: 0;
}

/* .main-content respeta el ancho del sidebar: no forzarlo a 100% */
.main-content {
    height: auto !important;
    min-height: 100vh;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

/* Excepción: permitir scroll en sidebar */
.sidebar, .sidebar * {
    overflow-x: visible !important;
}


/* --- 1. PANTALLAS GRANDES Y MONITORES WIDE (min-width: 1400px) --- */
@media (min-width: 1400px) {
    .main-content {
        padding: 0 3rem 2.5rem;
    }
    .main-content > .tab-content {
        max-width: 1600px;
        margin-inline: auto;
    }
}

/* --- 2. LAPTOPS Y DESKTOPS MEDIANOS (max-width: 1366px) --- */
@media (max-width: 1366px) {
    .main-content {
        padding: 0 1.5rem 1.75rem;
    }
    .main-content > .tab-content {
        max-width: 100%;
    }
    h1, .h1 { font-size: 1.95rem; }
    h2, .h2 { font-size: 1.55rem; }
}

/* --- 3. TABLETS EN HORIZONTAL Y VERTICAL (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .main-content {
        padding: 0 1rem 1.25rem;
    }
    .main-content > .tab-content {
        max-width: 100%;
        padding: 0 0.5rem;
    }
    
    /* Kanban y Grids en Tablet: Columnas con espacio respirable */
    .kanban-col {
        min-height: 400px;
        padding: 0.85rem;
    }

    /* Tarjetas del CRM en Tablet */
    .glass-card,
    .deployment-overview,
    .deployment-group {
        padding: 1.25rem !important;
        margin-bottom: 1.25rem !important;
    }

    /* Encabezados y botones con flex: ajuste automático en Tablet */
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* --- 4. TABLETS Y MÓVILES (max-width: 991.98px) --- */
@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 0.85rem 1rem;
    }

    .mobile-topbar {
        display: flex !important;
        position: sticky;
        top: 0;
        z-index: 1040;
        background: var(--glass-bg-strong);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        backdrop-filter: blur(24px) saturate(180%);
        border-bottom: 1px solid var(--glass-border);
        margin-bottom: 0.5rem;
    }

    /* Columnas Kanban (#leads-grid, #deals-grid, agenda): Apilar con diseño limpio */
    #leads-grid > [class*="col-"],
    #deals-grid > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .kanban-col {
        min-height: 0;
        max-height: 65vh;
        overflow-y: auto;
        margin-bottom: 1rem;
        border: 1px solid var(--glass-border);
    }
}

/* --- 5. SMARTPHONES Y MÓVILES TÁCTILES (max-width: 767.98px) --- */
@media (max-width: 767.98px) {
    .main-content {
        padding: 0 0.65rem 0.85rem;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Tipografía responsiva en móvil */
    h1, .h1 { font-size: 1.55rem; }
    h2, .h2 { font-size: 1.35rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1.05rem; }

    /* Pestañas de navegación secundarias escalables en horizontal sin romper layout */
    .nav-tabs, .nav-pills {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Tablas totalmente responsivas */
    .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-sm);
        margin-bottom: 1rem;
    }

    .table {
        width: 100%;
        max-width: 100%;
    }

    .table tr, .table th, .table td {
        white-space: normal;
        word-wrap: break-word;
        padding: 0.65rem 0.55rem !important;
        font-size: 0.85rem;
    }

    /* Prevenir desbordamiento en contenedores flex */
    .d-flex, .row, .col, .col-* {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ajustar ancho máximo en contenedores */
    .container, .container-fluid {
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Adaptación móvil para Deployments, Cuentas y Bases de Datos */
    .deployment-header,
    .deployment-group-header,
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
        width: 100%;
        max-width: 100%;
    }

    .deployment-header .btn-group,
    .deployment-header .btn,
    .card-header .btn {
        width: 100%;
        justify-content: center;
        max-width: 100%;
    }

    .db-url,
    .deployment-url,
    code, pre {
        word-break: break-all;
        white-space: pre-wrap;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Prevenir scroll en tarjetas y modales */
    .glass-card, .card, .modal-content {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ajustar inputs y selects */
    input, select, textarea, .form-control, .form-select {
        max-width: 100%;
        width: 100%;
    }

    /* Prevenir scroll en grupos de botones */
    .btn-group {
        flex-wrap: wrap;
        max-width: 100%;
    }
    .btn-group .btn {
        flex: 1 1 auto;
        min-width: auto;
    }

    /* Optimización de objetivos táctiles en botones y formularios (mínimo 44px de alto) */
    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: 44px;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tarjetas y sus acciones */
    .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.85rem;
    }

    .card-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 44px;
    }
}

/* --- 6. SMARTPHONES COMPACTOS / PANTALLAS PEQUEÑAS (max-width: 480px) --- */
@media (max-width: 480px) {
    .card-actions .btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .modal-dialog {
        margin: 0.4rem auto;
        width: calc(100% - 0.8rem);
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 0.85rem;
    }

    .modal-footer {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }

    .login-card {
        padding: 1.25rem !important;
        margin: 0.75rem !important;
    }

    /* Overlay para sidebar - asegurar z-index correcto */
    .sidebar-overlay {
        z-index: 1049 !important;
    }

    /* Botones de acción en tarjetas */
    .kanban-card .card-actions,
    .glass-card .card-actions {
        flex-direction: column;
        width: 100%;
    }

    .kanban-card .card-actions .btn,
    .glass-card .card-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Ajustar tablas en móviles muy pequeños */
    .table-responsive {
        font-size: 0.75rem;
    }

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

    /* Ocultar columnas menos importantes en tablas muy pequeñas */
    .table .hide-mobile {
        display: none;
    }

    /* Inputs y selects más compactos */
    .form-control, .form-select {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }

    /* Ajustar espaciado en contenedores */
    .container, .container-fluid {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Botones en headers de cards */
    .card-header .btn-group {
        width: 100%;
        flex-direction: column;
    }

    .card-header .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* --- 7. OPTIMIZACIÓN TÁCTIL Y ANTI-SALTO EN SCROLL --- */
@media (hover: none), (pointer: coarse) {
    .glass-card:hover,
    .kanban-card:hover,
    .account-card:hover,
    .service-card:hover,
    .info-card:hover,
    .kpi-card:hover,
    .deployment-card:hover {
        transform: none !important;
    }
    
    .card-actions {
        opacity: 1 !important;
    }

    /* Prevenir zoom accidental en iOS al tocar inputs */
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* --- 8. CORRECCIONES ESPECÍFICAS POR MÓDULO --- */

/* Leads/Kanban en móvil */
@media (max-width: 767.98px) {
    /* Ajustar tarjetas de prospectos */
    .kanban-card {
        margin-bottom: 1rem;
        width: 100%;
    }

    .kanban-card .card-body {
        padding: 1rem;
    }

    /* Botones de acción en tarjetas de kanban */
    .kanban-card-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .kanban-card-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Dropdowns en móvil */
    .dropdown-menu {
        min-width: 100%;
        max-width: 100vw;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    /* Ajustar filtros en móvil */
    .filter-container {
        flex-direction: column;
        width: 100%;
    }

    .filter-container .form-control,
    .filter-container .form-select {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Deployments en móvil */
@media (max-width: 767.98px) {
    .deployment-overview {
        padding: 1rem;
    }

    .deployment-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .deployment-stat {
        width: 100%;
        text-align: center;
    }

    .deployment-url {
        word-break: break-all;
        font-size: 0.85rem;
    }

    .deployment-actions {
        flex-direction: column;
        width: 100%;
    }

    .deployment-actions .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Caja y formularios financieros en móvil */
@media (max-width: 767.98px) {
    .amount-display {
        font-size: 1.5rem;
        text-align: center;
    }

    .balance-card {
        padding: 1rem;
    }

    .transaction-list {
        font-size: 0.9rem;
    }

    .transaction-item {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .transaction-item .transaction-amount {
        text-align: left;
        font-size: 1.1rem;
    }
}

/* Agenda y citas en móvil */
@media (max-width: 767.98px) {
    .agenda-item {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .agenda-time {
        width: 100%;
        text-align: center;
        background: var(--glass-bg);
        padding: 0.5rem;
        border-radius: var(--radius-sm);
    }

    .agenda-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .agenda-actions .btn {
        width: 100%;
    }
}

/* Usuarios y permisos en móvil */
@media (max-width: 767.98px) {
    .user-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .user-info {
        width: 100%;
        text-align: center;
    }

    .user-actions {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    .user-actions .btn {
        width: 100%;
    }
}

/* Servicios en móvil */
@media (max-width: 767.98px) {
    .service-card {
        padding: 1rem;
    }

    .service-price {
        font-size: 1.25rem;
        text-align: center;
    }

    .service-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .service-actions .btn {
        width: 100%;
    }
}

/* Historial en móvil */
@media (max-width: 767.98px) {
    .history-item {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .history-meta {
        font-size: 0.85rem;
        width: 100%;
    }

    .history-description {
        font-size: 0.9rem;
    }
}