/* Adaptacion movil del panel City2 Admin (22-09).
   En pantallas de hasta 900px: sidebar off-canvas con el boton hamburguesa
   del header, contenido a ancho completo y controles compactos. */

@media (max-width: 900px) {
    /* Sidebar fuera de pantalla; .sidebar-movil-visible la trae */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 268px;
        max-width: 86vw;
        box-shadow: none;
    }
    .sidebar.sidebar-movil-visible {
        transform: translateX(0);
        box-shadow: 0 0 34px rgba(0, 0, 0, 0.45);
    }
    .sidebar.sidebar-movil-visible ~ * { }

    /* El contenido deja de reservar el hueco de la sidebar */
    .content-container.ml-64,
    .content-container.ml-16,
    .content-container {
        margin-left: 0 !important;
    }

    /* Fondo oscuro tras la sidebar abierta */
    body.movil-sidebar-abierta::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.5);
        z-index: 45;
    }

    /* Header compacto: sin saltos feales, deja agrupar */
    .content-container > header,
    .content-header {
        padding-left: 12px;
        padding-right: 66px;
        min-height: 58px;
    }
    .content-container > header h1,
    .content-header h1 {
        font-size: 1rem;
    }

    /* Tarjetas y bloques con menos aire */
    .bg-white.rounded-lg.shadow-sm.p-6,
    .bg-white.rounded-xl.p-6 {
        padding: 14px;
    }

    /* Botones de accion mas compactos */
    button, .btn, a[class*="px-4"], a[class*="px-6"] {
        min-height: 34px;
    }
}

@media (max-width: 560px) {
    /* Formularios a una columna con campos que respiren */
    .grid.grid-cols-1.md\:grid-cols-2,
    .grid.grid-cols-1.md\:grid-cols-3 {
        gap: 10px;
    }
    /* Tablas: ya viven en overflow-x-auto; reduce el aire de celdas */
    table th, table td {
        padding: 6px 8px;
    }
}

/* Hamburguesa flotante (creada por JS; fuera de la sidebar) */
#sidebarToggleMovil { display: none; }

@media (max-width: 900px) {
    #sidebarToggleMovil {
        display: flex !important;
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 46;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        background: #4F46E5;
        box-shadow: 0 8px 20px rgba(49, 46, 129, 0.24);
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
    }
}

/* Selector de idioma dentro de la sidebar (solo movil); en la cabecera se
   ocultan el selector y Salir (logout ya vive en la sidebar) */
.sidebar-movil-idiomas { display: none; }

@media (max-width: 900px) {
    .sidebar-movil-idiomas {
        display: block;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        padding-top: 10px;
        margin: 10px 0;
    }
    .sidebar-movil-idiomas-titulo {
        font-size: 11px;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.6);
        text-transform: uppercase;
        padding: 0 16px 6px;
    }
    .sidebar-movil-idioma { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.25); }
    .sidebar-movil-idioma.bg-white\/25 { background: rgba(255,255,255,0.2) !important; }
    .language-selector, header a[href="logout.php"] { display: none !important; }
}

/* ---- Ficha de empresa (editor) en movil ---- */
@media (max-width: 900px) {
    /* Pestañas en una sola fila deslizable (antes se apilaban en 3-4 filas) */
    .tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-button {
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
        padding: 10px 12px;
        font-size: 13px;
    }
    .tab-button span { font-size: 13px; }
    /* Cabecera del editor compacta y envolvente */
    .content-container header.bg-white {
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .content-container header.bg-white h1 { font-size: 1.05rem; }
    /* Los paneles de los combos no desbordan la pantalla */
    .cbx-panel { max-width: 92vw; }
}

@media (max-width: 560px) {
    .content-container > main { padding: 10px; }
    .business-filter-form { grid-template-columns: 1fr !important; }
}