/* =========================================================
   CONECTCANCUN / ISP PANEL - MOBILE RESPONSIVE PATCH
   No rompe escritorio. Solo actúa en pantallas pequeñas.
========================================================= */

.mobile-menu-toggle{
    display:none;
}

/* Ajuste general */
html{
    -webkit-text-size-adjust:100%;
}

body{
    overflow-x:hidden;
}

img, svg, canvas, video{
    max-width:100%;
}

/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 980px){

    body.panel-page,
    body.services-page,
    body.portal-cliente-page{
        min-width:0 !important;
        overflow-x:hidden !important;
    }

    /* TOPBAR GENERAL */
    .topbar{
        height:auto !important;
        min-height:64px !important;
        padding:10px 14px !important;
        gap:10px !important;
        align-items:center !important;
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        top:0 !important;
        z-index:9999 !important;
    }

    .topbar .logo{
        font-size:17px !important;
        line-height:1.15 !important;
        max-width:calc(100% - 58px) !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .mobile-menu-toggle{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        padding:0 !important;
        margin-left:auto !important;
        border-radius:14px !important;
        border:1px solid rgba(148,163,184,.25) !important;
        background:#ffffff !important;
        color:#111827 !important;
        font-size:24px !important;
        font-weight:900 !important;
        box-shadow:0 8px 18px rgba(15,23,42,.12) !important;
        cursor:pointer !important;
    }

    body.theme-dark .mobile-menu-toggle{
        background:#111c2f !important;
        color:#e5eef9 !important;
        border-color:rgba(148,163,184,.25) !important;
        box-shadow:0 8px 22px rgba(0,0,0,.35) !important;
    }

    .topbar .menu{
        display:none !important;
        position:absolute !important;
        top:calc(100% + 8px) !important;
        left:12px !important;
        right:12px !important;
        max-height:calc(100vh - 88px) !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:8px !important;
        padding:12px !important;
        border-radius:18px !important;
        background:rgba(255,255,255,.98) !important;
        border:1px solid rgba(148,163,184,.28) !important;
        box-shadow:0 18px 48px rgba(15,23,42,.22) !important;
        backdrop-filter:blur(10px) !important;
    }

    body.theme-dark .topbar .menu{
        background:rgba(15,23,42,.98) !important;
        border-color:rgba(148,163,184,.22) !important;
        box-shadow:0 18px 48px rgba(0,0,0,.45) !important;
    }

    body.mobile-menu-open .topbar .menu{
        display:flex !important;
    }

    .topbar .menu a{
        width:100% !important;
        min-height:44px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        padding:11px 13px !important;
        border-radius:13px !important;
        font-size:14px !important;
        line-height:1.2 !important;
        white-space:normal !important;
        color:#111827 !important;
        background:rgba(241,245,249,.75) !important;
    }

    body.theme-dark .topbar .menu a{
        color:#e5eef9 !important;
        background:rgba(17,28,47,.75) !important;
    }

    .topbar .menu a.active{
        color:#ffffff !important;
        background:#2f8ef4 !important;
    }

    .topbar .menu a.active::after{
        display:none !important;
    }

    /* CONTENEDORES */
    .container,
    .panel-container,
    .services-page .services-container,
    .services-container{
        width:100% !important;
        max-width:100% !important;
        padding:88px 12px 24px 12px !important;
        margin:0 auto !important;
    }

    /* HERO */
    .page-hero,
    .services-page .services-hero,
    .services-hero{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:14px !important;
        padding:16px !important;
        padding-right:16px !important;
        margin-bottom:16px !important;
        border-radius:18px !important;
    }

    .page-hero::after,
    .services-page .services-hero::after,
    .services-hero::after{
        display:none !important;
    }

    .page-hero-text h1,
    .services-page .services-hero-text h1{
        font-size:24px !important;
        line-height:1.15 !important;
        margin-bottom:8px !important;
    }

    .page-hero-text p,
    .services-page .services-hero-text p{
        font-size:13px !important;
        line-height:1.45 !important;
    }

    .page-hero-actions,
    .services-page .services-hero-actions,
    .services-hero-actions,
    .quick-links,
    .dashboard-export-links,
    .form-actions,
    .acciones-formulario,
    .modal-acciones,
    .auth-actions{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }

    .page-hero-actions button,
    .page-hero-actions a,
    .services-page .services-hero-actions button,
    .services-page .services-hero-actions a,
    .quick-links a,
    .dashboard-export-links a,
    .form-actions button,
    .acciones-formulario button,
    .modal-acciones button,
    .auth-actions button,
    .auth-actions a{
        width:100% !important;
        min-height:46px !important;
        justify-content:center !important;
    }

    /* CARDS */
    .panel-card,
    .services-page .card,
    .card{
        padding:16px !important;
        border-radius:18px !important;
        margin-bottom:16px !important;
    }

    .panel-card h2,
    .panel-card h3,
    .services-page h2{
        font-size:20px !important;
        line-height:1.2 !important;
    }

    .panel-subtitle,
    .section-subtitle,
    .page-note{
        font-size:13px !important;
        line-height:1.45 !important;
    }

    /* FORMULARIOS */
    .form-grid,
    .services-page .form-grid,
    .payment-summary-grid,
    .portal-cliente-page .mp-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    input,
    select,
    textarea,
    button,
    .panel-link-btn,
    .hero-link{
        font-size:16px !important;
    }

    input,
    select,
    textarea{
        min-height:46px !important;
        width:100% !important;
    }

    textarea{
        min-height:110px !important;
    }

    /* TABLAS */
    .table-shell,
    .services-page .services-table-wrap,
    .services-table-wrap,
    .table-container{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        border-radius:16px !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .data-table,
    .services-page .services-table,
    .services-table{
        min-width:760px !important;
        width:max-content !important;
    }

    .data-table th,
    .data-table td,
    .services-table th,
    .services-table td{
        font-size:12px !important;
        padding:10px 9px !important;
        vertical-align:middle !important;
    }

    .acciones-tabla,
    .services-page .actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:7px !important;
        min-width:120px !important;
    }

    .acciones-tabla button,
    .services-page .actions button{
        width:100% !important;
        min-height:38px !important;
        font-size:12px !important;
        padding:8px 10px !important;
    }

    /* BUSCADOR */
    .panel-search-bar{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }

    .panel-search-input,
    .panel-search-clear{
        width:100% !important;
        min-width:0 !important;
    }

    /* DASHBOARD */
    .dashboard-grid,
    .dashboard-kpi-row,
    .dashboard-visual-grid,
    .dashboard-visual-pills,
    .dashboard-panels,
    .customer-stat-grid,
    .portal-cliente-page .customer-stat-grid,
    .device-stats,
    .ticket-stats,
    .billing-stats,
    .dispositivos-page .device-stats,
    .tickets-page .ticket-stats,
    .facturas-page .billing-stats{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .dashboard-stat,
    .dashboard-mini,
    .customer-stat,
    .device-stat,
    .ticket-stat,
    .billing-stat{
        padding:16px !important;
        min-height:unset !important;
    }

    .dashboard-stat::before,
    .dashboard-stat::after,
    .dashboard-mini::before,
    .dashboard-mini::after{
        display:none !important;
    }

    .metric-bar-row{
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    .metric-bar-value{
        text-align:left !important;
    }

    /* MODALES */
    .modal{
        padding:10px !important;
        align-items:flex-start !important;
        overflow-y:auto !important;
    }

    .modal-contenido,
    .payment-summary-modal,
    .payment-card-modal{
        width:100% !important;
        max-width:100% !important;
        max-height:calc(100vh - 24px) !important;
        overflow-y:auto !important;
        border-radius:18px !important;
        padding:16px !important;
        margin:0 auto !important;
    }

    .payment-card-modal-body{
        max-height:none !important;
        overflow:visible !important;
        padding-right:0 !important;
    }

    /* LOGIN ADMIN / CLIENTE */
    .auth-shell,
    .customer-entry-hero,
    .public-info-layout,
    .public-contact-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:16px !important;
        width:100% !important;
    }

    .auth-hero,
    .auth-card,
    .entry-hero-card,
    .entry-login-card,
    .public-section,
    .public-info-main,
    .public-info-side,
    .public-contact-card{
        width:100% !important;
        max-width:100% !important;
        padding:18px !important;
        border-radius:18px !important;
    }

    .auth-title,
    .entry-hero-title{
        font-size:28px !important;
        line-height:1.1 !important;
    }

    .auth-brand{
        font-size:26px !important;
    }

    .auth-subtitle,
    .entry-hero-text{
        font-size:15px !important;
    }

    .entry-topnav{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;
        padding:12px !important;
    }

    .entry-topnav-links{
        display:flex !important;
        gap:8px !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch !important;
        padding-bottom:4px !important;
    }

    .entry-topnav-links a{
        flex:0 0 auto !important;
        min-height:42px !important;
        white-space:nowrap !important;
    }
}

/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 520px){

    .container,
    .panel-container,
    .services-page .services-container,
    .services-container{
        padding-left:10px !important;
        padding-right:10px !important;
    }

    .page-hero,
    .services-page .services-hero,
    .panel-card,
    .services-page .card,
    .card{
        border-radius:16px !important;
        padding:14px !important;
    }

    .page-hero-text h1,
    .services-page .services-hero-text h1{
        font-size:22px !important;
    }

    .dashboard-stat-value,
    .dashboard-mini-value,
    .customer-stat-value,
    .device-stat-value,
    .ticket-stat-value,
    .billing-stat-value{
        font-size:26px !important;
    }

    .data-table,
    .services-page .services-table,
    .services-table{
        min-width:720px !important;
    }

    .topbar .menu{
        left:8px !important;
        right:8px !important;
    }
}