/* ═══════════════════════════════════════════════════════════════════════ apps/portal/static/portal/css/portal_base.css BASE COMPARTILHADA — carregado em TODAS as páginas do portal (público + backoffice + auth) Contém: tokens, reset, body, header, botões, toasts, forms shared NÃO contém: bo-*, vx-*, sett-*, pub-* (ficam em arquivos separados) ═══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ 1. TOKENS / DESIGN SYSTEM ══════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light dark; /* Layout */ --portal-sticky-top: 74px; --portal-container: 1380px; --portal-page-max: 980px; --portal-section-gap: 18px; /* Raios */ --portal-radius-xl: 24px; --portal-radius-lg: 18px; --portal-radius-md: 14px; --portal-radius-sm: 12px; --portal-radius-pill: 999px; /* Motion */ --portal-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --portal-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --portal-duration-fast: 140ms; --portal-duration-base: 180ms; --portal-duration-slow: 250ms; /* Branding (tenant override via inline vars no ) */ --brand-primary: #020617; --brand-accent: #2563eb; --portal-primary: var(--brand-primary); --portal-accent: var(--brand-accent); /* Tipografia */ --portal-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; --portal-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ── LIGHT (default) ── */ --portal-bg: #f5f5f7; --portal-surface: #ffffff; --portal-surface-soft: #f8fafc; --portal-surface-glass: rgba(255, 255, 255, 0.78); --portal-text: #0f172a; --portal-text-soft: rgba(15, 23, 42, 0.62); --portal-text-muted: rgba(15, 23, 42, 0.55); /* WCAG 1.4.3: elevado de 0.46→0.55 para ≥4.5:1 */ --portal-border-subtle: rgba(15, 23, 42, 0.06); --portal-border-strong: rgba(15, 23, 42, 0.12); --portal-border-focus: rgba(37, 99, 235, 0.55); --portal-on-primary: #f9fafb; --portal-on-accent: #ffffff; --portal-heading: var(--portal-primary); --portal-heading-soft: var(--portal-text-soft); /* Sombras */ --portal-shadow-soft: 0 16px 42px rgba(15, 23, 42, 0.07); --portal-shadow-card: 0 18px 60px rgba(2, 6, 23, 0.10); --portal-shadow-float: 0 26px 85px rgba(2, 6, 23, 0.14); --portal-shadow-header: 0 10px 30px rgba(2, 6, 23, 0.08); --portal-ring: 0 0 0 1px rgba(37, 99, 235, 0.08), 0 0 0 4px rgba(37, 99, 235, 0.18); /* Backoffice tokens */ --vx-surface: rgba(255, 255, 255, 0.78); --vx-surface-strong: rgba(255, 255, 255, 0.92); --vx-border: rgba(15, 23, 42, 0.10); --vx-muted: rgba(15, 23, 42, 0.62); --vx-text: rgba(2, 6, 23, 0.96); --vx-shadow: 0 18px 48px rgba(2, 6, 23, 0.10); --vx-shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.08); --vx-ink-solid: #111827; --vx-muted-solid: #6b7280; accent-color: var(--portal-accent); } /* ── DARK via @media ── */ @media (prefers-color-scheme: dark) { :root { --portal-bg: #070a12; --portal-surface: rgba(15, 23, 42, 0.72); --portal-surface-soft: rgba(15, 23, 42, 0.52); --portal-surface-glass: rgba(15, 23, 42, 0.58); --portal-text: rgba(248, 250, 252, 0.92); --portal-text-soft: rgba(226, 232, 240, 0.76); --portal-text-muted: rgba(148, 163, 184, 0.78); --portal-border-subtle: rgba(148, 163, 184, 0.14); --portal-border-strong: rgba(148, 163, 184, 0.22); --portal-border-focus: color-mix(in srgb, var(--portal-accent) 55%, transparent); --portal-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.35); --portal-shadow-card: 0 26px 85px rgba(0, 0, 0, 0.45); --portal-shadow-float: 0 30px 95px rgba(0, 0, 0, 0.55); --portal-shadow-header: 0 18px 60px rgba(0, 0, 0, 0.38); --portal-on-primary: #ffffff; --portal-heading: var(--portal-text); --portal-heading-soft: var(--portal-text-soft); --vx-surface: rgba(15, 23, 42, 0.62); --vx-surface-strong: rgba(15, 23, 42, 0.78); --vx-border: rgba(148, 163, 184, 0.18); --vx-muted: rgba(148, 163, 184, 0.92); --vx-text: rgba(248, 250, 252, 0.92); --vx-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); --vx-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28); --vx-ink-solid: rgba(248, 250, 252, 0.92); --vx-muted-solid: rgba(148, 163, 184, 0.92); } } /* ── DARK via data-theme ── */ :is(html, :root, body)[data-theme="dark"] { color-scheme: dark; --portal-bg: #070a12; --portal-surface: rgba(15, 23, 42, 0.72); --portal-surface-soft: rgba(15, 23, 42, 0.52); --portal-surface-glass: rgba(15, 23, 42, 0.58); --portal-text: rgba(248, 250, 252, 0.92); --portal-text-soft: rgba(226, 232, 240, 0.76); --portal-text-muted: rgba(148, 163, 184, 0.78); --portal-border-subtle: rgba(148, 163, 184, 0.14); --portal-border-strong: rgba(148, 163, 184, 0.22); --portal-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.35); --portal-shadow-card: 0 26px 85px rgba(0, 0, 0, 0.45); --portal-shadow-float: 0 30px 95px rgba(0, 0, 0, 0.55); --portal-shadow-header: 0 18px 60px rgba(0, 0, 0, 0.38); --portal-on-primary: #ffffff; --portal-heading: var(--portal-text); --portal-heading-soft: var(--portal-text-soft); --vx-surface: rgba(15, 23, 42, 0.62); --vx-surface-strong: rgba(15, 23, 42, 0.78); --vx-border: rgba(148, 163, 184, 0.18); --vx-muted: rgba(148, 163, 184, 0.92); --vx-text: rgba(248, 250, 252, 0.92); --vx-shadow: 0 18px 60px rgba(0, 0, 0, 0.35); --vx-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.28); --vx-ink-solid: rgba(248, 250, 252, 0.92); --vx-muted-solid: rgba(148, 163, 184, 0.92); } /* ── LIGHT forçado ── */ :is(html, :root, body)[data-theme="light"] { color-scheme: light; --portal-bg: #f5f5f7; --portal-surface: #ffffff; --portal-surface-soft: #f8fafc; --portal-surface-glass: rgba(255, 255, 255, 0.78); --portal-text: #0f172a; --portal-text-soft: rgba(15, 23, 42, 0.62); --portal-text-muted: rgba(15, 23, 42, 0.55); /* WCAG 1.4.3: elevado de 0.46→0.55 para ≥4.5:1 */ --portal-border-subtle: rgba(15, 23, 42, 0.06); --portal-border-strong: rgba(15, 23, 42, 0.12); --portal-heading: var(--portal-primary); --portal-heading-soft: var(--portal-text-soft); --vx-surface: rgba(255, 255, 255, 0.78); --vx-surface-strong: rgba(255, 255, 255, 0.92); --vx-border: rgba(15, 23, 42, 0.10); --vx-muted: rgba(15, 23, 42, 0.62); --vx-text: rgba(2, 6, 23, 0.96); --vx-shadow: 0 18px 48px rgba(2, 6, 23, 0.10); --vx-shadow-soft: 0 10px 30px rgba(2, 6, 23, 0.08); --vx-ink-solid: #111827; --vx-muted-solid: #6b7280; } /* ══════════════════════════════════════════════════════════════════════ 2. RESET / BASELINE ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; hanging-punctuation: first last; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeLegibility; font-family: var(--portal-font-sans); font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--portal-bg); color: var(--portal-text); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: rgba(37, 99, 235, 0.22); color: inherit; } /* Foco acessível */ :where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--portal-border-focus); outline-offset: 2px; box-shadow: var(--portal-ring); } /* Touch targets */ :is(button, .portal-button, .portal-icon-btn, .bo-tab, .vx-tab, a[role="button"]) { touch-action: manipulation; min-height: 44px; min-width: 44px; } /* Scroll margin (sticky header) */ :is(h1, h2, h3, h4, h5, h6, [id]) { scroll-margin-top: calc(var(--portal-sticky-top) + 14px + env(safe-area-inset-top, 0px)); } /* ══════════════════════════════════════════════════════════════════════ 3. BODY / LAYOUT SHELL ══════════════════════════════════════════════════════════════════════ */ body.portal-body { min-height: 100vh; background: radial-gradient(1200px 700px at 18% 8%, rgba(37, 99, 235, 0.14), transparent 55%), radial-gradient(900px 600px at 85% 20%, rgba(168, 85, 247, 0.12), transparent 52%), radial-gradient(700px 520px at 70% 78%, rgba(16, 185, 129, 0.10), transparent 55%), linear-gradient(180deg, #f5f5f7 0%, #f7f7fb 35%, #f9fafb 100%); background-color: var(--portal-bg); } @media (prefers-color-scheme: dark) { body.portal-body { background: radial-gradient(1200px 700px at 18% 8%, rgba(37, 99, 235, 0.18), transparent 55%), radial-gradient(900px 600px at 85% 20%, rgba(168, 85, 247, 0.16), transparent 52%), radial-gradient(700px 520px at 70% 78%, rgba(16, 185, 129, 0.12), transparent 55%), linear-gradient(180deg, #070a12 0%, #070a12 30%, #060914 100%); } } body.portal-body[data-theme="dark"], [data-theme="dark"] body.portal-body { background: radial-gradient(1200px 700px at 18% 8%, rgba(37, 99, 235, 0.18), transparent 55%), radial-gradient(900px 600px at 85% 20%, rgba(168, 85, 247, 0.16), transparent 52%), radial-gradient(700px 520px at 70% 78%, rgba(16, 185, 129, 0.12), transparent 55%), linear-gradient(180deg, #070a12 0%, #070a12 30%, #060914 100%); } .portal-shell { min-height: 100vh; display: flex; flex-direction: column; max-width: var(--portal-container); margin: 0 auto; padding: 0 16px; } @media (min-width: 1024px) { .portal-shell { padding: 0 24px; } } /* Skip link */ .portal-skip-link { position: absolute; left: 12px; top: 12px; z-index: 9999; padding: 10px 12px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 800; transform: translateY(-140%); transition: transform 140ms var(--portal-ease-out); } .portal-skip-link:focus, .portal-skip-link:focus-visible { transform: translateY(0); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.25); } /* WCAG utility: visually hidden but available to screen readers */ .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; } /* ══════════════════════════════════════════════════════════════════════ 4. HEADER — Glass sticky (SSOT) ══════════════════════════════════════════════════════════════════════ */ .portal-header { position: sticky; top: 0; z-index: 50; background: transparent; border: 0; box-shadow: none; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; } .portal-header-inner { width: 100%; max-width: var(--portal-container); margin: 0 auto; display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); align-items: center; gap: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(2, 6, 23, 0.08); box-shadow: 0 30px 80px rgba(2, 6, 23, 0.10), 0 10px 30px rgba(2, 6, 23, 0.06); } /* backdrop-filter removido — causava lag no scroll */ @media (prefers-color-scheme: dark) { .portal-header-inner { background: rgba(15, 23, 42, 0.62); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: var(--portal-shadow-header); } } [data-theme="dark"] .portal-header-inner { background: rgba(15, 23, 42, 0.62); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: var(--portal-shadow-header); } .portal-header-left { justify-self: start; min-width: 0; } .portal-header-nav { justify-self: center; min-width: 0; } .portal-header-center { min-width: 0; } .portal-header-right { justify-self: end; display: flex; align-items: center; gap: 10px; justify-content: flex-end; min-width: 0; } /* Brand */ .portal-brand { display: flex; align-items: center; gap: 12px; min-width: 0; } .portal-brand-mark { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 44px; max-width: 220px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(2, 6, 23, 0.10); box-shadow: 0 12px 28px rgba(2, 6, 23, 0.10), inset 0 1px 0 rgba(255,255,255,0.8); -webkit-tap-highlight-color: transparent; } @media (prefers-color-scheme: dark) { .portal-brand-mark { background: rgba(2, 6, 23, 0.28); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 18px 55px rgba(0,0,0,0.35); } } [data-theme="dark"] .portal-brand-mark { background: rgba(2, 6, 23, 0.28); border: 1px solid rgba(148, 163, 184, 0.18); box-shadow: 0 18px 55px rgba(0,0,0,0.35); } .portal-brand-logo { display: block; height: 28px; width: auto; max-height: 28px; max-width: 190px; object-fit: contain; } /* ── Modo Grupo Empresarial: co-branding ────────────────────────────── Várias marcas lado a lado no lugar da marca única. Só renderiza quando o modo está em "cobrand"; caso contrário estas regras nunca casam. */ .portal-brand-mark--group { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; /* .portal-brand-mark base tem max-width:220px pensado para 1 logo só; sem isso aqui, 2 logos reais (não texto) já estouram e quebram dentro da própria badge. .portal-header-left comporta até isso (grid minmax(200px,1fr)). */ max-width: 420px; } .portal-brand-logo--cobrand { /* Menor que a logo única: são N marcas dividindo a mesma faixa do header. */ height: 24px; max-height: 24px; max-width: 130px; } /* Separador sutil entre as marcas, sem elemento extra no DOM. */ .portal-brand-logo--cobrand + .portal-brand-logo--cobrand { border-left: 1px solid rgba(148, 163, 184, 0.35); padding-left: 12px; } @media (max-width: 640px) { .portal-brand-logo--cobrand { height: 20px; max-height: 20px; max-width: 96px; } } .portal-brand-monogram { width: 28px; height: 28px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: -0.02em; background: rgba(2, 6, 23, 0.04); border: 1px solid rgba(2, 6, 23, 0.08); } .portal-header-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.05; min-width: 0; } .portal-product-name { font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Subtítulo do estado neutro do Modo Grupo Empresarial (ver base.html, bu_preview_active) — lista as empresas atendidas abaixo do título fixo "Portal de Atendimento". Inerte para quem não usa o recurso. */ .portal-brand-tagline { font-size: 11.5px; font-weight: 500; color: var(--portal-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Nav segmented */ .portal-nav-seg { display: inline-flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(2, 6, 23, 0.04); border: 1px solid rgba(2, 6, 23, 0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65); max-width: 100%; } @media (prefers-color-scheme: dark) { .portal-nav-seg { background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: none; } } [data-theme="dark"] .portal-nav-seg { background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(148, 163, 184, 0.16); box-shadow: none; } .portal-nav-link { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: rgba(15, 23, 42, 0.88); background: transparent; white-space: nowrap; transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; } @media (prefers-color-scheme: dark) { .portal-nav-link { color: rgba(248, 250, 252, 0.86); } } [data-theme="dark"] .portal-nav-link { color: rgba(248, 250, 252, 0.86); } @media (hover: hover) { .portal-nav-link:hover { background: rgba(2, 6, 23, 0.06); transform: translateY(-1px); } } .portal-nav-link.is-active { background: rgba(2, 6, 23, 1); color: #fff; box-shadow: 0 14px 26px rgba(2, 6, 23, 0.18); } @media (prefers-color-scheme: dark) { .portal-nav-link.is-active { background: rgba(248, 250, 252, 0.92); color: rgba(2, 6, 23, 0.98); box-shadow: 0 18px 55px rgba(0,0,0,0.40); } } [data-theme="dark"] .portal-nav-link.is-active { background: rgba(248, 250, 252, 0.92); color: rgba(2, 6, 23, 0.98); box-shadow: 0 18px 55px rgba(0,0,0,0.40); } /* Header mobile */ @media (max-width: 980px) { .portal-header-inner { grid-template-columns: auto 1fr; grid-template-areas: "left right" "center center"; align-items: center; } .portal-header-left { grid-area: left; } .portal-header-right { grid-area: right; } .portal-header-center { grid-area: center; padding-top: 8px; width: 100%; } /* FIX: nav estava hidden no mobile — center já ocupa linha inteira via grid */ .portal-header-nav { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .portal-header-nav::-webkit-scrollbar { display: none; } } /* Backoffice header override */ body.is-admin-area .portal-header-inner { overflow: visible; } /* ══════════════════════════════════════════════════════════════════════ 5. BOTÕES — portal-button (compartilhado) ══════════════════════════════════════════════════════════════════════ */ .portal-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; border-radius: var(--portal-radius-pill); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: transform var(--portal-duration-fast) var(--portal-ease-out), box-shadow var(--portal-duration-base) var(--portal-ease-out), background var(--portal-duration-base) var(--portal-ease-out), opacity var(--portal-duration-fast) var(--portal-ease-out); text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } .portal-button:disabled, .portal-button.is-loading { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .portal-button-primary { background: var(--portal-primary); color: var(--portal-on-primary); border-color: transparent; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.16); } @media (hover: hover) { .portal-button-primary:hover { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 16px 36px rgba(2, 6, 23, 0.22); } } .portal-button-accent { background: var(--portal-accent); color: var(--portal-on-accent); border-color: transparent; box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22); } @media (hover: hover) { .portal-button-accent:hover { opacity: 0.9; transform: translateY(-1px); } } .portal-button-secondary { background: var(--portal-surface); color: var(--portal-text); border-color: var(--portal-border-strong); box-shadow: 0 4px 12px rgba(2, 6, 23, 0.06); } @media (hover: hover) { .portal-button-secondary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.10); border-color: var(--portal-border-focus); } } .portal-button-ghost { background: transparent; color: var(--portal-text-soft); border-color: transparent; } @media (hover: hover) { .portal-button-ghost:hover { background: var(--portal-border-subtle); color: var(--portal-text); } } .portal-button-compact { padding: 8px 14px; font-size: 13px; } .portal-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--portal-border-strong); background: var(--portal-surface); color: var(--portal-text-soft); cursor: pointer; transition: background var(--portal-duration-fast), transform var(--portal-duration-fast); } @media (hover: hover) { .portal-icon-btn:hover { background: var(--portal-surface-soft); transform: scale(1.05); } } /* ══════════════════════════════════════════════════════════════════════ 6. TOASTS ══════════════════════════════════════════════════════════════════════ */ .portal-toast-stack { position: fixed; top: 16px; right: 16px; z-index: 10001; display: grid; gap: 10px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; } .portal-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 14px; font-size: 13px; font-weight: 700; line-height: 1.4; box-shadow: var(--portal-shadow-card); border: 1px solid transparent; transition: opacity 0.35s ease; } .portal-toast-text { flex: 1; } .portal-toast-close { background: none; border: none; font-size: 16px; color: inherit; opacity: 0.6; cursor: pointer; padding: 0 4px; min-height: unset; min-width: unset; } .portal-toast-success { background: rgba(236, 253, 245, 0.95); border-color: rgba(16, 185, 129, 0.25); color: #065f46; } .portal-toast-error { background: rgba(254, 242, 242, 0.95); border-color: rgba(239, 68, 68, 0.25); color: #991b1b; } .portal-toast-warning, .portal-toast-warn { background: rgba(255, 251, 235, 0.95); border-color: rgba(245, 158, 11, 0.25); color: #92400e; } .portal-toast-info { background: rgba(239, 246, 255, 0.95); border-color: rgba(37, 99, 235, 0.25); color: #1e40af; } @media (prefers-color-scheme: dark) { .portal-toast-success { background: rgba(6, 78, 59, 0.88); border-color: rgba(16, 185, 129, 0.35); color: #6ee7b7; } .portal-toast-error { background: rgba(127, 29, 29, 0.88); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; } .portal-toast-info { background: rgba(30, 58, 138, 0.88); border-color: rgba(37, 99, 235, 0.35); color: #93c5fd; } } /* ══════════════════════════════════════════════════════════════════════ 7. FORM — COMPONENTES SHARED (inputs, labels, select, textarea) Usados tanto no portal público quanto no backoffice ══════════════════════════════════════════════════════════════════════ */ .portal-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .portal-label-row { display: flex; align-items: baseline; gap: 6px; } .portal-field-label { font-size: 13px; font-weight: 750; color: var(--portal-heading); } .portal-field-required { color: #f97373; } .portal-field-help { font-size: 12px; color: var(--portal-text-muted); line-height: 1.35; } .portal-field-help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .portal-fields-row { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; } @media (min-width: 768px) { .portal-fields-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } } .portal-input, .portal-select, .portal-textarea { width: 100%; border-radius: var(--portal-radius-md); border: 1px solid var(--portal-border-strong); background: var(--portal-surface); padding: 10px 12px; font-size: 13px; color: var(--portal-text); outline: none; transition: border-color var(--portal-duration-base) var(--portal-ease-out), box-shadow var(--portal-duration-base) var(--portal-ease-out); } .portal-input::placeholder, .portal-textarea::placeholder { color: var(--portal-text-muted); } .portal-textarea { resize: vertical; min-height: 140px; line-height: 1.6; } @media (hover: hover) { :is(.portal-input, .portal-select, .portal-textarea):hover { border-color: var(--portal-border-focus); } } :is(.portal-input, .portal-select, .portal-textarea):focus { border-color: var(--portal-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--portal-accent) 18%, transparent); } /* Pill genérica (compartilhada) */ .portal-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--portal-border-strong); background: var(--portal-surface); font-size: 12px; font-weight: 700; color: var(--portal-text-soft); } /* Alert genérico (compartilhado) */ .portal-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--portal-radius-md); font-size: 13px; line-height: 1.5; border: 1px solid; } .portal-alert--warning, .portal-alert--warn { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.22); color: #92400e; } .portal-alert--error { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.22); color: #991b1b; } .portal-alert--info { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.18); color: #1e3a8a; } /* Empty state genérico */ .portal-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; color: var(--portal-text-muted); font-size: 14px; font-weight: 600; } /* Main content */ .portal-main { flex: 1; display: flex; flex-direction: column; } /* ====================================================================== PATCH: Logo do tenant sempre visível — dark / auto dark PROBLEMA: em dark mode, .portal-brand-mark recebia fundo quase preto (rgba(2,6,23,.28)), tornando logos escuras invisíveis. SOLUÇÃO: brand-mark sempre fundo branco, com sombra ajustada. A logo do tenant é desenhada para fundo claro — manter esse contexto independentemente do tema da página. Adicionar NO FINAL do portal.css (sobrescreve as regras anteriores). ====================================================================== */ /* ── LIGHT (já está certo, só reforça) ── */ .portal-brand-mark { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.09); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.90); } /* ── AUTO DARK (prefers-color-scheme) ── */ @media (prefers-color-scheme: dark) { .portal-brand-mark { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 1.00) !important; } } /* ── DARK FORÇADO VIA data-theme ── */ :is(html, :root, body)[data-theme="dark"] .portal-brand-mark, html[data-theme="dark"] .portal-brand-mark { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 1.00) !important; } /* ── Monograma (texto) no brand-mark: sempre escuro sobre branco ── */ .portal-brand-monogram { color: #1d1d1f; background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); } @media (prefers-color-scheme: dark) { .portal-brand-monogram { color: #1d1d1f !important; background: rgba(0, 0, 0, 0.04) !important; } } :is(html, :root, body)[data-theme="dark"] .portal-brand-monogram, html[data-theme="dark"] .portal-brand-monogram { color: #1d1d1f !important; background: rgba(0, 0, 0, 0.04) !important; } /* ── Responsivo mobile (860px → header flexível) ── */ /* O portal.css já gerencia o wrap do nav em 860px. Abaixo de 480px: lookup row empilha verticalmente (form/consulta). */ @media (max-width: 480px) { .portal-header-inner { gap: 8px; } .portal-product-name { font-size: 14px; } /* Nav scrollável horizontalmente quando não couber */ .portal-header-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .portal-header-nav::-webkit-scrollbar { display: none; } } /* ── Footer ── */ .portal-footer { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 28px 24px 16px; font-size: 11px; color: var(--portal-text-soft, rgba(100, 116, 139, .55)); } .portal-footer a { color: var(--portal-text-soft, rgba(100, 116, 139, .55)); text-decoration: none; transition: color .15s; } .portal-footer a:hover { color: var(--portal-text, #0f172a); } .portal-footer-left { } .portal-footer-right { display: inline-flex; align-items: center; gap: 6px; } .portal-footer-dot { opacity: .35; } .portal-chip { font-size: 10px; font-weight: 600; } .portal-chip--secure { } .portal-chip--demo { color: #d97706; }