:root {
--bg: #071018;
--bg-soft: #0e1823;
--panel: rgba(9, 16, 24, 0.88);
--panel-solid: #ffffff;
--panel-muted: #f4f7fb;
--text: #13212d;
--text-soft: #66778a;
--white: #ffffff;
--line: #e5ebf2;
--primary: #11adb4;
--primary-strong: #0e9aa0;
--accent: #8fcb3a;
/* Gradiente da marca (verde → ciano). REGRA: textos/botões de destaque usam
este gradiente, nunca ciano sólido. Texto: classe .brand-grad-text. */
--brand-grad: linear-gradient(118deg, #8fcb3a 0%, #8fcb3a 42%, #5cbf7e 64%, #16b1b3 92%, #11adb4 100%);
--brand-grad-strong: linear-gradient(118deg, #7bbf2e 0%, #7bbf2e 50%, #11adb4 100%);
--danger: #e3525b;
--warning: #f0ad39;
--shadow: 0 18px 50px rgba(5, 14, 24, 0.12);
--radius: 18px;
--radius-sm: 12px;
--sidebar-width: 344px;
--sidebar-collapsed-width: 88px;
--sidebar-padding-inline: 18px;
--sidebar-padding-block: 22px;
--nav-item-icon-col: 20px;
--nav-item-icon-col-collapsed: 18px;
--nav-item-action-col: 18px;
--nav-item-col-gap: 12px;
--nav-item-pad-inline: 12px;
--nav-item-pad-block: 11px;
--topbar-height: 92px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; font-family: 'Inter', sans-serif; background: linear-gradient(180deg, #edf2f8 0%, #f7f9fc 100%); color: var(--text); }
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
input, select { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 0 14px; color: var(--text); }
/* iOS dá ZOOM automático ao focar campo com fonte < 16px. Forçar 16px em telas
touch (≤820px) mata o zoom automático em TODO o app — mantendo o pinch-zoom
manual (não usamos maximum-scale, que prejudica acessibilidade). */
@media (max-width: 820px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea { font-size: 16px !important; }
}
label { display: grid; gap: 8px; font-size: 14px; color: var(--text-soft); font-weight: 600; }
.app-shell { --sidebar-current-width: var(--sidebar-width); display: grid; grid-template-columns: var(--sidebar-current-width) minmax(0, 1fr); min-height: 100vh; align-items: stretch; transition: grid-template-columns .28s ease; }
body.sidebar-collapsed .app-shell { --sidebar-current-width: var(--sidebar-collapsed-width); }
.sidebar { width: var(--sidebar-current-width); min-width: var(--sidebar-current-width); max-width: var(--sidebar-current-width); background: radial-gradient(circle at 20% 0%, rgba(17,173,180,.22), transparent 25%), radial-gradient(circle at 100% 20%, rgba(143,203,58,.16), transparent 20%), linear-gradient(180deg, #071018 0%, #0d1721 100%); color: rgba(255,255,255,.92); padding: var(--sidebar-padding-block) var(--sidebar-padding-inline) 20px; display: flex; flex-direction: column; justify-content: flex-start; gap: 12px; position: sticky; top: 0; height: 100dvh; min-height: 100vh; border-right: 1px solid rgba(255,255,255,.07); overflow: visible; transition: width .28s ease, padding .28s ease; }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.sidebar-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Collapsed: flyout precisa escapar lateralmente, então liberamos overflow-x */
body.sidebar-collapsed .sidebar-scroll { overflow-x: visible; }
.sidebar-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.brand-block { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; min-width: 0; }
.brand-copy { min-width: 0; overflow: hidden; transition: opacity .22s ease, transform .22s ease; }
.brand-mark-wrap { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.04); display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); overflow: hidden; flex: 0 0 auto; }
.brand-mark { width: 38px; max-width: 38px; height: auto; }
.brand-title { font-size: 28px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-subtitle { color: rgba(255,255,255,.62); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-toggle { width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: rgba(255,255,255,.92); cursor: pointer; display: grid; place-items: center; transition: .22s ease; flex: 0 0 auto; }
.sidebar-toggle:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.sidebar-toggle-icon { font-size: 15px; transition: transform .24s ease; }
body.sidebar-collapsed .sidebar-toggle-icon { transform: rotate(180deg); }
.sidebar-nav { display: grid; gap: 6px; margin-top: 10px; min-width: 0; }
.nav-group { position: relative; min-width: 0; }
.nav-item { position: relative; display: grid; grid-template-columns: var(--nav-item-icon-col) minmax(0, 1fr) var(--nav-item-action-col); align-items: center; column-gap: var(--nav-item-col-gap); padding: var(--nav-item-pad-block) var(--nav-item-pad-inline); border-radius: 14px; color: rgba(255,255,255,.75); transition: .2s ease; min-height: 44px; width: 100%; }
.nav-item::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 999px; background: transparent; transition: .2s ease; }
.nav-group-toggle { width: 100%; border: none; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { background: linear-gradient(90deg, rgba(17,173,180,.22), rgba(143,203,58,.08)); color: #fff; border: 1px solid rgba(17,173,180,.2); }
.nav-item.active::before, .nav-group.active-group > .nav-item::before { background: linear-gradient(180deg, #2ed6dc, #8fcb3a); box-shadow: 0 0 14px rgba(17,173,180,.45); }
.nav-icon { width: var(--nav-item-icon-col); height: var(--nav-item-icon-col); display: inline-flex; color: rgba(255,255,255,.95); }
.nav-icon svg { width: 100%; height: 100%; fill: currentColor; }
.nav-label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-action-slot { width: var(--nav-item-action-col); display: inline-flex; align-items: center; justify-content: center; }
.nav-group-caret { font-size: 13px; opacity: .9; transition: transform .2s ease; }
.nav-group-toggle[aria-expanded="true"] .nav-group-caret { transform: rotate(0deg); }
.nav-group-toggle[aria-expanded="false"] .nav-group-caret { transform: rotate(-90deg); }
.nav-subitems { display: grid; gap: 4px; margin-top: 4px; padding-left: calc(var(--nav-item-pad-inline) + var(--nav-item-icon-col) + var(--nav-item-col-gap)); padding-right: var(--nav-item-pad-inline); max-height: 0; overflow: hidden; opacity: 0; transition: max-height .24s ease, opacity .2s ease; }
.nav-subitems.open { max-height: 600px; opacity: 1; }
.nav-subitem { display: block; padding: 10px 14px; border-radius: 12px; color: rgba(255,255,255,.66); font-size: 14px; transition: .2s ease; }
.nav-subitem:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-subitem.active { background: rgba(17,173,180,.18); border: 1px solid rgba(17,173,180,.22); color: #fff; }
.nav-subitem-heading { padding: 8px 14px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.35); }
.mbn-drawer-heading { padding: 10px 18px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: rgba(0,0,0,.4); }
.nav-flyout { position: absolute; top: 0; left: calc(100% + 10px); width: 280px; padding: 12px; border-radius: 14px; background: #0f1c28; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 36px rgba(0,0,0,.28); opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; z-index: 25; }
.nav-flyout-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.6); margin: 2px 8px 8px; }
.nav-flyout-items { display: grid; gap: 4px; }
.sidebar-footer { display: grid; gap: 10px; transition: opacity .2s ease; flex-shrink: 0; width: 100%; overflow: hidden; min-width: 0; }
/* ── Botão Portal Central ─────────────────────────────────────────────────── */
.portal-central-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 500; text-decoration: none; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); transition: .2s ease; }
.portal-central-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.22); }
body.sidebar-collapsed .portal-central-btn span, body.sidebar-collapsed .portal-central-btn { justify-content: center; }
body.sidebar-collapsed .portal-central-btn span:last-child { display: none; }
.status-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 14px; overflow: hidden; box-sizing: border-box; width: 100%; }
.status-card.compact { display: flex; align-items: center; gap: 8px; }
/* Info area da status-card vira quando PORTAL_CENTRAL_URL setada — leva ao Portal Central. */
.status-card-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; overflow: hidden; text-decoration: none; color: inherit; transition: opacity .15s ease; }
.status-card-link:hover { opacity: 0.78; }
.status-label { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; }
.status-value { font-size: 14px; font-weight: 600; }
.status-online { color: #88f0b7; }
.logout-link { color: #9fdcff; font-weight: 600; }
body.sidebar-collapsed .brand-copy,
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .nav-group-caret,
body.sidebar-collapsed .nav-subitems { opacity: 0; pointer-events: none; max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
body.sidebar-collapsed .sidebar { padding-left: 12px; padding-right: 12px; }
body.sidebar-collapsed .sidebar-top { flex-direction: column; align-items: center; }
body.sidebar-collapsed .brand-block { justify-content: center; margin-bottom: 8px; }
body.sidebar-collapsed .brand-mark-wrap { width: 50px; height: 50px; border-radius: 14px; }
body.sidebar-collapsed .brand-mark { width: 34px; max-width: 34px; }
body.sidebar-collapsed .nav-item { grid-template-columns: var(--nav-item-icon-col-collapsed); justify-content: center; justify-items: center; column-gap: 0; padding-left: 8px; padding-right: 8px; width: 100%; min-height: 42px; border-radius: 12px; }
body.sidebar-collapsed .nav-item::before { left: 4px; top: 10px; bottom: 10px; }
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-action-slot { display: none; }
body.sidebar-collapsed .nav-icon { width: var(--nav-item-icon-col-collapsed); height: var(--nav-item-icon-col-collapsed); margin: 0 auto; }
body.sidebar-collapsed .nav-group:hover > .nav-flyout,
body.sidebar-collapsed .nav-group.flyout-open > .nav-flyout,
body.sidebar-collapsed .nav-group:focus-within > .nav-flyout { opacity: 1; transform: translateX(0); pointer-events: auto; }
body.sidebar-collapsed .nav-item[data-tooltip]::after,
body.sidebar-collapsed .nav-item[data-tooltip]::before { opacity: 0; pointer-events: none; transition: opacity .16s ease; }
body.sidebar-collapsed .nav-item[data-tooltip]::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: rgba(7,16,24,.96); color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; font-size: 12px; padding: 6px 10px; white-space: nowrap; z-index: 30; }
body.sidebar-collapsed .nav-item[data-tooltip]::before { content: ''; position: absolute; left: calc(100% + 7px); top: 50%; transform: translateY(-50%) rotate(45deg); width: 9px; height: 9px; background: rgba(7,16,24,.96); border-left: 1px solid rgba(255,255,255,.16); border-top: 1px solid rgba(255,255,255,.16); z-index: 29; }
body.sidebar-collapsed .nav-item[data-tooltip]:hover::after,
body.sidebar-collapsed .nav-item[data-tooltip]:hover::before { opacity: 1; }
.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar { min-height: var(--topbar-height); padding: 26px 30px 18px; display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.breadcrumb { font-size: 12px; color: #6b7a8a; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.page-title { margin: 0; font-size: 31px; font-weight: 800; color: #0d1c27; }
.page-subtitle { color: #66778a; margin-top: 6px; }
/* Páginas com hero/card próprio: topbar mostra só o breadcrumb, sem duplicar título */
.topbar-head.is-compact .breadcrumb { margin-bottom: 0; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.search-box input { width: 300px; background: rgba(255,255,255,.92); }
.user-pill { height: 44px; min-width: 86px; padding: 0 16px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: #273746; font-weight: 700; }
/* Card de usuário compacto no topbar — visível só em mobile (sidebar é hidden lá).
Espelha as informações que o sidebar-footer mostra no desktop (full_name, company, Sair). */
.topbar-user-mobile { display: none; }
@media (max-width: 768px) {
.topbar-user-mobile {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding: 10px 14px;
background: rgba(255,255,255,.85);
border: 1px solid var(--line);
border-radius: 12px;
}
/* Info area vira quando PORTAL_CENTRAL_URL setada — clica e vai pro Portal Central */
.topbar-user-mobile-link {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
text-decoration: none;
color: inherit;
transition: opacity .15s ease;
}
.topbar-user-mobile-link:hover { opacity: 0.78; }
.topbar-user-mobile-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #16a34a;
flex-shrink: 0;
}
.topbar-user-mobile-text {
flex: 1;
min-width: 0;
line-height: 1.2;
}
.topbar-user-mobile-name {
font-size: 0.88rem;
font-weight: 700;
color: #0d1c27;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-user-mobile-company {
font-size: 0.72rem;
color: #6b7a8a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.topbar-user-mobile-logout {
flex-shrink: 0;
font-size: 0.82rem;
font-weight: 600;
color: #dc2626;
text-decoration: none;
padding: 6px 10px;
border-radius: 8px;
border: 1px solid rgba(220,38,38,.2);
}
.topbar-user-mobile-logout:hover { background: rgba(220,38,38,.06); }
}
.content-area { padding: 0 30px 30px; min-width: 0; }
/* Modo modal (chromeless): sem sidebar/topbar, conteúdo ocupa tudo dentro do iframe */
.app-shell.is-modal { display: block; min-height: 0; }
.content-area--modal { padding: 18px; }
/* Página carregada dentro de iframe (modal do Quadro): esconde o shell mesmo
após redirects que perdem o ?modal=1. */
html.embedded .sidebar, html.embedded .topbar, html.embedded .brand-splash { display: none !important; }
html.embedded .app-shell { display: block !important; min-height: 0; }
html.embedded .content-area { padding: 16px !important; }
html.embedded .back-to-board { display: none !important; } /* o ✕ do modal fecha */
/* ── Modal do Quadro de Compras (iframe overlay) ───────────────────────────── */
.compras-modal { position: fixed; inset: 0; z-index: 1200; display: none; }
.compras-modal.open { display: block; }
.compras-modal__backdrop { position: absolute; inset: 0; background: rgba(10,16,20,.55); }
.compras-modal__panel {
position: absolute; inset: 24px; margin: auto; max-width: 1100px; background: #fff;
border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.35);
display: flex; flex-direction: column;
}
.compras-modal__close {
position: absolute; top: 12px; right: 14px; z-index: 2; width: 36px; height: 36px;
border-radius: 50%; border: 1px solid #e2e8f0; background: #fff; font-size: 1.1rem;
cursor: pointer; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.compras-modal__frame { flex: 1; width: 100%; border: 0; background: #f7f9fb; }
@media (max-width: 760px) { .compras-modal__panel { inset: 0; border-radius: 0; max-width: none; } }
/* ── Filtro de status por coluna do Quadro ─────────────────────────────────── */
.kanban-col__filterwrap { position: relative; display: inline-flex; }
.kanban-col__filter {
border: 1px solid transparent; background: none; cursor: pointer; font-size: .8rem;
color: #94a3b8; padding: 2px 5px; border-radius: 6px; line-height: 1;
}
.kanban-col__filter:hover { background: rgba(148,163,184,.15); color: #475569; }
.kanban-col__filter.is-active { color: #0f7a82; background: #e6f7f8; border-color: #b7e6e8; }
.kanban-col__filter-menu {
position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 180px;
background: #fff; border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.14); padding: 5px; max-height: 320px; overflow: auto;
}
.kanban-col__filter-opt {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 7px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer;
font-size: .84rem; color: #334155;
}
.kanban-col__filter-opt:hover { background: #f1f5f9; }
.kanban-col__filter-opt.active { background: #e6f7f8; color: #0f7a82; font-weight: 700; }
.kanban-col__filter-opt .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.card, .hero-card { background: rgba(255,255,255,.9); border: 1px solid rgba(221,228,238,.95); border-radius: var(--radius); box-shadow: var(--shadow); }
.card { padding: 22px; }
.hero-card { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, #0b1520 0%, #101f2c 55%, #0b1b21 100%); color: #fff; border-color: rgba(17,173,180,.14); }
.hero-card h2 { margin: 0 0 8px; font-size: 28px; }
.hero-card p { margin: 0; color: rgba(255,255,255,.72); max-width: 760px; }
/* Botão(ões) do hero nunca encolhem abaixo do próprio texto — senão o label
vaza pra fora do botão (problema crônico em vários heros). */
.hero-card .btn { flex: 0 0 auto; white-space: nowrap; }
.transport-hero, .settings-hero { position: relative; overflow: hidden; }
.transport-hero::after, .settings-hero::after { content: ''; position: absolute; inset: auto -120px -140px auto; width: 320px; height: 320px; background: radial-gradient(circle, rgba(17,173,180,.22), transparent 60%); pointer-events: none; }
.grid { display: grid; gap: 18px; }
.grid-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi-card { position: relative; overflow: hidden; }
.kpi-card::before { content: ''; position: absolute; inset: 0 auto auto 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: .85; }
.kpi-title { color: #627385; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.kpi-value { font-size: 31px; font-weight: 800; color: #0d1c27; }
.kpi-delta { margin-top: 8px; color: #18a163; font-weight: 600; font-size: 14px; }
.two-col { display: grid; gap: 18px; grid-template-columns: 1.25fr .95fr; margin-top: 18px; }
.three-col { display: grid; gap: 18px; grid-template-columns: 1fr 1fr .9fr; }
.wide-split { grid-template-columns: 1.1fr .9fr; }
.tight-right { grid-template-columns: 1.2fr .95fr; }
.stack, .module-stack { display: grid; gap: 18px; min-width: 0; }
/* Grid items default to min-content sizing, então quando uma
tem conteúdo intrínsecamente largo (ex: tabela "Relatório de vendas do dia" no PDV),
o track da grid infla até o min-content do filho — o que faz o .stack inteiro crescer
além do flex:1 do pai (.sales-layout > .stack), empurrando .summary-panel pra fora
do viewport. min-width:0 nos filhos quebra esse comportamento. */
.stack > *, .module-stack > * { min-width: 0; }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.section-head h3 { margin: 0; font-size: 22px; }
.section-head p { margin: 6px 0 0; color: #6a7a8d; }
.section-head.split { align-items: center; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.quick-action { min-height: 108px; border-radius: 16px; background: linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%); border: 1px solid #dfe8f1; display: flex; align-items: end; padding: 18px; font-weight: 700; color: #173144; transition: transform .2s ease, box-shadow .2s ease; }
.quick-action:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(13, 28, 39, .08); }
.alert-list { display: grid; gap: 12px; }
.alert-row { padding: 14px 16px; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.alert-row.warning { background: #fff7e9; color: #915f0b; }
.alert-row.danger { background: #ffedf0; color: #b12f48; }
.alert-row.info { background: #edf8fb; color: #0d7180; }
.alert-row.success { background: #ecfbf3; color: #0b8653; }
.timeline { display: grid; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 18px 1fr; gap: 14px; align-items: start; }
.timeline-dot { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), var(--accent)); margin-top: 8px; box-shadow: 0 0 16px rgba(17,173,180,.4); }
.timeline-title { font-weight: 700; color: #11212e; }
.timeline-time { color: #708091; margin-top: 4px; }
.fake-chart { min-height: 290px; display: grid; align-content: end; gap: 20px; }
.chart-line { height: 140px; border-radius: 18px; background: linear-gradient(180deg, rgba(143,203,58,.18), rgba(17,173,180,.08)); position: relative; overflow: hidden; }
.chart-line::after { content: ''; position: absolute; inset: 24px 20px auto 20px; height: 80px; border-radius: 100px; border: 2px solid rgba(17,173,180,.65); border-color: rgba(17,173,180,.65) transparent transparent transparent; transform: skewX(-16deg); }
.chart-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; }
.chart-bars span { background: linear-gradient(180deg, rgba(143,203,58,.72), rgba(17,173,180,.72)); border-radius: 12px 12px 4px 4px; height: 52px; }
.chart-bars span:nth-child(2) { height: 86px; }
.chart-bars span:nth-child(3) { height: 68px; }
.chart-bars span:nth-child(4) { height: 115px; }
.chart-bars span:nth-child(5) { height: 78px; }
.chart-bars span:nth-child(6) { height: 124px; }
.module-grid { display: grid; gap: 18px; }
.module-grid > * { min-width: 0; }
.sales-layout, .consolidation-layout { grid-template-columns: 1.55fr .78fr; }
.sales-layout { display: flex; align-items: flex-start; gap: 18px; }
.sales-layout > .stack { flex: 1; min-width: 0; }
.sales-layout > .summary-panel { width: 320px; flex-shrink: 0; position: sticky; top: 18px; }
.consolidation-layout { display: grid; }
.summary-panel { align-self: start; }
.sticky-panel { position: sticky; top: 18px; }
.summary-list { display: grid; gap: 12px; }
.summary-list > div { display: flex; justify-content: space-between; gap: 14px; color: #617285; }
.summary-list strong { color: #0e1f2c; }
.summary-total { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 18px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.one { grid-template-columns: 1fr; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.form-grid .full { grid-column: 1 / -1; }
.transport-sections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.customer-search { position: relative; }
.customer-search-input { padding-right: 94px; background: #fff; border: 1px solid var(--line); transition: border-color .18s ease, box-shadow .18s ease; }
.customer-search-input:focus { border-color: rgba(143,203,58,.52); box-shadow: 0 0 0 3px rgba(143,203,58,.14); outline: none; }
.customer-search-lupa { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #7990a6; font-size: 17px; cursor: pointer; padding: 4px 5px; line-height: 1; border-radius: 6px; transition: color .15s; }
.customer-search-lupa:hover { color: #3b7ec4; }
.customer-search-clear { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #aab8c6; font-size: 15px; cursor: pointer; padding: 4px 5px; line-height: 1; border-radius: 6px; transition: color .15s; display: none; }
.customer-search-clear:hover { color: #ef4444; }
.customer-search.has-value .customer-search-clear { display: block; }
/* Botão refresh (↺) — discreto, sempre visível exceto quando travado */
.customer-search-refresh { position: absolute; right: 62px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #aab8c6; font-size: 13px; cursor: pointer; padding: 4px 5px; line-height: 1; border-radius: 6px; transition: color .15s; display: flex; align-items: center; justify-content: center; }
.customer-search-refresh:hover { color: #22c08b; }
.customer-search-refresh svg { width: 13px; height: 13px; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.customer-search-refresh.spinning svg { animation: cs-spin .7s linear infinite; }
/* Campo travado: ocultar todos os botões de ação */
.customer-search.is-locked .customer-search-lupa,
.customer-search.is-locked .customer-search-clear,
.customer-search.is-locked .customer-search-refresh { display: none !important; }
/* position: fixed + z-index altíssimo + posicionamento via JS — escapa de
QUALQUER overflow:hidden e stacking context de ancestral. Vale pra todos
os dropdowns do widget (cliente, produto, conta corrente, motorista, etc). */
.customer-search-dropdown { position: fixed; top: 0; left: 0; width: auto; border-radius: 14px; border: 1px solid #dce6f2; background: rgba(255,255,255,.98); box-shadow: 0 18px 34px rgba(11, 28, 43, .16); padding: 8px; z-index: 10000; display: none; }
.customer-search.open .customer-search-dropdown { display: block; }
.customer-search-status { padding: 10px 12px; font-size: 13px; color: #6a7f93; }
.customer-search-results { display: grid; gap: 6px; max-height: 320px; overflow: auto; padding: 2px; }
.customer-search-item { border: 1px solid transparent; border-radius: 12px; background: #fff; padding: 10px 11px; text-align: left; cursor: pointer; display: grid; gap: 4px; transition: border-color .15s ease, background .15s ease; }
.customer-search-item:hover,
.customer-search-item.active { border-color: #cde3f9; background: linear-gradient(90deg, rgba(17,173,180,.1), rgba(143,203,58,.07)); }
.customer-search-item strong { font-size: 14px; color: #102434; }
.customer-search-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #678095; }
.customer-search-meta span { white-space: nowrap; }
.customer-search-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; background: #edf4fb; color: #3b5d7c; }
.search-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(6,18,32,.52); z-index: 9999; align-items: flex-start; justify-content: center; padding: 60px 16px 0; }
.search-modal-overlay.open { display: flex; }
.search-modal-box { background: #fff; border-radius: 18px; padding: 18px; width: min(640px, 100%); max-height: 80vh; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 28px 56px rgba(0,0,0,.22); }
.search-modal-header { display: flex; align-items: center; gap: 10px; }
.search-modal-title { font-size: 13px; color: #678095; flex: 1; font-style: italic; }
.search-modal-close { border: none; background: none; font-size: 22px; cursor: pointer; color: #7990a6; padding: 2px 8px; line-height: 1; border-radius: 8px; }
.search-modal-close:hover { background: #f0f4f8; color: #1e293b; }
.search-modal-results { display: grid; gap: 6px; max-height: 55vh; overflow: auto; padding: 2px; }
/* min-width: 0 é crítico em flex/grid layouts: sem isso, o table-wrap herda
o min-content da tabela (que pode ser 560px+ via "table { min-width: 560px }"
ou pelo conteúdo de colunas com white-space:nowrap), inflando o flex item
pai e empurrando outros elementos pra fora do viewport (ex: .summary-panel
do PDV ficando deslocado à direita). Com min-width:0 + overflow:auto, o
wrap encolhe pra caber no espaço alocado e a tabela rola dentro dele. */
.table-wrap { overflow: auto; min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: #fcfdff; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); }
th { background: #f7fafe; color: #687a8d; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: #f4faf8; }
.btn { height: 44px; border: none; border-radius: 12px; padding: 0 18px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); }
/* CTAs: gradiente verde→ciano FLUINDO (se move devagar; acelera no hover) */
.btn-primary, .btn-accent { background: var(--brand-grad); background-size: 220% 100%; animation: brandFlow 7s ease-in-out infinite; }
.btn-primary { color: #fff; box-shadow: 0 10px 28px rgba(17,173,180,.22); }
.btn-accent { color: #fff; }
.btn-primary:hover, .btn-accent:hover { filter: brightness(1.06); animation-duration: 3.2s; }
@keyframes brandFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn-primary, .btn-accent { animation: none; } }
.btn-secondary { background: #fff; color: #1c3040; border: 1px solid var(--line); }
.btn-danger { background: linear-gradient(90deg, #cf4250, var(--danger)); color: #fff; }
.btn-warning { background: linear-gradient(90deg, #d97706, #f59e0b); color: #fff; box-shadow: 0 8px 20px rgba(217,119,6,.22); }
.signature-wrap { border: 1.5px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #fff; cursor: crosshair; touch-action: none; }
.signature-canvas { display: block; width: 100%; height: 160px; background: #fff; }
.btn-block { width: 100%; }
.btn-plus { margin-top: 12px; background: var(--brand-grad); color: #fff; border: none; box-shadow: 0 10px 22px rgba(17,173,180,.24); width: fit-content; }
.btn-plus:hover { filter: brightness(1.06); }
.small { height: 38px; padding: 0 14px; }
.stack-actions { display: grid; gap: 12px; }
.credit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.credit-row input { flex: 1 1 160px; max-width: 220px; }
.grow { flex: 1 1 300px; }
.helper { margin: 0; font-size: 13px; }
.muted { color: #6b7d91; }
.stock-tabs { display: inline-flex; gap: 8px; padding: 6px; border-radius: 12px; background: #f2f6fb; border: 1px solid #dce6f1; width: fit-content; }
.stock-tab { border: 0; background: transparent; color: #5f7388; font-weight: 700; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.stock-tab.is-active { background: #fff; color: #0f2434; box-shadow: 0 8px 16px rgba(13, 28, 39, .08); }
tr.is-selected { background: linear-gradient(90deg, rgba(17,173,180,.12), rgba(143,203,58,.08)); }
[data-stock-locations-body] tr,
[data-stock-products-body] tr { cursor: pointer; }
[data-stock-locations-body] tr:focus,
[data-stock-products-body] tr:focus { outline: 2px solid rgba(143,203,58,.35); outline-offset: -2px; }
.field-with-button { display: grid; align-content: end; }
.purchase-log { min-height: 180px; max-height: 320px; overflow: auto; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #f9fbff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; white-space: pre-wrap; line-height: 1.45; }
[data-purchase-pcs-body] tr,
[data-purchase-installments-body] tr { cursor: pointer; }
.purchase-module-shell { max-width: 1280px; margin: 0 auto; }
.purchase-module-shell .two-col.wide-split { grid-template-columns: 1fr; }
.form-inline { display: flex; gap: 10px; align-items: center; }
.form-inline input { max-width: 180px; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.period-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.period-chip { height: 38px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #42566a; padding: 0 14px; font-weight: 700; cursor: pointer; }
.period-chip.active { background: linear-gradient(90deg, rgba(17,173,180,.14), rgba(143,203,58,.14)); border-color: rgba(17,173,180,.35); color: #0f5e41; }
.statement-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.statement-meta > div { border: 1px solid var(--line); border-radius: 14px; background: #f9fcff; padding: 12px 14px; display: grid; gap: 6px; }
.statement-meta span { color: #6b7d91; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.statement-meta strong { color: #0f2536; }
.statement-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.kpi-mini { border-radius: 14px; border: 1px solid var(--line); background: #fff; padding: 14px; display: grid; gap: 8px; }
.kpi-mini span { color: #6a7b8d; text-transform: uppercase; font-size: 12px; letter-spacing: .06em; font-weight: 700; }
.kpi-mini strong { font-size: 26px; color: #0f2334; }
.kpi-mini.balance { background: linear-gradient(180deg, #effaf4 0%, #f8fffc 100%); border-color: #caefd8; }
.statement-tables { grid-template-columns: 1fr 1fr; margin-top: 0; }
.table-panel { display: grid; gap: 10px; }
.table-panel h4 { margin: 0; font-size: 16px; color: #193145; }
.mt16 { margin-top: 16px; }
/* Toast: fica fixo no topo-direito mesmo com scroll, não desaparece sozinho
pra erros/warnings (o usuário precisa fechar pra confirmar que viu). */
.flash-stack {
position: fixed;
top: 16px;
right: 16px;
z-index: 9999;
display: grid;
gap: 10px;
max-width: min(440px, calc(100vw - 32px));
pointer-events: none; /* eventos chegam aos filhos, não ao container */
}
.flash {
pointer-events: auto;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: start;
gap: 8px;
padding: 12px 14px;
border-radius: 12px;
font-weight: 600;
line-height: 1.35;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12), 0 2px 6px rgba(0, 0, 0, .06);
border: 1px solid transparent;
transition: opacity .3s ease, transform .3s ease;
animation: flashSlideIn .25s ease-out;
}
@keyframes flashSlideIn {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
.flash.hide { opacity: 0; transform: translateX(20px); }
.flash-msg { user-select: text; word-break: break-word; }
.flash-btn {
pointer-events: auto;
appearance: none;
border: none;
background: rgba(0, 0, 0, .06);
color: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
padding: 2px 8px;
border-radius: 8px;
line-height: 1.2;
flex-shrink: 0;
transition: background .15s ease;
}
.flash-btn:hover { background: rgba(0, 0, 0, .12); }
.flash-close { font-size: 18px; padding: 0 8px; }
.flash-copy.copied { background: rgba(0, 128, 0, .15); }
.flash-success { background: #ecfbf3; color: #0f8b58; border-color: #bfeccc; }
.flash-danger { background: #ffedf0; color: #b12f48; border-color: #fbc8d0; }
.flash-warning { background: #fff7e9; color: #915f0b; border-color: #fde2bf; }
.flash-info { background: #edf8fb; color: #0d7180; border-color: #bfe1ea; }
@media (max-width: 600px) {
.flash-stack { top: 8px; right: 8px; left: 8px; max-width: none; }
}
.sale-success-card { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 18px 20px; border-radius: 16px; border: 1px solid #bfeccc; background: linear-gradient(95deg, #ecfbf3 0%, #f3fffb 65%, #eefdff 100%); box-shadow: 0 14px 32px rgba(16, 127, 79, .12); }
.sale-success-icon { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(180deg, #22c55e, #16a34a); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 20px; box-shadow: 0 8px 18px rgba(16, 127, 79, .26); }
.sale-success-content h3 { margin: 0 0 6px; color: #0f2a1f; font-size: 22px; }
.sale-success-content p { margin: 0; color: #2f5b47; }
.sale-success-content p + p { margin-top: 6px; }
.sale-success-kicker { margin: 0 0 4px; color: #127d4f; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 12px; }
.sale-success-actions { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: 1.15fr .85fr; background: radial-gradient(circle at 20% 10%, rgba(17,173,180,.12), transparent 30%), radial-gradient(circle at 100% 0%, rgba(143,203,58,.09), transparent 25%), linear-gradient(180deg, #071018 0%, #0b131c 100%); }
.login-panel { position: relative; padding: 48px; }
.visual-panel { color: #fff; display: grid; align-content: center; }
.glow { position: absolute; border-radius: 999px; filter: blur(70px); }
.glow-a { width: 220px; height: 220px; background: rgba(17,173,180,.18); top: 90px; left: 80px; }
.glow-b { width: 260px; height: 260px; background: rgba(143,203,58,.12); bottom: 90px; left: 180px; }
.login-logo { width: 136px; margin-bottom: 14px; }
.visual-panel h1 { margin: 0; font-size: 84px; letter-spacing: .06em; }
.tagline { margin: 10px 0 18px; font-size: 24px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.tagline span { color: #2ed6dc; }
.lead { max-width: 560px; color: rgba(255,255,255,.78); font-size: 18px; line-height: 1.7; }
.feature-list { display: grid; gap: 12px; padding: 0; margin: 26px 0 0; list-style: none; }
.feature-list li { padding-left: 18px; position: relative; color: rgba(255,255,255,.82); }
.feature-list li::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: linear-gradient(180deg, var(--primary), var(--accent)); position: absolute; left: 0; top: 9px; }
.form-panel { background: rgba(255,255,255,.96); margin: 24px; border-radius: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.22); display: grid; align-content: center; }
.form-header h2 { margin: 0 0 8px; font-size: 34px; color: #0e1f2c; }
.form-header p { margin: 0 0 24px; color: #6b7b8d; }
.login-form { display: grid; gap: 16px; }
.check-row { display: flex; align-items: center; gap: 10px; }
.check-row input { width: 16px; height: 16px; }
.login-hint { margin-top: 20px; color: #5f7185; padding: 16px; border-radius: 14px; background: #f6f9fc; border: 1px solid var(--line); }
.sync-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1440px) { .grid-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sync-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .app-shell { grid-template-columns: var(--sidebar-current-width) minmax(0, 1fr); } .sidebar { position: sticky; z-index: 20; } .consolidation-layout, .consolidation-config-grid, .three-col, .two-col { grid-template-columns: 1fr; } .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid.five, .form-grid.four, .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sales-layout { flex-direction: column; } .sales-layout > .summary-panel { width: 100%; position: static; } }
@media (max-width: 900px) { .login-shell { grid-template-columns: 1fr; } .visual-panel { padding-bottom: 20px; } .visual-panel h1 { font-size: 58px; } .app-shell, body.sidebar-collapsed .app-shell { grid-template-columns: 1fr; } .sidebar, body.sidebar-collapsed .sidebar { position: relative; width: 100%; height: auto; min-height: auto; padding: 18px; } body.sidebar-collapsed .brand-copy, body.sidebar-collapsed .sidebar-footer { opacity: 1; pointer-events: auto; } body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-group-caret { display: inline; opacity: 1; } body.sidebar-collapsed .nav-item { grid-template-columns: var(--nav-item-icon-col) minmax(0, 1fr) var(--nav-item-action-col); justify-content: initial; column-gap: var(--nav-item-col-gap); } body.sidebar-collapsed .nav-action-slot { display: inline-flex; } .nav-flyout { display: none; } .topbar { flex-direction: column; } .search-box input { width: 100%; } .grid-kpis, .sync-grid, .quick-grid, .form-grid.two, .form-grid.three, .form-grid.four, .form-grid.five { grid-template-columns: 1fr; } .content-area, .topbar { padding-left: 18px; padding-right: 18px; } .form-panel { margin: 0; border-radius: 0; } }
@media (max-width: 900px) {
.sale-success-card { grid-template-columns: 1fr; }
.card { min-width: 0; max-width: 100%; box-sizing: border-box; }
.module-stack { min-width: 0; }
.section-head.split { flex-wrap: wrap; gap: 10px; }
.section-head.split .inline-actions { flex-wrap: wrap; }
.consolidation-config-grid { grid-template-columns: 1fr; }
.summary-panel { width: 100%; }
.stock-tabs { display: flex; flex-wrap: wrap; width: 100%; box-sizing: border-box; }
.stock-tab { flex: 1 1 auto; text-align: center; }
}
textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #fff; padding: 10px 14px; color: var(--text); resize: vertical; min-height: 94px; }
.consolidation-config-grid { grid-template-columns: 1.35fr .8fr; align-items: start; }
.consolidation-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.consolidation-table { min-width: 900px; width: 100%; }
.consolidation-table tbody tr { cursor: pointer; transition: background .15s ease; }
.consolidation-table tbody tr:hover { background: #f0faf5; }
.consolidation-table tbody tr.row-selected { background: #d4f5e3; }
.consolidation-table tbody tr.row-selected td { color: #1a5c38; font-weight: 500; }
.consolidation-table .row-checkbox-cell { display: none; }
.credit-balance { margin: 14px 0 0; color: #2f7a4f; font-weight: 600; background: #eefaf3; border: 1px solid #caeeda; border-radius: 12px; padding: 10px 12px; }
.consol-history-table code { font-size: 12px; background: #f0f4fa; padding: 2px 6px; border-radius: 6px; color: #2b4a72; }
.freight-receivable-layout { display: grid; gap: 18px; }
.freight-tabs { display: inline-flex; gap: 8px; padding: 6px; border-radius: 12px; background: #f2f6fb; border: 1px solid #dce6f1; width: fit-content; }
.freight-tab { border: 0; background: transparent; color: #5f7388; font-weight: 700; border-radius: 10px; padding: 10px 14px; cursor: pointer; }
.freight-tab.is-active { background: #fff; color: #0f2434; box-shadow: 0 8px 16px rgba(13, 28, 39, .08); }
.freight-header-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.freight-total-card { border: 1px solid #d8e9dd; border-radius: 16px; padding: 18px; background: linear-gradient(135deg, #effaf4, #f8fefd); display: grid; gap: 8px; }
.freight-total-card span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #5f7c6a; font-weight: 700; }
.freight-total-card strong { font-size: 38px; line-height: 1; color: #0f5d3a; }
.freight-total-card small { color: #587067; }
.freight-shortcuts { display: grid; gap: 10px; align-content: start; }
.freight-action-form { display: grid; gap: 18px; }
.freight-eligible-table { min-width: 980px; }
@media (max-width: 1200px) {
.freight-header-grid { grid-template-columns: 1fr; }
.transport-sections-grid { grid-template-columns: 1fr; }
}
.nf-omie-details {
grid-template-columns: 1.1fr .9fr;
}
.nf-omie-payload {
margin: 0;
padding: 14px;
border-radius: 12px;
border: 1px solid #dce6f1;
background: #f8fbff;
color: #1f3040;
max-height: 360px;
overflow: auto;
font-size: 12px;
line-height: 1.45;
}
.nf-charge-box {
border: 1px dashed #bfd2e6;
border-radius: 10px;
padding: 12px;
background: #f8fbff;
color: #334b63;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 12px;
}
/* ── Responsividade mobile: Sangria ─────────────────────────────────── */
@media (max-width: 900px) {
.statement-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
.statement-kpis { grid-template-columns: 1fr; }
.statement-meta { grid-template-columns: 1fr; }
/* Section-head com botão: empilha verticalmente */
.section-head { flex-wrap: wrap; }
.section-head > .btn { width: 100%; }
/* Hero: empilha conteúdo + botão no mobile (botão full-width, sem espremer o
texto pra fora do botão — corrige o vazamento crônico dos heros). */
.hero-card { flex-wrap: wrap; padding: 20px; gap: 14px; }
.hero-card h2 { font-size: 22px; }
.hero-card .btn { width: 100%; }
}
/* ── Responsividade mobile: Vendas & Transportes ────────────────────── */
/* Botões de ação em linha (flex-wrap) no mobile */
@media (max-width: 900px) {
.stack-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.stack-actions .btn { flex: 1 1 auto; text-align: center; }
.stack-actions .form-inline {
flex: 1 1 auto;
min-width: 200px;
flex-wrap: wrap;
gap: 8px;
}
.stack-actions .form-inline input { flex: 1 1 100px; max-width: 100%; }
.form-inline { flex-wrap: wrap; }
.form-inline input { flex: 1 1 100%; max-width: 100%; }
/* Botões do formulário de transporte */
.transport-form-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.transport-form-actions .btn { flex: 1 1 auto; text-align: center; }
}
/* Tabelas de itens/pagamentos viram cards em telas pequenas */
@media (max-width: 680px) {
/* table+tbody como BLOCO 100% — senão a encolhe pro conteúdo (grid de
1fr com texto curto) e ocupa só metade da tela. Vale p/ TODA card-table. */
.mobile-card-table { min-width: 0 !important; display: block; width: 100%; }
.mobile-card-table > tbody { display: block; width: 100%; }
.mobile-card-table thead { display: none; }
.mobile-card-table tbody tr {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px 10px;
padding: 12px;
border-bottom: 2px solid var(--line);
}
.mobile-card-table tbody tr td {
padding: 0;
border: none;
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.mobile-card-table tbody tr td::before {
content: attr(data-label);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-soft);
}
/* Primeira célula (produto/data) ocupa a linha toda */
.mobile-card-table tbody tr td:first-child { grid-column: 1 / -1; }
/* Tabela de pagamentos: 2 colunas; conta corrente ocupa linha toda */
.mobile-card-table.payments-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.payments-table tbody tr td:nth-child(2) { grid-column: 1 / -1; }
/* Tabela de viagens do transporte: 2 colunas; linha toda p/ 1ª e 3ª células */
.mobile-card-table.trips-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.trips-table tbody tr td:nth-child(1),
.mobile-card-table.trips-table tbody tr td:nth-child(3) { grid-column: 1 / -1; }
/* Relatório de vendas: 3 colunas; nota + cliente ocupam linha toda */
.mobile-card-table.report-table tbody tr { grid-template-columns: repeat(3, 1fr); }
.mobile-card-table.report-table tbody tr td:nth-child(1) { grid-column: 1 / 2; }
.mobile-card-table.report-table tbody tr td:nth-child(2) { grid-column: 1 / -1; }
/* Célula de ações (último td, sem data-label): linha inteira, botões em linha
que quebra e se ajustam ao texto — sem espremer numa coluna de 1/3 (o que
cortava "Reenviar NF" / "Reemitir boleto"). */
.mobile-card-table.report-table tbody tr td:last-child {
grid-column: 1 / -1;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.mobile-card-table.report-table tbody tr td:last-child::before { display: none; }
.mobile-card-table.report-table tbody tr td:last-child > .btn {
flex: 0 0 auto; width: auto; white-space: nowrap;
}
/* Sangria: 2 colunas; documento/nota ocupa linha toda */
.mobile-card-table.sangria-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.sangria-table tbody tr td:nth-child(1) { grid-column: 1 / -1; }
/* Viagens de fretes a receber e a pagar: 2 colunas; cliente/fornecedor, material e rota ocupam linha toda */
.mobile-card-table.freight-trips-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.freight-trips-table tbody tr td:nth-child(3) { grid-column: 1 / -1; }
.mobile-card-table.freight-trips-table tbody tr td:nth-child(5) { grid-column: 1 / -1; }
.mobile-card-table.freight-trips-table tbody tr td:nth-child(6) { grid-column: 1 / -1; }
/* Contas elegíveis (medições de itens carregados): 2 colunas; checkbox, cliente e produtos ocupam linha toda */
.mobile-card-table.consol-eligible-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.consol-eligible-table tbody tr td:nth-child(1) { grid-column: 1 / -1; }
.mobile-card-table.consol-eligible-table tbody tr td:nth-child(3) { grid-column: 1 / -1; }
.mobile-card-table.consol-eligible-table tbody tr td:nth-child(9) { grid-column: 1 / -1; }
/* Medições de estoque: 2 colunas; produto ocupa linha toda, código fica em coluna */
.mobile-card-table.stock-measurements-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.stock-measurements-table tbody tr td:first-child { grid-column: auto; }
.mobile-card-table.stock-measurements-table tbody tr td:nth-child(2) { grid-column: 1 / -1; }
/* Histórico de consolidações: 2 colunas; código e cliente ocupam linha toda */
.mobile-card-table.consol-history-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.consol-history-table tbody tr td:first-child { grid-column: auto; }
.mobile-card-table.consol-history-table tbody tr td:nth-child(2) { grid-column: 1 / -1; }
.mobile-card-table.consol-history-table tbody tr td:nth-child(3) { grid-column: 1 / -1; }
/* Produtos do local: 2 colunas; produto ocupa linha toda, botão PEND também */
.mobile-card-table.stock-products-table tbody tr { grid-template-columns: 1fr 1fr; }
.mobile-card-table.stock-products-table tbody tr td:first-child { grid-column: auto; }
.mobile-card-table.stock-products-table tbody tr td:nth-child(3) { grid-column: 1 / -1; font-weight: 600; }
.mobile-card-table.stock-products-table tbody tr td:last-child { grid-column: 1 / -1; }
/* Fechamento (pendentes + histórico): 2 colunas; entidade e ações em linha cheia,
botões sem corte (ex: "Realizar fechamento") */
/* table/tbody como bloco pra que o tr (display:grid) estique a 100% da largura —
sem isso o grid encolhe pro conteúdo e ocupa só metade da tela */
.mobile-card-table.fech-table, .mobile-card-table.fech-detail-table { display: block; width: 100%; }
.mobile-card-table.fech-table > tbody, .mobile-card-table.fech-detail-table > tbody { display: block; width: 100%; }
.mobile-card-table.fech-table tbody tr { grid-template-columns: 1fr 1fr; row-gap: 8px; }
.mobile-card-table.fech-table tbody tr td.fech-cell-entity,
.mobile-card-table.fech-table tbody tr td.fech-cell-actions { grid-column: 1 / -1; }
/* 1ª célula (selecionar + expandir): linha cheia, alvos espaçados e maiores
pra não clicar no errado sem querer */
.mobile-card-table.fech-table tbody tr td:first-child {
grid-column: 1 / -1; width: auto !important; overflow: visible !important;
display: flex; flex-direction: row !important; align-items: center;
gap: 22px; padding: 2px 4px 6px;
}
.mobile-card-table.fech-table tbody tr td:first-child::before { display: none; }
.mobile-card-table.fech-table tbody tr td:first-child input[type="checkbox"] {
width: 22px !important; height: 22px !important;
}
.mobile-card-table.fech-table tbody tr td:first-child > button {
font-size: 14px !important; line-height: 1; color: #1d4ed8 !important;
background: #eff6ff !important; border: 1px solid #bfdbfe !important;
border-radius: 8px !important; padding: 7px 14px !important; flex: 0 0 auto;
}
.mobile-card-table.fech-table tbody tr td:first-child input[type="checkbox"] { flex: 0 0 auto; }
/* linha de detalhe expandida: vira BLOCO full-width (sem grid) e sem o recuo de 44px */
/* sem !important no display: o fechToggle colapsa setando display:none inline,
que precisa vencer este CSS. A especificidade (.fech-table tr[id^=detail-])
já ganha do grid base sem !important. */
.mobile-card-table.fech-table tbody tr[id^="detail-"] { display: block; width: 100%; }
.mobile-card-table.fech-table tbody tr[id^="detail-"] > td { display: block !important; width: 100% !important; max-width: none !important; grid-column: 1 / -1 !important; padding: 0 8px 14px 8px !important; box-sizing: border-box; }
/* o .content-area .card table td:first-child{max-width:180px} (p/ outras tabelas)
estava prendendo a célula de detalhe em 180px — libera nas tabelas do fechamento */
.mobile-card-table.fech-table td:first-child,
.mobile-card-table.fech-detail-table td { max-width: none !important; }
.mobile-card-table.fech-table tbody tr td.fech-cell-actions::before { display: none; }
.fech-cell-actions .inline-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
.fech-cell-actions .inline-actions .btn { flex: 1 1 auto; min-width: 150px; padding: 9px 14px; white-space: nowrap; }
/* Tabelas internas de itens (ao expandir um card) — viram lista de campos
label/valor em BLOCO, sempre 100% de largura (grid-em-tabela encolhia pro
conteúdo e ocupava só metade da tela). */
.mobile-card-table.fech-detail-table { display: block !important; width: 100% !important; min-width: 0 !important; }
.mobile-card-table.fech-detail-table > thead { display: none; }
.mobile-card-table.fech-detail-table > tbody { display: block; width: 100%; }
.mobile-card-table.fech-detail-table > tbody > tr {
display: block; width: 100%; padding: 9px 2px; border-bottom: 1px solid var(--line);
}
.mobile-card-table.fech-detail-table > tbody > tr > td {
display: flex; flex-direction: row !important; justify-content: space-between; align-items: center;
gap: 12px; padding: 4px 0; border: none; white-space: normal !important; text-align: left; min-width: 0;
}
.mobile-card-table.fech-detail-table > tbody > tr > td::before {
content: attr(data-label); flex: 0 0 auto; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft);
}
/* célula de ação (sem data-label) e Descrição: ocupam linha inteira */
.mobile-card-table.fech-detail-table > tbody > tr > td:not([data-label]) { display: block; }
.mobile-card-table.fech-detail-table > tbody > tr > td:not([data-label])::before { display: none; }
.mobile-card-table.fech-detail-table > tbody > tr > td[data-label="Descrição"] { display: block; }
.mobile-card-table.fech-detail-table > tbody > tr > td[data-label="Descrição"]::before { display: block; margin-bottom: 2px; }
.mobile-card-table.fech-detail-table input.cell-input { width: auto !important; max-width: 55% !important; }
}
/* ── Mobile: hambúrguer + menu em tela cheia ──────────────────────────────── */
.mobile-menu { display: none; }
.mobile-menu[hidden] { display: none !important; }
.topbar-mobile-bar { display: none; }
@media (max-width: 768px) {
/* Esconde a sidebar de desktop */
.sidebar { display: none !important; }
/* Sem barra inferior: padding de baixo normal. Respiro no topo (a barra fixa
não traz mais margem inferior, pra conteúdo deslizar limpo por baixo). */
.content-area { padding-top: 14px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
/* Barra mobile SEMPRE fixa no topo. A própria .topbar fica sticky (seu pai
.main-area é alto) — sticky no filho sozinho soltava ao rolar além da
topbar curta. topbar-head é oculto no mobile, então zeramos o padding
desktop da topbar e a barra carrega o próprio. */
.topbar {
position: sticky;
top: 0;
z-index: 150;
padding: 0;
min-height: 0;
}
.topbar-mobile-bar {
display: flex;
align-items: center;
align-self: stretch; /* topbar é column flex com align-items:flex-start */
gap: 12px;
margin: 0;
padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
background: linear-gradient(180deg, #071018 0%, #0d1721 100%);
border-bottom: 1px solid rgba(255,255,255,.09);
}
.topbar-hamburger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 11px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: #e8f3ee;
cursor: pointer;
flex: 0 0 auto;
order: 9; /* hambúrguer à DIREITA do topbar mobile */
-webkit-tap-highlight-color: transparent;
}
.topbar-hamburger:active { background: rgba(255,255,255,.12); }
.topbar-mobile-logo { width: 30px; height: auto; flex: 0 0 auto; display: block; }
.topbar-mobile-page {
font-size: 16px;
font-weight: 700;
letter-spacing: .01em;
color: #f2f8f5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1 1 auto;
min-width: 0;
}
/* Aba/subaba já está na topbar → não repete breadcrumb/título no corpo. */
.topbar-head { display: none; }
/* Overlay do menu */
.mobile-menu {
display: block;
position: fixed;
inset: 0;
z-index: 500;
}
.mobile-menu-backdrop {
position: absolute;
inset: 0;
background: rgba(8,14,20,.42);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .25s ease;
}
.mobile-menu.open .mobile-menu-backdrop { opacity: 1; }
.mobile-menu-sheet {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
/* deixa uma folga à esquerda mostrando o fundo borrado (visual profissional) */
width: min(86%, 420px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #071018 0%, #0d1721 100%);
border-left: 1px solid rgba(255,255,255,.1);
transform: translateX(100%);
transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.mobile-menu.open .mobile-menu-sheet { transform: translateX(0); }
.mobile-menu-head {
display: flex;
flex-direction: column;
gap: 8px;
padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
flex: 0 0 auto;
}
.mm-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mobile-menu-title { font-size: 16px; font-weight: 800; letter-spacing: .04em; color: #f2f8f5; }
.mobile-menu-close {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: rgba(255,255,255,.06); color: rgba(255,255,255,.8);
border-radius: 10px; font-size: 18px; cursor: pointer;
}
.mobile-menu-close:active { background: rgba(255,255,255,.14); }
.mobile-menu-nav {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 10px 12px calc(28px + env(safe-area-inset-bottom, 0px));
}
/* Item simples (Fechamento, Tarefas) */
.mm-item, .mm-group-toggle {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
padding: 14px 14px;
color: rgba(255,255,255,.78);
font-size: 15px;
font-weight: 600;
text-decoration: none;
text-align: left;
border: none;
background: none;
border-radius: 12px;
cursor: pointer;
}
.mm-item.active, .mm-group-toggle.active { color: #88f0b7; }
.mm-item:active, .mm-group-toggle:active { background: rgba(255,255,255,.06); }
.mm-icon { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mm-icon svg { width: 100%; height: 100%; fill: currentColor; }
.mm-label { flex: 1; min-width: 0; }
.mm-caret { font-size: 12px; color: rgba(255,255,255,.45); transition: transform .2s ease; }
.mm-group.open .mm-caret { transform: rotate(180deg); }
/* Sub-itens — colapsáveis */
.mm-subitems {
max-height: 0;
overflow: hidden;
transition: max-height .26s ease;
padding-left: 18px;
}
.mm-group.open .mm-subitems { max-height: 720px; }
.mm-subitem {
display: block;
padding: 11px 14px;
color: rgba(255,255,255,.6);
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-radius: 10px;
border-left: 2px solid rgba(255,255,255,.08);
margin: 2px 0;
}
.mm-subitem.active { color: #88f0b7; border-left-color: #88f0b7; background: rgba(136,240,183,.08); font-weight: 600; }
.mm-subitem:active { background: rgba(255,255,255,.07); }
.mm-subheading { padding: 12px 14px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.4); }
/* Bloco do usuário no topo do menu — Portal Central + usuário + sair */
.mobile-menu-foot {
flex: 0 0 auto;
border-bottom: 1px solid rgba(255,255,255,.09);
padding: 10px 14px 12px;
display: flex;
flex-direction: column;
gap: 6px;
}
.mm-portal {
display: inline-flex;
align-items: center;
gap: 7px;
align-self: flex-start; /* não ocupa a linha toda */
color: rgba(255,255,255,.72);
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 6px 13px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 999px;
background: rgba(255,255,255,.04);
}
.mm-portal:active { color: #88f0b7; background: rgba(255,255,255,.08); }
.mm-user {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
}
.mm-user-dot { width: 8px; height: 8px; border-radius: 50%; background: #88f0b7; flex: 0 0 auto; }
.mm-user-text { flex: 1; min-width: 0; }
.mm-user-name { font-size: 14px; font-weight: 700; color: #f2f8f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-user-company { font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-logout {
flex: 0 0 auto;
color: #fca5a5;
font-size: 13px;
font-weight: 700;
text-decoration: none;
padding: 8px 14px;
border: 1px solid rgba(248,113,113,.3);
border-radius: 10px;
}
.mm-logout:active { background: rgba(248,113,113,.12); }
}
/* ── Page tabs ──────────────────────────────────────────────────────── */
.page-tabs {
display: flex;
gap: 4px;
border-bottom: 2px solid var(--line);
margin-bottom: 18px;
}
.page-tab {
display: inline-block;
padding: 8px 20px;
font-size: 14px;
font-weight: 600;
color: var(--text-muted);
text-decoration: none;
border-radius: 8px 8px 0 0;
border: 1px solid transparent;
border-bottom: none;
margin-bottom: -2px;
transition: color .14s, background .14s;
white-space: nowrap;
}
.page-tab:hover { color: var(--fg); background: rgba(255,255,255,.6); }
.page-tab.active {
color: var(--fg);
background: rgba(255,255,255,.95);
border-color: var(--line);
border-bottom-color: rgba(255,255,255,.95);
}
/* ─────────────────────────────────────────────────────────────────────
* Dashboard — Responsividade mobile
* Cobre 8 sub-abas (resumo, visao-geral, fluxo-caixa, dre, departamento,
* receitas, custos, despesas) + drill universal + detalhe de movimento +
* árvore de decomposição.
* ───────────────────────────────────────────────────────────────────── */
/* Saldo hero — escala progressiva por viewport */
.saldo-hero { transition: padding .15s; }
.saldo-hero-value { transition: font-size .15s; }
@media (max-width: 1024px) {
.saldo-hero-value { font-size: 3.6rem !important; }
}
@media (max-width: 768px) {
.saldo-hero { padding: 22px 16px !important; }
.saldo-hero-label { font-size: 0.72rem !important; }
.saldo-hero-value { font-size: 2.8rem !important; }
.saldo-hero-meta { font-size: 0.74rem !important; gap: 10px !important; }
}
@media (max-width: 480px) {
.saldo-hero { padding: 18px 12px !important; border-radius: 10px !important; }
.saldo-hero-label { font-size: 0.66rem !important; letter-spacing: 0.08em !important; }
.saldo-hero-value { font-size: 2.1rem !important; line-height: 1 !important; }
.saldo-hero-meta {
flex-direction: column !important;
gap: 4px !important;
font-size: 0.7rem !important;
}
.saldo-hero-meta span { display: block; }
}
/* Cards KPI — denser em mobile */
@media (max-width: 768px) {
.grid-kpis { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.kpi-card { padding: 12px !important; }
.kpi-title { font-size: 0.72rem !important; }
.kpi-value { font-size: 1.1rem !important; }
.kpi-delta { font-size: 0.7rem !important; }
}
@media (max-width: 480px) {
.grid-kpis { grid-template-columns: 1fr !important; }
.kpi-value { font-size: 1.3rem !important; }
}
/* Tabelas DRE / drill / multidim — scroll horizontal preservando UX */
.table-wrap, .dash-table-wrap, .drill-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
@media (max-width: 768px) {
.dash-table, .drill-table, .dre-table, .multidim-table,
.table-wrap > table {
font-size: 0.78rem !important;
min-width: 100%;
}
.dash-table th, .dash-table td,
.drill-table th, .drill-table td,
.dre-table th, .dre-table td,
.multidim-table th, .multidim-table td,
.table-wrap th, .table-wrap td {
padding: 6px 8px !important;
white-space: nowrap;
}
/* Primeira coluna (label da linha) sticky — fica visível durante scroll */
.dash-table th:first-child, .dash-table td:first-child,
.drill-table th:first-child, .drill-table td:first-child,
.dre-table th:first-child, .dre-table td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}
}
/* Filtros de período / regime — wrap vertical em mobile */
.periodo-filtros, .regime-toggle, .dash-filters, .dash-toolbar {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
@media (max-width: 768px) {
.periodo-filtros, .regime-toggle, .dash-filters, .dash-toolbar {
flex-direction: column;
align-items: stretch !important;
}
.periodo-filtros > *, .regime-toggle > *,
.dash-filters > *, .dash-toolbar > * { width: 100%; }
.periodo-filtros select, .periodo-filtros input,
.dash-filters select, .dash-filters input {
min-height: 44px; /* touch-friendly Apple guideline */
font-size: 16px; /* evita zoom auto do iOS */
}
}
/* Gauges (Resumo Executivo) — 2 colunas em tablet, 1 em phone */
@media (max-width: 768px) {
.gauges-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
}
@media (max-width: 480px) {
.gauges-grid { grid-template-columns: 1fr !important; }
}
/* SVG charts (sparklines, waterfall, projeção) — full width */
@media (max-width: 768px) {
.dash-chart, .dash-chart svg,
.sparkline, .waterfall, .projecao-chart {
width: 100% !important;
height: auto;
max-width: 100vw;
}
}
/* Heading e subtitle — escalas reduzidas */
@media (max-width: 768px) {
.page-title, h1 { font-size: 1.4rem !important; }
.page-subtitle { font-size: 0.85rem !important; }
.page-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-tab { padding: 8px 14px; font-size: 13px; }
}
/* Drill-down: form de rateio inline — empilha em mobile */
@media (max-width: 768px) {
.rateio-form .rateio-row {
flex-direction: column !important;
gap: 6px !important;
padding: 8px !important;
}
.rateio-form input, .rateio-form select { width: 100% !important; }
.rateio-form button { min-height: 40px; width: 100%; }
}
/* Detalhe do movimento — header em coluna única */
@media (max-width: 768px) {
.movimento-header, .movimento-info {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.movimento-actions { flex-direction: column; gap: 6px; }
.movimento-actions a, .movimento-actions button {
width: 100%; min-height: 44px; text-align: center;
}
}
/* Árvore de decomposição — nodes em scroll horizontal */
@media (max-width: 768px) {
.arvore-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arvore-nivel { font-size: 0.8rem; }
.arvore-node { padding: 8px 10px; font-size: 0.75rem; }
}
/* Botões — touch-friendly em mobile */
@media (max-width: 768px) {
.btn, button.btn, a.btn, .button {
min-height: 44px;
padding: 10px 16px;
}
.btn-sm { min-height: 36px; padding: 6px 12px; }
}
/* Mensagens flash — não dominar tela em mobile */
@media (max-width: 480px) {
.flash-message, .alert {
font-size: 0.85rem;
padding: 10px 12px;
margin-bottom: 10px;
}
}
/* Card geral — padding interno menor em mobile pra dar mais conteúdo */
@media (max-width: 480px) {
.card { padding: 14px !important; border-radius: 16px !important; }
.card .card-title, .card h3 { font-size: 1rem; margin-bottom: 8px; }
}
/* Sidebar mobile — adiciona safe-area pra iPhone X+ */
@media (max-width: 900px) {
.sidebar { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.content-area { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
/* Tipografia base mobile — evita zoom auto em inputs do iOS */
@media (max-width: 768px) {
input[type="text"], input[type="number"], input[type="date"],
input[type="search"], select, textarea {
font-size: 16px;
}
}
/* ═════════════════════════════════════════════════════════════════════
* Dashboard mobile — overrides FORTES de inline styles
* Os templates do dashboard usam muito `style="..."` inline. Pra evitar
* reescrever 11 arquivos, usamos !important em mobile e seletores
* específicos pra:
* - empilhar toolbars/filtros verticalmente
* - colapsar grids inline pra 1 coluna
* - dar overflow horizontal a TODA tabela dentro de .card
* - encolher fonts/paddings de tabelas
* - tornar o modal de drill fullscreen
* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Cards / toolbars topo de cada sub-aba: força wrap vertical ──── */
/* Pega ``
que é o padrão das toolbars (DRE / Fluxo / Departamento / Multidim) */
.content-area .card[style*="display:flex"][style*="space-between"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.content-area .card[style*="display:flex"][style*="space-between"] > * {
width: 100% !important;
}
/* ── Formulários de filtro (period, regime, usuário): empilha labels ── */
.content-area .card form[method="get"],
.content-area .card form[action*="dashboard"] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
}
.content-area .card form[method="get"] label,
.content-area .card form[action*="dashboard"] label {
width: 100% !important;
}
.content-area .card form[method="get"] select,
.content-area .card form[method="get"] input,
.content-area .card form[action*="dashboard"] select,
.content-area .card form[action*="dashboard"] input {
width: 100% !important;
min-width: 0 !important;
min-height: 40px;
padding: 8px 10px !important;
}
.content-area .card form button[type="submit"] {
width: 100%;
min-height: 42px;
}
/* Grupo de botões PDF/CSV/Atualizar na toolbar — ocupam linha total */
.content-area .card > div[style*="display:flex"][style*="gap"] {
flex-wrap: wrap !important;
width: 100%;
}
.content-area .card > div[style*="display:flex"][style*="gap"] > a,
.content-area .card > div[style*="display:flex"][style*="gap"] > button {
flex: 1 1 auto;
text-align: center;
}
/* ── Grids inline (style="grid-template-columns:repeat(N,...)") ──── */
/* Em mobile, FORÇA 1 coluna em qualquer grid criado via inline style */
.content-area section[style*="grid-template-columns"],
.content-area .grid[style*="grid-template-columns"],
.content-area article[style*="grid-template-columns"],
.content-area div[style*="grid-template-columns"]:not([data-keep-grid]) {
grid-template-columns: 1fr !important;
}
/* Exceção: KPIs ficam 2 colunas em ≤768px (já tratado), 1 col em ≤480px */
.content-area .grid-kpis,
.content-area .grid-kpis[style*="grid-template-columns"] {
grid-template-columns: 1fr 1fr !important;
}
/* Layout two-col que existe no visao_geral / fluxo */
.content-area .two-col { grid-template-columns: 1fr !important; gap: 14px !important; }
/* ── Tabelas dentro de .card: scroll horizontal + fonte/padding menor ── */
/* Wrapper: força overflow:auto em qualquer .card que contenha (qualquer
profundidade — cobre Dashboard, drills, etc.). mobile-card-table vira bloco e
não estoura, então não rola à toa. */
.content-area .card:has(table),
.content-area .card[style*="padding:0"] {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* contêineres de rolagem internos (ex.: #dre-view-tradicional, .table-wrap) */
.content-area .card .table-wrap,
.content-area .card [style*="overflow-x:auto"],
.content-area .card [style*="overflow-x: auto"] {
-webkit-overflow-scrolling: touch;
}
/* Mais robusto: aplica overflow no parent direto da tabela */
.content-area .card table {
font-size: 0.78rem !important;
width: 100% !important;
min-width: 0 !important;
}
.content-area .card table th,
.content-area .card table td {
padding: 6px 8px !important;
white-space: nowrap !important;
}
/* PRIMEIRA coluna (label / cliente / categoria / linha do DRE): pode quebrar em
palavras, mas NUNCA esmaga a ponto de quebrar letra-a-letra — tem largura
mínima. Quando as demais colunas (nowrap) não cabem, a tabela rola na
horizontal (o card tem overflow-x:auto) em vez de espremer a 1ª coluna. */
.content-area .card table th:first-child,
.content-area .card table td:first-child {
white-space: normal !important;
min-width: 150px;
max-width: 240px;
word-break: break-word;
}
/* DRE indentação: reduz pra caber em mobile */
.content-area .card table td[style*="padding-left:54px"],
.content-area .card table td[style*="padding-left:76px"] {
padding-left: 16px !important;
}
.content-area .card table td[style*="padding-left:32px"] {
padding-left: 10px !important;
}
/* ── DRE Árvore: reduz fonte / padding dos ───────────── */
.content-area details summary {
padding: 8px 10px !important;
font-size: 0.82rem !important;
}
.content-area details summary > div {
min-width: 0 !important;
flex-wrap: wrap !important;
}
/* Barras de progresso dentro da árvore: encolhe */
.content-area details summary div[style*="width:60px"],
.content-area details summary div[style*="width:80px"],
.content-area details summary div[style*="width:100px"] {
width: 36px !important;
}
.content-area details summary span[style*="min-width:100px"],
.content-area details summary span[style*="min-width:110px"] {
min-width: 70px !important;
font-size: 0.78rem;
}
/* ── Subtotais da DRE (divs gigantes): encolhe padding/fonte ─── */
.content-area .card div[style*="border-left:4px solid"][style*="border-radius:8px"] {
padding: 8px 12px !important;
}
.content-area .card div[style*="border-left:4px solid"][style*="border-radius:8px"] span[style*="font-size:1.4rem"] {
font-size: 1rem !important;
}
/* ── Cards KPI hero (saldo gigante) ───────────────────────────── */
.content-area .card[class*="saldo-hero"] div[style*="font-size:4.5rem"],
.content-area .card[class*="saldo-hero"] div[style*="font-size:4.2rem"] {
font-size: 2.4rem !important;
}
.content-area .card[class*="saldo-hero"] div[style*="font-size:2.2rem"] {
font-size: 1.6rem !important;
}
/* ── Hero do resumo executivo (receber/pagar) ─────────────────── */
.content-area section[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom"] {
grid-template-columns: 1fr !important;
}
/* ── Waterfall chart (composição DRE): mantém colunas mas reduz fonte ── */
.content-area .card div[style*="grid-template-columns:repeat(9,1fr)"] {
height: 160px !important;
gap: 3px !important;
}
.content-area .card div[style*="grid-template-columns:repeat(9,1fr)"] div[style*="font-size:0.7rem"] {
font-size: 0.55rem !important;
line-height: 1.1 !important;
}
/* ── Editor de rateio inline: ajusta grid 4 colunas pra empilhar ─ */
.rateio-row,
.rateio-row[style*="grid-template-columns"] {
grid-template-columns: 1fr 60px 70px 28px !important;
gap: 3px !important;
}
.rateio-form {
min-width: 0 !important;
width: calc(100vw - 32px) !important;
max-width: 380px;
left: 8px;
right: 8px;
}
/* Editor de categoria (re-classificar): mesmo tratamento */
.cat-editor > details > form,
details.cat-editor form {
min-width: 0 !important;
width: calc(100vw - 32px) !important;
max-width: 380px;
}
/* ── Texto explicativo / muted: shrink na fonte ───────────────── */
.content-area .card p,
.content-area .card .muted {
font-size: 0.8rem;
}
/* ── Mensagens flash / banners de aviso ───────────────────────── */
.content-area .card[style*="background:linear-gradient"][style*="border-left"] {
padding: 10px 12px !important;
}
.content-area .card[style*="background:linear-gradient"] strong {
font-size: 0.88rem;
}
/* ── Headers das seções (section-head) ───────────────────────── */
.content-area .section-head { gap: 6px !important; }
.content-area .section-head h3 { font-size: 1rem !important; }
.content-area .section-head p { font-size: 0.78rem !important; }
/* ── Drill modal — TELA CHEIA em mobile ───────────────────────── */
#drill-modal {
padding: 0 !important;
}
#drill-modal > div[role="dialog"] {
border-radius: 0 !important;
max-width: 100% !important;
min-height: 100dvh;
}
#drill-modal #drill-modal-close {
top: 6px !important;
right: 6px !important;
width: 40px !important;
height: 40px !important;
}
#drill-modal #drill-modal-back {
top: 6px !important;
left: 6px !important;
padding: 8px 12px !important;
}
#drill-modal #drill-modal-content {
padding: 52px 10px 16px !important;
}
/* ── Movimento detalhe: header em coluna + auditoria empilhada ──── */
.content-area .card .audit-block div[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
/* ── Fluxo de Caixa: cabeçalho de "Resumo por Conta" + linhas ─── */
/* Grid "1fr auto" do cabeçalho e linhas de CC vira 1 coluna em mobile */
.content-area .card div[style*="grid-template-columns:1fr auto"] {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
/* Sub-grid de 3 valores (Entradas/Saídas/Saldo) compacta */
.content-area .card span[style*="grid-template-columns:100px 100px 130px"],
.content-area .card div[style*="grid-template-columns:100px 100px 130px"] {
grid-template-columns: 1fr 1fr 1fr !important;
gap: 4px !important;
font-size: 0.78rem !important;
}
/* ── Tabela de hoje/semana do Resumo (a receber/pagar) ─────────── */
/* Ocupa largura total do card mesmo quando dentro de link */
.content-area a[href*="dashboard/drill"] > article.card { width: 100% !important; }
}
/* Detalhe do movimento: editor de rateio com grid 4 colunas larger (110px) */
@media (max-width: 768px) {
/* Cabeçalho do rateio + linhas do editor inline (não confundir com drill) */
.content-area #rateio-rows .rateio-row,
.content-area div[style*="grid-template-columns:1fr 110px 110px 40px"] {
grid-template-columns: 1fr 70px 70px 32px !important;
gap: 4px !important;
font-size: 0.78rem !important;
}
/* Tabela de NFe / Pedido: trunca CFOP/Cód/Un em mobile reduzindo padding */
.content-area .card table th,
.content-area .card table td {
overflow: hidden;
text-overflow: ellipsis;
}
/* Permite descrição do produto quebrar linha */
.content-area .card table td:nth-child(2) {
white-space: normal !important;
word-break: break-word;
}
}
/* Phone pequenos (≤480px): refinamento extra */
@media (max-width: 480px) {
.content-area .card { padding: 12px !important; border-radius: 16px !important; }
.content-area .card table { font-size: 0.72rem !important; }
.content-area .card table th,
.content-area .card table td {
padding: 4px 6px !important;
}
/* Saldo hero ainda menor */
.content-area .card[class*="saldo-hero"] div[style*="font-size:4.5rem"],
.content-area .card[class*="saldo-hero"] div[style*="font-size:4.2rem"] {
font-size: 1.9rem !important;
}
/* KPIs ficam 1 coluna */
.content-area .grid-kpis,
.content-area .grid-kpis[style*="grid-template-columns"] {
grid-template-columns: 1fr !important;
}
/* Atalhos rápidos: 1 botão por linha */
.content-area .quick-grid { grid-template-columns: 1fr !important; }
/* Pílulas Tradicional/Árvore: ocupam linha total e ficam lado a lado */
.dre-view-btn { font-size: 0.78rem; padding: 6px 10px; }
/* Breadcrumb do drill: encolhe */
.drill-breadcrumb { font-size: 0.75rem !important; gap: 4px !important; }
}
/* ───────────────────────────────────────────────────────────────────────
Polish visual — pills de status, zebra, tabular nums, hierarquia do drill
─────────────────────────────────────────────────────────────────────── */
/* Pills de status (PAGO / A VENCER / VENCIDO / CANCELADO / etc.) */
.status-pill {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
line-height: 1.5;
border: 1px solid transparent;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.status-pill.is-pago,
.status-pill.is-liquidado,
.status-pill.is-conciliado { background: rgba(34,197,94,.12); color: #15803d; border-color: rgba(34,197,94,.28); }
.status-pill.is-vencido { background: rgba(239,68,68,.10); color: #b91c1c; border-color: rgba(239,68,68,.28); }
.status-pill.is-vencer,
.status-pill.is-aberto { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.32); }
.status-pill.is-cancelado { background: rgba(148,163,184,.15); color: #475569; border-color: rgba(148,163,184,.32); }
.status-pill.is-previsto { background: rgba(99,102,241,.12); color: #4338ca; border-color: rgba(99,102,241,.28); }
/* Tabular numbers — alinha vírgula e dígitos em colunas R$ / quantidades.
Pega tanto classes nomeadas quanto inline style="text-align:right" (padrão
das tabelas atuais do dashboard, que ainda não migraram pra classe). */
.dre-table td, .dre-table th,
.drill-table td, .drill-table th,
.dash-table td, .dash-table th,
.multidim-table td, .multidim-table th,
td[align="right"], th[align="right"],
td[style*="text-align:right"], th[style*="text-align:right"],
td[style*="text-align: right"], th[style*="text-align: right"],
.brl, .num, .tabular { font-variant-numeric: tabular-nums; }
/* Tabela do drill — zebra sutil + hover */
.drill-table tbody tr:nth-child(even) > td { background: rgba(15, 23, 42, .025); }
.drill-table tbody tr:hover > td { background: rgba(17,173,180,.06); }
.drill-table tbody tr { transition: background .12s ease; }
.drill-table thead th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #475569; }
/* Header do drill — eyebrow + título grande + meta line */
.drill-header { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; padding:18px 22px; margin-bottom:14px; border-radius:14px; background:#fff; border:1px solid #e6ecf2; box-shadow:0 1px 2px rgba(15,23,42,.03); }
.drill-header-text { min-width: 0; flex: 1; }
.drill-eyebrow { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 4px;
background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Utilitário: texto com o gradiente da marca (verde→ciano). REGRA do app. */
.brand-grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text;
color: transparent; -webkit-text-fill-color: transparent; }
.drill-title { margin: 0; font-size: 1.45rem; font-weight: 700; color: #0d1c27; line-height: 1.2; letter-spacing: -.01em; }
.drill-meta { margin: 6px 0 0; font-size: .82rem; color: #6b7d91; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.drill-meta .chip { display:inline-flex; align-items:center; gap:5px; padding: 2px 9px; background:#f1f5f9; border-radius:999px; font-size:.75rem; color:#334155; font-weight:600; font-variant-numeric: tabular-nums; }
.drill-meta .chip.success { background: rgba(34,197,94,.12); color:#15803d; }
.drill-back { font-size: .8rem; }
@media (max-width: 768px) {
.drill-title { font-size: 1.15rem; }
.drill-header { padding: 14px 16px; }
}
/* ── Vectra · loader branded "Facet cascade" ────────────────────────
As 3 facetas do escudo (green → dark → teal) pulsam em cascata.
SVG injetado por brand_loaders.js. Uso:
Carregando…
.
Ref: vectra_brand_kit/brand_showcase.html (.ld-cascade). */
.vectra-spinner { display:inline-block; width:60px; height:auto; line-height:0; vertical-align:middle; }
.vectra-spinner.sm { width:40px; }
.vectra-spinner.lg { width:88px; }
.vectra-spinner svg { width:100%; height:auto; display:block; }
.vectra-spinner .facet { transform-box:fill-box; transform-origin:center; }
.vectra-spinner .facet.green { animation:vectra-casc 1.4s ease-in-out infinite; }
.vectra-spinner .facet.dark { animation:vectra-casc 1.4s ease-in-out .18s infinite; }
.vectra-spinner .facet.teal { animation:vectra-casc 1.4s ease-in-out .36s infinite; }
@keyframes vectra-casc { 0%,80%,100% { opacity:.18; } 40% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .vectra-spinner .facet { animation:none; opacity:1; } }
.vectra-loading { display:flex; flex-direction:column; align-items:center; gap:14px;
color:#66778a; font-size:.9rem; padding:44px 0; letter-spacing:.02em; }
/* "respirando" — estado de processamento de um escudo estático */
.vectra-shield-pulse { animation:vectra-breathe 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes vectra-breathe { 0%,100%{ transform:scale(1); filter:none; }
50%{ transform:scale(1.06); filter:drop-shadow(0 4px 16px rgba(17,173,180,.5)); } }
/* loader inline (auto-upgrade via brand_loaders.js) */
.vectra-inline-loading { display:inline-flex; align-items:center; gap:10px; color:#66778a; }
.vectra-inline-loading .vload-label { font-size:.9rem; letter-spacing:.01em; }
td.vectra-inline-loading, th.vectra-inline-loading { justify-content:center; }
/* ── Estado vazio branded (escudo marca-d'água) ─────────────────────────── */
.vectra-empty { display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; padding:34px 20px; text-align:center; color:var(--text-soft); font-size:.92rem; line-height:1.5; }
.vectra-empty::before { content:''; width:48px; height:48px; flex:0 0 auto;
background:url("../img/brand/vectra_shield_flat.svg") center/contain no-repeat; opacity:.16; }
.vectra-empty.sm { padding:20px 14px; font-size:.85rem; gap:8px; }
.vectra-empty.sm::before { width:34px; height:34px; }
/* ── Skeleton shimmer (placeholder de carregamento p/ tabelas/cards) ────── */
.vectra-skeleton { position:relative; overflow:hidden; background:#eef2f7; border-radius:8px; }
.vectra-skeleton::after { content:''; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg, transparent, rgba(143,203,58,.20) 42%, rgba(17,173,180,.20) 58%, transparent);
animation:vSkel 1.3s ease-in-out infinite; }
@keyframes vSkel { 100% { transform:translateX(100%); } }
.skeleton-line { height:12px; border-radius:6px; margin:8px 0; background:#eef2f7; }
@media (prefers-reduced-motion: reduce){ .vectra-skeleton::after{ animation:none; } }
/* ── Compras · Cotação ───────────────────────────────────────────────────── */
.cotacao-page .btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 8px; min-height: 0; }
/* spinner inline pequeno dentro de botões (default é 60px) */
.cotacao-page .btn .vectra-spinner { width: 16px; height: 16px; vertical-align: middle; margin-right: 4px; }
.cotacao-page .cot-supplier-dropdown,
.cotacao-page #supplierDropdown {
position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
background: #fff; border: 1px solid var(--line); border-radius: 12px;
box-shadow: 0 12px 30px rgba(15,30,45,.14); max-height: 320px; overflow-y: auto; padding: 6px;
}
.cotacao-page .cot-supplier-opt {
display: block; width: 100%; text-align: left; border: 0; background: none;
padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #1c3040;
}
.cotacao-page .cot-supplier-opt:hover { background: #f1f7f4; }
.cotacao-page .cot-supplier-opt.muted { cursor: default; }
.cotacao-page .cot-sugestoes-list,
.cotacao-page .cot-suppliers { display: grid; gap: 10px; }
.cotacao-page .cot-sugestao-card,
.cotacao-page .cot-supplier-card {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfe;
}
.cotacao-page .cot-supplier-card { flex-direction: column; align-items: stretch; }
.cotacao-page .cot-supplier-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cotacao-page .cot-supplier-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cotacao-page .cot-supplier-contact { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #6b7d91; margin-top: 6px; }
.cotacao-page .cot-sugestao-tags { margin: 4px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.cotacao-page .cot-sugestao-contact { font-size: 12px; margin-top: 2px; }
.cotacao-page .cot-status {
display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
background: #eef2f7; color: #51637a; margin-left: 6px;
}
.cotacao-page .cot-status-enviado { background: #dbeafe; color: #1d4ed8; }
.cotacao-page .cot-status-respondido { background: #dcfce7; color: #15803d; }
.cotacao-page .cot-status-vencedor { background: var(--brand-grad); color: #fff; }
.cotacao-page .cot-status-perdedor,
.cotacao-page .cot-status-recusado { background: #fee2e2; color: #b91c1c; }
.cotacao-page .cot-resposta-bloco {
border: 1px solid var(--line); border-radius: 12px; padding: 0; margin-bottom: 12px; background: #fff;
}
.cotacao-page .cot-resposta-bloco > summary {
cursor: pointer; padding: 12px 16px; font-size: 14px; list-style: none;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cotacao-page .cot-resposta-bloco > summary::-webkit-details-marker { display: none; }
/* Botão de seta (expandir/recolher) — claro, à direita do nome do fornecedor */
.cotacao-page .cot-bloco-chevron {
margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
border: 1px solid var(--teal, #11ADB4); color: var(--teal, #11ADB4); background: #fff;
transition: transform .18s ease, background .18s ease, color .18s ease;
}
.cotacao-page .cot-resposta-bloco > summary:hover .cot-bloco-chevron { background: rgba(17,173,180,.10); }
.cotacao-page .cot-resposta-bloco[open] > summary .cot-bloco-chevron {
transform: rotate(180deg); background: var(--teal, #11ADB4); color: #fff;
}
.cotacao-page .cot-resposta-form { padding: 0 16px 16px; }
.cotacao-page .cot-itens-table-wrap,
.cotacao-page .cot-mtx-wrap { overflow-x: auto; }
.cotacao-page .cot-itens-table,
.cotacao-page .cot-mtx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cotacao-page .cot-itens-table th,
.cotacao-page .cot-itens-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cotacao-page .cot-input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.cotacao-page .cot-input-sm { max-width: 90px; }
.cotacao-page .cot-mtx-table th,
.cotacao-page .cot-mtx-table td { padding: 10px 10px; border: 1px solid var(--line); vertical-align: top; text-align: center; }
.cotacao-page .cot-mtx-prod { text-align: left; min-width: 160px; background: #f8fafc; }
.cotacao-page .cot-mtx-forn { min-width: 130px; }
.cotacao-page .cot-mtx-sub { font-size: 11px; font-weight: 400; }
.cotacao-page .cot-mtx-preco { font-weight: 700; }
.cotacao-page .cot-mtx-best { background: linear-gradient(90deg, rgba(143,203,58,.16), rgba(17,173,180,.16)); }
.cotacao-page .cot-mtx-venc { background: rgba(143,203,58,.12); }
.cotacao-page .cot-mtx-indisp { color: #b91c1c; font-size: 12px; }
.cotacao-page .cot-mtx-extras { font-size: 11px; }
.cotacao-page .cot-mtx-totalrow td { background: #f1f5f9; }
/* mobile-first: tabela de itens vira cards ≤680px */
@media (max-width: 680px) {
.cotacao-page .cot-itens-table,
.cotacao-page .cot-itens-table thead,
.cotacao-page .cot-itens-table tbody,
.cotacao-page .cot-itens-table tr,
.cotacao-page .cot-itens-table td { display: block; width: 100%; box-sizing: border-box; }
.cotacao-page .cot-itens-table thead { display: none; }
.cotacao-page .cot-itens-table tr {
border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin-bottom: 10px; background: #fbfdfe;
}
.cotacao-page .cot-itens-table td { border: 0; padding: 5px 4px; display: flex; gap: 10px; align-items: center; }
.cotacao-page .cot-itens-table td::before {
content: attr(data-label); font-weight: 700; color: #51637a; font-size: 12px; flex: 0 0 92px;
}
.cotacao-page .cot-itens-table td:first-child::before { content: ''; flex: 0; }
.cotacao-page .cot-itens-table td:first-child { display: block; }
.cotacao-page .cot-input-sm { max-width: none; }
.cotacao-page .cot-sugestao-card { flex-direction: column; align-items: stretch; }
}
/* ── Card Wizard reutilizável (swipe de cards) — ver static/js/card_wizard.js ──
Espelha o switcher do PDV (.pdv-*) num namespace genérico .wiz-* pra reuso
em Transporte, Produção etc. */
.wiz-wizard { padding: 0; overflow: visible; }
.wiz-switch {
display: flex; gap: 6px; padding: 12px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, #f8fbfc, #fff); border-radius: var(--radius) var(--radius) 0 0;
position: sticky; top: 0; z-index: 6; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.wiz-switch button {
flex: 1 1 0; min-width: max-content; border: 1px solid var(--line); background: #fff;
color: var(--text-muted, #627385); border-radius: 10px; padding: 9px 12px; font-weight: 700;
font-size: .85rem; cursor: pointer; white-space: nowrap; display: flex; align-items: center;
justify-content: center; gap: 7px; transition: background .15s, color .15s, border-color .15s;
}
.wiz-switch button:hover { color: var(--text); }
.wiz-switch button[aria-selected="true"] { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(17,173,180,.22); }
.wiz-step-num {
flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #eef2f6; color: #627385;
font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;
}
.wiz-switch button[aria-selected="true"] .wiz-step-num { background: rgba(255,255,255,.28); color: #fff; }
.wiz-viewport { position: relative; overflow: hidden; }
[data-wizard-viewport] { position: relative; }
/* overflow só quando o wizard está "engajado" (gate por media) — assim um kanban
pode ser swipe no mobile e voltar a rolar horizontalmente no desktop. */
[data-wizard-viewport].wiz-vp-engaged { overflow: hidden; }
[data-wizard-viewport].wiz-animating { transition: height .28s ease; }
/* desktop de um wizard mobile-only (data-wizard-media): esconde as abas */
.wiz-disengaged > [data-wizard-switch] { display: none; }
.wiz-panel { padding: 18px 20px; }
.wiz-panel[hidden] { display: none; }
[data-wizard-panel] { touch-action: pan-y; } /* horizontal = swipe; vertical = rolagem */
[data-wizard-panel] .table-wrap { touch-action: auto; } /* tabelas largas rolam sozinhas */
/* estados de arraste/transição standalone — funcionam com qualquer classe de
painel (.wiz-panel do Transporte/Produção ou .pdv-panel do PDV migrado) */
.wiz-drag { z-index: 1; will-change: transform, opacity; }
.wiz-incoming { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; display: block !important; will-change: transform, opacity; }
[data-wizard].wiz-grabbing, [data-wizard].wiz-grabbing * { cursor: grabbing; user-select: none; }
.wiz-panel .section-head { margin-top: 0; }
.wiz-panel-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.wiz-panel-nav.end { justify-content: flex-end; }
.wiz-panel-nav .wiz-prev { color: var(--text-muted, #627385); border: 1px solid var(--line); background: #fff; font-weight: 600; }
.wiz-panel-nav .wiz-prev:hover { color: var(--text); }
.wiz-panel-nav .wiz-next { box-shadow: 0 8px 20px rgba(17,173,180,.22); }
/* dica (hint) no topo de cada card do wizard */
.wiz-hint { margin: 0 0 14px; font-size: .82rem; color: var(--text-muted, #627385);
background: #f3f8f9; border: 1px solid var(--line); border-left: 3px solid var(--primary, #11ADB4);
border-radius: 8px; padding: 8px 11px; line-height: 1.35; }
@keyframes wizSlideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes wizSlideInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
.wiz-anim-right { animation: wizSlideInRight .26s ease; }
.wiz-anim-left { animation: wizSlideInLeft .26s ease; }
@media (prefers-reduced-motion: reduce) { .wiz-anim-right, .wiz-anim-left { animation: none; } }
@media (max-width: 680px) {
.wiz-switch { gap: 4px; padding: 8px; }
.wiz-switch button { font-size: .76rem; padding: 8px 9px; gap: 5px; }
.wiz-panel { padding: 14px; }
}
/* ── Modal de "do dia" reutilizável (igual relatório do PDV) ─────────────── */
.report-modal-overlay { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,.55);
display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.report-modal-overlay.open { display: flex; }
/* min-width:0 = box (flex item do overlay) encolhe até o viewport; sem isso o
min-width:auto a infla até o min-content (botões nowrap) e estoura a tela. */
.report-modal-box { position: relative; width: min(1100px, 100%); min-width: 0; max-height: 92vh; overflow-y: auto; margin: auto; }
.report-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px;
border: 1px solid var(--line); background: #fff; color: var(--text-muted, #627385); font-size: 1rem; cursor: pointer; z-index: 2; }
.report-modal-close:hover { background: var(--danger, #cf222e); color: #fff; }
@media (max-width: 680px) {
/* Só rolagem VERTICAL no mobile — nada de scroll lateral. */
.report-modal-overlay { padding: 0; overflow-x: hidden; }
.report-modal-box { max-height: 100vh; min-height: 100vh; border-radius: 0; width: 100%; max-width: 100vw; min-width: 0; overflow-x: hidden; }
.report-modal-box .table-wrap { overflow-x: hidden; }
.report-modal-box .report-table tbody tr td { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
.report-modal-box .report-table tbody tr td[data-omie-cr-cell],
.report-modal-box .report-table tbody tr td:last-child {
grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
}
.report-modal-box .report-table tbody tr td[data-omie-cr-cell] .btn,
.report-modal-box .report-table tbody tr td:last-child .btn { flex: 0 0 auto; }
.report-modal-box .report-table tbody tr td[data-omie-cr-cell]::before,
.report-modal-box .report-table tbody tr td:last-child::before { flex: 1 0 100%; }
}
/* ── Fix mobile: tabelas com 1ª coluna = DATA/HORA (almoxarifado/cautela) ──────
A regra genérica `.content-area .card table td:first-child` (≤768px) deixa a 1ª
coluna quebrar (assume rótulo curto) e mantém as demais em nowrap. Quando a 1ª
coluna é a data e a 2ª é um nome longo, a data colapsava e quebrava letra a
letra. Aqui invertemos: a data fica numa linha; Colaborador/Item é que quebram. */
@media (max-width: 768px) {
.content-area .card table.hist-table--dt th:first-child,
.content-area .card table.hist-table--dt td:first-child {
white-space: nowrap !important; max-width: none !important; word-break: normal !important;
}
.content-area .card table.hist-table--dt td:nth-child(2),
.content-area .card table.hist-table--dt td:nth-child(3) {
white-space: normal !important; word-break: break-word;
}
}
/* ── Checkbox mobile-safe (.vk-check) — PADRÃO do app ─────────────────────────
Substitui o antigo "checkbox + texto ao lado" que estourava no celular. A
caixa tem tamanho fixo (flex:0 0 auto) e o rótulo quebra normalmente
(min-width:0). Use SEMPRE este padrão pra checkboxes com rótulo.
Markup:
*/
.vk-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; width: 100%; min-width: 0; }
.vk-check > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.vk-check-box { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
border: 2px solid var(--line, #cbd5e1); background: #fff; display: inline-flex;
align-items: center; justify-content: center; transition: background .15s, border-color .15s; }
.vk-check > input:checked + .vk-check-box { background: var(--brand-grad); border-color: transparent; }
.vk-check > input:checked + .vk-check-box::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; }
.vk-check > input:focus-visible + .vk-check-box { outline: 2px solid #5b8def; outline-offset: 2px; }
.vk-check-label { min-width: 0; font-size: .9rem; line-height: 1.3; color: var(--text, #1f2937); }
/* ── mobile-card-table dentro de .content-area ────────────────────────────────
A regra mobile genérica (.content-area .card table td { white-space:nowrap })
força nowrap; em modo card (≤680px) os valores precisam quebrar. */
@media (max-width: 680px) {
.content-area .card .mobile-card-table tbody tr td,
.content-area .card .mobile-card-table tbody tr td:first-child {
white-space: normal !important; max-width: none !important; word-break: break-word;
}
/* Regras cadastradas: célula de ações ocupa a linha toda. */
.mobile-card-table.cr-rules-table tbody tr td.cr-actions-cell { grid-column: 1 / -1; }
.mobile-card-table.cr-rules-table tbody tr td.cr-actions-cell::before { display: none; }
.mobile-card-table.cr-rules-table tbody tr td.cr-actions-cell .inline-actions { width: 100%; }
}
/* Wizard de Regras Comerciais: cada passo contém um ou mais
próprios — então o painel usa padding enxuto e empilha os cards com gap. */
.cr-wizard .wiz-panel { padding: 10px; }
/* :not([hidden]) é essencial: display:flex sem isso vence o .wiz-panel[hidden]
(mesma especificidade, vem depois) e mostrava TODOS os painéis ao mesmo tempo. */
.cr-wizard .wiz-panel:not([hidden]) { display: flex; flex-direction: column; gap: 12px; }
.cr-wizard .wiz-panel-nav { margin-top: 2px; }
/* Nav do wizard: prev/next sempre LADO A LADO (não empilha). No mobile cada um
ocupa metade e o texto trunca com … se não couber — em vez de escapar/quebrar. */
.wiz-panel-nav .btn { white-space: nowrap; }
/* botão "+ Adicionar …" cresce em vez de deixar o texto escapar por baixo */
.btn-plus { height: auto; min-height: 40px; white-space: normal; line-height: 1.2; max-width: 100%; }
/* Card de opção (estilo do passo Restrições): checkbox + título + descrição numa
caixa com borda — usado nas permissões fiscais do passo Avançado. */
.cr-opt-card { padding: 12px 14px; border: 1px solid var(--line, #e2e8f0);
border-left: 3px solid var(--primary, #11adb4); border-radius: 10px; background: #f8fbff; align-items: flex-start; }
.cr-opt-card .vk-check-label { display: flex; flex-direction: column; gap: 2px; }
.cr-opt-card .vk-check-label strong { font-size: 14px; }
.cr-opt-card .vk-check-label small { font-size: 12px; color: #6b7280; line-height: 1.35; }
@media (max-width: 680px) {
/* nav: metade/metade, trunca se preciso */
.wiz-panel-nav .btn { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis;
padding: 10px 8px; font-size: .82rem; }
/* Tabela de materiais (Regras Comerciais): empilha cada campo em largura total
no mobile — cabe o "Preço Omie", o preço e o "% desc." sem espremer. */
.cr-mat-table.mobile-card-table tbody tr { grid-template-columns: 1fr; }
.cr-mat-table input:not([type="checkbox"]) { width: 100% !important; }
}
/* ── Toggle "Tabela / Cards" (table_cards.js) — qualquer tabela do Dashboard ──
Card-view NÃO depende de media query: vale em qualquer largura (o usuário
escolhe). Os !important vencem as regras mobile genéricas de tabela. */
.tbl-view-toggle { display: inline-flex; gap: 4px; margin: 8px 0; background: var(--surface-2, #f4f6f8);
padding: 4px; border-radius: 9px; }
.tbl-view-toggle button { border: none; background: transparent; padding: 5px 11px; border-radius: 7px;
font-size: .78rem; font-weight: 700; color: var(--text-muted, #64748b); cursor: pointer; }
.tbl-view-toggle button.active { background: var(--brand-grad); color: #fff; }
.tbl-cards { display: block !important; width: 100% !important; min-width: 0 !important; }
.tbl-cards thead { display: none !important; }
.tbl-cards tbody { display: block; width: 100%; }
.tbl-cards tbody tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px 12px; padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
margin-bottom: 10px; background: #fff; }
.tbl-cards tbody tr td {
display: flex !important; flex-direction: column; gap: 2px; padding: 0 !important; border: none !important;
min-width: 0 !important; max-width: none !important; white-space: normal !important;
position: static !important; box-shadow: none !important; text-align: left !important; height: auto !important;
}
.tbl-cards tbody tr td::before {
content: attr(data-label); font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--text-soft, #94a3b8);
}
.tbl-cards tbody tr td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: .95rem; }
/* a 1ª célula É o título do card — não repetir o rótulo da coluna ("Linha" etc.) */
.tbl-cards tbody tr td:first-child::before { display: none; }
/* célula sem rótulo (ações) ocupa a linha toda e não mostra label vazio */
.tbl-cards tbody tr td:not([data-label])::before { display: none; }
.tbl-cards tbody tr td:not([data-label]) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px; }
/* DRE: ocultar colunas de comparativo (M-1 / Δ MoM / M-12 / Δ YoY = 3ª em diante)
quando o usuário desmarca "Mostrar comparativo". Vale na tabela e no card-view. */
.dre-table.dre-hide-compare th:nth-child(n+3),
.dre-table.dre-hide-compare td:nth-child(n+3) { display: none !important; }
/* Árvores/hierarquias no mobile (DRE árvore, página Árvore, Departamento):
as linhas (summary) quebram em vez de espremer e o % verboso some — fica o valor. */
@media (max-width: 680px) {
.content-area .card details > summary { flex-wrap: wrap; }
.content-area .card details > summary > div { min-width: 0; }
.dre-pct { display: none !important; }
/* Departamento: nome em cima, valores (receita/custo/resultado) embaixo. */
.dept-row { grid-template-columns: 1fr !important; gap: 4px 8px !important; }
.dept-row > div:last-child { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; font-size: .8rem !important; }
}
/* Overlay de navegação (brand_loaders.js): aparece ao clicar num link interno
e fica até a página nova carregar — cobre páginas lentas (Fluxo de Caixa/DRE
que renderizam batendo no Omie). */
.vectra-nav-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(15, 23, 32, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.vectra-nav-overlay.on { opacity: 1; pointer-events: all; }
.vectra-nav-overlay .vload-label { color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .01em; }
/* Paginador de tabela dentro de cards (table_paginate.js) */
.tbl-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; }
.tbl-pager button { border: 1px solid var(--line, #d1d9e0); background: #fff; color: #1c3040;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1; }
.tbl-pager button:disabled { opacity: .4; cursor: default; }
.tbl-pager .tbl-pager-info { font-size: .8rem; color: #6b7d91; font-variant-numeric: tabular-nums; }