/* ===================================================================== Sistema do Escritório — folha de estilo única Direção (set/2026): painel escuro em azul-marinho com barra lateral, cartões-vitrine coloridos por estado, tipografia Geist, densidade de painel. Três camadas de tokens: primitivos → semânticos → componentes. Todos os nomes de classe anteriores foram preservados. ===================================================================== */ /* ----------------------------------------------------------- primitivos */ :root { --azul-900: #172554; --azul-800: #1e3a8a; --azul-700: #1d4ed8; --azul-600: #2563eb; --azul-500: #3b82f6; --azul-400: #60a5fa; --azul-300: #93c5fd; --azul-100: #dbeafe; --azul-50: #eff6ff; --indigo-600: #4f46e5; --indigo-500: #6366f1; --ardosia-900: #0f172a; --ardosia-700: #334155; --ardosia-600: #475569; --ardosia-500: #64748b; --ardosia-400: #94a3b8; --ardosia-300: #cbd5e1; --ardosia-200: #e2e8f0; --ardosia-100: #f1f5f9; --ardosia-50: #f8fafc; --ambar-700: #b45309; --ambar-600: #d97706; --ambar-500: #f59e0b; --ambar-100: #fef3c7; --ambar-200: #fde68a; --laranja-500: #f97316; --laranja-600: #ea580c; --vermelho-700: #b91c1c; --vermelho-600: #dc2626; --vermelho-500: #ef4444; --vermelho-100: #fee2e2; --vermelho-200: #fecaca; --verde-700: #15803d; --verde-600: #16a34a; --verde-500: #22c55e; --verde-100: #dcfce7; --verde-200: #bbf7d0; --esmeralda-500: #10b981; --esmeralda-600: #059669; --roxo-700: #6d28d9; --roxo-500: #8b5cf6; --roxo-100: #ede9fe; --rosa-500: #ec4899; --ciano-500: #06b6d4; --fonte: "Geist", "Geist Variable", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fonte-titulo: var(--fonte); --fonte-mono: "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace; /* escala tipográfica: 12 13 14 16 18 22 28 */ --t-xs: 12px; --t-sm: 13px; --t-base: 14px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-2xl: 28px; /* escala de espaço (densa): 4 8 12 16 20 24 32 */ --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --raio: 12px; --raio-sm: 8px; --raio-lg: 16px; --raio-pill: 999px; --dur: 160ms; --ease: cubic-bezier(.2,.7,.3,1); /* barra lateral: escura nos dois temas, como no painel de referência */ --lat-bg: #0B1A33; --lat-tinta: rgba(255,255,255,.62); --lat-ativo: #ffffff; --lat-ativo-bg: rgba(255,255,255,.1); --lat-hover-bg: rgba(255,255,255,.06); --lat-linha: rgba(255,255,255,.07); --lat-grupo: rgba(255,255,255,.38); --lat-realce: var(--azul-400); } /* ------------------------------------------------------- semânticos: claro */ :root { --fundo: #f3f5fa; --papel: #ffffff; --papel-2: #f1f4f9; /* superfície secundária */ --hover: #eef3ff; --tinta: var(--ardosia-900); --tinta-media: var(--ardosia-700); --tinta-fraca: #596577; /* AA sobre papel-2 (5,3:1); ardosia-500 dava 4,3 */ --titulo: var(--ardosia-900); --linha: #e4e8f1; --linha-forte: var(--ardosia-300); --marca: var(--azul-600); /* botão primário, aba ativa */ --marca-hover: var(--azul-700); --marca-clara: var(--azul-700); /* links, hover do primário */ --marca-suave: var(--azul-100); --foco: var(--azul-500); --sombra: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04); --sombra-alta: 0 10px 24px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06); --barra-bg: rgba(255,255,255,.82); --urgente: var(--vermelho-600); --urgente-bg: var(--vermelho-100); --linha-urgente: var(--vermelho-200); --alta: var(--ambar-600); --alta-bg: var(--ambar-100); --linha-alta: var(--ambar-200); --media: var(--azul-600); --media-bg: var(--azul-100); --linha-media: var(--azul-300); --baixa: #596577; --baixa-bg: var(--ardosia-100); --linha-baixa: var(--ardosia-300); --ok: var(--verde-600); --ok-bg: var(--verde-100); --linha-ok: var(--verde-200); --audiencia: var(--roxo-700); --audiencia-bg: var(--roxo-100); --neutro-bg: var(--ardosia-100); --venceu-bg: #fff7f7; --hoje-bg: #fff3f2; --fds-bg: var(--ardosia-50); --topo-bg: var(--lat-bg); --topo-tinta: var(--lat-tinta); --topo-ativo: #ffffff; --topo-realce: var(--azul-400); color-scheme: light; } /* ------------------------------------------------------ semânticos: escuro */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fundo: #0b0f1a; --papel: #121827; --papel-2: #182033; --hover: #1b2540; --tinta: #eef2f8; --tinta-media: #c8d1de; --tinta-fraca: #94a3b8; --titulo: #f8fafc; --linha: rgba(255,255,255,.08); --linha-forte: rgba(255,255,255,.16); --marca: var(--azul-600); --marca-hover: var(--azul-700); --marca-clara: var(--azul-400); --marca-suave: rgba(59,130,246,.18); --foco: var(--azul-400); --sombra: 0 1px 2px rgba(0,10,30,.35); --sombra-alta: 0 12px 30px rgba(0,10,30,.55); --barra-bg: rgba(11,15,26,.8); --urgente: #f87171; --urgente-bg: rgba(248,113,113,.14); --linha-urgente: rgba(248,113,113,.35); --alta: #fbbf24; --alta-bg: rgba(251,191,36,.14); --linha-alta: rgba(251,191,36,.35); --media: #93c5fd; --media-bg: rgba(96,165,250,.16); --linha-media: rgba(96,165,250,.38); --baixa: #a3afc2; --baixa-bg: rgba(148,163,184,.14); --linha-baixa: rgba(148,163,184,.3); --ok: #4ade80; --ok-bg: rgba(74,222,128,.13); --linha-ok: rgba(74,222,128,.32); --audiencia: #c4b5fd; --audiencia-bg: rgba(167,139,250,.16); --neutro-bg: #1b2538; --venceu-bg: rgba(248,113,113,.06); --hoje-bg: rgba(248,113,113,.1); --fds-bg: #0e1424; --lat-bg: #000F2D; --topo-bg: var(--lat-bg); --topo-tinta: var(--lat-tinta); --topo-ativo: #ffffff; --topo-realce: var(--azul-400); color-scheme: dark; } } :root[data-theme="dark"] { --fundo: #0b0f1a; --papel: #121827; --papel-2: #182033; --hover: #1b2540; --tinta: #eef2f8; --tinta-media: #c8d1de; --tinta-fraca: #94a3b8; --titulo: #f8fafc; --linha: rgba(255,255,255,.08); --linha-forte: rgba(255,255,255,.16); --marca: var(--azul-600); --marca-hover: var(--azul-700); --marca-clara: var(--azul-400); --marca-suave: rgba(59,130,246,.18); --foco: var(--azul-400); --sombra: 0 1px 2px rgba(0,10,30,.35); --sombra-alta: 0 12px 30px rgba(0,10,30,.55); --barra-bg: rgba(11,15,26,.8); --urgente: #f87171; --urgente-bg: rgba(248,113,113,.14); --linha-urgente: rgba(248,113,113,.35); --alta: #fbbf24; --alta-bg: rgba(251,191,36,.14); --linha-alta: rgba(251,191,36,.35); --media: #93c5fd; --media-bg: rgba(96,165,250,.16); --linha-media: rgba(96,165,250,.38); --baixa: #a3afc2; --baixa-bg: rgba(148,163,184,.14); --linha-baixa: rgba(148,163,184,.3); --ok: #4ade80; --ok-bg: rgba(74,222,128,.13); --linha-ok: rgba(74,222,128,.32); --audiencia: #c4b5fd; --audiencia-bg: rgba(167,139,250,.16); --neutro-bg: #1b2538; --venceu-bg: rgba(248,113,113,.06); --hoje-bg: rgba(248,113,113,.1); --fds-bg: #0e1424; --lat-bg: #000F2D; --topo-bg: var(--lat-bg); --topo-tinta: var(--lat-tinta); --topo-ativo: #ffffff; --topo-realce: var(--azul-400); color-scheme: dark; } /* ----------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: var(--t-base)/1.5 var(--fonte); color: var(--tinta); background: var(--fundo); -webkit-font-smoothing: antialiased; } a { color: var(--marca-clara); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 3px; } ::selection { background: var(--marca-suave); } img, svg { max-width: 100%; } svg.ico { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .pular { position: absolute; left: -999px; top: 8px; background: var(--papel); color: var(--tinta); padding: 8px 12px; border-radius: var(--raio-sm); z-index: 100; box-shadow: var(--sombra-alta); } .pular:focus { left: 8px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------- moldura: lateral + corpo */ .app { display: flex; min-height: 100vh; } .lateral { width: 256px; flex: 0 0 256px; background: var(--lat-bg); color: var(--lat-tinta); border-right: 1px solid var(--lat-linha); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; height: 100vh; overflow-y: auto; z-index: 30; scrollbar-width: thin; } .lat-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 14px; border-bottom: 1px solid var(--lat-linha); color: inherit; } .lat-marca:hover { text-decoration: none; } .logo { width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; background: linear-gradient(135deg, var(--azul-500), var(--indigo-600)); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(59,130,246,.35); } .lat-marca b { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; letter-spacing: -.1px; } .lat-marca small { display: block; font-size: 10px; color: #A7B1C2; letter-spacing: .26em; text-transform: uppercase; } .lat-assinatura { display: block; width: auto; max-width: 206px; max-height: 72px; height: auto; object-fit: contain; } /* logo enviada pelo escritório, escura sobre fundo transparente: ganha uma placa clara para aparecer no fundo marinho */ .logo-plaquinha { background: #F8FAFC; padding: 8px 10px; border-radius: 10px; } .lat-marca-texto { display: flex; align-items: center; gap: 11px; } .lat-marca-texto b { color: #fff; font-size: 14px; font-weight: 700; line-height: 1.25; } .lateral nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 12px; } .lat-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px; font-weight: 700; color: var(--lat-grupo); padding: 14px 12px 5px; } .lateral nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: var(--lat-tinta); font-size: 14px; font-weight: 500; line-height: 1.2; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .lateral nav a svg.ico { width: 18px; height: 18px; opacity: .8; } .lateral nav a:hover { background: var(--lat-hover-bg); color: var(--lat-ativo); text-decoration: none; } .lateral nav a.ativo { background: var(--lat-ativo-bg); color: var(--lat-ativo); font-weight: 600; } .lateral nav a.ativo svg.ico { opacity: 1; color: var(--lat-realce); } .lateral nav a.ativo::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lat-realce); } .lateral nav a .n { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--raio-pill); background: rgba(255,255,255,.1); color: #fff; } .lat-usuario { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--lat-linha); color: inherit; } .lat-usuario:hover { text-decoration: none; background: var(--lat-hover-bg); } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--indigo-500), var(--azul-500)); color: #fff; font-weight: 700; font-size: 12px; } .lat-usuario b { display: block; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lat-usuario small { display: block; font-size: 10.5px; line-height: 1.35; color: var(--lat-grupo); white-space: normal; } .lat-usuario > div { min-width: 0; } .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: 256px; min-height: 100vh; } .cabeca { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 24px; background: var(--barra-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); } .hamb { display: none; width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--raio-sm); background: transparent; border: 1px solid var(--linha); color: var(--tinta-media); } .hamb:hover { background: var(--papel-2); border-color: var(--linha-forte); color: var(--tinta); } .busca-global { display: flex; align-items: center; gap: 8px; height: 36px; width: min(400px, 100%); background: var(--papel-2); border: 1px solid var(--linha); border-radius: 10px; padding: 0 10px; color: var(--tinta-fraca); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .busca-global:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 22%, transparent); } .busca-global input[type=text] { flex: 1; min-width: 0; min-height: 0; border: 0; background: transparent; padding: 0; box-shadow: none; color: var(--tinta); font-size: var(--t-sm); } .busca-global input[type=text]:focus { box-shadow: none; } .busca-global kbd { font: 11px/1 var(--fonte-mono); color: var(--tinta-fraca); border: 1px solid var(--linha-forte); border-radius: 5px; padding: 3px 6px; background: var(--papel); white-space: nowrap; } .cabeca-data { margin-left: auto; color: var(--tinta-fraca); font-size: var(--t-sm); white-space: nowrap; } .cabeca-data::first-letter { text-transform: uppercase; } .cabeca .botao { border-radius: 9px; } .cabeca .tema { background: transparent; border: 1px solid var(--linha); color: var(--tinta-media); width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: var(--raio-sm); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .cabeca .tema:hover { background: var(--papel-2); border-color: var(--linha-forte); color: var(--tinta); } .cabeca .tema .lua { display: none; } :root[data-theme="dark"] .cabeca .tema .sol { display: none; } :root[data-theme="dark"] .cabeca .tema .lua { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cabeca .tema .sol { display: none; } :root:not([data-theme="light"]) .cabeca .tema .lua { display: block; } } .veu { display: none; position: fixed; inset: 0; background: rgba(2,6,23,.55); z-index: 25; } main { flex: 1; padding: var(--e-6) 28px; max-width: 1440px; width: 100%; margin: 0 auto; } .rodape b { color: var(--tinta-media); font-weight: 600; } .rodape { max-width: 1440px; width: 100%; margin: 0 auto; padding: var(--e-3) 28px var(--e-5); line-height: 1.6; border-top: 1px solid var(--linha); color: var(--tinta-fraca); font-size: var(--t-xs); display: flex; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; } /* ---------------------------------------------------------------- texto */ h1 { font-family: var(--fonte-titulo); font-size: 24px; margin: 0 0 var(--e-1); font-weight: 800; color: var(--titulo); letter-spacing: -.4px; line-height: 1.2; } h2 { font-family: var(--fonte-titulo); font-size: var(--t-md); margin: 0 0 var(--e-3); font-weight: 700; color: var(--titulo); line-height: 1.3; letter-spacing: -.1px; } .sub { color: var(--tinta-fraca); font-size: var(--t-sm); margin: 0 0 var(--e-5); } .anota { color: var(--tinta-fraca); font-size: var(--t-xs); } .mono { font-family: var(--fonte-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; } /* ------------------------------------------------------ cabeçalho de página */ .pagina-topo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: var(--e-5); --pt-cor: var(--azul-500); } .pagina-topo .pt-ico { width: 52px; height: 52px; border-radius: 14px; flex: 0 0 auto; color: #fff; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pt-cor), color-mix(in srgb, var(--pt-cor) 68%, #000)); box-shadow: 0 8px 22px color-mix(in srgb, var(--pt-cor) 35%, transparent); } .pagina-topo .pt-ico svg.ico { width: 24px; height: 24px; } .pagina-topo .pt-texto { flex: 1 1 260px; min-width: 0; } .pagina-topo .pt-texto h1 { margin: 2px 0 2px; } .pagina-topo .pt-texto .sub { margin: 0; } .pagina-topo .pt-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; padding-top: 6px; } .cor-azul { --pt-cor: var(--azul-500); } .cor-indigo { --pt-cor: var(--indigo-500); } .cor-laranja { --pt-cor: var(--laranja-500); } .cor-ambar { --pt-cor: var(--ambar-500); } .cor-verde { --pt-cor: var(--esmeralda-500); } .cor-roxo { --pt-cor: var(--roxo-500); } .cor-rosa { --pt-cor: var(--rosa-500); } .cor-vermelho { --pt-cor: var(--vermelho-500); } .cor-ciano { --pt-cor: var(--ciano-500); } .cor-ardosia { --pt-cor: var(--ardosia-500); } /* ------------------------------------------------- painel: saudação e atalhos */ .hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); flex-wrap: wrap; margin-bottom: var(--e-6); } .hero .data { color: var(--tinta-fraca); font-size: var(--t-sm); margin: 0 0 4px; } .hero .data::first-letter { text-transform: uppercase; } .hero h1 { font-size: 30px; margin: 0; letter-spacing: -.6px; } .hero h1 em { font-style: normal; color: var(--marca-clara); } .hero .sub { margin: 6px 0 0; } .acoes-rapidas { display: flex; gap: 8px; flex-wrap: wrap; } .acao-rapida { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 11px; color: #fff; font-weight: 600; font-size: var(--t-sm); white-space: nowrap; background: linear-gradient(90deg, var(--ar-a), var(--ar-b)); box-shadow: 0 4px 12px rgba(0,10,30,.25); transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease); --ar-a: var(--azul-500); --ar-b: var(--indigo-600); } .acao-rapida:hover { text-decoration: none; transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 8px 18px rgba(0,10,30,.3); color: #fff; } .acao-rapida svg.ico { width: 15px; height: 15px; } .acao-rapida .q { width: 24px; height: 24px; border-radius: 7px; background: rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; } .acao-rapida.ar-cinza { --ar-a: #475569; --ar-b: #334155; } .acao-rapida.ar-laranja { --ar-a: var(--ambar-500); --ar-b: var(--laranja-600); } .acao-rapida.ar-rosa { --ar-a: var(--rosa-500); --ar-b: #9333ea; } .acao-rapida.ar-verde { --ar-a: var(--esmeralda-500); --ar-b: var(--esmeralda-600); } .acao-rapida.ar-vermelho{ --ar-a: var(--vermelho-500); --ar-b: #be123c; } /* -------------------------------------------------------------- cartões */ .cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--e-4) var(--e-5); margin-bottom: var(--e-4); box-shadow: var(--sombra); } .cartao > h2 { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; } .cartao > h2 .conta { background: var(--papel-2); color: var(--tinta-fraca); border-radius: var(--raio-pill); padding: 2px 9px; font-size: var(--t-xs); font-weight: 600; font-family: var(--fonte); } .h2-ico { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto; color: #fff; --pt-cor: var(--azul-500); display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pt-cor), color-mix(in srgb, var(--pt-cor) 68%, #000)); box-shadow: 0 4px 12px color-mix(in srgb, var(--pt-cor) 30%, transparent); } .h2-ico svg.ico { width: 17px; height: 17px; } .grade { display: grid; gap: var(--e-4); } /* anti-estouro */ .grade > * { min-width: 0; } /* tabela larga rola dentro do cartão, não empurra a página */ .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } /* empilha sozinho em cartão estreito */ @media (max-width: 1100px) { .g4, .g3, .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .g4, .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2 { grid-template-columns: 1fr; } } /* cartão-vitrine: fundo tingido pela cor do estado, número grande, ícone no canto */ .kpi { --kpi-cor: var(--media); position: relative; overflow: hidden; display: block; min-width: 0; color: inherit; background: linear-gradient(135deg, color-mix(in srgb, var(--kpi-cor) 17%, var(--papel)), color-mix(in srgb, var(--kpi-cor) 4%, var(--papel))); border: 1px solid color-mix(in srgb, var(--kpi-cor) 26%, var(--linha)); border-radius: 14px; padding: 16px 18px; box-shadow: var(--sombra); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.kpi:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: color-mix(in srgb, var(--kpi-cor) 45%, var(--linha)); } .kpi .rot { font-size: 11px; color: var(--kpi-cor); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; padding-right: 56px; opacity: .9; } .kpi .num { font-family: var(--fonte-titulo); font-size: var(--t-2xl); font-weight: 800; line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums; color: var(--kpi-cor); overflow-wrap: anywhere; letter-spacing: -.5px; } .kpi .pe { font-size: var(--t-xs); color: var(--tinta-fraca); margin-top: 3px; } .kpi.perigo { --kpi-cor: var(--urgente); } .kpi.aviso { --kpi-cor: var(--alta); } .kpi.bom { --kpi-cor: var(--ok); } .kpi.roxo { --kpi-cor: var(--audiencia); } .kpi.neutro { --kpi-cor: var(--baixa); } .kpi a { color: inherit; } .kpi .kpi-ico { position: absolute; right: 14px; top: 14px; width: 46px; height: 46px; border-radius: 13px; color: #fff; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--kpi-cor), color-mix(in srgb, var(--kpi-cor) 70%, #000)); box-shadow: 0 8px 18px color-mix(in srgb, var(--kpi-cor) 35%, transparent); } .kpi .kpi-ico svg.ico { width: 22px; height: 22px; } .kpi .kpi-marca { position: absolute; right: -8px; bottom: -14px; width: 92px; height: 92px; color: var(--kpi-cor); opacity: .07; pointer-events: none; } .kpi .kpi-marca svg.ico { width: 92px; height: 92px; stroke-width: 1.4; } .kpi.compacto { padding: 12px 14px; } .kpi.compacto .num { font-size: var(--t-xl); } /* estado vazio ilustrado (fundo pontilhado, ícone e chamada) */ .vazio-ilustrado { text-align: center; padding: 34px 16px; color: var(--tinta-fraca); font-size: var(--t-sm); background-image: radial-gradient(var(--linha-forte) .7px, transparent .8px); background-size: 16px 16px; border-radius: var(--raio); } .vazio-ilustrado .vi-ico { width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 12px; color: #fff; --pt-cor: var(--azul-500); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pt-cor), color-mix(in srgb, var(--pt-cor) 68%, #000)); box-shadow: 0 8px 22px color-mix(in srgb, var(--pt-cor) 35%, transparent); } .vazio-ilustrado .vi-ico svg.ico { width: 26px; height: 26px; } .vazio-ilustrado b { display: block; color: var(--tinta); font-size: var(--t-base); margin-bottom: 4px; } .vazio-ilustrado .botao { margin-top: 12px; } /* -------------------------------------------------------------- tabelas */ .rolagem { overflow-x: auto; border-radius: var(--raio-sm); } table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-fraca); font-weight: 600; border-bottom: 2px solid var(--linha-forte); padding: var(--e-2) 10px; white-space: nowrap; background: var(--papel); /* a caixa .rolagem tem overflow-x, o que torna o eixo Y rolável também: o sticky se ancora nela, não na janela. Por isso top: 0, nunca 51px. */ position: sticky; top: 0; z-index: 3; } td { border-bottom: 1px solid var(--linha); padding: var(--e-2) 10px; vertical-align: top; } tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--papel-2) 45%, transparent); } tbody tr:hover td { background: var(--hover); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } td.nowrap, .nowrap { white-space: nowrap; } .hn-contrato { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; min-width: 0; } [data-componente] [data-so] { display: none; } [data-componente][data-tipo="FIXO"] [data-so~="FIXO"], [data-componente][data-tipo="ENTRADA"] [data-so~="ENTRADA"], [data-componente][data-tipo="PARCELADO"] [data-so~="PARCELADO"], [data-componente][data-tipo="ETAPA"] [data-so~="ETAPA"], [data-componente][data-tipo="MENSALIDADE"] [data-so~="MENSALIDADE"], [data-componente][data-tipo="EXITO"] [data-so~="EXITO"] { display: block; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } td.proc { max-width: 250px; } td.proc .anota { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .corta { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vazio { padding: var(--e-8) var(--e-4); text-align: center; color: var(--tinta-fraca); font-size: var(--t-sm); background-image: radial-gradient(var(--linha-forte) .7px, transparent .8px); background-size: 16px 16px; } tr.linha-venceu td { background: var(--venceu-bg); } tr.linha-hoje td { background: var(--hoje-bg); } tr.linha-venceu:hover td, tr.linha-hoje:hover td { background: var(--hover); } /* ---------------------------------------------------------------- selos */ .selo { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--raio-pill); font-size: var(--t-xs); font-weight: 600; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; font-family: var(--fonte); } .selo.URGENTE { background: var(--urgente-bg); color: var(--urgente); border-color: var(--linha-urgente); } .selo.ALTA { background: var(--alta-bg); color: var(--alta); border-color: var(--linha-alta); } .selo.MEDIA { background: var(--media-bg); color: var(--media); border-color: var(--linha-media); } .selo.BAIXA { background: var(--baixa-bg); color: var(--baixa); border-color: var(--linha-baixa); } .selo.ok { background: var(--ok-bg); color: var(--ok); border-color: var(--linha-ok); } .selo.neutro { background: var(--neutro-bg); color: var(--tinta-fraca); border-color: var(--linha); } button.selo { cursor: pointer; min-height: 0; } .dias { font-weight: 600; font-size: var(--t-xs); white-space: nowrap; font-variant-numeric: tabular-nums; } .dias.venceu, .dias.hoje { color: var(--urgente); } .dias.perto { color: var(--alta); } .dias.longe { color: var(--tinta-fraca); font-weight: 400; } /* --------------------------------------------------------------- filtros */ .filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: var(--e-4); } .filtros .aba, .aba { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--linha); background: var(--papel); border-radius: 9px; font-size: var(--t-sm); color: var(--tinta-media); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .filtros .aba:hover, .aba:hover { text-decoration: none; border-color: var(--linha-forte); background: var(--papel-2); color: var(--tinta); } .filtros .aba.ativo, .aba.ativo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; } .filtros .aba .n { opacity: .75; margin-left: 4px; } .filtros-form { display: flex; gap: 6px; flex-wrap: wrap; } .paginacao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; padding-top: var(--e-4); } .paginacao-resumo { color: var(--tinta-fraca); font-size: var(--t-sm); } .paginacao-acoes { display: flex; gap: 6px; flex-wrap: wrap; } .paginacao .botao { display: inline-flex; } /* ------------------------------------------------------------ formulários */ input[type=text], input[type=date], input[type=number], input[type=month], input[type=password], input[type=email], input[type=url], input[type=file], select, textarea { min-height: 34px; padding: 6px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); font: inherit; font-size: var(--t-sm); background: var(--papel); color: var(--tinta); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 25%, transparent); } input::placeholder, textarea::placeholder { color: var(--ardosia-400); } .busca { min-width: 260px; } label.campo { display: block; font-size: var(--t-xs); color: var(--tinta-fraca); margin-bottom: 4px; font-weight: 600; } .linha-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .linha-form > div { flex: 1 1 150px; min-width: 0; } .linha-form input, .linha-form select { width: 100%; } .linha-form input[type="checkbox"] { width: auto; } /* caixa do botão da linha: nunca encolhe abaixo do próprio botão (antes, flex:0 + min-width:0 o jogava para fora do cartão) */ .linha-form > .lf-botao, .linha-form > div:has(> button:only-child) { flex: 0 0 auto; min-width: auto; } .linha-form > .lf-botao { flex-wrap: wrap; max-width: 100%; } .linha-form > .lf-botao button { white-space: nowrap; } input[type="checkbox"], input[type="radio"] { accent-color: var(--marca-clara); width: 16px; height: 16px; } /* ----------------------------------------------------------------- botões */ button, .botao { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--marca); background: var(--marca); color: #fff; border-radius: 9px; font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); white-space: nowrap; } button:hover, .botao:hover { background: var(--marca-hover); border-color: var(--marca-hover); text-decoration: none; } button:active, .botao:active { transform: translateY(1px); } button:disabled { opacity: .5; cursor: not-allowed; transform: none; } button.leve, .botao.leve { background: var(--papel); color: var(--tinta-media); border-color: var(--linha-forte); font-weight: 500; } button.leve:hover, .botao.leve:hover { background: var(--papel-2); color: var(--tinta); border-color: var(--linha-forte); } button.mini, .botao.mini { min-height: 26px; padding: 0 9px; font-size: var(--t-xs); } .botao.whatsapp { background: #128c4a; border-color: #128c4a; color: #fff; } .botao.whatsapp:hover { background: #0f7a40; border-color: #0f7a40; } .opcao-checkbox { min-height: 34px; display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); } .opcao-checkbox input[type="checkbox"] { width: auto !important; flex: 0 0 auto; } .opcao-checkbox input[type="radio"] { width: auto !important; flex: 0 0 auto; min-height: 0; } details.caixa { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); padding: 10px 14px; margin-bottom: var(--e-4); box-shadow: var(--sombra); } details.caixa summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); color: var(--marca-clara); list-style: none; display: flex; align-items: center; gap: 8px; min-height: 26px; } details.caixa summary::-webkit-details-marker { display: none; } details.caixa summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur) var(--ease); flex: 0 0 auto; } details.caixa[open] summary::before { transform: rotate(45deg); } details.caixa[open] summary { margin-bottom: var(--e-3); } details summary { cursor: pointer; } /* --------------------------------------------------------------- avisos */ .aviso-caixa { background: var(--alta-bg); border: 1px solid var(--linha-alta); border-left-width: 4px; border-radius: var(--raio); padding: 10px 14px; font-size: var(--t-sm); margin-bottom: var(--e-4); color: var(--tinta); } .aviso-caixa[data-fechavel] { position: relative; padding-right: 38px; } .aviso-fechar { position: absolute; right: 8px; top: 6px; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 6px; background: transparent; border: 1px solid transparent; color: var(--tinta-fraca); font-size: 18px; line-height: 1; } .aviso-fechar:hover { background: rgba(0,0,0,.08); border-color: var(--linha-forte); color: var(--tinta); } .aviso-caixa.ok, .aviso-caixa.sucesso { background: var(--ok-bg); border-color: var(--linha-ok); } .aviso-caixa.erro { background: var(--urgente-bg); border-color: var(--linha-urgente); } .confirmacao-prazo { align-items: flex-start; padding: 9px 11px; background: var(--ok-bg); border: 1px solid var(--linha-ok); border-radius: var(--raio-sm); } /* --------------------------------------------------------- blocos diversos */ .acoes-prazos { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); } .auditoria-prazos { margin-bottom: var(--e-4); } .auditoria-prazos .kpi .num { font-size: var(--t-xl); } .ficha-copiavel dd { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .ficha-copiavel dd span { overflow-wrap: anywhere; } .barra-mes { display: flex; align-items: center; gap: 8px; } .barra { height: 8px; border-radius: var(--raio-pill); background: var(--ok); display: inline-block; min-width: 2px; } .barra.desp { background: var(--urgente); } dl.ficha { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; font-size: var(--t-sm); } dl.ficha-4 { grid-template-columns: 150px 1fr 150px 1fr; } .grade.g2 > .cartao dl.ficha-4 { grid-template-columns: 140px minmax(0, 1fr); } /* cartão de meia largura: duas colunas */ dl.ficha dt { color: var(--tinta-fraca); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .4px; padding-top: 2px; } dl.ficha dd { margin: 0; overflow-wrap: anywhere; min-width: 0; } dl.ficha dd .selo { white-space: normal; max-width: 100%; } .funil { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); } .funil a { flex: 1 1 150px; background: var(--papel); border: 1px solid var(--linha); border-top: 3px solid var(--media); border-radius: var(--raio); padding: 10px 12px; color: inherit; box-shadow: var(--sombra); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .funil a:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-alta); } .funil a.ativo { border-color: var(--marca); border-top-color: var(--marca); background: var(--marca-suave); } .funil .n { font-family: var(--fonte-titulo); font-size: var(--t-xl); font-weight: 650; font-variant-numeric: tabular-nums; } .funil .r { font-size: var(--t-xs); color: var(--tinta-fraca); line-height: 1.3; } .tempo { border-left: 2px solid var(--linha-forte); margin-left: 6px; padding-left: 14px; } .tempo .item { position: relative; padding: 7px 0; border-bottom: 1px solid var(--linha); } .tempo .item:last-child { border-bottom: 0; } .tempo .item::before { content: ""; position: absolute; left: -20px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); border: 2px solid var(--papel); } .tempo .item:first-child::before { background: var(--marca-clara); } .tempo .qd { font-size: var(--t-xs); color: var(--tinta-fraca); font-weight: 600; } .tempo .tx { font-size: var(--t-sm); } .djen-parametro { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--papel-2); } .djen-parametro-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .djen-parametro-titulo { font-size: var(--t-xs); color: var(--tinta-fraca); } .djen-ajuda { display: inline-block; margin: 0 0 0 8px; } .djen-opcoes { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linha); } .grade-tribunais { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 7px; margin-top: 6px; } .opcao-tribunal { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--papel-2); cursor: pointer; font-size: var(--t-sm); } .opcao-tribunal:hover { border-color: var(--linha-forte); } .opcao-tribunal input { flex: 0 0 auto; } .opcao-tribunal span { display: flex; flex-direction: column; gap: 1px; } .opcao-tribunal small { color: var(--tinta-fraca); font-size: var(--t-xs); } .resumo-cobertura { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 15px; padding: 9px 11px; border-radius: var(--raio-sm); background: var(--papel-2); color: var(--tinta-fraca); font-size: var(--t-xs); } .resumo-cobertura strong { color: var(--tinta); } .trecho-publicacao { color: var(--tinta-fraca); font-size: var(--t-xs); line-height: 1.4; margin-top: 3px; max-width: 520px; } .texto-publicacao { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: var(--t-sm); } /* --------------------------------------- texto completo (balão e expansão) */ #popover-texto { position: fixed; z-index: 60; max-width: 560px; background: var(--papel); color: var(--tinta); border: 1px solid var(--linha-forte); box-shadow: var(--sombra-alta); border-radius: var(--raio); padding: 10px 12px; font-size: var(--t-sm); line-height: 1.45; white-space: pre-wrap; pointer-events: none; } td.corta, td.proc { cursor: zoom-in; } td.corta.aberto, td.proc.aberto { cursor: zoom-out; white-space: normal; max-width: none; overflow: visible; text-overflow: clip; } td.proc.aberto .anota { white-space: normal; overflow: visible; } /* ---------------------------------------------------------------- agenda */ .legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--tinta-fraca); margin: 0 0 var(--e-3); } .legenda .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border-left: 3px solid; } .agenda-cabecalho { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-fraca); font-weight: 600; padding: 0 4px 4px; } .agenda-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; } .agenda-dia { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-sm); min-height: 104px; padding: 5px 6px; font-size: var(--t-xs); min-width: 0; } .agenda-grade.semana .agenda-dia { min-height: 260px; } .agenda-dia.fora { opacity: .45; } .agenda-dia.fds { background: var(--fds-bg); } .agenda-dia.hoje { border-color: var(--marca-clara); box-shadow: inset 0 0 0 1px var(--marca-clara); } .agenda-dia .n { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-fraca); margin-bottom: 3px; } .agenda-dia .n a { color: var(--tinta); } .agenda-dia .mais { display: block; font-size: var(--t-xs); margin-top: 3px; } .agenda-item { display: block; margin-top: 3px; padding: 3px 7px; border-radius: 4px; font-size: var(--t-xs); line-height: 1.35; color: var(--tinta); border-left: 3px solid var(--baixa); background: var(--baixa-bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: filter var(--dur) var(--ease); } .agenda-item:hover { text-decoration: none; filter: brightness(.96); } .agenda-grade.semana .agenda-item, .agenda-lista .agenda-item { white-space: normal; } .agenda-grade.semana .agenda-item .anota:not(.mono) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .agenda-item .hora { font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; } .agenda-item .anota { display: block; } .agenda-item.prazo.URGENTE, .lg.prazo.URGENTE { background: var(--urgente-bg); border-color: var(--urgente); } .agenda-item.prazo.ALTA, .lg.prazo.ALTA { background: var(--alta-bg); border-color: var(--alta); } .agenda-item.prazo.MEDIA, .lg.prazo.MEDIA { background: var(--media-bg); border-color: var(--media); } .agenda-item.prazo.BAIXA, .lg.prazo.BAIXA { background: var(--baixa-bg); border-color: var(--baixa); } .agenda-item.evento, .lg.evento { background: var(--ok-bg); border-color: var(--ok); } .agenda-item.audiencia, .lg.audiencia { background: var(--audiencia-bg); border-color: var(--audiencia); } .agenda-item.concluido { opacity: .55; text-decoration: line-through; } .agenda-lista .agenda-item { padding: 8px 12px; margin-top: 6px; font-size: var(--t-sm); } /* ---------------------------------------------------- agenda: caderno / planner */ :root { --papel-caderno: #fffdf8; --pauta: #e4dfd3; --pauta-forte: #c9c2b2; --tinta-caderno: #2b2a27; --rotulo-caderno: #6d6a62; --marcador: #f2b91d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papel-caderno: #171b26; --pauta: #2b3242; --pauta-forte: #3c455a; --tinta-caderno: #e6e6e1; --rotulo-caderno: #9aa0ad; --marcador: #f2b91d; } } :root[data-theme="dark"] { --papel-caderno: #171b26; --pauta: #2b3242; --pauta-forte: #3c455a; --tinta-caderno: #e6e6e1; --rotulo-caderno: #9aa0ad; --marcador: #f2b91d; } .caderno { background: var(--papel-caderno); border: 1px solid var(--pauta); border-radius: 14px; padding: var(--e-4); box-shadow: var(--sombra), inset 0 0 0 1px rgba(255,255,255,.4); } .caderno .agenda-dia { background: transparent; border-color: var(--pauta); } .caderno .agenda-dia.fds { background: color-mix(in srgb, var(--pauta) 25%, transparent); } .caderno .agenda-cabecalho, .caderno .agenda-dia .n { color: var(--rotulo-caderno); letter-spacing: .8px; } .planner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--papel-caderno); color: var(--tinta-caderno); border: 1px solid var(--pauta); border-radius: 14px; box-shadow: var(--sombra-alta); overflow: hidden; position: relative; } .planner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to right, rgba(0,0,0,.10), transparent); } .planner .pagina { padding: var(--e-6) var(--e-6) var(--e-5); display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; } .planner .pagina.esquerda { border-right: 1px solid var(--pauta); } .oculto { display: none; } .pl-rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 600; color: var(--rotulo-caderno); margin-bottom: 6px; } .pl-rotulo.pl-duas { display: flex; justify-content: space-between; align-items: center; } .pl-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); } .pl-linha.topo { grid-template-columns: 1fr auto; align-items: start; } .pl-linha.inferior { grid-template-columns: minmax(0, 1fr) 96px; } .pl-bloco.cresce { flex: 1; display: flex; flex-direction: column; } .pl-bloco.cresce textarea { flex: 1; } .pl-data { font-family: var(--fonte-mono); font-size: var(--t-md); font-weight: 600; letter-spacing: .5px; } .pl-semana { display: flex; gap: 3px; } .pl-semana span { width: 20px; height: 20px; border: 1px solid var(--pauta-forte); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; color: var(--rotulo-caderno); } .pl-semana span.on { background: var(--tinta-caderno); color: var(--papel-caderno); border-color: var(--tinta-caderno); } .pl-campo { width: 100%; background: transparent; border: 1px solid var(--pauta); border-radius: 4px; color: var(--tinta-caderno); font: inherit; font-size: var(--t-sm); padding: 8px 10px; resize: vertical; min-height: 0; box-shadow: none; } .pl-campo.linha { border: 0; border-bottom: 1px solid var(--pauta-forte); border-radius: 0; padding: 4px 2px; } .pl-campo.pautado { background-image: repeating-linear-gradient(to bottom, transparent 0 25px, var(--pauta) 25px 26px); line-height: 26px; padding-top: 0; padding-bottom: 0; } .pl-campo.pontilhado { background-image: radial-gradient(var(--pauta-forte) .8px, transparent .9px); background-size: 14px 14px; } .pl-campo:focus { border-color: var(--pauta-forte); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marcador) 22%, transparent); outline: none; } .pl-prioridades { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pl-prioridades li, .pl-tarefas li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--pauta); border-radius: 4px; padding: 6px 10px; min-height: 36px; } .pl-prioridades .pl-num { font-family: var(--fonte-mono); font-weight: 700; font-size: var(--t-sm); color: var(--tinta-caderno); } .pl-texto { color: var(--tinta-caderno); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); } a.pl-texto:hover { text-decoration: underline; } .pl-tarefas { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; } .pl-tarefas li { grid-template-columns: auto 1fr 64px; border: 0; border-bottom: 1px solid var(--pauta); border-radius: 0; padding: 4px 2px; } .pl-tarefas li.feita .pl-texto { text-decoration: line-through; opacity: .55; } .pl-tarefas li.nova { border-bottom: 0; } .pl-est { font-family: var(--fonte-mono); font-size: var(--t-xs); color: var(--rotulo-caderno); text-align: right; } .pl-nova { display: grid; grid-template-columns: auto 1fr 56px auto; gap: 8px; align-items: center; width: 100%; } .pl-est-campo { text-align: right; } .pl-check { display: inline-flex; margin: 0; } .caixa-check { width: 16px; height: 16px; min-height: 0; padding: 0; border: 1.5px solid var(--pauta-forte); border-radius: 3px; background: transparent; cursor: pointer; display: inline-block; } .caixa-check:hover { border-color: var(--tinta-caderno); background: color-mix(in srgb, var(--marcador) 25%, transparent); } .caixa-check.marcada { background: var(--tinta-caderno); border-color: var(--tinta-caderno); } .caixa-check.marcada::after { content: ""; display: block; width: 4px; height: 8px; margin: 1px auto 0; border: solid var(--papel-caderno); border-width: 0 2px 2px 0; transform: rotate(45deg); } .caixa-check.vazia { cursor: default; } .caixa-check.vazia:hover { border-color: var(--pauta-forte); background: transparent; } .pl-hora { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; min-height: 22px; border-bottom: 1px dotted var(--pauta-forte); padding: 2px 0; } .pl-hora .h { font-family: var(--fonte-mono); font-size: 11px; color: var(--rotulo-caderno); padding-top: 3px; } .pl-hora .slots { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .pl-evento { display: block; font-size: var(--t-xs); padding: 2px 7px; border-radius: 3px; color: var(--tinta-caderno); border-left: 3px solid var(--ok); background: var(--ok-bg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-evento.audiencia { border-color: var(--audiencia); background: var(--audiencia-bg); } .pl-evento b { font-family: var(--fonte-mono); margin-right: 4px; } .pl-bloco.energia { border-left: 1px solid var(--pauta); padding-left: var(--e-3); } .pl-energia { display: flex; flex-direction: column; gap: 6px; align-items: center; padding-top: 4px; } .pl-energia label { cursor: pointer; } .pl-energia input { position: absolute; opacity: 0; width: 0; height: 0; } .pl-energia span { display: block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--pauta-forte); transition: background var(--dur) var(--ease); } .pl-energia input:checked + span { background: var(--marcador); border-color: var(--marcador); } .pl-energia input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; } .pl-combo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; } .pl-combo input { aspect-ratio: 1.15; min-height: 0; background: transparent; border: 1px solid var(--pauta-forte); border-radius: 4px; text-align: center; font-size: var(--t-xs); color: var(--tinta-caderno); padding: 6px; } .pl-combo .mais { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 700; color: var(--rotulo-caderno); background: var(--papel-caderno); padding: 0 3px; font-size: var(--t-sm); } .pl-nota { display: flex; gap: 12px; text-transform: none; letter-spacing: 0; } .pl-nota label { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; font-family: var(--fonte-mono); font-size: 11px; color: var(--rotulo-caderno); } .pl-nota input { position: absolute; opacity: 0; width: 0; height: 0; } .pl-nota span { order: -1; } .pl-nota label::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--pauta-forte); } .pl-nota input:checked ~ * { color: var(--tinta-caderno); } .pl-nota label:has(input:checked)::after { background: var(--marcador); border-color: var(--marcador); } .pl-salvar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--pauta); padding-top: var(--e-2); } @media (max-width: 1000px) { .planner { grid-template-columns: 1fr; } .planner::before { display: none; } .planner .pagina.esquerda { border-right: 0; border-bottom: 1px solid var(--pauta); } } @media (max-width: 700px) { .pl-linha, .pl-linha.inferior { grid-template-columns: 1fr; } .pl-bloco.energia { border-left: 0; padding-left: 0; } .pl-energia { flex-direction: row; } } /* --------------------------------------------------------------- curadoria */ .cur-item { border-left: 4px solid var(--baixa); } .cur-item.nat-PRAZO { border-left-color: var(--urgente); } .cur-item.nat-AUDIENCIA, .cur-item.nat-SEM_INTEGRA { border-left-color: var(--alta); } .cur-item.nat-DECISAO { border-left-color: var(--media); } .cur-item.nat-TERCEIRO { border-left-color: var(--audiencia); } .cur-item.nat-ANDAMENTO { border-left-color: var(--ok); } .cur-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .cur-corpo { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: var(--e-4); } .cur-proc { margin-bottom: 6px; font-size: var(--t-sm); } .cur-teor summary { cursor: pointer; font-size: var(--t-sm); color: var(--tinta-media); list-style: none; } .cur-teor summary::-webkit-details-marker { display: none; } .cur-teor[open] summary { display: none; } .cur-teor .texto-publicacao { max-height: 380px; overflow: auto; padding: 8px 10px; background: var(--papel-2); border-radius: var(--raio-sm); } .cur-motivo { margin-top: 8px; font-size: var(--t-xs); color: var(--tinta-fraca); line-height: 1.5; } .cur-form { display: flex; flex-direction: column; gap: 4px; } .cur-sug { display: flex; flex-direction: column; gap: 4px; } .cur-opc { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-xs); padding: 5px 8px; border: 1px solid var(--linha); border-radius: var(--raio-sm); cursor: pointer; } .cur-opc.forte { border-color: var(--linha-ok); background: var(--ok-bg); } .cur-opc .anota { display: block; } .cur-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; } .cur-acoes select { min-height: 30px; } .cur-integra { margin-top: 10px; border-top: 1px dashed var(--linha); padding-top: 8px; } .cur-integra summary { cursor: pointer; font-size: var(--t-sm); color: var(--marca-clara); } .cur-integra textarea { width: 100%; margin-top: 8px; } @media (max-width: 900px) { .cur-corpo { grid-template-columns: 1fr; } } /* ------------------------------------------------------------- mensageria */ .msg-item { border-left: 4px solid var(--alta); } .msg-item.st-ENVIADA { border-left-color: var(--ok); } .msg-item.st-ERRO { border-left-color: var(--urgente); } .msg-item.st-DESCARTADA { border-left-color: var(--baixa); opacity: .8; } .msg-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 8px; } .msg-resumo { margin: 0 0 10px; padding: 8px 12px; background: var(--papel-2); border-radius: var(--raio-sm); font-size: var(--t-sm); } .msg-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-4); } .msg-colunas textarea { font: inherit; font-size: var(--t-sm); line-height: 1.5; resize: vertical; } .msg-colunas label.campo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .msg-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .msg-rodape { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); } .msg-mais { margin-top: 10px; } .msg-mais summary { cursor: pointer; font-size: var(--t-xs); color: var(--tinta-fraca); } .msg-contexto { white-space: pre-wrap; font: 12px/1.5 var(--fonte-mono); background: var(--papel-2); padding: 8px 10px; border-radius: var(--raio-sm); max-height: 260px; overflow: auto; } @media (max-width: 900px) { .msg-colunas { grid-template-columns: 1fr; } } /* ------------------------------------ tabela larga: barra de rolagem flutuante */ .rolagem-flutuante { position: fixed; bottom: 0; z-index: 15; overflow-x: auto; overflow-y: hidden; height: 18px; background: var(--papel); border-top: 1px solid var(--linha-forte); box-shadow: 0 -6px 14px rgba(0,0,0,.18); } .rolagem-flutuante > div { height: 1px; } /* última coluna (ações) fixa à direita enquanto a tabela rola */ .rolagem.acao-fixa th:last-child, .rolagem.acao-fixa td:last-child { position: sticky; right: 0; background: var(--papel); box-shadow: -8px 0 10px -8px rgba(0,0,0,.35); } .rolagem.acao-fixa th:last-child { z-index: 4; } .rolagem.acao-fixa td:last-child { z-index: 2; } .rolagem.acao-fixa tbody tr:nth-child(even) td:last-child { background: color-mix(in srgb, var(--papel-2) 45%, var(--papel)); } .rolagem.acao-fixa tbody tr:hover td:last-child { background: var(--hover); } /* o tom das linhas vencidas/hoje é translúcido: aplicar por cima do papel para a célula ficar opaca */ .rolagem.acao-fixa tr.linha-venceu td:last-child { background: linear-gradient(var(--venceu-bg), var(--venceu-bg)), var(--papel); } .rolagem.acao-fixa tr.linha-hoje td:last-child { background: linear-gradient(var(--hoje-bg), var(--hoje-bg)), var(--papel); } .rolagem.acao-fixa tr.linha-venceu:hover td:last-child, .rolagem.acao-fixa tr.linha-hoje:hover td:last-child { background: var(--hover); } .rolagem.acao-fixa td:last-child { white-space: nowrap; } /* --------------------------------------------------------- permissões */ .perm-grade th:not(:first-child), .perm-grade td.perm-cel { text-align: center; } .perm-grade td.perm-cel label { display: block; padding: 6px 0; cursor: pointer; } .perm-grade input[type=radio] { width: 18px; height: 18px; } /* usuário só leitura: formulários que alteram dados somem; filtros (GET) ficam */ body.somente-leitura main form[method="post"], body.somente-leitura main form[method="POST"] { display: none !important; } body.somente-leitura main a.botao[href$="/novo"], body.somente-leitura main a.botao[href*="/novo?"] { display: none !important; } /* ------------------------------------------------------- mensagens: agendar */ .msg-agendar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin: 10px 0 8px; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--papel-2); font-size: var(--t-sm); } .msg-atalhos { display: flex; gap: 4px; flex-wrap: wrap; } .st-AGENDADA { border-left: 4px solid var(--media); } /* ------------------------------------------------------- etapas (caso INSS) */ .passos { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 14px; padding: 0; list-style: none; counter-reset: passo; } .passos li { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tinta-fraca); padding: 3px 10px 3px 5px; border: 1px solid var(--linha); border-radius: 999px; background: var(--papel-2); } .passos li::before { counter-increment: passo; content: counter(passo); width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--linha-forte); color: var(--tinta); } .passos li.feito { color: var(--tinta-media); } .passos li.feito::before { content: "✓"; background: var(--ok); color: #fff; } .passos li.atual { color: var(--tinta); border-color: var(--marca); background: var(--marca-suave); font-weight: 600; } .passos li.atual::before { background: var(--marca); color: #fff; } /* ------------------------------------------------------------ compromissos */ .comp-lista { display: flex; flex-direction: column; gap: 8px; } .comp { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 14px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-2); align-items: start; } .comp.proximo { border-color: var(--marca); box-shadow: inset 3px 0 0 var(--marca); } .comp.passado { opacity: .9; } .comp .quando { font-family: var(--fonte-mono); font-size: var(--t-sm); font-weight: 700; line-height: 1.3; } .comp .quando small { display: block; font-weight: 400; color: var(--tinta-fraca); } .comp .titulo { font-weight: 700; } .comp .titulo .selo { margin-right: 4px; } .comp .meta { font-size: var(--t-xs); color: var(--tinta-media); margin-top: 3px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .comp .acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; } .comp .acoes details { position: relative; } .comp .acoes summary { list-style: none; cursor: pointer; } .comp .acoes summary::-webkit-details-marker { display: none; } .comp-editar { grid-column: 1 / -1; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linha-forte); } .comp .acoes details[open] { grid-column: 1 / -1; } .selo.t-PERICIA { background: rgba(236,72,153,.16); color: #ec4899; border-color: rgba(236,72,153,.4); } .selo.t-AUDIENCIA { background: var(--audiencia-bg); color: var(--audiencia); border-color: var(--audiencia); } .selo.t-SUSTENTACAO { background: rgba(139,92,246,.16); color: var(--roxo-500); border-color: rgba(139,92,246,.45); } .selo.t-REUNIAO, .selo.t-OUTRO { background: var(--neutro-bg); color: var(--tinta-media); border-color: var(--linha-forte); } .agenda-item.pericia, .lg.pericia { background: rgba(236,72,153,.16); border-color: var(--rosa-500); } .agenda-item.sustentacao, .lg.sustentacao { background: rgba(139,92,246,.16); border-color: var(--roxo-500); } .agenda-item.reuniao, .lg.reuniao, .agenda-item.outro, .lg.outro { background: var(--neutro-bg); border-color: var(--linha-forte); } .pl-evento.pericia { background: rgba(236,72,153,.16); } .pl-evento.sustentacao { background: rgba(139,92,246,.16); } @media (max-width: 700px) { .comp { grid-template-columns: 1fr; } .comp .acoes { justify-content: flex-start; } } /* ------------------------------------------------------------- atendimentos */ .kanban { display: grid; grid-template-columns: repeat(6, minmax(200px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 8px; margin-bottom: var(--e-4); } .kb-col { background: var(--papel-2); border: 1px solid var(--linha); border-radius: 12px; min-height: 240px; display: flex; flex-direction: column; min-width: 0; } .kb-col.kb-sobre { outline: 2px dashed var(--marca-clara); outline-offset: -4px; } .kb-cab { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; font-weight: 700; font-size: var(--t-sm); border-bottom: 1px solid var(--linha); } .kb-CONTATO .kb-cab { color: var(--media); } .kb-CONSULTA_AGENDADA .kb-cab, .kb-CONSULTA_REALIZADA .kb-cab { color: var(--alta); } .kb-PROPOSTA .kb-cab { color: var(--audiencia); } .kb-CONTRATO .kb-cab { color: var(--ok); } .kb-PERDIDO .kb-cab { color: var(--baixa); } .kb-lista { padding: 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .kb-card { display: block; background: var(--papel); border: 1px solid var(--linha); border-radius: 10px; padding: 9px 11px; color: inherit; cursor: grab; box-shadow: var(--sombra); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .kb-card:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sombra-alta); } .kb-card.kb-arrastando { opacity: .5; } .kb-card.kb-vencido { border-left: 4px solid var(--urgente); } .kb-card.kb-parado { border-left: 4px solid var(--alta); } .kb-nome { font-weight: 700; font-size: var(--t-sm); } .kb-meta { font-size: var(--t-xs); color: var(--tinta-fraca); } .kb-resumo { font-size: var(--t-xs); color: var(--tinta-media); margin-top: 4px; line-height: 1.35; } .kb-pe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; } .kb-resp { font-size: 11px; color: var(--tinta-fraca); margin-top: 4px; } .kb-vazio { color: var(--tinta-fraca); text-align: center; padding: 16px; font-size: var(--t-xs); } @media (max-width: 1100px) { .kanban { grid-template-columns: repeat(6, 240px); } } /* --------------------------------------------- moldura em telas estreitas */ @media (max-width: 1000px) { .corpo { margin-left: 0; } .lateral { transform: translateX(-100%); transition: transform 220ms var(--ease); box-shadow: var(--sombra-alta); } body.menu-aberto .lateral { transform: none; } body.menu-aberto .veu { display: block; } body.menu-aberto { overflow: hidden; } .hamb { display: inline-flex; align-items: center; justify-content: center; } .cabeca { padding: 0 14px; gap: 8px; } .cabeca-data, .cabeca .botao { display: none; } .busca-global { flex: 1 1 auto; min-width: 0; width: auto; } /* a busca encolhe; sair e tema continuam visíveis */ .busca-global kbd { display: none; } .cabeca .tema { flex: 0 0 auto; } main { padding: var(--e-4); } .rodape { padding-left: var(--e-4); padding-right: var(--e-4); } .hero h1 { font-size: 26px; } } /* ------------------------------------------------------------ responsivo */ @media (max-width: 900px) { main { padding: var(--e-3); } .cartao { padding: var(--e-3) var(--e-4); } .agenda-grade, .agenda-cabecalho { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agenda-cabecalho { display: none; } .agenda-grade.semana .agenda-dia { min-height: 64px; } dl.ficha { grid-template-columns: 1fr !important; } /* vence o grid de 4 colunas inline das fichas financeiras */ dl.ficha dt { padding-top: 6px; } } @media (max-width: 700px) { .filtros > span { display: none; } .filtros-form { width: 100%; } .filtros-form select { flex: 1 1 140px; } .filtros-form .busca { min-width: 0; flex: 1 1 100%; } .filtros-form button { flex: 1 1 100%; } .paginacao { align-items: stretch; } .paginacao-resumo { width: 100%; } .paginacao-acoes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .paginacao .botao { text-align: center; } .agenda-grade, .agenda-cabecalho { grid-template-columns: 1fr; } .kpi .num { font-size: var(--t-xl); } } /* ------------------------------------------------------------- impressão */ @media print { .lateral, .cabeca, .veu, .rodape, .filtros, .acoes-prazos, button, .botao, #popover-texto, .pular { display: none !important; } main { padding: 0; max-width: none; } .cartao, .kpi { box-shadow: none; break-inside: avoid; } body { background: #fff; color: #000; } td.corta, td.proc { white-space: normal; max-width: none; } } /* ------------------------------------------------------------ WhatsApp */ .wa-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr) 280px; gap: var(--e-4); align-items: start; } @media (max-width: 1100px) { .wa-layout { grid-template-columns: 1fr; } } .wa-lista { padding: 10px; margin: 0; } .wa-busca { display: flex; gap: 6px; margin-bottom: 8px; } .wa-busca .busca { flex: 1; min-width: 0; } .wa-itens { max-height: 70vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .wa-item { display: block; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; color: inherit; text-decoration: none; } .wa-item:hover { background: var(--papel-2); text-decoration: none; } .wa-item.ativo { background: var(--papel-2); border-color: var(--linha-forte); } .wa-item.nl .wa-nome { font-weight: 700; } .wa-item-cab, .wa-item-pe { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; min-width: 0; } .wa-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wa-previa { color: var(--tinta-fraca); font-size: var(--t-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wa-badge { background: var(--marca); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; font-weight: 700; flex: 0 0 auto; } .wa-item-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; } .wa-thread { display: flex; flex-direction: column; min-height: 70vh; padding: 0; overflow: hidden; margin: 0; } .wa-thread.vazio-ilustrado { align-items: center; justify-content: center; } .wa-thread-cab { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--linha); } .wa-thread-acoes { display: flex; gap: 4px; flex-wrap: wrap; } .wa-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 6px; max-height: 60vh; background: var(--papel-2); } .wa-msgs-mini { max-height: 260px; border-radius: 10px; } .wa-bolha { max-width: 78%; padding: 7px 10px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); font-size: var(--t-sm); } .wa-bolha.in { align-self: flex-start; border-bottom-left-radius: 3px; } .wa-bolha.out { align-self: flex-end; background: var(--ok-bg); border-color: var(--linha-ok); border-bottom-right-radius: 3px; } .wa-texto { white-space: pre-wrap; word-break: break-word; } .wa-meta { color: var(--tinta-fraca); font-size: 11px; margin-top: 3px; text-align: right; } .wa-img { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; margin-bottom: 4px; } .wa-sug { align-self: stretch; border: 1px dashed var(--marca); border-radius: 12px; padding: 8px 10px; background: var(--papel); } .wa-sug-cab { font-weight: 700; font-size: var(--t-sm); margin-bottom: 4px; } .wa-sug textarea { width: 100%; } .wa-compor { padding: 10px 14px; border-top: 1px solid var(--linha); } .wa-compor textarea { width: 100%; margin-bottom: 6px; } .wa-compor-linha { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .wa-lado { display: flex; flex-direction: column; gap: var(--e-4); } .wa-lado .cartao { margin: 0; } .wa-agend { list-style: none; padding: 0; margin: 0; font-size: var(--t-sm); } .wa-agend li { padding: 3px 0; border-bottom: 1px dashed var(--linha); } .wa-barra { display: inline-block; width: 90px; height: 8px; background: var(--neutro-bg); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-left: 6px; } .wa-barra span { display: block; height: 100%; background: var(--marca); } .wa-previa-msg { white-space: pre-wrap; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: var(--t-sm); } .wa-qr { text-align: center; } .wa-funil { border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; } /* canais da Meta e torre */ .selo.canal-ig { background: #fce7f3; color: #9d174d; border-color: #f9a8d4; } .selo.canal-fb { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; } :root[data-theme="dark"] .selo.canal-ig { background: #4a1030; color: #f9a8d4; border-color: #831843; } :root[data-theme="dark"] .selo.canal-fb { background: #172554; color: #93c5fd; border-color: #1e3a8a; } .torre-fila td.min { font-variant-numeric: tabular-nums; } .torre-fila tr.critico td:first-child { border-left: 3px solid var(--urgente); } .pix-caixa { font-family: var(--fonte-mono); font-size: 11px; word-break: break-all; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 8px; padding: 6px 8px; max-height: 90px; overflow: auto; } /* =============================================================== etapa 1 (UX) */ /* Alvos de toque: 40 px no computador, 44 px no celular; botões pequenos crescem junto. */ button, .botao { min-height: 40px; } button.mini, .botao.mini { min-height: 32px; padding: 0 10px; font-size: var(--t-sm); } input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="search"], select { min-height: 38px; } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; } @media (max-width: 768px) { :root { --t-base: 15px; --t-sm: 14px; --t-xs: 13px; } button, .botao { min-height: 44px; } button.mini, .botao.mini { min-height: 40px; padding: 0 12px; } input[type="text"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="search"], select, textarea { min-height: 44px; font-size: 16px; } /* 16 px evita zoom automático no iPhone */ .opcao-checkbox { min-height: 44px; } .opcao-checkbox input { width: 22px; height: 22px; } } /* Foco visível em tudo que recebe teclado (WCAG 2.4.7 / 2.4.11) */ :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; } td.corta:focus-visible, td.proc:focus-visible { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: 4px; } td.corta[tabindex], td.proc[tabindex] { cursor: pointer; } /* Indicador zerado sem problema: aparência neutra (a cor só quando há algo a fazer) */ .kpi.zero { --kpi-cor: var(--tinta-fraca); } .kpi.zero .num { color: var(--tinta-media); } .kpi.zero .kpi-ico { background: var(--tinta-fraca); box-shadow: none; } .kpi.zero .kpi-marca { opacity: .5; } /* Superfícies: atalhos, chips e KPIs voltaram ao acabamento com gradiente (ver bloco 'acabamento' no fim) */ .vazio-ilustrado { background-image: none; } /* Lista de prazos no celular: cada linha vira um cartão; cliente, processo, vencimento e situação ficam visíveis junto das ações. No computador continua tabela com a coluna de ações fixa. */ .tabela-prazos .t-venc .t-data { font-weight: 700; } .tabela-prazos .t-venc .dias { display: block; } .tabela-prazos .t-acoes form { margin: 0; } .tabela-prazos .t-hist { margin-left: 4px; } @media (max-width: 768px) { .tabela-prazos { overflow: visible; } .tabela-prazos table, .tabela-prazos tbody, .tabela-prazos tr, .tabela-prazos td { display: block; width: 100%; } .tabela-prazos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* cabeçalho segue para leitores de tela */ .tabela-prazos tr { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 10px; background: var(--papel); display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; } .tabela-prazos tr.linha-venceu { border-left: 4px solid var(--urgente); } .tabela-prazos tr.linha-hoje { border-left: 4px solid var(--alta); } .tabela-prazos td { border: 0; padding: 2px 0; white-space: normal; max-width: none; overflow: visible; text-overflow: clip; grid-column: 1 / -1; } .tabela-prazos td::before { content: attr(data-rotulo); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-fraca); } .tabela-prazos td.t-venc { grid-column: 1; order: -2; } .tabela-prazos td.t-venc::before { display: none; } .tabela-prazos td.t-venc .t-data { font-size: var(--t-md); } .tabela-prazos td.t-venc .dias { display: inline; margin-left: 6px; } .tabela-prazos td[data-rotulo="Prioridade"] { grid-column: 2; order: -2; justify-self: end; } .tabela-prazos td[data-rotulo="Prioridade"]::before { display: none; } .tabela-prazos td.t-cliente { order: -1; font-weight: 700; font-size: var(--t-base); } .tabela-prazos td.t-cliente::before { display: none; } .tabela-prazos td.proc .mono { white-space: normal; overflow-wrap: anywhere; } .tabela-prazos td.t-acoes { position: static; box-shadow: none; background: transparent; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--linha); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .tabela-prazos td.t-acoes::before { display: none; } .tabela-prazos td.t-acoes .botao, .tabela-prazos td.t-acoes button { flex: 1 1 auto; justify-content: center; } .tabela-prazos td.t-acoes .t-hist { flex-basis: 100%; margin: 0; } .tabela-prazos td.vazio { grid-column: 1 / -1; } .tabela-prazos td.vazio::before { display: none; } .rolagem-flutuante { display: none; } } /* Estouros de página no celular (medidos): três colunas do WhatsApp e balão do Financeiro */ .wa-layout > * { min-width: 0; } @media (max-width: 1100px) { .wa-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 700px) { .pop-lista { position: static !important; min-width: 0 !important; max-width: 100% !important; } } /* Formulários: obrigatório, dica de formato e erro perto do campo */ label.campo .obrig { color: var(--urgente); font-weight: 700; margin-left: 2px; } .dica { display: block; font-size: var(--t-xs); color: var(--tinta-fraca); margin-top: 3px; } .campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--urgente); box-shadow: 0 0 0 2px var(--urgente-bg); } .erro-campo { display: block; font-size: var(--t-xs); color: var(--urgente); margin-top: 3px; } .aviso-caixa.erro { border-color: var(--linha-urgente); background: var(--urgente-bg); } form[data-protege] button[type="submit"][disabled] { opacity: .7; cursor: progress; } .legenda-acoes { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--t-xs); color: var(--tinta-fraca); margin: -6px 0 10px; } .legenda-acoes b { color: var(--tinta); } /* Filtros: nenhum seletor passa da largura da tela (opções longas, como nomes de réu) */ .filtros select, .filtros input, .filtros-form select, .filtros-form input { max-width: 100%; min-width: 0; } @media (max-width: 700px) { .filtros select, .filtros-form select { flex: 1 1 45%; width: auto; } .filtros .busca, .filtros-form .busca { flex: 1 1 100%; } } /* Ajustes finos etapa 1 */ /* Monitor: o número do processo nunca é cortado (quebra linha) e as ações cabem em duas linhas curtas */ .tabela-prazos td.proc { min-width: 200px; } .tabela-prazos td.proc .mono { white-space: normal; overflow-wrap: anywhere; } .tabela-prazos td.t-acoes { white-space: normal; max-width: 250px; } .tabela-prazos td.t-acoes .botao, .tabela-prazos td.t-acoes form, .tabela-prazos td.t-acoes button { margin: 2px 2px 2px 0; vertical-align: middle; } /* Celular: um campo por linha nos formulários (nada apertado lado a lado) */ @media (max-width: 600px) { .linha-form > div:not(.lf-botao) { flex: 1 1 100% !important; } .linha-form > .lf-botao { flex: 1 1 100%; } .linha-form > .lf-botao button { width: 100%; } } /* Acessibilidade (Lighthouse): links dentro de texto sublinhados; links em tabela com alvo de 24 px */ .aviso-caixa a, p a, .sub a, .anota a, li a, dd a, .legenda-acoes a { text-decoration: underline; text-underline-offset: 2px; } td a:not(.botao) { display: inline-block; padding: 4px 0; line-height: 1.3; } /* Coluna de ações com largura fixa no monitor: os botões quebram em duas linhas em vez de cobrir a coluna "Ato / teor" */ @media (min-width: 769px) { .tabela-prazos td.t-ato { min-width: 190px; max-width: 260px; } .tabela-prazos td.t-cliente { max-width: 210px; } .tabela-prazos td.proc { min-width: 190px; max-width: 230px; } .tabela-prazos td[data-rotulo="Prioridade"] { white-space: nowrap; } } /* Selos de perícia e sustentação com contraste AA (4,5:1) nos dois temas */ .selo.t-PERICIA { color: #be185d; } .selo.t-SUSTENTACAO { color: #6d28d9; } :root[data-theme="dark"] .selo.t-PERICIA { color: #f472b6; } :root[data-theme="dark"] .selo.t-SUSTENTACAO { color: #a78bfa; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .selo.t-PERICIA { color: #f472b6; } :root:not([data-theme="light"]) .selo.t-SUSTENTACAO { color: #a78bfa; } } /* A caixa interna dá largura fixa à coluna de ações no monitor (a célula de tabela sozinha não respeita width) */ .tabela-prazos td.t-acoes .t-acoes-caixa { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .tabela-prazos td.t-acoes .t-acoes-caixa .botao, .tabela-prazos td.t-acoes .t-acoes-caixa form, .tabela-prazos td.t-acoes .t-acoes-caixa button { margin: 0; } @media (min-width: 769px) { .tabela-prazos td.t-acoes .t-acoes-caixa { width: 200px; } } @media (max-width: 768px) { .tabela-prazos td.t-acoes .t-acoes-caixa { width: 100%; } } /* Abaixo de 1700 px a coluna "Providência" some e o texto passa para a célula "Ato / teor" (menos colunas, menos rolagem) */ .tabela-prazos .prov-inline { display: none; } @media (max-width: 1699px) { .tabela-prazos .col-prov { display: none; } .tabela-prazos .prov-inline { display: block; color: var(--tinta-media); } } /* =============================================================== acabamento (painel de design 28/09/2026) */ /* Acabamento "joalheria" (painel de design de 28/09/2026, proposta vencedora + correções dos juízes): atalhos, cartões KPI, chip de ícone, ícone de página, logo e sub-itens da barra lateral. Princípios: gradiente vertical (180deg) de 3 paradas com o topo mais claro, fio de luz interno de 1px, aro de 1px em color-mix via box-shadow (não altera alturas), sombra em 2 camadas (ambiente + halo da cor), hover só eleva (sem brightness, preserva o contraste), foco visível por outline (funciona no alto contraste), tema escuro mais discreto por tokens, reduced-motion sem transform. Contraste AA (>= 4,5:1) conferido em todas as paradas dos dois temas (tabela WCAG). Se o navegador não tiver color-mix(), a declaração inteira é ignorada e valem as regras originais. */ /* ---------- tokens do acabamento (claro) ---------- */ :root { --joia-luz: rgba(255,255,255,.22); /* fio de luz interno (inset 1px) */ --joia-luz-hover: rgba(255,255,255,.30); --joia-ambiente: 0 1px 2px rgba(0,10,30,.16), 0 4px 12px rgba(0,10,30,.16); --joia-ambiente-hover: 0 2px 4px rgba(0,10,30,.18), 0 10px 22px rgba(0,10,30,.22); --joia-cor-sombra: 32%; /* força do halo colorido */ --joia-cor-sombra-hover: 44%; --joia-fundo: 0%; /* aprofundamento das paradas (escuro: 10%) */ --joia-q-vidro-a: rgba(255,255,255,.16); /* véu claro no topo do chip .q */ --joia-q-vidro-b: rgba(255,255,255,.04); --joia-q-base: rgba(6,14,36,.22); /* base translúcida marinho do chip .q */ --joia-kpi-luz: rgba(255,255,255,.75); /* fio de luz do cartão KPI */ --joia-kpi-a: 14%; /* tinta da cor no papel (topo/meio/base) */ --joia-kpi-b: 7%; --joia-kpi-c: 3%; --joia-kpi-borda: 28%; --joia-kpi-halo: 35%; } /* ---------- atalhos (.acao-rapida) ---------- */ .acao-rapida { --ar-a: var(--azul-600); /* topo — branco 5,2 */ --ar-b: var(--azul-700); /* meio — branco 6,7 */ --ar-c: var(--indigo-600); /* base — branco 6,3 (herança azul → índigo do visual anterior) */ --ar-tinta: #fff; color: var(--ar-tinta); border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--ar-a), #000 var(--joia-fundo)) 0%, color-mix(in srgb, var(--ar-b), #000 var(--joia-fundo)) 58%, color-mix(in srgb, var(--ar-c), #000 var(--joia-fundo)) 100%); box-shadow: inset 0 1px 0 var(--joia-luz), 0 0 0 1px color-mix(in srgb, var(--ar-c) 70%, #000), var(--joia-ambiente), 0 6px 16px -6px color-mix(in srgb, var(--ar-b) var(--joia-cor-sombra), transparent); filter: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .acao-rapida:hover { color: var(--ar-tinta); filter: none; /* neutraliza o brightness(1.08) da regra base */ transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--joia-luz-hover), 0 0 0 1px color-mix(in srgb, var(--ar-c) 70%, #000), var(--joia-ambiente-hover), 0 10px 22px -6px color-mix(in srgb, var(--ar-b) var(--joia-cor-sombra-hover), transparent); } .acao-rapida:active { transform: translateY(0); box-shadow: inset 0 1px 2px rgba(0,10,30,.28), 0 0 0 1px color-mix(in srgb, var(--ar-c) 70%, #000), var(--joia-ambiente); } .acao-rapida:focus-visible { outline: 2px solid var(--ar-a); outline-offset: 3px; } .acao-rapida .q { /* chip 24px mantido; "poço" de vidro escuro com fio de luz */ color: var(--ar-tinta); background: linear-gradient(180deg, var(--joia-q-vidro-a), var(--joia-q-vidro-b)), var(--joia-q-base); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,10,30,.18); } /* variantes semânticas — 3 paradas, todas AA com a tinta indicada */ .acao-rapida.ar-cinza { --ar-a: #475569; --ar-b: #334155; --ar-c: #1e293b; } /* 7,6 / 10,4 / 14,6 */ .acao-rapida.ar-vermelho { --ar-a: #b91c1c; --ar-b: #be123c; --ar-c: #9f1239; } /* 6,5 / 6,3 / 8,0 */ .acao-rapida.ar-verde { --ar-a: #047857; --ar-b: #065f46; --ar-c: #064e3b; } /* 5,5 / 7,7 / 9,7 */ .acao-rapida.ar-rosa { --ar-a: #c026d3; --ar-b: #a21caf; --ar-c: #86198f; } /* fúcsia: ponte rosa→roxo sem faixa de matiz */ .acao-rapida.ar-laranja { /* agenda: ouro com tinta marinho */ --ar-a: #fbbf24; --ar-b: #f59e0b; --ar-c: #d97706; /* marinho 10,4 / 8,1 / 5,4 */ --ar-tinta: #0B1A33; --joia-fundo: 0%; /* não aprofunda no escuro (a tinta é escura) */ --joia-q-vidro-a: rgba(255,255,255,.30); --joia-q-vidro-b: rgba(255,255,255,.10); --joia-q-base: rgba(11,26,51,.12); } .acao-rapida.ar-laranja .q { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(11,26,51,.18), 0 1px 2px rgba(0,10,30,.12); } .acao-rapida.ar-laranja:focus-visible { outline-color: #b45309; } /* ---------- cartões KPI ---------- */ .kpi { background: linear-gradient(180deg, color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-a), var(--papel)) 0%, color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-b), var(--papel)) 55%, color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-c), var(--papel)) 100%); border: 1px solid color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-borda), var(--linha)); box-shadow: inset 0 1px 0 var(--joia-kpi-luz), var(--sombra), 0 8px 20px -12px color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-halo), transparent); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } a.kpi:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--kpi-cor) 48%, var(--linha)); box-shadow: inset 0 1px 0 var(--joia-kpi-luz), var(--sombra-alta), 0 14px 28px -12px color-mix(in srgb, var(--kpi-cor) 45%, transparent); } a.kpi:hover .kpi-ico { transform: translateY(-1px); } a.kpi:focus-visible { outline: 2px solid var(--kpi-cor); outline-offset: 3px; } /* rótulo e rodapé um passo mais fundos que a cor pura, para AA sobre o papel tingido no tema claro (pior caso --alta: rótulo 5,4). .kpi.zero .num continua vencendo (especificidade maior). */ .kpi .rot { color: color-mix(in srgb, var(--kpi-cor) 66%, var(--tinta)); } .kpi .num { color: color-mix(in srgb, var(--kpi-cor) 85%, var(--tinta)); } .kpi .pe { color: var(--tinta-media); } /* ícone-chip lapidado (46px mantidos): pedra em tom 700 fixo, igual nos dois temas; :not(.zero) preserva o chip neutro */ .kpi { --kpi-joia: var(--azul-700); } /* branco 6,7 */ .kpi.perigo { --kpi-joia: var(--vermelho-700); } /* 6,5 */ .kpi.aviso { --kpi-joia: var(--ambar-700); } /* 5,0 */ .kpi.bom { --kpi-joia: var(--verde-700); } /* 5,0 */ .kpi.roxo { --kpi-joia: var(--roxo-700); } /* 7,1 */ .kpi.neutro { --kpi-joia: var(--ardosia-600); } /* 7,6 */ .kpi:not(.zero) .kpi-ico { color: #fff; background: linear-gradient(180deg, var(--kpi-joia) 0%, color-mix(in srgb, var(--kpi-joia) 92%, #000) 55%, color-mix(in srgb, var(--kpi-joia) 84%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px color-mix(in srgb, var(--kpi-joia) 70%, #000), 0 1px 2px rgba(0,10,30,.2), 0 8px 18px -6px color-mix(in srgb, var(--kpi-joia) 55%, transparent); transition: transform var(--dur) var(--ease); } .kpi.zero .kpi-ico { color: var(--papel); } /* ícone legível sobre o cinza neutro nos dois temas (4,8 claro / 7,5 escuro) */ .kpi .kpi-marca { opacity: .08; } /* ---------- ícone de página (.pt-ico) ---------- */ .pagina-topo .pt-ico { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pt-cor) 64%, #000) 0%, /* --pt-cor são tons 500: pior caso âmbar 5,0 / ciano 4,6 */ color-mix(in srgb, var(--pt-cor) 55%, #000) 58%, color-mix(in srgb, var(--pt-cor) 48%, #000) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 0 1px color-mix(in srgb, var(--pt-cor) 45%, #000), 0 1px 2px rgba(0,10,30,.2), 0 10px 24px -8px color-mix(in srgb, var(--pt-cor) var(--joia-cor-sombra), transparent); } /* ---------- logo (sempre sobre a lateral marinho) ---------- */ .logo { color: #fff; background: linear-gradient(180deg, var(--azul-600) 0%, var(--azul-700) 58%, var(--indigo-600) 100%); /* 5,2 / 6,7 / 6,3 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 1px color-mix(in srgb, var(--indigo-600) 60%, #000), 0 1px 2px rgba(0,0,0,.35), 0 8px 18px -4px rgba(37,99,235,.45); } /* ---------- barra lateral: sub-itens com ícone e "cotovelo" ligando ao item pai ---------- */ .lateral nav a.sub { padding: 7px 12px 7px 40px; /* 12 + ícone 18 + gap 10 = alinhado ao texto do item pai */ gap: 8px; font-size: 12.5px; } .lateral nav a.sub svg.ico { width: 14px; height: 14px; opacity: .7; } .lateral nav a.sub.ativo svg.ico { opacity: 1; } .lateral nav a.sub::after { content: ""; position: absolute; left: 20px; top: -3px; width: 10px; height: calc(50% + 3px); border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; border-bottom-left-radius: 7px; opacity: .22; pointer-events: none; } .lateral nav a.sub:focus-visible { outline: 2px solid var(--lat-realce); outline-offset: -2px; } /* ---------- tema escuro ---------- */ :root[data-theme="dark"] { --joia-luz: rgba(255,255,255,.14); --joia-luz-hover: rgba(255,255,255,.20); --joia-ambiente: 0 1px 2px rgba(0,0,0,.40), 0 3px 8px rgba(0,0,0,.28); --joia-ambiente-hover: 0 2px 4px rgba(0,0,0,.40), 0 8px 18px rgba(0,0,0,.35); --joia-cor-sombra: 22%; --joia-cor-sombra-hover: 30%; --joia-fundo: 10%; --joia-q-vidro-a: rgba(255,255,255,.10); --joia-q-vidro-b: rgba(255,255,255,.02); --joia-q-base: rgba(4,10,28,.28); --joia-kpi-luz: rgba(255,255,255,.06); --joia-kpi-a: 16%; --joia-kpi-b: 8%; --joia-kpi-c: 4%; --joia-kpi-borda: 26%; --joia-kpi-halo: 22%; } :root[data-theme="dark"] .kpi { border-color: color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-borda), var(--linha-forte)); } :root[data-theme="dark"] .pagina-topo .pt-ico, :root[data-theme="dark"] .logo { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -6px rgba(0,0,0,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --joia-luz: rgba(255,255,255,.14); --joia-luz-hover: rgba(255,255,255,.20); --joia-ambiente: 0 1px 2px rgba(0,0,0,.40), 0 3px 8px rgba(0,0,0,.28); --joia-ambiente-hover: 0 2px 4px rgba(0,0,0,.40), 0 8px 18px rgba(0,0,0,.35); --joia-cor-sombra: 22%; --joia-cor-sombra-hover: 30%; --joia-fundo: 10%; --joia-q-vidro-a: rgba(255,255,255,.10); --joia-q-vidro-b: rgba(255,255,255,.02); --joia-q-base: rgba(4,10,28,.28); --joia-kpi-luz: rgba(255,255,255,.06); --joia-kpi-a: 16%; --joia-kpi-b: 8%; --joia-kpi-c: 4%; --joia-kpi-borda: 26%; --joia-kpi-halo: 22%; } :root:not([data-theme="light"]) .kpi { border-color: color-mix(in srgb, var(--kpi-cor) var(--joia-kpi-borda), var(--linha-forte)); } :root:not([data-theme="light"]) .pagina-topo .pt-ico, :root:not([data-theme="light"]) .logo { box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4), 0 8px 18px -6px rgba(0,0,0,.45); } } /* ---------- movimento reduzido ---------- */ @media (prefers-reduced-motion: reduce) { .acao-rapida, .kpi, a.kpi, .logo, .pagina-topo .pt-ico, .kpi .kpi-ico { transition: none; } .acao-rapida:hover, .acao-rapida:active, a.kpi:hover, a.kpi:hover .kpi-ico { transform: none; } } /* =============================================================== lote 2 (UX) */ /* busca global agrupada */ .busca-grupos { display: grid; gap: 14px; } .busca-grupo h2 { display: flex; align-items: center; gap: 8px; } .busca-res { display: flex; flex-direction: column; gap: 4px; } .busca-res a.res { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; color: inherit; text-decoration: none; } .busca-res a.res:hover, .busca-res a.res:focus-visible { border-color: var(--marca); background: color-mix(in srgb, var(--marca) 8%, var(--papel)); text-decoration: none; } .busca-res a.res .t { font-weight: 600; } .busca-res a.res .s { color: var(--tinta-media); font-size: var(--t-sm); grid-column: 1 / -1; } .busca-res a.res .d { color: var(--tinta-fraca); font-size: var(--t-xs); white-space: nowrap; } .busca-atalhos { color: var(--tinta-fraca); font-size: var(--t-xs); } /* WhatsApp: no celular, uma tela por vez (conversas → conversa → detalhes) */ .so-celular { display: none; } .wa-celular-topo { display: none; justify-content: space-between; align-items: center; margin-bottom: 8px; } @media (max-width: 900px) { .so-celular { display: inline-flex; } .wa-celular-topo { display: flex; } .wa-layout .wa-thread, .wa-layout .wa-lado { display: none; } .wa-layout.com-conversa .wa-lista { display: none; } .wa-layout.com-conversa .wa-thread { display: flex; } .wa-layout.ver-lado .wa-lista, .wa-layout.ver-lado .wa-thread { display: none; } .wa-layout.ver-lado .wa-lado { display: block; } .wa-thread { min-height: 60vh; } } /* agenda: visão em lista e grades empilhadas no celular */ .agenda-lista-dias { display: grid; gap: 10px; } .agenda-lista-dias .agenda-dia { padding: 10px 12px; } .agenda-lista-dias .agenda-dia .n { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; } .agenda-lista-dias .agenda-item { white-space: normal; } @media (max-width: 700px) { .agenda-grade.semana, .agenda-grade.mes { grid-template-columns: 1fr; } .agenda-grade.semana .agenda-dia { min-height: 0; } .agenda-grade.semana .agenda-dia:not(:has(.agenda-item)), .agenda-grade.mes .agenda-dia:not(:has(.agenda-item)) { display: none; } .agenda-cabecalho { display: none; } } /* configurações: navegação por seção */ .config-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; position: sticky; top: 0; z-index: 5; background: var(--fundo); padding: 8px 0 10px; margin-bottom: 10px; } .config-nav a { border: 1px solid var(--linha); border-radius: 999px; padding: 6px 12px; font-size: var(--t-sm); color: var(--tinta); background: var(--papel); text-decoration: none; } .config-nav a:hover, .config-nav a:focus-visible { border-color: var(--marca); color: var(--marca); } .cartao[id] { scroll-margin-top: 64px; } /* painel: alertas num só cartão */ .cartao.atencao .aviso-caixa { margin: 0 0 8px; } .cartao.atencao .aviso-caixa:last-child { margin-bottom: 0; } /* =============================================================== lote 3 (UX) */ .ajuda-lista li { margin: 4px 0; } @media (max-width: 700px) { .kpi { padding: 12px 12px; } .kpi .num { font-size: var(--t-xl); } .kpi .kpi-ico { width: 36px; height: 36px; right: 10px; top: 10px; border-radius: 10px; } .kpi .kpi-ico svg.ico { width: 18px; height: 18px; } .kpi .kpi-marca { width: 64px; height: 64px; right: -10px; bottom: -12px; } .kpi .kpi-marca svg.ico { width: 64px; height: 64px; } .kpi .rot { padding-right: 40px; } } /* =============================================================== auditoria do tema claro (AA) */ :root[data-theme="light"] .selo.URGENTE, :root[data-theme="light"] .dias.venceu, :root[data-theme="light"] .dias.hoje { color: #b91c1c; } /* 5,3:1 sobre o rosa */ :root[data-theme="light"] .selo.ALTA { color: #92400e; } /* 6,4:1 sobre o âmbar claro */ :root[data-theme="light"] .dias.perto { color: #b45309; } /* 5,0:1 sobre branco */ :root[data-theme="light"] .selo.MEDIA { color: #1d4ed8; } /* 5,7:1 sobre o azul claro */ :root[data-theme="light"] .selo.ok { color: #166534; } /* 6,5:1 sobre o verde claro */ .filtros .aba.ativo .n { opacity: 1; color: #fff; } /* contador da aba ativa: branco sobre a cor de ação */ /* linha desativada: texto fraco e riscado em vez de opacidade (mantém o contraste dos botões) */ .linha-inativa td { color: var(--tinta-fraca); } .linha-inativa td:first-child { text-decoration: line-through; } /* =============================================================== lote 4 (UX) */ /* tabela de prazos com 6 colunas: conferência sob a data, situação sob a prioridade, responsável sob o cliente */ .selo.mini { font-size: 10.5px; padding: 1px 6px; line-height: 1.4; } .tabela-prazos .t-conf { display: block; margin-top: 3px; } .tabela-prazos td.t-prior .t-sit { display: block; margin-top: 4px; width: fit-content; } .tabela-prazos td.t-cliente .t-resp { font-size: var(--t-xs); } @media (min-width: 769px) { .tabela-prazos td.t-cliente { max-width: 180px; } .tabela-prazos td.proc { min-width: 170px; max-width: 200px; } .tabela-prazos td.t-ato { min-width: 230px; max-width: 260px; } .tabela-prazos td.t-acoes .t-acoes-caixa { width: 196px; } .tabela-prazos th { white-space: nowrap; } } @media (max-width: 1599px) { .tabela-prazos th .anota { display: none; } } /* "· conferência" etc. só em telas largas */ @media (max-width: 768px) { .tabela-prazos td.t-venc .t-conf { display: inline; margin-left: 6px; } .tabela-prazos td.t-prior .t-sit { display: inline-block; margin: 0 0 0 6px; } } /* atendimentos: "Ver como" numa linha própria no celular */ .filtros .ver-como { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; } @media (max-width: 700px) { .filtros .ver-como { flex-basis: 100%; margin-left: 0; } } /* prévia do Notion */ .previa-amostra td, .previa-amostra th { font-size: var(--t-sm); } /* =============================================================== equipe: tarefas, rotinas, conversas, avisos (30/09/2026) */ /* linha de tarefa: [prazo] [título + selos + vínculo] [ações]; no celular empilha */ .tf-lista { display: flex; flex-direction: column; gap: 8px; } .tf { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px 14px; padding: 10px 12px; color: inherit; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-2); align-items: start; } a.tf:hover { text-decoration: none; border-color: var(--marca); } .tf.tf-atrasada { border-color: var(--linha-urgente); box-shadow: inset 3px 0 0 var(--urgente); } .tf.tf-fechada { background: transparent; } .tf-quando { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.3; } .tf-data { font-family: var(--fonte-mono); font-weight: 700; font-variant-numeric: tabular-nums; } .tf-quando small { color: var(--tinta-fraca); font-size: var(--t-xs); } .tf-titulo { font-weight: 700; overflow-wrap: anywhere; } .tf-titulo a { color: var(--tinta); } .tf-titulo a:hover { color: var(--marca-clara); } .tf-meta { font-size: var(--t-xs); color: var(--tinta-media); margin-top: 4px; display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; } .tf-vinculo { min-width: 0; overflow-wrap: anywhere; } .tf-vinculo svg.ico { width: 13px; height: 13px; margin-right: 4px; } .tf-vinculo .mono { white-space: nowrap; } a.tf-vinculo { text-decoration: underline; text-underline-offset: 2px; padding: 3px 0; } .tf-resp { font-weight: 600; } .tf-bloqueio { margin-top: 6px; font-size: var(--t-xs); padding: 6px 9px; border-radius: 8px; background: var(--urgente-bg); border: 1px solid var(--linha-urgente); color: var(--tinta); overflow-wrap: anywhere; } .tf-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; } .tf-acoes form { margin: 0; } .tf-acoes summary, .tf-botoes summary { list-style: none; cursor: pointer; } .tf-acoes summary::-webkit-details-marker, .tf-botoes summary::-webkit-details-marker { display: none; } .tf-acoes:has(details[open]) { grid-column: 1 / -1; justify-content: flex-start; } .tf-acoes details[open] { flex: 1 1 100%; order: 9; } .tf-conf-form, .tf-form-acao { margin-top: 10px; padding: 12px; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--papel); } .tf-form-acao { background: var(--papel-2); } .cartao form textarea, details.caixa form textarea, .tf-conf-form textarea { width: 100%; resize: vertical; } .tf-radio, .tf-colab { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; display: flex; gap: 2px 18px; flex-wrap: wrap; } .tf-radio legend, .tf-colab legend { padding: 0; float: left; width: 100%; font-size: var(--t-xs); color: var(--tinta-fraca); font-weight: 600; margin-bottom: 2px; } .tf-radio label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); min-height: 36px; } .tf-botoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; } .tf-botoes form { margin: 0; } .tf-botoes details[open] { flex: 1 1 100%; order: 9; } .tf-botoes details[open] > summary { margin-bottom: 0; } .tf-barra > h2 { margin-bottom: var(--e-2); } .tf-check { list-style: none; margin: 0; padding: 0; } .tf-check li { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--linha); } .tf-check li:last-child { border-bottom: 0; } .tf-check li form { display: inline-flex; margin: 0; } .tf-check-texto { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: var(--t-sm); } .tf-check li.feito .tf-check-texto { color: var(--tinta-fraca); } .tf-caixa { width: 22px; height: 22px; min-height: 0; padding: 0; flex: 0 0 auto; border: 2px solid var(--linha-forte); border-radius: 6px; background: var(--papel); display: inline-flex; align-items: center; justify-content: center; } button.tf-caixa:hover { background: var(--marca-suave); border-color: var(--marca); } .tf-caixa.marcada, button.tf-caixa.marcada:hover { background: var(--verde-600); border-color: var(--verde-600); } .tf-caixa.marcada::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .tf-h3 { font-size: var(--t-sm); font-weight: 700; margin: 16px 0 8px; color: var(--titulo); } .tf-regra { margin: 0; padding-left: 18px; font-size: var(--t-sm); display: flex; flex-direction: column; gap: 5px; } .tf-apoio { border: 1px solid var(--linha-media); background: var(--media-bg); border-radius: 10px; padding: 10px 12px; font-size: var(--t-sm); margin-bottom: 12px; overflow-wrap: anywhere; } .tf-apoio ul { margin: 6px 0; padding-left: 18px; } .tf-cond { margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--linha-forte); background: var(--papel-2); border-radius: 0 8px 8px 0; } .tf-series { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 8px; margin-bottom: 12px; } .tf-serie { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--papel-2); color: inherit; font-size: var(--t-sm); min-width: 0; overflow-wrap: anywhere; } .tf-serie:hover { text-decoration: none; border-color: var(--marca); } .tf-serie svg.ico { margin-top: 3px; color: var(--marca-clara); } @media (max-width: 700px) { .tf { grid-template-columns: minmax(0, 1fr); } .tf-quando { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .tf-acoes { justify-content: flex-start; } .tf-acoes .botao, .tf-acoes button { flex: 1 1 auto; } } /* ícone do título do cartão na cor do assunto (as telas antigas mantêm o azul) */ .h2-ico.tom-vermelho { --pt-cor: var(--vermelho-500); } .h2-ico.tom-ambar { --pt-cor: var(--ambar-500); } .h2-ico.tom-ciano { --pt-cor: var(--ciano-500); } .h2-ico.tom-roxo { --pt-cor: var(--roxo-500); } .h2-ico.tom-rosa { --pt-cor: var(--rosa-500); } .h2-ico.tom-laranja { --pt-cor: var(--laranja-500); } .h2-ico.tom-verde { --pt-cor: var(--esmeralda-500); } .h2-ico.tom-indigo { --pt-cor: var(--indigo-500); } .h2-ico.tom-azul { --pt-cor: var(--azul-500); } /* dois sub-itens seguidos no menu (Tarefas, Rotinas): sem o espaço que separa um sub-item do item seguinte */ .lateral nav a.sub:has(+ a.sub) { margin-bottom: 0; } /* campo de hora com a mesma aparência dos demais campos */ input[type=time] { padding: 6px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio-sm); font: inherit; font-size: var(--t-sm); background: var(--papel); color: var(--tinta); } /* conversa da equipe */ .cv-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .cv-msg { border: 1px solid var(--linha); border-radius: 12px; background: var(--papel-2); padding: 10px 12px; scroll-margin-top: 80px; min-width: 0; } .cv-msg.cv-resposta { margin-left: 34px; } .cv-msg.cv-nova { border-color: var(--linha-media); box-shadow: inset 3px 0 0 var(--media); } .cv-msg.cv-decisao { border-color: var(--linha-ok); background: var(--ok-bg); } .cv-msg.cv-alvo, .cv-msg:target { outline: 2px solid var(--foco); outline-offset: 2px; } .cv-cab { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; font-size: var(--t-sm); } .cv-avatar { width: 26px; height: 26px; font-size: 10.5px; } .cv-texto { white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0 0; font-size: var(--t-sm); line-height: 1.55; font-weight: 400; } .cv-mencao { font-weight: 700; color: var(--marca-clara); background: var(--marca-suave); border-radius: 5px; padding: 0 4px; } .cv-retirada { margin: 6px 0 0; font-style: italic; } .cv-anexos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .cv-anexo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--papel); font-size: var(--t-xs); max-width: 100%; overflow-wrap: anywhere; } .cv-virou { margin-top: 8px; padding: 6px 10px; border-radius: 8px; border: 1px dashed var(--linha-forte); font-size: var(--t-xs); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .cv-acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; } .cv-acoes form { margin: 0; } .cv-acoes summary { list-style: none; cursor: pointer; } .cv-acoes summary::-webkit-details-marker { display: none; } .cv-acoes details[open] { flex: 1 1 100%; order: 9; } .cv-form-mini { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--papel); } .cv-form-mini textarea, .cv-form textarea { width: 100%; resize: vertical; } .cv-form { border-top: 1px solid var(--linha); padding-top: 12px; } .cv-mencionar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .cv-decisoes { border: 1px solid var(--linha-ok); background: var(--ok-bg); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; font-size: var(--t-sm); } .cv-decisoes ul { margin: 6px 0 0; padding-left: 18px; } .cv-decisoes svg.ico { margin-right: 5px; } @media (max-width: 700px) { .cv-msg.cv-resposta { margin-left: 14px; } } /* gestão da equipe: barras de progresso, metas, feedback */ .pg { height: 10px; background: var(--neutro-bg); border: 1px solid var(--linha); border-radius: 999px; overflow: hidden; } .pg > span { display: block; height: 100%; background: var(--marca); border-radius: 999px; min-width: 2px; } .pg.pg-alerta > span { background: var(--vermelho-600); } .pg.pg-ok > span { background: var(--verde-600); } .eq-tabela th { white-space: nowrap; } .eq-tabela td.num { white-space: normal; min-width: 84px; } /* os detalhes quebram linha; a tabela cabe no cartão */ .eq-tabela td:first-child { min-width: 150px; } .eq-tabela tfoot th, .eq-tabela tfoot td { border-top: 2px solid var(--linha-forte); font-weight: 600; padding: var(--e-2) 10px; } .eq-tabela tfoot th { position: static; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--tinta); } .eq-redistribuir { margin-top: 12px; padding: 12px; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--papel-2); } .eq-metas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px; } .eq-meta-caixa { border: 1px solid var(--linha); border-radius: 12px; background: var(--papel-2); padding: 12px 14px; margin-bottom: 10px; min-width: 0; scroll-margin-top: 80px; } .eq-metas .eq-meta-caixa { margin-bottom: 0; } .eq-meta-caixa:target { outline: 2px solid var(--foco); outline-offset: 2px; } .eq-meta-topo { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; } .eq-meta-num { font-size: var(--t-sm); margin-top: 4px; } dl.eq-definicoes { grid-template-columns: 200px 1fr; } dl.eq-feedback { grid-template-columns: 190px 1fr; margin-top: 8px; } /* avisos */ .av.av-lida { background: transparent; } .av.av-lida .tf-titulo { font-weight: 500; } /* sino de avisos no cabeçalho */ .cabeca .tema.sino { position: relative; } .cabeca .tema.sino .n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--vermelho-600); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } /* leitura: quem só consulta um módulo ainda pode comentar e marcar avisos como lidos (não altera o cadastro) */ body.somente-leitura:not(.copia-local) main form.sempre[method="post"] { display: block !important; } body.somente-leitura:not(.copia-local) main form.sempre.em-linha[method="post"] { display: inline !important; } /* documentos na nuvem (30/09/2026): painel 'Mais' de cada documento numa linha inteira da tabela */ .doc-mais > td { background: var(--papel-2); white-space: normal; } .doc-mais-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 4px 18px; padding: 2px 0; } .doc-mais-grade > form { min-width: 0; } @media (max-width: 768px) { /* documentos: cartões no celular, como os prazos */ .tabela-docs { overflow: visible; } .tabela-docs table, .tabela-docs tbody, .tabela-docs tr, .tabela-docs td { display: block; width: 100%; } .tabela-docs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .tabela-docs tr { border: 1px solid var(--linha); border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 10px; background: var(--papel); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .tabela-docs tr.doc-mais { display: block; margin-top: -6px; } .tabela-docs tr[hidden] { display: none; } .tabela-docs tr.linha-venceu { border-left: 4px solid var(--alta); } .tabela-docs tr.linha-venceu td { background: transparent; } .tabela-docs td { border: 0; padding: 2px 0; white-space: normal; max-width: none; overflow: visible; text-overflow: clip; } .tabela-docs td::before { content: attr(data-rotulo); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--tinta-fraca); } .tabela-docs td.td-nome, .tabela-docs td.td-acoes, .tabela-docs tr.doc-mais td { grid-column: 1 / -1; } .tabela-docs td.td-nome::before, .tabela-docs td.td-acoes::before, .tabela-docs tr.doc-mais td::before { display: none; } .tabela-docs td.td-nome { font-size: var(--t-base); overflow-wrap: anywhere; } .tabela-docs td.td-acoes { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--linha); display: flex; flex-wrap: wrap; gap: 6px; } .tabela-docs tr.doc-mais > td { background: transparent; } } /* usuários e perfis (30/09/2026) */ fieldset.alcance-caixa { border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 12px 10px; margin: 8px 0; min-width: 0; } fieldset.alcance-caixa legend { padding: 0 4px; } .alcance-restrito { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding-left: 22px; } .alcance-restrito textarea { width: 100%; } .resumo-grupo { border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 8px 12px; min-width: 0; } .resumo-grupo ul { margin: 4px 0 0; padding-left: 18px; font-size: var(--t-sm); }