/* ========================================================================== ATTELIQ — Sistema de Gestao Paleta oficial da marca (mesma da landing — ver atteliq/landing/css/style.css): #260729 tinta · #495168 acento · #333949 acento escuro #D8CCB2 creme · #DFDBD0 areia · #F5F5F5 neutro Serifada Fraunces nos titulos, Inter no corpo. ========================================================================== */ :root { --verde: #260729; --verde-claro: #3d1543; --verde-fundo: #1a0419; --dourado: #495168; --dourado-escuro: #333949; --creme: #d8ccb2; --areia: #dfdbd0; --neutro: #f5f5f5; --grafite: #252525; --texto: #252525; --texto-suave: #6b6b66; --texto-fraco: #9a9a94; --borda: #e4e1d9; --branco: #ffffff; --sucesso: #1f7a5c; --sucesso-bg: #e8f5f0; --alerta: #a67413; --alerta-bg: #fdf5e3; --perigo: #a63d3d; --perigo-bg: #fbeded; --info-bg: #eef3f3; --raio: 12px; --raio-sm: 8px; --sombra: 0 1px 2px rgba(38, 7, 41, 0.05), 0 4px 16px rgba(38, 7, 41, 0.06); --sombra-alta: 0 12px 40px rgba(38, 7, 41, 0.16); --serif: "Fraunces", "Hoefler Text", Georgia, serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; --lateral: 250px; } /* Garante que o atributo `hidden` sempre esconda, mesmo em elementos cuja classe define `display` (ex.: .btn usa display:inline-flex) — sem isso, a regra de `display` da classe vence a regra padrao `[hidden]{display:none}` do navegador e o elemento continua aparecendo. */ [hidden] { display: none !important; } /* Temas de aparencia — trocam so as cores de destaque (barra lateral, botoes, links). Aplicado via [data-tema] na tag , escolhido em Configuracoes -> Aparencia e salvo pro usuario. */ :root[data-tema="azul"] { --verde: #0b2545; --verde-claro: #123a63; --verde-fundo: #081b33; --dourado: #7fa8c9; --dourado-escuro: #3f6a8a; --creme: #eef4f9; } :root[data-tema="vinho"] { --verde: #4a1220; --verde-claro: #6b1f30; --verde-fundo: #330d16; --dourado: #d4a373; --dourado-escuro: #8a5a2f; --creme: #fdf3ec; } :root[data-tema="grafite"] { --verde: #1c1c1c; --verde-claro: #2e2e2e; --verde-fundo: #121212; --dourado: #c9a227; --dourado-escuro: #8a6d1a; --creme: #f7f5ef; } :root[data-tema="roxo"] { --verde: #2e1a47; --verde-claro: #432966; --verde-fundo: #1f1130; --dourado: #c9a7e0; --dourado-escuro: #7c5a99; --creme: #f5f0fa; } :root[data-tema="petroleo"] { --verde: #0d3b3b; --verde-claro: #145252; --verde-fundo: #082727; --dourado: #6fc2b4; --dourado-escuro: #2e7d70; --creme: #eafaf7; } :root[data-tema="terracota"] { --verde: #5c2c1d; --verde-claro: #7a3c28; --verde-fundo: #401e13; --dourado: #e0a370; --dourado-escuro: #a15c34; --creme: #fdf1e7; } :root[data-tema="rose"] { --verde: #5c2a3a; --verde-claro: #7a3a4e; --verde-fundo: #401d28; --dourado: #e8b4c8; --dourado-escuro: #a8607d; --creme: #fdf0f4; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--texto); background: var(--neutro); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } /* ------------------------------------------------------------ layout base */ /* Escondida ate o JS confirmar a sessao (ver app.js: so fica visivel logo antes de navegar('painel')) — sem isso, o HTML estatico da casca do app aparece por uma fracao de segundo antes de /api/estado responder 401 e trocar pra tela de login ("flash de conteudo autenticado"). */ .app { display: flex; min-height: 100vh; visibility: hidden; } .app--pronto { visibility: visible; } .lateral { width: var(--lateral); flex: 0 0 var(--lateral); background: var(--verde); color: var(--areia); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; /* No celular, 100vh conta com a barra de endereco recolhida — enquanto ela esta visivel, o navegador "corta" o fim da barra lateral (o botao Configuracoes, que fica por ultimo) porque ela e position:fixed sem rolagem propria. 100dvh acompanha a altura real visivel; navegador sem suporte (raro hoje em dia) so ignora a linha e fica com o 100vh acima. */ height: 100dvh; z-index: 20; } .lateral__marca { padding: 16px 22px 12px; text-align: center; border-bottom: 1px solid rgba(216, 204, 178, 0.18); } .lateral__marca img { width: 58px; height: 58px; object-fit: cover; border-radius: 50%; background: var(--areia); } .lateral__marca span { display: block; margin-top: 8px; font-family: var(--serif); font-size: 17px; letter-spacing: 0.26em; color: var(--creme); text-transform: uppercase; } .nav { padding: 8px 12px; flex: 1; min-height: 0; overflow-y: auto; } .nav__grupo { padding: 10px 12px 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(223, 219, 208, 0.4); } .nav__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 12px; margin-bottom: 1px; border: 0; border-radius: var(--raio-sm); background: transparent; color: var(--areia); font-size: 14px; text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s; } .nav__item:hover { background: rgba(216, 204, 178, 0.12); color: var(--creme); } .nav__item--ativo { background: rgba(216, 204, 178, 0.18); color: var(--creme); font-weight: 600; box-shadow: inset 2px 0 0 var(--creme); } .nav__item svg { width: 17px; height: 17px; flex: none; opacity: 0.85; } .nav__badge { margin-left: 0; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--creme); color: var(--verde); font-size: 11px; font-weight: 700; text-align: center; } /* .btn define display:inline-flex, que nao centraliza com margin:auto — precisa vencer com duas classes (maior especificidade) pra virar um bloco de verdade e o "margin: 0 auto" funcionar tanto no PC quanto no celular. */ .btn.nav__nova-venda { display: flex; align-items: center; justify-content: center; width: fit-content; margin: 0 auto 8px; padding: 7px 14px; gap: 8px; } .nav__item[draggable="true"] { cursor: grab; /* Sem isso, segurar o dedo pra arrastar dispara o menu de "copiar/ selecionar" do iOS em vez de comecar o arraste por toque. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Feedback visual do item sendo arrastado (toque no celular). */ .nav__item--arrastando { opacity: 0.5; } /* Linha que indica exatamente onde o item vai cair ao soltar — usada tanto no arraste por mouse (PC) quanto por toque (celular). */ .nav__indicador-solta { height: 3px; margin: 2px 12px; border-radius: 2px; background: var(--creme); box-shadow: 0 0 4px rgba(216, 204, 178, 0.7); } .tema-swatch { /* Sem isso, o Safari mantem a aparencia nativa do