/* ========================================================================== KLIMA Intelligence OS — Light Edition (protótipo local, 2026-10-02) -------------------------------------------------------------------------- Design system do redesenho visual. Carregado SÓ nas páginas que declaram `{% set ix_ui = true %}` (hoje: Resumo e Dashboard) — base.html liga e este arquivo. TODA regra aqui começa com html[data-ui="ix"], então nenhuma outra página é afetada. Princípios: superfícies sólidas claras, azul KLIMA (#0878FF) só para ação/ seleção/dado, cor semântica só para status, alta densidade com pouca poluição (divisórias em vez de caixas dentro de caixas), tipografia Geist (UI) + Newsreader (manchetes) + Geist Mono (horas/métricas). ========================================================================== */ /* ---------- 1. Tokens ---------- */ html[data-ui="ix"] { color-scheme: light; /* superfícies */ --ix-bg: #F5F7FA; --ix-surface: #FFFFFF; --ix-surface-2: #F8FAFC; --ix-surface-3: #F2F4F7; --ix-border: #E3E8EF; --ix-border-strong: #D4DBE5; --ix-divider: #EDF0F4; /* texto */ --ix-text: #111827; --ix-text-strong: #344054; --ix-text-2: #475467; --ix-text-3: #667085; /* azul KLIMA (identidade: --accent #0878FF do esquema padrão) */ --ix-accent: #0A6CE8; /* #0878FF escurecido p/ texto branco AA (4.9:1) em botões */ --ix-accent-hover: #0860D4; --ix-accent-ink: #0062D1; /* texto/links: 5.7:1 sobre branco */ --ix-accent-soft: #EEF5FF; --ix-accent-soft-2: #DCEBFF; /* estados (discretos) */ --ix-success: #12B76A; --ix-success-ink: #067647; --ix-success-soft: #ECFDF3; --ix-warning: #F79009; --ix-warning-ink: #B54708; --ix-warning-soft: #FFFAEB; --ix-danger: #F04438; --ix-danger-ink: #B42318; --ix-danger-soft: #FEF3F2; --ix-info: var(--ix-accent); --ix-on-accent: #fff; /* texto sobre botão/selo de acento */ --ix-success-line: #ABEFC6; --ix-warning-line: #FEDF89; --ix-danger-line: #FECDCA; --ix-border-hover: #C4CDD9; /* sentimento (positivo / neutro / negativo) */ --ix-pos: #12B76A; --ix-neu: #98A2B3; --ix-neg: #F04438; /* dados */ --ix-chart-grid: #EEF1F5; --ix-gauge-off: #E8ECF2; --ix-chart-area: rgba(8, 120, 255, 0.16); /* área sob a linha "Total" */ --ix-chart-line: var(--ix-accent); --ix-donut-edge: #FFFFFF; --ix-tooltip-bg: #101828; --ix-tooltip-text: #fff; --ix-tooltip-body: #D0D5DD; --ix-neu-bar: #C9D0DA; --ix-switch-off: #D0D5DD; --ix-topbar-bg: rgba(255, 255, 255, 0.82); --ix-body-top: #F7F9FC; --ix-body-glow: rgba(8, 120, 255, 0.05); --ix-scroll: #CDD4DE; --ix-scroll-thumb: #D3D9E2; --ix-scroll-hover: #B8C1CD; --ix-scroll-side: #DADFE7; --ix-skeleton: #E8ECF2; --ix-rating-boa-bg: #F0FDF4; --ix-rating-boa-ink: #15803D; --ix-rating-boa-line: #C9F2D6; --ix-rating-crit-bg: #FFF4ED; --ix-rating-crit-ink: #C4320A; --ix-rating-crit-line: #F9DBAF; --ix-rating-falsa-bg: #F9F5FF; --ix-rating-falsa-ink: #6941C6; --ix-rating-falsa-line: #E9D7FE; --ix-accent-press: #0553BC; --ix-switch-knob: #fff; --ix-btn-shadow: 0 1px 2px rgba(8, 120, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); --ix-rank-bar: #5C9DFF; /* forma */ --ix-radius-xs: 5px; --ix-radius-sm: 7px; --ix-radius: 10px; --ix-radius-lg: 12px; --ix-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --ix-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px -2px rgba(16, 24, 40, 0.06); --ix-shadow-md: 0 8px 20px -6px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.05); --ix-shadow-pop: 0 18px 40px -12px rgba(16, 24, 40, 0.22), 0 4px 10px -4px rgba(16, 24, 40, 0.08); --ix-ring: 0 0 0 3px rgba(8, 120, 255, 0.20); /* espaçamento */ --ix-gap: 16px; --ix-gap-sm: 10px; --ix-page-x: 28px; --ix-page-top: 22px; --ix-panel-pad: 18px; /* tipografia */ --ix-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ix-font-news: "Newsreader", "Iowan Old Style", Georgia, serif; --ix-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* moldura do app */ --sidebar-width: 248px; --layout-gap: 16px; /* Tokens legados remapeados: modais, dropdowns, pop-up de notícia e telas de carregamento de base.html/_nav.html usam estes — assim acompanham o tema claro sem precisar tocar nos arquivos deles. */ --bg: var(--ix-bg); --bg-alt: var(--ix-surface-2); --card: var(--ix-surface); --card-border: var(--ix-border); --text: var(--ix-text); --text-dim: var(--ix-text-2); --glass-bg: var(--ix-surface); --glass-border: var(--ix-border); --glass-border-hover: var(--ix-border-strong); --accent: var(--ix-accent); --accent-2: var(--ix-accent); --accent-soft: var(--ix-accent-soft); --ok: var(--ix-success); --danger: var(--ix-danger); --kw-neutral: var(--ix-text-3); --bg-video-overlay: transparent; } /* ---------- 1b. Tons NOITE (preta) e MÉDIO (cinza): superfícies translúcidas ---------- Só redefine tokens (+ poucas exceções). . O bloco de tokens abaixo vale para os dois; o MÉDIO (1b2) só troca a escala de cinza. Fundo (ondas/pontos/brilho) 60% mais escuro (Fase A, 2026-10-02). */ html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) { color-scheme: dark; --ix-bg: #000000; --ix-surface: rgba(0, 0, 0, 0.88); --ix-surface-solid: rgba(0, 0, 0, 0.95); --ix-surface-2: rgba(5, 5, 6, 0.86); --ix-surface-3: rgba(14, 14, 16, 0.86); --ix-border: rgba(255, 255, 255, 0.125); --ix-border-strong: rgba(255, 255, 255, 0.2); --ix-divider: rgba(255, 255, 255, 0.085); --ix-text: #FAFAFB; --ix-text-strong: #E2E4E8; --ix-text-2: #B0B5BE; --ix-text-3: #939AA5; --ix-accent: #F4F5F7; --ix-accent-hover: #FFFFFF; --ix-accent-press: #CFD1D6; --ix-accent-ink: #F4F5F7; --ix-accent-soft: rgba(255, 255, 255, 0.11); --ix-accent-soft-2: rgba(255, 255, 255, 0.17); --ix-on-accent: #0B0C0E; --ix-success: #4CD08F; --ix-success-ink: #7BE0AE; --ix-success-soft: rgba(63, 178, 127, 0.10); --ix-success-line: rgba(63, 178, 127, 0.28); --ix-warning: #E8B64A; --ix-warning-ink: #F2C968; --ix-warning-soft: rgba(212, 162, 58, 0.10); --ix-warning-line: rgba(212, 162, 58, 0.28); --ix-danger: #F2605A; --ix-danger-ink: #FF8E87; --ix-danger-soft: rgba(229, 83, 75, 0.10); --ix-danger-line: rgba(229, 83, 75, 0.30); --ix-pos: #4CD08F; --ix-neu: #8A8F98; --ix-neg: #F2605A; --ix-chart-grid: rgba(255, 255, 255, 0.085); --ix-gauge-off: rgba(255, 255, 255, 0.15); --ix-chart-line: #FFFFFF; --ix-chart-area: rgba(217, 219, 223, 0.07); --ix-donut-edge: #0A0A0C; --ix-tooltip-bg: #1E2025; --ix-tooltip-text: #FFFFFF; --ix-tooltip-body: #D0D3D9; --ix-neu-bar: #444850; --ix-switch-off: #3A3D44; --ix-switch-knob: #EDEEF0; --ix-topbar-bg: rgba(0, 0, 0, 0.86); --ix-body-top: #010101; --ix-body-glow: rgba(150, 156, 170, 0.011); --ix-scroll: #25282D; --ix-scroll-thumb: #202328; --ix-scroll-hover: #30333A; --ix-scroll-side: #202328; --ix-skeleton: rgba(255, 255, 255, 0.07); --ix-border-hover: rgba(255, 255, 255, 0.32); --ix-rank-bar: #B0B5BE; --ix-rating-boa-bg: rgba(63, 178, 127, 0.10); --ix-rating-boa-ink: #86E6B4; --ix-rating-boa-line: rgba(63, 178, 127, 0.28); --ix-rating-crit-bg: rgba(240, 160, 106, 0.10); --ix-rating-crit-ink: #FFB17C; --ix-rating-crit-line: rgba(240, 160, 106, 0.28); --ix-rating-falsa-bg: rgba(185, 166, 232, 0.10); --ix-rating-falsa-ink: #CDBDF5; --ix-rating-falsa-line: rgba(185, 166, 232, 0.28); --ix-btn-shadow: none; --ix-shadow-xs: none; --ix-shadow-sm: none; --ix-shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.7); --ix-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.09); --ix-ring: 0 0 0 3px rgba(230, 231, 234, 0.22); } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .app-sidebar, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-panel, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-kpis, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-filters, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .resumo-explainer-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .app-topbar, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .conta-dropdown-menu, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .modal-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .busca-popup-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .news-pop-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-tiles { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* overlays continuam sólidos (legibilidade) */ html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .conta-dropdown-menu, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .modal-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .busca-popup-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .news-pop-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .pt-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .fl-box, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .news-pop-btn { background: var(--ix-surface-solid); } /* fundo de ondas + pontos (o mesmo do app), em tons de grafite; aparece através das superfícies translúcidas */ html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("img/lab_ondas.avif") center bottom / cover no-repeat; filter: grayscale(1) brightness(1.2) contrast(1.05); opacity: 0.04; } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle, rgba(255, 255, 255, 0.011) 1px, transparent 1.6px) 0 0 / 28px 28px; -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 100%, #000 20%, transparent 85%); mask-image: radial-gradient(ellipse 120% 90% at 50% 100%, #000 20%, transparent 85%); } /* lavagem bem leve na cor do termômetro (cards de assunto e de notícia) */ html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-tile.ticker-btn[style*="--ix-tint"] { background-image: linear-gradient(180deg, color-mix(in srgb, var(--ix-tint) 11%, transparent), transparent 75%); border-color: color-mix(in srgb, var(--ix-tint) 24%, var(--ix-border)); } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-tile.kw-neutral, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .kw-neutral .ix-tile.ticker-btn { background-image: none; } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-story.is-tinted { background-image: linear-gradient(90deg, color-mix(in srgb, var(--ix-tint) 20%, transparent), transparent 60%); } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .app-topbar-avatar { color: var(--ix-on-accent); } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .ix-switch input:checked + .toggle-btn .toggle-dot::after { background: var(--ix-on-accent); } html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .modal-overlay, html[data-ui="ix"]:is([data-ix-tom="noite"],[data-ix-tom="medio"]) .app-sidebar-backdrop { background: rgba(0, 0, 0, 0.7); } /* ---------- 1b2. Tom MÉDIO: cinza entre o claro e a noite (só a escala; estados/gráficos vêm da noite) ---------- */ html[data-ui="ix"][data-ix-tom="medio"] { --ix-bg: #1B1D21; --ix-surface: rgba(38, 41, 47, 0.88); --ix-surface-solid: rgba(38, 41, 47, 0.97); --ix-surface-2: rgba(44, 47, 54, 0.85); --ix-surface-3: rgba(54, 58, 66, 0.85); --ix-border: rgba(255, 255, 255, 0.12); --ix-border-strong: rgba(255, 255, 255, 0.2); --ix-divider: rgba(255, 255, 255, 0.085); --ix-text: #F4F5F7; --ix-text-strong: #D9DCE1; --ix-text-2: #BCC1C9; --ix-text-3: #A6ACB6; --ix-accent-press: #CFD1D6; --ix-accent-soft: rgba(255, 255, 255, 0.12); --ix-accent-soft-2: rgba(255, 255, 255, 0.18); --ix-on-accent: #101114; --ix-chart-grid: rgba(255, 255, 255, 0.1); --ix-gauge-off: rgba(255, 255, 255, 0.17); --ix-donut-edge: #26292F; --ix-tooltip-bg: #14161A; --ix-tooltip-body: #D0D3D9; --ix-neu-bar: #555A63; --ix-switch-off: #4A4E56; --ix-switch-knob: #F4F5F7; --ix-topbar-bg: rgba(27, 29, 33, 0.88); --ix-body-top: #1C1E22; --ix-body-glow: rgba(170, 176, 190, 0.05); --ix-scroll: #3A3E46; --ix-scroll-thumb: #3A3E46; --ix-scroll-hover: #4A4F58; --ix-scroll-side: #3A3E46; --ix-skeleton: rgba(255, 255, 255, 0.08); --ix-border-hover: rgba(255, 255, 255, 0.34); --ix-rank-bar: #A9AEB7; --ix-shadow-md: 0 8px 20px -8px rgba(0, 0, 0, 0.55); --ix-shadow-pop: 0 18px 40px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.12); } html[data-ui="ix"][data-ix-tom="medio"] body::before { opacity: 0.1; } html[data-ui="ix"][data-ix-tom="medio"] body::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1.6px) 0 0 / 28px 28px; } html[data-ui="ix"][data-ix-tom="medio"] .modal-overlay, html[data-ui="ix"][data-ix-tom="medio"] .app-sidebar-backdrop { background: rgba(10, 11, 13, 0.7); } /* ---------- 1c. Matiz AZUL do tom noite ("Noite azul"): navy translúcido + azul elétrico da logo ---------- */ html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] { --ix-bg: #000205; --ix-surface: rgba(0, 2, 7, 0.66); --ix-surface-solid: rgba(0, 2, 6, 0.95); --ix-surface-2: rgba(1, 3, 9, 0.58); --ix-surface-3: rgba(2, 7, 16, 0.58); --ix-border: rgba(90, 160, 255, 0.28); --ix-border-strong: rgba(120, 180, 255, 0.42); --ix-divider: rgba(90, 160, 255, 0.15); --ix-text: #FFFFFF; --ix-text-strong: #E8F0FF; --ix-text-2: #BBCEEA; --ix-text-3: #9FB6D8; --ix-accent: #4AA6FF; --ix-accent-hover: #7AC0FF; --ix-accent-press: #3590EB; --ix-accent-ink: #9AD0FF; --ix-accent-soft: rgba(61, 155, 255, 0.2); --ix-accent-soft-2: rgba(61, 155, 255, 0.32); --ix-on-accent: #021226; --ix-pos: #3DDC97; --ix-neu: #7F96BA; --ix-neg: #FF6B66; --ix-chart-grid: rgba(110, 170, 255, 0.15); --ix-gauge-off: rgba(110, 170, 255, 0.24); --ix-chart-line: #7BC0FF; --ix-chart-area: rgba(61, 155, 255, 0.18); --ix-donut-edge: #00020A; --ix-tooltip-bg: #040D22; --ix-tooltip-body: #D6E4FA; --ix-neu-bar: #3F5F90; --ix-switch-off: #2A4166; --ix-switch-knob: #F4F8FF; --ix-rank-bar: #4A90E2; --ix-topbar-bg: rgba(0, 1, 5, 0.7); --ix-body-top: #000207; --ix-body-glow: rgba(30, 110, 255, 0.007); --ix-scroll: #2A4166; --ix-scroll-thumb: #28406A; --ix-scroll-hover: #3A5A92; --ix-scroll-side: #28406A; --ix-skeleton: rgba(90, 160, 255, 0.12); --ix-border-hover: rgba(150, 200, 255, 0.62); --ix-ring: 0 0 0 3px rgba(61, 155, 255, 0.35); --ix-shadow-md: 0 8px 24px -8px rgba(0, 20, 80, 0.7); --ix-shadow-pop: 0 18px 40px -12px rgba(0, 10, 50, 0.85), 0 0 0 1px rgba(120, 180, 255, 0.42); --ix-btn-shadow: 0 0 14px -2px rgba(61, 155, 255, 0.45); } html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] body::before { filter: sepia(1) hue-rotate(185deg) saturate(5) brightness(0.9); opacity: 0.03; } html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] body::after { background: radial-gradient(circle, rgba(100, 170, 255, 0.011) 1px, transparent 1.6px) 0 0 / 28px 28px; } html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] .modal-overlay, html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] .app-sidebar-backdrop { background: rgba(0, 2, 10, 0.75); } /* ---------- 2. Base ---------- */ html[data-ui="ix"] body { /* !important: vence o fundo pontilhado neon do tema escuro e o papel de parede inline */ background: radial-gradient(1100px 520px at 72% -8%, var(--ix-body-glow), transparent 62%), linear-gradient(180deg, var(--ix-body-top) 0%, var(--ix-bg) 340px) !important; background-attachment: fixed !important; color: var(--ix-text); font-family: var(--ix-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } html[data-ui="ix"] .bg-video, html[data-ui="ix"] .bg-video-overlay { display: none !important; } /* o atributo hidden sempre vence (vários componentes daqui definem display:flex) */ html[data-ui="ix"] [hidden] { display: none !important; } html[data-ui="ix"] ::selection { background: var(--ix-accent-soft-2); color: var(--ix-text); } html[data-ui="ix"] button, html[data-ui="ix"] input, html[data-ui="ix"] select, html[data-ui="ix"] textarea { font-family: inherit; } /* scrollbars discretas (o padrão do app é gradiente neon) */ html[data-ui="ix"] * { scrollbar-width: thin; scrollbar-color: var(--ix-scroll) transparent; } html[data-ui="ix"] *::-webkit-scrollbar { width: 10px; height: 10px; } html[data-ui="ix"] *::-webkit-scrollbar-track { background: transparent; } html[data-ui="ix"] *::-webkit-scrollbar-thumb { background: var(--ix-scroll-thumb); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; box-shadow: none; } html[data-ui="ix"] *::-webkit-scrollbar-thumb:hover { background: var(--ix-scroll-hover); background-clip: padding-box; border: 3px solid transparent; } html[data-ui="ix"] *::-webkit-scrollbar-corner { background: transparent; } /* foco: anel azul consistente, só para teclado */ html[data-ui="ix"] :focus { outline: none; } html[data-ui="ix"] :focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 2px; border-radius: 6px; } /* ícones (sprite _ix_icons.html) */ html[data-ui="ix"] .ix-ico { width: 16px; height: 16px; flex-shrink: 0; display: inline-block; vertical-align: -3px; stroke: currentColor; fill: none; overflow: visible; } html[data-ui="ix"] .ix-flip { transform: scaleX(-1); } html[data-ui="ix"] .ix-mono { font-family: var(--ix-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } html[data-ui="ix"] .ix-nowrap { white-space: nowrap; } html[data-ui="ix"] .ix-muted, html[data-ui="ix"] .hint-small { color: var(--ix-text-2); font-size: 12.5px; } html[data-ui="ix"] .ix-error { color: var(--ix-danger-ink) !important; } /* ---------- 3. Moldura: sidebar ---------- */ html[data-ui="ix"] .app-sidebar { width: var(--sidebar-width); background: var(--ix-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--ix-border); box-shadow: none; scrollbar-color: var(--ix-scroll-side) transparent; } html[data-ui="ix"] .app-sidebar > * { order: 1; } html[data-ui="ix"] .app-sidebar > .app-sidebar-brand { order: 0; } html[data-ui="ix"] .app-sidebar > .app-sidebar-nav { order: 1; } html[data-ui="ix"] .app-sidebar > .sidebar-widget-beta { order: 2; } html[data-ui="ix"] .app-sidebar > .sidebar-widget-apk, html[data-ui="ix"] .app-sidebar > form { order: 3; } html[data-ui="ix"] .app-sidebar > .app-sidebar-bottom { order: 4; } html[data-ui="ix"] .app-sidebar-brand { height: 58px; box-sizing: border-box; flex-shrink: 0; padding: 0 16px 0 18px; gap: 8px; border-bottom: 1px solid var(--ix-border); color: var(--ix-text); } html[data-ui="ix"] .app-sidebar-brand img { height: 38px; width: auto; } html[data-ui="ix"] .app-sidebar-beta-badge { color: var(--ix-accent-ink); background: var(--ix-accent-soft); box-shadow: none; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 6px; border-radius: var(--ix-radius-xs); } html[data-ui="ix"] .app-sidebar-version-tag { background: none; padding: 0; color: var(--ix-text-3); font-size: 11px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; } html[data-ui="ix"] .app-sidebar-nav { padding: 14px 10px 10px; gap: 1px; } html[data-ui="ix"] .app-sidebar-section { margin: 16px 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; color: var(--ix-text-3); } html[data-ui="ix"] .sidebar-link { min-height: 34px; box-sizing: border-box; padding: 0 10px; gap: 10px; border-radius: var(--ix-radius-sm); border-left: 0; color: var(--ix-text-strong); font-size: 13.5px; font-weight: 500; transition: background-color 0.12s ease, color 0.12s ease; } html[data-ui="ix"] .sidebar-link-icon { width: 18px; height: 18px; font-size: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ix-text-2); } html[data-ui="ix"] .sidebar-link-icon .ix-ico { width: 18px; height: 18px; vertical-align: 0; } html[data-ui="ix"] .sidebar-link:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .sidebar-link:hover .sidebar-link-icon { color: var(--ix-text-strong); } html[data-ui="ix"] .sidebar-link-active, html[data-ui="ix"] .sidebar-link-active:hover { background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-weight: 600; box-shadow: none; } html[data-ui="ix"] .sidebar-link-active .sidebar-link-icon { color: var(--ix-accent); } /* grupos
*/ html[data-ui="ix"] .sidebar-group-toggle { padding-right: 30px; } html[data-ui="ix"] .sidebar-group-caret { right: 9px; width: 16px; height: 16px; display: inline-flex; font-size: 0; color: var(--ix-text-3); transform: translateY(-50%) rotate(-90deg); } html[data-ui="ix"] .sidebar-group-caret .ix-ico { width: 15px; height: 15px; vertical-align: 0; } html[data-ui="ix"] .sidebar-group[open] > .sidebar-group-toggle .sidebar-group-caret { transform: translateY(-50%) rotate(0deg); } html[data-ui="ix"] .sidebar-submenu { margin: 2px 0 6px 19px; padding-left: 10px; gap: 1px; border-left: 1px solid var(--ix-border); } html[data-ui="ix"] .sidebar-sublink { padding: 6px 10px; border-radius: 6px; color: var(--ix-text-2); font-size: 13px; line-height: 1.35; } html[data-ui="ix"] .sidebar-sublink:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .sidebar-sublink.sidebar-link-active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-weight: 600; } html[data-ui="ix"] .sidebar-sublink { display: flex; align-items: center; gap: 9px; } html[data-ui="ix"] .sidebar-sublink-ico { width: 15px; height: 15px; flex: 0 0 15px; vertical-align: 0; color: var(--ix-text-3); } html[data-ui="ix"] .sidebar-sublink:hover .sidebar-sublink-ico { color: var(--ix-text-strong); } html[data-ui="ix"] .sidebar-sublink.sidebar-link-active .sidebar-sublink-ico { color: var(--ix-accent); } html[data-ui="ix"] .sidebar-sublink-label { min-width: 0; flex: 1; } html[data-ui="ix"] .sidebar-add-assunto { margin: 2px 0; text-align: left; font-weight: 500; color: var(--ix-text-2); border: 0; background: none; box-shadow: none; } html[data-ui="ix"] .sidebar-submenu > .sidebar-add-assunto:first-child { color: var(--ix-accent-ink); font-weight: 600; } html[data-ui="ix"] .sidebar-add-assunto:hover { background: var(--ix-surface-3); color: var(--ix-accent-ink); } html[data-ui="ix"] .sidebar-submenu-label { margin: 10px 10px 3px; font-size: 10px; font-weight: 600; letter-spacing: 0.07em; color: var(--ix-text-3); opacity: 1; } html[data-ui="ix"] .sidebar-assunto-stats { display: inline-flex; padding: 5px 6px; color: var(--ix-text-3); opacity: 1; border-radius: 6px; } html[data-ui="ix"] .sidebar-assunto-stats .ix-ico { width: 14px; height: 14px; vertical-align: 0; } html[data-ui="ix"] .sidebar-assunto-stats:hover { background: var(--ix-surface-3); color: var(--ix-accent); } /* selos: sem pulsar, sem gradiente */ html[data-ui="ix"] .sidebar-badge-ia { font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ix-text-2); background: var(--ix-surface-3); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-xs); padding: 0 5px; } html[data-ui="ix"] .sidebar-badge-novo { font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--ix-accent-ink); background: var(--ix-accent-soft); border-radius: var(--ix-radius-xs); padding: 1px 6px; animation: none; } html[data-ui="ix"] .sidebar-glow-new { animation: none; } html[data-ui="ix"] .nav-chat-blink { animation: none; color: var(--ix-danger-ink); font-weight: 600; } /* widgets: viram itens silenciosos no rodapé (ordem 2/3) */ html[data-ui="ix"] .sidebar-widget { margin: 0 10px 8px; width: calc(100% - 20px); box-sizing: border-box; padding: 10px 12px; background: var(--ix-surface-2); border: 1px solid var(--ix-border); border-radius: var(--ix-radius); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; animation: none; transition: border-color 0.12s ease, background-color 0.12s ease; } html[data-ui="ix"] .sidebar-widget:hover { background: var(--ix-surface); border-color: var(--ix-border-strong); } html[data-ui="ix"] .sidebar-widget-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .sidebar-widget-title .ix-ico { color: var(--ix-text-2); vertical-align: 0; } html[data-ui="ix"] .sidebar-widget-sub { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ix-text-2); } html[data-ui="ix"] .sidebar-widget-beta { margin-top: 10px; } html[data-ui="ix"] .sidebar-widget-beta .sidebar-widget-title::after { content: "Beta"; margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--ix-warning-ink); background: var(--ix-warning-soft); border-radius: var(--ix-radius-xs); padding: 1px 6px; } html[data-ui="ix"] .sidebar-widget-chat-badge { background: var(--ix-danger); font-size: 10px; margin-left: 0; } html[data-ui="ix"] .sidebar-widget-apk { background: none; border-color: transparent; padding: 7px 12px; margin-bottom: 4px; } html[data-ui="ix"] .sidebar-widget-apk:hover { background: var(--ix-surface-3); border-color: transparent; } html[data-ui="ix"] .sidebar-widget-apk .sidebar-widget-title { color: var(--ix-text-2); font-weight: 500; font-size: 12.5px; } html[data-ui="ix"] .sidebar-widget.chat-fab-blink { border-color: var(--ix-danger-line); background: var(--ix-danger-soft); } html[data-ui="ix"] .sidebar-widget.chat-fab-onboard { border-color: var(--ix-accent-soft-2); } html[data-ui="ix"] .app-sidebar-bottom { padding: 8px 10px 12px; border-top: 1px solid var(--ix-border); gap: 1px; } html[data-ui="ix"] .app-sidebar-bottom .sidebar-widget-chat { margin: 0 0 4px; width: 100%; padding: 8px 10px; display: flex; align-items: center; gap: 10px; background: none; border-color: transparent; } html[data-ui="ix"] .app-sidebar-bottom .sidebar-widget-chat:hover { background: var(--ix-surface-3); } html[data-ui="ix"] .sidebar-widget-chat-icon { color: var(--ix-text-2); display: inline-flex; } html[data-ui="ix"] .sidebar-widget-chat-icon .ix-ico { width: 18px; height: 18px; vertical-align: 0; } html[data-ui="ix"] .sidebar-widget-online-dot { width: 8px; height: 8px; border: 2px solid var(--ix-surface); background: var(--ix-success); bottom: -2px; right: -3px; } html[data-ui="ix"] .sidebar-widget-chat-text { font-size: 13.5px; font-weight: 500; color: var(--ix-text-strong); } html[data-ui="ix"] .sidebar-widget-badge { background: var(--ix-accent); } html[data-ui="ix"] .sidebar-build-tag { color: var(--ix-text-2) !important; font-size: 12.5px !important; } html[data-ui="ix"] .sidebar-build-tag:hover { background: var(--ix-surface-3) !important; color: var(--ix-text) !important; } /* ---------- 4. Moldura: topbar ---------- */ html[data-ui="ix"] .app-topbar { left: var(--sidebar-width); height: 58px; padding: 0 20px 0 var(--ix-page-x); gap: 10px; background: var(--ix-topbar-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--ix-border); } html[data-ui="ix"] .app-topbar-search { flex: 1; max-width: 560px; height: 38px; box-sizing: border-box; margin-right: auto; padding: 0 8px 0 12px; gap: 10px; background: var(--ix-surface-2); border: 1px solid var(--ix-border); border-radius: 9px; color: var(--ix-text-3); font-size: 13.5px; cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease; } html[data-ui="ix"] .app-topbar-search:hover { background: var(--ix-surface); border-color: var(--ix-border-strong); box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .app-topbar-search > span { display: inline-flex; } html[data-ui="ix"] .app-topbar-search .ix-ico { width: 17px; height: 17px; vertical-align: 0; } html[data-ui="ix"] .app-topbar-search input { color: var(--ix-text); font-size: 13.5px; } html[data-ui="ix"] .app-topbar-search input::placeholder { color: var(--ix-text-3); } html[data-ui="ix"] .ix-kbd { font-family: var(--ix-font-mono); font-size: 10.5px; font-weight: 500; color: var(--ix-text-2); background: var(--ix-surface); border: 1px solid var(--ix-border); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; white-space: nowrap; } /* relógio: vira metadado discreto no fluxo da barra (era sobreposto e centralizado, com brilho) */ html[data-ui="ix"] .app-topbar-title { display: none; } html[data-ui="ix"] .app-topbar-clock { position: static; height: auto; padding: 0 6px 0 0; pointer-events: auto; z-index: auto; display: flex; } html[data-ui="ix"] .lcd-clock { font-family: var(--ix-font-mono); font-size: 12px; letter-spacing: 0; gap: 6px; color: var(--ix-text-2); text-shadow: none; } html[data-ui="ix"] .lcd-clock #local-clock { font-weight: 500; color: var(--ix-text-strong); font-variant-numeric: tabular-nums; } html[data-ui="ix"] .lcd-location { color: var(--ix-text-3); opacity: 1; font-size: 12px; font-family: var(--ix-font); } html[data-ui="ix"] .app-topbar-notif, html[data-ui="ix"] .app-topbar-conta, html[data-ui="ix"] .app-topbar-notif + .app-topbar-conta { margin-left: 0; } html[data-ui="ix"] .app-topbar-bell { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: var(--ix-text-2); font-size: 0; } html[data-ui="ix"] .app-topbar-bell .ix-ico { width: 19px; height: 19px; vertical-align: 0; } html[data-ui="ix"] .app-topbar-bell:hover, html[data-ui="ix"] .app-topbar-bell[aria-expanded="true"] { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .app-topbar-bell-dot { top: 8px; right: 8px; width: 8px; height: 8px; border: 2px solid var(--ix-surface); background: var(--ix-danger); box-sizing: content-box; } html[data-ui="ix"] .app-topbar-avatar-btn { padding: 4px 8px 4px 4px; gap: 10px; border-radius: 10px; color: var(--ix-text); } html[data-ui="ix"] .app-topbar-avatar-btn:hover, html[data-ui="ix"] .app-topbar-avatar-btn[aria-expanded="true"] { background: var(--ix-surface-3); } html[data-ui="ix"] .app-topbar-avatar-btn.sidebar-link-active { background: var(--ix-accent-soft); box-shadow: none; } html[data-ui="ix"] .app-topbar-avatar { width: 32px; height: 32px; font-size: 13px; font-weight: 600; background: var(--ix-accent); color: var(--ix-on-accent); } html[data-ui="ix"] .app-topbar-userinfo b { font-size: 13px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .app-topbar-userinfo span { font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .app-topbar-avatar-btn > span:last-child { display: inline-flex; color: var(--ix-text-3); } html[data-ui="ix"] .app-sidebar-toggle, html[data-ui="ix"] .app-topbar-search-btn { width: 38px; height: 38px; align-items: center; justify-content: center; padding: 0; border-radius: 9px; color: var(--ix-text-strong); font-size: 0; } html[data-ui="ix"] .app-sidebar-toggle .ix-ico, html[data-ui="ix"] .app-topbar-search-btn .ix-ico { width: 20px; height: 20px; vertical-align: 0; } html[data-ui="ix"] .app-sidebar-toggle:hover, html[data-ui="ix"] .app-topbar-search-btn:hover { background: var(--ix-surface-3); } /* dropdowns (Conta / sino) */ html[data-ui="ix"] .conta-dropdown-menu { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: 12px; box-shadow: var(--ix-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 6px; min-width: 220px; } html[data-ui="ix"] .conta-dropdown-menu a, html[data-ui="ix"] .conta-dropdown-menu-btn { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ix-text-strong); } html[data-ui="ix"] .conta-dropdown-menu a .ix-ico, html[data-ui="ix"] .conta-dropdown-menu-btn .ix-ico { color: var(--ix-text-3); vertical-align: 0; } html[data-ui="ix"] .conta-dropdown-menu a:hover, html[data-ui="ix"] .conta-dropdown-menu-btn:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .conta-dropdown-menu a.active { color: var(--ix-accent-ink); background: var(--ix-accent-soft); font-weight: 600; } html[data-ui="ix"] .conta-dropdown-menu hr { border: 0 !important; border-top: 1px solid var(--ix-divider) !important; margin: 6px 4px !important; } html[data-ui="ix"] .app-topbar-notif-menu { width: 340px; padding: 8px; } html[data-ui="ix"] .app-topbar-notif-title { margin: 6px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--ix-text-3); } html[data-ui="ix"] .app-topbar-notif-list li:hover { background: var(--ix-surface-3); } html[data-ui="ix"] .app-topbar-notif-link { padding: 8px; gap: 10px; align-items: flex-start; } html[data-ui="ix"] .app-topbar-notif-canal { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ix-surface-3); color: var(--ix-text-2); font-size: 14px; } html[data-ui="ix"] .app-topbar-notif-canal .ix-ico { vertical-align: 0; } html[data-ui="ix"] .app-topbar-notif-info b { font-size: 13px; font-weight: 600; } html[data-ui="ix"] .app-topbar-notif-info span { font-family: var(--ix-font-mono); font-size: 11px; color: var(--ix-text-3); } html[data-ui="ix"] .app-topbar-notif-resumo { font-family: var(--ix-font) !important; font-size: 12px !important; color: var(--ix-text-2) !important; } html[data-ui="ix"] .ix-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } html[data-ui="ix"] .ix-status-ok { background: var(--ix-success); } html[data-ui="ix"] .ix-status-wait { background: var(--ix-warning); } html[data-ui="ix"] .ix-status-err { background: var(--ix-danger); } html[data-ui="ix"] .app-topbar-notif-actions { border-top-color: var(--ix-divider); } /* faixas fixas (teste grátis, calibração...) logo abaixo da topbar */ html[data-ui="ix"] .trial-banner { font-weight: 500; font-size: 13px; padding: 8px 20px; gap: 12px; background: var(--ix-accent-soft); color: var(--ix-text); border-bottom: 1px solid var(--ix-accent-soft-2); } html[data-ui="ix"] .trial-banner b { color: var(--ix-text); } html[data-ui="ix"] .trial-banner-btn { background: var(--ix-accent); color: var(--ix-on-accent); border-radius: 7px; padding: 5px 12px; font-weight: 600; font-size: 12.5px; } /* calibração: o fundo vem inline (var(--accent-2)) — aqui vira faixa informativa suave */ /* ---------- 5. Página: moldura de conteúdo ---------- */ html[data-ui="ix"] body:has(.app-sidebar) main.ix-page { padding: calc(58px + var(--ix-page-top) + var(--top-banner-offset, 0px)) var(--ix-page-x) 56px calc(var(--sidebar-width) + var(--ix-page-x)); box-sizing: border-box; min-height: 100vh; } html[data-ui="ix"] .ix-container { max-width: 1680px; margin: 0 auto; } html[data-ui="ix"] .ix-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 20px; } html[data-ui="ix"] .ix-head-main { min-width: 0; } html[data-ui="ix"] .ix-crumb { display: flex; align-items: center; gap: 4px; margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--ix-text-3); } html[data-ui="ix"] .ix-crumb .ix-ico { width: 13px; height: 13px; vertical-align: 0; } html[data-ui="ix"] .ix-crumb span { color: var(--ix-text-2); } html[data-ui="ix"] .ix-h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ix-text); } html[data-ui="ix"] .ix-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ix-text-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } html[data-ui="ix"] .ix-sub b { color: var(--ix-text-strong); font-weight: 600; } html[data-ui="ix"] .ix-sub-sep { color: var(--ix-text-3); } html[data-ui="ix"] .ix-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } html[data-ui="ix"] .ix-live { display: inline-flex; align-items: center; gap: 7px; color: var(--ix-success-ink); font-weight: 500; } html[data-ui="ix"] .ix-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ix-success); box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.16); animation: ix-live 2.4s ease-in-out infinite; } @keyframes ix-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(18, 183, 106, 0.16); } 50% { box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.06); } } /* ---------- 6. Componentes ---------- */ /* botões */ html[data-ui="ix"] .ix-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; box-sizing: border-box; padding: 0 14px; margin: 0; border-radius: 8px; border: 1px solid transparent; cursor: pointer; font-family: var(--ix-font); font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: 0; text-decoration: none; text-transform: none; white-space: nowrap; box-shadow: none; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; } html[data-ui="ix"] .ix-btn .ix-ico { width: 16px; height: 16px; vertical-align: 0; } html[data-ui="ix"] .ix-btn-primary { background: var(--ix-accent); color: var(--ix-on-accent); box-shadow: var(--ix-btn-shadow); } html[data-ui="ix"] .ix-btn-primary:hover { background: var(--ix-accent-hover); color: var(--ix-on-accent); } html[data-ui="ix"] .ix-btn-primary:active { background: var(--ix-accent-press); } html[data-ui="ix"] .ix-btn-secondary { background: var(--ix-surface); color: var(--ix-text-strong); border-color: var(--ix-border-strong); box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .ix-btn-secondary:hover { background: var(--ix-surface-2); color: var(--ix-text); border-color: var(--ix-border-hover); } html[data-ui="ix"] .ix-btn-ghost { background: transparent; color: var(--ix-text-2); } html[data-ui="ix"] .ix-btn-ghost:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .ix-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 7px; } html[data-ui="ix"] .ix-btn:disabled { opacity: 0.55; cursor: default; } /* chips / selos */ html[data-ui="ix"] .ix-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--ix-border); border-radius: 8px; background: var(--ix-surface); font-size: 13px; font-weight: 500; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-chip .ix-ico { color: var(--ix-text-3); vertical-align: 0; } html[data-ui="ix"] .ix-tag, html[data-ui="ix"] .keyword-tag.ix-tag { display: inline-flex; align-items: center; max-width: 100%; box-sizing: border-box; padding: 1px 7px; margin: 0; border-radius: var(--ix-radius-xs); background: var(--ix-surface-3); border: 1px solid var(--ix-border); color: var(--ix-text-strong); font-size: 11.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--ix-surface-3); color: var(--ix-text-2); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; margin-left: 4px; } html[data-ui="ix"] .ix-mini-tag { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; color: var(--ix-text-2); border: 1px solid var(--ix-border); background: var(--ix-surface-2); border-radius: var(--ix-radius-xs); padding: 0 5px; } html[data-ui="ix"] .ix-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* sentimento: ponto + rótulo (sem pílula colorida) */ html[data-ui="ix"] .ix-sent { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ix-text-strong); white-space: nowrap; } html[data-ui="ix"] .ix-sent::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ix-neu); flex-shrink: 0; } html[data-ui="ix"] .ix-sent--positivo::before { background: var(--ix-pos); } html[data-ui="ix"] .ix-sent--negativo { color: var(--ix-danger-ink); } html[data-ui="ix"] .ix-sent--negativo::before { background: var(--ix-neg); } /* variação */ html[data-ui="ix"] .ix-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 5px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-ui="ix"] .ix-delta .ix-ico { width: 13px; height: 13px; vertical-align: 0; } html[data-ui="ix"] .ix-delta.up { color: var(--ix-accent-ink); background: var(--ix-accent-soft); } html[data-ui="ix"] .ix-delta.down { color: var(--ix-text-2); background: var(--ix-surface-3); } html[data-ui="ix"] .ix-delta--sm { font-size: 11.5px; padding: 0 6px; } html[data-ui="ix"] .ix-delta--none { color: var(--ix-text-3); background: none; } /* links */ html[data-ui="ix"] .ix-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ix-accent-ink); text-decoration: none; font-size: 12.5px; font-weight: 600; white-space: nowrap; } html[data-ui="ix"] .ix-link .ix-ico { width: 14px; height: 14px; vertical-align: 0; transition: transform 0.15s ease; } html[data-ui="ix"] .ix-link:hover { color: var(--ix-accent-hover); } html[data-ui="ix"] .ix-link:hover .ix-ico { transform: translateX(2px); } /* painéis */ html[data-ui="ix"] .ix-panel { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); padding: var(--ix-panel-pad); min-width: 0; box-sizing: border-box; } html[data-ui="ix"] .ix-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } html[data-ui="ix"] .ix-h2 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 600; letter-spacing: -0.005em; color: var(--ix-text); } html[data-ui="ix"] .ix-h2 .ix-ico { color: var(--ix-accent); vertical-align: 0; } html[data-ui="ix"] .ix-panel-sub { margin: 2px 0 0; font-size: 12px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-panel-hint { font-size: 12px; color: var(--ix-text-3); white-space: nowrap; padding-top: 1px; } /* ---------- 7. Faixa de indicadores (KPIs) ---------- */ html[data-ui="ix"] .ix-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); margin-bottom: var(--ix-gap); overflow: hidden; } html[data-ui="ix"] .ix-kpi { position: relative; min-width: 0; padding: 15px 18px 14px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-kpi:first-child { border-left: 0; } html[data-ui="ix"] .ix-kpi-label { font-size: 12.5px; font-weight: 500; color: var(--ix-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-kpi-value { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; color: var(--ix-text); font-variant-numeric: tabular-nums; } html[data-ui="ix"] .ix-kpi-value small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ix-text-2); } html[data-ui="ix"] .ix-kpi-value--empty { color: var(--ix-text-3); } html[data-ui="ix"] .ix-kpi-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; min-height: 20px; font-size: 12px; color: var(--ix-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-kpi-foot b { color: var(--ix-text-strong); font-weight: 600; font-variant-numeric: tabular-nums; } html[data-ui="ix"] .ix-spark { position: absolute; right: 16px; top: 40px; width: 76px; height: 28px; overflow: visible; } html[data-ui="ix"] .ix-spark polyline { vector-effect: non-scaling-stroke; stroke-width: 1.75px; } html[data-ui="ix"] .ix-minibars { position: absolute; right: 16px; top: 42px; height: 26px; display: flex; align-items: flex-end; gap: 3px; } html[data-ui="ix"] .ix-minibars i { width: 4px; border-radius: 2px; min-height: 3px; opacity: 0.9; } html[data-ui="ix"] .ix-stack { display: flex; gap: 2px; height: 6px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: var(--ix-surface-3); } html[data-ui="ix"] .ix-stack i { display: block; height: 100%; } html[data-ui="ix"] .ix-stack .pos { background: var(--ix-pos); } html[data-ui="ix"] .ix-stack .neu { background: var(--ix-neu-bar); } html[data-ui="ix"] .ix-stack .neg { background: var(--ix-neg); } /* ---------- 8. Assuntos monitorados (ticker) ---------- */ html[data-ui="ix"] .ix-subjects { padding: 14px 0 0; margin-bottom: var(--ix-gap); } html[data-ui="ix"] .ix-subjects > .ix-panel-head { padding: 0 var(--ix-panel-pad); margin-bottom: 10px; align-items: center; } html[data-ui="ix"] .ix-subjects .ticker-wrap { background: none; border: 0; border-radius: 0; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; } /* grade em colunas que se esticam: com poucos assuntos preenche a largura (sem rolar); com muitos, transborda e o mesmo JS de sempre rola/desliza */ html[data-ui="ix"] .ix-subjects .ticker { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 1fr); gap: 10px; padding: 2px var(--ix-panel-pad) var(--ix-panel-pad); cursor: default; scroll-behavior: smooth; } html[data-ui="ix"] .ix-subjects .ticker.dragging { cursor: grabbing; } html[data-ui="ix"] .ix-subjects .ticker-chip { gap: 0; min-width: 0; } html[data-ui="ix"] .ix-subjects .ticker-more-arrow { width: 56px; font-size: 20px; font-weight: 400; color: var(--ix-text-2); text-shadow: none; background: linear-gradient(90deg, transparent, var(--ix-surface) 70%); justify-content: flex-end; padding-right: 14px; box-sizing: border-box; } html[data-ui="ix"] .ix-tile.ticker-btn { width: 100%; height: 100%; box-sizing: border-box; min-height: 0; padding: 12px 14px 11px; gap: 7px; align-items: stretch; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; overflow: hidden; font-family: var(--ix-font); color: var(--ix-text); cursor: pointer; transition: border-color 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease; } html[data-ui="ix"] .ix-tile.ticker-btn:hover { border-color: var(--ix-border-strong); box-shadow: var(--ix-shadow-sm); } html[data-ui="ix"] .ix-tile.ticker-btn:active { background: var(--ix-surface-2); } /* Foto do assunto (Fase A, 2026-10-02): `keywords.topic_photo_url` em --ix-photo; véu do tema por cima (AA) + lavagem do termômetro. Sem foto (sem .has-photo) o box é o de sempre. */ html[data-ui="ix"] .ix-tile.has-photo { position: relative; isolation: isolate; --ix-veil: 255, 255, 255; --ix-veil-a: 0.88; --ix-veil-b: 0.68; } html[data-ui="ix"] .ix-tile.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, color-mix(in srgb, var(--ix-tint) 9%, transparent), transparent 80%), linear-gradient(180deg, rgba(var(--ix-veil), var(--ix-veil-a)), rgba(var(--ix-veil), var(--ix-veil-b))), var(--ix-photo) center / cover no-repeat; } html[data-ui="ix"][data-ix-tom="noite"] .ix-tile.has-photo { --ix-veil: 0, 0, 0; --ix-veil-a: 0.84; --ix-veil-b: 0.62; } html[data-ui="ix"][data-ix-tom="medio"] .ix-tile.has-photo { --ix-veil: 27, 29, 33; --ix-veil-a: 0.84; --ix-veil-b: 0.62; } html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] .ix-tile.has-photo { --ix-veil: 0, 6, 20; --ix-veil-a: 0.84; --ix-veil-b: 0.62; } html[data-ui="ix"] .ix-tile.has-photo .ix-tile-stats, html[data-ui="ix"] .ix-tile.has-photo .ix-tile-sens { color: var(--ix-text-2); } html[data-ui="ix"] .ix-tile.has-photo .ix-tile-name { text-shadow: 0 1px 2px rgba(var(--ix-veil), 0.5); } html[data-ui="ix"] .ix-tile-top { display: flex; align-items: center; gap: 6px; min-width: 0; } html[data-ui="ix"] .ix-tile-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ix-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-tile-go { width: 15px; height: 15px; color: var(--ix-text-3); opacity: 0; transform: translateX(-3px); transition: opacity 0.14s ease, transform 0.14s ease; } html[data-ui="ix"] .ix-tile:hover .ix-tile-go, html[data-ui="ix"] .ix-tile:focus-visible .ix-tile-go { opacity: 1; transform: none; color: var(--ix-accent); } html[data-ui="ix"] .ix-meter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; height: 5px; } html[data-ui="ix"] .ix-meter i { display: block; border-radius: 2px; background: var(--ix-gauge-off); } html[data-ui="ix"] .ix-tile-level { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-tile-stats { font-size: 12px; color: var(--ix-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-tile-stats b { color: var(--ix-text-strong); font-weight: 600; } html[data-ui="ix"] .ix-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 7px; margin-top: 1px; border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-tile-foot .ticker-label { font-family: var(--ix-font-mono); font-size: 11px; color: var(--ix-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-tile-sens { font-size: 11px; color: var(--ix-text-3); white-space: nowrap; } html[data-ui="ix"] .ticker-chip.kw-neutral .ix-tile-name { color: var(--ix-text-strong); } /* ---------- 9. Resumo: grade com trilho lateral ---------- */ html[data-ui="ix"] .ix-overview { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ix-gap); align-items: start; } html[data-ui="ix"] .ix-overview-main, html[data-ui="ix"] .ix-overview-rail { display: flex; flex-direction: column; gap: var(--ix-gap); min-width: 0; } html[data-ui="ix"] .ix-overview-main .ix-subjects { margin-bottom: 0; } html[data-ui="ix"] .ix-overview-rail { position: sticky; top: calc(58px + var(--ix-gap) + var(--top-banner-offset, 0px)); } html[data-ui="ix"] .ix-row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ix-gap); } /* Evolução (1 card) + Briefing (2 cards) dividem a mesma linha */ html[data-ui="ix"] .ix-row-brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--ix-gap); align-items: stretch; } html[data-ui="ix"] .ix-row-brief > .ix-panel { margin: 0; } html[data-ui="ix"] .ix-brief .ix-prose { columns: 2 280px; column-gap: 28px; } /* gráficos */ html[data-ui="ix"] .ix-chart { position: relative; width: 100%; } html[data-ui="ix"] .ix-chart--line { height: 268px; } html[data-ui="ix"] .ix-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 2px 0 0; padding: 0; } html[data-ui="ix"] .ix-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .ix-legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--ix-neu); } html[data-ui="ix"] .ix-legend .tot { background: var(--ix-accent); height: 3px; } html[data-ui="ix"] .ix-legend .pos { background: var(--ix-pos); } html[data-ui="ix"] .ix-legend .neu { background: repeating-linear-gradient(90deg, var(--ix-neu) 0 4px, transparent 4px 7px); } html[data-ui="ix"] .ix-legend .neg { background: var(--ix-neg); } html[data-ui="ix"] .ix-donut-row { display: flex; align-items: center; gap: 18px; } html[data-ui="ix"] .ix-donut { position: relative; width: 132px; height: 132px; flex-shrink: 0; } html[data-ui="ix"] .ix-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } html[data-ui="ix"] .ix-donut-center b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ix-text); line-height: 1.1; font-variant-numeric: tabular-nums; } html[data-ui="ix"] .ix-donut-center span { font-size: 11.5px; color: var(--ix-text-2); } html[data-ui="ix"] .ix-legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; } html[data-ui="ix"] .ix-legend-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-legend-list i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } html[data-ui="ix"] .ix-legend-list span { flex: 1; } html[data-ui="ix"] .ix-legend-list b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ix-text); } /* rankings (assuntos / fontes) */ html[data-ui="ix"] .ix-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } /* linha 1: posição · nome · valor · variação; linha 2: barra fina de participação */ html[data-ui="ix"] .ix-rank li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; grid-template-areas: "n name val delta" "n bar bar bar"; align-items: center; column-gap: 10px; row-gap: 6px; padding: 9px 0; border-top: 1px solid var(--ix-divider); font-size: 13px; } html[data-ui="ix"] .ix-rank li:first-child { border-top: 0; padding-top: 2px; } html[data-ui="ix"] .ix-rank-n { grid-area: n; align-self: start; padding-top: 1px; font-family: var(--ix-font-mono); font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-rank-name { grid-area: name; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ix-text); font-weight: 500; } html[data-ui="ix"] .ix-rank-name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-rank-bar { grid-area: bar; height: 4px; border-radius: 999px; background: var(--ix-surface-3); overflow: hidden; } html[data-ui="ix"] .ix-rank-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ix-accent); } html[data-ui="ix"] .ix-rank-val { grid-area: val; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ix-text); font-size: 12.5px; } html[data-ui="ix"] .ix-rank .ix-delta { grid-area: delta; justify-self: end; min-width: 44px; justify-content: center; box-sizing: border-box; } html[data-ui="ix"] .ix-rank--sources li { grid-template-columns: 20px minmax(0, 1fr) auto 34px; grid-template-areas: "n name val pct" "n bar bar bar"; } html[data-ui="ix"] .ix-rank--sources .ix-src-mark { grid-area: n; align-self: start; } html[data-ui="ix"] .ix-rank--sources .ix-rank-bar i { background: var(--ix-rank-bar); } html[data-ui="ix"] .ix-rank--sources li.is-other .ix-rank-bar i { background: var(--ix-neu-bar); } html[data-ui="ix"] .ix-rank--sources li.is-other .ix-rank-name { color: var(--ix-text-2); } html[data-ui="ix"] .ix-rank-pct { grid-area: pct; text-align: right; font-size: 12px; color: var(--ix-text-3); font-variant-numeric: tabular-nums; } html[data-ui="ix"] .ix-src-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px; background: var(--ix-surface-3); border: 1px solid var(--ix-border); font-size: 10.5px; font-weight: 700; color: var(--ix-text-2); box-sizing: border-box; line-height: 1; } /* destaques: lista de manchetes com miniatura (foto secundária) */ html[data-ui="ix"] .ix-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } html[data-ui="ix"] .ix-story-row { display: flex; gap: 12px; padding: 12px 6px; margin: 0 -6px; border-top: 1px solid var(--ix-divider); text-decoration: none; color: inherit; border-radius: 8px; transition: background-color 0.12s ease; } html[data-ui="ix"] .ix-stories > .ix-story-row:nth-child(-n+2) { border-top-color: transparent; padding-top: 2px; } html[data-ui="ix"] .ix-story-row:hover { background: var(--ix-surface-2); } html[data-ui="ix"] .ix-story-row[data-news-popup] { cursor: pointer; } html[data-ui="ix"] .ix-story-row-title:hover { text-decoration: underline; } html[data-ui="ix"] .ix-chip-btn.resumo-geral-chip.is-on { border-color: var(--ix-accent); color: var(--ix-accent-ink); background: var(--ix-accent-soft) !important; } html[data-ui="ix"] .ix-thumb { width: 72px; height: 54px; flex-shrink: 0; border-radius: 7px; background-color: var(--ix-surface-3); background-size: cover; background-position: center; border: 1px solid rgba(16, 24, 40, 0.04); } html[data-ui="ix"] .ix-story-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } html[data-ui="ix"] .ix-story-row-meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--ix-text-3); min-width: 0; } html[data-ui="ix"] .ix-story-row-meta b { font-weight: 600; color: var(--ix-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-story-row-meta span { white-space: nowrap; font-family: var(--ix-font-mono); font-size: 11px; } html[data-ui="ix"] .ix-story-row-title { font-family: var(--ix-font-news); font-size: 15.5px; line-height: 1.32; font-weight: 600; color: var(--ix-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-optical-sizing: auto; letter-spacing: -0.005em; } html[data-ui="ix"] .ix-story-row:hover .ix-story-row-title { color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-story-row-tags { display: flex; align-items: center; gap: 10px; margin-top: 2px; min-width: 0; } /* tabela */ html[data-ui="ix"] .ix-panel--table { padding-bottom: 6px; } html[data-ui="ix"] .ix-table-wrap { overflow-x: auto; margin: 0 calc(var(--ix-panel-pad) * -1); } html[data-ui="ix"] .ix-table { width: 100%; border-collapse: collapse; font-size: 13px; } html[data-ui="ix"] .ix-table th { text-align: left; padding: 9px 12px; background: var(--ix-surface-2); border-top: 1px solid var(--ix-divider); border-bottom: 1px solid var(--ix-divider); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ix-text-3); white-space: nowrap; } html[data-ui="ix"] .ix-table td { padding: 10px 12px; border-bottom: 1px solid var(--ix-divider); color: var(--ix-text-strong); vertical-align: middle; } html[data-ui="ix"] .ix-table th:first-child, html[data-ui="ix"] .ix-table td:first-child { padding-left: var(--ix-panel-pad); } html[data-ui="ix"] .ix-table th:last-child, html[data-ui="ix"] .ix-table td:last-child { padding-right: var(--ix-panel-pad); } html[data-ui="ix"] .ix-table tbody tr:last-child td { border-bottom: 0; } html[data-ui="ix"] .ix-table tbody tr:hover td { background: var(--ix-surface-2); } html[data-ui="ix"] .ix-table-title { width: 42%; min-width: 280px; max-width: 0; } html[data-ui="ix"] .ix-table-title a { color: var(--ix-text); text-decoration: none; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .ix-table-title a:hover { color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-table-src { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--ix-text-2); } html[data-ui="ix"] .ix-table .ix-mono { font-size: 12px; color: var(--ix-text-2); } /* termômetro (trilho) */ html[data-ui="ix"] .ix-thermo { padding-bottom: 8px; } html[data-ui="ix"] .ix-thermo-list { display: flex; flex-direction: column; margin: 0 -8px; } html[data-ui="ix"] .ix-thermo-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; text-decoration: none; color: inherit; border-top: 1px solid var(--ix-divider); transition: background-color 0.12s ease; } html[data-ui="ix"] .ix-thermo-row:first-child { border-top-color: transparent; } html[data-ui="ix"] .ix-thermo-row:hover { background: var(--ix-surface-2); } html[data-ui="ix"] .ix-gauge { width: 58px; height: 35px; flex-shrink: 0; } html[data-ui="ix"] .ix-thermo-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } html[data-ui="ix"] .ix-thermo-name { font-size: 13.5px; font-weight: 600; color: var(--ix-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-thermo-level { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-thermo-level b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ix-text); } html[data-ui="ix"] .ix-thermo-prev { font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-thermo-prev em { font-style: normal; font-weight: 600; margin-left: 4px; } html[data-ui="ix"] .ix-thermo-prev .is-worse { color: var(--ix-danger-ink); } html[data-ui="ix"] .ix-thermo-prev .is-better { color: var(--ix-success-ink); } html[data-ui="ix"] .ix-thermo-go { width: 15px; height: 15px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-thermo-row:hover .ix-thermo-go { color: var(--ix-accent); } /* briefing (resumo geral) */ html[data-ui="ix"] .ix-brief .ix-muted { margin: 0 0 12px; } html[data-ui="ix"] .ix-chipset { display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .ix-chip-btn.resumo-geral-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ix-border); background: var(--ix-surface) !important; color: var(--ix-text-strong); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease; } html[data-ui="ix"] .ix-chip-btn.resumo-geral-chip:hover { border-color: var(--ix-accent); color: var(--ix-accent-ink); background: var(--ix-accent-soft) !important; } html[data-ui="ix"] .ix-brief-title { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .ix-prose p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.62; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-brief-meta { font-size: 11.5px !important; margin: 4px 0 10px !important; } html[data-ui="ix"] .skeleton-linha { height: 10px; margin: 11px 0; border-radius: 6px; background: linear-gradient(90deg, var(--ix-surface-3), var(--ix-skeleton), var(--ix-surface-3)); background-size: 200% 100%; } /* briefing em áudio (resumo.html #ix-voz, JS em static/js/briefing_audio.js) */ html[data-ui="ix"] .ix-row-brief--wide-first { grid-template-columns: minmax(0, 1fr) clamp(220px, 30%, 300px); } html[data-ui="ix"] .ix-brief-titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--ix-gap-sm); margin-bottom: 8px; } html[data-ui="ix"] .ix-brief-titlerow .ix-brief-title { margin: 0; } html[data-ui="ix"] .ix-voz { padding: 14px; border-radius: var(--ix-radius-lg); border: 1px solid var(--ix-border); background: var(--ix-surface-2); } html[data-ui="ix"] .ix-voz:not([hidden]) { display: grid; gap: 12px; } html[data-ui="ix"] .ix-voz-head { display: flex; align-items: center; gap: var(--ix-gap-sm); flex-wrap: wrap; } html[data-ui="ix"] .ix-voz-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-voz-badge .ix-ico { width: 15px; height: 15px; } html[data-ui="ix"] .ix-voz-now { flex: 1 1 160px; min-width: 0; font-size: 12.5px; color: var(--ix-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .ix-voz-stage { border-radius: var(--ix-radius); overflow: hidden; border: 1px solid var(--ix-border); background: var(--ix-surface); } html[data-ui="ix"] .ix-voz-wave { display: block; width: 100%; height: 84px; } html[data-ui="ix"] .ix-voz-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } html[data-ui="ix"] .ix-voz-transport select { height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text); font-size: 12.5px; } html[data-ui="ix"] .ix-voz-ic { width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 9px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text-2); cursor: pointer; } html[data-ui="ix"] .ix-voz-ic:hover { color: var(--ix-accent-ink); border-color: var(--ix-accent); } html[data-ui="ix"] .ix-voz-ic .ix-ico { width: 15px; height: 15px; } html[data-ui="ix"] .ix-voz-play { width: 46px; height: 46px; flex: none; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: var(--ix-on-accent); background: var(--ix-accent); box-shadow: var(--ix-btn-shadow); transition: transform .12s ease; } html[data-ui="ix"] .ix-voz-play:hover { transform: scale(1.05); } html[data-ui="ix"] .ix-voz-play .ix-ico { width: 18px; height: 18px; } html[data-ui="ix"] .ix-voz.is-playing .ix-voz-play { animation: ix-voz-halo 1.8s ease-out infinite; } html[data-ui="ix"] .ix-voz.is-loading .ix-voz-play { opacity: .7; cursor: progress; } @keyframes ix-voz-halo { 0% { box-shadow: 0 0 0 0 rgba(8, 120, 255, .4); } 100% { box-shadow: 0 0 0 12px rgba(8, 120, 255, 0); } } html[data-ui="ix"] .ix-voz-progress { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } html[data-ui="ix"] .ix-voz-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--ix-surface-3); cursor: pointer; position: relative; outline: none; } html[data-ui="ix"] .ix-voz-bar:focus-visible { box-shadow: var(--ix-ring); } html[data-ui="ix"] .ix-voz-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; transition: width .25s linear; background: var(--ix-accent); } html[data-ui="ix"] .ix-voz-time { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ix-text-3); white-space: nowrap; } html[data-ui="ix"] .ix-voz-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } html[data-ui="ix"] .ix-voz-field { display: grid; gap: 4px; min-width: 0; } html[data-ui="ix"] .ix-voz-field > span:first-child { font-size: 11px; font-weight: 600; color: var(--ix-text-3); } html[data-ui="ix"] .ix-voz-field select { height: 32px; max-width: 220px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text); font-size: 12.5px; } html[data-ui="ix"] .ix-voz-inline { display: inline-flex; gap: 6px; align-items: center; } html[data-ui="ix"] .ix-voz-dur .ix-seg-btn { width: auto; height: 26px; padding: 0 10px; gap: 5px; font-size: 12.5px; font-weight: 500; } html[data-ui="ix"] .ix-voz-dur .ix-seg-btn small { font-size: 10.5px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-voz-fila { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .ix-voz-fila-item { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border-radius: 99px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text-2); font-size: 12px; cursor: pointer; } html[data-ui="ix"] .ix-voz-fila-item .n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ix-surface-3); font-size: 10.5px; font-weight: 600; } html[data-ui="ix"] .ix-voz-fila-item.is-done { color: var(--ix-text-3); } html[data-ui="ix"] .ix-voz-fila-item.is-done .n { background: var(--ix-success-soft); color: var(--ix-success-ink); } html[data-ui="ix"] .ix-voz-fila-item.is-now { border-color: var(--ix-accent); color: var(--ix-accent-ink); background: var(--ix-accent-soft); } html[data-ui="ix"] .ix-voz-fila-item.is-now .n { background: var(--ix-accent); color: var(--ix-on-accent); } html[data-ui="ix"] .ix-voz-trans summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-voz-trans-body { margin-top: 8px; max-height: 220px; overflow-y: auto; padding-right: 6px; position: relative; } html[data-ui="ix"] .ix-voz-trans-body h4 { margin: 10px 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .ix-voz-trans-body p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ix-text-2); } html[data-ui="ix"] .ix-voz-trans-body span[data-i] { cursor: pointer; border-radius: 4px; transition: background-color .2s ease, color .2s ease; } html[data-ui="ix"] .ix-voz-trans-body span[data-i]:hover { background: var(--ix-surface-3); } html[data-ui="ix"] .ix-voz-trans-body span.is-done { color: var(--ix-text-3); } html[data-ui="ix"] .ix-voz-trans-body span.is-now { color: var(--ix-text); background: var(--ix-accent-soft-2); } html[data-ui="ix"] .ix-voz-extras { padding-top: 2px; } html[data-ui="ix"] .ix-voz-vol { width: 96px; accent-color: var(--ix-text-2); } html[data-ui="ix"] .ix-voz-rate .ix-seg-btn { width: auto; height: 26px; padding: 0 9px; font-size: 12px; font-weight: 500; } html[data-ui="ix"] .ix-voz-texto:empty { display: none; } html[data-ui="ix"] .ix-voz-texto { margin-top: 0; max-height: 220px; } html[data-ui="ix"] .ix-brief.is-vista-texto .ix-voz-texto { max-height: none; } html[data-ui="ix"] .ix-voz-texto span[data-i] { padding: 1px 0; } html[data-ui="ix"] .ix-voz-off { margin: 0; font-size: 12.5px; color: var(--ix-warning-ink); } @media (max-width: 640px) { html[data-ui="ix"] .ix-voz-field select { max-width: none; width: 100%; } html[data-ui="ix"] .ix-voz-field { flex: 1 1 100%; } html[data-ui="ix"] .ix-voz-time { display: none; } } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] .ix-voz.is-playing .ix-voz-play { animation: none; } } /* vazio */ html[data-ui="ix"] .ix-empty-panel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } html[data-ui="ix"] .ix-empty-panel > .ix-ico { width: 22px; height: 22px; color: var(--ix-accent); } html[data-ui="ix"] .ix-empty-panel > div { flex: 1; min-width: 220px; } html[data-ui="ix"] .ix-empty-panel .ix-muted { margin: 4px 0 0; } html[data-ui="ix"] .ix-explainer { min-height: 0; padding: 24px 0; max-width: 980px; } html[data-ui="ix"] .ix-explainer .resumo-explainer-logo { width: 160px; min-width: 0; margin-bottom: 18px; } html[data-ui="ix"] .ix-explainer .ix-sub { justify-content: center; margin-bottom: 4px; } html[data-ui="ix"] .resumo-explainer-box { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .resumo-explainer-box h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .resumo-explainer-red h3 .ix-ico { color: var(--ix-danger); } html[data-ui="ix"] .resumo-explainer-green h3 .ix-ico { color: var(--ix-success); } html[data-ui="ix"] .resumo-explainer-red, html[data-ui="ix"] .resumo-explainer-green { box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .ix-explainer > .ix-btn { margin-top: 22px; } /* ---------- 10. Dashboard: feed + filtros ---------- */ html[data-ui="ix"] .ix-feed-layout { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: var(--ix-gap); align-items: start; } html[data-ui="ix"] .ix-feed { min-width: 0; } html[data-ui="ix"] .ix-feed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 36px; } html[data-ui="ix"] .ix-feed-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } html[data-ui="ix"] .ix-feed-title .ix-h2 { font-size: 15px; } html[data-ui="ix"] .ix-feed-title .ix-muted { font-size: 12.5px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--ix-surface-3); border: 1px solid var(--ix-border); } html[data-ui="ix"] .ix-seg-btn { width: 32px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ix-text-2); cursor: pointer; } html[data-ui="ix"] .ix-seg-btn .ix-ico { vertical-align: 0; } html[data-ui="ix"] .ix-seg-btn:hover { color: var(--ix-text); } html[data-ui="ix"] .ix-seg-btn.is-on { background: var(--ix-surface); color: var(--ix-accent-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--ix-border); } html[data-ui="ix"] .update-banner-wrap { text-align: center; } html[data-ui="ix"] #update-banner { display: none; align-items: center; gap: 8px; margin: 0 auto 12px; padding: 8px 14px; max-width: none; position: sticky; top: calc(58px + 10px); z-index: 30; background: var(--ix-accent); color: var(--ix-on-accent); border: 0; border-radius: 999px; box-shadow: var(--ix-shadow-md); font-size: 13px; font-weight: 600; cursor: pointer; } html[data-ui="ix"] #update-banner.show { display: inline-flex; } html[data-ui="ix"] .flashes-dashboard { list-style: none; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--ix-radius); background: var(--ix-success-soft); border: 1px solid var(--ix-success-line); color: var(--ix-success-ink); font-size: 13px; } /* --- cartão de notícia (base, todos os modos) --- */ html[data-ui="ix"] .ix-story.card { position: relative; display: grid; height: auto; min-width: 0; overflow: hidden; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; opacity: 1; padding: 14px 16px 0; column-gap: 14px; transition: border-color 0.14s ease, box-shadow 0.14s ease; } html[data-ui="ix"] .ix-story.card:hover { border-color: var(--ix-border-strong); box-shadow: var(--ix-shadow-sm); transform: none; } /* "Colorir cards": friso lateral na cor do nível do termômetro (opaco quando o navegador suporta rgb(from ...)) */ html[data-ui="ix"] .ix-story.is-tinted::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ix-tint); background: rgb(from var(--ix-tint) r g b); } html[data-ui="ix"] .ix-story-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 8px; } html[data-ui="ix"] .ix-story .meta-source { font-size: 12.5px; font-weight: 600; color: var(--ix-text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } html[data-ui="ix"] .ix-story-time { font-family: var(--ix-font-mono); font-size: 11px; color: var(--ix-text-3); white-space: nowrap; flex-shrink: 0; } html[data-ui="ix"] .ix-story-time::before { content: "·"; margin-right: 8px; color: var(--ix-text-3); font-family: var(--ix-font); } html[data-ui="ix"] .ix-story .keyword-tag.ix-tag { margin-left: auto; flex-shrink: 1; min-width: 0; max-width: 46%; border-color: transparent; } html[data-ui="ix"] .ix-story .ix-story-title { grid-area: title; margin: 0; height: auto; display: block; -webkit-line-clamp: unset; font-family: var(--ix-font-news); font-size: 17px; line-height: 1.32; font-weight: 600; letter-spacing: -0.008em; font-optical-sizing: auto; } html[data-ui="ix"] .ix-story .ix-story-title a { color: var(--ix-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .ix-story .ix-story-title a:hover { color: var(--ix-accent-ink); } /* o corte em 2 linhas fica no interno: item de grid vira flow-root e perde o line-clamp */ html[data-ui="ix"] .ix-story .ix-story-summary { grid-area: summary; margin: 6px 0 0; height: auto; white-space: normal; display: block; overflow: visible; font-size: 13px; line-height: 1.5; color: var(--ix-text-2); } html[data-ui="ix"] .ix-story .ix-story-summary > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .ix-story-media { grid-area: media; align-self: start; } html[data-ui="ix"] .ix-story .card-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: var(--ix-surface-3); border: 1px solid rgba(16, 24, 40, 0.05); } html[data-ui="ix"] .ix-story-signals { grid-area: signals; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; min-height: 20px; } html[data-ui="ix"] .ix-signal { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .ix-signal .ix-ico { width: 14px; height: 14px; color: var(--ix-text-3); vertical-align: 0; } /* classificação (rating) em tons claros — mesmas chaves de sempre */ html[data-ui="ix"] .rating-tag { display: inline-flex; align-items: center; margin: 0; padding: 1px 7px; border-radius: var(--ix-radius-xs); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; border: 1px solid transparent; line-height: 1.5; } html[data-ui="ix"] .rating-muito_boa { background: var(--ix-success-soft); color: var(--ix-success-ink); border-color: var(--ix-success-line); } html[data-ui="ix"] .rating-boa { background: var(--ix-rating-boa-bg); color: var(--ix-rating-boa-ink); border-color: var(--ix-rating-boa-line); } html[data-ui="ix"] .rating-neutra { background: var(--ix-surface-3); color: var(--ix-text-2); border-color: var(--ix-border); } html[data-ui="ix"] .rating-ruim { background: var(--ix-warning-soft); color: var(--ix-warning-ink); border-color: var(--ix-warning-line); } html[data-ui="ix"] .rating-critica { background: var(--ix-rating-crit-bg); color: var(--ix-rating-crit-ink); border-color: var(--ix-rating-crit-line); } html[data-ui="ix"] .rating-pessima { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .rating-processar { background: var(--ix-accent-soft); color: var(--ix-accent-ink); border-color: var(--ix-accent-soft-2); } html[data-ui="ix"] .rating-falsa-tag { background: var(--ix-rating-falsa-bg); color: var(--ix-rating-falsa-ink); border-color: var(--ix-rating-falsa-line); } html[data-ui="ix"] .ai-processing-badge { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0; font-size: 12px; color: var(--ix-text-2); border-radius: 0; } html[data-ui="ix"] .ai-processing-badge::before { width: 9px; height: 9px; border-color: var(--ix-accent); border-top-color: transparent; } html[data-ui="ix"] .ai-viral-badge { display: inline-flex; align-items: center; gap: 5px; padding: 0; background: none; border: 0; font-size: 12px; font-weight: 500; color: var(--ix-warning-ink); } html[data-ui="ix"] .ai-viral-badge .ix-ico { width: 14px; height: 14px; vertical-align: 0; } /* ações do card: barra discreta no rodapé */ html[data-ui="ix"] .ix-story-actions.card-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 12px -16px 0; padding: 7px 10px; border-top: 1px solid var(--ix-divider); background: transparent; } html[data-ui="ix"] .ix-story-actions form { margin: 0; display: inline-flex; } html[data-ui="ix"] .ix-story .ix-act, html[data-ui="ix"] .ix-story .ix-flag { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 0 8px; margin: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; box-shadow: none; animation: none; font-family: var(--ix-font); font-size: 12.5px; font-weight: 500; color: var(--ix-text-2); text-decoration: none; white-space: nowrap; cursor: pointer; text-transform: none; letter-spacing: 0; } html[data-ui="ix"] .ix-story .ix-act .ix-ico { width: 15px; height: 15px; vertical-align: 0; color: var(--ix-text-3); } html[data-ui="ix"] .ix-story .ix-act:hover, html[data-ui="ix"] .ix-story .ix-flag:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .ix-story .ix-act:hover .ix-ico { color: var(--ix-text-2); } html[data-ui="ix"] .ix-story .ix-flag { font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .ix-story .ix-flag.rating-falsa.active { background: var(--ix-rating-falsa-bg); color: var(--ix-rating-falsa-ink); border-color: var(--ix-rating-falsa-line); } html[data-ui="ix"] .ix-story .ix-flag.rating-processar.active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); border-color: var(--ix-accent-soft-2); } html[data-ui="ix"] .ix-story .ix-act--primary, html[data-ui="ix"] .ix-story .ai-resumo-btn { margin-left: auto; color: var(--ix-accent-ink); background: var(--ix-accent-soft); border-color: transparent; font-weight: 600; box-shadow: none; } html[data-ui="ix"] .ix-story .ix-act--primary .ix-ico { color: var(--ix-accent); } html[data-ui="ix"] .ix-story .ix-act--primary:hover { background: var(--ix-accent-soft-2); color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-story .quality-select { height: 28px; box-sizing: border-box; padding: 0 24px 0 8px; margin: 0 2px; border: 1px solid var(--ix-border); border-radius: 6px; background-color: var(--ix-surface); font-family: var(--ix-font); font-size: 12px; color: var(--ix-text-2); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; } html[data-ui="ix"] .ix-story .quality-select:hover { border-color: var(--ix-border-strong); color: var(--ix-text); } html[data-ui="ix"] .btn-copy.copied::after { content: "Copiado"; top: -26px; left: 50%; transform: translateX(-50%); background: var(--ix-tooltip-bg); color: var(--ix-tooltip-text); font-size: 11px; font-weight: 500; padding: 3px 7px; border-radius: 6px; white-space: nowrap; } /* lida: menos peso visual, sem "apagar" o card */ html[data-ui="ix"] .ix-story.card.read { background: var(--ix-surface-2); } html[data-ui="ix"] .ix-story.card.read .ix-story-title a { color: var(--ix-text-2); font-weight: 500; } html[data-ui="ix"] .ix-story.card.read .ix-story-media { opacity: 0.6; filter: saturate(0.6); } /* --- Card grande (padrão no computador): texto + miniatura à direita --- */ html[data-ui="ix"] .view-card_grande, html[data-ui="ix"] .view-card_pequeno { display: grid; gap: 12px; margin-top: 0; align-items: stretch; } html[data-ui="ix"] .view-card_grande { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } html[data-ui="ix"] .view-card_grande .ix-story { grid-template-columns: minmax(0, 1fr) 112px; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "meta meta" "title media" "summary media" "signals signals" "actions actions"; } html[data-ui="ix"] .view-card_grande .ix-story-media { width: 112px; height: 84px; margin-top: 2px; } html[data-ui="ix"] .view-card_grande .ix-story-signals { align-self: end; } html[data-ui="ix"] .view-card_grande .ix-story--noimg, html[data-ui="ix"] .view-card_pequeno .ix-story--noimg { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .view-card_grande .ix-story--noimg { grid-template-areas: "meta" "title" "summary" "signals" "actions"; } /* --- Card pequeno: grade densa, sem resumo, ações só ícone --- */ html[data-ui="ix"] .view-card_pequeno { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); } html[data-ui="ix"] .view-card_pequeno .ix-story { padding: 12px 14px 0; column-gap: 12px; grid-template-columns: minmax(0, 1fr) 64px; grid-template-rows: auto 1fr auto auto; grid-template-areas: "meta meta" "title media" "signals signals" "actions actions"; } html[data-ui="ix"] .view-card_pequeno .ix-story--noimg { grid-template-areas: "meta" "title" "signals" "actions"; } html[data-ui="ix"] .view-card_pequeno .ix-story-media { width: 64px; height: 48px; } html[data-ui="ix"] .view-card_pequeno .ix-story-title { font-size: 15px; } html[data-ui="ix"] .view-card_pequeno .ix-story-summary { display: none; } html[data-ui="ix"] .view-card_pequeno .ix-story .keyword-tag.ix-tag { max-width: 40%; } html[data-ui="ix"] .view-card_pequeno .ix-story-signals { margin-top: 10px; align-self: end; } html[data-ui="ix"] .view-card_pequeno .ix-story-actions.card-actions { margin: 10px -14px 0; padding: 6px 8px; } /* --- Lista grande: miniatura à esquerda, leitura em linha --- */ html[data-ui="ix"] .view-lista_grande, html[data-ui="ix"] .view-lista_pequena { display: flex; flex-direction: column; gap: 10px; } html[data-ui="ix"] .view-lista_grande .ix-story { grid-template-columns: 152px minmax(0, 1fr); column-gap: 18px; padding: 14px 16px 0; grid-template-areas: "media meta" "media title" "media summary" "media signals" "actions actions"; } html[data-ui="ix"] .view-lista_grande .ix-story--noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "summary" "signals" "actions"; } html[data-ui="ix"] .view-lista_grande .ix-story-media { width: 152px; height: 104px; grid-row: 1 / span 4; } html[data-ui="ix"] .view-lista_grande .ix-story-title { font-size: 18px; } /* --- Lista pequena: linhas densas tipo terminal de notícias --- */ html[data-ui="ix"] .view-lista_pequena { gap: 0; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); overflow: hidden; } html[data-ui="ix"] .view-lista_pequena .ix-story.card { border: 0; border-bottom: 1px solid var(--ix-divider); border-radius: 0; box-shadow: none; padding: 10px 14px 10px 16px; column-gap: 16px; align-items: center; grid-template-columns: 188px minmax(0, 1fr) auto; grid-template-areas: "meta title actions" "meta signals actions"; } html[data-ui="ix"] .view-lista_pequena .ix-story.card:last-child { border-bottom: 0; } html[data-ui="ix"] .view-lista_pequena .ix-story.card:hover { background: var(--ix-surface-2); box-shadow: none; } html[data-ui="ix"] .view-lista_pequena .ix-story-meta { flex-direction: column; align-items: flex-start; gap: 3px; margin: 0; align-self: center; } html[data-ui="ix"] .view-lista_pequena .ix-src-mark { display: none; } html[data-ui="ix"] .view-lista_pequena .ix-story .meta-source { max-width: 100%; } html[data-ui="ix"] .view-lista_pequena .ix-story-time::before { display: none; } html[data-ui="ix"] .view-lista_pequena .ix-story .keyword-tag.ix-tag { margin-left: 0; max-width: 100%; } html[data-ui="ix"] .view-lista_pequena .ix-story .ix-story-title { font-size: 15px; } html[data-ui="ix"] .view-lista_pequena .ix-story .ix-story-title a { -webkit-line-clamp: 1; } html[data-ui="ix"] .view-lista_pequena .ix-story-summary, html[data-ui="ix"] .view-lista_pequena .ix-story-media { display: none; } html[data-ui="ix"] .view-lista_pequena .ix-story-signals { margin-top: 4px; min-height: 0; } html[data-ui="ix"] .view-lista_pequena .ix-story-actions.card-actions { margin: 0; padding: 0; border: 0; flex-wrap: nowrap; } /* modos compactos: ações só com ícone (o rótulo continua no title/aria); "Original"/"Copiar" viram só ícone em todos os modos menos Lista grande (onde sobra largura) */ html[data-ui="ix"] .view-card_pequeno .ix-act-label, html[data-ui="ix"] .view-lista_pequena .ix-act-label, html[data-ui="ix"] .view-card_grande .ix-act--icon .ix-act-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } html[data-ui="ix"] .view-card_grande .ix-story .ix-act--icon { width: 30px; padding: 0; justify-content: center; } html[data-ui="ix"] .view-card_pequeno .ix-story .ix-act, html[data-ui="ix"] .view-lista_pequena .ix-story .ix-act { padding: 0 6px; } html[data-ui="ix"] .view-lista_pequena .ix-story .ai-resumo-btn { margin-left: 2px; } html[data-ui="ix"] .mais-noticias-wrap { padding: 20px 0 6px; } html[data-ui="ix"] .mais-noticias-wrap .ix-btn { min-width: 200px; } html[data-ui="ix"] .mais-noticias-wrap .hint-small { margin-top: 8px; color: var(--ix-text-3); } /* estados vazios do feed */ html[data-ui="ix"] .ix-feed .empty-state-wrap { min-height: 320px; } html[data-ui="ix"] .scan-wait-panel { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .empty { color: var(--ix-text-2); font-size: 14px; } html[data-ui="ix"] .fl-bar-track { background: var(--ix-surface-3); height: 6px; } html[data-ui="ix"] .fl-bar-fill { background: var(--ix-accent); } html[data-ui="ix"] .fl-percent { font-family: var(--ix-font-mono); color: var(--ix-text-2); font-size: 12.5px; } /* --- painel de filtros (trilho direito) --- */ html[data-ui="ix"] .filters-sidebar.ix-filters { width: auto; padding: 0; position: sticky; top: calc(58px + var(--ix-gap) + var(--top-banner-offset, 0px)); max-height: calc(100vh - 58px - 2 * var(--ix-gap) - var(--top-banner-offset, 0px)); overflow-y: auto; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .ix-filters-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; } html[data-ui="ix"] .ix-filters-head h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .ix-filters-head h3 .ix-ico { color: var(--ix-text-2); vertical-align: 0; } html[data-ui="ix"] .ix-switches { margin: 0; padding: 4px 8px 10px; gap: 0; border-bottom: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-switch { display: block; } html[data-ui="ix"] .ix-switch .toggle-btn { width: 100%; box-sizing: border-box; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; padding: 7px 8px; gap: 10px; border: 0; border-radius: 7px; background: transparent; font-size: 13px; font-weight: 500; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-switch .toggle-btn:hover { background: var(--ix-surface-2); } html[data-ui="ix"] .ix-switch .toggle-dot { position: relative; width: 30px; height: 18px; border-radius: 999px; border: 0; background: var(--ix-switch-off); flex-shrink: 0; transition: background-color 0.15s ease; } html[data-ui="ix"] .ix-switch .toggle-dot::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ix-switch-knob); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: transform 0.15s ease; } html[data-ui="ix"] .ix-switch input:checked + .toggle-btn { background: transparent; color: var(--ix-text-strong); border: 0; } html[data-ui="ix"] .ix-switch input:checked + .toggle-btn .toggle-dot { background: var(--ix-accent); border: 0; } html[data-ui="ix"] .ix-switch input:checked + .toggle-btn .toggle-dot::after { transform: translateX(12px); } html[data-ui="ix"] .ix-switch input:focus-visible + .toggle-btn { outline: 2px solid var(--ix-accent); outline-offset: 0; } html[data-ui="ix"] .ix-filters .filters-form { gap: 0; padding: 4px 16px 0; } html[data-ui="ix"] .ix-filters .filter-group { gap: 6px; padding: 12px 0; border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-filters .filters-form > .ix-check { padding: 10px 0 12px; } html[data-ui="ix"] .ix-filters .filter-label { font-size: 12.5px; font-weight: 500; color: var(--ix-text-2); gap: 8px; } html[data-ui="ix"] .ix-filters .filter-group-title { margin: 0 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .ix-filters .ix-check { color: var(--ix-text-strong); font-size: 13px; } html[data-ui="ix"] .ix-filters .filter-checkbox { gap: 9px; padding: 3px 0; font-size: 13px; color: var(--ix-text-strong); cursor: pointer; } html[data-ui="ix"] .ix-filters input[type="checkbox"] { accent-color: var(--ix-accent); width: 15px; height: 15px; margin: 0; } html[data-ui="ix"] .ix-filters select, html[data-ui="ix"] .ix-filters .combo-select, html[data-ui="ix"] .ix-filters input[type="datetime-local"] { width: 100%; height: 34px; box-sizing: border-box; padding: 0 30px 0 10px; background-color: var(--ix-surface); border: 1px solid var(--ix-border-strong); border-radius: 8px; color: var(--ix-text); font-family: var(--ix-font); font-size: 13px; color-scheme: light; transition: border-color 0.12s ease, box-shadow 0.12s ease; } html[data-ui="ix"] .ix-filters select, html[data-ui="ix"] .ix-filters .combo-select { appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } html[data-ui="ix"] .ix-filters input[type="datetime-local"] { padding-right: 8px; } html[data-ui="ix"] .ix-filters select:hover, html[data-ui="ix"] .ix-filters .combo-select:hover, html[data-ui="ix"] .ix-filters input[type="datetime-local"]:hover { border-color: var(--ix-border-hover); } html[data-ui="ix"] .ix-filters select:focus, html[data-ui="ix"] .ix-filters .combo-select:focus, html[data-ui="ix"] .ix-filters input[type="datetime-local"]:focus { border-color: var(--ix-accent); box-shadow: var(--ix-ring); outline: none; } html[data-ui="ix"] .ix-filters .hint-small { font-size: 11.5px; color: var(--ix-text-3); margin: 2px 0 0; line-height: 1.45; } html[data-ui="ix"] .source-chip { background: var(--ix-accent-soft); color: var(--ix-accent-ink); border: 1px solid var(--ix-accent-soft-2); border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 12px; font-weight: 500; } html[data-ui="ix"] .source-chip a { color: var(--ix-accent-ink); padding: 0 4px; border-radius: 4px; } html[data-ui="ix"] .source-chip a:hover { background: var(--ix-accent-soft-2); } html[data-ui="ix"] .ix-filters-foot { position: sticky; bottom: 0; display: flex; gap: 8px; margin: 4px -16px 0; padding: 12px 16px 14px; background: linear-gradient(180deg, transparent, var(--ix-surface) 30%); border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-filters-foot .btn-apply { flex: 1; margin: 0; } html[data-ui="ix"] .ix-filters-foot .btn-clear { flex: 0 0 auto; text-align: center; } html[data-ui="ix"] .mobile-filter-close { display: none; } /* destaque de "item novo" (era pulso neon verde/ciano) */ html[data-ui="ix"] .flash-glow-new { animation: ix-new-pulse 2.6s ease-out 1; } @keyframes ix-new-pulse { 0% { box-shadow: 0 0 0 0 rgba(8, 120, 255, 0.28); background-color: var(--ix-accent-soft); } 100% { box-shadow: 0 0 0 10px rgba(8, 120, 255, 0); } } html[data-ui="ix"] .flash-glow { animation: ix-new-pulse 2s ease-out 1; } /* ---------- 11. Overlays compartilhados (modais, busca, pop-up, carregamento) ---------- */ html[data-ui="ix"] .modal-overlay { background: rgba(16, 24, 40, 0.38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } html[data-ui="ix"] .modal-box { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: 14px; box-shadow: var(--ix-shadow-pop); color: var(--ix-text); padding: 24px; } html[data-ui="ix"] .modal-box h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ix-text); } html[data-ui="ix"] .modal-box p { color: var(--ix-text-strong); font-size: 13.5px; line-height: 1.55; } html[data-ui="ix"] .changelog-list li { color: var(--ix-text-strong); border-bottom-color: var(--ix-divider); } html[data-ui="ix"] .btn-command, html[data-ui="ix"] .modal-dismiss { background: var(--ix-accent); color: var(--ix-on-accent); box-shadow: none; border-radius: 8px; font-family: var(--ix-font); font-size: 13.5px; font-weight: 600; text-decoration: none; } html[data-ui="ix"] .btn-command:hover, html[data-ui="ix"] .modal-dismiss:hover { background: var(--ix-accent-hover); opacity: 1; } html[data-ui="ix"] .ix-btn.btn-command { margin-top: 0; padding: 0 14px; font-size: 13.5px; } html[data-ui="ix"] .ix-btn-secondary.btn-command { background: var(--ix-surface); color: var(--ix-text-strong); } html[data-ui="ix"] .ix-btn-secondary.btn-command:hover { background: var(--ix-surface-2); } html[data-ui="ix"] .busca-popup-box { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: 14px; box-shadow: var(--ix-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .busca-popup-head { border-bottom-color: var(--ix-divider); padding: 12px 16px; } html[data-ui="ix"] .busca-popup-lupa { display: inline-flex; color: var(--ix-text-3); } html[data-ui="ix"] .busca-popup-lupa .ix-ico { width: 18px; height: 18px; vertical-align: 0; } html[data-ui="ix"] .busca-popup-head input { color: var(--ix-text); font-size: 15px; } html[data-ui="ix"] .busca-popup .busca-popup-close { background: var(--ix-surface-3); border-color: var(--ix-border); color: var(--ix-text-2); } html[data-ui="ix"] .busca-popup-foot { border-top-color: var(--ix-divider); color: var(--ix-text-3); } html[data-ui="ix"] .busca-global-item { color: var(--ix-text); } html[data-ui="ix"] .busca-global-item:hover { background: var(--ix-surface-3); } html[data-ui="ix"] .busca-item-ativo { background: var(--ix-accent-soft) !important; } html[data-ui="ix"] .busca-global-grupo-titulo { color: var(--ix-text-3); font-weight: 600; letter-spacing: 0.06em; } html[data-ui="ix"] .busca-popup-estado p { color: var(--ix-text); } html[data-ui="ix"] .news-pop-box { background: var(--ix-surface); border: 1px solid var(--ix-border); box-shadow: var(--ix-shadow-pop); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .news-pop-gallery { background: var(--ix-surface-3); } html[data-ui="ix"] .news-pop-body h2 { font-family: var(--ix-font-news); font-size: 22px; font-weight: 600; color: var(--ix-text); letter-spacing: -0.01em; } html[data-ui="ix"] .news-pop-meta { color: var(--ix-text-3); } html[data-ui="ix"] .news-pop-summary { color: var(--ix-text-strong); } html[data-ui="ix"] .news-pop-orig { color: var(--ix-accent-ink); } html[data-ui="ix"] .news-pop-btn { background: var(--ix-surface); border-color: var(--ix-border-strong); color: var(--ix-text-strong); font-weight: 600; font-size: 13px; border-radius: 8px; } html[data-ui="ix"] .news-pop-btn:hover:not(:disabled) { border-color: var(--ix-border-hover); background: var(--ix-surface-2); } html[data-ui="ix"] .news-pop-btn.on { color: var(--ix-accent-ink); border-color: var(--ix-accent-soft-2); background: var(--ix-accent-soft); } html[data-ui="ix"] .news-pop-close { background: var(--ix-accent); color: var(--ix-on-accent); border-color: transparent; } html[data-ui="ix"] .news-pop-close:hover:not(:disabled) { background: var(--ix-accent-hover); filter: none; } html[data-ui="ix"] .news-pop-sent-positivo { color: var(--ix-success-ink); border-color: var(--ix-success-line); } html[data-ui="ix"] .news-pop-sent-negativo { color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .news-pop-sent-neutro { color: var(--ix-text-2); border-color: var(--ix-border); } html[data-ui="ix"] .news-pop-dot.on { background: var(--ix-accent); box-shadow: none; } html[data-ui="ix"] .news-pop .keyword-tag { background: var(--ix-surface-3); color: var(--ix-text-strong); border-color: var(--ix-border); margin: 0; } html[data-ui="ix"] .pt-overlay, html[data-ui="ix"] .fl-overlay { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } html[data-ui="ix"] .pt-box, html[data-ui="ix"] .fl-box { background: var(--ix-surface); border: 1px solid var(--ix-border); box-shadow: var(--ix-shadow-pop); border-radius: 14px; } html[data-ui="ix"] .pt-spinner, html[data-ui="ix"] .fl-spinner { border-color: var(--ix-surface-3); border-top-color: var(--ix-accent); border-width: 3px; } html[data-ui="ix"] .pt-bar-track { background: var(--ix-surface-3); } html[data-ui="ix"] .pt-bar-fill { background: var(--ix-accent); } html[data-ui="ix"] .pt-percent, html[data-ui="ix"] .fl-percent { font-family: var(--ix-font-mono); color: var(--ix-text-2); } html[data-ui="ix"] .pt-title, html[data-ui="ix"] .fl-title { color: var(--ix-text); font-weight: 600; } html[data-ui="ix"] #scan-toast { background: var(--ix-tooltip-bg); color: var(--ix-tooltip-text); border: 0; border-radius: 10px; box-shadow: var(--ix-shadow-pop); font-size: 13px; font-weight: 500; padding: 10px 16px; bottom: 22px; } /* ---------- 11b. Componentes legados (Fase A, 2026-10-02) ---------- Restilização conservadora das ~80 classes mais usadas das ~78 páginas autenticadas que ainda não foram redesenhadas: só cor/borda/raio/tipografia (NÃO layout), 100% em tokens. As páginas continuam funcionais; a Fase B reescreve o markup das principais. */ /* títulos de página (_page_hero.html): vira cabeçalho editorial alinhado à esquerda */ html[data-ui="ix"] .page-hero { text-align: left; padding: 0 0 4px; margin: 0 0 18px; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .page-hero-title { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; margin: 0; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ix-text); } html[data-ui="ix"] .page-hero-sub { margin: 6px 0 0; font-size: 13.5px; color: var(--ix-text-2); } /* caixas */ html[data-ui="ix"] .panel, html[data-ui="ix"] .dash-glass, html[data-ui="ix"] .card:not(.ix-story), html[data-ui="ix"] .plan-chart-box { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); color: var(--ix-text); } html[data-ui="ix"] .panel { padding: var(--ix-panel-pad) 20px; } html[data-ui="ix"] .panel h2, html[data-ui="ix"] .hint-title, html[data-ui="ix"] .dash-glass h2 { color: var(--ix-text); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } html[data-ui="ix"] .panel h3 { color: var(--ix-text); } html[data-ui="ix"] .panel-danger { border-color: var(--ix-danger-line); background: var(--ix-danger-soft); } html[data-ui="ix"] .panel-danger h2 { color: var(--ix-danger-ink); } html[data-ui="ix"] .dash-kpi-label { color: var(--ix-text-2); } html[data-ui="ix"] .dash-kpi-value { color: var(--ix-text); font-weight: 600; } html[data-ui="ix"] .dash-kpi-delta.up { color: var(--ix-success-ink); } html[data-ui="ix"] .dash-kpi-delta.down { color: var(--ix-danger-ink); } html[data-ui="ix"] .dash-kpi-icon-a, html[data-ui="ix"] .dash-kpi-icon-b, html[data-ui="ix"] .dash-kpi-icon-c { background: var(--ix-accent-soft); box-shadow: none; } html[data-ui="ix"] .empty { color: var(--ix-text-2); } html[data-ui="ix"] .inline-label, html[data-ui="ix"] .panel label, html[data-ui="ix"] .login-box label { color: var(--ix-text-strong); } /* botões */ html[data-ui="ix"] .btn-command { padding: 9px 16px; margin-top: 10px; border: 1px solid transparent; cursor: pointer; } html[data-ui="ix"] .btn-command:disabled { opacity: 0.55; cursor: default; } html[data-ui="ix"] .btn-small, html[data-ui="ix"] .btn-secondary-action, html[data-ui="ix"] .btn-rating, html[data-ui="ix"] .btn-secondary, html[data-ui="ix"] .ed-btn { background: var(--ix-surface); color: var(--ix-text-strong); border: 1px solid var(--ix-border-strong); border-radius: 8px; font-family: var(--ix-font); font-weight: 600; box-shadow: none; text-shadow: none; } html[data-ui="ix"] .btn-small { font-size: 12.5px; padding: 5px 10px; border-radius: 7px; } html[data-ui="ix"] .btn-small:hover, html[data-ui="ix"] .btn-secondary-action:hover, html[data-ui="ix"] .btn-rating:hover, html[data-ui="ix"] .btn-secondary:hover, html[data-ui="ix"] .ed-btn:hover { background: var(--ix-surface-3); color: var(--ix-text); border-color: var(--ix-border-hover); } html[data-ui="ix"] .btn-rating.active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); border-color: var(--ix-accent); } html[data-ui="ix"] .btn-danger, html[data-ui="ix"] .btn-command.btn-danger { background: var(--ix-danger); color: #fff; border-color: transparent; box-shadow: none; } html[data-ui="ix"] .btn-danger:hover { background: var(--ix-danger-ink); color: #fff; } html[data-ui="ix"] .btn-primary-sm, html[data-ui="ix"] .ed-btn-p { background: var(--ix-accent); color: var(--ix-on-accent); border: 1px solid transparent; border-radius: 8px; font-weight: 600; box-shadow: none; } html[data-ui="ix"] .btn-primary-sm:hover, html[data-ui="ix"] .ed-btn-p:hover { background: var(--ix-accent-hover); color: var(--ix-on-accent); } /* campos de formulário (só cor/borda/raio: larguras e paddings continuam os de cada página) */ html[data-ui="ix"] main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), html[data-ui="ix"] main select, html[data-ui="ix"] main textarea, html[data-ui="ix"] .modal-box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), html[data-ui="ix"] .modal-box select, html[data-ui="ix"] .modal-box textarea, html[data-ui="ix"] .ed-inp, html[data-ui="ix"] .cad-inp { background: var(--ix-surface-2); color: var(--ix-text); border: 1px solid var(--ix-border-strong); border-radius: 8px; font-family: var(--ix-font); font-size: 13.5px; } html[data-ui="ix"] main input::placeholder, html[data-ui="ix"] main textarea::placeholder, html[data-ui="ix"] .modal-box input::placeholder, html[data-ui="ix"] .modal-box textarea::placeholder { color: var(--ix-text-3); opacity: 1; } html[data-ui="ix"] main input:focus, html[data-ui="ix"] main select:focus, html[data-ui="ix"] main textarea:focus, html[data-ui="ix"] .modal-box input:focus, html[data-ui="ix"] .modal-box select:focus, html[data-ui="ix"] .modal-box textarea:focus { border-color: var(--ix-accent); box-shadow: var(--ix-ring); outline: none; } html[data-ui="ix"] main input:disabled, html[data-ui="ix"] main select:disabled, html[data-ui="ix"] main textarea:disabled { opacity: 0.6; } html[data-ui="ix"] main option, html[data-ui="ix"] .modal-box option { background: var(--ix-surface-solid, var(--ix-surface)); color: var(--ix-text); } html[data-ui="ix"] main input[type="checkbox"], html[data-ui="ix"] main input[type="radio"], html[data-ui="ix"] main input[type="range"] { accent-color: var(--ix-accent); } html[data-ui="ix"] .form-row select { background: var(--ix-surface-2); border-color: var(--ix-border-strong); color: var(--ix-text); } /* abas / alternadores legados */ html[data-ui="ix"] .toggle-btn { background: var(--ix-surface); border: 1px solid var(--ix-border-strong); color: var(--ix-text-2); border-radius: 8px; font-weight: 600; font-family: var(--ix-font); } html[data-ui="ix"] .toggle-btn .toggle-dot { border-color: var(--ix-text-3); } html[data-ui="ix"] .toggle-btn-option input:checked + .toggle-btn { background: var(--ix-accent); color: var(--ix-on-accent); border-color: var(--ix-accent); } html[data-ui="ix"] .toggle-btn-option input:checked + .toggle-btn .toggle-dot { background: var(--ix-on-accent); border-color: var(--ix-on-accent); } html[data-ui="ix"] .toggle-btn-option input:focus-visible + .toggle-btn { outline: 2px solid var(--ix-accent); outline-offset: 2px; } /* selos de status, tabelas, avisos */ html[data-ui="ix"] .status-pill { font-family: var(--ix-font-mono); font-size: 11.5px; font-weight: 500; } html[data-ui="ix"] .status-ok { background: var(--ix-success-soft); color: var(--ix-success-ink); border: 1px solid var(--ix-success-line); } html[data-ui="ix"] .status-off { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border: 1px solid var(--ix-danger-line); } html[data-ui="ix"] .status-table td, html[data-ui="ix"] .status-table th { border-bottom-color: var(--ix-divider); color: var(--ix-text); } html[data-ui="ix"] .status-table th, html[data-ui="ix"] .admin-users-table th { color: var(--ix-text-2); font-weight: 600; } html[data-ui="ix"] .log-box { background: var(--ix-surface-2); border: 1px solid var(--ix-border); color: var(--ix-text-strong); } html[data-ui="ix"] .flashes { color: var(--ix-danger-ink); } html[data-ui="ix"] .flashes.ok { color: var(--ix-success-ink); } html[data-ui="ix"] .feature-no { color: var(--ix-text-2); } html[data-ui="ix"] .hint-small a, html[data-ui="ix"] .panel a:not([class]) { color: var(--ix-accent-ink); } html[data-ui="ix"] code, html[data-ui="ix"] kbd { color: var(--ix-text-strong); } html[data-ui="ix"] hr { border-color: var(--ix-divider); } html[data-ui="ix"] .ix-ico-danger { color: var(--ix-danger); } html[data-ui="ix"] .ix-ico-warning { color: var(--ix-warning); } /* legado: texto de botões/selos com fundo de acento usava #fff fixo -> cor "sobre acento" do tema */ html[data-ui="ix"] .add-keyword-form button, html[data-ui="ix"] .admin-form button, html[data-ui="ix"] .ai-resumo-btn, html[data-ui="ix"] .btn-add-assunto, html[data-ui="ix"] .btn-apply, html[data-ui="ix"] .btn-buscar-tudo, html[data-ui="ix"] .btn-command, html[data-ui="ix"] .btn-primary-sm, html[data-ui="ix"] .conta-page button, html[data-ui="ix"] .ed-n, html[data-ui="ix"] .em-dev-cta, html[data-ui="ix"] .estudio-pauta-cta, html[data-ui="ix"] .estudio-pill-group input:checked + label, html[data-ui="ix"] .login-box button, html[data-ui="ix"] .mobile-filter-btn, html[data-ui="ix"] .modal-dismiss, html[data-ui="ix"] .onboarding-nav-next, html[data-ui="ix"] .pagamento-tab.active, html[data-ui="ix"] .plan-card-featured-tag, html[data-ui="ix"] .plan-level-pill-btn.current, html[data-ui="ix"] .plan-toggle-btn.active, html[data-ui="ix"] .search-type-option input:checked + .search-type-btn, html[data-ui="ix"] .sidebar-widget-badge, html[data-ui="ix"] .stats-choose button, html[data-ui="ix"] .ticker-status-btn, html[data-ui="ix"] .toggle-btn-option input:checked + .toggle-btn { color: var(--ix-on-accent); } /* faixas do topo (teste grátis, gastos, pagamento, graça): cinza médio + texto branco em todos os temas */ html[data-ui="ix"] { --ix-banner-bg: #5B6270; --ix-banner-bd: #727A89; } html[data-ui="ix"][data-ix-tom="claro"] { --ix-banner-bg: #6B7382; --ix-banner-bd: #818998; } html[data-ui="ix"][data-ix-tom="medio"] { --ix-banner-bg: #5A606C; --ix-banner-bd: #707786; } html[data-ui="ix"][data-ix-tom="noite"][data-ix-matiz="azul"] { --ix-banner-bg: #4F586B; --ix-banner-bd: #657089; } html[data-ui="ix"] .trial-banner { background: var(--ix-banner-bg) !important; border-bottom: 1px solid var(--ix-banner-bd); color: #fff; } html[data-ui="ix"] .trial-banner b, html[data-ui="ix"] .trial-banner span { color: #fff; } html[data-ui="ix"] .trial-banner-btn { background: #fff; color: #2B303B; } html[data-ui="ix"] .trial-banner-btn:hover { background: #E8EBF0; } html[data-ui="ix"] .trial-banner.trial-banner-danger { box-shadow: inset 4px 0 0 var(--ix-danger); } html[data-ui="ix"] .trial-banner.trial-banner-warn { box-shadow: inset 4px 0 0 var(--ix-warning); } html[data-ui="ix"] .plan-card-features li.feature-no { opacity: 1; color: var(--ix-text-2); } /* cartões de assunto sobre foto (kwm-*) têm véu escuro fixo: texto claro em qualquer tema */ html[data-ui="ix"] .kwm-chip-unread { color: #E6F0FF; border-color: rgba(255, 255, 255, 0.3); } /* ---------- 11c. Menus e pop-ups (Fase B1, 2026-10-02) ---------- */ /* ícone de título dos pop-ups (bom dia, onboarding, avisos, confirmações) */ html[data-ui="ix"] .modal-box h2 { display: flex; align-items: center; justify-content: center; gap: 8px; } html[data-ui="ix"] .modal-box h2[style*="text-align:left"], html[data-ui="ix"] .modal-box.pub-modal-box h2 { justify-content: flex-start; } html[data-ui="ix"] .ix-pop-ico { width: 20px; height: 20px; color: var(--ix-accent-ink); vertical-align: 0; } html[data-ui="ix"] .modal-box .btn-command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; } html[data-ui="ix"] .modal-box .btn-command .ix-pop-ico { width: 16px; height: 16px; color: inherit; } html[data-ui="ix"] .trial-banner .ix-pop-ico, html[data-ui="ix"] .trial-banner .ix-ico { width: 16px; height: 16px; color: inherit; vertical-align: -3px; margin-right: 4px; } html[data-ui="ix"] .modal-dismiss:focus-visible, html[data-ui="ix"] .btn-command:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 2px; } /* sidebar: rótulos de seção, foco por teclado, itens desabilitados */ html[data-ui="ix"] .ix-nav-label { margin: 14px 10px 4px; } html[data-ui="ix"] .ix-nav-label:first-child { margin-top: 2px; } html[data-ui="ix"] .sidebar-link:focus-visible, html[data-ui="ix"] .sidebar-sublink:focus-visible, html[data-ui="ix"] .sidebar-group-toggle:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: -2px; border-radius: var(--ix-radius-sm); } html[data-ui="ix"] .sidebar-link:active, html[data-ui="ix"] .sidebar-sublink:active { background: var(--ix-surface-3); } html[data-ui="ix"] .sidebar-link[aria-disabled="true"], html[data-ui="ix"] .sidebar-sublink[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } html[data-ui="ix"] .sidebar-sublink.sidebar-link-active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-weight: 600; } /* topbar e menu da conta: foco, ativo, desabilitado */ html[data-ui="ix"] .conta-dropdown-menu a, html[data-ui="ix"] .conta-dropdown-menu-btn { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-radius: var(--ix-radius-sm); color: var(--ix-text-strong); font-size: 13.5px; font-weight: 500; } html[data-ui="ix"] .conta-dropdown-menu a .ix-ico, html[data-ui="ix"] .conta-dropdown-menu-btn .ix-ico { color: var(--ix-text-2); } html[data-ui="ix"] .conta-dropdown-menu a:hover, html[data-ui="ix"] .conta-dropdown-menu-btn:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .conta-dropdown-menu a.active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .conta-dropdown-menu a:focus-visible, html[data-ui="ix"] .conta-dropdown-menu-btn:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: -2px; } html[data-ui="ix"] .app-topbar button:disabled, html[data-ui="ix"] .conta-dropdown-menu button:disabled { opacity: 0.5; cursor: default; } /* busca global (Ctrl K): ícones do sprite nos grupos/estados */ html[data-ui="ix"] .busca-global-grupo-titulo .ix-ico, html[data-ui="ix"] .busca-global-item-icone .ix-ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; color: var(--ix-text-3); } html[data-ui="ix"] .busca-global-item-icone .ix-ico { margin: 0; width: 16px; height: 16px; } html[data-ui="ix"] .busca-popup-estado > span .ix-ico { width: 26px; height: 26px; color: var(--ix-text-3); } /* emoji -> sprite feito por static/js/ix-emoji.js (botões, títulos, rótulos) */ html[data-ui="ix"] .ix-emo { width: 1.05em; height: 1.05em; margin-right: 0.45em; vertical-align: -0.17em; flex-shrink: 0; } html[data-ui="ix"] h1 .ix-emo, html[data-ui="ix"] h2 .ix-emo, html[data-ui="ix"] h3 .ix-emo, html[data-ui="ix"] h4 .ix-emo, html[data-ui="ix"] legend .ix-emo { color: var(--ix-text-2); } html[data-ui="ix"] .panel h2 .ix-emo, html[data-ui="ix"] .hint-title .ix-emo { color: var(--ix-accent-ink); } /* ---------- 11d. Páginas B2 (2026-10-02) ---------- */ /* barra de uso (Meu plano) */ html[data-ui="ix"] .ix-meter { height: 6px; border-radius: 999px; background: var(--ix-gauge-off); overflow: hidden; margin: 8px 0 14px; max-width: 420px; } html[data-ui="ix"] .ix-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ix-accent); } html[data-ui="ix"] .plan-current { margin: 0 0 2px; font-size: 14px; color: var(--ix-text-2); } html[data-ui="ix"] .plan-current b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ix-text); margin-left: 4px; } html[data-ui="ix"] .plan-advantages-list li { color: var(--ix-text-strong); font-size: 13.5px; } html[data-ui="ix"] .plan-advantages-list li::before { color: var(--ix-success-ink); } /* abas Para você / Para empresas = controle segmentado */ html[data-ui="ix"] .plan-toggle-group { display: inline-flex; gap: 2px; padding: 3px; margin: 18px 0 20px; border: 1px solid var(--ix-border); border-radius: 10px; background: var(--ix-surface-2); } html[data-ui="ix"] #plan-tabs .plan-toggle-btn { flex: 0 0 auto; padding: 7px 16px; } html[data-ui="ix"] .plan-toggle-btn { background: transparent; border: 0; border-radius: 7px; color: var(--ix-text-2); font-family: var(--ix-font); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: none; } html[data-ui="ix"] .plan-toggle-btn:hover { color: var(--ix-text); } html[data-ui="ix"] .plan-toggle-btn.active { background: var(--ix-surface); color: var(--ix-text); box-shadow: 0 0 0 1px var(--ix-border-strong), var(--ix-shadow-xs); } html[data-ui="ix"] .plan-toggle-btn:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 1px; } /* cards de plano */ html[data-ui="ix"] .plan-cards-grid { gap: var(--ix-gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } html[data-ui="ix"] .plan-card { position: relative; display: flex; flex-direction: column; padding: 22px 20px 20px; text-align: left; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); transition: border-color 0.14s ease, box-shadow 0.14s ease; transform: none; } html[data-ui="ix"] .plan-card:hover { transform: none; border-color: var(--ix-border-strong); box-shadow: var(--ix-shadow-sm); } html[data-ui="ix"] .plan-card.plan-card-featured { border-color: var(--ix-accent); box-shadow: 0 0 0 1px var(--ix-accent), var(--ix-shadow-sm); } html[data-ui="ix"] .plan-card-featured-tag, html[data-ui="ix"] .plan-card-current-tag { position: absolute; top: -10px; left: 16px; right: auto; transform: none; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; box-shadow: none; } html[data-ui="ix"] .plan-card-featured-tag { background: var(--ix-accent); color: var(--ix-on-accent); } html[data-ui="ix"] .plan-card-current-tag { background: var(--ix-success-soft); color: var(--ix-success-ink); border: 1px solid var(--ix-success-line); backdrop-filter: blur(6px); } html[data-ui="ix"] .plan-card-name { margin: 2px 0 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--ix-text-2); } html[data-ui="ix"] .plan-card-price { margin: 0 0 4px; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; color: var(--ix-text); font-variant-numeric: tabular-nums; } html[data-ui="ix"] .plan-card-price small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ix-text-2); } html[data-ui="ix"] .plan-card-features { margin: 16px 0 18px; padding: 0; list-style: none; } html[data-ui="ix"] .plan-card-features li { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--ix-divider); font-size: 13px; line-height: 1.4; color: var(--ix-text-strong); } html[data-ui="ix"] .plan-card-features li:last-child { border-bottom: 0; } html[data-ui="ix"] .plan-card-features li.feature-no { color: var(--ix-text-2); } html[data-ui="ix"] .plan-ico { width: 15px; height: 15px; margin-top: 2px; vertical-align: 0; } html[data-ui="ix"] .plan-ico-yes { color: var(--ix-success-ink); } html[data-ui="ix"] .plan-ico-no { color: var(--ix-text-3); } html[data-ui="ix"] .plan-card .btn-command { margin-top: auto; width: 100%; box-sizing: border-box; text-align: center; } html[data-ui="ix"] .plan-change-btn { display: inline-flex; margin-top: 18px; } html[data-ui="ix"] .web-section-sub { color: var(--ix-text-2); font-size: 13.5px; } /* histórico de pagamentos = lista com divisórias */ html[data-ui="ix"] .pagamento-historico { list-style: none; margin: 12px 0 0; padding: 0; } html[data-ui="ix"] .pagamento-historico-item { padding: 12px 2px; background: none; border: 0; border-bottom: 1px solid var(--ix-divider); border-radius: 0; box-shadow: none; } html[data-ui="ix"] .pagamento-historico-item:last-child { border-bottom: 0; } html[data-ui="ix"] .pagamento-historico-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html[data-ui="ix"] .pagamento-historico-topo b { font-size: 14px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .pagamento-historico-status { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--ix-surface-3); color: var(--ix-text-strong); border: 1px solid var(--ix-border); } html[data-ui="ix"] .pagamento-status-aprovado .pagamento-historico-status { background: var(--ix-success-soft); color: var(--ix-success-ink); border-color: var(--ix-success-line); } html[data-ui="ix"] .pagamento-status-recusado .pagamento-historico-status { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .pagamento-status-pendente .pagamento-historico-status { background: var(--ix-warning-soft); color: var(--ix-warning-ink); border-color: var(--ix-warning-line); } html[data-ui="ix"] .pagamento-historico-meta { margin: 3px 0 0; } html[data-ui="ix"] .pagamento-historico-acoes { display: flex; gap: 8px; margin-top: 8px; } /* Conta (perfil, senha, aparência, notificações, motores, IA, plano de fundo): largura de leitura + formulários nos tokens */ html[data-ui="ix"] main.conta-page > .panel { margin-bottom: var(--ix-gap); } html[data-ui="ix"] .conta-page label { font-size: 13px; font-weight: 600; color: var(--ix-text-strong); margin-top: 14px; display: block; } html[data-ui="ix"] .conta-page label.label-emphasis { font-size: 13px; font-weight: 600; color: var(--ix-text-strong); } html[data-ui="ix"] .conta-page input[type="text"], html[data-ui="ix"] .conta-page input[type="email"], html[data-ui="ix"] .conta-page input[type="password"], html[data-ui="ix"] .conta-page input[type="tel"], html[data-ui="ix"] .conta-page input[type="number"], html[data-ui="ix"] .conta-page select { min-height: 38px; box-sizing: border-box; padding: 8px 12px; } html[data-ui="ix"] .conta-page button[type="submit"]:not(.btn-small):not(.btn-secondary-sm):not(.btn-command):not(.btn-danger) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; margin-top: 16px; border-radius: 8px; border: 1px solid transparent; background: var(--ix-accent); color: var(--ix-on-accent); font-family: var(--ix-font); font-size: 13.5px; font-weight: 600; cursor: pointer; box-shadow: var(--ix-btn-shadow); } html[data-ui="ix"] .conta-page button[type="submit"]:not(.btn-small):not(.btn-secondary-sm):not(.btn-command):not(.btn-danger):hover { background: var(--ix-accent-hover); } html[data-ui="ix"] input[type="file"] { color: var(--ix-text-2); font-family: var(--ix-font); font-size: 13px; } html[data-ui="ix"] input[type="file"]::file-selector-button { height: 32px; padding: 0 12px; margin-right: 10px; border-radius: 7px; border: 1px solid var(--ix-border-strong); background: var(--ix-surface-3); color: var(--ix-text-strong); font-family: var(--ix-font); font-size: 12.5px; font-weight: 600; cursor: pointer; } html[data-ui="ix"] input[type="file"]::file-selector-button:hover { background: var(--ix-surface-2); border-color: var(--ix-border-hover); } html[data-ui="ix"] .btn-small:disabled, html[data-ui="ix"] .btn-small[disabled] { opacity: 0.5; } /* Aparência: escolha de tema por cartões com miniatura */ html[data-ui="ix"] .ix-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 10px; } html[data-ui="ix"] .ix-theme-card { position: relative; display: block; margin: 0; cursor: pointer; } html[data-ui="ix"] .ix-theme-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } html[data-ui="ix"] .ix-theme-prev { display: grid; grid-template-columns: 26% 1fr; grid-template-rows: 14px 1fr 1fr; gap: 5px; height: 96px; padding: 8px; box-sizing: border-box; border: 1px solid var(--ix-border-strong); border-radius: var(--ix-radius); background: var(--pv-bg); transition: box-shadow 0.14s ease, border-color 0.14s ease; } html[data-ui="ix"] .ix-theme-prev i { border-radius: 4px; background: var(--pv-card); border: 1px solid var(--pv-line); } html[data-ui="ix"] .ix-theme-prev i.a { grid-row: 1 / 4; } html[data-ui="ix"] .ix-theme-prev i.b { background: var(--pv-card); } html[data-ui="ix"] .ix-theme-prev i.c { background: linear-gradient(90deg, var(--pv-acc) 0 38%, var(--pv-card) 38%); } html[data-ui="ix"] .ix-theme-prev--claro { --pv-bg: #F5F7FA; --pv-card: #FFFFFF; --pv-line: #E3E8EF; --pv-acc: #0A6CE8; } html[data-ui="ix"] .ix-theme-prev--medio { --pv-bg: #1B1D21; --pv-card: #2A2D33; --pv-line: #3C4048; --pv-acc: #F4F5F7; } html[data-ui="ix"] .ix-theme-prev--noite { --pv-bg: #000000; --pv-card: #0C0C0E; --pv-line: #232326; --pv-acc: #F4F5F7; } html[data-ui="ix"] .ix-theme-prev--noite_azul { --pv-bg: #000205; --pv-card: #040B18; --pv-line: #17335C; --pv-acc: #4AA6FF; } html[data-ui="ix"] .ix-theme-name { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-theme-card:hover .ix-theme-prev { border-color: var(--ix-border-hover); } html[data-ui="ix"] .ix-theme-card input:checked ~ .ix-theme-prev { border-color: var(--ix-accent); box-shadow: 0 0 0 2px var(--ix-accent); } html[data-ui="ix"] .ix-theme-card input:checked ~ .ix-theme-name { color: var(--ix-text); } html[data-ui="ix"] .ix-theme-card input:focus-visible ~ .ix-theme-prev { outline: 2px solid var(--ix-accent); outline-offset: 3px; } /* Notificações: cartões de canal */ html[data-ui="ix"] .conta-notif-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } html[data-ui="ix"] .conta-notif-link-card { display: block; padding: 16px; background: var(--ix-surface-2); border: 1px solid var(--ix-border); border-radius: var(--ix-radius); text-decoration: none; color: var(--ix-text); transition: border-color 0.14s ease, background-color 0.14s ease; } html[data-ui="ix"] .conta-notif-link-card:hover { border-color: var(--ix-border-strong); background: var(--ix-surface-3); } html[data-ui="ix"] .conta-notif-link-card .emoji { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-size: 0; } html[data-ui="ix"] .conta-notif-link-card .emoji .ix-ico { width: 18px; height: 18px; vertical-align: 0; } html[data-ui="ix"] .conta-notif-link-card h3 { margin: 10px 0 4px; font-size: 14.5px; font-weight: 600; color: var(--ix-text); } /* Assuntos: botão de adicionar compacto (era faixa de largura total) */ html[data-ui="ix"] .btn-add-assunto { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 36px; padding: 0 16px; margin: 0 0 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; box-shadow: var(--ix-btn-shadow); filter: none; align-self: flex-start; justify-self: start; } html[data-ui="ix"] .btn-add-assunto:hover { filter: none; background: var(--ix-accent-hover); } /* `.conta-page button` (legado: fundo de acento + texto "sobre acento") vence botões secundários: reafirma-os com a mesma especificidade */ html[data-ui="ix"] .conta-page button.btn-small, html[data-ui="ix"] .conta-page button.btn-secondary-sm { background: var(--ix-surface); color: var(--ix-text-strong); border: 1px solid var(--ix-border-strong); box-shadow: none; } html[data-ui="ix"] .conta-page button.btn-small:hover, html[data-ui="ix"] .conta-page button.btn-secondary-sm:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .conta-page button.plan-toggle-btn { background: transparent; color: var(--ix-text-2); border: 0; box-shadow: none; } html[data-ui="ix"] .conta-page button.plan-toggle-btn:hover { color: var(--ix-text); } html[data-ui="ix"] .conta-page button.plan-toggle-btn.active { background: var(--ix-surface); color: var(--ix-text); box-shadow: 0 0 0 1px var(--ix-border-strong), var(--ix-shadow-xs); } /* Assuntos: botão compacto também dentro das páginas legadas que o forçavam a largura total */ html[data-ui="ix"] .keywords-page .btn-add-assunto, html[data-ui="ix"] .kwh-page .btn-add-assunto, html[data-ui="ix"] .kwm-actions .btn-add-assunto { display: inline-flex; width: auto; margin: 0 0 16px; align-self: flex-start; justify-self: start; } /* Monitorado por IA (estatisticas): caixas sobre foto mais sóbrias (véu mais escuro, sem neon) */ html[data-ui="ix"] .stats-select-box { border-radius: var(--ix-radius-lg); border-color: var(--ix-border); } html[data-ui="ix"] .stats-select-box:hover { border-color: var(--ix-border-hover); box-shadow: var(--ix-shadow-md); } html[data-ui="ix"] .stats-select-dark { background: rgba(0, 0, 0, 0.72); } html[data-ui="ix"] .stats-select-overlay { opacity: 0.1; } html[data-ui="ix"] .stats-select-title { font-family: var(--ix-font); font-weight: 600; letter-spacing: -0.01em; color: #fff; } html[data-ui="ix"] .stats-select-mini-seg { border-radius: 5px; box-shadow: none; font-weight: 600; color: #fff; } html[data-ui="ix"] .stats-select-mini-seg:not(.current) { opacity: 0.5; filter: saturate(0.55); } html[data-ui="ix"] .stats-select-mini-seg.current { box-shadow: none; outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 1px; position: relative; } html[data-ui="ix"] .stats-select-count-pill { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.14); } html[data-ui="ix"] .stats-select-count-pill.total, html[data-ui="ix"] .stats-select-count-pill.falsa { background: rgba(255, 255, 255, 0.12); } html[data-ui="ix"] .stats-select-count-pill.falsa { color: #FFB4AE; } /* ---------- 11e. Largura total + padrão para páginas novas ---------- Toda página usa a largura disponível ao lado da sidebar (nada de max-width de 880–1680px). O que fica "estreito" são só os CAMPOS de formulário (leitura confortável), nunca o painel. Página nova:
. */ html[data-ui="ix"] :is(.ix-container, .conta-page, .keywords-page, .config-page, .cfg-wide, .stats-page, .stats-choose, .trend-page, .sobre-page, .estudio-page, .resumo-page, .dashboard-layout, .page-top-row, .cfg-hub-page, .central-page) { max-width: none !important; width: 100%; box-sizing: border-box; } html[data-ui="ix"] main.conta-page > .panel, html[data-ui="ix"] main.conta-page > form { width: 100%; box-sizing: border-box; } html[data-ui="ix"] .conta-page :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], select) { max-width: 560px; } html[data-ui="ix"] .conta-page textarea { max-width: 820px; } html[data-ui="ix"] .conta-page .ix-theme-grid, html[data-ui="ix"] .conta-page .conta-notif-links { max-width: none; } /* ---------- 11f. Estúdio Mídia & Crise: abas, áreas de trabalho, fila, calendário, pop-ups ---------- Fluxo do Estúdio = CRIAR (pautas, posts, carrosséis, roteiros, reels) -> GERENCIAR (publicações, calendário, redes, logs). Cabeçalho + abas vêm de _page_hero.html/_estudio_tabs.html. Painéis usam os mesmos tokens do Resumo (nada de cor fixa). */ html[data-ui="ix"] .ix-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 var(--ix-gap); padding-bottom: 12px; border-bottom: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-tabs-group { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; } html[data-ui="ix"] .ix-tabs-group + .ix-tabs-group { padding-left: 18px; border-left: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-tabs-label { margin-right: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .ix-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px; border-radius: var(--ix-radius-sm); font-size: 13px; font-weight: 500; color: var(--ix-text-2); text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease; } html[data-ui="ix"] .ix-tab .ix-ico { width: 15px; height: 15px; vertical-align: 0; color: var(--ix-text-3); } html[data-ui="ix"] .ix-tab:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .ix-tab.is-active { background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-weight: 600; } html[data-ui="ix"] .ix-tab.is-active .ix-ico { color: var(--ix-accent); } html[data-ui="ix"] .ix-tab:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: 2px; } /* área de trabalho: configuração (esquerda) + resultado (direita, fixo ao rolar) */ html[data-ui="ix"] .estudio-page { gap: var(--ix-gap); } html[data-ui="ix"] .estudio-grid-2col { grid-template-columns: minmax(320px, 5fr) minmax(0, 7fr); gap: var(--ix-gap); } html[data-ui="ix"] .estudio-grid-2col > .estudio-panel:last-child { position: sticky; top: calc(58px + var(--ix-gap) + var(--top-banner-offset, 0px)); } html[data-ui="ix"] .estudio-panel, html[data-ui="ix"] .car-passo, html[data-ui="ix"] .car-card, html[data-ui="ix"] .estudio-pauta-card, html[data-ui="ix"] .pub-filtros, html[data-ui="ix"] .cal-grid, html[data-ui="ix"] .estudio-lock-card { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-ui="ix"] .estudio-panel { padding: var(--ix-panel-pad); } html[data-ui="ix"] .estudio-panel h2, html[data-ui="ix"] .car-passo h2, html[data-ui="ix"] .car-card h2 { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; color: var(--ix-text); display: flex; align-items: center; gap: 8px; } html[data-ui="ix"] .estudio-pautas-section h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: var(--ix-text-3); } html[data-ui="ix"] .estudio-monitorados-assunto h4 { color: var(--ix-text-strong); font-weight: 600; } html[data-ui="ix"] .estudio-page label.estudio-label { font-size: 11.5px; letter-spacing: 0.04em; color: var(--ix-text-2); } html[data-ui="ix"] .car-num { width: 22px; height: 22px; background: var(--ix-accent); color: var(--ix-on-accent); font-size: 12px; font-weight: 600; } html[data-ui="ix"] .estudio-page input, html[data-ui="ix"] .estudio-page select, html[data-ui="ix"] .estudio-page textarea { border-color: var(--ix-border-strong); background: var(--ix-surface-2); color: var(--ix-text); border-radius: var(--ix-radius-sm); } html[data-ui="ix"] .estudio-page input:focus, html[data-ui="ix"] .estudio-page select:focus, html[data-ui="ix"] .estudio-page textarea:focus { outline: 2px solid var(--ix-accent); outline-offset: 0; border-color: var(--ix-accent); } html[data-ui="ix"] .estudio-pill-group label { background: var(--ix-surface-2); border-color: var(--ix-border-strong); color: var(--ix-text-2); } html[data-ui="ix"] .estudio-pill-group label:hover { border-color: var(--ix-border-hover); color: var(--ix-text); } html[data-ui="ix"] .estudio-pill-group input:checked + label { box-shadow: none; background: var(--ix-accent); border-color: var(--ix-accent); color: var(--ix-on-accent); font-weight: 600; } html[data-ui="ix"] .estudio-pill-group input:focus-visible + label { outline: 2px solid var(--ix-accent); outline-offset: 2px; } html[data-ui="ix"] .estudio-preview-img, html[data-ui="ix"] .estudio-preview-placeholder { border-color: var(--ix-border); } html[data-ui="ix"] .estudio-caption-box { background: var(--ix-surface-2); border-color: var(--ix-border); color: var(--ix-text-strong); } html[data-ui="ix"] .estudio-hashtag { background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .estudio-monitorados-noticia { background: var(--ix-surface-2); border-color: var(--ix-border); color: var(--ix-text-strong); } html[data-ui="ix"] .estudio-monitorados-noticia:hover { border-color: var(--ix-border-hover); background: var(--ix-surface-3); } html[data-ui="ix"] .estudio-pauta-card { padding: var(--ix-panel-pad); } html[data-ui="ix"] .estudio-pauta-score.quente { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .estudio-pauta-score.tendencia { background: var(--ix-warning-soft); color: var(--ix-warning-ink); border-color: var(--ix-warning-line); } html[data-ui="ix"] .estudio-pauta-cta { box-shadow: var(--ix-btn-shadow); } html[data-ui="ix"] .estudio-actions-row { align-items: center; gap: 8px; } html[data-ui="ix"] .estudio-lock-card { padding: 48px 24px; } html[data-ui="ix"] .estudio-lock-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; font-size: 0; border-radius: 14px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .estudio-lock-icon .ix-ico { width: 24px; height: 24px; vertical-align: 0; } /* Publicações (kanban), filtros, calendário */ html[data-ui="ix"] .estudio-kanban-col, html[data-ui="ix"] .pub-kanban-col { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); } html[data-ui="ix"] .estudio-kanban-col h3, html[data-ui="ix"] .pub-kanban-col h3 { color: var(--ix-text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; } html[data-ui="ix"] .estudio-kanban-col h3 span, html[data-ui="ix"] .pub-kanban-col h3 span { background: var(--ix-surface-3); color: var(--ix-text-strong); } html[data-ui="ix"] .estudio-kanban-card, html[data-ui="ix"] .pub-card { background: var(--ix-surface-2); border-color: var(--ix-border); } html[data-ui="ix"] .estudio-kanban-col.kanban-dragover { border-color: var(--ix-accent); background: var(--ix-accent-soft); } html[data-ui="ix"] .pub-card-face:hover, html[data-ui="ix"] .pub-card-face:focus-visible { background: var(--ix-surface-3); } html[data-ui="ix"] .pub-card-title { color: var(--ix-text); } html[data-ui="ix"] .pub-card-data { color: var(--ix-text-3); } html[data-ui="ix"] .pub-card-erro { color: var(--ix-danger-ink); } html[data-ui="ix"] .pub-chip { background: var(--ix-surface-3); color: var(--ix-text-2); border-color: var(--ix-border); } html[data-ui="ix"] .pub-chip-assunto { color: var(--ix-accent-ink); border-color: var(--ix-border-strong); background: var(--ix-accent-soft); } html[data-ui="ix"] .pub-filtro-btn { background: var(--ix-surface-2); border-color: var(--ix-border); color: var(--ix-text-2); } html[data-ui="ix"] .pub-filtro-btn.is-active { color: var(--ix-accent-ink); border-color: var(--ix-accent); background: var(--ix-accent-soft); } html[data-ui="ix"] .pub-dot { background: var(--ix-border-strong); } html[data-ui="ix"] .pub-dot.is-active { background: var(--ix-accent); } html[data-ui="ix"] .pub-slot { border-color: var(--ix-border-strong); color: var(--ix-text-2); background: var(--ix-surface-2); } html[data-ui="ix"] .pub-agendar-form { background: var(--ix-surface-2); border: 1px solid var(--ix-border); } html[data-ui="ix"] .cal-dia { background: var(--ix-surface-2); border-color: var(--ix-border); } html[data-ui="ix"] .cal-dia-vazio { background: transparent; border-color: transparent; } html[data-ui="ix"] .cal-dia-hoje { border-color: var(--ix-accent); box-shadow: 0 0 0 1px var(--ix-accent) inset; } html[data-ui="ix"] .cal-dia-hoje .cal-dia-num { color: var(--ix-accent-ink); } html[data-ui="ix"] .cal-dia-nome, html[data-ui="ix"] .cal-dia-num { color: var(--ix-text-3); } html[data-ui="ix"] .cal-evento-face { background: var(--ix-surface-3); color: var(--ix-text-strong); border: 1px solid var(--ix-border); } html[data-ui="ix"] .cal-evento-face:hover, html[data-ui="ix"] .cal-evento-face:focus-visible { border-color: var(--ix-accent); } html[data-ui="ix"] .cal-evento-hora { color: var(--ix-accent-ink); } html[data-ui="ix"] .car-aviso { color: var(--ix-warning-ink); } /* Pop-ups do Estúdio: seletor de IA, detalhes da publicação, pergunta de apagar */ html[data-ui="ix"] .ia-modal:not([hidden]) { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } html[data-ui="ix"] .ia-modal-box { background: var(--ix-surface-solid, var(--ix-surface)); border: 1px solid var(--ix-border-strong); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-pop); color: var(--ix-text); backdrop-filter: none; } html[data-ui="ix"] .ia-modal-box h2 { font-size: 16px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .ia-card { background: var(--ix-surface-2); border-color: var(--ix-border); color: var(--ix-text); } html[data-ui="ix"] .ia-card:hover { border-color: var(--ix-border-hover); } html[data-ui="ix"] .ia-card:has(input:checked) { border-color: var(--ix-accent); box-shadow: 0 0 0 1px var(--ix-accent) inset; background: var(--ix-accent-soft); } html[data-ui="ix"] .ia-card:has(input:focus-visible) { outline: 2px solid var(--ix-accent); outline-offset: 2px; } html[data-ui="ix"] .ia-card-destaque { border-color: var(--ix-accent); background: var(--ix-accent-soft); } html[data-ui="ix"] .ia-erro { background: var(--ix-danger-soft); border-color: var(--ix-danger-line); color: var(--ix-danger-ink); } html[data-ui="ix"] .ia-selo-ok { color: var(--ix-success-ink); border-color: var(--ix-success-line); background: var(--ix-success-soft); } html[data-ui="ix"] .ia-selo-aviso, html[data-ui="ix"] .ia-aviso { color: var(--ix-warning-ink); } html[data-ui="ix"] .ia-selo-aviso { border-color: var(--ix-warning-line); background: var(--ix-warning-soft); } html[data-ui="ix"] .ia-selo-ruim { color: var(--ix-danger-ink); border-color: var(--ix-danger-line); background: var(--ix-danger-soft); } html[data-ui="ix"] .ia-barra { background: var(--ix-gauge-off); } html[data-ui="ix"] .ia-barra span { background: var(--ix-accent); } html[data-ui="ix"] .ia-barra-media span { background: var(--ix-warning-ink); } html[data-ui="ix"] .ia-barra-alta span { background: var(--ix-danger-ink); } html[data-ui="ix"] .modal-box.pub-modal-box { background: var(--ix-surface-solid, var(--ix-surface)); } html[data-ui="ix"] .pub-modal-head { border-bottom: 1px solid var(--ix-divider); } html[data-ui="ix"] .pub-modal-head h2 { font-size: 15px; font-weight: 600; } /* "1 Escolha a notícia": um bloco por assunto, lado a lado (a lista longa não empurra o formulário pra baixo) */ html[data-ui="ix"] .estudio-monitorados-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px var(--ix-gap); align-items: start; margin-bottom: 0; } html[data-ui="ix"] .estudio-monitorados-panel > h2 { grid-column: 1 / -1; } html[data-ui="ix"] .estudio-monitorados-assunto { margin-bottom: 0; min-width: 0; } html[data-ui="ix"] .estudio-monitorados-noticia { min-width: 0; } /* Módulo em desenvolvimento / listas de apoio (Gestão de Crise e Encaminhadas) */ html[data-ui="ix"] .em-dev-page { display: block; min-height: 0; text-align: left; } html[data-ui="ix"] .ix-checklist { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; } html[data-ui="ix"] .ix-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-checklist .ix-ico { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; vertical-align: 0; color: var(--ix-text-3); } html[data-ui="ix"] .ix-emdev-foot { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--ix-divider); font-size: 12.5px; } html[data-ui="ix"] .ix-emdev-foot .ix-ico { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 2px; vertical-align: 0; } html[data-ui="ix"] .ix-linklist { display: flex; flex-direction: column; } html[data-ui="ix"] .ix-linkrow { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--ix-divider); font-size: 13.5px; font-weight: 500; color: var(--ix-text); text-decoration: none; } html[data-ui="ix"] .ix-linkrow:first-child { border-top: 0; } html[data-ui="ix"] .ix-linkrow > span { flex: 1; min-width: 0; } html[data-ui="ix"] .ix-linkrow .ix-ico { width: 16px; height: 16px; vertical-align: 0; color: var(--ix-text-2); } html[data-ui="ix"] .ix-linkrow .ix-linkrow-go { width: 14px; height: 14px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-linkrow:hover { color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-linkrow:hover .ix-ico { color: var(--ix-accent); } html[data-ui="ix"] .ix-linkrow--muted { color: var(--ix-text-2); } @media (min-width: 881px) { html[data-ui="ix"] .ia-acoes > button { flex: 0 0 auto; width: auto; min-width: 104px; } } @media (max-width: 1100px) { html[data-ui="ix"] .estudio-grid-2col { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .estudio-grid-2col > .estudio-panel:last-child { position: static; } } @media (max-width: 880px) { html[data-ui="ix"] .ix-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; } html[data-ui="ix"] .ix-tabs-group { flex-wrap: nowrap; } } /* Avisos legados com cor inline pensada para fundo escuro: no claro/médio viram a tinta do token (AA) */ html[data-ui="ix"] [style*="color:#fca5a5"], html[data-ui="ix"] [style*="color: #fca5a5"] { color: var(--ix-danger-ink) !important; } html[data-ui="ix"] [style*="color:#fbbf24"], html[data-ui="ix"] [style*="color: #fbbf24"] { color: var(--ix-warning-ink) !important; } html[data-ui="ix"] [style*="color:#86efac"], html[data-ui="ix"] [style*="color: #86efac"] { color: var(--ix-success-ink) !important; } html[data-ui="ix"] .stats-select-mini-seg.current { color: #0B0C0E; font-weight: 700; } html[data-ui="ix"] .web-topbar .nav-sep { color: var(--ix-text-3); } /* ---------- 11g. Ficha única de assunto (cadastro/edição) + "Não relevante" no card ---------- */ html[data-ui="ix"] .fx-form { display: block; } html[data-ui="ix"] .fx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--ix-gap); align-items: start; } html[data-ui="ix"] .fx-grid > .fx-f, html[data-ui="ix"] .fx-grid > .fx-adv { grid-column: 1; } html[data-ui="ix"] .fx-prev { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: calc(58px + var(--ix-gap) + var(--top-banner-offset, 0px)); display: flex; flex-direction: column; gap: var(--ix-gap); min-width: 0; } html[data-ui="ix"] .fx-f, html[data-ui="ix"] .fx-box, html[data-ui="ix"] .fx-adv { background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } html[data-ui="ix"] .fx-adv-b .fx-f { border: 0; padding: 0; background: transparent; } html[data-ui="ix"] .fx-lbl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .fx-lbl label { font: inherit; color: inherit; cursor: pointer; } html[data-ui="ix"] .fx-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-size: 11.5px; font-weight: 700; } html[data-ui="ix"] .fx-tag, html[data-ui="ix"] .fx-opt { font-size: 11.5px; font-weight: 600; color: var(--ix-text-3); } html[data-ui="ix"] .fx-tag { padding: 2px 8px; border-radius: 999px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .fx-help { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ix-text-3); } html[data-ui="ix"] .fx-help.fx-lock { display: flex; align-items: center; gap: 6px; } html[data-ui="ix"] .fx-inp { width: 100%; box-sizing: border-box; min-height: 42px; padding: 8px 12px; } html[data-ui="ix"] .fx-inp-lg { font-size: 16px; min-height: 48px; } html[data-ui="ix"] .fx-f .ed-chips { background: var(--ix-surface-2); border: 1px solid var(--ix-border-strong); border-radius: 8px; padding: 6px; min-height: 42px; } html[data-ui="ix"] .fx-f .ed-chip { background: var(--ix-accent-soft); color: var(--ix-accent-ink); border: 1px solid transparent; } html[data-ui="ix"] .fx-f .ed-chips-x .ed-chip { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .fx-f .ed-chip-add { background: transparent; border: 0; box-shadow: none; color: var(--ix-text); min-width: 140px; flex: 1; } html[data-ui="ix"] .fx-err { margin: 0; font-size: 12.5px; color: var(--ix-danger-ink); } html[data-ui="ix"] .fx-err:empty { display: none; } html[data-ui="ix"] .fx-f [aria-invalid="true"] { border-color: var(--ix-danger); } html[data-ui="ix"] .fx-warn { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; background: var(--ix-warning-soft); color: var(--ix-warning-ink); border: 1px solid var(--ix-warning-line); } html[data-ui="ix"] .fx-warn[hidden], html[data-ui="ix"] .fx-card[hidden], html[data-ui="ix"] .fx-sugs[hidden] { display: none; } /* 1 · tipo */ html[data-ui="ix"] .fx-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; } html[data-ui="ix"] .fx-card { position: relative; cursor: pointer; display: block; } html[data-ui="ix"] .fx-card input { position: absolute; opacity: 0; pointer-events: none; } html[data-ui="ix"] .fx-card-b { display: flex; flex-direction: column; gap: 4px; min-height: 84px; padding: 12px; box-sizing: border-box; border-radius: 10px; border: 1px solid var(--ix-border-strong); background: var(--ix-surface-2); transition: border-color .12s ease, background .12s ease; } html[data-ui="ix"] .fx-card-b .ix-ico { width: 20px; height: 20px; color: var(--ix-text-3); } html[data-ui="ix"] .fx-card-b b { font-size: 14px; color: var(--ix-text); } html[data-ui="ix"] .fx-card-b small { font-size: 11.5px; line-height: 1.35; color: var(--ix-text-3); } html[data-ui="ix"] .fx-card:hover .fx-card-b { border-color: var(--ix-border-hover); } html[data-ui="ix"] .fx-card input:checked + .fx-card-b { border-color: var(--ix-accent); background: var(--ix-accent-soft); box-shadow: 0 0 0 1px var(--ix-accent) inset; } html[data-ui="ix"] .fx-card input:checked + .fx-card-b .ix-ico { color: var(--ix-accent-ink); } html[data-ui="ix"] .fx-card input:focus-visible + .fx-card-b { outline: 2px solid var(--ix-accent); outline-offset: 2px; } /* presets e sugestões (borda tracejada = ainda não aceito) */ html[data-ui="ix"] .fx-presets, html[data-ui="ix"] .fx-sugs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } html[data-ui="ix"] .fx-presets:empty, html[data-ui="ix"] .fx-sugs:empty { display: none; } html[data-ui="ix"] .fx-preset, html[data-ui="ix"] .fx-sug { font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px; cursor: pointer; min-height: 30px; background: transparent; color: var(--ix-text-2); border: 1px dashed var(--ix-border-hover); } html[data-ui="ix"] .fx-preset:hover, html[data-ui="ix"] .fx-sug:hover { border-color: var(--ix-accent); color: var(--ix-accent-ink); background: var(--ix-accent-soft); } /* 7 · exposição */ html[data-ui="ix"] .fx-expo-nome { color: var(--ix-accent-ink); } html[data-ui="ix"] .fx-range { width: 100%; accent-color: var(--ix-accent); margin: 6px 0 0; } html[data-ui="ix"] .fx-ticks { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; color: var(--ix-text-3); } html[data-ui="ix"] .fx-ticks span { flex: 1; text-align: center; } html[data-ui="ix"] .fx-ticks span:first-child { text-align: left; } html[data-ui="ix"] .fx-ticks span:last-child { text-align: right; } /* 8 · ritmo (segmentado) */ html[data-ui="ix"] .fx-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--ix-border-strong); border-radius: 8px; overflow: hidden; max-width: 100%; } html[data-ui="ix"] .fx-seg-b { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; min-height: 40px; border: 0; cursor: pointer; background: var(--ix-surface-2); color: var(--ix-text-2); border-left: 1px solid var(--ix-border-strong); } html[data-ui="ix"] .fx-seg-b:first-child { border-left: 0; } html[data-ui="ix"] .fx-seg-b[aria-pressed="true"] { background: var(--ix-accent); color: var(--ix-on-accent); } html[data-ui="ix"] .fx-seg-b:focus-visible { outline: 2px solid var(--ix-accent); outline-offset: -2px; } /* 9 · categorias e motores */ html[data-ui="ix"] .fx-pills { display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .fx-pill { position: relative; cursor: pointer; } html[data-ui="ix"] .fx-pill input { position: absolute; opacity: 0; pointer-events: none; } html[data-ui="ix"] .fx-pill span { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--ix-surface-2); border: 1px solid var(--ix-border-strong); color: var(--ix-text-2); } html[data-ui="ix"] .fx-pill:hover span { border-color: var(--ix-border-hover); } html[data-ui="ix"] .fx-pill input:checked + span { background: var(--ix-accent); border-color: var(--ix-accent); color: var(--ix-on-accent); } html[data-ui="ix"] .fx-pill input:focus-visible + span { outline: 2px solid var(--ix-accent); outline-offset: 2px; } /* 10 · rodapé */ html[data-ui="ix"] .fx-rodape { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: start; } html[data-ui="ix"] .fx-sel { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html[data-ui="ix"] .fx-sel select { width: 100%; min-height: 40px; } html[data-ui="ix"] .fx-sublbl { font-size: 12px; font-weight: 600; color: var(--ix-text-3); } html[data-ui="ix"] .fx-checks { display: flex; flex-wrap: wrap; gap: 14px; min-height: 40px; align-items: center; } html[data-ui="ix"] .fx-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ix-text); cursor: pointer; } html[data-ui="ix"] .fx-chk-off { opacity: .55; cursor: not-allowed; } /* avançado */ html[data-ui="ix"] .fx-adv { padding: 0; } html[data-ui="ix"] .fx-adv-s { cursor: pointer; padding: 14px 18px; font-size: 14px; font-weight: 600; color: var(--ix-text-2); } html[data-ui="ix"] .fx-adv-b { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; } /* prévia */ html[data-ui="ix"] .fx-h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ix-text-2); } html[data-ui="ix"] .fx-box-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } html[data-ui="ix"] .fx-box-h .ed-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; } html[data-ui="ix"] .fx-query { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--ix-surface-2); border: 1px solid var(--ix-border); font-family: var(--ix-font-mono); font-size: 12px; line-height: 1.55; color: var(--ix-text); white-space: pre-wrap; word-break: break-word; } html[data-ui="ix"] .fx-meta { margin: 0; font-size: 12px; color: var(--ix-text-3); font-weight: 500; } html[data-ui="ix"] .fx-meter { display: flex; align-items: center; gap: 10px; } html[data-ui="ix"] .fx-meter-track { flex: 1; height: 8px; border-radius: 999px; background: var(--ix-gauge-off); overflow: hidden; } html[data-ui="ix"] .fx-meter-fill { height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; } html[data-ui="ix"] .fx-meter-ok { background: var(--ix-success); } html[data-ui="ix"] .fx-meter-bom { background: var(--ix-accent); } html[data-ui="ix"] .fx-meter-baixa { background: var(--ix-warning); } html[data-ui="ix"] .fx-meter b { font-size: 13px; color: var(--ix-text); white-space: nowrap; } html[data-ui="ix"] .fx-saude { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; background: var(--ix-surface); border: 1px solid var(--ix-border); color: var(--ix-text-2); } html[data-ui="ix"] .fx-saude[hidden] { display: none; } html[data-ui="ix"] .fx-saude-alerta { background: var(--ix-warning-soft); border-color: var(--ix-warning-line); color: var(--ix-warning-ink); } html[data-ui="ix"] .fx-it { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .fx-it:first-of-type { border-top: 0; } html[data-ui="ix"] .fx-it-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } html[data-ui="ix"] .fx-it-titulo { font-size: 13px; line-height: 1.35; color: var(--ix-text); } html[data-ui="ix"] .fx-it-m { font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .fx-it-fora .fx-it-titulo { text-decoration: line-through; color: var(--ix-text-3); } html[data-ui="ix"] .fx-it-fora { opacity: .7; } html[data-ui="ix"] .fx-selo { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ix-surface-3); color: var(--ix-text-2); border: 1px solid var(--ix-border); } html[data-ui="ix"] .fx-selo-ok { background: var(--ix-success-soft); color: var(--ix-success-ink); border-color: var(--ix-success-line); } html[data-ui="ix"] .fx-selo-no { background: var(--ix-danger-soft); color: var(--ix-danger-ink); border-color: var(--ix-danger-line); } html[data-ui="ix"] .fx-mini { align-self: flex-start; flex-shrink: 0; font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; min-height: 28px; border-radius: 6px; cursor: pointer; background: var(--ix-surface); color: var(--ix-text-2); border: 1px solid var(--ix-border-strong); } html[data-ui="ix"] .fx-mini:hover { background: var(--ix-surface-3); color: var(--ix-text); } html[data-ui="ix"] .fx-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: var(--ix-gap); } /* "Não relevante" no card de notícia + selo "Melhore a precisão" */ html[data-ui="ix"] .ix-story.nr-saindo { opacity: 0; transform: scale(.98); transition: opacity .2s ease, transform .2s ease; } html[data-ui="ix"] article.ix-story[hidden] { display: none !important; } html[data-ui="ix"] .nr-faixa { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--ix-surface-2); border: 1px dashed var(--ix-border-hover); color: var(--ix-text-2); font-size: 13px; } html[data-ui="ix"] .nr-linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } html[data-ui="ix"] .nr-desfazer { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ix-accent-ink); text-decoration: underline; } html[data-ui="ix"] .nr-chips { display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .nr-chip { font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; min-height: 30px; background: transparent; color: var(--ix-text-2); border: 1px dashed var(--ix-border-hover); } html[data-ui="ix"] .nr-chip:hover { border-color: var(--ix-accent); color: var(--ix-accent-ink); background: var(--ix-accent-soft); } html[data-ui="ix"] .kwm-chip-melhorar { color: var(--ix-warning-ink); background: var(--ix-warning-soft); border: 1px solid var(--ix-warning-line); text-decoration: none; } html[data-ui="ix"] .kwm-chip-melhorar .ix-ico { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; } /* ---------- Radar 3D (/radar · templates/radar.html · static/js/radar3d.js) ---------- */ /* linha 1: título (esq.) + assuntos (dir.); box 3D embaixo em largura total e altura máxima; painéis de apoio abaixo */ html[data-ui="ix"] .rd-linha1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ix-gap); align-items: stretch; margin-bottom: var(--ix-gap); } html[data-ui="ix"] .rd-linha1 > .page-hero { margin: 0; } html[data-ui="ix"] .rd-assuntos { margin: 0; padding-block: 12px; } html[data-ui="ix"] .rd-assuntos .rd-list { flex-direction: row; flex-wrap: wrap; gap: 8px; max-height: 120px; overflow: auto; } html[data-ui="ix"] .rd-assuntos .rd-row { width: auto; max-width: 100%; border: 1px solid var(--ix-border); border-radius: 99px; padding: 4px 12px 4px 4px; } html[data-ui="ix"] .rd-assuntos .rd-row:first-child { padding-top: 4px; } html[data-ui="ix"] .rd-assuntos .rd-row .tx { max-width: 220px; } html[data-ui="ix"] .rd-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr) 300px; gap: var(--ix-gap); align-items: start; } html[data-ui="ix"] .rd-bottom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ix-gap); margin-top: var(--ix-gap); align-items: start; } @media (max-width: 767px) { html[data-ui="ix"] .rd-bottom { grid-template-columns: minmax(0, 1fr); } } html[data-ui="ix"] .rd-col { display: flex; flex-direction: column; gap: var(--ix-gap); min-width: 0; } html[data-ui="ix"] .rd-grow { flex: 1; } html[data-ui="ix"] .rd-stage { position: relative; min-height: 560px; height: calc(100vh - 210px); width: 100%; padding: 0; overflow: hidden; background: var(--ix-bg); } html[data-ui="ix"] .rd-stage canvas, html[data-ui="ix"] .rd-css { position: absolute; inset: 0; } html[data-ui="ix"] .rd-css > div { cursor: grab; } html[data-ui="ix"] .rd-hud { position: absolute; left: 14px; right: 14px; display: flex; gap: 8px; align-items: center; z-index: 3; flex-wrap: wrap; } html[data-ui="ix"] .rd-hud-t { top: 12px; } html[data-ui="ix"] .rd-hud-b { bottom: 12px; } html[data-ui="ix"] .rd-sp { flex: 1; } html[data-ui="ix"] .rd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text-2); font: inherit; font-size: 12px; white-space: nowrap; backdrop-filter: blur(8px); cursor: pointer; } html[data-ui="ix"] .rd-pill.on { color: var(--ix-text); border-color: var(--ix-border-strong); background: var(--ix-accent-soft-2); } html[data-ui="ix"] .rd-pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } html[data-ui="ix"] .rd-pill i.pos, html[data-ui="ix"] .rd-live i { background: var(--ix-pos); } html[data-ui="ix"] .rd-pill i.neu { background: var(--ix-neu); } html[data-ui="ix"] .rd-pill i.neg { background: var(--ix-neg); } html[data-ui="ix"] .rd-live { color: var(--ix-pos); cursor: default; } html[data-ui="ix"] .rd-replay { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--ix-border); background: var(--ix-surface); backdrop-filter: blur(8px); font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .rd-replay input { flex: 1; accent-color: var(--ix-text-2); } html[data-ui="ix"] .rd-play { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--ix-text); font: inherit; cursor: pointer; } html[data-ui="ix"] .rd-hint { position: absolute; bottom: 64px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--ix-text-3); pointer-events: none; z-index: 2; } html[data-ui="ix"] .rd-tv .rd-hint { display: none; } html[data-ui="ix"] .s-positivo { --rd-c: var(--ix-pos); } html[data-ui="ix"] .s-neutro { --rd-c: var(--ix-neu); } html[data-ui="ix"] .s-negativo { --rd-c: var(--ix-neg); } html[data-ui="ix"] .rd-card { width: 118px; height: 88px; padding: 0; border-radius: 6px; overflow: hidden; border: 2px solid var(--rd-c); background: var(--ix-surface-solid); position: relative; cursor: pointer; transition: opacity .2s; opacity: calc(var(--rd-f, 1) * var(--rd-ag, 1)); } html[data-ui="ix"] .rd-aged .rd-card { --rd-ag: var(--rd-age, 1); } html[data-ui="ix"] .rd-card img, html[data-ui="ix"] .rd-core img { width: 100%; height: 100%; object-fit: cover; display: block; } html[data-ui="ix"] .rd-noimg { visibility: hidden; } html[data-ui="ix"] .rd-card img { position: relative; z-index: 1; } html[data-ui="ix"] .rd-card::before { content: "KLIMA"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .2em; color: var(--ix-text-3); } html[data-ui="ix"] .rd-2d { z-index: 2; background: var(--ix-bg); } html[data-ui="ix"] .rd-card .lg { position: absolute; right: -1px; top: -1px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 0 0 0 6px; z-index: 4; font-size: 10px; font-weight: 700; line-height: 18px; color: #fff; text-align: center; } html[data-ui="ix"] .rd-card.rd-off { opacity: calc(var(--rd-f, 1) * .1); } html[data-ui="ix"] .rd-card::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--rd-t, transparent); opacity: 0; transition: opacity .3s; } html[data-ui="ix"] .rd-ov .rd-card::after { opacity: var(--rd-ovi, .45); } html[data-ui="ix"] .rd-card .tt { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 14px 4px 3px; font-size: calc(9.5px * var(--rd-esc, 1)); line-height: 1.2; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .82)); overflow: hidden; max-height: 70%; } html[data-ui="ix"] .rd-tit .rd-card .tt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } html[data-ui="ix"] .rd-nosl .rd-card .lg { display: none; } html[data-ui="ix"] .rd-nobd .rd-card { border-color: transparent; } html[data-ui="ix"] .rd-card.rd-hit { animation: rdPulso 1s ease-out 1; } html[data-ui="ix"] .rd-card.rd-new { animation: rdPulso 1.6s ease-out 4; } html[data-ui="ix"] .rd-core, html[data-ui="ix"] .rd-name, html[data-ui="ix"] .rd-src { opacity: var(--rd-f, 1); } html[data-ui="ix"] .rd-core { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid var(--rd-c); background: var(--ix-surface-solid); cursor: pointer; } html[data-ui="ix"] .rd-name { font-size: 30px; font-weight: 600; color: var(--ix-text); padding: 4px 12px; border-radius: 8px; background: var(--ix-surface-solid); border: 1px solid var(--ix-border); white-space: nowrap; cursor: pointer; } html[data-ui="ix"] .rd-src { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; border: 2px solid rgba(255, 255, 255, .85); } html[data-ui="ix"] .rd-pop { position: absolute; z-index: 4; width: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ix-border-strong); background: var(--ix-surface-solid); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); } html[data-ui="ix"] .rd-pop > img { width: 100%; height: 150px; object-fit: cover; display: block; } html[data-ui="ix"] .rd-pop .bd { padding: 12px 14px; } html[data-ui="ix"] .rd-pop h3 { font-size: 15px; line-height: 1.35; margin: 8px 0 6px; color: var(--ix-text); } html[data-ui="ix"] .rd-pop .ix-muted { font-size: 12px; } html[data-ui="ix"] .rd-pop .ix-chip[class*="s-"] { color: var(--rd-c); } html[data-ui="ix"] .rd-ac { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; } html[data-ui="ix"] .rd-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--ix-surface-solid); color: var(--ix-text); font-size: 18px; cursor: pointer; } html[data-ui="ix"] .rd-lock { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--ix-gap); background: var(--ix-surface); backdrop-filter: blur(10px); } html[data-ui="ix"] .rd-lock > div { max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: 10px; } html[data-ui="ix"] .rd-lock .ix-ico { width: 28px; height: 28px; } html[data-ui="ix"] .rd-list { display: flex; flex-direction: column; } html[data-ui="ix"] .rd-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border: 0; border-top: 1px solid var(--ix-divider); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; } html[data-ui="ix"] .rd-row:first-child { border-top: 0; padding-top: 0; } html[data-ui="ix"] .rd-row > img { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--rd-c, var(--ix-border)); background: var(--ix-surface-solid); } html[data-ui="ix"] .rd-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } html[data-ui="ix"] .rd-row b { font-size: 13px; color: var(--ix-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .rd-row small { color: var(--ix-text-3); font-size: 11.5px; } html[data-ui="ix"] .rd-row.dim { opacity: .42; } html[data-ui="ix"] .rd-feed .rd-row > img { width: 58px; height: 42px; border-radius: 5px; border-width: 0 0 0 3px; border-style: solid; } html[data-ui="ix"] .rd-feed .rd-row b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; } html[data-ui="ix"] .rd-bar { display: grid; grid-template-columns: 92px 1fr 30px; gap: 8px; align-items: center; font-size: 12px; color: var(--ix-text-2); margin: 6px 0; } html[data-ui="ix"] .rd-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .rd-bar i { height: 6px; border-radius: 3px; display: block; background: var(--rd-c); } html[data-ui="ix"] .rd-bar em { font-style: normal; text-align: right; color: var(--ix-text-3); } html[data-ui="ix"] .rd-big { font-size: 34px; font-weight: 600; color: var(--ix-text); line-height: 1; } html[data-ui="ix"] .rd-big small { font-size: 14px; color: var(--ix-text-3); margin-left: 4px; } html[data-ui="ix"] .rd-vol { display: flex; align-items: flex-end; gap: 6px; height: 64px; } html[data-ui="ix"] .rd-vol i { flex: 1; border-radius: 3px 3px 0 0; background: var(--ix-text-3); } html[data-ui="ix"] .rd-leg { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; font-size: 12px; margin: 0; } html[data-ui="ix"] .rd-leg dt { color: var(--ix-text-3); } html[data-ui="ix"] .rd-leg dd { color: var(--ix-text-2); margin: 0; } html[data-ui="ix"] .rd-2d { position: absolute; inset: 56px 0 64px; overflow: auto; padding: 0 14px; } html[data-ui="ix"] .rd-2d h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ix-text); margin: 12px 0 8px; cursor: pointer; } html[data-ui="ix"] .rd-2d h3 img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } html[data-ui="ix"] .rd-2d h3 small { color: var(--ix-text-3); font-weight: 400; } html[data-ui="ix"] .rd-2d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } html[data-ui="ix"] .rd-2d-grid .rd-card { width: auto; height: 72px; } html[data-ui="ix"] .rd-is-2d .rd-hint, html[data-ui="ix"] .rd-is-2d #rdSpin { display: none; } html[data-ui="ix"] .rd-stage:fullscreen { height: 100vh; border-radius: 0; } html[data-ui="ix"] .rd-css .rd-card { width: calc(118px * var(--rd-esc, 1)); height: calc(88px * var(--rd-esc, 1)); } html[data-ui="ix"] .rd-name.rd-qual { font-size: 22px; cursor: default; } html[data-ui="ix"] .rd-name.rd-qual.s-positivo { border-color: var(--ix-pos); } html[data-ui="ix"] .rd-name.rd-qual.s-negativo { border-color: var(--ix-neg); } html[data-ui="ix"] .rd-gone, html[data-ui="ix"] .rd-nonm .rd-name, html[data-ui="ix"] .rd-nolg .rd-src { display: none !important; } html[data-ui="ix"] .rd-fs { display: none; position: absolute; top: 12px; left: 14px; z-index: 4; width: 270px; max-height: calc(100% - 90px); overflow: auto; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--ix-border); background: var(--ix-surface); backdrop-filter: blur(10px); } html[data-ui="ix"] .rd-fs > b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-text-3); margin-bottom: 8px; } html[data-ui="ix"] .rd-stage:fullscreen .rd-fs { display: block; } html[data-ui="ix"] .rd-stage:fullscreen .rd-hud-t, html[data-ui="ix"] .rd-stage:fullscreen .rd-2d { left: 300px; } html[data-ui="ix"] .rd-all { margin-top: 10px; width: 100%; justify-content: center; } html[data-ui="ix"] .rd-row .at { color: var(--ix-neg); } html[data-ui="ix"] .rd-cfg { position: absolute; right: 260px; bottom: 64px; z-index: 5; width: 280px; max-height: calc(100% - 130px); overflow: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--ix-border-strong); background: var(--ix-surface-solid); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); font-size: 12.5px; color: var(--ix-text-2); } html[data-ui="ix"] .rd-cfg[hidden] { display: none; } html[data-ui="ix"] .rd-cfg > b { color: var(--ix-text); font-size: 14px; } html[data-ui="ix"] .rd-cfg label, html[data-ui="ix"] .rd-box label { display: flex; flex-direction: column; gap: 4px; } html[data-ui="ix"] .rd-cfg label.ck, html[data-ui="ix"] .rd-box label.ck { flex-direction: row; align-items: center; gap: 8px; cursor: pointer; } html[data-ui="ix"] .rd-cfg select { font: inherit; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--ix-border); background: var(--ix-surface); color: var(--ix-text); } html[data-ui="ix"] .rd-box input[type="range"], html[data-ui="ix"] .rd-cfg input[type="range"] { accent-color: var(--ix-text-2); } html[data-ui="ix"] .rd-cfg .ix-muted { font-size: 11px; margin: 0; } html[data-ui="ix"] .rd-cfg .rd-cfg-sub { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-text-3); margin-top: 4px; } html[data-ui="ix"] .rd-cfg .rd-termo-l { margin-top: -6px; } /* hub KLIMA (centro) e ícone da internet (acima): notícias chegam da internet, passam pela KLIMA e vão ao assunto */ html[data-ui="ix"] .rd-hub { width: 230px; padding: 14px 22px; border-radius: 20px; background: var(--ix-surface-solid); border: 2px solid var(--ix-border-strong); box-shadow: 0 0 60px rgba(120, 160, 255, .25); } html[data-ui="ix"] .rd-hub img { width: 100%; height: auto; display: block; } html[data-ui="ix"] .rd-net { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ix-text-3); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } html[data-ui="ix"] .rd-net .ic { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--ix-surface-solid); border: 2px solid var(--ix-accent); color: var(--ix-accent-ink, var(--ix-accent)); box-shadow: 0 0 0 0 var(--ix-accent); animation: rdNet 2.6s ease-out infinite; } html[data-ui="ix"] .rd-net .ix-ico { width: 46px; height: 46px; } html[data-ui="ix"] .rd-hub.rd-hit, html[data-ui="ix"] .rd-net.rd-hit .ic { animation: rdPulso 1s ease-out 1; --rd-c: var(--ix-accent); } html[data-ui="ix"] .rd-flow[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] .rd-net .ic { animation: none; } } html[data-ui="ix"] .rd-flow { max-width: 420px; overflow: hidden; text-overflow: ellipsis; cursor: default; color: var(--ix-text-3); } html[data-ui="ix"] .rd-dock { position: absolute; top: 58px; right: 14px; z-index: 4; width: 232px; max-height: calc(100% - 130px); overflow: auto; display: flex; flex-direction: column; gap: 10px; } html[data-ui="ix"] .rd-box { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ix-border); background: var(--ix-surface); backdrop-filter: blur(10px); font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .rd-box > b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .rd-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } html[data-ui="ix"] .rd-seg .rd-pill { justify-content: center; padding: 5px 4px; } html[data-ui="ix"] .rd-box small { font-size: 11px; } html[data-ui="ix"] .rd-termo { display: flex; height: 6px; border-radius: 3px; overflow: hidden; } html[data-ui="ix"] .rd-termo i { flex: 1; } html[data-ui="ix"] .rd-termo i:nth-child(1) { background: #16a34a; } html[data-ui="ix"] .rd-termo i:nth-child(2) { background: #65c466; } html[data-ui="ix"] .rd-termo i:nth-child(3) { background: #8a8f98; } html[data-ui="ix"] .rd-termo i:nth-child(4) { background: #f2a93b; } html[data-ui="ix"] .rd-termo i:nth-child(5) { background: #f0683c; } html[data-ui="ix"] .rd-termo i:nth-child(6) { background: #d6262b; } html[data-ui="ix"] .rd-termo-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ix-text-3); margin-top: -4px; } @media (max-width: 767px) { html[data-ui="ix"] .rd-dock { display: none; } html[data-ui="ix"] .rd-cfg { right: 14px; } } @keyframes rdNet { 0% { box-shadow: 0 0 0 0 rgba(120, 160, 255, .55); } 100% { box-shadow: 0 0 0 40px transparent; } } @keyframes rdPulso { 0% { box-shadow: 0 0 0 0 var(--rd-c); } 100% { box-shadow: 0 0 0 26px transparent; } } /* ---------- 11b. Estúdio: barra de ações agrupada (carrossel e reel) + assistente de card extra ---------- */ html[data-ui="ix"] .car-barra--grupos { display: flex; flex-wrap: wrap; gap: var(--ix-gap); align-items: center; padding: var(--ix-gap) 0; } html[data-ui="ix"] .car-barra--grupos .car-grupo { display: flex; flex-wrap: wrap; gap: var(--ix-gap-sm, 8px); align-items: center; min-width: 0; padding-right: var(--ix-gap); border-right: 1px solid var(--ix-border); } html[data-ui="ix"] .car-barra--grupos .car-grupo:last-child { border-right: 0; padding-right: 0; margin-left: auto; } html[data-ui="ix"] .car-barra--grupos .car-grupo form { margin: 0; display: flex; gap: var(--ix-gap-sm, 8px); align-items: center; } html[data-ui="ix"] .car-barra--grupos .car-cota { margin: 0; color: var(--ix-text-3); } html[data-ui="ix"] .car-barra--grupos .btn-command, html[data-ui="ix"] .car-barra--grupos .btn-secondary-action { min-height: 40px; display: inline-flex; align-items: center; } html[data-ui="ix"] .car-mais { position: relative; } html[data-ui="ix"] .car-mais > summary { list-style: none; cursor: pointer; } html[data-ui="ix"] .car-mais > summary::-webkit-details-marker { display: none; } html[data-ui="ix"] .car-mais > summary::after { content: "\25BE"; margin-left: 6px; font-size: .85em; } html[data-ui="ix"] .car-mais-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 260px; display: flex; flex-direction: column; gap: var(--ix-gap-sm, 8px); padding: var(--ix-gap); background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-md, 0 8px 24px rgba(16, 24, 40, .18)); } html[data-ui="ix"] .car-extra-tipo { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ix-text-2); margin-bottom: 6px; } html[data-ui="ix"] .car-credito { display: block; margin-top: 10px; font-weight: 600; color: var(--ix-text); } html[data-ui="ix"] .car-credito em { font-style: normal; color: var(--ix-danger-ink); font-weight: 600; } html[data-ui="ix"] .car-credito input, html[data-ui="ix"] #car-wiz-credito { width: 100%; box-sizing: border-box; border: 2px solid var(--ix-accent); border-radius: var(--ix-radius-sm); } html[data-ui="ix"] .car-wiz-box { width: min(720px, calc(100vw - 2 * var(--ix-gap))); max-height: calc(100vh - 2 * var(--ix-gap)); overflow-y: auto; text-align: left; } html[data-ui="ix"] .car-wiz-tipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .car-wiz-tipo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--ix-gap); text-align: left; cursor: pointer; min-height: 44px; background: var(--ix-surface-2); color: var(--ix-text); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); } html[data-ui="ix"] .car-wiz-tipo:hover, html[data-ui="ix"] .car-wiz-tipo:focus-visible { border-color: var(--ix-accent); background: var(--ix-accent-soft); outline: 0; } html[data-ui="ix"] .car-wiz-tipo small { color: var(--ix-text-3); } html[data-ui="ix"] .car-wiz-prev { width: 54px; height: auto; color: var(--ix-accent-ink); } html[data-ui="ix"] #car-wiz-form > [data-wiz-campo] { margin-bottom: var(--ix-gap); } html[data-ui="ix"] #car-wiz-form input[type="text"], html[data-ui="ix"] #car-wiz-form input:not([type]), html[data-ui="ix"] #car-wiz-form input[type="url"], html[data-ui="ix"] #car-wiz-form textarea { width: 100%; box-sizing: border-box; } html[data-ui="ix"] #car-wiz-imgs { max-height: 220px; overflow-y: auto; } html[data-ui="ix"] .car-wiz-graf[aria-pressed="true"] { background: var(--ix-accent); color: var(--ix-on-accent); border-color: var(--ix-accent); } html[data-ui="ix"] .car-wiz-graf-fraco { opacity: .7; } html[data-ui="ix"] .car-wiz-acoes { justify-content: space-between; } /* ---------- 11c. Desinscrição de e-mails (pública, tema noite) ---------- */ html[data-ui="ix"] .eds-page { display: flex; justify-content: center; padding: var(--ix-gap); } html[data-ui="ix"] .eds-card { width: 100%; max-width: 560px; } html[data-ui="ix"] .eds-lista { border: 0; margin: var(--ix-gap) 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } html[data-ui="ix"] .eds-item { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ix-border); border-radius: var(--ix-radius-md, 10px); background: var(--ix-surface-2); cursor: pointer; } html[data-ui="ix"] .eds-item input { width: 20px; height: 20px; flex: none; } html[data-ui="ix"] .eds-acoes { display: flex; flex-wrap: wrap; gap: var(--ix-gap-sm, 8px); justify-content: space-between; } html[data-ui="ix"] .eds-erro { color: var(--ix-danger-ink); font-weight: 600; } html[data-ui="ix"] .eds-nota { margin-top: var(--ix-gap); font-size: 12.5px; } html[data-ui="ix"] .eds-confirmadas { padding-left: 20px; margin: var(--ix-gap) 0; } /* ---------- 11g. Admin e-mails ---------- */ html[data-ui="ix"] .em-form { display: flex; flex-direction: column; gap: var(--ix-gap); } html[data-ui="ix"] .em-form label, html[data-ui="ix"] .em-filtros input, html[data-ui="ix"] .em-filtros select { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ix-text-2, var(--ix-text)); } html[data-ui="ix"] .em-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .em-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; border: 1px solid var(--ix-border); border-radius: var(--ix-radius-md, 10px); padding: var(--ix-gap); } html[data-ui="ix"] .em-cat { flex-direction: row !important; align-items: center; gap: 8px; } html[data-ui="ix"] .em-filtros { display: flex; flex-wrap: wrap; gap: var(--ix-gap-sm, 8px); margin-bottom: var(--ix-gap); } html[data-ui="ix"] .em-filtros input[type="search"] { flex: 1 1 260px; } html[data-ui="ix"] .em-acoes, html[data-ui="ix"] .em-pag { display: flex; flex-wrap: wrap; gap: var(--ix-gap-sm, 8px); align-items: center; margin-top: var(--ix-gap); } html[data-ui="ix"] .em-alerta { color: var(--ix-danger-ink); display: flex; gap: 8px; align-items: flex-start; } html[data-ui="ix"] .em-perigo { color: var(--ix-danger-ink); border-color: var(--ix-danger-ink); } html[data-ui="ix"] .em-falta { color: var(--ix-danger-ink); } html[data-ui="ix"] .em-st { font-weight: 600; } html[data-ui="ix"] .em-st-falhou { color: var(--ix-danger-ink); } html[data-ui="ix"] .em-st-pausado, html[data-ui="ix"] .em-st-bloqueado { color: var(--ix-warn-ink, var(--ix-text)); } /* ---------- 11h. Telas de acesso (login, cadastro, recuperar/redefinir senha): sem rolagem da página ---------- */ html[data-ui="ix"]:has(body.auth-page) { height: 100dvh; overflow: hidden; } html[data-ui="ix"] body.auth-page { height: 100dvh; overflow: hidden; margin: 0; padding: 0; } html[data-ui="ix"] body.auth-page .build-tag { display: none; } html[data-ui="ix"] body.auth-page .auth-shell { height: 100dvh; box-sizing: border-box; width: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.4dvh, 16px); padding: clamp(6px, 2dvh, 28px) clamp(8px, 4vw, 28px); } html[data-ui="ix"] body.auth-page .auth-logo { flex: 0 1 auto; height: clamp(28px, 9dvh, 96px); width: auto; max-width: 60%; object-fit: contain; margin: 0; } html[data-ui="ix"] body.auth-page .auth-scroll { flex: 1 1 auto; min-height: 0; width: 100%; max-width: clamp(280px, 30vw, 640px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: clamp(6px, 1.4dvh, 16px); margin: 0 auto; padding: 0; } html[data-ui="ix"] body.auth-page .auth-box { margin: 0; padding: clamp(10px, 2.2dvh, 28px) clamp(12px, 3.5vw, 28px); box-sizing: border-box; width: 100%; } html[data-ui="ix"] body.auth-page .auth-box label { margin-top: clamp(4px, 1dvh, 12px); font-size: clamp(12px, 1.8dvh, 15px); } html[data-ui="ix"] body.auth-page .auth-box input:not([type="checkbox"]), html[data-ui="ix"] body.auth-page .auth-box select, html[data-ui="ix"] body.auth-page .auth-box textarea { padding: clamp(6px, 1.1dvh, 12px) 10px; margin-top: 3px; box-sizing: border-box; font-size: max(16px, 1.8dvh); } html[data-ui="ix"] body.auth-page .auth-box button, html[data-ui="ix"] body.auth-page .btn-google-login, html[data-ui="ix"] body.auth-page .auth-cta { margin-top: clamp(8px, 1.6dvh, 18px); padding: clamp(7px, 1.3dvh, 14px) 10px; box-sizing: border-box; } html[data-ui="ix"] body.auth-page .auth-titulo { margin: 0 0 clamp(2px, 0.8dvh, 8px); font-size: clamp(17px, 3dvh, 28px); } html[data-ui="ix"] body.auth-page .auth-extras { display: flex; flex-direction: column; align-items: stretch; gap: clamp(4px, 1dvh, 12px); } html[data-ui="ix"] body.auth-page .auth-extras .login-secondary-actions { margin-top: 0; } html[data-ui="ix"] body.auth-page .auth-link { text-align: center; color: var(--ix-accent, var(--accent)); font-size: clamp(13px, 1.9dvh, 15px); padding: clamp(2px, 0.6dvh, 8px) 0; } html[data-ui="ix"] body.auth-page .auth-cta { display: block; text-align: center; text-decoration: none; margin-top: 0; } html[data-ui="ix"] body.auth-page .auth-aviso { margin: 0; max-width: none; padding: clamp(6px, 1.2dvh, 14px) clamp(10px, 2.5vw, 20px); box-sizing: border-box; } html[data-ui="ix"] body.auth-page .auth-aviso p { font-size: clamp(10px, 1.5dvh, 13px); line-height: 1.4; margin: 0; } html[data-ui="ix"] body.auth-page .auth-aviso p + p { margin-top: 4px; } html[data-ui="ix"] body.auth-page .flashes { margin: 0 0 6px; font-size: clamp(12px, 1.8dvh, 14px); } html[data-ui="ix"] body.auth-page .hint-small { margin: 2px 0 0; } @media (max-height: 560px) { html[data-ui="ix"] body.auth-page .auth-aviso p:first-child { display: none; } html[data-ui="ix"] body.auth-page .auth-aviso { padding: 4px 8px; } } @media (max-height: 420px) { html[data-ui="ix"] body.auth-page .auth-logo { display: none; } html[data-ui="ix"] body.auth-page .auth-shell { padding-top: 6px; } } @media (max-height: 420px) and (min-aspect-ratio: 6/5) { html[data-ui="ix"] body.auth-page .auth-scroll:not(.cadastro-wrap) { max-width: clamp(280px, 80%, 900px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; align-items: start; } html[data-ui="ix"] body.auth-page .auth-aviso { grid-column: 1 / -1; } } /* Login (body.auth-login, 2026-10-08): marca | card no desktop, coluna única no celular; cabe por dimensionamento (sem .auth-scroll). */ html[data-ui="ix"] body.auth-login *, html[data-ui="ix"] body.auth-login *::before, html[data-ui="ix"] body.auth-login *::after { box-sizing: border-box; } html[data-ui="ix"] body.auth-login { overflow-x: hidden; } html[data-ui="ix"] body.auth-login .lg-shell { height: 100dvh; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] body.auth-login .lg-brand { display: none; } html[data-ui="ix"] body.auth-login .lg-main { min-width: 0; min-height: 0; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: clamp(4px, 1.4dvh, 16px); padding: clamp(8px, 2dvh, 28px) clamp(16px, 4vw, 48px); max-width: none; margin: 0; } html[data-ui="ix"] body.auth-login .lg-topo { width: 100%; display: flex; justify-content: flex-end; gap: clamp(12px, 2vw, 20px); font-size: clamp(12px, 1.7dvh, 14px); } html[data-ui="ix"] body.auth-login .lg-topo a, html[data-ui="ix"] body.auth-login .lg-rodape a { color: var(--ix-text-2); text-decoration: none; } html[data-ui="ix"] body.auth-login .lg-topo a:hover, html[data-ui="ix"] body.auth-login .lg-rodape a:hover { color: var(--ix-text); text-decoration: underline; } html[data-ui="ix"] body.auth-login .lg-card { width: 100%; max-width: 400px; min-height: 0; display: flex; flex-direction: column; padding: clamp(14px, 3dvh, 32px) clamp(16px, 4vw, 32px); background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-pop); animation: lg-entra 0.25s ease-out; } html[data-ui="ix"] body.auth-login .lg-card-logo { height: clamp(26px, 6dvh, 52px); width: auto; max-width: 60%; object-fit: contain; align-self: center; margin: 0 0 clamp(6px, 1.6dvh, 16px); } html[data-ui="ix"] body.auth-login .lg-titulo { margin: 0 0 clamp(6px, 1.6dvh, 18px); font-size: clamp(19px, 3.2dvh, 26px); font-weight: 650; color: var(--ix-text); letter-spacing: -0.01em; } html[data-ui="ix"] body.auth-login .lg-alerta { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 clamp(6px, 1.4dvh, 14px); padding: clamp(6px, 1.2dvh, 10px) 12px; border-radius: var(--ix-radius-sm); background: var(--ix-danger-soft); border: 1px solid var(--ix-danger-line); color: var(--ix-danger-ink); font-size: clamp(12px, 1.8dvh, 14px); line-height: 1.35; } html[data-ui="ix"] body.auth-login .lg-alerta .ix-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; } html[data-ui="ix"] body.auth-login .lg-form { display: flex; flex-direction: column; min-width: 0; } html[data-ui="ix"] body.auth-login .lg-form label { display: block; margin: clamp(6px, 1.4dvh, 14px) 0 clamp(3px, 0.6dvh, 6px); font-size: clamp(12px, 1.8dvh, 14px); font-weight: 550; color: var(--ix-text-strong); } html[data-ui="ix"] body.auth-login .lg-form > label:first-child { margin-top: 0; } html[data-ui="ix"] body.auth-login .lg-label-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: clamp(6px, 1.4dvh, 14px); } html[data-ui="ix"] body.auth-login .lg-label-linha label { margin-top: 0; } html[data-ui="ix"] body.auth-login .lg-form input { width: 100%; min-width: 0; height: clamp(40px, 6dvh, 46px); margin: 0; padding: 0 12px; font-size: 16px; border-radius: var(--ix-radius-sm); } html[data-ui="ix"] body.auth-login .lg-senha { position: relative; } html[data-ui="ix"] body.auth-login .lg-senha input { padding-right: 46px; } html[data-ui="ix"] body.auth-login .lg-olho { position: absolute; top: 0; right: 0; width: 44px; height: 100%; margin: 0; padding: 0; display: grid; place-items: center; background: transparent; border: 0; border-radius: var(--ix-radius-sm); color: var(--ix-text-3); cursor: pointer; } html[data-ui="ix"] body.auth-login .lg-olho:hover, html[data-ui="ix"] body.auth-login .lg-olho[aria-pressed="true"] { color: var(--ix-text); } html[data-ui="ix"] body.auth-login .lg-olho .ix-ico { width: 18px; height: 18px; } html[data-ui="ix"] body.auth-login .lg-entrar, html[data-ui="ix"] body.auth-login .lg-google { width: 100%; height: clamp(42px, 6.2dvh, 48px); display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--ix-radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; } html[data-ui="ix"] body.auth-login .lg-entrar { margin-top: clamp(10px, 2.2dvh, 22px); background: var(--ix-accent); color: var(--ix-on-accent); border: 0; box-shadow: var(--ix-btn-shadow); } html[data-ui="ix"] body.auth-login .lg-entrar:hover { background: var(--ix-accent-hover); } html[data-ui="ix"] body.auth-login .lg-entrar:active { background: var(--ix-accent-press); } html[data-ui="ix"] body.auth-login .lg-entrar:disabled { opacity: 0.7; cursor: progress; } html[data-ui="ix"] body.auth-login .lg-ou { display: flex; align-items: center; gap: 10px; margin: clamp(8px, 1.6dvh, 16px) 0; color: var(--ix-text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } html[data-ui="ix"] body.auth-login .lg-ou::before, html[data-ui="ix"] body.auth-login .lg-ou::after { content: ""; flex: 1; height: 1px; background: var(--ix-divider); } html[data-ui="ix"] body.auth-login .lg-google { background: var(--ix-surface-2); color: var(--ix-text); border: 1px solid var(--ix-border-strong); } html[data-ui="ix"] body.auth-login .lg-google:hover { border-color: var(--ix-border-hover); background: var(--ix-surface-3, var(--ix-surface-2)); } html[data-ui="ix"] body.auth-login .lg-link { color: var(--ix-accent-ink); font-size: clamp(12px, 1.8dvh, 14px); font-weight: 500; text-decoration: none; } html[data-ui="ix"] body.auth-login .lg-link:hover { text-decoration: underline; } html[data-ui="ix"] body.auth-login .lg-cadastro { margin: clamp(10px, 2dvh, 20px) 0 0; text-align: center; color: var(--ix-text-2); font-size: clamp(13px, 1.8dvh, 14px); } html[data-ui="ix"] body.auth-login :is(a, button, input):focus-visible { outline: none; box-shadow: var(--ix-ring); } html[data-ui="ix"] body.auth-login .lg-rodape { width: 100%; max-width: 560px; text-align: center; color: var(--ix-text-3); font-size: clamp(10px, 1.45dvh, 12px); line-height: 1.4; } html[data-ui="ix"] body.auth-login .lg-rodape p { margin: 0; } html[data-ui="ix"] body.auth-login .lg-rodape p + p { margin-top: 4px; } @keyframes lg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] body.auth-login .lg-card { animation: none; } } @media (min-width: 900px) { html[data-ui="ix"] body.auth-login .lg-shell { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } html[data-ui="ix"] body.auth-login .lg-brand { display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.4dvh, 26px); min-width: 0; height: 100dvh; padding: clamp(24px, 6dvh, 72px) clamp(32px, 5vw, 96px); border-right: 1px solid var(--ix-border); background: radial-gradient(120% 80% at 0% 0%, var(--ix-chart-area), transparent 60%), var(--ix-surface-2); overflow: hidden; } html[data-ui="ix"] body.auth-login .lg-brand-logo { height: clamp(36px, 7dvh, 64px); width: auto; max-width: 60%; object-fit: contain; align-self: flex-start; } html[data-ui="ix"] body.auth-login .lg-brand-titulo { margin: 0; max-width: 18ch; font-size: clamp(24px, min(4.6dvh, 3vw), 46px); line-height: 1.12; font-weight: 650; letter-spacing: -0.02em; color: var(--ix-text); } html[data-ui="ix"] body.auth-login .lg-brand-sub { margin: 0; max-width: 42ch; font-size: clamp(14px, 2.1dvh, 18px); color: var(--ix-text-2); } html[data-ui="ix"] body.auth-login .lg-beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.6dvh, 16px); } html[data-ui="ix"] body.auth-login .lg-beneficios li { display: flex; align-items: center; gap: 12px; color: var(--ix-text-strong); font-size: clamp(13px, 1.9dvh, 16px); } html[data-ui="ix"] body.auth-login .lg-beneficios .ix-ico { flex: 0 0 auto; width: 34px; height: 34px; padding: 8px; border-radius: var(--ix-radius); background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] body.auth-login .lg-card-logo { display: none; } } @media (max-height: 600px) { html[data-ui="ix"] body.auth-login .lg-brand { display: none; } html[data-ui="ix"] body.auth-login .lg-shell { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] body.auth-login .lg-card-logo { display: block; height: 24px; margin-bottom: 4px; } html[data-ui="ix"] body.auth-login .lg-aviso { display: none; } html[data-ui="ix"] body.auth-login .lg-card { padding: 10px 16px; } html[data-ui="ix"] body.auth-login .lg-titulo { margin-bottom: 4px; font-size: 18px; } html[data-ui="ix"] body.auth-login .lg-form input, html[data-ui="ix"] body.auth-login .lg-entrar, html[data-ui="ix"] body.auth-login .lg-google { height: 38px; } } @media (max-height: 440px) { html[data-ui="ix"] body.auth-login .lg-card-logo, html[data-ui="ix"] body.auth-login .lg-titulo { display: none; } html[data-ui="ix"] body.auth-login .lg-main { padding-top: 4px; padding-bottom: 4px; } html[data-ui="ix"] body.auth-login .lg-ou { margin: 4px 0; } html[data-ui="ix"] body.auth-login .lg-cadastro { margin-top: 6px; } } /* Cadastro e Lista de espera (body.auth-cadastro, 2026-10-09): mesmo casco do login, formulário em passos (.lg-wiz). */ html[data-ui="ix"] body.auth-cadastro .lg-card { max-width: 440px; } html[data-ui="ix"] body.auth-cadastro .lg-card { flex-shrink: 0; } @media (max-width: 560px) { html[data-ui="ix"] body.auth-cadastro .lg-aviso { display: none; } } html[data-ui="ix"] body.auth-cadastro .lg-titulo { margin-bottom: 2px; } html[data-ui="ix"] body.auth-cadastro .lg-sub { margin: 0 0 clamp(4px, 1.2dvh, 12px); color: var(--ix-text-2); font-size: clamp(12px, 1.8dvh, 14px); line-height: 1.35; } html[data-ui="ix"] body.auth-cadastro .lg-passos { display: flex; gap: 6px; margin: clamp(4px, 1dvh, 10px) 0 clamp(2px, 0.8dvh, 8px); } html[data-ui="ix"] body.auth-cadastro .lg-passos i { flex: 1; height: 4px; border-radius: 4px; background: var(--ix-divider); transition: background 0.2s; } html[data-ui="ix"] body.auth-cadastro .lg-passos i.on { background: var(--ix-accent); } html[data-ui="ix"] body.auth-cadastro .lg-passo { border: 0; margin: 0; padding: 0; min-width: 0; } html[data-ui="ix"] body.auth-cadastro .lg-passo[hidden] { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-passo-titulo { padding: 0; margin: 0 0 clamp(0px, 0.4dvh, 4px); font-size: clamp(12px, 1.7dvh, 13px); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] body.auth-cadastro .lg-form > .lg-passo label:first-of-type { margin-top: clamp(4px, 0.8dvh, 8px); } html[data-ui="ix"] body.auth-cadastro .lg-grid { display: grid; grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] body.auth-cadastro .lg-grid > div { min-width: 0; } html[data-ui="ix"] body.auth-cadastro .lg-beta { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 clamp(2px, 0.8dvh, 8px); padding: clamp(6px, 1.1dvh, 10px) 12px; border-radius: var(--ix-radius-sm); background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-size: clamp(12px, 1.7dvh, 13px); line-height: 1.35; } html[data-ui="ix"] body.auth-cadastro .lg-beta .ix-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; } @media (max-height: 640px) { html[data-ui="ix"] body.auth-cadastro .lg-beta span { font-size: 11px; } html[data-ui="ix"] body.auth-cadastro .lg-beta { padding: 4px 8px; } } @media (max-height: 520px) { html[data-ui="ix"] body.auth-cadastro .lg-beta { display: none; } } html[data-ui="ix"] body.auth-cadastro .lg-opc { font-weight: 400; color: var(--ix-text-3); } html[data-ui="ix"] body.auth-cadastro .lg-dica { margin: clamp(4px, 1dvh, 10px) 0 0; color: var(--ix-text-3); font-size: clamp(11px, 1.55dvh, 12px); line-height: 1.35; } html[data-ui="ix"] body.auth-cadastro .lg-form textarea { width: 100%; min-width: 0; height: clamp(52px, 9dvh, 84px); margin: 0; padding: 8px 12px; resize: none; font-size: 16px; line-height: 1.35; border-radius: var(--ix-radius-sm); } html[data-ui="ix"] body.auth-cadastro .lg-form .lg-promo { text-transform: uppercase; letter-spacing: 0.12em; } html[data-ui="ix"] body.auth-cadastro .lg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 3px; border-radius: var(--ix-radius-sm); background: var(--ix-surface-2); border: 1px solid var(--ix-border); } html[data-ui="ix"] body.auth-cadastro .lg-form .lg-seg label { display: block; margin: 0; position: relative; } html[data-ui="ix"] body.auth-cadastro .lg-form .lg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; } html[data-ui="ix"] body.auth-cadastro .lg-seg span { display: grid; place-items: center; height: clamp(32px, 4.8dvh, 38px); border-radius: calc(var(--ix-radius-sm) - 2px); font-size: clamp(13px, 1.9dvh, 14px); font-weight: 550; color: var(--ix-text-2); cursor: pointer; } html[data-ui="ix"] body.auth-cadastro .lg-seg input:checked + span { background: var(--ix-accent); color: var(--ix-on-accent); box-shadow: var(--ix-btn-shadow); } html[data-ui="ix"] body.auth-cadastro .lg-seg input:focus-visible + span { box-shadow: var(--ix-ring); } html[data-ui="ix"] body.auth-cadastro .lg-form label.lg-check { display: flex; gap: 10px; align-items: flex-start; margin: clamp(8px, 1.6dvh, 16px) 0 0; font-size: clamp(11px, 1.6dvh, 13px); font-weight: 400; line-height: 1.4; color: var(--ix-text-2); cursor: pointer; } html[data-ui="ix"] body.auth-cadastro .lg-form .lg-check input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; accent-color: var(--ix-accent); } html[data-ui="ix"] body.auth-cadastro .lg-acoes { display: flex; gap: 8px; margin-top: clamp(10px, 2dvh, 20px); } html[data-ui="ix"] body.auth-cadastro .lg-acoes .lg-entrar { margin-top: 0; flex: 1 1 auto; } html[data-ui="ix"] body.auth-cadastro .lg-acoes [hidden] { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-voltar { flex: 0 0 auto; height: clamp(42px, 6.2dvh, 48px); padding: 0 16px; background: transparent; color: var(--ix-text-2); border: 1px solid var(--ix-border-strong); border-radius: var(--ix-radius-sm); font-size: 15px; font-weight: 550; cursor: pointer; } html[data-ui="ix"] body.auth-cadastro .lg-voltar:hover { color: var(--ix-text); border-color: var(--ix-border-hover); } html[data-ui="ix"] body.auth-cadastro .lg-entrar:disabled { opacity: 0.55; cursor: not-allowed; } html[data-ui="ix"] body.auth-cadastro .lg-entrar.is-loading { opacity: 0.7; cursor: progress; } html[data-ui="ix"] body.auth-cadastro .lg-google-topo { margin-top: clamp(4px, 1dvh, 10px); } html[data-ui="ix"] body.auth-cadastro .lg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } html[data-ui="ix"] body.auth-cadastro .lg-selo { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-size: clamp(12px, 1.7dvh, 14px); font-weight: 600; } html[data-ui="ix"] body.auth-cadastro .lg-selo .ix-ico { width: 16px; height: 16px; } html[data-ui="ix"] body.auth-cadastro .lg-sucesso { display: flex; flex-direction: column; align-items: center; text-align: center; } html[data-ui="ix"] body.auth-cadastro .lg-sucesso-ico { width: clamp(36px, 7dvh, 56px); height: clamp(36px, 7dvh, 56px); color: var(--ix-accent-ink); margin-bottom: clamp(4px, 1dvh, 10px); } html[data-ui="ix"] body.auth-cadastro .lg-posicao { margin: 0 0 clamp(4px, 1dvh, 10px); color: var(--ix-text-2); font-size: clamp(13px, 1.9dvh, 15px); } html[data-ui="ix"] body.auth-cadastro .lg-posicao b { display: block; font-size: clamp(32px, 6dvh, 52px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ix-text); font-variant-numeric: tabular-nums; } html[data-ui="ix"] body.auth-cadastro .lg-sucesso .lg-entrar { margin-top: clamp(8px, 1.8dvh, 18px); text-align: center; padding: 0 12px; } @media (min-width: 900px) { html[data-ui="ix"] body.auth-cadastro .lg-brand { gap: clamp(10px, 2.2dvh, 24px); } html[data-ui="ix"] body.auth-cadastro .lg-grid { grid-template-columns: 1fr 1fr; gap: 0 10px; } } @media (min-width: 560px) and (max-height: 600px) { html[data-ui="ix"] body.auth-cadastro .lg-card { max-width: 560px; } html[data-ui="ix"] body.auth-cadastro .lg-grid { grid-template-columns: 1fr 1fr; gap: 0 10px; } } @media (max-height: 720px) { html[data-ui="ix"] body.auth-cadastro .lg-aviso { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-sub, html[data-ui="ix"] body.auth-cadastro .lg-passo-titulo, html[data-ui="ix"] body.auth-cadastro .lg-dica { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-form textarea { height: 44px; } html[data-ui="ix"] body.auth-cadastro .lg-seg span { height: 30px; } html[data-ui="ix"] body.auth-cadastro .lg-voltar, html[data-ui="ix"] body.auth-cadastro .lg-entrar { height: 38px; } } @media (max-height: 720px) { html[data-ui="ix"] body.auth-cadastro .lg-ou { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-google-topo { height: 38px; margin: 6px 0 2px; } } @media (max-height: 520px) { html[data-ui="ix"] body.auth-cadastro .lg-google-topo { display: none; } } @media (max-height: 440px) { html[data-ui="ix"] body.auth-cadastro .lg-passos, html[data-ui="ix"] body.auth-cadastro .lg-sucesso-ico { display: none; } html[data-ui="ix"] body.auth-cadastro .lg-form label { margin-top: 3px; font-size: 12px; } html[data-ui="ix"] body.auth-cadastro .lg-form input { height: 32px; } html[data-ui="ix"] body.auth-cadastro .lg-seg span { height: 26px; } html[data-ui="ix"] body.auth-cadastro .lg-acoes { margin-top: 6px; } } /* ---------- 11i. Estatísticas (/estatisticas): visão geral em mini-painéis + painel analítico do assunto (2026-10-08) ---------- Prefixo st-. Cor de nível: classe .st-lv-N -> --st-c (tokens --ix-lv-N = db.CRISIS_LEVELS). Texto sobre foto: --ix-photo-*. */ html[data-ui="ix"] { --ix-lv-0: #22c55e; --ix-lv-1: #84cc16; --ix-lv-2: #eab308; --ix-lv-3: #f59e0b; --ix-lv-4: #f97316; --ix-lv-5: #dc2626; --ix-lv-6: #b91c1c; --ix-lv-on-light: #111827; --ix-lv-on-dark: #ffffff; --ix-photo-ink: #ffffff; --ix-photo-ink-2: rgba(255, 255, 255, 0.82); --ix-photo-scrim: rgba(3, 6, 12, 0.86); --ix-photo-scrim-mid: rgba(3, 6, 12, 0.42); --ix-photo-scrim-top: rgba(3, 6, 12, 0.10); --ix-photo-chip: rgba(255, 255, 255, 0.16); --ix-photo-chip-line: rgba(255, 255, 255, 0.26); } html[data-ui="ix"] .st-lv-0 { --st-c: var(--ix-lv-0); --st-on: var(--ix-lv-on-light); } html[data-ui="ix"] .st-lv-1 { --st-c: var(--ix-lv-1); --st-on: var(--ix-lv-on-light); } html[data-ui="ix"] .st-lv-2 { --st-c: var(--ix-lv-2); --st-on: var(--ix-lv-on-light); } html[data-ui="ix"] .st-lv-3 { --st-c: var(--ix-lv-3); --st-on: var(--ix-lv-on-light); } html[data-ui="ix"] .st-lv-4 { --st-c: var(--ix-lv-4); --st-on: var(--ix-lv-on-light); } html[data-ui="ix"] .st-lv-5 { --st-c: var(--ix-lv-5); --st-on: var(--ix-lv-on-dark); } html[data-ui="ix"] .st-lv-6 { --st-c: var(--ix-lv-6); --st-on: var(--ix-lv-on-dark); } html[data-ui="ix"] .st-page { display: flex; flex-direction: column; gap: calc(var(--ix-gap) * 1.75); } html[data-ui="ix"] .st-page > .page-hero, html[data-ui="ix"] .st-page > .flashes { margin-bottom: 0; } html[data-ui="ix"] .st-num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } html[data-ui="ix"] .st-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ix-text-3); } html[data-ui="ix"] .st-pos-ink { color: var(--ix-success-ink); } html[data-ui="ix"] .st-neg-ink { color: var(--ix-danger-ink); } html[data-ui="ix"] .st-warn-ink { color: var(--ix-warning-ink); } html[data-ui="ix"] .st-note { margin: 10px 0 0; font-size: 12px; color: var(--ix-text-3); } html[data-ui="ix"] .st-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 22px 4px; color: var(--ix-text-3); font-size: 13px; } html[data-ui="ix"] .st-empty .ix-ico { color: var(--ix-text-3); flex-shrink: 0; } html[data-ui="ix"] .st-btn-full { width: 100%; justify-content: center; margin-top: 10px; } html[data-ui="ix"] .st-btn-sm { padding: 4px 9px; font-size: 12px; min-height: 0; } html[data-ui="ix"] .st-col { flex-direction: column; } html[data-ui="ix"] .ix-btn.is-busy { opacity: 0.6; cursor: progress; } /* pílula de nível e variação */ html[data-ui="ix"] .st-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--st-c, var(--ix-neu)); color: var(--st-on, var(--ix-lv-on-dark)); font-size: 12px; font-weight: 650; white-space: nowrap; } html[data-ui="ix"] .st-pill .ix-ico { width: 12px; height: 12px; } html[data-ui="ix"] .st-pill--lg { font-size: 14px; padding: 5px 13px; } html[data-ui="ix"] .st-pill.is-frozen { background: var(--ix-photo-chip); color: var(--ix-photo-ink); border: 1px solid var(--ix-photo-chip-line); } html[data-ui="ix"] .st-delta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; background: var(--ix-surface-3); color: var(--ix-text-2); } html[data-ui="ix"] .st-delta small { font-size: 11px; font-weight: 500; opacity: 0.85; } html[data-ui="ix"] .st-delta .ix-ico { width: 12px; height: 12px; } html[data-ui="ix"] .st-delta.is-up { background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .st-delta.is-bad { background: var(--ix-danger-soft); color: var(--ix-danger-ink); } html[data-ui="ix"] .st-delta.is-good { background: var(--ix-success-soft); color: var(--ix-success-ink); } html[data-ui="ix"] .st-delta.is-none { background: none; color: var(--ix-text-3); font-weight: 500; padding-left: 0; } html[data-ui="ix"] .st-mini-tag { display: inline-flex; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--ix-surface-3); color: var(--ix-text-2); border: 1px solid var(--ix-border); } html[data-ui="ix"] .st-mini-tag.is-falsa { background: var(--ix-rating-falsa-bg); color: var(--ix-rating-falsa-ink); border-color: var(--ix-rating-falsa-line); } html[data-ui="ix"] .st-mini-tag.is-muted { color: var(--ix-text-3); background: none; } /* sparkline */ html[data-ui="ix"] .st-spark { display: block; width: 100%; height: 28px; overflow: visible; } html[data-ui="ix"] .st-spark polyline { fill: none; stroke: var(--ix-chart-line); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } html[data-ui="ix"] .st-spark.is-vol polyline { stroke: var(--ix-rank-bar); } html[data-ui="ix"] .st-spark.is-level polyline { stroke: var(--st-c, var(--ix-chart-line)); stroke-width: 2px; } /* mídia com foto encaixada (cover) + placeholder IX + véu de legibilidade */ html[data-ui="ix"] .st-media { position: relative; overflow: hidden; isolation: isolate; margin: 0; background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--st-c, var(--ix-accent)) 38%, transparent), transparent 62%), var(--ix-surface-3); } html[data-ui="ix"] .st-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; z-index: 1; } html[data-ui="ix"] .st-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ix-text-3); z-index: 0; } html[data-ui="ix"] .st-ph .ix-ico { width: 34px; height: 34px; opacity: 0.45; } html[data-ui="ix"] .st-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--ix-photo-scrim-top) 0%, var(--ix-photo-scrim-mid) 48%, var(--ix-photo-scrim) 100%); } /* ===== Visão geral ===== */ html[data-ui="ix"] .st-ov-sum { display: flex; flex-wrap: wrap; align-items: stretch; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); overflow: hidden; } html[data-ui="ix"] .st-ov-sum-item { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-right: 1px solid var(--ix-divider); } html[data-ui="ix"] .st-ov-sum-item .st-num { font-size: 34px; line-height: 1.05; font-weight: 650; color: var(--ix-text); } html[data-ui="ix"] .st-ov-sum-item span { font-size: 12.5px; color: var(--ix-text-2); } html[data-ui="ix"] .st-ov-sum-item.is-alert .st-num { color: var(--ix-danger-ink); } html[data-ui="ix"] .st-ov-sum-pior { flex: 1 1 260px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 16px 20px; text-decoration: none; color: var(--ix-text); background: linear-gradient(90deg, color-mix(in srgb, var(--st-c) 16%, transparent), transparent 85%); border-left: 3px solid var(--st-c); } html[data-ui="ix"] .st-ov-sum-pior .st-kicker { flex-basis: 100%; } html[data-ui="ix"] .st-ov-sum-pior b { font-size: 18px; font-weight: 650; letter-spacing: -0.01em; } html[data-ui="ix"] .st-ov-sum-pior > .ix-ico { margin-left: auto; color: var(--ix-text-3); } html[data-ui="ix"] .st-ov-sum-pior:hover > .ix-ico { color: var(--ix-text); } html[data-ui="ix"] .st-ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .st-box { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-decoration: none; color: var(--ix-text); background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } html[data-ui="ix"] a.st-box:hover { border-color: var(--ix-border-hover); box-shadow: var(--ix-shadow-md); transform: translateY(-1px); } html[data-ui="ix"] a.st-box:focus-visible { outline: none; box-shadow: var(--ix-ring); } html[data-ui="ix"] .st-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--st-c, transparent); z-index: 4; } html[data-ui="ix"] .st-box.is-atencao { border-color: color-mix(in srgb, var(--st-c) 55%, var(--ix-border)); } html[data-ui="ix"] .st-box-media { aspect-ratio: 16 / 7; } html[data-ui="ix"] .st-box-over { position: absolute; inset: auto 0 0 0; z-index: 3; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; } html[data-ui="ix"] .st-box-tags { display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .st-box-name { font-size: 19px; line-height: 1.2; font-weight: 650; letter-spacing: -0.015em; color: var(--ix-photo-ink); text-shadow: 0 1px 3px var(--ix-photo-scrim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .st-flag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; background: var(--ix-photo-chip); color: var(--ix-photo-ink); border: 1px solid var(--ix-photo-chip-line); backdrop-filter: blur(6px); } html[data-ui="ix"] .st-flag .ix-ico { width: 12px; height: 12px; } html[data-ui="ix"] .st-box-body { display: flex; flex-direction: column; gap: 11px; padding: 13px 14px 14px; flex: 1; } html[data-ui="ix"] .st-box-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } html[data-ui="ix"] .st-meter7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; flex: 1; max-width: 150px; height: 8px; } html[data-ui="ix"] .st-meter7 i { border-radius: 2px; background: var(--ix-gauge-off); } html[data-ui="ix"] .st-meter7 i.on { background: color-mix(in srgb, var(--st-c) 55%, var(--ix-gauge-off)); } html[data-ui="ix"] .st-meter7 i.cur { background: var(--st-c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--st-c) 30%, transparent); } html[data-ui="ix"] .st-box-nums { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: end; gap: 16px; } html[data-ui="ix"] .st-box-n { display: flex; flex-direction: column; line-height: 1.05; } html[data-ui="ix"] .st-box-n b { font-size: 30px; font-weight: 650; color: var(--ix-text); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } html[data-ui="ix"] .st-box-n.is-muted b { font-size: 17px; color: var(--ix-text-2); font-weight: 600; } html[data-ui="ix"] .st-box-n small { font-size: 11.5px; color: var(--ix-text-3); margin-top: 3px; } html[data-ui="ix"] .st-box-spark { align-self: end; min-width: 0; padding-bottom: 4px; } html[data-ui="ix"] .st-box-spark .st-spark { height: 26px; } html[data-ui="ix"] .st-box-sent { margin-top: 0; height: 5px; } html[data-ui="ix"] .st-box-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .st-box-foot span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } html[data-ui="ix"] .st-box-foot .ix-ico { width: 12px; height: 12px; color: var(--ix-text-3); } html[data-ui="ix"] .st-box-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; margin-top: auto; border-top: 1px solid var(--ix-divider); font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .st-box-meta > span:first-child { margin-right: auto; } html[data-ui="ix"] .st-box.is-frozen { background: var(--ix-surface-2); } html[data-ui="ix"] .st-box.is-frozen .st-media { filter: grayscale(1); } html[data-ui="ix"] .st-box.is-frozen .st-box-body { gap: 12px; } html[data-ui="ix"] .st-box.is-frozen .st-box-body .ix-muted { margin: 0; font-size: 12.5px; } html[data-ui="ix"] .st-box.is-frozen .ix-btn { align-self: flex-start; margin-top: auto; } /* ===== Painel do assunto ===== */ html[data-ui="ix"] .st-topline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } html[data-ui="ix"] .st-topline .ix-crumb { margin: 0; } html[data-ui="ix"] .st-topline .ix-crumb a { color: inherit; text-decoration: none; } html[data-ui="ix"] .st-topline .ix-crumb a:hover { color: var(--ix-text); text-decoration: underline; } html[data-ui="ix"] .st-topline-actions { display: flex; gap: 6px; } html[data-ui="ix"] .st-badge { display: inline-flex; padding: 0 6px; border-radius: 999px; background: var(--ix-accent-soft); color: var(--ix-accent-ink); font-size: 11px; font-weight: 650; } html[data-ui="ix"] .st-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--ix-gap); } html[data-ui="ix"] .st-hero-photo { height: clamp(280px, 28vw, 410px); border-radius: var(--ix-radius-lg); border: 1px solid var(--ix-border); box-shadow: var(--ix-shadow-sm); } html[data-ui="ix"] .st-hero-photo .st-ph .ix-ico { width: 54px; height: 54px; } html[data-ui="ix"] .st-hero-over { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: clamp(16px, 2.2vw, 28px); color: var(--ix-photo-ink); } html[data-ui="ix"] .st-hero-over .st-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--ix-photo-ink-2); align-self: flex-start; background: var(--ix-photo-chip); border: 1px solid var(--ix-photo-chip-line); padding: 4px 10px; border-radius: 999px; backdrop-filter: blur(6px); text-transform: none; letter-spacing: 0.01em; font-weight: 500; font-size: 12px; } html[data-ui="ix"] .st-hero-over .st-kicker b { color: var(--ix-photo-ink); font-weight: 650; } html[data-ui="ix"] .st-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ix-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ix-success) 30%, transparent); } html[data-ui="ix"] .st-hero-name { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: var(--ix-photo-ink); text-shadow: 0 2px 12px var(--ix-photo-scrim); overflow-wrap: anywhere; } html[data-ui="ix"] .st-hero-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-ui="ix"] .st-hero-state .st-delta { background: var(--ix-photo-chip); color: var(--ix-photo-ink); border: 1px solid var(--ix-photo-chip-line); backdrop-filter: blur(6px); } html[data-ui="ix"] .st-hero-state .st-delta.is-bad { background: color-mix(in srgb, var(--ix-lv-5) 70%, transparent); border-color: transparent; } html[data-ui="ix"] .st-hero-state .st-delta.is-good { background: color-mix(in srgb, var(--ix-lv-0) 55%, transparent); border-color: transparent; } html[data-ui="ix"] .st-scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; list-style: none; margin: 4px 0 0; padding: 0; max-width: 640px; } html[data-ui="ix"] .st-scale li { display: flex; flex-direction: column; gap: 5px; min-width: 0; } html[data-ui="ix"] .st-scale i { height: 5px; border-radius: 3px; background: var(--st-c); opacity: 0.4; } html[data-ui="ix"] .st-scale span { font-size: 10.5px; color: var(--ix-photo-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .st-scale li.is-cur i { opacity: 1; height: 8px; margin-top: -3px; box-shadow: 0 0 10px var(--st-c); } html[data-ui="ix"] .st-scale li.is-cur span { color: var(--ix-photo-ink); font-weight: 700; } html[data-ui="ix"] .st-gauge { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--st-c); } html[data-ui="ix"] .st-gauge-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } html[data-ui="ix"] .st-gauge-main { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; } html[data-ui="ix"] .st-gauge-svg { width: 100%; max-width: 240px; height: auto; } html[data-ui="ix"] .st-arc.is-off { opacity: 0.28; } html[data-ui="ix"] .st-needle { stroke: var(--ix-text); stroke-width: 3; stroke-linecap: round; } html[data-ui="ix"] .st-needle-hub { fill: var(--ix-text); } html[data-ui="ix"] .st-gauge-read { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-ui="ix"] .st-gauge-label { font-size: clamp(22px, 2vw, 30px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--ix-text); text-decoration: underline; text-decoration-color: var(--st-c); text-decoration-thickness: 4px; text-underline-offset: 6px; } html[data-ui="ix"] .st-gauge-step { font-size: 12px; color: var(--ix-text-3); margin-top: 8px; font-family: var(--ix-font-mono); } html[data-ui="ix"] .st-gauge-crit { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ix-text-2); } html[data-ui="ix"] .st-gauge-hist { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .st-gauge-hist .st-spark { height: 34px; } html[data-ui="ix"] .st-gauge-notes { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ix-text-2); } html[data-ui="ix"] .st-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--ix-surface-2); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); margin-top: calc(var(--ix-gap) * -0.9); } html[data-ui="ix"] .st-actions-btns { display: flex; flex-wrap: wrap; gap: 8px; } html[data-ui="ix"] .st-pulse { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } html[data-ui="ix"] .st-pulse .st-kicker { margin-right: 6px; } html[data-ui="ix"] .st-pulse-i { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; padding: 3px 6px; border-radius: 7px; background: var(--ix-surface); border: 1px solid var(--ix-divider); } html[data-ui="ix"] .st-pulse-i b { font-size: 14px; font-weight: 650; font-family: var(--ix-font-mono); color: var(--ix-text); } html[data-ui="ix"] .st-pulse-i small { font-size: 10px; color: var(--ix-text-3); } html[data-ui="ix"] .st-body { display: flex; flex-direction: column; gap: calc(var(--ix-gap) * 1.75); } html[data-ui="ix"] .st-body [hidden] { display: none !important; } html[data-ui="ix"] .st-kpis { margin-bottom: 0; grid-auto-flow: column; } html[data-ui="ix"] .st-kpis .ix-kpi { border-left: 0; box-shadow: -1px -1px 0 var(--ix-divider); } html[data-ui="ix"] .st-kpis .ix-kpi-value { font-size: 30px; } html[data-ui="ix"] .st-kpis .ix-kpi-value small { font-size: 12px; } html[data-ui="ix"] .st-kpis .st-kpi-text { font-size: 22px; } html[data-ui="ix"] .st-kpis .ix-kpi-foot { gap: 8px; } html[data-ui="ix"] .st-kpis .st-spark { height: 22px; margin-top: 8px; } html[data-ui="ix"] .st-kpi-bar { display: block; height: 5px; margin-top: 10px; border-radius: 999px; background: var(--ix-surface-3); overflow: hidden; } html[data-ui="ix"] .st-kpi-bar i { display: block; height: 100%; background: var(--ix-rank-bar); border-radius: inherit; } html[data-ui="ix"] .st-brief-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ix-gap); align-items: stretch; } html[data-ui="ix"] .st-player > * { margin: 0; } html[data-ui="ix"] .st-ai-lead { margin: 0; font-family: var(--ix-font-news); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; font-weight: 500; color: var(--ix-text); letter-spacing: -0.005em; } html[data-ui="ix"] .st-ai-why { display: flex; gap: 8px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ix-text-2); } html[data-ui="ix"] .st-ai-why .ix-ico { flex-shrink: 0; margin-top: 3px; color: var(--st-c); } html[data-ui="ix"] .st-more { margin-top: 12px; font-size: 13.5px; color: var(--ix-text-2); } html[data-ui="ix"] .st-more summary { cursor: pointer; font-weight: 600; color: var(--ix-accent-ink); font-size: 13px; } html[data-ui="ix"] .st-more ul { padding-left: 18px; } html[data-ui="ix"] .st-ai-local { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--ix-border); } html[data-ui="ix"] .st-ai-local p { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--ix-text-2); } html[data-ui="ix"] .st-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } html[data-ui="ix"] .st-sec-head .ix-h2 { font-size: 16px; } html[data-ui="ix"] .st-ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .st-ins { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; min-width: 0; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .st-ins.is-alert { border-color: var(--ix-danger-line); background: linear-gradient(180deg, var(--ix-danger-soft), var(--ix-surface) 70%); } html[data-ui="ix"] .st-ins-k { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ix-text-2); } html[data-ui="ix"] .st-ins-k .ix-ico { width: 14px; height: 14px; color: var(--ix-text-3); } html[data-ui="ix"] .st-ins.is-alert .st-ins-k .ix-ico { color: var(--ix-danger-ink); } html[data-ui="ix"] .st-ins-v { display: flex; align-items: baseline; gap: 8px; font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; color: var(--ix-text); font-variant-numeric: tabular-nums; } html[data-ui="ix"] .st-ins-v small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ix-text-3); } html[data-ui="ix"] .st-ins-v.is-empty { color: var(--ix-text-3); } html[data-ui="ix"] .st-ins.is-alert .st-ins-v { color: var(--ix-danger-ink); } html[data-ui="ix"] .st-ins-word { font-size: 26px; font-family: var(--ix-font-news); letter-spacing: -0.01em; overflow-wrap: anywhere; } html[data-ui="ix"] .st-ins p { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--ix-text-2); } html[data-ui="ix"] .st-ins p b { color: var(--ix-text-strong); font-weight: 600; } html[data-ui="ix"] .st-charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .st-c-8 { grid-column: span 8; } html[data-ui="ix"] .st-c-6 { grid-column: span 6; } html[data-ui="ix"] .st-c-4 { grid-column: span 4; } html[data-ui="ix"] .st-charts .ix-panel-sub b { color: var(--ix-text-strong); } html[data-ui="ix"] .st-chart { position: relative; padding-bottom: 20px; } html[data-ui="ix"] .st-svg { display: block; width: 100%; height: 190px; overflow: visible; } html[data-ui="ix"] .st-ymax { position: absolute; left: 0; top: -2px; font-size: 10.5px; color: var(--ix-text-3); font-family: var(--ix-font-mono); background: var(--ix-surface); padding-right: 4px; z-index: 1; } html[data-ui="ix"] .st-gridline { stroke: var(--ix-chart-grid); stroke-width: 1px; vector-effect: non-scaling-stroke; } html[data-ui="ix"] .st-bar { fill: var(--ix-rank-bar); opacity: 0.72; transition: opacity 0.1s ease; } html[data-ui="ix"] .st-bar:hover, html[data-ui="ix"] .st-chart g:hover .st-seg { opacity: 1; } html[data-ui="ix"] .st-bar.is-peak { fill: var(--ix-chart-line); opacity: 1; } html[data-ui="ix"] .st-bar.is-anom { fill: var(--ix-warning); opacity: 0.95; } html[data-ui="ix"] .st-bar.is-unknown { fill: var(--ix-gauge-off); opacity: 1; } html[data-ui="ix"] .st-thresh { stroke: var(--ix-warning); stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; } html[data-ui="ix"] .st-seg { opacity: 0.88; } html[data-ui="ix"] .st-seg.is-pos { fill: var(--ix-pos); } html[data-ui="ix"] .st-seg.is-neu { fill: var(--ix-neu-bar); } html[data-ui="ix"] .st-seg.is-neg { fill: var(--ix-neg); } html[data-ui="ix"] .st-xaxis { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; } html[data-ui="ix"] .st-xaxis span { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--ix-text-3); font-family: var(--ix-font-mono); white-space: nowrap; } html[data-ui="ix"] .st-legend .vol { background: var(--ix-rank-bar); height: 8px; width: 8px; } html[data-ui="ix"] .st-legend .peak { background: var(--ix-chart-line); height: 8px; width: 8px; } html[data-ui="ix"] .st-legend .anom { background: var(--ix-warning); height: 8px; width: 8px; } html[data-ui="ix"] .st-legend .thr { background: none; border-top: 2px dashed var(--ix-warning); height: 0; } html[data-ui="ix"] .st-termo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding-bottom: 0; } html[data-ui="ix"] .st-termo-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; height: 190px; } html[data-ui="ix"] .st-termo-levels li { flex: 1; display: flex; align-items: center; font-size: 10.5px; color: var(--ix-text-3); white-space: nowrap; } html[data-ui="ix"] .st-termo-plot { position: relative; padding-bottom: 20px; min-width: 0; } html[data-ui="ix"] .st-band { fill: var(--st-c); opacity: 0.13; } html[data-ui="ix"] .st-step { fill: none; stroke: var(--ix-text); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; } html[data-ui="ix"] .st-hit { fill: transparent; } html[data-ui="ix"] .st-hit:hover { fill: var(--ix-chart-area); } html[data-ui="ix"] .st-sim { fill: none; stroke: var(--ix-text-2); stroke-width: 2px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; display: none; } html[data-ui="ix"] .st-xaxis--sim { display: none; } html[data-ui="ix"] .st-termo.is-sim .st-sim, html[data-ui="ix"] .st-termo.is-sim .st-xaxis--sim { display: block; } html[data-ui="ix"] .st-termo.is-sim .st-termo-real, html[data-ui="ix"] .st-termo.is-sim .st-xaxis--real { display: none; } html[data-ui="ix"] .st-sim-toggle { flex-shrink: 0; font-size: 12px; } html[data-ui="ix"] .st-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } html[data-ui="ix"] .st-hbars li { display: grid; grid-template-columns: 78px minmax(0, 1fr) 34px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ix-text-2); } html[data-ui="ix"] .st-hbars li b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ix-text); font-weight: 600; } html[data-ui="ix"] .st-hbars li.is-zero { opacity: 0.5; } html[data-ui="ix"] .st-hbar { height: 10px; border-radius: 3px; background: var(--ix-surface-3); overflow: hidden; } html[data-ui="ix"] .st-hbar i { display: block; height: 100%; border-radius: 3px; background: var(--ix-neu-bar); } html[data-ui="ix"] .st-hbars .is-pos .st-hbar i { background: var(--ix-pos); } html[data-ui="ix"] .st-hbars .is-neg .st-hbar i { background: var(--ix-neg); } html[data-ui="ix"] .st-hbars .is-falsa .st-hbar i { background: var(--ix-rating-falsa-ink); } html[data-ui="ix"] .st-heat { display: grid; grid-template-columns: 30px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; } html[data-ui="ix"] .st-heat i { display: block; aspect-ratio: 1 / 1; min-height: 9px; border-radius: 3px; background: var(--ix-surface-3); } html[data-ui="ix"] .st-heat i[data-heat] { cursor: pointer; } html[data-ui="ix"] .st-heat i:hover, html[data-ui="ix"] .st-heat i:focus-visible { outline: 2px solid var(--ix-text); outline-offset: -1px; } html[data-ui="ix"] .st-heat-h, html[data-ui="ix"] .st-heat-d { font-size: 10px; color: var(--ix-text-3); font-family: var(--ix-font-mono); } html[data-ui="ix"] .st-heat .nv-1, html[data-ui="ix"] .st-heat-legend .nv-1 { background: color-mix(in srgb, var(--ix-rank-bar) 28%, var(--ix-surface-3)); } html[data-ui="ix"] .st-heat .nv-2, html[data-ui="ix"] .st-heat-legend .nv-2 { background: color-mix(in srgb, var(--ix-rank-bar) 52%, var(--ix-surface-3)); } html[data-ui="ix"] .st-heat .nv-3, html[data-ui="ix"] .st-heat-legend .nv-3 { background: color-mix(in srgb, var(--ix-rank-bar) 76%, var(--ix-surface-3)); } html[data-ui="ix"] .st-heat .nv-4, html[data-ui="ix"] .st-heat-legend .nv-4 { background: var(--ix-chart-line); } html[data-ui="ix"] .st-heat-legend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ix-text-3); white-space: nowrap; } html[data-ui="ix"] .st-heat-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--ix-surface-3); } html[data-ui="ix"] .st-heat-legend i:first-of-type { margin-left: 4px; } html[data-ui="ix"] .st-heat-legend i:last-of-type { margin-right: 4px; } html[data-ui="ix"] .st-src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } html[data-ui="ix"] .st-src li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; } html[data-ui="ix"] .st-src-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ix-text); } html[data-ui="ix"] .st-src-name > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-ui="ix"] .st-src li > b { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ix-text-2); font-weight: 600; } html[data-ui="ix"] .st-src-bar { grid-column: 1 / -1; margin-top: 0; height: 7px; } html[data-ui="ix"] .st-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .st-feature { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; gap: 12px 16px; padding: 16px; min-width: 0; background: var(--ix-surface); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg); box-shadow: var(--ix-shadow-xs); } html[data-ui="ix"] .st-feature.is-good { border-top: 3px solid var(--ix-pos); } html[data-ui="ix"] .st-feature.is-bad { border-top: 3px solid var(--ix-neg); } html[data-ui="ix"] .st-feature.is-neu { border-top: 3px solid var(--ix-rank-bar); } html[data-ui="ix"] .st-feature-k { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ix-text-2); } html[data-ui="ix"] .st-feature.is-good .st-feature-k .ix-ico { color: var(--ix-success-ink); } html[data-ui="ix"] .st-feature.is-bad .st-feature-k .ix-ico { color: var(--ix-danger-ink); } html[data-ui="ix"] .st-feature > .st-empty { grid-column: 1 / -1; } html[data-ui="ix"] .st-feature-media { aspect-ratio: 4 / 3; border-radius: var(--ix-radius); align-self: start; } html[data-ui="ix"] .st-feature-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } html[data-ui="ix"] .st-feature-meta { display: flex; gap: 8px; font-size: 11.5px; color: var(--ix-text-3); } html[data-ui="ix"] .st-feature-meta b { color: var(--ix-text-2); font-weight: 600; } html[data-ui="ix"] .st-feature-meta span { font-family: var(--ix-font-mono); font-size: 11px; } html[data-ui="ix"] .st-feature-title { font-family: var(--ix-font-news); font-size: 19px; line-height: 1.28; font-weight: 600; color: var(--ix-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .st-feature-title:hover { text-decoration: underline; } html[data-ui="ix"] .st-feature-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ix-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } html[data-ui="ix"] .st-feature-tag { align-self: flex-start; margin-top: auto; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--ix-surface-3); color: var(--ix-text-2); text-transform: capitalize; } html[data-ui="ix"] .st-lists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .st-list .ix-stories, html[data-ui="ix"] .st-cur .ix-stories { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .st-list .ix-stories > .ix-story-row:nth-child(2), html[data-ui="ix"] .st-cur .ix-stories > .ix-story-row:nth-child(2) { border-top-color: var(--ix-divider); padding-top: 12px; } html[data-ui="ix"] .st-list .ix-thumb { width: 60px; height: 46px; } html[data-ui="ix"] .st-list .ix-story-row-title { font-size: 14.5px; } html[data-ui="ix"] .st-foot-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ix-gap); } html[data-ui="ix"] .st-terms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } html[data-ui="ix"] .st-terms li { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ix-border); background: var(--ix-surface-2); color: var(--ix-text-2); font-size: 12.5px; } html[data-ui="ix"] .st-terms li small { font-size: 10.5px; color: var(--ix-text-3); font-family: var(--ix-font-mono); } html[data-ui="ix"] .st-terms li.w-2 { font-size: 14px; color: var(--ix-text-strong); } html[data-ui="ix"] .st-terms li.w-3 { font-size: 16px; font-weight: 600; color: var(--ix-text); background: var(--ix-accent-soft); border-color: var(--ix-accent-soft-2); } html[data-ui="ix"] .st-kv { list-style: none; margin: 0; padding: 0; } html[data-ui="ix"] .st-kv li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--ix-divider); font-size: 13px; color: var(--ix-text-2); } html[data-ui="ix"] .st-kv li:first-child { border-top: 0; } html[data-ui="ix"] .st-kv li b { color: var(--ix-text); font-weight: 600; text-align: right; } html[data-ui="ix"] .st-kv li b small { color: var(--ix-text-3); font-weight: 400; } html[data-ui="ix"] .st-cur { padding-top: 12px; padding-bottom: 12px; } html[data-ui="ix"] .st-cur > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; } html[data-ui="ix"] .st-cur > summary::-webkit-details-marker { display: none; } html[data-ui="ix"] .st-cur[open] > summary { margin-bottom: 10px; } html[data-ui="ix"] .st-body > .st-cur + .st-cur { margin-top: calc(var(--ix-gap) * -1.1); } html[data-ui="ix"] .st-tip { position: fixed; z-index: 3000; max-width: 280px; padding: 6px 9px; border-radius: 7px; background: var(--ix-tooltip-bg); color: var(--ix-tooltip-text); font-size: 12px; line-height: 1.35; pointer-events: none; box-shadow: var(--ix-shadow-pop); } /* plano sem acesso completo: tudo real, mas borrado (o nome do assunto continua legível) */ html[data-ui="ix"] .st-page.stats-locked .st-body, html[data-ui="ix"] .st-page.stats-locked .st-actions, html[data-ui="ix"] .st-page.stats-locked .st-gauge > :not(.st-gauge-head), html[data-ui="ix"] .st-page.stats-locked .st-hero-state, html[data-ui="ix"] .st-page.stats-locked .st-scale { filter: blur(7px); pointer-events: none; user-select: none; } /* ---- Botão-barra de carregamento ([data-ix-loading], static/js/ix-loading.js) ---- */ html[data-ui="ix"] [data-ix-loading] { position: relative; overflow: hidden; } html[data-ui="ix"] [data-ix-loading].ix-loading { pointer-events: none; cursor: progress; } html[data-ui="ix"] [data-ix-loading].ix-loading::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ix-p, 0%); background: var(--ix-accent-hover, var(--ix-accent)); opacity: .55; z-index: 0; transition: width .18s ease-out; } html[data-ui="ix"] [data-ix-loading] > *, html[data-ui="ix"] [data-ix-loading].ix-loading { z-index: 1; } html[data-ui="ix"] [data-ix-loading].ix-loading-erro { background: var(--ix-danger, #c0392b); color: #fff; } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] [data-ix-loading].ix-loading::before { transition: none; } } /* ---- Tour de primeiro login (static/js/ix-tour.js) ---- */ html[data-ui="ix"] .ix-tour-anel { position: fixed; z-index: 9000; pointer-events: none; border-radius: 10px; box-shadow: 0 0 0 3px var(--ix-accent), 0 0 0 9999px rgba(0, 0, 0, .35); transition: all .2s ease-out; } html[data-ui="ix"] .ix-tour-card { position: fixed; z-index: 9001; width: 320px; max-width: calc(100vw - 24px); padding: 14px 16px; background: var(--ix-surface, #fff); color: var(--ix-text, #111); border: 1px solid var(--ix-border, #ddd); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28); } html[data-ui="ix"] .ix-tour-card h3 { margin: 6px 0 4px; font-size: 1rem; } html[data-ui="ix"] .ix-tour-card p { margin: 0 0 10px; font-size: .88rem; line-height: 1.45; color: var(--ix-text-muted, inherit); } html[data-ui="ix"] .ix-tour-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; } html[data-ui="ix"] .ix-tour-passo { font-size: .75rem; font-weight: 700; color: var(--ix-accent-ink, var(--ix-accent)); } html[data-ui="ix"] .ix-tour-pular { background: none; border: 0; cursor: pointer; font: inherit; font-size: .78rem; color: var(--ix-text-muted, #666); text-decoration: underline; } html[data-ui="ix"] .ix-tour-acoes { display: flex; gap: 8px; } html[data-ui="ix"] .ix-tour-btn { display: inline-block; padding: 8px 14px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; font-size: .85rem; background: var(--ix-accent); color: #fff; text-decoration: none; } html[data-ui="ix"] .ix-tour-card.ix-tour-solto { right: 16px; bottom: 16px; left: auto; top: auto; } @media (max-width: 640px) { html[data-ui="ix"] .ix-tour-card { left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; } html[data-ui="ix"] .ix-tour-anel { box-shadow: 0 0 0 3px var(--ix-accent); } } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] .ix-tour-anel { transition: none; } } /* ---------- 12. Responsivo ---------- */ /* Estatísticas (11i) */ @media (max-width: 1366px) { html[data-ui="ix"] .st-kpis { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-ui="ix"] .st-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="ix"] .st-lists > :last-child { grid-column: 1 / -1; } } @media (max-width: 1180px) { html[data-ui="ix"] .st-hero { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .st-brief-row, html[data-ui="ix"] .st-news, html[data-ui="ix"] .st-foot-row { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .st-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="ix"] .st-c-8, html[data-ui="ix"] .st-c-6, html[data-ui="ix"] .st-c-4 { grid-column: 1 / -1; } } @media (max-width: 760px) { html[data-ui="ix"] .st-page, html[data-ui="ix"] .st-body { gap: calc(var(--ix-gap) * 1.25); } html[data-ui="ix"] .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="ix"] .st-kpis > :last-child:nth-child(odd) { grid-column: 1 / -1; } html[data-ui="ix"] .st-kpis .ix-kpi { padding: 12px 14px; } html[data-ui="ix"] .st-kpis .ix-kpi-value { font-size: 25px; } html[data-ui="ix"] .st-ins-grid, html[data-ui="ix"] .st-lists { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .st-ins-v { font-size: 32px; } html[data-ui="ix"] .st-hero-photo { height: 300px; } html[data-ui="ix"] .st-scale span { display: none; } html[data-ui="ix"] .st-gauge-main { grid-template-columns: 120px minmax(0, 1fr); } html[data-ui="ix"] .st-actions { margin-top: 0; } html[data-ui="ix"] .st-actions-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } html[data-ui="ix"] .st-actions-btns .ix-btn { justify-content: center; white-space: normal; text-align: center; } html[data-ui="ix"] .st-pulse { width: 100%; justify-content: space-between; } html[data-ui="ix"] .st-pulse .st-kicker { flex-basis: 100%; } html[data-ui="ix"] .st-pulse-i { min-width: 0; flex: 1; } html[data-ui="ix"] .st-feature { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .st-feature-media { aspect-ratio: 16 / 9; } html[data-ui="ix"] .st-heat { grid-template-columns: 24px repeat(24, minmax(0, 1fr)); gap: 2px; } html[data-ui="ix"] .st-heat i { min-height: 0; border-radius: 2px; } html[data-ui="ix"] .st-heat-legend { display: none; } html[data-ui="ix"] .st-svg, html[data-ui="ix"] .st-termo-levels { height: 160px; } html[data-ui="ix"] .ix-panel-head:has(.st-sim-toggle) { flex-wrap: wrap; } html[data-ui="ix"] .st-ov-sum-item { flex-basis: 45%; padding: 12px 14px; border-bottom: 1px solid var(--ix-divider); } html[data-ui="ix"] .st-ov-sum-item .st-num { font-size: 28px; } html[data-ui="ix"] .st-box-name { font-size: 18px; } } @media (max-width: 480px) { html[data-ui="ix"] .eds-acoes > * { flex: 1 1 100%; justify-content: center; } } /* Estúdio: barra de ações agrupada empilha no celular (sem overflow horizontal) */ @media (max-width: 767px) { html[data-ui="ix"] .car-barra--grupos { flex-direction: column; align-items: stretch; } html[data-ui="ix"] .car-barra--grupos .car-grupo { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--ix-border); padding-bottom: var(--ix-gap); margin-left: 0 !important; } html[data-ui="ix"] .car-barra--grupos .car-grupo:last-child { border-bottom: 0; padding-bottom: 0; } html[data-ui="ix"] .car-barra--grupos .car-grupo > *, html[data-ui="ix"] .car-barra--grupos .car-grupo form { flex: 1 1 100%; } html[data-ui="ix"] .car-barra--grupos .btn-command, html[data-ui="ix"] .car-barra--grupos .btn-secondary-action { justify-content: center; width: 100%; box-sizing: border-box; } html[data-ui="ix"] .car-barra--grupos .car-sec { display: none; } html[data-ui="ix"] .car-barra--grupos .car-form-aprov { flex-wrap: wrap; } html[data-ui="ix"] .car-mais-menu { position: static; box-shadow: none; margin-top: 6px; min-width: 0; } html[data-ui="ix"] .car-wiz-tipos { grid-template-columns: 1fr 1fr; } } /* Radar 3D: painéis empilham abaixo do palco */ @media (max-width: 1366px) { html[data-ui="ix"] .rd-grid > .rd-stage { order: -1; } html[data-ui="ix"] .rd-grid { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .rd-col-r { order: 0; } html[data-ui="ix"] .rd-col-l { order: 1; } html[data-ui="ix"] .rd-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } } @media (max-width: 900px) { html[data-ui="ix"] .rd-linha1 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 767px) { html[data-ui="ix"] .rd-stage { min-height: 520px; height: 70vh; } html[data-ui="ix"] .rd-hud-t .rd-sp, html[data-ui="ix"] .rd-live { display: none; } } @media (max-width: 1180px) { /* a sidebar de 248px come largura: a ficha vira uma coluna antes dos 900px */ html[data-ui="ix"] .fx-grid { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .fx-prev { grid-column: 1; grid-row: auto; position: static; } /* no DOM a prévia já vem logo depois do campo 6 */ html[data-ui="ix"] .fx-seg { width: 100%; } html[data-ui="ix"] .fx-seg-b { flex: 1; padding: 9px 8px; } html[data-ui="ix"] .fx-ticks span { font-size: 10px; } } @media (max-width: 1500px) { html[data-ui="ix"] .ix-overview { grid-template-columns: minmax(0, 1fr) 320px; } html[data-ui="ix"] .ix-kpi-value { font-size: 24px; } } @media (max-width: 1366px) { /* Resumo: Briefing ocupa a largura toda até o Termômetro; "Evolução das menções" desce, em largura total */ html[data-ui="ix"] .ix-row-brief--wide-first { grid-template-columns: minmax(0, 1fr); grid-template-areas: "briefing" "evolucao"; } html[data-ui="ix"] .ix-row-brief--wide-first > .ix-brief { grid-area: briefing; } html[data-ui="ix"] .ix-row-brief--wide-first > .ix-panel:not(.ix-brief) { grid-area: evolucao; } } @media (max-width: 1360px) { html[data-ui="ix"] { --ix-page-x: 22px; } html[data-ui="ix"] .ix-kpis { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-ui="ix"] .ix-kpi { border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-kpi:nth-child(-n+3) { border-top: 0; } html[data-ui="ix"] .ix-kpi:nth-child(3n+1) { border-left: 0; } } @media (max-width: 1180px) { html[data-ui="ix"] .ix-overview { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .ix-row-brief { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .ix-overview-rail { position: static; order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } html[data-ui="ix"] .ix-feed-layout { grid-template-columns: minmax(0, 1fr) 272px; } html[data-ui="ix"] .ix-stories { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .ix-stories > .ix-story-row:nth-child(2) { border-top-color: var(--ix-divider); padding-top: 12px; } } /* Dashboard: abaixo de 768px o painel de filtros vira tela cheia (comportamento de sempre) */ @media (max-width: 880px) { html[data-ui="ix"] { --ix-page-x: 14px; --ix-page-top: 16px; --ix-panel-pad: 14px; --layout-gap: 12px; } html[data-ui="ix"] body:has(.app-sidebar) main.ix-page { padding-left: var(--ix-page-x); padding-bottom: 96px; } html[data-ui="ix"] .app-topbar { left: 0; padding: 0 10px; gap: 4px; } html[data-ui="ix"] .app-sidebar-toggle { display: inline-flex; } html[data-ui="ix"] .app-topbar-search-btn { display: inline-flex; margin-right: auto; } html[data-ui="ix"] .app-topbar-clock { display: none; } html[data-ui="ix"] .app-topbar-avatar-btn { padding: 3px; } html[data-ui="ix"] .app-sidebar { width: min(var(--sidebar-width), 86vw); box-shadow: var(--ix-shadow-pop); } html[data-ui="ix"] .app-sidebar-backdrop { background: rgba(16, 24, 40, 0.35); backdrop-filter: blur(2px); } html[data-ui="ix"] .app-sidebar-close-fab { background: var(--ix-surface); border: 1px solid var(--ix-border); color: var(--ix-text-2); box-shadow: var(--ix-shadow-md); } html[data-ui="ix"] .ix-h1 { font-size: 21px; } html[data-ui="ix"] .ix-head { margin-bottom: 14px; align-items: flex-start; } html[data-ui="ix"] .ix-head-actions .ix-btn, html[data-ui="ix"] .ix-head-actions .ix-chip { height: 34px; } html[data-ui="ix"] .ix-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-ui="ix"] .ix-kpi:nth-child(-n+3) { border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-kpi:nth-child(-n+2) { border-top: 0; } html[data-ui="ix"] .ix-kpi:nth-child(3n+1) { border-left: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-kpi:nth-child(2n+1) { border-left: 0; } html[data-ui="ix"] .ix-kpi { padding: 12px 14px; } html[data-ui="ix"] .ix-kpi-value { font-size: 22px; } html[data-ui="ix"] .ix-spark, html[data-ui="ix"] .ix-minibars { display: none; } html[data-ui="ix"] .ix-overview-rail { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .ix-row-2, html[data-ui="ix"] .ix-row-brief { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .ix-subjects .ticker { grid-auto-columns: 200px; } html[data-ui="ix"] .ix-table-title { min-width: 220px; } html[data-ui="ix"] .ix-panel-head { flex-wrap: wrap; } } @media (max-width: 768px) { html[data-ui="ix"] .ix-feed-layout { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .filters-sidebar.ix-filters { display: none; position: fixed; inset: 0; z-index: 220; max-height: none; border-radius: 0; border: 0; padding: 0 0 24px; background: var(--ix-surface); } html[data-ui="ix"] .filters-sidebar.ix-filters.mobile-open { display: block; } html[data-ui="ix"] .mobile-filter-close { display: flex; align-items: center; justify-content: flex-end; gap: 6px; position: sticky; top: 0; z-index: 2; margin: 0; padding: 14px 16px; background: var(--ix-surface); border-bottom: 1px solid var(--ix-divider); font-weight: 600; font-size: 13.5px; color: var(--ix-text-strong); cursor: pointer; } html[data-ui="ix"] .mobile-filter-btn { display: inline-flex; align-items: center; gap: 8px; bottom: 18px; right: 16px; padding: 12px 18px; background: var(--ix-tooltip-bg); color: var(--ix-tooltip-text); border-radius: 999px; box-shadow: var(--ix-shadow-pop); font-weight: 600; font-size: 13.5px; } html[data-ui="ix"] .mobile-filter-btn .ix-ico { vertical-align: 0; } html[data-ui="ix"] .view-card_grande, html[data-ui="ix"] .view-card_pequeno { grid-template-columns: minmax(0, 1fr); } html[data-ui="ix"] .view-lista_grande .ix-story { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; } html[data-ui="ix"] .view-lista_grande .ix-story-media { width: 96px; height: 72px; grid-row: auto; } html[data-ui="ix"] .view-lista_grande .ix-story { grid-template-areas: "meta meta" "title media" "summary summary" "signals signals" "actions actions"; } html[data-ui="ix"] .view-lista_grande .ix-story--noimg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "summary" "signals" "actions"; } html[data-ui="ix"] .view-lista_grande .ix-story-title { font-size: 16.5px; } html[data-ui="ix"] .view-lista_pequena .ix-story.card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "signals" "actions"; row-gap: 4px; padding: 12px 14px; } html[data-ui="ix"] .view-lista_pequena .ix-story-meta { flex-direction: row; align-items: center; gap: 8px; } html[data-ui="ix"] .view-lista_pequena .ix-story-time::before { display: inline; } html[data-ui="ix"] .view-lista_pequena .ix-story .ix-story-title a { -webkit-line-clamp: 2; } html[data-ui="ix"] .view-lista_pequena .ix-story-actions.card-actions { flex-wrap: wrap; margin-top: 4px; } html[data-ui="ix"] .ix-story .ai-resumo-btn, html[data-ui="ix"] .ix-story .ix-act--primary { margin-left: 0; } html[data-ui="ix"] .ix-feed-toolbar { flex-wrap: wrap; } } @media (max-width: 560px) { html[data-ui="ix"] .ix-head-actions { width: 100%; } html[data-ui="ix"] .ix-head-actions .ix-btn { flex: 1; } html[data-ui="ix"] .ix-head-actions .ix-chip { display: none; } html[data-ui="ix"] .ix-story .ix-story-title { font-size: 16px; } html[data-ui="ix"] .view-card_grande .ix-story { grid-template-columns: minmax(0, 1fr) 84px; } html[data-ui="ix"] .view-card_grande .ix-story-media { width: 84px; height: 64px; } html[data-ui="ix"] .ix-donut { width: 112px; height: 112px; } } @media (prefers-reduced-motion: reduce) { html[data-ui="ix"] .ix-live i, html[data-ui="ix"] .flash-glow-new, html[data-ui="ix"] .flash-glow { animation: none; } } /* ---------- Chat usuário <-> ADM: balões legíveis em todos os temas (texto branco) ---------- */ html[data-ui="ix"] .chat-bubble, html[data-ui="ix"] .chat-bubble .chat-bubble-text, html[data-ui="ix"] .chat-bubble .chat-bubble-time { color: #fff; } html[data-ui="ix"] .chat-bubble-theirs { background: var(--ix-banner-bg); border: 1px solid var(--ix-banner-bd); } html[data-ui="ix"] .chat-bubble-mine { background: color-mix(in srgb, var(--ix-accent) 62%, #0B1220); border: 1px solid var(--ix-accent); } html[data-ui="ix"] .chat-bubble-time { opacity: 0.75; } html[data-ui="ix"] .chat-thread-dark { background: rgba(0, 0, 0, 0.55); } /* briefing por assunto: altura fixa (como "Principal assunto"), etapas assunto -> formato -> texto|áudio */ html[data-ui="ix"] .ix-brief { display: flex; flex-direction: column; min-height: 440px; } html[data-ui="ix"] .ix-brief-body { flex: 1; display: flex; flex-direction: column; gap: var(--ix-gap-sm); min-width: 0; } html[data-ui="ix"] .ix-brief-body > [data-rg-etapa]:not([hidden]) { flex: 1; } html[data-ui="ix"] .ix-brief-todos { margin-top: var(--ix-gap); } html[data-ui="ix"] .ix-brief-ask { margin: 0 0 var(--ix-gap); font-size: 14px; color: var(--ix-text-strong); } html[data-ui="ix"] .ix-brief-fmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ix-gap); } html[data-ui="ix"] .ix-brief-opt { display: grid; gap: 4px; justify-items: start; padding: 16px; text-align: left; cursor: pointer; font: inherit; border-radius: var(--ix-radius-lg); border: 1px solid var(--ix-border); background: var(--ix-surface-2); color: var(--ix-text-strong); transition: border-color .12s ease, background-color .12s ease; } html[data-ui="ix"] .ix-brief-opt:hover { border-color: var(--ix-accent); background: var(--ix-accent-soft); } html[data-ui="ix"] .ix-brief-opt .ix-ico { width: 20px; height: 20px; color: var(--ix-accent-ink); } html[data-ui="ix"] .ix-brief-opt b { font-size: 15px; font-weight: 600; } html[data-ui="ix"] .ix-brief-opt span { font-size: 12.5px; color: var(--ix-text-3); } html[data-ui="ix"] .ix-brief-foot { display: flex; align-items: center; gap: var(--ix-gap-sm); flex-wrap: wrap; margin-top: var(--ix-gap); padding-top: var(--ix-gap-sm); border-top: 1px solid var(--ix-divider); } html[data-ui="ix"] .ix-brief-foot:not([hidden]) { display: flex; } html[data-ui="ix"] .ix-brief-foot .ix-btn { margin-left: auto; } html[data-ui="ix"] .ix-brief-aviso { font-size: 12.5px; color: var(--ix-success-ink); } html[data-ui="ix"] .ix-brief-aviso.is-erro { color: var(--ix-warning-ink); } @media (max-width: 640px) { html[data-ui="ix"] .ix-brief-fmt { grid-template-columns: minmax(0, 1fr); } } html[data-ui="ix"] #rdGrupo[aria-pressed="true"] { background: var(--ix-accent-soft); border-color: var(--ix-accent); color: var(--ix-accent-ink); } [data-popup-area] { cursor: pointer; } /* faixa "relatório de IA pendente" (templates/_ai_report_faixa.html): informativa, nunca bloqueia */ html[data-ui="ix"] .ix-ai-faixa { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 var(--ix-gap); padding: 10px 14px; background: var(--ix-accent-soft); border: 1px solid var(--ix-border); border-radius: var(--ix-radius-lg, 12px); color: var(--ix-text-strong); font-size: 13px; line-height: 1.45; } html[data-ui="ix"] .ix-ai-faixa p { margin: 0; } html[data-ui="ix"] .ix-ai-faixa .ix-ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ix-accent-ink); } /* ---------- 11z. Revisão geral de UI/UX (2026-10-15) ---------- */ /* Abas do Estúdio: quando os grupos quebram de linha, cada grupo vira uma linha alinhada (sem divisória lateral solta) */ html[data-ui="ix"] .ix-tabs-label { display: inline-block; min-width: 74px; } @media (min-width: 881px) and (max-width: 1400px) { html[data-ui="ix"] .ix-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 0; } html[data-ui="ix"] .ix-tabs-group + .ix-tabs-group { padding-left: 0; border-left: 0; } } @media (max-width: 880px) { /* faixa rolável: esmaece a borda direita para indicar que há mais abas */ html[data-ui="ix"] .ix-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; } html[data-ui="ix"] .ix-tabs-group + .ix-tabs-group { padding-left: 14px; } /* o botão ✕ do drawer cobria a versão no cabeçalho da sidebar */ html[data-ui="ix"] .app-sidebar .app-sidebar-version-tag { display: none; } } /* Sidebar: rótulo de grupo nunca empurra o selo "Novo" para fora nem estoura a linha */ html[data-ui="ix"] .sidebar-link .sidebar-link-label { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-ui="ix"] .sidebar-group-toggle { padding-right: 28px; } html[data-ui="ix"] .sidebar-group-toggle .sidebar-badge-novo { font-size: 9px; padding: 1px 5px; flex: none; } html[data-ui="ix"] .sidebar-sublink .sidebar-sublink-label { overflow-wrap: anywhere; } /* Seletor "Gerar desta pauta": menu com tokens IX, ícone alinhado e sem estourar a tela no celular */ html[data-ui="ix"] .pauta-tipo-menu { background: var(--ix-surface); border: 1px solid var(--ix-border); box-shadow: var(--ix-shadow-pop); border-radius: var(--ix-radius); min-width: 190px; max-width: calc(100vw - 32px); z-index: 40; } html[data-ui="ix"] .pauta-tipo-menu a { display: flex; align-items: center; gap: 9px; color: var(--ix-text-strong); font-weight: 500; } html[data-ui="ix"] .pauta-tipo-menu a:hover { background: var(--ix-surface-3); } html[data-ui="ix"] .pauta-tipo-menu a .ix-ico { width: 16px; height: 16px; flex: none; color: var(--ix-text-3); vertical-align: 0; } html[data-ui="ix"] .pauta-tipo-menu a.pauta-tipo-sugerido { background: var(--ix-accent-soft); color: var(--ix-accent-ink); } html[data-ui="ix"] .estudio-pauta-cta .ix-ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; } @media (max-width: 640px) { html[data-ui="ix"] .pauta-tipo-menu { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; max-width: none; } } /* Ícones inline dentro de chips/rótulos do Estúdio (Post · Carrossel · Reel) com o mesmo alinhamento */ html[data-ui="ix"] .pub-chip, html[data-ui="ix"] .estudio-kanban-tipo, html[data-ui="ix"] .cal-evento-tipo { display: inline-flex; align-items: center; gap: 5px; } html[data-ui="ix"] .pub-chip .ix-ico, html[data-ui="ix"] .estudio-kanban-tipo .ix-ico, html[data-ui="ix"] .cal-evento-tipo .ix-ico { width: 13px; height: 13px; flex: none; vertical-align: 0; } html[data-ui="ix"] .estudio-kanban-tipo { font-size: 11.5px; } /* Botões de ação dos cards de Publicações: alinhados, sem quebrar mal no celular */ html[data-ui="ix"] .btn-secondary-action, html[data-ui="ix"] .btn-command { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } html[data-ui="ix"] .btn-secondary-action .ix-ico, html[data-ui="ix"] .btn-command .ix-ico { width: 15px; height: 15px; flex: none; vertical-align: 0; } @media (max-width: 640px) { html[data-ui="ix"] .pub-card-body form, html[data-ui="ix"] .pub-card-body .btn-secondary-action { max-width: 100%; } html[data-ui="ix"] .car-linha > label.car-tom { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; } html[data-ui="ix"] .car-passo { padding: 14px; } html[data-ui="ix"] .car-passo select, html[data-ui="ix"] .car-passo input[type="url"], html[data-ui="ix"] .car-passo input[type="text"] { width: 100%; box-sizing: border-box; } } /* Passo "Música" do Reel: lista de trilhas (agora 19) fica legível e o seletor não vaza */ html[data-ui="ix"] #reel-musica-preset-sel select, html[data-ui="ix"] #reel-musica-upload-sel input { width: 100%; max-width: 520px; box-sizing: border-box; } html[data-ui="ix"] .car-aviso { line-height: 1.45; }