direto. */
.app-layout > *:not(.sidebar):not(#sidebar-mount) {
min-width: 0;
max-width: 100vw;
overflow-x: hidden;
}
.main-content { min-width: 0; max-width: 100vw; overflow-x: hidden; }
.app-layout { grid-template-columns: 1fr; }
/* Sidebar fica fora da tela; .sidebar-open (no body) traz pra dentro */
.sidebar {
position: fixed;
top: 0; bottom: 0; left: 0;
width: 260px;
z-index: 1040;
transform: translateX(-100%);
transition: transform .25s ease-out;
box-shadow: 4px 0 18px rgba(0,0,0,.25);
overflow-y: auto;
}
body.sidebar-open .sidebar { transform: translateX(0); }
/* Backdrop atrás do drawer quando aberto */
body.sidebar-open::after {
content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45);
z-index: 1039;
}
/* Botão hambúrguer flutuante (canto sup esquerdo) */
.sidebar-toggle {
position: fixed; top: .65rem; left: .65rem; z-index: 1041;
width: 40px; height: 40px; border-radius: 8px;
background: var(--zinc-900); color: #fff; border: 1px solid var(--zinc-700);
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* Banner sticky de alerta (apolices-alerta-banner.js): texto não pode ficar embaixo
do hambúrguer. Em vez de margem global, adicionar padding-left. */
body > .alert {
padding-left: 3.6rem !important;
flex-wrap: wrap;
gap: .35rem;
font-size: .75rem !important;
line-height: 1.3;
}
body > .alert .btn { padding: .25rem .55rem !important; font-size: .72rem !important; }
body > .alert .btn-close { position: absolute; right: .5rem; top: .5rem; }
/* !important pra sobrescrever regra de 992px do theme-modern.css */
.topbar { padding: 0.65rem 1rem 0.65rem 3.6rem !important; }
.page-body { padding: 0.85rem !important; }
.page-title { font-size: 1.05rem !important; }
.topbar-title { font-size: .95rem; line-height: 1.2; }
.topbar-subtitle { font-size: .7rem; line-height: 1.2; }
/* Forms densos quebram em 1 coluna no mobile */
.form-dense .row,
.form-dense .row-cols-md-2,
.form-dense .row-cols-md-3,
.form-dense .row-cols-md-4 { row-gap: .5rem !important; }
.form-dense [class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; }
/* Cards e KPIs em 1 coluna */
.kpi-bento, .stat-grid, .stats-row { grid-template-columns: 1fr !important; }
.stat-card { padding: .75rem !important; }
.stat-num { font-size: 1.4rem !important; }
/* Estratégia correta de scroll horizontal:
1. Container (.panel/.card) PRECISA ter `max-width: 100%` E `width: 100%`
— senão ele cresce com a tabela e nunca cria overflow interno
2. Container ganha `overflow-x: auto` — É AQUI que aparece a scrollbar
3. Tabela usa `min-width: max-content` — força largura natural do conteúdo
Resultado: tabela é maior que o panel → panel cria scroll horizontal. */
.panel, .card-body, .card, .table-responsive {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: #94a3b8 #f1f5f9;
}
/* Tabela mantém display normal mas força largura natural maior que o panel */
.panel table.dados,
.card table.dados,
.card-body table.dados,
.panel table.table,
.card table.table,
.card-body table.table {
min-width: max-content !important;
overflow: visible !important; /* override do `overflow: hidden` do .dados base */
width: max-content !important;
border-radius: 0 !important; /* sem border-radius pra evitar clipping do .dados */
}
/* Webkit: scrollbar de 10px visível mesmo sem hover (Chrome/Edge/Safari) */
.panel::-webkit-scrollbar,
.card::-webkit-scrollbar,
.card-body::-webkit-scrollbar,
.main-content > div::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
height: 10px;
width: 10px;
}
.panel::-webkit-scrollbar-track,
.card::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track,
.main-content > div::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 5px;
}
.panel::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb,
.main-content > div::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 5px;
}
.panel::-webkit-scrollbar-thumb:hover,
.card::-webkit-scrollbar-thumb:hover,
.card-body::-webkit-scrollbar-thumb:hover,
.main-content > div::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
background: #64748b;
}
/* Inputs/selects nunca estouram a coluna */
.form-control, .form-select, textarea, input[type="text"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="email"], input[type="tel"] {
max-width: 100%;
}
/* Bootstrap row não estoura por margens negativas */
.row { margin-left: 0; margin-right: 0; }
.row > [class*="col"] { padding-left: .35rem; padding-right: .35rem; }
/* Drawers customizados (padrão do projeto: aside/div com class drawer/painel-lateral)
ATENÇÃO: NÃO setar `right: 0` aqui — quebra a transição (drawer fica sempre visível).
Em mobile, drawer ocupa 100% da viewport e desliza igual; o JS/classe ativa controla
visibilidade. Reset do `right: -Npx` inline pra `-100vw` evita slide gigante. */
.drawer, .painel-lateral, .side-drawer {
width: 100% !important; max-width: 100vw !important;
right: -100vw; /* posição inicial escondida em mobile (override de right:-960px etc) */
}
.drawer.active, .painel-lateral.active, .side-drawer.active { right: 0 !important; }
.offcanvas { width: 100% !important; max-width: 100vw !important; }
/* Padding interno reduzido em mobile pros drawers customizados */
.drawer-header { padding: .75rem .85rem !important; }
.drawer-body { padding: .75rem .85rem !important; }
.drawer-footer { padding: .65rem .85rem !important; flex-wrap: wrap; gap: .35rem !important; }
.drawer-footer .btn { flex: 1 1 auto; min-height: 38px; }
/* Tabs customizadas (.tabs-papel, .tabs-frota, .tab-*): quebra linha + alvo de toque */
.tabs-papel, .tabs-frota, .tabs-recurso, .tabs-aba {
flex-wrap: wrap !important; gap: .35rem !important;
}
.tab-papel, .tab-frota, .tab-recurso, .tab-aba {
padding: .35rem .65rem !important;
font-size: .78rem !important;
flex: 0 1 auto;
}
/* Cards .oc-card / .nf-card / .re-card / .ce-card / .me-card e similares:
padding e margem reduzidos no mobile (mantém shim global do theme-modern.css) */
.oc-card, .nf-card, .re-card, .ce-card, .me-card,
.panel-card, .info-card {
margin-bottom: .55rem !important;
}
.oc-card > *:not(.oc-card-title),
.nf-card > *:not(.nf-card-title),
.re-card > *:not(.re-card-title),
.ce-card > *:not(.ce-card-title),
.me-card > *:not(.me-card-title) {
padding-left: .55rem !important;
padding-right: .55rem !important;
}
.oc-card > *:not(.oc-card-title):first-child,
.nf-card > *:not(.nf-card-title):first-child,
.re-card > *:not(.re-card-title):first-child,
.ce-card > *:not(.ce-card-title):first-child,
.me-card > *:not(.me-card-title):first-child {
padding-top: .55rem !important;
}
.oc-card > *:last-child,
.nf-card > *:last-child,
.re-card > *:last-child,
.ce-card > *:last-child,
.me-card > *:last-child {
padding-bottom: .55rem !important;
}
.oc-card-title, .nf-card-title, .re-card-title, .ce-card-title, .me-card-title,
.panel-card-title {
font-size: .7rem !important;
padding: .35rem .55rem !important;
}
/* Galeria de fotos (frota) — colunas menores */
.foto-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important; }
/* Composição reboque inline: empilha em mobile */
.composicao-reboque-row { flex-wrap: wrap; }
/* Title da topbar (alguns templates usam h2 direto, não .topbar-title) */
.topbar h1, .topbar h2, .topbar h3 {
font-size: .95rem !important;
margin: 0 !important;
line-height: 1.2 !important;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* topbar-actions vira linha cheia em mobile (quebra abaixo do título) */
.topbar-actions {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
gap: .35rem !important;
justify-content: flex-start !important;
}
.topbar-actions .btn,
.topbar-actions a.btn {
padding: .3rem .55rem !important;
font-size: .75rem !important;
flex: 0 0 auto;
}
/* Alerts (info/warning) dentro do page-body — menor altura, fonte reduzida */
.page-body .alert {
padding: .45rem .65rem !important;
font-size: .72rem !important;
line-height: 1.3 !important;
margin-bottom: .65rem !important;
}
.page-body .alert i.bi { font-size: .85rem; }
.page-body .alert code {
font-size: .68rem;
word-break: break-all;
}
/* KPIs e bento em 1 coluna — seletor mais amplo */
.kpi-bento, .stats-row, .stat-grid,
[class*="kpi-grid"], [class*="bento-grid"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: .55rem !important;
}
/* Filtros avançados em coluna única */
.filtros, .filtros-avancados, .ba-painel, .busca-avancada-painel {
grid-template-columns: 1fr !important;
}
/* Botões grupo em mobile: wrap pra não estourar */
.btn-group, .btn-toolbar { flex-wrap: wrap; gap: .25rem; }
.btn { white-space: normal; }
/* Listagens de cards: 1 coluna */
.grid-cards, .card-grid, [class*="grid-3"], [class*="grid-4"] {
grid-template-columns: 1fr !important;
}
/* Topbar: ações encolhem (esconde texto, mantém ícone) */
.topbar .btn { padding: .35rem .55rem; font-size: .78rem; }
.topbar .btn .label-desktop { display: none; }
/* Topbar quebra linha — ações vão pra linha de baixo se necessário */
.topbar {
flex-wrap: wrap !important;
gap: .5rem !important;
padding: .6rem .85rem .6rem 3.4rem !important;
}
.topbar > * { min-width: 0; }
/* Search inline com width fixo (style="width:220px") perde a largura em mobile */
.topbar input[type="search"],
.topbar .form-control { width: 100% !important; min-width: 0 !important; }
.topbar .ms-auto { margin-left: 0 !important; width: 100%; flex-wrap: wrap; }
/* Switches/checkboxes ficam menores */
.topbar .form-switch, .topbar .form-check { font-size: .72rem; }
/* Botões grupo da topbar: quebram linha sem estourar */
.topbar .d-flex.gap-2 { flex-wrap: wrap; gap: .35rem !important; }
/* Modais ocupam quase a tela toda em mobile */
.modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); }
.modal-dialog.modal-lg, .modal-dialog.modal-xl { max-width: calc(100% - 1rem); }
/* Botões cheios em modais (footer) pra alvo maior de toque */
.modal-footer { flex-wrap: wrap; gap: .35rem; }
.modal-footer .btn { flex: 1 1 auto; min-height: 38px; }
/* User footer fica menos chamativo */
.user-footer { padding-bottom: .8rem; }
}
@media (min-width: 769px) {
.sidebar-toggle { display: none; }
}
/* ──────────────────────────────────────────────────────────────
Fix: modal scrollable quando o