/* ===================================================================== ODEM BRASIL VENDAS 2.0 — base.css Reset, elementos HTML e layout do shell (topbar + sidebar + content). Depende de tokens.css. Nenhum valor de cor/espacamento hardcoded. ===================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); } h1 { font-size: var(--fs-xl); } h2 { font-size: var(--fs-lg); } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } /* Numeros e valores monetarios usam a face mono para alinhamento visual */ .mono, .num { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } /* Acessibilidade: foco de teclado visivel e consistente */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* Utilitario para leitores de tela */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } /* --------------------------------------------------------------------- Layout do shell da aplicacao [data-device] no alterna entre desktop (sidebar) e mobile (cards). --------------------------------------------------------------------- */ #app { min-height: 100vh; } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; } .topbar { grid-area: topbar; display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-5); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } /* Botao Menu abre a sidebar off-canvas: so faz sentido no mobile. No desktop a sidebar e permanente, entao o botao fica oculto. */ body[data-device="desktop"] .topbar [data-acao="menu"] { display: none; } .sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); gap: var(--sp-1); overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3) var(--sp-5); } .content { grid-area: content; padding: var(--sp-5); max-width: var(--content-max); width: 100%; overflow-y: auto; } /* Mobile: sidebar vira off-canvas; layout empilha */ body[data-device="mobile"] .app-shell { grid-template-columns: 1fr; grid-template-areas: "topbar" "content"; } body[data-device="mobile"] .sidebar { position: fixed; inset: 0 auto 0 0; width: min(84vw, var(--sidebar-w)); transform: translateX(-100%); transition: transform var(--dur-base) var(--ease); z-index: calc(var(--z-modal) - 1); box-shadow: var(--shadow-lg); } body[data-device="mobile"] .sidebar.open { transform: translateX(0); } body[data-device="mobile"] .content { padding: var(--sp-4); } /* --------------------------------------------------------------------- Rodape da sidebar e tela de acesso (introduzidos na consolidacao) --------------------------------------------------------------------- */ .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); } .tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); }