/* ============================================================ WCON System — Mobile Responsive Adicione no APÓS style.css: ============================================================ */ :root { --mob-header-h: 56px; --mob-sidebar-w: 280px; --touch-min: 44px; } * { -webkit-tap-highlight-color: transparent; } /* ── HEADER ── */ @media (max-width: 768px) { #header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; height: var(--mob-header-h) !important; display: flex !important; align-items: center !important; padding: 0 12px !important; gap: 10px !important; } .header-search { display: none !important; } .header-spacer { display: none !important; } .header-brand { flex: 1 !important; font-size: 20px !important; font-weight: 800 !important; } .header-actions { display: flex !important; align-items: center !important; gap: 4px !important; } .header-notif { min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-size: 18px !important; } .header-user-info { display: none !important; } .header-user { min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .header-user-avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; } } /* ── HAMBÚRGUER ── */ @media (max-width: 768px) { #btn-toggle-sb { display: flex !important; align-items: center !important; justify-content: center !important; min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; font-size: 20px !important; border-radius: 8px !important; padding: 8px !important; flex-shrink: 0 !important; order: -1 !important; } } /* ── BODY LAYOUT ── */ @media (max-width: 768px) { #body { flex-direction: row !important; padding-top: 0 !important; } } /* ── SIDEBAR ── */ @media (max-width: 768px) { #sidebar { position: fixed !important; top: 0 !important; left: calc(-1 * var(--mob-sidebar-w)) !important; width: var(--mob-sidebar-w) !important; height: 100dvh !important; z-index: 1060 !important; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; overflow-y: auto !important; overflow-x: hidden !important; box-shadow: none !important; padding-top: 0 !important; } #sidebar.mob-open { left: 0 !important; box-shadow: 4px 0 32px rgba(0,0,0,0.7) !important; } .sb-nav { padding-top: 16px !important; } .sb-footer { padding: 16px !important; } .btn-logout { min-height: var(--touch-min) !important; width: 100% !important; font-size: 14px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } } /* ── OVERLAY ── */ #mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1050; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); cursor: pointer; } #mobile-overlay.active { display: block; } /* ── CONTEÚDO PRINCIPAL ── */ @media (max-width: 768px) { #main-content { margin-left: 0 !important; padding-top: calc(var(--mob-header-h) + 16px) !important; padding-bottom: 24px !important; padding-left: 14px !important; padding-right: 14px !important; width: 100% !important; min-height: 100dvh !important; overflow-x: hidden !important; } .module { width: 100% !important; } } /* ── CARDS E GRIDS ── */ @media (max-width: 768px) { .cards-grid, .stats-grid, .dash-grid, .grid-3, .grid-4, .col-3, [class*="grid-col"], [class*="cards-row"] { display: flex !important; flex-direction: column !important; gap: 12px !important; } .card, .stat-card, .dash-card, .info-card, [class*="-card"] { width: 100% !important; padding: 16px !important; } .card-value, .stat-value, .kpi-value { font-size: 26px !important; } .card-label, .stat-label { font-size: 12px !important; } } /* ── TABELAS ── */ @media (max-width: 768px) { .table-wrap, .table-container, .table-box { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } table { min-width: 580px !important; font-size: 13px !important; } thead th { padding: 10px 12px !important; font-size: 11px !important; white-space: nowrap !important; } tbody td { padding: 10px 12px !important; white-space: nowrap !important; } td button, td .btn { padding: 5px 10px !important; font-size: 12px !important; min-height: 32px !important; } } /* ── FORMULÁRIOS ── */ @media (max-width: 768px) { .form-grid, .form-row, .form-cols, [class*="form-row"] { display: flex !important; flex-direction: column !important; gap: 12px !important; } .form-group, .field-group { width: 100% !important; } .form-label { font-size: 13px !important; margin-bottom: 6px !important; display: block !important; } .form-input, input:not([type="checkbox"]):not([type="radio"]):not(#global-search), select, textarea { width: 100% !important; min-height: var(--touch-min) !important; font-size: 16px !important; padding: 10px 14px !important; border-radius: 8px !important; } .btn-login { width: 100% !important; min-height: var(--touch-min) !important; font-size: 15px !important; margin-top: 4px !important; } .form-actions { display: flex !important; flex-direction: column !important; gap: 10px !important; } .form-actions button, .form-actions .btn { width: 100% !important; min-height: var(--touch-min) !important; font-size: 14px !important; } } /* ── BOTÕES ── */ @media (max-width: 768px) { .btn, button:not(#btn-toggle-sb):not(.btn-logout) { min-height: var(--touch-min) !important; font-size: 14px !important; padding: 10px 16px !important; border-radius: 8px !important; } } /* ── MODAIS ── */ @media (max-width: 768px) { .modal-overlay, .modal-backdrop { align-items: flex-end !important; padding: 0 !important; } .modal, .modal-box, .modal-content { width: 100% !important; max-width: 100% !important; max-height: 90dvh !important; border-radius: 20px 20px 0 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; margin: 0 !important; padding: 20px 16px 24px !important; } .modal::before, .modal-box::before { content: '' !important; display: block !important; width: 40px !important; height: 4px !important; border-radius: 2px !important; margin: 0 auto 16px !important; background: var(--border, #2A2A2A) !important; } .modal-header { font-size: 17px !important; font-weight: 700 !important; margin-bottom: 16px !important; } .modal-close { min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; font-size: 20px !important; } } /* ── TÍTULOS ── */ @media (max-width: 768px) { .page-title, .section-title, .mod-title { font-size: 20px !important; line-height: 1.3 !important; } .page-header, .section-header, .mod-header { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 16px !important; } } /* ── FILTROS ── */ @media (max-width: 768px) { .filters, .filter-bar, .search-row { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 16px !important; } .filter-bar input, .filter-bar select, .filters input, .filters select { font-size: 16px !important; min-height: var(--touch-min) !important; width: 100% !important; } } /* ── TABS ── */ @media (max-width: 768px) { .tabs, .tab-list { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; flex-wrap: nowrap !important; } .tabs::-webkit-scrollbar { display: none !important; } .tab, .tab-item { flex-shrink: 0 !important; min-height: 40px !important; padding: 8px 16px !important; font-size: 13px !important; white-space: nowrap !important; } } /* ── LOGIN ── */ @media (max-width: 768px) { #login, #primeiro-acesso { height: 100dvh !important; overflow-y: auto !important; } .login-split { flex-direction: column !important; height: auto !important; min-height: 100dvh !important; } .login-split-left { height: 200px !important; min-height: unset !important; flex: none !important; padding: 20px !important; } .login-pillars { display: none !important; } .login-split-headline { font-size: 22px !important; line-height: 1.3 !important; } .login-split-foot { display: none !important; } .login-split-right { flex: 1 !important; padding: 28px 20px 40px !important; border-radius: 24px 24px 0 0 !important; margin-top: -20px !important; position: relative !important; z-index: 2 !important; } .login-split-form-logo { font-size: 28px !important; margin-bottom: 4px !important; } .login-split-form-sub { font-size: 14px !important; margin-bottom: 24px !important; } } /* ── PAGINAÇÃO ── */ @media (max-width: 768px) { .pagination { justify-content: center !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 16px !important; } .pagination button, .pagination a, .page-btn { min-width: var(--touch-min) !important; min-height: var(--touch-min) !important; font-size: 14px !important; border-radius: 8px !important; } } /* ── TOASTS ── */ @media (max-width: 768px) { .toast, .snackbar, .alert-toast { bottom: 16px !important; left: 12px !important; right: 12px !important; border-radius: 12px !important; } } /* ── UTILITY ── */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .show-mobile { display: none !important; } } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { #sidebar { transition: none !important; } } /* ── LOGIN MOBILE: só formulário centralizado ── */ @media (max-width: 768px) { .login-split-left { display: none !important; } .login-split { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 100dvh !important; width: 100% !important; background: #0D0D0D !important; padding: 24px 20px !important; } .login-split-right { width: 100% !important; max-width: 360px !important; min-height: unset !important; border-radius: 16px !important; margin: 0 auto !important; padding: 36px 28px !important; display: flex !important; flex-direction: column !important; flex: none !important; } .login-split-form-logo { text-align: center !important; font-size: 28px !important; margin-bottom: 4px !important; } .login-split-form-sub { text-align: center !important; margin-bottom: 28px !important; } }