/* ============================================================================ Painel Rubinho AUTOMOB — design system LUMINOUS Fonte canônica dos valores: docs/mockups/2026-06-05-painel-luminous.html (aprovado 2026-06-05). Tema duplo: dark (default, identidade Luminous) + light (papel quente). O tema é trocado por data-theme no (static/theme.js) e persiste no localStorage. Regra de ouro do re-skin: NENHUMA classe de template muda de nome — os seletores existentes passam a consumir os tokens abaixo. Cores literais restantes no arquivo são deliberadamente invariantes de tema (sempre com comentário "pinned"). ============================================================================ */ /* ============================================================ LUMINOUS — tokens (dark = default) ============================================================ */ :root { color-scheme: dark; /* fundo */ --bg: #050505; --bg-raised: #0A0A0A; --surface: rgba(255,255,255,.05); --surface-2: rgba(255,255,255,.03); --surface-hov: rgba(255,255,255,.07); --line: rgba(255,255,255,.10); --line-soft: rgba(255,255,255,.05); --line-strong: rgba(255,255,255,.20); /* acento (laranja — o MESMO nos dois temas; accent-2 é a "tinta") */ --accent: #f97316; /* orange-500 */ --accent-2: #fb923c; /* orange-400 (texto/ícone sobre tint, no dark) */ --accent-tint: rgba(249,115,22,.12); --accent-ring: rgba(249,115,22,.25); --accent-glow: 0 4px 18px rgba(249,115,22,.35); /* texto */ --text-strong: #ffffff; --text: #ffffff; --text-2: #d4d4d4; /* neutral-300 */ --text-3: #a3a3a3; /* neutral-400 */ --text-4: #8a8a8a; /* meta, fine print */ /* sinais */ --ok: #4ade80; /* green-400 */ --ok-tint: rgba(74,222,128,.12); --ok-ring: rgba(74,222,128,.22); --ok-glow: 0 0 12px rgba(74,222,128,.55); --warn: #fcd34d; /* amber-300 */ --warn-tint: rgba(252,211,77,.10); --warn-ring: rgba(252,211,77,.22); --danger: #f87171; /* red-400 */ --danger-tint: rgba(248,113,113,.10); --danger-ring: rgba(248,113,113,.22); --wa-green: #25d366; /* chrome (sidebar / topbar / save-bar) */ --chrome-bg: rgba(8,8,8,.72); --chrome-bg-2: rgba(5,5,5,.78); --chrome-bg-3: rgba(10,10,10,.85); --active-bg: rgba(38,38,38,.8); --active-fx: inset 0 1px 0 rgba(255,255,255,.04); /* inputs / tabelas / fundo decorativo */ --input-bg: rgba(0,0,0,.4); --placeholder: #6b6b6b; --knob: #a3a3a3; /* bolinha do switch (off) */ --thead-bg: rgba(255,255,255,.02); --row-hov: rgba(255,255,255,.025); --grid-line: rgba(255,255,255,.02); --glow-1: rgba(124,45,18,.10); --glow-2: rgba(67,20,7,.20); --card-shadow: none; /* dark confia na borda */ --pop-shadow: 0 24px 48px -12px rgba(0,0,0,.7); /* popover/dialog */ --scroll-thumb: rgba(255,255,255,.08); /* bolha WhatsApp (preview de horários) */ --wa-bg: #1f2c34; --wa-text: #e9edef; --wa-strong: #ffffff; --wa-time: rgba(233,237,239,.45); --wa-shadow: 0 1px 2px rgba(0,0,0,.4); /* geometria + tipografia */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --sidebar-w: 252px; --font-body: 'Inter', system-ui, sans-serif; --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } /* ============================================================ LUMINOUS — tema claro (mesma personalidade, papel quente) ============================================================ */ [data-theme="light"] { color-scheme: light; --bg: #f7f6f3; --bg-raised: #ffffff; --surface: rgba(0,0,0,.04); --surface-2: rgba(0,0,0,.03); --surface-hov: rgba(0,0,0,.06); --line: rgba(0,0,0,.10); --line-soft: rgba(0,0,0,.06); --line-strong: rgba(0,0,0,.22); --accent-2: #ea580c; /* orange-600 — tinta AA sobre claro */ --accent-tint: rgba(249,115,22,.10); --accent-ring: rgba(249,115,22,.30); --accent-glow: 0 4px 14px rgba(249,115,22,.28); --text-strong: #171717; --text: #171717; --text-2: #404040; --text-3: #525252; --text-4: #737373; --ok: #15803d; /* green-700 */ --ok-tint: rgba(22,163,74,.10); --ok-ring: rgba(22,163,74,.25); --ok-glow: 0 0 10px rgba(22,163,74,.30); --warn: #a16207; /* amber-700 */ --warn-tint: rgba(180,83,9,.08); --warn-ring: rgba(180,83,9,.22); --danger: #dc2626; /* red-600 */ --danger-tint: rgba(220,38,38,.07); --danger-ring: rgba(220,38,38,.22); --wa-green: #1fa855; --chrome-bg: rgba(252,251,249,.82); --chrome-bg-2: rgba(247,246,243,.85); --chrome-bg-3: rgba(255,255,255,.92); --active-bg: #ffffff; --active-fx: 0 1px 3px rgba(0,0,0,.08); --input-bg: #ffffff; --placeholder: #9b9b9b; --knob: #ffffff; --thead-bg: rgba(0,0,0,.02); --row-hov: rgba(0,0,0,.025); --grid-line: rgba(0,0,0,.035); --glow-1: rgba(249,115,22,.06); --glow-2: rgba(249,115,22,.04); --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --pop-shadow: 0 12px 32px -8px rgba(0,0,0,.18); --scroll-thumb: rgba(0,0,0,.15); --wa-bg: #d9fdd3; /* verde claro oficial do WhatsApp */ --wa-text: #111b21; --wa-strong: #111b21; --wa-time: rgba(17,27,33,.45); --wa-shadow: 0 1px 1.5px rgba(0,0,0,.12); } /* ===================== base ====================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* atmosfera de fundo: glows ambiente + grade sutil (dark) / pontilhado (light) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(800px 480px at 50% -180px, var(--glow-1), transparent 70%), radial-gradient(600px 600px at 105% 105%, var(--glow-2), transparent 70%), linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 100% 100%, 100% 100%, 24px 24px, 24px 24px; pointer-events: none; } [data-theme="light"] body::before { background-image: radial-gradient(800px 480px at 50% -180px, var(--glow-1), transparent 70%), radial-gradient(600px 600px at 105% 105%, var(--glow-2), transparent 70%), radial-gradient(rgba(0,0,0,.05) 1px, transparent 1.2px); background-size: 100% 100%, 100% 100%, 22px 22px; } ::selection { background: rgba(249,115,22,.30); } /* pinned: acento, legível nos 2 temas */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 99px; border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 420; color: var(--text-strong); letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .35em; } h1 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 380; } h2 { font-size: 1.45rem; font-weight: 400; } h3 { font-size: 1.1rem; } p { margin: 0 0 1rem; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); } code { font-family: var(--font-mono); font-size: .85em; background: var(--surface); border: 1px solid var(--line-soft); color: var(--text-2); padding: .1em .45em; border-radius: 6px; } small { color: var(--text-3); } .muted { color: var(--text-3); } strong { color: var(--text-strong); } /* ===================== shell: sidebar + conteúdo ====================== */ /* BASE = MOBILE: conteúdo ocupa tudo; a sidebar é um drawer fora da tela */ .app-shell { min-height: 100dvh; } .sidebar { background: var(--chrome-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-right: 1px solid var(--line-soft); color: var(--text-2); padding: 1.4rem 1rem 1.2rem; display: flex; flex-direction: column; gap: 1.5rem; position: fixed; top: 0; left: 0; width: min(82vw, 300px); height: 100dvh; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform .25s ease; } .app-shell.nav-open .sidebar { transform: none; box-shadow: var(--pop-shadow); } /* botão hambúrguer (topbar mobile) + backdrop do drawer */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text-2); cursor: pointer; box-shadow: none; } .nav-toggle:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text-strong); box-shadow: none; } .nav-toggle svg { width: 22px; height: 22px; } .drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); /* pinned: véu do drawer, funciona nos 2 temas */ opacity: 0; pointer-events: none; transition: opacity .25s ease; } .app-shell.nav-open .drawer-backdrop { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .sidebar, .drawer-backdrop { transition: none; } } .brand-logo { display: block; padding: .2rem .4rem .9rem; border-bottom: 1px solid var(--line-soft); } .brand-logo img { width: 100%; max-width: 160px; /* arte é navy sobre transparente -> branca na sidebar do tema dark; no light a arte original aparece (override de tema abaixo) */ filter: brightness(0) invert(1); } [data-theme="light"] .brand-logo img { filter: none; } .brand-sub { font-family: var(--font-display); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-top: .55rem; padding-left: .1rem; } .nav { display: flex; flex-direction: column; gap: 4px; } .nav a { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; border-radius: 999px; color: var(--text-3); font-weight: 500; font-size: .92rem; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; } .nav a svg { width: 17px; height: 17px; flex: none; } .nav a:hover { background: var(--surface-2); color: var(--text-strong); } .nav a.active { background: var(--active-bg); color: var(--text-strong); border-color: var(--line-soft); box-shadow: var(--active-fx); } .nav a.active::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; margin-right: -4px; } .sidebar-foot { margin-top: auto; font-size: .8rem; color: var(--text-4); border-top: 1px solid var(--line-soft); padding-top: .9rem; } .sidebar-foot .foot-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .sidebar-foot .foot-id { min-width: 0; } .sidebar-foot .who { color: var(--text-strong); font-weight: 500; font-size: .85rem; } .sidebar-foot .role { display: inline-block; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); margin-left: .4rem; } .sidebar-foot form { margin: .7rem 0 0; } .sidebar-foot form button { width: 100%; border-radius: 999px; } /* toggle de tema (sol no dark, lua no light — visibilidade via CSS) */ .theme-toggle { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 999px; background: transparent; border: 1px solid var(--line); color: var(--text-3); cursor: pointer; padding: 0; min-height: 0; /* não deixa o min-height de toque (44px) ovalar o botão */ box-shadow: none; transition: border-color .15s, color .15s; } .theme-toggle:hover { background: transparent; border-color: var(--line-strong); color: var(--text-strong); box-shadow: none; } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } /* topbar + conteúdo */ .content { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line-soft); background: var(--chrome-bg-2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; } .topbar .eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); /* trunca: hambúrguer + voltar + crumb precisam caber em 390px */ min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* voltar padrão das páginas de sub-nível (declarado via {% block back_url %}) */ .topbar-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; margin-left: -.35rem; /* compensa o respiro óptico do chevron */ border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text-2); transition: background .15s, color .15s, border-color .15s; } .topbar-back:hover { background: var(--surface-2); border-color: var(--line); color: var(--text-strong); } .topbar-back svg { width: 20px; height: 20px; } main.page { padding: 1.25rem 1rem 2.5rem; max-width: 100%; width: 100%; } /* tablet */ @media (min-width: 640px) { .topbar { padding: .9rem 1.5rem; } main.page { padding: 1.5rem 1.5rem 3rem; } } /* DESKTOP: a sidebar fixa volta, drawer/hambúrguer somem */ @media (min-width: 1024px) { .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; } .sidebar { position: sticky; top: 0; height: 100vh; width: auto; transform: none; z-index: auto; overflow: hidden; box-shadow: none; } .nav-toggle, .drawer-backdrop { display: none; } .topbar { padding: 1.1rem 2.2rem; } main.page { padding: 2rem 2.2rem 3rem; max-width: 1180px; } } /* ===================== componentes ====================== */ article, .card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.5rem; margin: 0 0 1.2rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--card-shadow); } article header { margin-bottom: .8rem; } hgroup { margin-bottom: 1.6rem; } hgroup p { color: var(--text-3); margin: 0; } /* mobile-first: 1 coluna; multi-coluna a partir de 640px */ .grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .grid { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } } .grid.cols-2 { grid-template-columns: 1fr; } @media (min-width: 480px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } } /* botões — default = CTA primário Luminous (gradiente laranja, o ÚNICO glow) */ button, a[role="button"], .btn { font-family: var(--font-body); font-weight: 500; font-size: .86rem; letter-spacing: .01em; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .58rem 1.25rem; border-radius: 999px; border: 1px solid transparent; /* pinned: gradiente da marca + texto branco, IGUAIS nos dois temas */ background: linear-gradient(to right, #ea580c, #f97316, #f59e0b); border-top-color: rgba(255,255,255,.25); color: #ffffff; box-shadow: var(--accent-glow); cursor: pointer; transition: filter .15s, transform .08s, background .15s, box-shadow .15s, border-color .15s, color .15s; text-decoration: none; line-height: 1.2; } button:hover, a[role="button"]:hover, .btn:hover { filter: brightness(1.08); color: #ffffff; /* pinned */ } button:active, a[role="button"]:active { transform: translateY(1px); } /* secundário / outline (Pico-compat): vidro discreto */ .secondary, button.secondary, a[role="button"].secondary { background: var(--surface); color: var(--text-2); border-color: var(--line); box-shadow: none; } .secondary:hover, button.secondary:hover, a[role="button"].secondary:hover { background: var(--surface-hov); color: var(--text-strong); border-color: var(--line-strong); filter: none; } .outline, button.outline, a[role="button"].outline { background: transparent; color: var(--text-2); border-color: var(--line); box-shadow: none; } .outline:hover, button.outline:hover, a[role="button"].outline:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--text-strong); filter: none; } .contrast, button.contrast, a[role="button"].contrast { background: var(--accent); border-color: var(--accent); color: #ffffff; /* pinned: branco sobre o laranja nos 2 temas */ box-shadow: none; } .contrast:hover, button.contrast:hover { filter: brightness(1.1); color: #ffffff; } /* Pico-compat: "outline contrast" = vazado com TINTA de acento (ênfase), não o CTA sólido — senão toda linha de tabela ganha botão laranja cheio (QA 2026-06). */ .outline.contrast, button.outline.contrast, a[role="button"].outline.contrast { background: transparent; color: var(--accent-2); border-color: var(--accent-ring); box-shadow: none; } .outline.contrast:hover, button.outline.contrast:hover, a[role="button"].outline.contrast:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-2); filter: none; } /* CTA âmbar legado (alias do contrast) */ .btn-amber { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: none; } .btn-amber:hover { filter: brightness(1.1); color: #ffffff; } /* formulários */ label { display: block; font-weight: 500; color: var(--text-2); margin-bottom: .9rem; font-size: .85rem; } input, select, textarea { font-family: var(--font-body); font-size: .95rem; width: 100%; margin-top: .35rem; padding: .58rem .75rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); transition: border-color .15s, box-shadow .15s, background .15s; } input::placeholder, textarea::placeholder { color: var(--placeholder); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-tint); } input[type="search"] { min-width: 200px; } input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); } textarea { resize: vertical; line-height: 1.5; } select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } [data-theme="light"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* tabelas */ table { width: 100%; border-collapse: collapse; font-size: .9rem; } thead th { text-align: left; font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--thead-bg); } tbody td { padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; color: var(--text-2); } tbody tr { transition: background .12s; } tbody tr:hover { background: var(--row-hov); } /* ações compactas dentro de tabela */ .row-actions { display: flex; gap: .4rem; justify-content: flex-end; } td button, td a[role="button"], td .btn { padding: .38rem .8rem; font-size: .78rem; } td input, td select { margin-top: 0; padding: .4rem .55rem; font-size: .85rem; } /* status: ins=ativo, del=inativo viram chips */ ins, del { text-decoration: none; font-weight: 500; font-size: .76rem; padding: .16rem .6rem; border-radius: 7px; display: inline-block; border: 1px solid transparent; } ins { color: var(--ok); background: var(--ok-tint); border-color: var(--ok-ring); } del { color: var(--danger); background: var(--danger-tint); border-color: var(--danger-ring); } /* utilidades de layout (compat com os módulos) */ .nav-bar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; } .nav-bar .spacer, .spacer { flex: 1; } /* unbreak: o width:100% global de input/select (re-skin Luminous) empilhava os controles das toolbars .nav-bar (lojas/conversas/veículos) em largura cheia */ .nav-bar input, .nav-bar select { width: auto; margin-top: 0; } /* ============================================================ FILTROS v2 — referência: Veículos (rollout futuro nas demais listas) form .filter-bar[data-autofilter] (auto-aplica via static/filters.js; sem JS, Enter na busca + seguram o essencial) + .filter-chips (chips removíveis server-side, zero JS). ============================================================ */ .page-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .filter-bar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 .8rem; } .fb-search { position: relative; flex: 1 1 14rem; min-width: 14rem; } .fb-search svg { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-4); pointer-events: none; } .fb-search input[type="search"] { width: 100%; min-width: 0; margin-top: 0; padding-left: 2.2rem; } .filter-bar select { width: auto; min-width: 8.5rem; margin-top: 0; } /* inputs extras da barra (cidade/datas em Leads) — fora da busca, width:auto */ .fb-extra input { width: auto; min-width: 9rem; margin-top: 0; } .filter-bar .periodo { /* "de " / "até " */ display: inline-flex; gap: .35rem; align-items: center; margin: 0; font-size: .9rem; color: var(--text-3); white-space: nowrap; } .filter-bar .periodo input[type="date"] { min-width: 0; } .fb-toggle { display: none; } /* só aparece no mobile (vira o gatilho do sheet) */ .fb-extra { display: contents; } /* desktop: selects entram inline na própria barra */ .fb-actions { display: none; } /* Aplicar/Fechar só existem dentro do sheet mobile */ .fb-backdrop { display: none; } /* chips dos filtros ativos: pílula de vidro, hover = tinta de remoção */ .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; } .fc-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .82rem; font-weight: 500; line-height: 1.4; transition: border-color .15s, background .15s, color .15s; } .fc-chip span { color: var(--text-4); font-size: 1em; line-height: 1; } .fc-chip:hover { background: var(--danger-tint); border-color: var(--danger-ring); color: var(--danger); } .fc-chip:hover span { color: var(--danger); } .fc-clear { font-size: .82rem; color: var(--text-3); margin-left: .2rem; white-space: nowrap; } .fc-clear:hover { color: var(--text-strong); } @media (max-width: 639.98px) { .fb-toggle { display: inline-flex; } .fb-extra { display: none; } /* sheet aberto: bottom-sheet (mesma família do .row-menu .menu-pop) */ .fb-extra.open { display: flex; flex-direction: column; gap: .8rem; position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 1000; background: var(--bg-raised); border-top: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0; padding: 1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); box-shadow: var(--pop-shadow); max-height: 85vh; overflow-y: auto; animation: sheetUp .22s ease both; } .fb-extra.open::before { /* grabber */ content: ""; align-self: center; flex: none; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin-bottom: .2rem; } .fb-extra.open select { width: 100%; } .fb-extra.open input { width: 100%; } /* cidade etc. full-width */ .fb-extra.open .periodo { width: 100%; } /* rótulo + data lado a lado */ .fb-extra.open .periodo input[type="date"] { flex: 1 1 auto; width: auto; } .fb-extra.open .fb-actions { display: flex; gap: .6rem; margin-top: .2rem; } .fb-actions button { flex: 1; } .fb-backdrop.open { display: block; position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.5); /* pinned: véu, ok nos 2 temas */ } /* chips rolam na horizontal em vez de empilhar */ .filter-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .25rem; } .fc-chip { white-space: nowrap; flex: none; } } /* sinal ok/erro em texto de tabela (observabilidade) — tokens temáveis; os inline #c0392b/#1f8a4c antigos sumiam no fundo escuro */ .t-ok { color: var(--ok); } .t-bad { color: var(--danger); } /* flash / avisos */ .flash { padding: .7rem 1rem; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); color: var(--text-2); margin-bottom: 1rem; font-size: .92rem; } .flash.error { background: var(--danger-tint); border-color: var(--danger-ring); border-left-color: var(--danger); color: var(--danger); } /* grupo de checkboxes (tags, lojas): chips empilháveis, mobile-first */ .check-group { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; } .check-group label { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 500; font-size: .85rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--text-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .check-group label:has(input:checked) { border-color: var(--accent-ring); background: var(--accent-tint); color: var(--accent-2); } .check-group input[type="checkbox"] { width: auto; margin: 0; } /* checkbox solto inline (zero km) */ label.check-inline { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--text-2); } label.check-inline input[type="checkbox"] { width: auto; margin: 0; } details summary { cursor: pointer; color: var(--text-3); } /* dialogs nativos (wa-modal, copy-dialog) */ dialog { background: var(--bg-raised); color: var(--text); border: 1px solid var(--line); box-shadow: var(--pop-shadow); } dialog::backdrop { background: rgba(0,0,0,.55); } /* pinned: véu, ok nos 2 temas */ /* ===================== usuários: convite, avatar, chips, ações ============ */ /* bloco do link de convite gerado: input mono + botão copiar colado */ .copy-group { display: flex; margin-top: .4rem; } .copy-group input { flex: 1; margin-top: 0; border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); background: var(--input-bg); font-family: var(--font-mono); font-size: .82rem; color: var(--text-3); } .copy-group .btn-copy { border-radius: 0 var(--r-sm) var(--r-sm) 0; min-width: 104px; } .btn-copy.copied { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: none; } /* pinned: branco sobre verde */ .invite-meta { font-family: var(--font-mono); font-size: .76rem; color: var(--text-4); margin-top: .4rem; } /* avatar com iniciais */ .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--accent-2); font-weight: 600; font-size: .72rem; } .user-cell { display: flex; align-items: center; gap: .65rem; } .user-cell .nome { font-weight: 500; color: var(--text-strong); } .user-cell .email { font-size: .8rem; color: var(--text-4); } /* chip de papel */ .chip-role { display: inline-block; font-weight: 500; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; padding: .16rem .55rem; border-radius: 7px; border: 1px solid var(--line); color: var(--text-2); background: var(--surface); } .chip-role.admin { border-color: var(--accent-ring); color: var(--accent-2); background: var(--accent-tint); } .chip-you { display: inline-block; font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-2); border: 1px solid var(--accent-ring); border-radius: 5px; padding: .08rem .4rem; margin-left: .4rem; } tr.is-you { box-shadow: inset 3px 0 0 var(--accent); } /* disclosure de ações por linha ("Gerenciar") */ .row-menu { position: relative; } .row-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; font-weight: 500; font-size: .78rem; padding: .38rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); background: var(--surface-2); transition: border-color .15s, background .15s, color .15s; } .row-menu > summary::-webkit-details-marker { display: none; } .row-menu[open] > summary { background: var(--surface); border-color: var(--line-strong); color: var(--text-strong); } .row-menu .menu-pop { position: absolute; right: 0; z-index: 20; margin-top: .35rem; width: 300px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--pop-shadow); padding: .9rem; text-align: left; } .menu-pop .menu-sec { padding: .5rem 0; border-top: 1px solid var(--line-soft); } .menu-pop .menu-sec:first-child { border-top: 0; padding-top: 0; } .menu-pop .menu-lbl { font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); margin-bottom: .4rem; display: block; } /* seção de criar-direto (disclosure secundário) */ details.bloco > summary { cursor: pointer; color: var(--accent-2); font-weight: 500; font-size: .9rem; list-style: none; padding: .2rem 0; } details.bloco > summary:hover { color: var(--accent); } details.bloco > summary::-webkit-details-marker { display: none; } details.bloco > summary::before { content: "+ "; color: var(--accent); font-weight: 600; } details.bloco[open] > summary::before { content: "− "; } /* ===================== senha: olhinho + checklist ====================== */ .pwd-wrap { position: relative; display: block; margin-top: .35rem; } .pwd-wrap input { padding-right: 2.4rem; margin-top: 0; } .pwd-eye { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; min-width: 0; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; box-shadow: none; cursor: pointer; color: var(--text-4); line-height: 0; } .pwd-eye:hover { background: none; box-shadow: none; color: var(--text-strong); filter: none; } .pwd-eye svg { width: 17px; height: 17px; } .pwd-eye .i-eyeoff { display: none; } .pwd-eye.show .i-eye { display: none; } .pwd-eye.show .i-eyeoff { display: inline; } .pwd-rules { list-style: none; padding: 0; margin: .6rem 0 1rem; display: grid; gap: .25rem; } .pwd-rules li { font-size: .82rem; color: var(--text-4); display: flex; align-items: center; gap: .45rem; } .pwd-rules li::before { content: ""; width: 15px; height: 15px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-strong); background: transparent; transition: background .15s, border-color .15s; } .pwd-rules li.ok { color: var(--ok); } .pwd-rules li.ok::before { background: var(--ok); border-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: 11px; background-repeat: no-repeat; background-position: center; } /* ===================== login (split hero) ====================== */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr; } /* O herói é SEMPRE dark (identidade Luminous) nos DOIS temas — cores pinned. */ .auth-hero { background: radial-gradient(720px 440px at 50% -160px, rgba(124,45,18,.22), transparent 70%), radial-gradient(560px 560px at 110% 110%, rgba(67,20,7,.35), transparent 70%), #050505; /* pinned */ color: #d4d4d4; /* pinned */ border-right: 1px solid rgba(255,255,255,.06); /* pinned */ padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-hero::after { content: ""; position: absolute; width: 460px; height: 460px; right: -160px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.16), transparent 65%); /* pinned */ } .auth-hero img.logo { width: 220px; filter: brightness(0) invert(1); } /* pinned: herói sempre escuro */ .auth-hero .tagline { font-family: var(--font-display); font-size: 2rem; font-weight: 380; line-height: 1.15; color: #ffffff; max-width: 18ch; letter-spacing: -.02em; } /* pinned */ .auth-hero .tagline span { color: #fb923c; } /* pinned: laranja sobre o herói escuro */ .auth-hero .foot { font-size: .8rem; color: #8a8a8a; letter-spacing: .04em; } /* pinned */ .auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: transparent; } .auth-form .box { width: 100%; max-width: 360px; } .auth-form h1 { margin-bottom: .2rem; } .auth-form .lead { color: var(--text-3); margin-bottom: 1.6rem; } .auth-form button[type="submit"] { width: 100%; padding: .7rem; margin-top: .4rem; } /* botão-link "Sair" das telas de 2FA (o template não traz mais style inline: o color:#789 legado brigava com os dois temas) */ .auth-form form[action="/logout"] button { background: none; border: none; box-shadow: none; min-height: 0; padding: 0; color: var(--text-3); text-decoration: underline; font-size: .85rem; cursor: pointer; } .auth-form form[action="/logout"] button:hover { background: none; filter: none; color: var(--text-strong); } /* códigos de recuperação do 2FA: chips temáveis (antes: inline #0d1b2a/#ffc857) */ .recovery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: 1.2rem 0; } .recovery-grid code { text-align: center; padding: .45rem; letter-spacing: 1px; font-size: .95rem; background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--text-strong); /* é DADO crítico: tinta forte (AA), acento só na moldura */ border-radius: 6px; } @media (max-width: 760px) { .auth { grid-template-columns: 1fr; } .auth-hero { display: none; } } /* ===================== animação de entrada ====================== Só opacity+translate (sem blur do mockup): filter em ancestral viraria containing-block e quebraria os fixed/sticky internos (modal .vw, save bar). */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } main.page > * { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; } main.page > *:nth-child(2) { animation-delay: .05s; } main.page > *:nth-child(3) { animation-delay: .1s; } main.page > *:nth-child(4) { animation-delay: .15s; } @media (prefers-reduced-motion: reduce) { main.page > * { animation: none; } } /* ===================== editor markdown (EasyMDE) ====================== easymde.min.css carrega DEPOIS do app.css (link no template) — por isso os overrides usam .EasyMDEContainer como prefixo (especificidade maior). */ .EasyMDEContainer .CodeMirror { border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); font-family: var(--font-mono); font-size: .9rem; color: var(--text); background: var(--input-bg); } .EasyMDEContainer .CodeMirror-cursor { border-left: 1px solid var(--text); } .EasyMDEContainer .CodeMirror-selected { background: rgba(249,115,22,.22); } /* pinned: seleção acento */ .EasyMDEContainer .CodeMirror-placeholder { color: var(--placeholder); } /* tokens markdown do CodeMirror (default é azul/verde de tema claro) */ .EasyMDEContainer .cm-s-easymde .cm-header { color: var(--text-strong); } .EasyMDEContainer .cm-s-easymde .cm-quote { color: var(--ok); } .EasyMDEContainer .cm-s-easymde .cm-link { color: var(--accent-2); } .EasyMDEContainer .cm-s-easymde .cm-url { color: var(--text-3); } .EasyMDEContainer .cm-s-easymde .cm-string { color: var(--text-3); } .EasyMDEContainer .cm-s-easymde .cm-comment { color: var(--warn); } .EasyMDEContainer .editor-toolbar { border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--surface-2); } .EasyMDEContainer .editor-toolbar button { color: var(--text-2) !important; background: transparent; border: 1px solid transparent; border-radius: 8px; box-shadow: none; } /* ícones SVG próprios (knowledge_editor.js; sem FontAwesome — CSP/offline) */ .EasyMDEContainer .editor-toolbar button svg { width: 15px; height: 15px; vertical-align: -2px; pointer-events: none; } .EasyMDEContainer .editor-toolbar button.active, .EasyMDEContainer .editor-toolbar button:hover { background: var(--surface-hov); border-color: var(--line); filter: none; } .EasyMDEContainer .editor-toolbar i.separator { border-left: 1px solid var(--line); border-right: 1px solid transparent; } .EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side { background: var(--bg-raised); color: var(--text); border-color: var(--line); font-family: var(--font-body); } .EasyMDEContainer .editor-preview pre { background: var(--surface); color: var(--text-2); } .EasyMDEContainer .editor-preview h1, .EasyMDEContainer .editor-preview h2, .EasyMDEContainer .editor-preview-side h1, .EasyMDEContainer .editor-preview-side h2 { color: var(--text-strong); } .EasyMDEContainer .editor-statusbar { color: var(--text-4); } /* fullscreen herda o fundo do tema (default da lib é branco) */ .EasyMDEContainer .CodeMirror-fullscreen, .EasyMDEContainer .editor-toolbar.fullscreen { background: var(--bg-raised); } /* ===================== conversas (chat) ====================== */ .chat { display: flex; flex-direction: column; gap: .8rem; max-width: 820px; } .msg { display: flex; gap: .6rem; align-items: flex-end; } .msg .av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 600; font-size: .66rem; letter-spacing: .04em; } .msg .bubble { padding: .65rem .9rem; border-radius: 14px; max-width: 76%; font-size: .92rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; } .msg .bubble .who { display: block; font-size: .62rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .25rem; color: var(--text-4); } /* lead à esquerda: vidro neutro */ .msg.lead .av { background: var(--surface); border: 1px solid var(--line); color: var(--text-3); } .msg.lead .bubble { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); border-bottom-left-radius: 4px; } /* Rubinho à direita: tinta laranja */ .msg.bot { flex-direction: row-reverse; } .msg.bot .av { background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--accent-2); } .msg.bot .bubble { background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--text-2); border-bottom-right-radius: 4px; } .msg.bot .bubble .who { color: var(--accent-2); } /* ferramenta / sistema: faixa central discreta */ .msg.tool { justify-content: center; } .msg.tool .bubble { background: var(--surface-2); color: var(--text-3); font-family: var(--font-mono); font-size: .78rem; max-width: 92%; box-shadow: none; border: 1px dashed var(--line); } .msg.tool summary { cursor: pointer; color: var(--text-4); list-style: none; font-size: .76rem; letter-spacing: .02em; transition: color .15s; } .msg.tool summary:hover { color: var(--text-3); } .msg.tool summary::before { content: "🔧 "; } .msg.tool .tool-body { margin-top: .5rem; white-space: pre-wrap; line-height: 1.6; } /* ============================================================ HOME — cards unificados (stat + ação do módulo num card só) Substituem os antigos .stat + nav-cards. O "i" abre tooltip 100% CSS (attr(data-tip)): hover/focus mostram, blur esconde. ============================================================ */ .hub-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 640px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hub-grid { grid-template-columns: repeat(3, 1fr); } } .hub-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 0; } .hub-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; margin-bottom: .8rem; } .hub-title { margin: 0; font-family: var(--font-body); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); } .hub-tools { display: inline-flex; align-items: center; gap: .5rem; flex: none; } .hub-card .ic { width: 34px; height: 34px; padding: 7px; flex: none; border-radius: 10px; background: var(--accent-tint); border: 1px solid var(--accent-ring); color: var(--accent-2); } .hub-card .num { font-family: var(--font-display); font-size: clamp(2rem, 6.5vw, 2.4rem); font-weight: 400; letter-spacing: -.02em; color: var(--text-strong); line-height: 1; } .hub-card .lbl { color: var(--text-3); font-size: .88rem; margin: .35rem 0 1.1rem; } .hub-card .lbl small { color: var(--text-4); } .hub-cta { /* compacto, alinhado à esquerda, colado no pé do card */ margin-top: auto; padding: .45rem 1.1rem; font-size: .8rem; } /* "i" de informação + tooltip CSS puro (sem JS; CSP intacto). Touch: o tap foca/hover-a o botão e o tooltip abre; blur/Esc fecham sozinhos. */ .info-tip { position: relative; width: 26px; height: 26px; padding: 0; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 0; /* não deixa o min-height de toque (44px) ovalar o botão */ border-radius: 50%; background: transparent; border: 1px solid var(--line); color: var(--text-3); font-family: var(--font-mono); font-size: .72rem; font-weight: 500; box-shadow: none; cursor: help; } .info-tip:hover, .info-tip:focus { background: var(--surface-2); border-color: var(--line-strong); color: var(--text-strong); filter: none; box-shadow: none; } .info-tip::after { content: attr(data-tip); position: absolute; top: calc(100% + 10px); right: -8px; z-index: 30; width: max-content; max-width: 240px; padding: .55rem .7rem; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--pop-shadow); color: var(--text-2); font-family: var(--font-body); font-size: .78rem; font-weight: 400; line-height: 1.5; text-align: left; white-space: normal; opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity .12s ease, transform .12s ease; } .info-tip:hover::after, .info-tip:focus::after, .info-tip:focus-visible::after { opacity: 1; transform: none; } /* ============================================================================ ACESSIBILIDADE GLOBAL ============================================================================ */ :where(a, button, summary, [role="button"], input, select, textarea):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ============================================================================ MOBILE (<= 639px) — ajustes finos por componente ============================================================================ */ @media (max-width: 639.98px) { /* inputs 16px: evita o zoom automático do Safari iOS ao focar */ input, select, textarea { font-size: 16px; } /* cards um pouco mais justos pra ganhar largura útil */ article, .card { padding: 1.1rem 1rem; } /* alvos de toque confortáveis (>= 44px) */ button, a[role="button"], .btn { min-height: 44px; } .nav a { padding: .8rem .9rem; } .row-menu > summary, details.bloco > summary { min-height: 44px; display: inline-flex; align-items: center; } /* ---- TABELAS viram cards empilhados (.table-stack) ---- */ .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; } .table-stack tr { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--card-shadow); padding: .35rem .9rem .6rem; margin: 0 0 .8rem; } .table-stack tr:hover { background: var(--surface-2); } .table-stack td { border: 0; border-bottom: 1px solid var(--line-soft); padding: .55rem 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; align-items: center; justify-items: start; text-align: left; } .table-stack td:last-child { border-bottom: 0; } .table-stack td::before { content: attr(data-label); font-size: .64rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); } .table-stack td.cell-head { grid-template-columns: 1fr; border-bottom: 1px solid var(--line); padding-top: .2rem; } .table-stack td.cell-head::before { display: none; } .table-stack td.cell-action { grid-template-columns: 1fr; padding-top: .7rem; } .table-stack td.cell-action::before { display: none; } .table-stack td.cell-action > *, .table-stack td.cell-action .row-actions { width: 100%; } .table-stack td.cell-action .row-actions { display: flex; gap: .5rem; } .table-stack td.cell-action .row-actions > * { flex: 1; } /* ---- menu "Gerenciar" vira bottom-sheet ---- */ .row-menu .menu-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; margin: 0; border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; max-height: 85vh; overflow-y: auto; z-index: 1000; padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); box-shadow: var(--pop-shadow); animation: sheetUp .22s ease both; } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } } .row-menu[open] > summary::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; /* pinned: véu */ } .row-menu .menu-pop::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: -.3rem auto .8rem; } /* ---- filtros/paginação e copy-group empilhados ---- */ .nav-bar .spacer { display: none; } input[type="search"] { min-width: 0; } .copy-group { flex-direction: column; } .copy-group input { border-right: 1px solid var(--line); border-radius: var(--r-sm) var(--r-sm) 0 0; } .copy-group .btn-copy { width: 100%; min-width: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); } /* ações de card (conhecimento) full-width */ article .nav-bar { flex-direction: column; align-items: stretch; gap: .55rem; } article .nav-bar > a[role="button"], article .nav-bar > form, article .nav-bar > form button { width: 100%; } /* ---- senha: olhinho com alvo cheio ---- */ .pwd-wrap input { padding-right: 2.9rem; } .pwd-eye { top: 0; right: 0; bottom: 0; height: auto; width: 44px; } .pwd-eye svg { width: 19px; height: 19px; } .pwd-rules li { font-size: .9rem; } /* ---- EasyMDE: toolbar quebra linha, esconde side-by-side ---- */ .EasyMDEContainer .editor-toolbar { flex-wrap: wrap; padding: 4px 2px; } .EasyMDEContainer .editor-toolbar button { width: 40px; height: 38px; min-height: 0; margin: 0; } .EasyMDEContainer .editor-toolbar button.side-by-side { display: none; } .EasyMDEContainer .CodeMirror { font-size: .92rem; min-height: 300px; } .EasyMDEContainer .editor-preview, .EasyMDEContainer .editor-preview-side { padding: .8rem 1rem; font-size: .95rem; } /* ---- chat: bolhas mais largas + tool à prova de overflow ---- */ .chat { gap: .6rem; } .msg { gap: .4rem; } .msg .av { width: 26px; height: 26px; font-size: .58rem; } .msg .bubble { max-width: 86%; padding: .55rem .75rem; font-size: .9rem; } .msg.tool .bubble { max-width: 100%; } .msg.tool .tool-body { overflow-wrap: anywhere; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- auth (login/cadastro): respiro + box mais largo ---- */ .auth-form { padding: 1.5rem 1.25rem; align-items: flex-start; } .auth-form .box { max-width: 460px; } /* botões de formulário (Salvar/Cancelar) full-width */ main.page form .nav-bar > button[type="submit"], main.page form .nav-bar > a[role="button"] { flex: 1; } } /* logo da marca no topo do form de auth (some o hero no mobile) */ .auth-logo-mobile { display: none; /* no dark a arte navy precisa virar branca (mesmo truque da sidebar) */ filter: brightness(0) invert(1); } [data-theme="light"] .auth-logo-mobile { filter: none; } @media (max-width: 759.98px) { .auth-logo-mobile { display: block; width: 150px; margin: 0 auto 1.4rem; } } /* ===== Formulário em cards (veículos): largura contida + grid com spans ===== */ .form-narrow { max-width: 780px; } .form-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--card-shadow); min-width: 0; } .form-card > legend { font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); padding: 0 .15rem; margin-bottom: .9rem; } .field-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; } .field-grid > label { margin-bottom: 0; } @media (min-width: 640px) { .field-grid { grid-template-columns: repeat(12, 1fr); gap: 1rem 1.1rem; align-items: start; } .field-grid > .f-full { grid-column: 1 / -1; } .field-grid > .f-half { grid-column: span 6; } .field-grid > .f-narrow { grid-column: span 4; } .field-grid > .f-tiny { grid-column: span 2; align-self: end; } } .field-grid > label.check-inline { padding-bottom: .5rem; } .block-label { margin: .2rem 0 .55rem; } .field-hint { display: block; margin-top: .35rem; color: var(--text-4); font-size: .78rem; font-weight: 400; } /* barra de ações fixa no rodapé das telas de form */ .form-actions { position: sticky; bottom: 0; z-index: 4; margin-top: 1rem; padding: .85rem 0 .6rem; background: linear-gradient(to top, var(--bg) 72%, transparent); } /* ===== Picker de lojas: lista rolável escopada pela marca + busca ===== */ .store-picker { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); margin: 0 0 1rem; overflow: hidden; } .store-picker__bar { display: flex; gap: .6rem; align-items: center; padding: .55rem .7rem; border-bottom: 1px solid var(--line); background: var(--surface-2); } .store-picker__search { flex: 1; min-width: 0; margin: 0; } .store-picker__count { font-size: .8rem; color: var(--text-3); white-space: nowrap; } .store-picker__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .5rem .7rem; border-bottom: 1px solid var(--line); } .store-picker__tools button { padding: .35rem .7rem; font-size: .78rem; margin: 0; width: auto; } .store-picker__others { font-weight: 500; font-size: .82rem; margin: 0 0 0 auto; } .store-picker__list { max-height: 320px; overflow-y: auto; } .store-picker__empty { padding: .8rem .7rem; margin: 0; color: var(--text-3); } .store-row { display: flex; align-items: center; gap: .6rem; margin: 0; padding: .55rem .7rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-weight: 400; color: var(--text-2); } .store-row:last-child { border-bottom: 0; } .store-row:hover { background: var(--row-hov); } .store-row:has(input:checked) { background: var(--accent-tint); } .store-row:has(input:checked) .store-row__name { color: var(--text-strong); font-weight: 600; } .store-row input[type="checkbox"] { width: auto; margin: 0; flex: none; } .store-row__main { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .store-row__name { font-size: .9rem; } .store-row__meta { font-size: .78rem; color: var(--text-4); } /* ===== Combobox custom (Marca / Modelo): abre sempre, filtra, teclado ===== */ .combo { position: relative; } .combo > input { width: 100%; padding-right: 2.2rem; } .combo__toggle { position: absolute; top: 0; right: 0; height: 100%; width: 2.2rem; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; color: var(--text-3); cursor: pointer; font-size: .8rem; padding: 0; margin: 0; border-radius: 0; } .combo__toggle:hover { background: transparent; color: var(--text-strong); transform: none; filter: none; box-shadow: none; } .combo__list { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0; margin: 0; padding: .25rem; list-style: none; max-height: 280px; overflow-y: auto; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--pop-shadow); } .combo__list[hidden] { display: none; } .combo__opt { padding: .5rem .6rem; border-radius: 8px; cursor: pointer; font-size: .92rem; line-height: 1.2; color: var(--text-2); } .combo__opt:hover, .combo__opt.active { background: var(--accent-tint); color: var(--accent-2); } .combo__empty { padding: .55rem .6rem; color: var(--text-3); font-size: .85rem; } /* dois campos de ano lado a lado (somem quando 0km) */ .ano-grid { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; } .ano-grid > label { flex: 1; min-width: 130px; margin-bottom: 0; } /* ===== Wizard de seleção de veículo (Marca -> Modelo -> Versão) ===== */ .vw-field { display: flex; flex-direction: column; } .vw-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 46px; padding: .6rem .8rem; font-size: 16px; font-family: inherit; text-align: left; background: var(--input-bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; box-shadow: none; } .vw-trigger:hover { border-color: var(--line-strong); filter: none; } .vw-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .vw-trigger__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vw-trigger.is-empty .vw-trigger__label { color: var(--placeholder); } .vw-trigger__chevron { color: var(--text-3); flex: 0 0 auto; } body.vw-open { overflow: hidden; } .vw[hidden] { display: none; } .vw { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .vw__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); } /* pinned: véu */ .vw__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 440px; max-height: 80vh; background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--pop-shadow); overflow: hidden; } .vw__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); } .vw__title { margin: 0; font-family: var(--font-display); font-size: 1.05rem; color: var(--text-strong); } .vw__x { border: 0; background: transparent; color: var(--text-3); box-shadow: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .25rem; } .vw__x:hover { color: var(--text-strong); background: transparent; filter: none; box-shadow: none; } .vw__searchbar { padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); } .vw__search { width: 100%; font-size: 16px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--input-bg); color: var(--text); } .vw__search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .vw__list { list-style: none; margin: 0; padding: .35rem; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; } .vw__opt { display: block; width: 100%; text-align: left; font-size: 16px; font-family: inherit; color: var(--text-2); padding: .7rem .75rem; border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer; box-shadow: none; } .vw__opt:hover, .vw__opt:focus-visible, .vw__opt.active { background: var(--surface-hov); color: var(--text-strong); outline: none; box-shadow: none; filter: none; } .vw__opt--free { color: var(--accent-2); font-weight: 600; } .vw__opt--free:hover, .vw__opt--free:focus-visible { color: var(--accent); background: var(--accent-tint); } .vw__opt--skip { color: var(--text-3); font-style: italic; } .vw__empty { padding: 1rem .75rem; color: var(--text-3); font-size: .9rem; } .vw__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--line-soft); } .vw__back { font-size: .9rem; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; box-shadow: none; } .vw__back:hover { border-color: var(--line-strong); color: var(--text-strong); background: transparent; filter: none; } .vw__back[disabled] { opacity: .4; cursor: default; } .vw__stepind { font-size: .85rem; color: var(--text-4); } @media (max-width: 560px) { .vw { padding: 0; align-items: stretch; } .vw__panel { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; } } /* ===== Flags por loja (test-drive / showroom / sob encomenda) ===== */ .store-row__flags { display: none; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; padding-top: .4rem; border-top: 1px dashed var(--line); } .store-row__flags.is-visible { display: flex; } .store-flag { display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .15rem .55rem; font-size: .76rem; line-height: 1.2; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; user-select: none; } .store-flag input { margin: 0; accent-color: var(--accent); cursor: pointer; } .store-flag:has(input:checked) { color: var(--accent-2); border-color: var(--accent-ring); background: var(--accent-tint); font-weight: 600; } /* ===== horários por loja (stores/horarios.html) ===== 5 cards em camadas; dias SEMPRE em 1 coluna; alvos >= 44px; save sticky. */ /* Card 0 — header: loja + badge de status "agora" */ .hours-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .hours-head h1 { margin-bottom: .15em; } .hours-sub { color: var(--text-3); margin: 0; font-size: .9rem; } .hours-status { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding: .45rem .9rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 500; font-size: .9rem; color: var(--text-strong); white-space: nowrap; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; } .status-dot.st-aberta { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint), var(--ok-glow); } .status-dot.st-fechada { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); } .status-dot.st-semconfig { background: var(--text-4); box-shadow: 0 0 0 3px var(--surface); } .hours-cta { font-size: .85rem; font-weight: 600; margin-left: .35rem; white-space: nowrap; } /* "ir ao campo →" do flash de erro (âncora pro card que disparou a validação) */ .flash-anchor { font-weight: 600; margin-left: .5rem; white-space: nowrap; } /* chips de preset + "copiar de outra loja" */ .preset-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; } .chip { display: inline-flex; align-items: center; gap: .45rem; background: var(--accent-tint); color: var(--accent-2); border: 1px solid var(--accent-ring); border-radius: 999px; padding: .5rem 1rem; min-height: 44px; font-size: .82rem; font-weight: 500; box-shadow: none; } .chip:hover { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-2); box-shadow: none; filter: none; } .preset-row select { width: auto; margin: 0; min-height: 44px; font-size: .88rem; } .preset-hint { color: var(--text-4); font-size: .78rem; } .hours-banner { background: var(--warn-tint); border: 1px solid var(--warn-ring); border-left: 3px solid var(--warn); border-radius: var(--r-sm); padding: .65rem .9rem; font-size: .9rem; color: var(--text-2); margin: 0 0 1rem; } /* Card 1 — lista de dias (vertical SEMPRE) */ .day-list { display: flex; flex-direction: column; gap: .6rem; } .day-row { border: 1px solid var(--line); border-radius: var(--r-md); padding: .6rem .85rem; margin: 0; min-width: 0; } .day-head { display: flex; align-items: center; gap: .7rem; min-height: 44px; } .day-name { flex: 1; font-weight: 600; font-size: .95rem; color: var(--text-strong); } .day-state { font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); } /* switch puro-CSS (alvo de toque ~44px via input expandido) */ .switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; margin: 0; } .switch input { position: absolute; inset: -9px -7px; width: auto; height: auto; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .switch span { position: absolute; inset: 0; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); border-radius: 999px; transition: background .2s, box-shadow .2s; pointer-events: none; } .switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--knob); border-radius: 50%; transition: transform .2s, background .2s; } .switch input:checked + span { background: rgba(249,115,22,.20); /* pinned: trilho ON acento */ box-shadow: inset 0 0 0 1px var(--accent-ring); } .switch input:checked + span::after { transform: translateX(20px); background: var(--accent-2); } .switch input:focus-visible + span { box-shadow: inset 0 0 0 1px var(--accent-ring), 0 0 0 3px var(--accent-tint); } [data-theme="light"] .switch span { background: rgba(0,0,0,.14); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); } [data-theme="light"] .switch span::after { box-shadow: 0 1px 2px rgba(0,0,0,.28); } [data-theme="light"] .switch input:checked + span { background: rgba(249,115,22,.20); box-shadow: inset 0 0 0 1px var(--accent-ring); } @media (prefers-reduced-motion: reduce) { .switch span, .switch span::after { transition: none; } } /* corpo do dia (períodos + ações); fechado/modo-fechada some E desabilita */ .day-body { padding-top: .55rem; } .day-body.is-closed, .fer-body.is-closed, .ov-body.is-closed { display: none; } .periodo { display: flex; gap: .45rem; align-items: center; margin-bottom: .4rem; } .periodo input[type="time"] { margin: 0; max-width: 8.6rem; min-height: 44px; } .periodo span { color: var(--text-4); font-size: .88rem; } .icon-btn { width: 44px; height: 44px; padding: 0; flex: none; background: transparent; color: var(--text-3); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 1.1rem; line-height: 1; box-shadow: none; } .icon-btn:hover { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-ring); box-shadow: none; filter: none; } .day-actions { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; } .cap-hint { color: var(--text-4); font-size: .78rem; } .link-btn { background: transparent; border: none; color: var(--accent-2); padding: .55rem .15rem; min-height: 44px; font-size: .84rem; font-weight: 600; box-shadow: none; } .link-btn:hover { background: transparent; color: var(--accent); box-shadow: none; filter: none; } .link-btn:disabled { color: var(--text-4); cursor: not-allowed; } .hours-hint { margin: .4rem 0 .8rem; } .hours-empty { color: var(--text-3); font-size: .92rem; } /* radios fechada/especial (feriado + data especial) */ .modo-radios { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: .9rem; } .radio-line { display: inline-flex; align-items: center; gap: .5rem; margin: 0; min-height: 44px; font-weight: 500; color: var(--text-2); cursor: pointer; } .radio-line input { width: auto; margin: 0; accent-color: var(--accent); } /* Card 2 — próximos feriados */ .fer-title { margin-top: 1.2rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-4); } .fer-list { list-style: none; margin: 0; padding: 0; } .fer-list li { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); } .fer-list li:last-child { border-bottom: none; } .fer-info { font-size: .92rem; color: var(--text-2); } .fer-link { font-size: .84rem; font-weight: 500; white-space: nowrap; color: var(--accent-2); display: inline-flex; align-items: center; min-height: 44px; } .fer-link:hover { color: var(--accent); } /* preview "Como o Rubinho responde" — bolha WhatsApp temática. Desktop (>=1024px): coluna sticky ao lado dos cards; mobile = fluxo normal. */ .preview-wrap { margin: 0 0 1rem; } @media (min-width: 1024px) { .hours-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; } .hours-layout .preview-wrap { position: sticky; top: 4.5rem; } } .preview-caption { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); margin-bottom: .35rem; } .preview-bubble { background: var(--wa-bg); border: none; border-radius: 4px 14px 14px 14px; padding: .75rem 1rem; white-space: pre-wrap; font-size: .92rem; line-height: 1.55; color: var(--wa-text); box-shadow: var(--wa-shadow); max-width: 34rem; } .preview-note { display: block; color: var(--text-4); font-size: .78rem; margin-top: .35rem; } /* save sticky no mobile (sempre à vista no scroll longo); normal no desktop */ .hours-save-sticky { position: sticky; bottom: .6rem; z-index: 4; display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; background: var(--chrome-bg-3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 1.2rem; } @media (min-width: 1024px) { .hours-save-sticky { position: static; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: .7rem 0; } } /* Card 3 — datas especiais (lista cronológica de cards) */ .ov-card { display: flex; justify-content: space-between; align-items: center; gap: .7rem; flex-wrap: wrap; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-md); padding: .65rem .85rem; margin-bottom: .6rem; } .ov-info { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; } .ov-info > strong { color: var(--text-strong); font-variant-numeric: tabular-nums; } .ov-label { padding: .12rem .55rem; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: .8rem; } .ov-horario { font-family: var(--font-mono); font-size: .85rem; color: var(--text-2); } .ov-obs { width: 100%; color: var(--text-4); } .inline-form { margin: 0; display: inline; } #card-excecoes summary { cursor: pointer; font-weight: 500; color: var(--accent-2); padding: .55rem 0; min-height: 44px; display: flex; align-items: center; } #card-excecoes summary:hover { color: var(--accent); } #card-excecoes[open] summary { color: var(--accent); } #card-excecoes form { padding-top: .6rem; } /* dialog "copiar para…" — bottom-sheet no mobile, modal no desktop */ .copy-dialog { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--r-md) var(--r-md) 0 0; } @media (min-width: 640px) { .copy-dialog { max-width: 24rem; margin: auto; border-radius: var(--r-md); } } .copy-dialog .store-flag { min-height: 44px; } .copy-dialog .store-flag.is-src { opacity: .45; } .copy-src { margin: 0 0 .7rem; } .copy-actions { margin-top: 1rem; } /* Card 4 — dirty-check do replicar */ .dirty-hint small { color: var(--danger); font-weight: 600; } [data-replicar-submit]:disabled { opacity: .5; cursor: not-allowed; } /* ===== módulo Leads ===== */ .badge { display: inline-flex; align-items: center; padding: .18rem .6rem; border-radius: 7px; font-size: .76rem; font-weight: 500; letter-spacing: .02em; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); white-space: nowrap; } .badge.st-aberto { background: var(--surface); color: var(--text-2); border-color: var(--line); } .badge.st-coletando { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-ring); } .badge.st-qualificado { background: var(--accent-tint); color: var(--accent-2); border-color: var(--accent-ring); } .badge.st-encaminhado { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-ring); } .badge.st-encerrado { background: var(--surface-2); color: var(--text-3); border-color: var(--line); } .badge.st-opt_out, .badge.st-perdido { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-ring); } .wa-icon { color: var(--wa-green); vertical-align: middle; margin-left: .3rem; display: inline-flex; } .wa-icon:hover { color: var(--wa-green); filter: brightness(1.15); } .wa-modal { border-radius: var(--r-lg); padding: 1.2rem; max-width: 28rem; width: 92vw; } .wa-modal::backdrop { background: rgba(0,0,0,.6); } /* pinned: véu */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ============================================================ DROPDOWN próprio (static/dropdown.js) —