/* * Layout tipo app mobile no desktop (classe em ). * Ativado por head_mobile.php — não use body max-width sem a classe. */ html.layout-mobile { background: linear-gradient(135deg, #020b05, #0a2e18, #145c2e); background-attachment: fixed; -webkit-text-size-adjust: 100%; } html.layout-mobile body { max-width: 430px; margin-left: auto !important; margin-right: auto !important; min-height: 100vh; overflow-x: hidden; box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.1), 0 12px 48px rgba(0, 0, 0, 0.5); } /* Sidebar desktop (reserva.php) */ html.layout-mobile .menu-topo { display: none !important; } /* Reserva: menu hambúrguer do admin, sem header próprio */ html.layout-mobile body.page-reserva .mobile-app-header { display: none !important; } html.layout-mobile body.page-reserva .nav-admin-wrap, html.layout-mobile body.page-reserva .nav-admin-spacer { display: block !important; } html.layout-mobile .main-content { margin-left: 0 !important; } html.layout-mobile .mobile-app-header { display: flex !important; } html.layout-mobile .mobile-bottom-nav { display: flex !important; } html.layout-mobile .footer-site { display: none !important; } /* Barras fixas dentro da coluna central */ html.layout-mobile .mobile-app-header, html.layout-mobile .mobile-bottom-nav, html.layout-mobile .nav-admin-wrap { left: 50% !important; right: auto !important; transform: translateX(-50%); width: 100%; max-width: 430px; } /* Menu admin: hamburger em todas as telas */ html.layout-mobile .nav-links { display: none !important; } html.layout-mobile .nav-burger { display: flex !important; } /* Containers largos */ html.layout-mobile .tabs-container, html.layout-mobile .admin-container, html.layout-mobile .page-wrap, html.layout-mobile .page-container, html.layout-mobile .main-container, html.layout-mobile .content-wrap { max-width: 100% !important; width: 100%; } html.layout-mobile .wrap { max-width: 100% !important; width: 100%; padding-left: 12px !important; padding-right: 12px !important; } html.layout-mobile .modal-overlay, html.layout-mobile .popup-overlay, html.layout-mobile #popupOverlay { left: 50% !important; right: auto !important; transform: translateX(-50%); width: 100%; max-width: 430px; }