/* ===================================================================== responsive.css — Ajustes responsivos globais (tablets e celulares) Carregado ao final do em cada template para sobrescrever as regras inline. Não altera layout desktop (>=1025px). ===================================================================== */ /* Evita overflow horizontal acidental em telas pequenas */ @media (max-width: 1024px) { html, body { max-width: 100vw !important; overflow-x: hidden !important; } img, pre { max-width: 100%; height: auto; } .page, .container, .page-layout, .main-col, .op-card, .filter-bar, .card, .tab-panel, .tabs-body { max-width: 100% !important; box-sizing: border-box; } /* Tabelas: o próprio vira bloco com rolagem interna */ .op-card { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.op-table { min-width: 0 !important; } /* Grids de charts fixos viram coluna única */ .row2, .row2.rev { grid-template-columns: 1fr !important; } .row2 > * { min-width: 0 !important; max-width: 100% !important; } /* Canvas de charts responsivos */ canvas { max-width: 100% !important; height: auto !important; } } /* ============ TABLETS (<=1024px) ============ */ @media (max-width: 1024px) { .container, .page, .page-layout { padding-left: 16px !important; padding-right: 16px !important; } .page-layout { grid-template-columns: 1fr !important; } /* Header */ .header { padding: 10px 16px !important; flex-wrap: wrap; gap: 10px; } .header img { height: 36px !important; } .header-titles h1 { font-size: 1.1rem !important; } .header-titles p { font-size: .7rem !important; } .header-divider { display: none; } .header-user { margin-left: auto; } /* Nav principal */ .main-nav { padding: 0 8px !important; } .nav-link { padding: 10px 12px !important; font-size: .75rem !important; } .nav-link-excel-top { margin-left: 0 !important; } /* Tabs */ .tabs-nav { flex-wrap: wrap; overflow-x: auto; } .tab-btn { padding: 9px 12px !important; font-size: .78rem !important; } /* KPIs */ .kpi-row { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; } .kpi { padding: 12px 14px !important; } .kpi-num { font-size: 1.5rem !important; } .rev-kpi { min-width: 100px !important; padding: 8px 10px !important; } .rev-kpi .rv-num { font-size: 1.1rem !important; } /* Tabelas com rolagem horizontal */ .op-table, table.op-table, .table-wrap, .tbl-wrap { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .op-table thead, .op-table tbody, .op-table tr { } .op-table th, .op-table td { white-space: nowrap; } /* Filtros / toolbars */ .filter-bar, .rev-controls, .toolbar { flex-wrap: wrap !important; gap: 8px !important; } .rev-search, .rev-select, .th-filter { font-size: .8rem !important; } /* Cards internos */ .card, .tab-panel, .tabs-body { padding: 14px !important; } } /* ============ CELULARES (<=640px) ============ */ @media (max-width: 640px) { html { font-size: 14px; } .container, .page { padding: 12px 12px 32px !important; } /* Header empilhado */ .header { padding: 10px 12px !important; gap: 8px; } .header img { height: 30px !important; } .header-titles { flex-basis: 100%; order: 2; } .header-titles h1 { font-size: 1rem !important; } .header-titles p { font-size: .65rem !important; } .header-badge, .sync-badge { font-size: .62rem !important; padding: 3px 7px !important; } .header-user { font-size: .72rem !important; } /* Nav vira rolagem horizontal */ .main-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nav-link { padding: 9px 10px !important; font-size: .72rem !important; } .nav-link-excel-top { margin-left: 0 !important; } /* KPIs 2 colunas */ .kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; } .kpi { padding: 10px 12px !important; } .kpi-num, .rv-num { font-size: 1.2rem !important; } .kpi-lbl, .rv-lbl { font-size: .62rem !important; } /* Tabs rolagem horizontal */ .tabs-nav { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .tab-btn { padding: 9px 11px !important; font-size: .74rem !important; white-space: nowrap; } /* Tabelas */ .op-table { font-size: .74rem !important; } .op-table th, .op-table td { padding: 7px 8px !important; } .filter-row th { padding: 4px 6px !important; } /* Formulários e filtros preenchem a largura */ .filter-bar > *, .rev-controls > *, .toolbar > * { flex: 1 1 100%; min-width: 0; } .rev-search, .rev-select { width: 100%; } /* Botões */ .btn, .btn-ap, .btn-cl, .btn-exp, button.btn { padding: 9px 14px !important; font-size: .78rem !important; } /* Login / trocar senha */ .login-box, .card-header, .card-body { padding-left: 18px !important; padding-right: 18px !important; } } /* ============ CELULARES PEQUENOS (<=420px) ============ */ @media (max-width: 420px) { .kpi-row { grid-template-columns: 1fr !important; } .header-titles h1 { font-size: .92rem !important; } .tab-btn { padding: 8px 9px !important; font-size: .7rem !important; } .nav-link { padding: 8px 8px !important; font-size: .68rem !important; } } /* ============ UX touch ============ */ @media (hover: none) and (pointer: coarse) { .nav-link, .tab-btn, .btn, .btn-ap, .btn-cl, .btn-exp, a, button { touch-action: manipulation; } .op-table tr:hover td { background: inherit; } }