/* =========================================================================
TEMA "CEU" (09/10/2026) — repaginada geral, claro por padrao
Camada por cima do sistema.css, no lugar do tema-nightdesk.css. Pedido:
"da uma olhada se voce acha algum tema claro, que tenha menus modernos,
botoes animados, achar card que combina com dados dos colaboradores, eu
nao estou gostando com esses cards que mostra as informacoes la em folha
de pagamento entre outras, quero que tenha melhor aproveitamento da tela
... campos onde tem muitas subguias talvez ajuntar, de uma repaginada
geral".
- CLARO (padrao) = a identidade Cirrus do acervo do usuario
(/root/cirrus.zip, Uiverse Design; spec em docs/CIRRUS.md): ceu de
nuvens ao fundo, superficies brancas com fio de 1 px e sombra que quase
nao se ve, todo controle em pilula, tinta #0E1116 na acao principal e no
estado ativo, titulos em Inter Tight 700, numeros em Inter tabular.
- ESCURO = a paleta do Nightdesk (/root/nightdesk.zip) com as MESMAS
formas: grafite #1B1B1B sobre noite #0F1011, tinta clara invertida.
- Indicadores: barra compacta (rotulo, numero, variacao numa celula de
~64 px) no lugar dos cards grandes; Visao geral e Financeiro em linhas
por grupo (templates), sem grafico.
- Menu lateral flutuante com o item ativo numa pilula que DESLIZA do item
anterior ate o novo (tema.js); icones num circulo na cor da area.
- Guias com grupos (.guia-grupo): o grupo inativo abre um menu ao passar o
mouse; o ativo mostra os itens na propria linha.
- Botoes animados (Uiverse loud-chicken-53, adaptado): onda que enche a
partir do icone, icone que sai e volta, leve elevacao.
Animacoes decorativas NAO sao desligadas por "reduzir movimento": decisao
do TI de 04/09/2026 (muitos micros da empresa tem os efeitos desligados no
Windows). Nenhuma classe/id/JS antigo mudou. Voltar: tag visual-nightdesk.
========================================================================= */
/* --- Fontes: Inter (sistema.css) no corpo; Inter Tight so nos titulos ----- */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
src: url("../vendor/fonts/inter-tight/inter-tight-600-latin.f5af7a761c2b.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 600; font-display: swap;
src: url("../vendor/fonts/inter-tight/inter-tight-600-latin-ext.496654ac82a3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap;
src: url("../vendor/fonts/inter-tight/inter-tight-700-latin.f5af7a761c2b.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 700; font-display: swap;
src: url("../vendor/fonts/inter-tight/inter-tight-700-latin-ext.496654ac82a3.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* --- Tokens ------------------------------------------------------------------
Claro (Cirrus). Sinais com duas tintas: a VIVA para pontos, barras e
preenchimentos; a de TEXTO (mais escura) para letra sobre branco. */
:root, [data-bs-theme="light"] {
--ceu-pagina: #EDF2F7; --ceu-horizonte: #B8D4F1;
--ceu-sup: #FFFFFF; --ceu-afundado: #F3F6FA; --ceu-afundado-2: #E8EDF4; --ceu-realce: #F7F9FC;
--ceu-fio: #E3E8EE; --ceu-fio-suave: #EEF2F6; --ceu-fio-forte: #CFD7E1;
--ceu-tinta: #0E1116; --ceu-tinta-2: #2A3340; --ceu-corpo: #222B36; --ceu-nevoa: #5B6472; --ceu-suave: #8A93A3;
--ceu-sobre-tinta: #FFFFFF;
--ceu-sinal: #2E7DEF; --ceu-sinal-texto: #1E62C8; --ceu-sinal-fundo: rgba(46,125,239,.11);
--ceu-ok: #2BC48A; --ceu-ok-texto: #0B7A51; --ceu-ok-fundo: rgba(43,196,138,.15);
--ceu-atencao: #F2A007; --ceu-atencao-texto: #8A5600; --ceu-atencao-fundo: rgba(242,160,7,.15);
--ceu-perda: #E5484D; --ceu-perda-texto: #C02E34; --ceu-perda-fundo: rgba(229,72,77,.11);
--ceu-violeta: #7C5CFF; --ceu-violeta-texto: #5A3ED6; --ceu-violeta-fundo: rgba(124,92,255,.11);
--ceu-citrus: #FF7A3D;
--ceu-verde-acao: #12A26B; --ceu-verde-acao-2: #0C8657;
--ceu-sombra-1: 0 1px 1px rgba(14,17,22,.04), 0 20px 40px -24px rgba(14,17,22,.18);
--ceu-sombra-2: 0 1px 1px rgba(14,17,22,.04), 0 20px 40px -24px rgba(14,17,22,.22), 0 2px 6px rgba(14,17,22,.06);
--ceu-sombra-pop: 0 2px 6px rgba(14,17,22,.06), 0 24px 48px -16px rgba(14,17,22,.26);
--ceu-foco: 0 0 0 3px rgba(46,125,239,.28);
--ceu-fundo:
radial-gradient(62% 38% at 18% 78%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 62%),
radial-gradient(52% 34% at 82% 70%, rgba(255,255,255,.90) 0%, rgba(255,255,255,0) 60%),
radial-gradient(48% 30% at 50% 18%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, #C4DAF2 0%, #EDF2F7 72%);
--ceu-hachura: repeating-linear-gradient(45deg, var(--ceu-fio) 0 1px, transparent 1px 6px);
--ceu-linha-hover: rgba(14,17,22,.025);
--ceu-fonte: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--ceu-titulo: 'Inter Tight', 'Inter', 'Segoe UI', system-ui, sans-serif;
--ceu-curva: cubic-bezier(.23, 1, .32, 1); /* a do "Modern Button" (Uiverse loud-chicken-53) */
--ceu-dur: 180ms;
--ceu-r-cartao: 20px; --ceu-r-bloco: 14px; --ceu-r-sm: 10px; --ceu-r-check: 8px;
--ceu-controle: 36px;
/* menu lateral (a Personalizacao pode trocar --menu-fundo e as letras; o ativo e o "inverso" do menu) */
--menu-fundo: #FFFFFF; --menu-fundo-2: #FFFFFF; --menu-texto: #4B5563; --menu-texto-forte: #0E1116;
--menu-texto-fraco: #8A93A3; --menu-icone: #5B6472; --menu-borda: #E3E8EE; --menu-forca-cor: 100%;
--menu-ativo-fundo: rgba(14,17,22,.06); --menu-hover-fundo: #F3F6FA; --menu-marcador: #2E7DEF;
--menu-rolagem: #CFD7E1; --menu-contador-fundo: #EEF2F6; --menu-brilho: transparent;
/* apelidos do Nightdesk (--nd-*) e dos temas anteriores: regras e modulos ainda os usam */
--nd-canvas: var(--ceu-pagina); --nd-shell: var(--ceu-afundado); --nd-panel: var(--ceu-sup); --nd-raised: var(--ceu-afundado); --nd-raised-hover: var(--ceu-afundado-2);
--nd-hairline: var(--ceu-fio); --nd-hairline-strong: var(--ceu-fio-forte);
--nd-ink: var(--ceu-tinta); --nd-ink-2: var(--ceu-corpo); --nd-ink-muted: var(--ceu-nevoa); --nd-ink-faint: var(--ceu-suave); --nd-ink-inverse: var(--ceu-sobre-tinta);
--nd-gain: var(--ceu-ok-texto); --nd-loss: var(--ceu-perda-texto); --nd-progress: var(--ceu-sinal-texto); --nd-caution: var(--ceu-atencao-texto);
--nd-gain-fill: var(--ceu-ok-fundo); --nd-loss-fill: var(--ceu-perda-fundo); --nd-progress-fill: var(--ceu-sinal-fundo); --nd-caution-fill: var(--ceu-atencao-fundo);
--nd-hatch: var(--ceu-hachura); --nd-focus-ring: var(--ceu-foco); --nd-mono: var(--ceu-fonte); --nd-font: var(--ceu-fonte);
--r-fundo: var(--ceu-pagina); --r-superficie: var(--ceu-sup); --r-afundado: var(--ceu-afundado); --r-realce: var(--ceu-realce);
--r-borda: var(--ceu-fio); --r-borda-forte: var(--ceu-fio-forte); --r-divisor: var(--ceu-fio-suave);
--r-texto: var(--ceu-tinta); --r-texto-2: var(--ceu-corpo); --r-texto-3: var(--ceu-nevoa); --r-texto-4: var(--ceu-suave);
--r-verde-texto: var(--ceu-ok-texto); --r-alerta-texto: var(--ceu-atencao-texto); --r-erro-texto: var(--ceu-perda-texto);
--r-alerta-suave: var(--ceu-atencao-fundo); --r-erro-suave: var(--ceu-perda-fundo); --r-sucesso-suave: var(--ceu-ok-fundo);
--r-alerta-borda: rgba(242,160,7,.45); --r-erro-borda: rgba(229,72,77,.4); --r-sucesso-borda: rgba(43,196,138,.45);
--r-raio-sm: var(--ceu-r-sm); --r-raio: var(--ceu-r-bloco); --r-raio-lg: var(--ceu-r-cartao); --r-raio-xl: 28px;
--r-sombra-repouso: var(--ceu-sombra-1); --r-sombra-flutua: var(--ceu-sombra-pop); --r-foco: var(--ceu-foco);
--r-curva: var(--ceu-curva); --r-rapido: var(--ceu-dur); --r-medio: 260ms; --r-fonte: var(--ceu-fonte); --r-mono: var(--ceu-fonte);
--real-verde: var(--ceu-ok-texto); --real-verde-escuro: var(--ceu-ok-texto); --real-verde-vivo: var(--ceu-ok); --real-verde-suave: var(--ceu-ok-fundo);
--real-laranja: var(--ceu-citrus); --real-vermelho: var(--ceu-perda); --real-dourado: var(--ceu-atencao); --real-grafite: var(--ceu-tinta); --real-cinza: var(--ceu-nevoa);
--c-sky: var(--ceu-pagina); --c-cloud: var(--ceu-sup); --c-sunken: var(--ceu-afundado); --c-ink: var(--ceu-tinta);
--c-deep: var(--ceu-corpo); --c-mist: var(--ceu-nevoa); --c-soft: var(--ceu-suave); --c-edge: var(--ceu-fio); --c-edge-soft: var(--ceu-fio-suave);
--c-signal: var(--ceu-sinal); --c-citrus: var(--ceu-citrus); --c-meadow: var(--ceu-ok);
--a-pessoas: #14A3A1; --a-recrutamento: #FF7A3D; --a-selecao: #4B93F5; --a-entrevistas: #7C5CFF;
--a-financeiro: #2BC48A; --a-riscos: #E5533D; --a-analise: #D9479A; --a-admin: #5B6472;
/* tokens do sistema.css remapeados */
--fonte-corpo: var(--ceu-fonte); --fonte-display: var(--ceu-titulo); --fonte-mono: var(--ceu-fonte);
--fundo: var(--ceu-pagina); --superficie: var(--ceu-sup); --superficie-2: var(--ceu-afundado); --superficie-3: var(--ceu-afundado-2); --superficie-elevada: var(--ceu-sup);
--borda: var(--ceu-fio); --borda-forte: var(--ceu-fio-forte);
--texto: var(--ceu-tinta); --texto-2: var(--ceu-nevoa); --texto-3: var(--ceu-suave); --texto-invertido: var(--ceu-sobre-tinta);
--primaria-900: #050608; --primaria-800: var(--ceu-tinta); --primaria-700: var(--ceu-tinta); --primaria-600: var(--ceu-tinta); --primaria-500: var(--ceu-tinta-2);
--primaria-400: var(--ceu-nevoa); --primaria-300: var(--ceu-suave); --primaria-200: var(--ceu-afundado-2); --primaria-100: var(--ceu-afundado); --primaria-50: var(--ceu-afundado);
--primaria-rgb: 14, 17, 22;
--sucesso: var(--ceu-ok-texto); --sucesso-suave: var(--ceu-ok-fundo); --sucesso-rgb: 43, 196, 138;
--alerta: var(--ceu-atencao-texto); --alerta-suave: var(--ceu-atencao-fundo); --alerta-rgb: 242, 160, 7;
--erro: var(--ceu-perda-texto); --erro-suave: var(--ceu-perda-fundo); --erro-rgb: 229, 72, 77;
--info: var(--ceu-sinal-texto); --info-suave: var(--ceu-sinal-fundo); --info-rgb: 46, 125, 239;
--roxo: var(--ceu-violeta-texto); --roxo-suave: var(--ceu-violeta-fundo);
--neutro: var(--ceu-nevoa); --neutro-suave: var(--ceu-afundado);
--raio-xs: 6px; --raio-sm: var(--ceu-r-sm); --raio: var(--ceu-r-bloco); --raio-lg: var(--ceu-r-cartao); --raio-pill: 999px;
--sombra-1: var(--ceu-sombra-1); --sombra-2: var(--ceu-sombra-2); --sombra-3: var(--ceu-sombra-pop); --sombra-4: var(--ceu-sombra-pop); --sombra-foco: var(--ceu-foco);
--bs-link-color: var(--ceu-sinal-texto); --bs-link-hover-color: var(--ceu-tinta);
--bs-body-font-family: var(--ceu-fonte); --bs-body-color: var(--ceu-corpo); --bs-body-bg: var(--ceu-pagina);
--bs-border-color: var(--ceu-fio);
color-scheme: light;
}
/* Escuro: a paleta do Nightdesk nas mesmas formas (noite em vez de ceu) */
[data-bs-theme="dark"] {
--ceu-pagina: #0F1011; --ceu-horizonte: #17191D;
--ceu-sup: #1B1B1B; --ceu-afundado: #232323; --ceu-afundado-2: #2C2C2C; --ceu-realce: #202020;
--ceu-fio: #2C2C2C; --ceu-fio-suave: #262626; --ceu-fio-forte: #3A3A3A;
--ceu-tinta: #EDEDED; --ceu-tinta-2: #FFFFFF; --ceu-corpo: #C9C9C9; --ceu-nevoa: #8A8A8A; --ceu-suave: #5E5E5E;
--ceu-sobre-tinta: #121212;
--ceu-sinal: #2F7FF0; --ceu-sinal-texto: #6AA6FF; --ceu-sinal-fundo: rgba(47,127,240,.18);
--ceu-ok: #3CC45A; --ceu-ok-texto: #5CD679; --ceu-ok-fundo: rgba(60,196,90,.16);
--ceu-atencao: #E0B43A; --ceu-atencao-texto: #E9C45E; --ceu-atencao-fundo: rgba(224,180,58,.16);
--ceu-perda: #E5484D; --ceu-perda-texto: #FF6B70; --ceu-perda-fundo: rgba(229,72,77,.16);
--ceu-violeta: #9B87FF; --ceu-violeta-texto: #B3A3FF; --ceu-violeta-fundo: rgba(155,135,255,.16);
--ceu-verde-acao: #2FA84E; --ceu-verde-acao-2: #3CC45A;
--ceu-sombra-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -24px rgba(0,0,0,.7);
--ceu-sombra-2: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -20px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.35);
--ceu-sombra-pop: 0 2px 6px rgba(0,0,0,.4), 0 24px 48px -16px rgba(0,0,0,.7);
--ceu-foco: 0 0 0 3px rgba(237,237,237,.28);
--ceu-fundo:
radial-gradient(62% 38% at 18% 78%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 62%),
radial-gradient(52% 34% at 82% 70%, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 60%),
radial-gradient(48% 30% at 50% 18%, rgba(255,255,255,.025) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, #17191D 0%, #0F1011 70%);
--ceu-linha-hover: rgba(255,255,255,.025);
--menu-fundo: #1B1B1B; --menu-fundo-2: #1B1B1B; --menu-texto: #A8A8A8; --menu-texto-forte: #EDEDED;
--menu-texto-fraco: #6E6E6E; --menu-icone: #8A8A8A; --menu-borda: #2C2C2C;
--menu-ativo-fundo: rgba(255,255,255,.08); --menu-hover-fundo: #262626; --menu-marcador: #6AA6FF;
--menu-rolagem: #3A3A3A; --menu-contador-fundo: #2C2C2C;
--r-alerta-borda: rgba(224,180,58,.4); --r-erro-borda: rgba(229,72,77,.45); --r-sucesso-borda: rgba(60,196,90,.4);
--primaria-900: #FFFFFF; --primaria-rgb: 237, 237, 237;
--sucesso-rgb: 60, 196, 90; --alerta-rgb: 224, 180, 58; --erro-rgb: 229, 72, 77; --info-rgb: 47, 127, 240;
--bs-link-color: var(--ceu-sinal-texto); --bs-link-hover-color: #FFFFFF;
color-scheme: dark;
}
/* --- Pagina e tipografia --------------------------------------------------------- */
html { background: var(--ceu-pagina); }
body, [data-bs-theme="light"] body, [data-bs-theme="dark"] body {
background-color: var(--ceu-pagina) !important; background-image: var(--ceu-fundo) !important;
background-repeat: no-repeat !important; background-attachment: fixed !important; background-size: cover !important;
color: var(--ceu-corpo); font-family: var(--ceu-fonte); font-size: 14px; letter-spacing: 0; line-height: 1.5;
font-feature-settings: 'cv11' 1, 'ss01' 1; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(46,125,239,.18); color: inherit; }
:focus-visible { outline: 0; box-shadow: var(--ceu-foco); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .modal-title, .card-title {
font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.015em; word-spacing: .06em; text-transform: none; color: var(--ceu-tinta);
}
.card-header, fieldset.bloco-form > legend, .kpi-linha-nome, .cartao-topo .saudacao-texto, .clima-cidade { word-spacing: .06em; }
.cabecalho-pagina { margin-bottom: 16px; gap: .75rem 1.5rem; align-items: flex-end; }
.cabecalho-pagina .titulo h1, .conteudo h1.h4 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.cabecalho-pagina .titulo p, .conteudo h1.h4 + .small { color: var(--ceu-nevoa); font-size: 13px; margin: .3rem 0 0; max-width: 80ch; }
.cabecalho-pagina .titulo h1 .bi { color: var(--ceu-suave) !important; }
.contagem-titulo { display: inline-grid; place-items: center; min-width: 26px; height: 22px; padding: 0 8px; margin-left: 6px; vertical-align: 4px;
border-radius: 999px; background: var(--ceu-sup); border: 1px solid var(--ceu-fio); color: var(--ceu-nevoa); font: 600 12px/1 var(--ceu-fonte); letter-spacing: 0; }
/* sem caixa alta nem micro-rotulos espacados (regra do Cirrus) */
.secao-titulo, .form-label, .stat-label, .dropdown-header, .publico-sobretitulo, .menu-grupo-titulo, .paleta-grupo, .titulo-grupo-fin, .table thead th, legend {
text-transform: none !important; letter-spacing: 0 !important;
}
.secao-titulo, .form-label, .stat-label, .dropdown-header, .publico-sobretitulo {
font-family: var(--ceu-fonte) !important; font-weight: 500 !important; color: var(--ceu-nevoa) !important; font-size: 12.5px !important;
}
.secao-titulo { color: var(--ceu-tinta) !important; font-family: var(--ceu-titulo) !important; font-size: 15px !important; font-weight: 700 !important; }
.form-label { margin-bottom: .35rem; }
code, kbd, .matricula, .nd-num, .valor, .valor-moeda, .saudacao-data, .clima-graus, .variacao-card, .contador, .contagem-subguia, .protocolo, .relogio, [data-relogio] {
font-variant-numeric: tabular-nums;
}
code { color: var(--ceu-corpo); background: var(--ceu-afundado); border: 1px solid var(--ceu-fio); border-radius: 6px; padding: .05em .4em; font-size: .88em; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }
kbd { background: var(--ceu-sup); color: var(--ceu-nevoa); border: 1px solid var(--ceu-fio); border-radius: 6px; font-size: 11px; padding: .1em .45em; box-shadow: 0 1px 0 var(--ceu-fio); }
a { color: var(--ceu-sinal-texto); text-decoration: none; }
a:hover { color: var(--ceu-tinta); text-decoration: underline; text-decoration-color: var(--ceu-fio-forte); text-underline-offset: 3px; }
.btn, .menu-item, .guia, .guia-grupo-titulo, .subguia, .nav-link, .page-link, .dropdown-item, .list-group-item-action, .paleta-item, .card-header a.btn, .faixa-indicadores > a, .card-traco, .menu-marca, .cartao-indicador, .kpi-linha-ver { text-decoration: none !important; }
.text-success { color: var(--ceu-ok-texto) !important; }
.text-warning { color: var(--ceu-atencao-texto) !important; }
.text-danger { color: var(--ceu-perda-texto) !important; }
.text-info, .text-primary { color: var(--ceu-sinal-texto) !important; }
.text-secondary, .text-muted, .text-body-secondary { color: var(--ceu-nevoa) !important; }
.text-success-emphasis { color: var(--ceu-ok-texto) !important; } .text-warning-emphasis { color: var(--ceu-atencao-texto) !important; }
.text-danger-emphasis { color: var(--ceu-perda-texto) !important; } .text-info-emphasis, .text-primary-emphasis { color: var(--ceu-sinal-texto) !important; }
.bg-body-tertiary, .bg-light { background-color: var(--ceu-afundado) !important; }
hr { border-color: var(--ceu-fio); opacity: 1; }
/* =========================================================================
CASCA: menu lateral flutuante, topo sobre o ceu, conteudo
========================================================================= */
.app { background: transparent; }
.menu-lateral {
background: var(--menu-fundo) !important; background-image: none !important; color: var(--menu-texto);
border: 1px solid var(--menu-borda) !important; box-shadow: var(--ceu-sombra-1);
inset: 0 auto 0 0; height: auto; padding: 0 0 8px; overflow-y: auto; overflow-x: hidden; border-radius: 0;
/* o espaco da barra de rolagem fica reservado dos DOIS lados: o item selecionado fica centralizado no painel,
role ou nao role (09/10/2026, relato: "quando o menu esta selecionado, nao esta centralizado a marcacao") */
scrollbar-gutter: stable both-edges;
transition: width var(--r-medio) var(--ceu-curva), flex-basis var(--r-medio) var(--ceu-curva), transform var(--r-medio) var(--ceu-curva);
}
.menu-lateral::before, .menu-lateral::after { display: none !important; content: none !important; }
.menu-lateral .menu-rolagem { position: relative; flex: 0 0 auto; overflow: visible; padding: 4px 0 8px; }
.menu-lateral .menu-rodape { flex: 0 0 auto; margin-top: auto; }
.area { margin-left: var(--largura-menu); background: transparent; min-height: 100vh; transition: margin-left var(--r-medio) var(--ceu-curva); }
@media (min-width: 992px) {
.menu-lateral { inset: 12px auto 12px 12px; border-radius: 24px; }
.area { margin-left: calc(var(--largura-menu) + 12px); }
body.menu-compacto .area { margin-left: calc(var(--largura-menu-compacto) + 12px); }
}
/* Barra de rolagem no estilo do tema (09/10/2026, pedido: "no menu lateral coloque a barra de rolagem no
estilo do tema"): capsula fina que nao encosta nas pontas arredondadas do painel, mais forte com o mouse
em cima. Vale tambem para as outras areas com rolagem interna (paleta, chat, listas, tabelas). No Chrome
os pseudo-elementos ::-webkit-scrollbar so valem com scrollbar-width/scrollbar-color em auto (o
sistema.css poe thin em todo elemento); no Firefox fica a barra fina padrao, na cor do tema. */
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub) {
scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ceu-tinta) 24%, transparent) transparent;
}
.menu-lateral { scrollbar-color: color-mix(in srgb, var(--menu-texto-forte) 24%, transparent) transparent; }
@supports selector(::-webkit-scrollbar) {
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub) { scrollbar-width: auto; scrollbar-color: auto; }
}
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-track { background: transparent; margin: 10px; }
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-thumb {
min-height: 44px; min-width: 44px; border: 4px solid transparent; background-clip: padding-box; border-radius: 999px;
background-color: color-mix(in srgb, var(--ceu-tinta) 16%, transparent);
}
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub):hover::-webkit-scrollbar-thumb {
background-color: color-mix(in srgb, var(--ceu-tinta) 28%, transparent);
}
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-thumb:hover {
border-width: 3px; background-color: color-mix(in srgb, var(--ceu-tinta) 42%, transparent);
}
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-thumb:active {
border-width: 3px; background-color: color-mix(in srgb, var(--ceu-tinta) 58%, transparent);
}
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
:is(.menu-lateral, .paleta-lista, .chat-conf-corpo, .assistente-conversa, .lista-setores, .select-bonito-lista, .matriz-rolagem,
.memoria-calculo, .ouv-mensagens, .menu-registrar, .dropdown-menu, .table-responsive, .guia-sub)::-webkit-scrollbar-corner { background: transparent; }
/* no menu: a cor acompanha as letras do menu (Personalizacao) e o trilho foge das pontas de canto 24 */
.menu-lateral::-webkit-scrollbar-track { margin: 26px 0; }
.menu-lateral::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--menu-texto-forte) 14%, transparent); }
.menu-lateral:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--menu-texto-forte) 26%, transparent); }
.menu-lateral::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--menu-texto-forte) 40%, transparent); }
.menu-lateral::-webkit-scrollbar-thumb:active { background-color: color-mix(in srgb, var(--menu-texto-forte) 58%, transparent); }
/* marca */
.menu-marca { padding: 16px 15px 12px; border-bottom: 0 !important; gap: 12px; min-height: 0; color: var(--menu-texto-forte); }
.menu-marca .simbolo { border-radius: 12px; background: #fff; padding: 2px; box-shadow: 0 0 0 1px var(--menu-borda); width: 36px; height: 36px; }
.menu-marca .marca-texto strong { font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.01em; color: var(--menu-texto-forte); font-size: 16px; }
.menu-marca .marca-texto .desc { color: var(--menu-texto-fraco); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* grupos */
.menu-grupo-titulo {
margin: 0; padding: 14px 15px 5px !important; border: 0;
font-family: var(--ceu-fonte) !important; font-size: 11.5px !important; font-weight: 600 !important; color: var(--menu-texto-fraco) !important;
}
.menu-grupo-titulo:first-child { padding-top: 6px !important; }
.menu-rolagem .menu-grupo-titulo { position: relative; z-index: 1; }
/* itens: pilula de 38 px, icone num circulo na cor da area; ativo = o "inverso" do menu (tinta no claro) */
.menu-item {
position: relative; z-index: 1; margin: 1px 10px; padding: 0 12px 0 5px; min-height: 38px; border-radius: 999px; border: 0; box-shadow: none; transform: none;
background: transparent; color: var(--menu-texto); font-weight: 500; font-size: 13.5px; gap: 10px;
transition: background var(--ceu-dur) var(--ceu-curva), color var(--ceu-dur) var(--ceu-curva);
}
.menu-item + .menu-item { margin-top: 2px; }
.menu-item .bi {
width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; font-size: 14px; border-radius: 50%; border: 0;
background: color-mix(in srgb, var(--cor-item) 15%, transparent) !important; color: var(--cor-item) !important; box-shadow: none !important;
transition: transform .45s var(--ceu-curva), background var(--ceu-dur), color var(--ceu-dur);
}
.menu-item:hover { background: var(--menu-hover-fundo); color: var(--menu-texto-forte); transform: none; box-shadow: none; }
.menu-item:hover .bi { transform: scale(1.1) rotate(-8deg); }
.menu-item.ativo, .menu-item.ativo:hover { background: var(--menu-texto-forte); color: var(--menu-fundo); font-weight: 600; box-shadow: var(--ceu-sombra-2); transform: none; }
.menu-item.ativo .bi { background: color-mix(in srgb, var(--menu-fundo) 16%, transparent) !important; color: var(--menu-fundo) !important; transform: none; }
.menu-item.ativo::before, .menu-item::before { display: none !important; content: none !important; }
.menu-item.ativo > span { color: inherit; }
.menu-item .contador { margin-left: auto; background: var(--menu-contador-fundo); color: var(--menu-texto-forte); border: 0; border-radius: 999px; padding: 0 7px; height: 20px; line-height: 20px; font-size: 11px; font-weight: 600; }
.menu-item.ativo .contador { background: color-mix(in srgb, var(--menu-fundo) 20%, transparent); color: var(--menu-fundo); }
.menu-item .externo { font-size: 11px; color: var(--menu-texto-fraco); width: auto !important; height: auto !important; background: none !important; flex: none !important; margin-left: auto; }
/* cores por area (claro: tons fortes para o circulo de 15%; o escuro usa as do sistema.css) */
[data-bs-theme="light"] .menu-item[data-cor="azul"] { --cor-item: #2E7DEF; }
[data-bs-theme="light"] .menu-item[data-cor="ambar"] { --cor-item: #D98200; }
[data-bs-theme="light"] .menu-item[data-cor="lima"] { --cor-item: #4E9A06; }
[data-bs-theme="light"] .menu-item[data-cor="ceu"] { --cor-item: #0B8BD3; }
[data-bs-theme="light"] .menu-item[data-cor="violeta"] { --cor-item: #7C5CFF; }
[data-bs-theme="light"] .menu-item[data-cor="agua"] { --cor-item: #0E9896; }
[data-bs-theme="light"] .menu-item[data-cor="verde"] { --cor-item: #12A26B; }
[data-bs-theme="light"] .menu-item[data-cor="vermelho"] { --cor-item: #E5484D; }
[data-bs-theme="light"] .menu-item[data-cor="rosa"] { --cor-item: #D9479A; }
[data-bs-theme="light"] .menu-item[data-cor="laranja"] { --cor-item: #F06A26; }
[data-bs-theme="light"] .menu-item[data-cor="ardosia"] { --cor-item: #5B6472; }
[data-bs-theme="light"] .menu-item[data-cor="indigo"] { --cor-item: #4F46E5; }
/* a pilula que desliza do item anterior ate o ativo, so durante o deslize (tema.js); parada, o fundo e do proprio item */
.deslize {
position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none;
background: var(--menu-texto-forte); box-shadow: var(--ceu-sombra-2); opacity: 0;
}
.deslize.pronto { opacity: 1; }
.tem-deslize .menu-item.ativo, .tem-deslize .menu-item.ativo:hover { background: transparent; box-shadow: none; }
/* rodape: perfil + recolher */
.menu-rodape { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--menu-borda); padding: 10px; margin: 0 10px; }
.menu-rodape .menu-perfil { order: 2; }
.menu-recolher {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 12px 0 5px; min-height: 34px; border: 0; border-radius: 999px;
background: transparent; color: var(--menu-texto-fraco); font-size: 12.5px; font-weight: 500; cursor: pointer; order: 1; font-family: inherit;
}
.menu-recolher:hover { background: var(--menu-hover-fundo); color: var(--menu-texto-forte); }
.menu-recolher .bi { width: 28px; text-align: center; font-size: 14px; transition: transform var(--r-medio) var(--ceu-curva); }
.menu-perfil .menu-usuario {
width: 100%; border-radius: 18px; border: 1px solid var(--menu-borda); background: var(--menu-hover-fundo);
color: var(--menu-texto-forte); box-shadow: none; transform: none; padding: 7px 10px 7px 7px; font-size: 13px; gap: 10px;
transition: border-color var(--ceu-dur), background var(--ceu-dur);
}
.menu-perfil .menu-usuario:hover { border-color: var(--ceu-fio-forte); background: var(--menu-fundo); transform: none; box-shadow: var(--ceu-sombra-1); }
.menu-perfil .menu-usuario .nome { color: var(--menu-texto-forte); font-weight: 600; } .menu-perfil .menu-usuario .papel { color: var(--menu-texto-fraco); font-size: 11px; }
.menu-perfil .avatar-inicial, .avatar-inicial { border-radius: 50%; background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); border: 0; font-weight: 600; }
/* menu recolhido = trilho de icones (rail do Cirrus): circulos de 40 px */
body.menu-compacto .menu-item { margin: 2px auto; width: 44px; min-height: 44px; justify-content: center; padding: 0; }
body.menu-compacto .menu-item .bi { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
body.menu-compacto .menu-recolher { justify-content: center; padding: 0; }
body.menu-compacto .menu-rodape { margin: 0; padding: 10px 0; }
body.menu-compacto .menu-perfil .menu-usuario { justify-content: center; padding: 6px 0; border-radius: 999px; }
body.menu-compacto .menu-perfil .menu-usuario .info, body.menu-compacto .menu-perfil .menu-usuario .bi-chevron-up { display: none; }
body.menu-compacto .menu-marca { padding: 16px 0 10px; justify-content: center; }
body.menu-compacto .menu-grupo-titulo { margin: 10px 8px 4px; font-size: 0 !important; height: 1px; padding: 0 !important; background: var(--menu-borda); }
.menu-fundo-mobile { background: rgba(14,17,22,.35); backdrop-filter: blur(2px); }
/* --- Topo: transparente sobre o ceu; ao rolar, o mesmo ceu cobre o conteudo -------------- */
.topo {
background: transparent !important; border-bottom: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
padding: 10px 24px 6px; min-height: var(--altura-topo); position: sticky; top: 0;
}
/* fundo dos blocos fixos = a MESMA receita do body, presa a janela: pixel identico ao ceu (nao parece faixa) */
.topo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.topo::before, .guias-linha.guias-fixas, [data-fixo], .cabecalho-pagina[data-fixo] {
background-color: var(--ceu-pagina) !important; background-image: var(--ceu-fundo) !important;
background-repeat: no-repeat !important; background-attachment: fixed !important; background-size: cover !important;
}
@media (min-width: 992px) and (min-height: 600px) {
[data-fixo], .cabecalho-pagina[data-fixo] { margin-left: calc(-1 * var(--conteudo-pad-x, 24px)); margin-right: calc(-1 * var(--conteudo-pad-x, 24px)); padding-left: var(--conteudo-pad-x, 24px); padding-right: var(--conteudo-pad-x, 24px); }
}
/* armadilha (07/10): transform/animacao poe o bloco numa camada e o Chrome desenha o fixed como local */
.guias-linha.guias-fixas, [data-fixo], .cabecalho-pagina[data-fixo] { animation: none !important; border-radius: 0; box-shadow: none; }
.cartao-topo { display: inline-flex; align-items: center; gap: 14px; padding: 0; min-height: 40px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.cartao-topo::before { display: none !important; }
.cartao-topo .saudacao-texto { font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.01em; color: var(--ceu-tinta); font-size: 17px; }
.cartao-topo .saudacao-data { color: var(--ceu-nevoa); font-size: 12px; }
.cartao-topo-clima:empty { display: none; }
.topo-acoes { gap: 8px; }
.topo-acoes .btn-icone, .btn-icone {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ceu-fio); background: var(--ceu-sup); color: var(--ceu-tinta); box-shadow: var(--ceu-sombra-1);
transition: background var(--ceu-dur), transform .35s var(--ceu-curva), box-shadow var(--ceu-dur);
}
.btn-icone:hover { background: var(--ceu-sup); color: var(--ceu-tinta); border-color: var(--ceu-fio-forte); transform: translateY(-1px); box-shadow: var(--ceu-sombra-2); }
.btn-icone:hover > .bi { animation: ceu-balanco .5s var(--ceu-curva); }
.btn-icone .badge { border-radius: 999px; background: var(--ceu-perda) !important; color: #fff !important; font-size: 10px; padding: 2px 5px; height: auto; line-height: 1.1; }
.btn-icone .badge::before { display: none !important; }
@keyframes ceu-balanco { 0% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } 100% { transform: rotate(0); } }
/* clima: pilula branca; o cartao flutua */
.clima-topo { position: relative; display: none; }
.clima-topo.pronto, .cartao-topo.clima-topo, .cartao-topo.clima-topo.pronto { display: inline-flex; } /* a saudacao aparece sempre; so o clima espera (12/10/2026) */
.clima-topo .clima-card { left: 0; right: auto; }
.clima-resumo, .clima-pilula {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 6px; border: 1px solid var(--ceu-fio); border-radius: 999px;
cursor: pointer; color: var(--ceu-nevoa); background: var(--ceu-sup); font-size: 12px; white-space: nowrap; font-family: inherit; box-shadow: var(--ceu-sombra-1);
}
.clima-resumo:hover { border-color: var(--ceu-fio-forte); }
.clima-resumo strong, .clima-pilula strong { font-weight: 600; color: var(--ceu-tinta); }
.clima-resumo span, .clima-pilula span { color: var(--ceu-nevoa); }
.clima-mini { width: 20px; height: 20px; }
.clima-card {
position: absolute; right: 0; top: calc(100% + 8px); z-index: 1060; width: 300px; border-radius: 20px; padding: 16px;
overflow: hidden; isolation: isolate; color: var(--ceu-tinta); background: var(--ceu-sup); border: 1px solid var(--ceu-fio); box-shadow: var(--ceu-sombra-pop);
opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--ceu-dur), transform .35s var(--ceu-curva), visibility var(--ceu-dur);
}
.clima-topo:hover .clima-card, .clima-topo:focus-within .clima-card { opacity: 1; visibility: visible; transform: none; }
.clima-card p { margin: 0; }
.clima-brilhos, .clima-borda { display: none; }
.clima-cabeca { margin-bottom: 10px; }
.clima-cidade { font-family: var(--ceu-titulo); font-size: 15px; font-weight: 700; }
.clima-data { font-size: 12px; color: var(--ceu-nevoa); }
.clima-meio { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.clima-icone { width: 52px; height: 52px; }
.clima-temp { text-align: right; }
.clima-graus { font-family: var(--ceu-titulo); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ceu-tinta); }
.clima-desc { font-size: 12px; color: var(--ceu-nevoa); }
.clima-detalhes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 12px; border-radius: 14px; background: var(--ceu-afundado); border: 1px solid var(--ceu-fio-suave); }
.clima-detalhes p { font-size: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ceu-corpo); }
.clima-detalhes .bi { color: var(--ceu-nevoa); }
.clima-detalhes span { color: var(--ceu-nevoa); }
.clima-fonte { margin-top: 10px !important; font-size: 11px; color: var(--ceu-suave); }
.clima-mini .astro, .clima-icone .astro { fill: #F5A524; }
.clima-lua .astro { fill: var(--ceu-nevoa); }
.raios line, .gotas line, .raio { stroke: #F5A524; stroke-width: 2; fill: none; stroke-linecap: round; }
.gotas line { stroke: var(--ceu-sinal); }
.nuvem { fill: rgba(138,147,163,.35); }
/* --- Conteudo ------------------------------------------------------------------------ */
.conteudo { --conteudo-pad-x: 24px; padding: 10px var(--conteudo-pad-x) 72px; max-width: none; }
.conteudo > *, .conteudo .row > [class*="col-"] { animation: none !important; }
.rodape-app { border-top: 0; color: var(--ceu-suave); font-size: 12px; background: transparent; padding-left: 24px; padding-right: 24px; }
/* =========================================================================
GUIAS (segunda navegacao): capsula branca flutuante; ativa em tinta.
Grupos (.guia-grupo, 09/10/2026, pedido "campos onde tem muitas subguias
talvez ajuntar"): o titulo leva ao primeiro item; parado em cima, abre o
menu com os itens; quando um item do grupo e o ativo, o grupo abre NA
LINHA (rotulo + itens), sem esconder nada. Links continuam a.guia (o
select do celular e os testes os acham do mesmo jeito).
========================================================================= */
.guias-linha { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 18px; }
.guias-linha > .guias { margin: 0; }
.guias {
display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; width: fit-content; max-width: 100%;
margin: 0 0 18px; padding: 4px; border: 1px solid var(--ceu-fio); border-radius: 22px; background: var(--ceu-sup); box-shadow: var(--ceu-sombra-1);
overflow: visible;
}
/* Guias fixas ao rolar (Bonificacao): a faixa INTEIRA fica presa, com o mesmo ceu do fundo, e a capsula vai
dentro dela (09/10/2026, relato: "quando eu vou girando o scroll fica aparecendo parte la em cima atras do
card de setores, plano de bonificacao etc" — antes so a capsula era fixa e o conteudo passava ao lado e
no vao de baixo). A faixa estica sobre o respiro lateral do conteudo (--conteudo-pad-x). */
.guias-linha.guias-fixas {
position: sticky; top: var(--altura-topo); z-index: 1020; display: flex; width: auto; max-width: none;
margin: 0 calc(-1 * var(--conteudo-pad-x, 24px)) 6px; padding: 2px var(--conteudo-pad-x, 24px) 12px;
}
.guias-linha.guias-fixas > .guias { margin: 0; }
.guia, .guia-grupo-titulo {
display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; flex: 0 0 auto; margin: 0;
background: transparent; color: var(--ceu-nevoa); border: 0; border-radius: 999px;
font-weight: 500; font-size: 13px; white-space: nowrap; box-shadow: none; transform: none; cursor: pointer;
transition: background var(--ceu-dur), color var(--ceu-dur), box-shadow var(--ceu-dur);
}
.guia .bi, .guia-grupo-titulo .bi { color: inherit; font-size: 14px; opacity: .85; transition: transform .45s var(--ceu-curva); }
.guia::after { display: none !important; }
.guia:hover, .guia-grupo-titulo:hover { background: var(--ceu-afundado); color: var(--ceu-tinta); transform: none; box-shadow: none; }
.guia:hover > .bi:first-child, .guia-grupo-titulo:hover > .bi:first-child { transform: scale(1.12) rotate(-6deg); }
.guia.ativa, [data-bs-theme="dark"] .guia.ativa, [data-bs-theme="light"] .guia.ativa, .guia.ativa:hover {
background: var(--ceu-tinta) !important; color: var(--ceu-sobre-tinta) !important; font-weight: 600; box-shadow: var(--ceu-sombra-2);
}
.guia.ativa .bi { opacity: 1; color: inherit; }
@keyframes ceu-pop { 0% { transform: scale(.88); opacity: .5; } 100% { transform: none; opacity: 1; } }
.guia .contador { background: var(--ceu-afundado-2); color: var(--ceu-tinta); border: 0; border-radius: 999px; padding: 0 7px; height: 20px; line-height: 20px; font-size: 11px; font-weight: 600; }
.guia.ativa .contador { background: rgba(255,255,255,.18); color: inherit; }
[data-bs-theme="dark"] .guia.ativa .contador { background: rgba(0,0,0,.14); }
.guias-select .form-select { border-radius: 999px; }
/* grupo */
.guia-grupo { position: relative; display: inline-flex; align-items: center; }
.guia-grupo-titulo .seta { font-size: 10px !important; opacity: .7; margin-left: -2px; transition: transform .35s var(--ceu-curva); }
.guia-grupo:hover .guia-grupo-titulo .seta, .guia-grupo:focus-within .guia-grupo-titulo .seta { transform: rotate(180deg); }
.guia-sub {
position: absolute; z-index: 1035; top: calc(100% + 8px); left: 0; min-width: 210px;
display: flex; flex-direction: column; gap: 2px; padding: 6px;
background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: 18px; box-shadow: var(--ceu-sombra-pop);
opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left;
transition: opacity .18s ease, transform .35s var(--ceu-curva), visibility .18s;
}
.guia-sub::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* ponte: o mouse nao "cai" no vao */
.guia-grupo:hover > .guia-sub, .guia-grupo:focus-within > .guia-sub { opacity: 1; visibility: visible; transform: none; }
.guia-sub .guia { width: 100%; justify-content: flex-start; height: 36px; border-radius: 12px; color: var(--ceu-corpo); }
.guia-sub .guia:hover { background: var(--ceu-afundado); }
/* grupo ativo: a pilula do grupo fica em tinta e mostra o item atual ("Controle · Pendencias");
os outros itens continuam no menu que abre ao passar o mouse (o atual aparece marcado nele) */
.guia-grupo:has(.guia.ativa) > .guia-grupo-titulo { background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); font-weight: 600; box-shadow: var(--ceu-sombra-2); }
.guia-grupo:has(.guia.ativa) > .guia-grupo-titulo .bi { opacity: 1; }
.guia-grupo-atual { font-weight: 600; }
.guia-grupo-atual::before { content: '\00b7'; margin: 0 6px 0 0; opacity: .6; }
.guia-sub .guia.ativa, .guia-sub .guia.ativa:hover { background: var(--ceu-afundado) !important; color: var(--ceu-tinta) !important; box-shadow: none; animation: none; }
.guia-sub .guia.ativa::after { content: "" !important; display: block !important; position: static !important; inset: auto !important; transform: none !important; flex: 0 0 6px; margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ceu-tinta); }
/* "Ver como" do Financeiro (so admin): segmentado pequeno no fim da linha das guias */
.visao-como { display: inline-flex; align-items: center; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.visao-como-botao.btn { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; border-radius: 999px !important; gap: 6px; font-size: 12.5px; font-weight: 500;
color: var(--ceu-nevoa) !important; background: var(--ceu-sup) !important; border: 1px solid var(--ceu-fio) !important; box-shadow: var(--ceu-sombra-1) !important; }
.visao-como-botao.btn::before { display: none !important; }
.visao-como-botao.btn:hover { color: var(--ceu-tinta) !important; transform: none; }
.visao-como-botao strong { color: var(--ceu-tinta); font-weight: 600; }
.visao-como-botao .visao-como-rotulo { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 500; color: inherit; }
.visao-como-botao .seta { font-size: 10px; opacity: .7; }
.visao-como.ativa .visao-como-botao.btn { color: var(--ceu-atencao-texto) !important; border-color: color-mix(in srgb, var(--ceu-atencao) 55%, var(--ceu-fio)) !important;
background: var(--ceu-atencao-fundo, color-mix(in srgb, var(--ceu-atencao) 12%, var(--ceu-sup))) !important; }
.visao-como.ativa .visao-como-botao strong { color: var(--ceu-atencao-texto); }
.visao-como-menu { min-width: 15rem; }
.visao-como-menu .dropdown-item { display: flex; align-items: center; gap: 8px; }
.visao-como-aviso { margin: 6px 12px 4px; max-width: 14rem; font-size: 11.5px; line-height: 1.35; color: var(--ceu-atencao-texto); }
/* --- Subguias e abas internas: segmentado (capsula afundada, ativa em branco) ---------------- */
.subguias, .nav-tabs, .nav-pills {
display: inline-flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; padding: 3px;
background: var(--ceu-afundado); border: 1px solid var(--ceu-fio) !important; border-radius: 999px; box-shadow: none;
}
.subguia, .subguia:not(.ativa):not(.active), .nav-tabs .nav-link, .nav-pills .nav-link {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin: 0;
background: transparent; color: var(--ceu-nevoa); border: 0 !important; border-radius: 999px !important;
font-weight: 500; font-size: 12.5px; white-space: nowrap; box-shadow: none; transform: none;
transition: background var(--ceu-dur), color var(--ceu-dur), box-shadow var(--ceu-dur);
}
.subguia:hover, .subguia:not(.ativa):not(.active):hover, .nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--ceu-tinta); background: color-mix(in srgb, var(--ceu-sup) 60%, transparent); transform: none; box-shadow: none; }
.subguia.ativa, .subguia.active, .subguia.ativa:hover, .nav-pills .nav-link.active, .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
background: var(--ceu-sup) !important; color: var(--ceu-tinta) !important; font-weight: 600; box-shadow: var(--ceu-sombra-1) !important;
}
.subguia .bi, .nav-tabs .nav-link .bi, .subguia.ativa .bi, .subguia.active .bi { color: inherit; opacity: .85; font-size: 13px; }
.subguia .contador, .contagem-subguia { background: var(--ceu-afundado-2); color: var(--ceu-nevoa); border: 0; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 600; margin-left: 2px; height: 18px; line-height: 18px; display: inline-block; }
.subguia.ativa .contador, .subguia.active .contador, .subguia.ativa .contagem-subguia { background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); }
.subguia-divisor { display: none; }
.subguias { margin-bottom: 16px; }
.card-header .nav-tabs, .card-header .nav-pills { margin: 0; }
/* --- Paginacao ------------------------------------------------------------------------ */
.pagination { gap: 4px; }
.page-link { border-radius: 999px !important; margin: 0; border: 1px solid var(--ceu-fio); color: var(--ceu-corpo); background: var(--ceu-sup); font-size: 12.5px; min-width: 32px; height: 32px; line-height: 30px; padding: 0 10px; text-align: center; box-shadow: none; }
.page-link:hover { background: var(--ceu-afundado); color: var(--ceu-tinta); border-color: var(--ceu-fio-forte); }
.page-item.active .page-link { background: var(--ceu-tinta) !important; border-color: var(--ceu-tinta) !important; color: var(--ceu-sobre-tinta) !important; }
.page-item.disabled .page-link { background: transparent; color: var(--ceu-suave); }
/* =========================================================================
CARTOES, LISTAS, FILTROS, FORMULARIOS
========================================================================= */
.card, .conteudo .card:not(.cartao-indicador):not(.colaborador-hero):not(.chat-conf) {
background: var(--ceu-sup) !important; background-image: none !important;
border: 1px solid var(--ceu-fio) !important; border-radius: var(--ceu-r-cartao) !important; box-shadow: var(--ceu-sombra-1) !important;
overflow: hidden; margin-right: 0; color: var(--ceu-corpo);
}
.card:not(.colaborador-hero):not(.hero-ficha)::before, .card:not(.cartao-indicador):not(.colaborador-hero):not(.hero-ficha)::before { display: none !important; content: none !important; }
.card:has(.dropdown-menu.show) { overflow: visible; }
.card-interativo { transition: transform .35s var(--ceu-curva), box-shadow var(--ceu-dur), border-color var(--ceu-dur); }
.card-interativo:hover { border-color: var(--ceu-fio-forte) !important; box-shadow: var(--ceu-sombra-2) !important; transform: translateY(-2px); }
.card-header, [data-bs-theme="light"] .card-header, [data-bs-theme="dark"] .card-header, .conteudo .card:not(.chat-conf) > .card-header {
background: transparent !important; background-image: none !important; border-bottom: 1px solid var(--ceu-fio-suave) !important;
border-radius: 0 !important; padding: 10px 18px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 52px;
font-family: var(--ceu-titulo) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--ceu-tinta) !important;
}
.card-header > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.card-header > span:first-child > .bi, .card-header > .bi:first-child {
width: 30px; height: 30px; flex: 0 0 30px; display: inline-grid; place-items: center; margin: 0; border: 0; border-radius: 50%;
background: var(--ceu-afundado); color: var(--ceu-nevoa) !important; font-size: 14px;
}
.card-header .btn { font-family: var(--ceu-fonte); }
.card-header .small, .card-header small, .card-header .text-secondary { font-family: var(--ceu-fonte) !important; font-size: 12px !important; color: var(--ceu-nevoa) !important; font-weight: 400; letter-spacing: 0; }
.card-header a:not(.btn) { font-family: var(--ceu-fonte); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.card-body { padding: 18px; }
.card-footer, .conteudo .card:not(.chat-conf) > .card-footer { background: var(--ceu-realce) !important; border-top: 1px solid var(--ceu-fio-suave) !important; border-radius: 0 !important; padding: 10px 18px; }
.card > .table-responsive { border-radius: 0; }
/* cartao dentro de cartao = secao do mesmo cartao */
.card .card:not(.cartao-indicador):not(.colaborador-hero) {
border: 0 !important; border-top: 1px solid var(--ceu-fio-suave) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
.card .card > .card-header { min-height: 0; padding: 10px 0 !important; border-bottom: 0 !important; font-size: 14px !important; }
.card.border-warning { border-color: var(--r-alerta-borda) !important; }
.card.border-danger, .card.border-danger-subtle { border-color: var(--r-erro-borda) !important; }
.card.border-success { border-color: var(--r-sucesso-borda) !important; }
.card.border-info { border-color: rgba(46,125,239,.35) !important; }
.card-gradiente { background: var(--ceu-afundado) !important; color: var(--ceu-tinta); }
.list-group-item { border-color: var(--ceu-fio-suave); background: transparent; color: var(--ceu-corpo); padding: 10px 18px; min-height: 46px; }
.list-group-item.bg-body-tertiary { background: var(--ceu-realce) !important; padding-top: 8px; padding-bottom: 8px; color: var(--ceu-tinta); font-weight: 600; }
.list-group-item-action { transition: background var(--ceu-dur); }
.list-group-item-action:hover { background: var(--ceu-afundado); color: var(--ceu-tinta); }
.list-group-item strong, .list-group-item .fw-semibold, .list-group-item .nome { color: var(--ceu-tinta); font-weight: 600; }
/* filtros: barra de ferramentas sobre o ceu, sem caixa */
.card.sem-acento:has(form), .conteudo .card.sem-acento:has(form):not(#_) {
background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible; margin-bottom: 14px !important;
}
.card.sem-acento:has(form) > .card-body, .conteudo .card.sem-acento:has(form):not(#_) > .card-body { padding: 0 !important; }
.card.sem-acento form.row { background: transparent !important; row-gap: 8px; }
.card.sem-acento .form-label { font-size: 12px !important; margin-bottom: 4px; }
/* formularios: um cartao por formulario; fieldset = secao com fio; legenda com o icone num circulo */
.conteudo form:has(fieldset.bloco-form):not(.card *) {
background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: var(--ceu-r-cartao); padding: 6px 22px 22px; box-shadow: var(--ceu-sombra-1);
}
fieldset.bloco-form, .bloco-form {
background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
padding: 18px 0 8px !important; margin: 0 !important; overflow: visible;
}
fieldset.bloco-form + fieldset.bloco-form, .bloco-form + .bloco-form { border-top: 1px solid var(--ceu-fio-suave) !important; }
fieldset.bloco-form::before { display: none !important; }
fieldset.bloco-form > legend {
float: left; width: 100%; margin: 0 0 14px; padding: 0; background: transparent; border: 0;
display: flex; align-items: center; gap: 10px;
font-family: var(--ceu-titulo) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--ceu-tinta) !important;
}
fieldset.bloco-form > legend .bi { width: 30px; height: 30px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: var(--ceu-afundado); color: var(--ceu-nevoa); font-size: 14px; }
fieldset.bloco-form::after { content: ''; display: block; clear: both; }
.row > [class*="col"] > fieldset.bloco-form { border-top: 0 !important; }
.pagina-brutal .card .celula-pessoa .nome { color: var(--ceu-tinta); }
/* --- Tabelas: cabecalho em faixa afundada de pontas redondas; linhas de 46 px ------------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--ceu-corpo); color: var(--ceu-corpo); margin-bottom: 0; font-size: 13.5px; border-color: var(--ceu-fio-suave); }
.table > :not(caption) > * > * { border-bottom-color: var(--ceu-fio-suave) !important; padding: 8px 12px; height: 46px; vertical-align: middle; color: inherit; background: transparent; box-shadow: none; }
.table > :not(caption) > * > *:first-child { padding-left: 14px; } .table > :not(caption) > * > *:last-child { padding-right: 14px; }
.table thead th, [data-bs-theme="light"] .table thead th, [data-bs-theme="dark"] .table thead th {
background: var(--ceu-afundado) !important; border-bottom: 0 !important; height: 38px; padding-top: 0; padding-bottom: 0;
font-family: var(--ceu-fonte) !important; font-size: 12px !important; font-weight: 600 !important; color: var(--ceu-nevoa) !important; white-space: nowrap;
}
.table thead th:first-child { border-radius: 12px 0 0 12px; } .table thead th:last-child { border-radius: 0 12px 12px 0; }
.table thead th:only-child { border-radius: 12px; }
.card > .table-responsive, .card > .card-body > .table-responsive:only-child { padding: 6px 8px 4px; }
.table > tbody > tr { transition: background var(--ceu-dur); }
.table > tbody > tr:hover > *, .table-hover > tbody > tr:hover > * { background-color: var(--ceu-linha-hover) !important; --bs-table-bg-state: var(--ceu-linha-hover); color: inherit; }
.table > tbody > tr:last-child > * { border-bottom: 0 !important; }
.table > tbody > tr > td a:not(.btn), .table > tbody > tr > td .nome, .table > tbody > tr > td strong, .table > tbody > tr > td .fw-semibold, .table > tbody > tr > td .celula-pessoa .nome { color: var(--ceu-tinta); font-weight: 600; }
.table > tbody > tr > td a:not(.btn):hover { color: var(--ceu-sinal-texto); }
.table > tbody > tr > td .small, .table > tbody > tr > td small, .table > tbody > tr > td .text-secondary { color: var(--ceu-nevoa) !important; }
.table td.text-end, .table th.text-end { white-space: nowrap; }
.table-danger > * { --bs-table-bg: var(--ceu-perda-fundo); background-color: var(--ceu-perda-fundo) !important; }
.table-warning > * { --bs-table-bg: var(--ceu-atencao-fundo); background-color: var(--ceu-atencao-fundo) !important; }
.table-success > * { --bs-table-bg: var(--ceu-ok-fundo); background-color: var(--ceu-ok-fundo) !important; }
.tabela-cartoes .linha-inativa > * { opacity: .6; }
.table .avatar-inicial, .celula-pessoa .avatar-inicial { width: 30px; height: 30px; font-size: 11px; border-radius: 50%; }
/* =========================================================================
BOTOES ANIMADOS (Uiverse loud-chicken-53 "Modern Button", adaptado):
pilula; no hover uma ONDA enche o botao a partir do icone (circulo que
cresce, ::before), o icone sai e volta (ou desce, nos de baixar; gira, no
"+"), e o botao sobe 1 px com a sombra do tier 2. Cada variante so troca
as variaveis --b-*. O ::after fica livre (seta do .dropdown-toggle).
========================================================================= */
.btn, .btn:where(:not(.btn-link):not(.btn-close):not([role="tab"])) {
--b-fundo: var(--ceu-sup); --b-texto: var(--ceu-tinta); --b-fio: var(--ceu-fio); --b-onda: var(--ceu-afundado-2); --b-onda-texto: var(--ceu-tinta); --b-onda-x: 50%;
position: relative; isolation: isolate; overflow: hidden;
border-radius: 999px !important; font-family: var(--ceu-fonte); font-weight: 600; font-size: 13px; letter-spacing: 0; line-height: 1;
padding: 0 16px; height: var(--ceu-controle); min-height: var(--ceu-controle); border: 1px solid var(--b-fio) !important; box-shadow: none !important; transform: none; margin: 0;
display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
background: var(--b-fundo) !important; color: var(--b-texto) !important;
transition: color .4s var(--ceu-curva), border-color .3s, box-shadow .3s, transform .35s var(--ceu-curva), background-color .3s !important;
}
.btn:not(.btn-link):not(.btn-close)::before {
content: ''; position: absolute; z-index: -1; left: var(--b-onda-x); top: 50%; width: 24px; height: 24px; border-radius: 50%;
background: var(--b-onda); transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--ceu-curva); pointer-events: none;
}
.btn.btn-com-icone { --b-onda-x: 24px; }
.btn-sm.btn-com-icone { --b-onda-x: 19px; }
.btn:not(:disabled):not(.disabled):not(.btn-link):hover { color: var(--b-onda-texto) !important; border-color: var(--b-fio-hover, var(--b-fio)) !important; transform: translateY(-1px); box-shadow: var(--ceu-sombra-2) !important; }
.btn:not(:disabled):not(.disabled):not(.btn-link):hover::before, .btn:not(.btn-link):focus-visible::before { transform: translate(-50%, -50%) scale(28); }
.btn.w-100:not(:disabled):hover::before, .btn.btn-lg:not(:disabled):hover::before { transform: translate(-50%, -50%) scale(60); }
.btn:not(.btn-link):active { transform: translateY(0) scale(.97) !important; transition-duration: .1s !important; }
.btn:focus-visible { box-shadow: var(--ceu-foco) !important; }
.btn-sm, .btn-sm:not(.btn-link) { height: 30px; min-height: 30px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 44px; min-height: 44px; padding: 0 22px; font-size: 14px; }
.btn .bi { font-size: 15px; color: inherit; position: relative; }
.btn-sm .bi { font-size: 13px; }
/* o icone: sai pela direita e volta pela esquerda; nos de baixar, desce; no "+", gira */
.btn:not(:disabled):not(.disabled):hover > .bi:first-child { animation: ceu-icone-vai .55s var(--ceu-curva); }
.btn:not(:disabled):not(.disabled):hover > :is(.bi-download, .bi-file-earmark-arrow-down, .bi-cloud-arrow-down, .bi-box-arrow-down):first-child { animation: ceu-icone-desce .55s var(--ceu-curva); }
.btn:not(:disabled):not(.disabled):hover > :is(.bi-plus-lg, .bi-plus, .bi-plus-circle, .bi-arrow-repeat, .bi-arrow-clockwise, .bi-gear):first-child { animation: ceu-icone-gira .6s var(--ceu-curva); }
.btn:not(:disabled):not(.disabled):hover > :is(.bi-check2, .bi-check-lg, .bi-check2-circle, .bi-check2-all):first-child { animation: ceu-icone-pula .5s var(--ceu-curva); }
@keyframes ceu-icone-vai { 0% { transform: translateX(0); opacity: 1; } 38% { transform: translateX(9px); opacity: 0; } 39% { transform: translateX(-9px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes ceu-icone-desce { 0% { transform: translateY(0); opacity: 1; } 38% { transform: translateY(8px); opacity: 0; } 39% { transform: translateY(-8px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ceu-icone-gira { 0% { transform: rotate(0); } 100% { transform: rotate(180deg); } }
@keyframes ceu-icone-pula { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
/* desabilitado = sem animacao, hachura leve */
.btn:disabled, .btn.disabled { opacity: 1; color: var(--ceu-suave) !important; background-color: var(--ceu-afundado) !important; background-image: var(--ceu-hachura) !important; border-color: var(--ceu-fio) !important; cursor: not-allowed; }
.btn:disabled::before, .btn.disabled::before { display: none; }
/* variantes: so as variaveis */
.btn-primary, .btn.bg-verde-real, .bg-verde-real.btn,
[data-bs-theme="light"] .btn-primary, [data-bs-theme="dark"] .btn-primary {
--b-fundo: var(--ceu-tinta); --b-texto: var(--ceu-sobre-tinta); --b-fio: var(--ceu-tinta); --b-onda: #364152; --b-onda-texto: #FFFFFF;
}
[data-bs-theme="dark"] .btn-primary, [data-bs-theme="dark"] .btn.bg-verde-real { --b-onda: #FFFFFF; --b-onda-texto: #121212; }
.btn-success, .btn-success.btn { --b-fundo: var(--ceu-verde-acao); --b-texto: #FFFFFF; --b-fio: var(--ceu-verde-acao); --b-onda: #0A6E47; --b-onda-texto: #FFFFFF; }
[data-bs-theme="dark"] .btn-success { --b-texto: #0F1011; --b-onda: #5CD679; --b-onda-texto: #0F1011; }
.btn-excel, .btn.btn-excel { --b-fundo: #107C41; --b-texto: #FFFFFF; --b-fio: #107C41; --b-onda: #0A5C30; --b-onda-texto: #FFFFFF; }
.btn-warning, .btn.btn-warning { --b-fundo: var(--ceu-atencao); --b-texto: #1F1500; --b-fio: var(--ceu-atencao); --b-onda: #FFC24D; --b-onda-texto: #1F1500; }
.btn.btn-acao-azul, .btn-primary.btn-acao-azul { --b-fundo: var(--ceu-sinal); --b-texto: #FFFFFF; --b-fio: var(--ceu-sinal); --b-onda: #1A5FCC; --b-onda-texto: #FFFFFF; }
.btn.btn-acao-vermelho, .btn-primary.btn-acao-vermelho, .btn-danger, .btn.btn-danger { --b-fundo: var(--ceu-perda); --b-texto: #FFFFFF; --b-fio: var(--ceu-perda); --b-onda: #B4262C; --b-onda-texto: #FFFFFF; }
.btn.btn-acao-ambar, .btn-primary.btn-acao-ambar, .btn-outline-warning { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-atencao-texto); --b-fio: rgba(242,160,7,.5); --b-onda: var(--ceu-atencao); --b-onda-texto: #1F1500; }
.btn-outline-danger, .btn.btn-outline-danger { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-perda-texto); --b-fio: rgba(229,72,77,.45); --b-onda: var(--ceu-perda); --b-onda-texto: #FFFFFF; }
.btn-outline-success { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-ok-texto); --b-fio: rgba(43,196,138,.5); --b-onda: var(--ceu-verde-acao); --b-onda-texto: #FFFFFF; }
.btn-outline-primary:not([role="tab"]), .btn-outline-info { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-sinal-texto); --b-fio: rgba(46,125,239,.4); --b-onda: var(--ceu-sinal); --b-onda-texto: #FFFFFF; }
.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-dark { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-tinta); --b-fio: var(--ceu-fio); --b-fio-hover: var(--ceu-fio-forte); --b-onda: var(--ceu-afundado-2); --b-onda-texto: var(--ceu-tinta); }
.btn-download, .btn.btn-download { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-tinta); --b-fio: var(--ceu-fio); --b-onda: var(--ceu-tinta); --b-onda-texto: var(--ceu-sobre-tinta); }
.btn-primary .bi, .btn-success .bi, .btn-excel .bi { color: inherit !important; }
.btn-link, .btn.btn-link { background: transparent !important; border-color: transparent !important; color: var(--ceu-sinal-texto) !important; height: auto; min-height: 0; padding: 0; font-weight: 600; overflow: visible; }
.btn-link:hover { color: var(--ceu-tinta) !important; transform: none !important; box-shadow: none !important; }
.btn-fantasma, .btn.btn-fantasma { --b-fundo: transparent; --b-fio: transparent; --b-texto: var(--ceu-nevoa); --b-onda: var(--ceu-afundado); --b-onda-texto: var(--ceu-tinta); }
.btn-fantasma:hover { box-shadow: none !important; }
.dropdown-item.text-danger { color: var(--ceu-perda-texto) !important; }
/* icone na frente do texto: nada de circulo (tema cssbuttons); so espaco */
.btn.btn-com-icone, .btn-sm.btn-com-icone { padding-left: 14px !important; }
.btn-sm.btn-com-icone { padding-left: 11px !important; }
.btn.btn-com-icone > .bi:first-child, .btn-sm.btn-com-icone > .bi:first-child, .btn-lg.btn-com-icone > .bi:first-child {
display: inline-block !important; width: auto; height: auto; margin: 0 !important; border-radius: 0; background: none !important; color: inherit !important; font-size: 15px; overflow: visible;
}
.btn-sm.btn-com-icone > .bi:first-child { font-size: 13px; }
.btn.btn-com-icone > .bi:first-child::before { display: inline-block; }
.btn.btn-so-icone:not(.btn-link) { --b-onda-x: 50%; padding: 0 !important; width: var(--ceu-controle) !important; min-width: var(--ceu-controle); height: var(--ceu-controle) !important; min-height: 0 !important; justify-content: center; flex: 0 0 auto; }
.btn-sm.btn-so-icone:not(.btn-link) { width: 30px !important; min-width: 30px; height: 30px !important; }
/* grupos e input-group: uma pilula so */
.btn-group { border-radius: 999px !important; box-shadow: none; margin: 0; }
.btn-group > .btn { margin: 0 !important; }
.btn-group > .btn:hover, .input-group > .btn:hover { transform: none !important; box-shadow: none !important; z-index: 2; }
.btn-group > .btn:has(+ .btn), .input-group > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.btn-group > .btn + .btn, .input-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: -1px !important; }
.btn-group > .btn.dropdown-toggle-split { padding-left: 9px !important; padding-right: 11px !important; }
.btn-group > .btn + .btn::before { left: 50%; }
.input-group > .btn { margin: 0; min-height: 0; box-shadow: none !important; }
.btn-download .bi { position: static; width: auto; height: auto; background: none; color: inherit; margin: 0; }
.icone-excel { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; background: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
/* =========================================================================
CAMPOS: pilula branca de 36 px, fio; foco = fio azul + anel
========================================================================= */
.form-control, .form-select, .select-bonito-alvo, .input-group-text,
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] .select-bonito-alvo, [data-bs-theme="light"] .form-control, [data-bs-theme="light"] .form-select {
background-color: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: 999px; color: var(--ceu-tinta);
min-height: var(--ceu-controle); padding: 0 14px; height: var(--ceu-controle); box-shadow: none; font-size: 13.5px; font-family: var(--ceu-fonte);
transition: border-color var(--ceu-dur), box-shadow var(--ceu-dur);
}
[data-bs-theme="dark"] :is(.form-control, .form-select, .select-bonito-alvo) { background-color: #161616; }
.form-control-sm, .form-select-sm { min-height: 30px; height: 30px; padding: 0 12px; font-size: 12.5px; }
.form-select, .form-select-sm { padding-right: 34px; background-position: right 12px center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b6472' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m3 6 5 5 5-5'/%3e%3c/svg%3e"); }
/* [data-bs-theme] no seletor: a regra das pilulas acima tem [data-bs-theme="light"] .form-control (0,2,0) e
espremia todo textarea em 36 px (achado em 11/10/2026) */
textarea.form-control, [data-bs-theme] textarea.form-control, .assistente-envio textarea { min-height: 84px; height: auto; padding: 10px 14px; border-radius: 18px; }
[data-bs-theme] .assistente-envio textarea.form-control { min-height: 38px; height: 38px; padding: 8px 14px; border-radius: 19px; } /* chat: uma linha */
select[multiple].form-select, select[size].form-select { height: auto; border-radius: 16px; padding: 6px 10px; background-image: none; }
.form-control::placeholder { color: var(--ceu-suave); }
.form-control:hover, .form-select:hover { border-color: var(--ceu-fio-forte); }
.form-control:focus, .form-select:focus, .select-bonito-alvo:focus-within,
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus {
border-color: var(--ceu-sinal); box-shadow: var(--ceu-foco); color: var(--ceu-tinta);
}
.form-control.is-invalid, .was-validated .form-control:invalid, .form-select.is-invalid { border-color: var(--ceu-perda); background-image: none; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(229,72,77,.22); }
.invalid-feedback { color: var(--ceu-perda-texto); font-size: 12px; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--ceu-afundado); background-image: var(--ceu-hachura); color: var(--ceu-nevoa); }
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-text:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .input-group-text:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text { color: var(--ceu-nevoa); background: var(--ceu-afundado); }
.form-label.obrigatorio::after { color: var(--ceu-perda-texto); }
.form-text { color: var(--ceu-nevoa); font-size: 12px; }
.input__container, .campo-brutal { all: revert; }
/* arquivo: pilula tracejada com o botao do navegador em tinta */
input[type="file"].form-control {
display: flex; align-items: center; width: 100%; padding: 3px; overflow: hidden; max-width: 28rem;
border: 1px dashed var(--ceu-fio-forte); border-radius: 999px; background: var(--ceu-realce); color: var(--ceu-nevoa); font-size: 12.5px;
min-height: 0 !important; height: var(--ceu-controle) !important;
}
input[type="file"].form-control::file-selector-button {
font-family: var(--ceu-fonte); font-weight: 600; font-size: 12px; color: var(--ceu-sobre-tinta); background: var(--ceu-tinta);
border: 0; border-radius: 999px; margin: 0 10px 0 0; padding: 0 14px; height: 28px; cursor: pointer; transition: background var(--ceu-dur);
}
input[type="file"].form-control:hover::file-selector-button,
input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: #364152 !important; color: #fff !important; }
[data-bs-theme="dark"] input[type="file"].form-control:hover::file-selector-button { background: #FFFFFF !important; color: #121212 !important; }
/* =========================================================================
SELOS: pilula clara com ponto do sinal (o .ponto-status do sistema some)
========================================================================= */
.badge {
display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 600; letter-spacing: 0; padding: 0 9px; height: 22px; line-height: 22px;
font-size: 11.5px; font-family: var(--ceu-fonte); background: var(--ceu-afundado) !important; color: var(--ceu-nevoa) !important; border: 0;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ceu-suave); flex: none; }
.badge.bg-secondary-subtle, .badge.bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--ceu-afundado) !important; color: var(--ceu-nevoa) !important; }
.badge.bg-success-subtle, .badge.bg-success { background: var(--ceu-ok-fundo) !important; color: var(--ceu-ok-texto) !important; } .badge.bg-success-subtle::before, .badge.bg-success::before { background: var(--ceu-ok); }
.badge.bg-primary-subtle, .badge.bg-primary, .badge.bg-info-subtle, .badge.bg-info { background: var(--ceu-sinal-fundo) !important; color: var(--ceu-sinal-texto) !important; }
.badge.bg-primary-subtle::before, .badge.bg-primary::before, .badge.bg-info-subtle::before, .badge.bg-info::before { background: var(--ceu-sinal); }
.badge.bg-warning-subtle, .badge.bg-warning { background: var(--ceu-atencao-fundo) !important; color: var(--ceu-atencao-texto) !important; } .badge.bg-warning-subtle::before, .badge.bg-warning::before { background: var(--ceu-atencao); }
.badge.bg-danger-subtle, .badge.bg-danger { background: var(--ceu-perda-fundo) !important; color: var(--ceu-perda-texto) !important; } .badge.bg-danger-subtle::before, .badge.bg-danger::before { background: var(--ceu-perda); }
.badge.bg-dark, .badge.text-bg-dark { background: var(--ceu-tinta) !important; color: var(--ceu-sobre-tinta) !important; } .badge.bg-dark::before { background: var(--ceu-sobre-tinta); }
.badge .bi:first-child, .badge .ponto-status { display: none; }
.badge.rounded-pill { border-radius: 999px; }
.badge.nd-num::before, .btn-icone .badge::before, .menu-item .contador::before, .badge:empty::before { display: none; }
.badge.nd-num { padding: 0 8px; }
.chip-vermelho, .chip-roxo, .chip-azul, .chip-ambar, .assistente-chip { border-radius: 999px !important; border: 1px solid var(--ceu-fio) !important; background: var(--ceu-sup) !important; color: var(--ceu-corpo) !important; }
.chip-vermelho { color: var(--ceu-perda-texto) !important; } .chip-azul { color: var(--ceu-sinal-texto) !important; } .chip-ambar { color: var(--ceu-atencao-texto) !important; } .chip-roxo { color: var(--ceu-violeta-texto) !important; }
/* =========================================================================
MENUS SUSPENSOS, MODAIS, TOASTS, AVISOS, VAZIO, PALETA, DICAS
========================================================================= */
.dropdown-menu { border: 1px solid var(--ceu-fio); border-radius: 18px; box-shadow: var(--ceu-sombra-pop); padding: 6px; background: var(--ceu-sup); font-size: 13px; color: var(--ceu-tinta); }
.dropdown-menu.show { animation: ceu-surge .28s var(--ceu-curva); }
/* translate/scale (e nao transform): o Popper posiciona o menu pelo transform, que a animacao apagaria */
@keyframes ceu-surge { 0% { opacity: 0; translate: 0 -4px; scale: .98; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
.dropdown-item { border-radius: 12px; padding: 8px 10px; color: var(--ceu-corpo); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.dropdown-item .bi { color: var(--ceu-nevoa); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ceu-afundado); color: var(--ceu-tinta); }
.dropdown-item.active, .dropdown-item:active { background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); }
.dropdown-item.active .bi, .dropdown-item:active .bi { color: inherit; }
.dropdown-divider { border-color: var(--ceu-fio-suave); margin: 4px 0; }
.dropdown-header { padding: 6px 10px 4px; }
.modal-content { border: 1px solid var(--ceu-fio); border-radius: 28px; box-shadow: var(--ceu-sombra-pop); background: var(--ceu-sup); color: var(--ceu-corpo); }
.modal-header, .modal-footer { border-color: var(--ceu-fio-suave); padding: 16px 20px; }
.modal-body { padding: 18px 20px; }
.modal-icone { border-radius: 50%; background: var(--ceu-afundado); color: var(--ceu-nevoa); }
.modal-backdrop.show { opacity: .35; }
.btn-close { filter: none; opacity: .55; border-radius: 50%; } [data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(1); }
.toast, .toast-rh { border: 1px solid var(--ceu-fio); border-radius: 18px; box-shadow: var(--ceu-sombra-pop); background: var(--ceu-sup); color: var(--ceu-tinta); }
/* avisos: cartao claro com o icone na cor do sinal */
.alert { border: 1px solid var(--ceu-fio); border-radius: 16px; background: var(--ceu-sup); color: var(--ceu-corpo); box-shadow: none; padding: 11px 14px; font-size: 13px; }
.alert strong { color: var(--ceu-tinta); font-weight: 600; }
.alert-warning { background: color-mix(in srgb, var(--ceu-atencao) 9%, var(--ceu-sup)); border-color: var(--r-alerta-borda); }
.alert-danger, .alert-error { background: color-mix(in srgb, var(--ceu-perda) 7%, var(--ceu-sup)); border-color: var(--r-erro-borda); }
.alert-success { background: color-mix(in srgb, var(--ceu-ok) 9%, var(--ceu-sup)); border-color: var(--r-sucesso-borda); }
.alert-info, .alert-primary { background: color-mix(in srgb, var(--ceu-sinal) 7%, var(--ceu-sup)); border-color: rgba(46,125,239,.3); }
.alert-secondary, .alert-light { background: var(--ceu-afundado); border-color: var(--ceu-fio); }
.alert::before, .alert .bi:first-child, .alert > div > .bi:first-child { color: var(--ceu-nevoa); }
.alert-warning::before, .alert-warning > div > .bi:first-child, .alert-warning > .bi:first-child { color: var(--ceu-atencao-texto); }
.alert-danger::before, .alert-danger > div > .bi:first-child, .alert-danger > .bi:first-child { color: var(--ceu-perda-texto); }
.alert-success::before, .alert-success > div > .bi:first-child, .alert-success > .bi:first-child { color: var(--ceu-ok-texto); }
.alert-info::before, .alert-primary::before, .alert-info > div > .bi:first-child, .alert-info > .bi:first-child { color: var(--ceu-sinal-texto); }
.alert:has(> .bi:first-child, > div:first-child > .bi:first-child)::before { display: none; }
.alert .alert-link, .alert a { color: var(--ceu-tinta); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ceu-fio-forte); }
/* vazio: uma frase e um botao, sem ilustracao grande */
.estado-vazio { padding: 26px; border: 1px dashed var(--ceu-fio-forte); border-radius: 18px; background: var(--ceu-realce); color: var(--ceu-nevoa); margin: 8px; }
.estado-vazio .ilustracao { width: 44px; height: 44px; border-radius: 50%; background: var(--ceu-sup); color: var(--ceu-nevoa); border: 1px solid var(--ceu-fio); font-size: 18px; box-shadow: var(--ceu-sombra-1); }
.estado-vazio .mensagem { color: var(--ceu-tinta); font-weight: 600; font-size: 13.5px; }
.estado-vazio .ajuda { color: var(--ceu-nevoa); font-size: 12.5px; }
.card > .estado-vazio, .card > .card-body > .estado-vazio { margin: 10px; }
.progress { border-radius: 999px; background: var(--ceu-afundado-2); height: 6px; }
.progress-bar { border-radius: 999px; background-color: var(--ceu-sinal); }
.progress-bar.bg-success { background-color: var(--ceu-ok) !important; } .progress-bar.bg-danger { background-color: var(--ceu-perda) !important; } .progress-bar.bg-warning { background-color: var(--ceu-atencao) !important; }
/* assistente (robo) */
.assistente-botao { background: var(--ceu-tinta) !important; color: var(--ceu-sobre-tinta) !important; border-radius: 999px; box-shadow: var(--ceu-sombra-pop); border: 0; transition: transform .35s var(--ceu-curva); }
.assistente-botao:hover { transform: translateY(-2px) scale(1.04); }
.assistente-painel { border-radius: 24px; border: 1px solid var(--ceu-fio); box-shadow: var(--ceu-sombra-pop); background: var(--ceu-sup); }
/* paleta Ctrl+K */
.paleta-fundo { background: rgba(14,17,22,.28); backdrop-filter: blur(3px); }
.paleta { background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: 24px; box-shadow: var(--ceu-sombra-pop); animation: ceu-surge .3s var(--ceu-curva); }
.paleta-busca { border-radius: 999px; margin: 10px; border: 1px solid var(--ceu-fio); background: var(--ceu-afundado); padding: 0 16px; height: 44px; }
.paleta-busca:focus-within { background: var(--ceu-sup); border-color: var(--ceu-sinal); box-shadow: var(--ceu-foco); }
.paleta-grupo { font-size: 11.5px; font-weight: 600; color: var(--ceu-suave); padding: 8px 12px 4px; }
.paleta-item { border-radius: 12px; color: var(--ceu-corpo); }
.paleta-item:hover, .paleta-item.focada { background: var(--ceu-afundado); color: var(--ceu-tinta); }
.paleta-item:hover .bi, .paleta-item.focada .bi { color: var(--ceu-tinta); }
.paleta-rodape { background: var(--ceu-realce); border-top: 1px solid var(--ceu-fio-suave); }
/* =========================================================================
INDICADORES COMPACTOS (09/10/2026, pedido: "nao estou gostando com esses
cards ... quero que tenha melhor aproveitamento da tela"): UMA barra
branca por tela, celulas de ~64 px divididas por fios —
● Rotulo ........................ +2,6%
128 complemento
Mesma marcacao de antes (.faixa-indicadores > a, .card-traco,
.cartao-indicador): so o CSS mudou. Sem grafico.
========================================================================= */
.faixa-indicadores, .grade-traco,
.row:has(> [class*="col"] > .cartao-indicador) {
--bs-gutter-x: 0; --bs-gutter-y: 0;
display: grid !important; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 0 !important;
margin: 0 0 16px !important; padding: 0 !important; height: auto;
background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: 18px; box-shadow: var(--ceu-sombra-1);
overflow: hidden; user-select: none;
}
.row:has(> [class*="col"] > .cartao-indicador) > [class*="col"] {
width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; animation: none !important; display: flex;
}
.faixa-indicadores > *, .card-traco, .cartao-indicador {
--cor-card: var(--ceu-suave);
position: relative !important; display: grid !important; grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas: "rotulo rotulo rotulo" "valor delta ." "comp comp comp"; align-content: start; align-items: center; column-gap: 8px; row-gap: 0;
width: auto !important; height: auto !important; min-height: 66px; padding: 10px 16px 11px !important; margin: -1px 0 0 -1px !important;
background: transparent !important; background-image: none !important; color: var(--ceu-tinta) !important;
border: 0 !important; border-radius: 0 !important; box-shadow: inset 1px 0 0 var(--ceu-fio-suave), inset 0 1px 0 var(--ceu-fio-suave) !important; outline: 0;
text-decoration: none; text-align: left; transform: none !important; isolation: auto !important; overflow: visible !important; z-index: auto !important;
transition: background var(--ceu-dur) !important; cursor: pointer;
}
.faixa-indicadores > *::before, .card-traco::before, .cartao-indicador::before { display: none !important; content: none !important; }
/* as celulas de uma barra dividem as mesmas 3 linhas (subgrid): os numeros ficam alinhados mesmo com rotulo de 2 linhas */
.faixa-indicadores, .grade-traco { grid-auto-rows: auto; }
.faixa-indicadores > *, .grade-traco > .card-traco { grid-row: span 3; grid-template-rows: subgrid; }
.faixa-indicadores > a:hover, .card-traco:hover, a.cartao-indicador:hover, button.cartao-indicador:hover { background: var(--ceu-realce) !important; }
.faixa-indicadores > a:hover .valor, .card-traco:hover .valor { color: var(--ceu-sinal-texto) !important; }
/* filtro ativo = celula afundada com um traco de tinta embaixo */
.faixa-indicadores > a.ativo, .cartao-indicador.seletor.ativo { background: var(--ceu-afundado) !important; box-shadow: inset 1px 0 0 var(--ceu-fio-suave), inset 0 1px 0 var(--ceu-fio-suave), inset 0 -3px 0 var(--ceu-tinta) !important; }
.faixa-indicadores > a.ativo .rotulo-dado, .cartao-indicador.seletor.ativo .rotulo-dado { color: var(--ceu-tinta) !important; font-weight: 600 !important; }
.cartao-indicador { display: block !important; padding: 0 !important; cursor: default; }
a.cartao-indicador, button.cartao-indicador { cursor: pointer; }
.row:has(> [class*="col"] > .cartao-indicador) > [class*="col"] > .cartao-indicador { flex: 1 1 auto; }
.cartao-indicador > .card-body {
display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto delta";
align-items: start; gap: 4px 8px; padding: 10px 16px 11px !important; width: 100%; height: 100%; min-height: 66px;
}
.cartao-indicador > .card-body > .d-flex { grid-area: texto; display: block !important; min-width: 0; }
.cartao-indicador > .card-body > .d-flex > .min-w-0, .cartao-indicador > .card-body > .d-flex > div:first-child { min-width: 0; }
.cartao-indicador .icone { display: none !important; }
.cartao-indicador .variacao-card { grid-area: delta; }
/* a cor do dado = o sinal que ele carrega (ponto de 8 px no rotulo) */
.cor-azul, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-azul), .cartao-indicador.acento-azul { --cor-card: var(--ceu-sinal); }
.cor-ciano, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-ciano), .cartao-indicador.acento-ciano { --cor-card: #0EA5C6; }
.cor-verde, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-verde), .cartao-indicador.acento-verde, .cartao-indicador.acento-marca { --cor-card: var(--ceu-ok); }
.cor-ambar, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-ambar), .cartao-indicador.acento-ambar { --cor-card: var(--ceu-atencao); }
.cor-vermelho, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-vermelho), .cartao-indicador.acento-vermelho { --cor-card: var(--ceu-perda); }
.cor-roxo, :is(.faixa-indicadores > *, .cartao-indicador):has(> .cor-roxo), .cartao-indicador.acento-roxo { --cor-card: var(--ceu-violeta); }
.cartao-indicador.acento-ardosia { --cor-card: var(--ceu-suave); }
.faixa-situacoes > *:has(.ponto-verde) { --cor-card: var(--ceu-ok); } .faixa-situacoes > *:has(.ponto-ambar) { --cor-card: var(--ceu-atencao); }
.faixa-situacoes > *:has(.ponto-vermelho) { --cor-card: var(--ceu-perda); } .faixa-situacoes > *:has(.ponto-roxo) { --cor-card: var(--ceu-violeta); }
.faixa-situacoes > *:has(.ponto-ciano) { --cor-card: #0EA5C6; } .faixa-situacoes > *:has(.ponto-azul) { --cor-card: var(--ceu-sinal); }
.faixa-indicadores > * .rotulo-dado, .cartao-indicador .rotulo-dado, .card-traco .rotulo-dado {
grid-area: rotulo; position: relative; display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
align-self: start; min-width: 0; margin: 0 0 5px; padding-left: 15px;
color: var(--ceu-nevoa) !important; font-family: var(--ceu-fonte) !important; font-size: 12.5px !important; line-height: 1.3;
font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal;
}
.faixa-indicadores > * .rotulo-dado::before, .cartao-indicador .rotulo-dado::before, .card-traco .rotulo-dado::before {
content: ''; position: absolute; left: 1px; top: .42em; width: 8px; height: 8px; border-radius: 50%; background: var(--cor-card);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-card) 18%, transparent);
}
.faixa-indicadores > * .rotulo-dado .bi, .faixa-indicadores > * .rotulo-dado .ponto { display: none; }
.faixa-indicadores > * .valor, .cartao-indicador .valor, .cartao-indicador .valor-moeda, .faixa-indicadores > * strong.valor, .card-traco .valor {
grid-area: valor; color: var(--ceu-tinta) !important; font-family: var(--ceu-titulo) !important; font-weight: 700 !important;
font-size: 24px; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; transition: color var(--ceu-dur);
}
.cartao-indicador .valor-moeda, .faixa-indicadores > * .valor.moeda { font-size: 19px; }
.faixa-indicadores > * .valor.text-danger, .cartao-indicador .valor.text-danger, .cartao-indicador .valor-moeda.text-danger { color: var(--ceu-perda-texto) !important; }
.faixa-indicadores > * .valor.text-warning, .cartao-indicador .valor.text-warning { color: var(--ceu-atencao-texto) !important; }
.faixa-indicadores > * .valor .small, .faixa-indicadores > * .valor small, .cartao-indicador .valor .fs-6 { font-size: 12.5px !important; color: var(--ceu-nevoa); font-family: var(--ceu-fonte); font-weight: 500 !important; letter-spacing: 0; }
.faixa-indicadores > * .complemento, .cartao-indicador .complemento, .card-traco .complemento {
grid-area: comp; align-self: start; min-width: 0; margin: 4px 0 0; color: var(--ceu-nevoa) !important; font-size: 11.5px; line-height: 1.3; font-weight: 400;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cartao-indicador .complemento { white-space: normal; margin-top: 3px; }
.faixa-indicadores > * .ponto, .cartao-indicador:has(.variacao-card) .icone, .traco-icone, .grafico-vazio, .grafico-dica, .grafico-card { display: none !important; }
/* variacao: pilula pequena no canto (verde sobe, vermelho desce — regra do usuario de 01/10/2026) */
.variacao-card {
grid-area: delta; float: none !important; justify-self: start; align-self: center; margin: 0 !important; padding: 0 7px !important; transform: none; height: 20px;
display: inline-flex; align-items: center; gap: 3px; border-radius: 999px !important; border: 0;
background: var(--ceu-afundado) !important; color: var(--ceu-nevoa) !important; font-family: var(--ceu-fonte) !important; font-size: 11px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
}
/* numero longo ou celula estreita: a variacao desce para a linha de baixo do numero (tema.js), sem apertar o rotulo */
.faixa-indicadores > .delta-abaixo, .grade-traco > .card-traco.delta-abaixo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rotulo rotulo" "valor valor" "delta comp"; }
.delta-abaixo > .variacao-card { align-self: start; justify-self: start; margin: 4px 0 0 !important; }
.delta-abaixo > .complemento { margin-left: 6px !important; align-self: center; }
.variacao-card.sobe { background: var(--ceu-ok-fundo) !important; color: var(--ceu-ok-texto) !important; }
.variacao-card.desce { background: var(--ceu-perda-fundo) !important; color: var(--ceu-perda-texto) !important; }
.variacao-card .bi { color: inherit; font-size: 10px; }
.cartao-indicador > .card-body > .variacao-card { justify-self: end; align-self: start; grid-area: delta; }
/* --- Visao geral e Financeiro: um quadro, uma LINHA por grupo (09/10/2026; antes cards "Monthly Balance") ---
[ icone Grupo ] [ celulas do grupo ................................ ] [ Ver ... -> ]
As celulas de todas as linhas usam a mesma grade (--colunas), entao alinham como uma tabela. */
.kpi-painel {
--colunas: 4;
display: flex; flex-direction: column; margin: 0 0 18px;
background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: var(--ceu-r-cartao); box-shadow: var(--ceu-sombra-1); overflow: hidden;
}
.kpi-linha { display: grid; grid-template-columns: 188px minmax(0, 1fr); align-items: stretch; }
.kpi-linha + .kpi-linha { border-top: 1px solid var(--ceu-fio-suave); }
.kpi-linha-cabeca { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-width: 0; background: var(--ceu-realce); border-right: 1px solid var(--ceu-fio-suave); }
.kpi-linha-cabeca > .bi { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; font-size: 14px;
background: color-mix(in srgb, var(--cor-grupo, var(--ceu-sinal)) 14%, transparent); color: var(--cor-grupo, var(--ceu-sinal)); transition: transform .45s var(--ceu-curva); }
.kpi-linha:hover .kpi-linha-cabeca > .bi { transform: scale(1.08) rotate(-6deg); }
.kpi-linha-cabeca > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kpi-linha-nome { margin: 0; font-family: var(--ceu-titulo) !important; font-size: 14px !important; font-weight: 700 !important; color: var(--ceu-tinta) !important; letter-spacing: -.01em; line-height: 1.2; }
.kpi-linha > .faixa-indicadores {
grid-template-columns: repeat(var(--colunas), minmax(0, 1fr)); margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
.kpi-linha > .faixa-indicadores > * { box-shadow: inset 1px 0 0 var(--ceu-fio-suave) !important; margin: 0 !important; }
.kpi-linha > .faixa-indicadores > *:first-child { box-shadow: none !important; }
.kpi-linha > .faixa-indicadores > a.ativo { box-shadow: inset 0 -3px 0 var(--ceu-tinta) !important; }
.kpi-linha-ver {
display: inline-flex; align-items: center; gap: 4px; width: fit-content;
font-size: 12px; font-weight: 500; color: var(--ceu-nevoa); white-space: nowrap; transition: color var(--ceu-dur);
}
.kpi-linha-ver .bi { font-size: 11px; transition: transform .4s var(--ceu-curva); }
.kpi-linha-ver:hover { color: var(--ceu-sinal-texto); }
.kpi-linha-ver:hover .bi { transform: translateX(4px); }
.kpi-linha[data-grupo="vagas"], .kpi-linha[data-grupo="folha"] { --cor-grupo: #F06A26; }
.kpi-linha[data-grupo="selecao"], .kpi-linha[data-grupo="ferias"] { --cor-grupo: #7C5CFF; }
.kpi-linha[data-grupo="contratacoes"], .kpi-linha[data-grupo="rescisoes"] { --cor-grupo: #0E9896; }
.kpi-linha[data-grupo="guias"] { --cor-grupo: #12A26B; }
@media (max-width: 1199.98px) {
.kpi-linha { grid-template-columns: minmax(0, 1fr); }
.kpi-linha-cabeca { border-right: 0; border-bottom: 1px solid var(--ceu-fio-suave); padding: 8px 14px; }
.kpi-linha-cabeca > div { flex-direction: row; align-items: baseline; gap: 12px; }
.kpi-linha > .faixa-indicadores { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
/* =========================================================================
PAINEIS QUE EXPANDEM (Folha e Financeiro, 09/10/2026). Pedido: "la em folha
e pagamento tem muitos cards ainda ... onde eu passo o mouse em cima expande
ou algo assim". Modelo: uiverse.io joe-watson-sbf/rude-shrimp-21 (paineis
lado a lado; o que esta sob o mouse vai de flex 1 para 4, com transicao de
.5s). Aqui: em repouso cada grupo mostra o numero principal, uma linha de
apoio e os alertas; com o mouse ou o foco do teclado o painel vai a 5 partes
e revela os indicadores (que ja estao posicionados na largura final: aparecem
como uma cortina, sem reflow); os outros encolhem e ficam so com o numero.
Sem mouse (toque) ou abaixo de 1200 px: tudo aberto, em grade.
========================================================================= */
.paineis-exp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.painel-exp {
--cor-grupo: var(--ceu-sinal);
position: relative; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
background: var(--ceu-sup); border: 1px solid var(--ceu-fio); border-radius: var(--ceu-r-cartao); box-shadow: var(--ceu-sombra-1);
overflow: hidden; isolation: isolate;
}
.painel-exp[data-grupo="folha"] { --cor-grupo: #F06A26; }
.painel-exp[data-grupo="ferias"] { --cor-grupo: #7C5CFF; }
.painel-exp[data-grupo="rescisoes"] { --cor-grupo: #0E9896; }
.painel-exp[data-grupo="guias"] { --cor-grupo: #12A26B; }
.painel-exp[data-grupo="vagas"] { --cor-grupo: #F06A26; }
.painel-exp[data-grupo="selecao"] { --cor-grupo: #7C5CFF; }
.painel-exp[data-grupo="contratacoes"] { --cor-grupo: #0E9896; }
.painel-exp[data-grupo="doc-colaboradores"] { --cor-grupo: #0E9896; }
.painel-exp[data-grupo="doc-prazos"] { --cor-grupo: #F06A26; }
.painel-exp[data-grupo="doc-categorias"] { --cor-grupo: #7C5CFF; }
/* a luz da cor do grupo no canto (acende no aberto) */
.painel-exp::before {
content: ''; position: absolute; z-index: -1; right: -70px; top: -90px; width: 240px; height: 240px; border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--cor-grupo) 20%, transparent) 0%, transparent 70%);
opacity: .45; transition: opacity .5s var(--ceu-curva), transform .7s var(--ceu-curva); pointer-events: none;
}
.painel-exp-cabeca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.painel-exp-cabeca > .bi {
position: relative; width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 50%; font-size: 14px;
background: color-mix(in srgb, var(--cor-grupo) 14%, transparent); color: var(--cor-grupo); transition: transform .5s var(--ceu-curva);
}
.painel-exp.tem-alerta .painel-exp-cabeca > .bi::after {
content: ''; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--ceu-perda); box-shadow: 0 0 0 2px var(--ceu-sup);
}
.painel-exp-cabeca h2 {
margin: 0; min-width: 0; font-family: var(--ceu-titulo) !important; font-size: 14.5px !important; font-weight: 700 !important; color: var(--ceu-tinta) !important;
letter-spacing: -.01em; word-spacing: .06em; line-height: 1.2;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.painel-exp-ver {
margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ceu-nevoa); white-space: nowrap;
}
.painel-exp-ver:hover { color: var(--ceu-sinal-texto); text-decoration: none; }
.painel-exp-ver .bi { font-size: 11px; transition: transform .4s var(--ceu-curva); }
.painel-exp-ver:hover .bi { transform: translateX(3px); }
.painel-exp-resumo { display: none; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 5px; min-width: 0; margin-top: auto; }
.painel-exp-resumo strong { font-family: var(--ceu-titulo); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--ceu-tinta); font-variant-numeric: tabular-nums; }
.painel-exp-resumo > span:not(.painel-exp-alerta) { font-size: 12.5px; font-weight: 500; color: var(--ceu-nevoa); min-width: 0; }
.painel-exp-resumo small { flex-basis: 100%; font-size: 12px; color: var(--ceu-nevoa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.painel-exp-alerta {
display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
background: var(--ceu-perda-fundo); color: var(--ceu-perda-texto); font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.painel-exp-alerta .bi { font-size: 11px; }
/* os indicadores dentro do painel: a barra sem moldura propria, num fundo afundado */
.paineis-exp .painel-exp-detalhe {
margin: 0 !important; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); background: var(--ceu-realce); border: 1px solid var(--ceu-fio-suave);
border-radius: 14px; box-shadow: none; overflow: hidden;
}
.paineis-exp .painel-exp-detalhe > * { min-height: 0; padding: 8px 12px 9px !important; }
.paineis-exp .painel-exp-detalhe > * .valor { font-size: 22px; }
.paineis-exp .rotulo-dado, .painel-exp-resumo > span { hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 767.98px) { .paineis-exp { grid-template-columns: minmax(0, 1fr); } }
/* desktop com mouse: os paineis expansiveis de verdade */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
/* --abre = quantas partes o painel aberto ocupa (os outros 3 ficam com 1 cada); 5 indicadores pedem mais espaco */
.paineis-exp { --paineis: 4; display: flex; height: 166px; container-type: inline-size; }
.paineis-exp:has(> .painel-exp:nth-child(3):last-child) { --paineis: 3; }
.painel-exp { --abre: 5; flex: 1 1 0; transition: flex-grow .6s var(--ceu-curva), box-shadow .35s, border-color .35s; }
.painel-exp:has(.painel-exp-detalhe > :nth-child(5)) { --abre: 6; }
.paineis-exp:has(> .painel-exp:nth-child(3):last-child) > .painel-exp { --abre: 4; }
.painel-exp-resumo { display: flex; transition: opacity .3s .12s; }
.painel-exp-ver { position: absolute; top: 21px; right: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.painel-exp:is(:hover, :focus-within) .painel-exp-cabeca h2 { padding-right: 130px; }
.paineis-exp .painel-exp-detalhe {
/* largura FINAL do miolo do painel aberto: (largura - vaos de 12 - paineis x (32 de respiro + 2 de borda))
x abre / (abre + paineis - 1); com 4 paineis: (100cqw - 172px) x abre / (abre + 3) */
position: absolute; left: 16px; bottom: 14px;
width: calc((100cqw - (var(--paineis) * 46px - 12px)) * var(--abre) / (var(--abre) + var(--paineis) - 1));
opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s, transform .4s var(--ceu-curva);
}
/* aberto (mouse em cima ou foco do teclado num link de dentro) */
.painel-exp:is(:hover, :focus-within) { flex-grow: var(--abre); box-shadow: var(--ceu-sombra-2); border-color: var(--ceu-fio-forte); }
.painel-exp:is(:hover, :focus-within)::before { opacity: 1; transform: scale(1.3); }
.painel-exp:is(:hover, :focus-within) .painel-exp-cabeca > .bi { transform: rotate(-8deg) scale(1.08); }
.painel-exp:is(:hover, :focus-within) .painel-exp-resumo { opacity: 0; transition: opacity .12s 0s; pointer-events: none; }
.painel-exp:is(:hover, :focus-within) .painel-exp-ver { opacity: 1; pointer-events: auto; transition: opacity .3s .25s; }
.paineis-exp .painel-exp:is(:hover, :focus-within) .painel-exp-detalhe { opacity: 1; pointer-events: auto; transform: none; transition: opacity .3s .2s, transform .55s .2s var(--ceu-curva); }
/* encolhido (outro aberto): so o icone, o nome e o numero */
.paineis-exp:has(.painel-exp:is(:hover, :focus-within)) .painel-exp:not(:hover):not(:focus-within) :is(.painel-exp-resumo small, .painel-exp-alerta) { opacity: 0; }
.paineis-exp:has(.painel-exp:is(:hover, :focus-within)) .painel-exp:not(:hover):not(:focus-within) { background: color-mix(in srgb, var(--ceu-sup) 82%, transparent); }
.paineis-exp:has(.painel-exp:is(:hover, :focus-within)) .painel-exp:not(:hover):not(:focus-within) .painel-exp-cabeca h2 { font-size: 13px !important; }
.paineis-exp:has(.painel-exp:is(:hover, :focus-within)) .painel-exp:not(:hover):not(:focus-within) .painel-exp-resumo > span { font-size: 12px; }
.paineis-exp .painel-exp-detalhe { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.paineis-exp .painel-exp-detalhe > * { padding: 8px 10px 9px !important; }
.paineis-exp .painel-exp-detalhe > * .rotulo-dado { font-size: 12px !important; padding-left: 13px; -webkit-line-clamp: 3; }
}
/* 1200-1439 px: menos largura; o aberto ocupa mais e o encolhido fica sem o icone */
@media (min-width: 1200px) and (max-width: 1439.98px) and (hover: hover) and (pointer: fine) {
.painel-exp { --abre: 6; }
.painel-exp:has(.painel-exp-detalhe > :nth-child(5)) { --abre: 7; }
.paineis-exp:has(> .painel-exp:nth-child(4)):has(.painel-exp:is(:hover, :focus-within)) .painel-exp:not(:hover):not(:focus-within) .painel-exp-cabeca > .bi { display: none; }
}
/* restos dos modelos anteriores, se algum template ainda usar */
.grupos-indicadores, .nd-balancos { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.grupo-indicadores, .nd-balanco { min-width: 0; margin: 0 !important; }
.titulo-grupo-fin { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--ceu-titulo) !important; font-size: 14px; font-weight: 700 !important; color: var(--ceu-tinta) !important; }
.titulo-grupo-fin::after, .nd-balanco::before { display: none !important; content: none !important; }
.grupo-auto { display: contents; }
.grupo-auto > .titulo-grupo-fin { display: none; }
.nd-grafico, .nd-balanco-rodape { display: none !important; }
@media (max-width: 767.98px) {
.faixa-indicadores, .grade-traco, .row:has(> [class*="col"] > .cartao-indicador) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faixa-indicadores > * .valor, .cartao-indicador .valor { font-size: 21px; }
.kpi-linha > .faixa-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* --- Painel (Visao geral) ------------------------------------------------------------------- */
.painel-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1200px) { .painel-grade { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } }
@media (min-width: 1700px) { .painel-grade { grid-template-columns: minmax(0, 1fr) 440px; } }
.painel-principal, .painel-lateral { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
@media (min-width: 1200px) { .painel-lateral { position: sticky; top: calc(var(--altura-topo) + 16px); } }
/* =========================================================================
FICHA DO COLABORADOR: cartao de perfil (Uiverse plastic-turtle-87,
adaptado): faixa colorida pela SITUACAO no alto, foto redonda sobre a
faixa, nome em Inter Tight, os dados em fichas e as acoes embaixo. A cor
vem de data-situacao (ativo, experiencia, ferias, afastado, aprendiz,
desligado). No hover a faixa clareia e a foto cresce um pouco.
========================================================================= */
.card.colaborador-hero, .colaborador-hero {
--perfil-cor: var(--ceu-ok); --perfil-cor-2: #8EE3C2;
position: relative; background: var(--ceu-sup) !important; border: 1px solid var(--ceu-fio) !important; border-radius: 24px !important;
overflow: hidden; box-shadow: var(--ceu-sombra-1) !important; color: var(--ceu-corpo);
}
.colaborador-hero[data-situacao="experiencia"] { --perfil-cor: #F2A007; --perfil-cor-2: #FFD98A; }
.colaborador-hero[data-situacao="ferias"] { --perfil-cor: #0EA5C6; --perfil-cor-2: #9BE3F2; }
.colaborador-hero[data-situacao="afastado"] { --perfil-cor: #7C5CFF; --perfil-cor-2: #C9BCFF; }
.colaborador-hero[data-situacao="aprendiz"] { --perfil-cor: #2E7DEF; --perfil-cor-2: #A9CBFA; }
.colaborador-hero[data-situacao="desligado"] { --perfil-cor: #E5484D; --perfil-cor-2: #F7B1B3; }
.card.colaborador-hero:has(.dropdown-menu.show) { overflow: visible; }
.colaborador-hero::before, .card.colaborador-hero::before {
content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 58px; z-index: 0; border-radius: 24px 24px 0 0;
background:
radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--perfil-cor-2) 90%, #fff) 0%, transparent 60%),
linear-gradient(110deg, color-mix(in srgb, var(--perfil-cor) 32%, #fff) 0%, color-mix(in srgb, var(--perfil-cor-2) 60%, #fff) 45%, #E8F0FA 100%);
transition: height .5s var(--ceu-curva), filter .5s var(--ceu-curva);
}
[data-bs-theme="dark"] .colaborador-hero::before {
background: linear-gradient(110deg, color-mix(in srgb, var(--perfil-cor) 38%, #1B1B1B) 0%, color-mix(in srgb, var(--perfil-cor) 14%, #1B1B1B) 60%, #1B1B1B 100%);
}
.colaborador-hero:hover::before { filter: saturate(1.25) brightness(1.03); height: 62px; }
.colaborador-hero > .card-body {
position: relative; z-index: 1; display: grid !important; grid-template-columns: 88px minmax(0, 1fr);
grid-template-areas: "avatar nome" "avatar desc" "acoes acoes"; gap: 2px 18px; align-items: end; padding: 22px 22px 16px !important;
}
.colaborador-hero > .card-body::before, .colaborador-hero > .card-body::after { display: none !important; content: none !important; }
.colaborador-hero .colaborador-avatar {
grid-area: avatar; width: 88px !important; height: 88px !important; border-radius: 50%; align-self: start;
background: var(--ceu-tinta); border: 4px solid var(--ceu-sup); box-shadow: var(--ceu-sombra-2);
display: grid; place-items: center; overflow: hidden; color: var(--ceu-sobre-tinta); font-family: var(--ceu-titulo); font-weight: 700; font-size: 26px !important; cursor: pointer;
transition: transform .5s var(--ceu-curva);
}
.colaborador-hero:hover .colaborador-avatar { transform: scale(1.05) rotate(-2deg); }
.colaborador-hero .colaborador-avatar img { width: 100%; height: 100%; object-fit: cover; }
.colaborador-hero > .card-body > .flex-grow-1 { display: contents; }
.colaborador-hero > .card-body > .flex-grow-1 > .d-flex { grid-area: nome; padding-top: 40px; }
.colaborador-hero h1 { color: var(--ceu-tinta); font-family: var(--ceu-titulo); font-weight: 700; font-size: 24px; letter-spacing: -.02em; margin: 0; line-height: 1.15; }
.colaborador-hero .meta { grid-area: desc; margin: 4px 0 0; padding: 0; background: none; border: 0; color: var(--ceu-nevoa); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-self: start; }
.colaborador-hero .meta > span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ceu-afundado); border: 1px solid var(--ceu-fio-suave); color: var(--ceu-corpo); white-space: nowrap; }
.colaborador-hero .meta .bi { color: var(--ceu-suave); margin: 0; }
.colaborador-hero .meta code { background: none; border: 0; padding: 0; color: var(--ceu-tinta); font-weight: 600; font-family: var(--ceu-fonte); }
.colaborador-hero .meta > span + span::before { content: none; }
.colaborador-hero .acoes-hero { grid-area: acoes; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--ceu-fio-suave); padding-top: 14px; margin-top: 14px; }
.colaborador-hero .acoes-hero .btn:not(.btn-primary) { --b-fundo: var(--ceu-sup); --b-texto: var(--ceu-tinta); --b-fio: var(--ceu-fio); --b-onda: var(--ceu-afundado-2); --b-onda-texto: var(--ceu-tinta); }
.colaborador-hero .acoes-hero .btn { height: 30px; min-height: 30px; padding: 0 12px; font-size: 12px; }
.colaborador-hero .acoes-hero .btn.acao-excluir { --b-texto: var(--ceu-perda-texto); --b-fio: rgba(229,72,77,.4); --b-onda: var(--ceu-perda); --b-onda-texto: #fff; }
@media (max-width: 575.98px) {
.colaborador-hero > .card-body { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "avatar nome" "desc desc" "acoes acoes"; padding: 18px 16px 14px !important; }
.colaborador-hero .colaborador-avatar { width: 64px !important; height: 64px !important; font-size: 20px !important; }
.colaborador-hero > .card-body > .flex-grow-1 > .d-flex { padding-top: 30px; }
.colaborador-hero h1 { font-size: 19px; }
}
/* =========================================================================
TELA DE ENTRADA: ceu, marca em tinta a esquerda (onde o personagem 3D
entra), formulario num cartao branco de canto 28. As cores do lado do
formulario continuam vindo da Personalizacao (--entrada-*); o padrao de
fabrica voltou ao do Cirrus (contas 0038/0039).
========================================================================= */
.tela-entrada {
font-family: var(--ceu-fonte); color: var(--entrada-texto);
background-color: var(--entrada-fundo) !important;
background-image:
radial-gradient(62% 38% at 18% 78%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 62%),
radial-gradient(52% 34% at 82% 70%, rgba(255,255,255,.80) 0%, rgba(255,255,255,0) 60%),
radial-gradient(48% 30% at 50% 18%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%),
linear-gradient(180deg, color-mix(in srgb, var(--entrada-fundo) 70%, #9EC3EC) 0%, var(--entrada-fundo) 75%) !important;
}
.tela-entrada .lado-marca { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; color: var(--entrada-texto); }
.tela-entrada .lado-marca::before, .tela-entrada .lado-marca::after { display: none !important; }
.tela-entrada .lado-marca, .tela-entrada .lado-marca .titulo-entrada, .tela-entrada .lado-marca .marca-topo strong { color: var(--entrada-texto) !important; }
.tela-entrada .lado-marca p, .tela-entrada .lado-marca .texto-entrada, .tela-entrada .lado-marca .marca-topo span, .tela-entrada .lado-marca .rodape-entrada, .tela-entrada .lado-marca small { color: var(--entrada-texto-2) !important; }
.tela-entrada .marca-icone { background: #fff; border: 1px solid #E3E8EE; border-radius: 14px; box-shadow: var(--ceu-sombra-1); }
.tela-entrada .titulo-entrada, .tela-entrada .cabeca-form h2, .tela-entrada .marca-topo strong { font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.025em; text-transform: none; }
.tela-entrada .titulo-entrada { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.06; }
.tela-entrada .sobretitulo-entrada { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--entrada-texto-2) !important; }
.tela-entrada .destaques-entrada li { border: 1px solid #E3E8EE !important; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--entrada-texto) !important; box-shadow: var(--ceu-sombra-1); font-size: 13px; }
.tela-entrada .destaques-entrada li svg, .tela-entrada .destaques-entrada li .bi { color: var(--entrada-texto-2); stroke: var(--entrada-texto-2); }
.tela-entrada .rodape-entrada { font-size: 12px; }
.tela-entrada .lado-form { background: transparent !important; }
.tela-entrada .coluna-entrada { background: #FFFFFF; border: 1px solid #E3E8EE; border-radius: 28px; box-shadow: var(--ceu-sombra-2); padding: 30px 28px; width: min(100%, 410px); }
.tela-entrada .cabeca-form h2 { font-size: 26px; color: #0E1116; } .tela-entrada .cabeca-form p { color: #5B6472; font-size: 13px; }
.tela-entrada .rotulo-entrada { font-size: 12px; font-weight: 500; color: #5B6472; text-transform: none; letter-spacing: 0; }
.tela-entrada .grupo-entrada { margin: 0 0 14px; }
.tela-entrada .campo-entrada, .tela-entrada .campo-entrada.campo-brutal {
all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; height: 52px; padding: 0 16px;
background: var(--entrada-campo); border: 1px solid #E3E8EE; border-radius: 999px; cursor: text; position: relative; transform: none; box-shadow: none;
transition: border-color .18s, box-shadow .18s;
}
.tela-entrada .campo-entrada::after, .campo-brutal__sombra { display: none !important; content: none !important; }
.tela-entrada .campo-entrada:hover { border-color: #CFD7E1; }
.tela-entrada .campo-entrada:focus-within { border-color: #2E7DEF; box-shadow: 0 0 0 3px rgba(46,125,239,.25); }
.tela-entrada .campo-entrada .campo-entrada__input, .tela-entrada .campo-brutal .campo-entrada__input { all: unset; box-sizing: border-box; flex: 1 1 auto; min-width: 0; height: 100%; padding-top: 14px; font: 500 14px/1 var(--ceu-fonte); color: var(--entrada-campo-texto); background: transparent; border: 0; box-shadow: none; }
.tela-entrada .campo-brutal .campo-entrada__input:-webkit-autofill { -webkit-text-fill-color: var(--entrada-campo-texto); box-shadow: 0 0 0 1000px var(--entrada-campo) inset; }
.tela-entrada .olho-entrada, .tela-entrada .campo-brutal .olho-entrada { all: unset; cursor: pointer; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #8A93A3; }
.tela-entrada .olho-entrada:hover, .tela-entrada .olho-entrada[aria-pressed="true"] { background: #F3F6FA; color: #0E1116; }
.tela-entrada .olho-entrada svg { width: 16px; height: 16px; }
.tela-entrada .opcao-entrada { color: #5B6472; font-size: 13px; margin: 2px 0 16px; }
.tela-entrada .opcao-entrada input { accent-color: var(--entrada-botao); width: 16px; height: 16px; }
.tela-entrada .botao-entrada {
position: relative; overflow: hidden; isolation: isolate; height: 50px; border-radius: 999px; font-family: var(--ceu-fonte); font-weight: 600; font-size: 14px;
background: var(--entrada-botao); color: var(--entrada-botao-texto); border: 0; box-shadow: var(--ceu-sombra-2); transform: none; transition: transform .35s var(--ceu-curva), color .4s;
}
.tela-entrada .botao-entrada::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 24px; height: 24px; border-radius: 50%; background: var(--entrada-botao-hover); transform: translate(-50%, -50%) scale(0); transition: transform .6s var(--ceu-curva); }
.tela-entrada .botao-entrada:hover { background: var(--entrada-botao); color: var(--entrada-botao-texto); transform: translateY(-1px); }
.tela-entrada .botao-entrada:hover::before { transform: translate(-50%, -50%) scale(22); }
.tela-entrada .botao-entrada:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(46,125,239,.35); }
.tela-entrada .nota-entrada { color: #8A93A3; font-size: 12px; }
.tela-entrada .form-entrada .alert { border-radius: 16px; border: 1px solid rgba(229,72,77,.4); background: #FFF5F5; color: #222B36; }
/* rotulo flutuante (Uiverse liyaxu123/warm-eel-62) + icone dentro do campo (micaelgomestavares/dull-walrus-66) */
.tela-entrada .campo-brutal__icone { display: grid !important; place-items: center; width: 20px; height: 20px; flex: none; color: #8A93A3; transition: color .2s; }
.tela-entrada .campo-entrada:focus-within .campo-brutal__icone { color: #2E7DEF; }
.tela-entrada .campo-brutal__icone svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.tela-entrada .campo-entrada.campo-brutal::before, .tela-entrada .campo-entrada::before {
content: attr(data-rotulo); display: block !important; position: absolute; left: 46px; top: 50%; transform: translateY(-50%); transform-origin: left center;
background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; line-height: 1 !important;
font: 500 14px/1 var(--ceu-fonte) !important; color: #8A93A3 !important; text-transform: none !important; letter-spacing: 0 !important; pointer-events: none; z-index: 1;
transition: transform .3s cubic-bezier(.68, -.55, .265, 1.55), color .2s;
}
.tela-entrada .campo-entrada:focus-within::before, .tela-entrada .campo-entrada:has(.campo-entrada__input:not(:placeholder-shown))::before {
transform: translateY(-21px) scale(.8); color: #5B6472 !important;
}
.tela-entrada .campo-entrada .campo-entrada__input::placeholder, .tela-entrada .campo-brutal .campo-entrada__input::placeholder { color: transparent; transition: color .2s; }
.tela-entrada .campo-entrada:focus-within .campo-entrada__input::placeholder { color: #B4BCC8; }
@media (max-width: 991.98px) { .tela-entrada .coluna-entrada { width: 100%; padding: 24px 20px; } }
/* =========================================================================
PAGINAS PUBLICAS (Trabalhe Conosco e Ouvidoria): o mesmo ceu, cartoes brancos
========================================================================= */
.pagina-publica { background-color: var(--ceu-pagina) !important; background-image: var(--ceu-fundo) !important; background-attachment: fixed !important; background-size: cover !important; color: var(--ceu-corpo); }
.pagina-publica .publico-heroi { background: var(--ceu-sup) !important; background-image: none !important; color: var(--ceu-tinta) !important; border: 1px solid var(--ceu-fio) !important; border-radius: 28px !important; box-shadow: var(--ceu-sombra-2) !important; margin: 18px auto 0; width: min(100% - 2rem, 880px); overflow: hidden; }
.pagina-publica .publico-heroi::before, .pagina-publica .publico-heroi::after { display: none !important; }
.pagina-publica .publico-heroi h1 { color: var(--ceu-tinta) !important; font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.02em; }
.pagina-publica .publico-heroi p, .pagina-publica .publico-heroi .publico-heroi-extra { color: var(--ceu-nevoa) !important; }
.pagina-publica .publico-heroi .publico-sobretitulo { color: var(--ceu-nevoa) !important; }
.pagina-publica .publico-logo-caixa { background: #fff; border: 1px solid var(--ceu-fio) !important; border-radius: 20px !important; box-shadow: var(--ceu-sombra-1); }
.pagina-publica .publico-selo, .pagina-publica .publico-heroi .publico-selo { background: var(--ceu-afundado) !important; color: var(--ceu-corpo) !important; border: 1px solid var(--ceu-fio) !important; border-radius: 999px !important; font-size: 12px; font-weight: 500; box-shadow: none; }
@media (max-width: 767.98px) { .pagina-publica .publico-heroi { margin-top: 12px; border-radius: 22px !important; } }
.pagina-publica .publico-bloco, .pagina-publica .ouv-card, .pagina-publica .ouv-acompanhar, .pagina-publica .ouv-privacidade, .pagina-publica .termo-lgpd {
background: var(--ceu-sup) !important; background-image: none !important; border: 1px solid var(--ceu-fio) !important; border-radius: var(--ceu-r-cartao) !important; box-shadow: var(--ceu-sombra-1) !important; overflow: hidden; color: var(--ceu-corpo);
}
.pagina-publica .publico-largura > .publico-bloco, .pagina-publica .publico-largura > form > .publico-bloco { margin-bottom: 16px; }
.pagina-publica .publico-bloco > header { border-bottom: 1px solid var(--ceu-fio-suave); padding-bottom: 12px; margin-bottom: 16px; gap: 10px; background: transparent; }
.pagina-publica .publico-bloco > header h2 { font-family: var(--ceu-titulo); font-size: 16px; font-weight: 700; color: var(--ceu-tinta); letter-spacing: -.01em; }
.pagina-publica .publico-bloco .passo, .pagina-publica .publico-bloco > header .passo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--ceu-tinta); border: 0; color: var(--ceu-sobre-tinta); font-weight: 700; font-size: 12px; box-shadow: none; }
.pagina-publica .ouv-card .icone, .pagina-publica .ouv-acompanhar .icone, .pagina-publica .publico-sucesso .icone { border-radius: 50% !important; border: 0 !important; background: color-mix(in srgb, var(--cor, var(--ceu-sinal)) 14%, transparent) !important; color: var(--cor, var(--ceu-tinta)) !important; box-shadow: none; }
.pagina-publica .ouv-card strong, .pagina-publica .ouv-acompanhar strong { font-weight: 600; color: var(--ceu-tinta); }
.pagina-publica .ouv-card p, .pagina-publica .ouv-acompanhar p, .pagina-publica .publico-bloco p, .pagina-publica .form-text, .pagina-publica label, .pagina-publica .form-label { color: var(--ceu-nevoa); }
.pagina-publica .ouv-card, .pagina-publica .ouv-acompanhar { transition: transform .4s var(--ceu-curva), box-shadow var(--ceu-dur), border-color var(--ceu-dur); }
.pagina-publica .ouv-card:hover, .pagina-publica .ouv-acompanhar:hover, .pagina-publica .ouv-card:focus-visible, .pagina-publica .ouv-acompanhar:focus-visible { transform: translateY(-3px); border-color: var(--ceu-fio-forte) !important; box-shadow: var(--ceu-sombra-2) !important; }
.pagina-publica .ouv-card.denuncia { --cor: var(--ceu-perda); } .pagina-publica .ouv-card.sugestao { --cor: var(--ceu-sinal); } .pagina-publica .ouv-card.elogio { --cor: var(--ceu-verde-acao); }
.pagina-publica .ouv-pergunta h2, .pagina-publica .publico-sucesso h1, .pagina-publica h1, .pagina-publica h2, .pagina-publica h3 { color: var(--ceu-tinta); font-family: var(--ceu-titulo); font-weight: 700; }
.pagina-publica .ouv-aviso-anonimo { background: color-mix(in srgb, var(--ceu-atencao) 9%, var(--ceu-sup)) !important; border: 1px solid var(--r-alerta-borda) !important; border-left-width: 1px !important; border-radius: 16px !important; color: var(--ceu-corpo); box-shadow: none !important; }
.pagina-publica .ouv-aviso-anonimo .bi { color: var(--ceu-atencao-texto); }
.pagina-publica .ouv-privacidade { padding: 12px 16px; }
.pagina-publica .ouv-passos li span { border-radius: 50%; border: 1px solid var(--ceu-fio); background: var(--ceu-sup); color: var(--ceu-nevoa); box-shadow: none; }
.pagina-publica .ouv-passos li.ativo span { background: var(--ceu-tinta); border-color: var(--ceu-tinta); color: var(--ceu-sobre-tinta); }
.pagina-publica .ouv-passos li.ativo { color: var(--ceu-tinta); font-weight: 600; }
.pagina-publica .ouv-passos li.feito span { background: var(--ceu-ok-fundo); border-color: transparent; color: var(--ceu-ok-texto); }
.pagina-publica .ouv-passos li + li::before { background: var(--ceu-fio); }
.pagina-publica .ouv-opcao, .ouv-opcao { border: 1px solid var(--ceu-fio); border-radius: 999px; background: var(--ceu-sup); box-shadow: none; color: var(--ceu-corpo); }
.pagina-publica .ouv-opcao:has(input:checked), .ouv-opcao:has(input:checked) { background: var(--ceu-tinta); border-color: var(--ceu-tinta); color: var(--ceu-sobre-tinta); box-shadow: var(--ceu-sombra-2); font-weight: 600; }
.pagina-publica .ouv-progresso .barra { height: 6px; border-radius: 999px; border: 0; background: var(--ceu-afundado-2); }
.pagina-publica .ouv-progresso .barra span { background: var(--ceu-sinal); border-radius: 999px; }
.pagina-publica .ouv-credenciais .item, .pagina-publica .ouv-status-atual, .pagina-publica .ouv-lista-anexos li, .pagina-publica .bloco-representante, .pagina-publica .captura-palco { border: 1px solid var(--ceu-fio) !important; border-radius: 16px !important; background: var(--ceu-afundado) !important; box-shadow: none; color: var(--ceu-corpo); }
.pagina-publica .ouv-credenciais code { color: var(--ceu-tinta); font-size: 1em; }
.pagina-publica .ouv-solta { border: 1px dashed var(--ceu-fio-forte); border-radius: 18px; background: var(--ceu-realce); color: var(--ceu-nevoa); }
.pagina-publica .ouv-solta.sobre { border-color: var(--ceu-sinal); background: var(--ceu-sinal-fundo); }
.pagina-publica .ouv-solta .bi { color: var(--ceu-nevoa); }
.pagina-publica .publico-rodape { border-top: 0; color: var(--ceu-suave); font-size: 12px; }
.publico-form .form-control, .publico-form .form-select, .ouv-form .form-control, .ouv-form .form-select { min-height: 42px; height: 42px; font-size: 14px; }
.publico-form textarea.form-control, .ouv-form textarea.form-control { height: auto; }
.pagina-publica .btn-primary, .pagina-publica .btn-lg { height: 44px; min-height: 44px; font-size: 14px; }
/* =========================================================================
ELEMENTOS DO UIVERSE (09/10/2026, mantidos da Nightdesk e recoloridos)
========================================================================= */
/* Switch iOS (zanina-yassine/afraid-eel-50) -> todo .form-switch */
.form-switch .form-check-input, .form-switch .form-check-input:checked[type="checkbox"] {
width: 40px !important; height: 22px; margin: 0 .5rem 0 0 !important; border-radius: 999px !important; position: relative; flex: none; float: none;
background: var(--ceu-afundado-2) !important; background-image: none !important; border: 0 !important; cursor: pointer; box-shadow: inset 0 0 0 1px var(--ceu-fio-forte);
transition: background .2s ease-out, box-shadow .2s;
}
.form-switch .form-check-input::before {
content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .25s var(--ceu-curva);
}
.form-switch .form-check-input:checked, .form-switch .form-check-input:checked[type="checkbox"], [data-bs-theme="light"] .form-switch .form-check-input:checked[type="checkbox"] { background: var(--ceu-verde-acao) !important; box-shadow: none; }
.form-switch .form-check-input:checked::before { transform: translateX(18px); }
.form-switch .form-check-input:focus-visible { box-shadow: var(--ceu-foco) !important; }
.form-switch .form-check-input:disabled { opacity: .45; }
.form-switch, .form-check.form-switch { padding-left: 0 !important; min-height: 22px; display: flex; align-items: center; gap: 0; }
.form-switch .form-check-label { margin: 0; }
.interruptor-ciss .toggle-label { background-color: var(--ceu-afundado-2) !important; }
.interruptor-ciss .toggle-input:checked + .toggle-label { background-color: var(--ceu-verde-acao) !important; }
/* Caixa (Cirrus: 18 px, canto 8, marcada em tinta) com o "respingo" do Uiverse Shoh2008/big-deer-80 so ao marcar */
.form-check-input { box-shadow: none; }
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input) {
width: 18px; height: 18px; flex: none; border-radius: var(--ceu-r-check) !important; border: 1.5px solid var(--ceu-fio-forte); background-color: var(--ceu-sup);
margin-top: .12em; transition: background-color .2s, border-color .2s, transform .25s var(--ceu-curva);
}
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):hover { border-color: var(--ceu-nevoa); }
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked,
[data-bs-theme="light"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked,
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked {
background-color: var(--ceu-tinta) !important; border-color: var(--ceu-tinta) !important; background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14' fill='none'%3e%3cpath d='M2 8.36364L6.23077 12L13 2' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
}
[data-bs-theme="dark"] .form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 14' fill='none'%3e%3cpath d='M2 8.36364L6.23077 12L13 2' stroke='%23121212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important; }
.form-check-input[type="checkbox"]:not(.form-switch .form-check-input):checked:focus { animation: ceu-respingo .6s ease forwards; }
@keyframes ceu-respingo {
40% { box-shadow: 0 -13px 0 -6px var(--ceu-sinal), 11px -6px 0 -6px var(--ceu-ok), 11px 6px 0 -6px var(--ceu-citrus), 0 13px 0 -6px var(--ceu-sinal), -11px 6px 0 -6px var(--ceu-ok), -11px -6px 0 -6px var(--ceu-citrus); }
100% { box-shadow: 0 -26px 0 -8px transparent, 22px -12px 0 -8px transparent, 22px 12px 0 -8px transparent, 0 26px 0 -8px transparent, -22px 12px 0 -8px transparent, -22px -12px 0 -8px transparent; }
}
.form-check-input[type="radio"] { width: 18px; height: 18px; flex: none; border: 1.5px solid var(--ceu-fio-forte); background-color: var(--ceu-sup); margin-top: .12em; }
.form-check-input[type="radio"]:checked { background-color: var(--ceu-tinta) !important; border-color: var(--ceu-tinta) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.8' fill='%23fff'/%3e%3c/svg%3e") !important; }
[data-bs-theme="dark"] .form-check-input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='1.8' fill='%23121212'/%3e%3c/svg%3e") !important; }
.form-check-input:focus { box-shadow: var(--ceu-foco); }
.form-check { display: flex; align-items: flex-start; gap: 8px; padding-left: 0; min-height: 22px; }
.form-check .form-check-input { float: none; margin-left: 0; }
.form-check-label { cursor: pointer; }
/* Segmentado com "glider" (chase2k25/slimy-chipmunk-97) -> .nd-segmentado (competencia das Apuracoes) */
.nd-segmentado {
position: relative; display: inline-flex; align-items: stretch; height: var(--ceu-controle); max-width: 100%; padding: 3px;
background: var(--ceu-afundado); border: 1px solid var(--ceu-fio); border-radius: 999px; isolation: isolate; overflow: hidden;
}
.filtros-compactos .nd-segmentado { height: 34px; }
.nd-segmentado input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.nd-segmentado label {
position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; padding: 0 12px; margin: 0;
font: 600 12px/1 var(--ceu-fonte); color: var(--ceu-nevoa); cursor: pointer; border-radius: 999px; white-space: nowrap; transition: color .2s;
}
.nd-segmentado label:hover { color: var(--ceu-tinta); }
.nd-segmentado input:checked + label { color: var(--ceu-sobre-tinta); }
.nd-segmentado input:focus-visible + label { box-shadow: var(--ceu-foco); }
.nd-segmentado-glider {
position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 0; width: 0; opacity: 0; box-sizing: border-box;
border-radius: 999px; background: var(--ceu-tinta); box-shadow: var(--ceu-sombra-2);
transition: transform .45s cubic-bezier(.37, 1.4, .66, .7), width .3s ease, opacity .2s;
}
.nd-segmentado-glider.pronto { opacity: 1; }
.nd-segmentado:not(:has(.nd-segmentado-glider.pronto)) input:checked + label { background: var(--ceu-tinta); }
/* Busca em capsula (satyamchaudharydev/tasty-dingo-5) -> .campo-busca */
.campo-busca, .filtros-compactos .campo-busca {
display: flex; align-items: center; gap: 8px; height: var(--ceu-controle); min-height: var(--ceu-controle); padding: 0 14px;
border-radius: 999px; background-color: var(--ceu-sup); border: 1px solid var(--ceu-fio); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.campo-busca:hover { border-color: var(--ceu-fio-forte); }
.campo-busca:focus-within { border-color: var(--ceu-sinal); box-shadow: var(--ceu-foco); }
.campo-busca .bi { position: static; transform: none; color: var(--ceu-suave); font-size: 14px; transition: color .2s, transform .35s var(--ceu-curva); }
.campo-busca:focus-within .bi { color: var(--ceu-sinal); transform: scale(1.1); }
.campo-busca .form-control, .campo-busca input { border: 0 !important; background: transparent !important; box-shadow: none !important; min-height: 32px; height: 32px; padding: 0 !important; flex: 1 1 auto; border-radius: 0; }
.campo-busca .form-control::placeholder, .campo-busca input::placeholder { color: var(--ceu-suave); }
.campo-busca .form-control-sm { min-height: 26px; height: 26px; }
/* Loader de barras (aryamitra06/silent-lion-21) no botao que enviou o formulario (tema.js) */
.btn.nd-carregando { position: relative; pointer-events: none; }
.btn.nd-carregando > :not(.nd-loader) { visibility: hidden; }
.btn.nd-carregando::before { display: none; }
.nd-loader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--b-texto, var(--ceu-tinta)); }
.nd-loader i { display: block; width: 3px; height: 11px; border-radius: 3px; background: currentColor; opacity: .5; animation: nd-barras 1s linear infinite; }
.nd-loader i:nth-child(2) { height: 17px; animation-delay: .25s; }
.nd-loader i:nth-child(3) { animation-delay: .5s; }
@keyframes nd-barras { 20% { opacity: 1; transform: scaleY(1.5); } 40% { transform: scaleY(1); } }
/* Dica em capsula (gharsh11032000/spotty-zebra-83) -> menu recolhido e tooltips do Bootstrap */
.menu-dica {
position: fixed; z-index: 1080; opacity: 0; pointer-events: none; white-space: nowrap;
border-radius: 999px; padding: 6px 12px; background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); border: 0; font-size: 12px; font-weight: 600; box-shadow: var(--ceu-sombra-pop);
transform: translate(-6px, -50%) scale(.92); transition: opacity .15s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.menu-dica.visivel { opacity: 1; transform: translate(0, -50%) scale(1); }
.menu-dica::before { content: ''; position: absolute; left: -4px; top: 50%; width: 10px; height: 10px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 2px; }
body.menu-compacto .menu-item::after, body.menu-compacto .menu-recolher::after { display: none !important; }
@media (max-width: 991.98px) { .menu-dica { display: none; } }
.tooltip-inner { background: var(--ceu-tinta); color: var(--ceu-sobre-tinta); border: 0; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: 12px; box-shadow: var(--ceu-sombra-pop); }
.tooltip.bs-tooltip-top .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--ceu-tinta) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before, .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--ceu-tinta) !important; }
/* Radio em lista (reglobby/red-mayfly-78) -> documento valido da rescisao */
.documento-valido { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--ceu-afundado); border: 1px solid var(--ceu-fio); border-radius: 16px; }
.documento-valido .form-check, .documento-valido .check-redondo {
position: relative; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px 8px 14px; min-height: 0;
border-radius: 12px; cursor: pointer; transition: background .15s;
}
.documento-valido .form-check:hover, .documento-valido .check-redondo:hover { background: var(--ceu-sup); }
.documento-valido .form-check:has(input:checked), .documento-valido .check-redondo:has(input:checked) { background: var(--ceu-sup); box-shadow: var(--ceu-sombra-1); }
.documento-valido .form-check::before, .documento-valido .check-redondo::before {
content: ''; position: absolute; left: 4px; top: 24%; height: 52%; width: 3px; border-radius: 3px; background: var(--ceu-tinta); opacity: 0; transition: opacity .15s;
}
.documento-valido .form-check:has(input:checked)::before, .documento-valido .check-redondo:has(input:checked)::before { opacity: 1; }
.documento-valido .form-check-input { margin: 0; }
.documento-valido .form-check-label, .documento-valido .texto { color: var(--ceu-corpo); }
.documento-valido .form-check:has(input:checked) .form-check-label, .documento-valido .check-redondo:has(input:checked) .texto { color: var(--ceu-tinta); font-weight: 600; }
.documento-valido > .small.text-danger { padding: 8px 12px; }
/* =========================================================================
CELULAR E TABLET
========================================================================= */
@media (max-width: 991.98px) {
.menu-lateral { inset: 0 auto 0 0; border-radius: 0 24px 24px 0; height: 100vh; border-left: 0 !important; }
.area { margin-left: 0 !important; }
.topo { padding: 8px 12px; }
.guias, .guias-linha { margin-bottom: 14px; }
.guias-linha.guias-fixas { margin-bottom: 6px; }
.conteudo { --conteudo-pad-x: 12px; padding: 10px var(--conteudo-pad-x) 80px; }
.rodape-app { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 767.98px) {
.guias { display: none !important; } /* no celular as guias viram o select (base.html) */
.guias-linha { display: none !important; }
.visao-como-botao .visao-como-rotulo { display: none; }
.clima-resumo span, .clima-pilula span { display: none; }
.cabecalho-pagina .titulo h1, .conteudo h1.h4 { font-size: 21px; }
.btn { min-height: 38px; height: 38px; }
.btn-sm { min-height: 32px; height: 32px; }
.form-control, .form-select, .select-bonito-alvo, .campo-busca { min-height: 40px; height: 40px; }
.table > :not(caption) > * > * { height: auto; padding-top: 10px; padding-bottom: 10px; }
}
/* menu do grupo perto da borda direita abre para a esquerda (tema.js poe .abre-esquerda) */
.guia-grupo.abre-esquerda > .guia-sub { left: auto; right: 0; transform-origin: top right; }
/* Ficha do candidato e da entrevista (.hero-ficha): o mesmo cartao de perfil, com a faixa no tom do
recrutamento (azul do sinal) e a foto/iniciais sobre ela. */
.card.hero-ficha { position: relative; border-radius: 24px !important; }
.card.hero-ficha::before {
content: '' !important; display: block !important; position: absolute; left: 0; right: 0; top: 0; height: 46px; z-index: 0; border-radius: 24px 24px 0 0;
/* 11/10/2026 ("a cor azul esta a mesma cor do fundo"): azul firme, que se separa do ceu do fundo */
background: radial-gradient(90% 160% at 100% 0%, rgba(255,255,255,.22) 0%, transparent 55%), linear-gradient(110deg, #1F5FD0 0%, #2E7DEF 45%, #5C9DF5 100%);
transition: height .5s var(--ceu-curva);
}
[data-bs-theme="dark"] .card.hero-ficha::before { background: linear-gradient(110deg, #1D4FA8 0%, #2A6AD0 50%, color-mix(in srgb, #2E7DEF 45%, #1B1B1B) 100%); }
.card.hero-ficha:hover::before { height: 50px; }
.hero-ficha > .card-body { position: relative; z-index: 1; padding: 56px 22px 16px !important; align-items: flex-end !important; }
.hero-ficha .avatar.xl { border: 4px solid var(--ceu-sup); box-shadow: var(--ceu-sombra-2); align-self: flex-start; margin-top: -36px; transition: transform .5s var(--ceu-curva); }
.hero-ficha:hover .avatar.xl { transform: scale(1.05) rotate(-2deg); }
.hero-ficha h1, .hero-ficha .h4 { font-family: var(--ceu-titulo); font-weight: 700; letter-spacing: -.02em; font-size: 22px; }
/* Listas do Financeiro (11/10/2026, pedido "muito baguncado, muita informacao na tela"):
subguias + busca numa linha, "Mais filtros" recolhido, Lancar rescisao no cabecalho,
linha vencida marcada so na borda esquerda (o prazo ja vem em vermelho). */
.cabecalho-lista-fin { align-items: center; }
.cabecalho-lista-fin .titulo p { margin-bottom: 0; }
.lancar-rescisao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.lancar-rescisao .form-select { width: auto; min-width: 15rem; max-width: 22rem; }
.barra-lista-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.barra-lista-fin .subguias { margin: 0 !important; }
.busca-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 auto; }
.busca-fin .campo-busca { width: 14rem; max-width: 100%; }
.busca-fin .form-select { width: auto; min-width: 10rem; max-width: 14rem; }
.busca-fin .campo-mes { width: 10.5rem; }
.busca-fin .btn.active { background: var(--ceu-tinta) !important; color: var(--ceu-sup) !important; border-color: var(--ceu-tinta) !important; }
.busca-fin .btn.active .contagem-subguia { background: color-mix(in srgb, var(--ceu-sup) 22%, transparent); color: inherit; }
.contagem-subguia.contagem-alerta { background: var(--ceu-perda-fundo); color: var(--ceu-perda-texto); }
.subguia.ativa .contagem-subguia.contagem-alerta { background: var(--ceu-perda); color: #fff; }
.intervalo-datas { display: flex; align-items: center; gap: 6px; }
.intervalo-datas .form-control { flex: 1 1 0; min-width: 0; }
.intervalo-datas > span { font-size: 12px; color: var(--ceu-nevoa); }
.table tbody tr.linha-vencida > td:first-child { box-shadow: inset 3px 0 0 var(--ceu-perda); }
@media (max-width: 991.98px) {
.busca-fin { margin-left: 0; width: 100%; }
.busca-fin .campo-busca { flex: 1 1 12rem; width: auto; }
.lancar-rescisao { width: 100%; }
.lancar-rescisao .form-select { flex: 1 1 12rem; max-width: none; min-width: 0; }
}
@media (max-width: 767.98px) {
.tabela-cartoes td.text-nowrap, .tabela-cartoes tfoot td { white-space: normal !important; }
}
@media (max-width: 575.98px) {
.visao-como-botao.btn { width: 38px; padding: 0 !important; justify-content: center; }
.visao-como-botao strong, .visao-como-botao .seta { display: none; }
}
/* =========================================================================
ESCOLHA (11/10/2026): barra deslizante e pilulas com icone, widget rhreal.escolha.Escolha
(uiverse.io Saiyed-Tanvir/stale-parrot-18 e Yaya12085/silent-liger-85, MIT). Usado em todo
campo de 2 a 5 opcoes fixas; a cor da opcao vem de data-cor (sinal, ok, atencao, perda, violeta, neutro).
========================================================================= */
:is(.barra-escolha-opcao, .cartao-radio)[data-cor] { --cor: var(--ceu-nevoa); --cor-texto: var(--ceu-tinta); --cor-fundo: var(--ceu-afundado); }
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="sinal"] { --cor: var(--ceu-sinal); --cor-texto: var(--ceu-sinal-texto, var(--ceu-sinal)); --cor-fundo: var(--ceu-sinal-fundo); }
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="ok"] { --cor: var(--ceu-ok); --cor-texto: var(--ceu-ok-texto); --cor-fundo: var(--ceu-ok-fundo); }
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="perda"] { --cor: var(--ceu-perda); --cor-texto: var(--ceu-perda-texto); --cor-fundo: var(--ceu-perda-fundo); }
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="atencao"] { --cor: var(--ceu-atencao); --cor-texto: var(--ceu-atencao-texto); --cor-fundo: var(--ceu-atencao-fundo); }
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="violeta"] { --cor: var(--ceu-violeta); --cor-texto: var(--ceu-violeta-texto); --cor-fundo: var(--ceu-violeta-fundo); }
/* barra deslizante */
.barra-escolha { --n: 3; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); width: max-content; min-width: min(100%, calc(var(--n) * 6.5rem)); max-width: 100%; height: 34px;
border: 1px solid var(--ceu-fio); border-radius: 999px; background: var(--ceu-afundado); padding: 3px; isolation: isolate;
transition: transform .6s var(--ceu-curva); perspective: 900px; }
.barra-escolha-opcao { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0; cursor: pointer; border-radius: 999px;
font: 600 12.5px/1 var(--ceu-fonte); color: var(--ceu-nevoa); transition: color .2s; user-select: none; }
.barra-escolha-opcao > span { display: inline-flex; align-items: center; gap: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 12px; }
.barra-escolha-opcao .bi { font-size: 13px; }
.barra-escolha-opcao input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.barra-escolha-opcao:hover { color: var(--ceu-tinta); }
.barra-escolha-opcao:has(input:focus-visible) { box-shadow: var(--ceu-foco); }
.barra-escolha-opcao:has(input:checked) { color: #fff; }
.barra-escolha-opcao[data-cor="neutro"]:has(input:checked) { color: var(--ceu-tinta); }
/* ciano (12/10/2026, ferias) */
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="ciano"] { --cor: #06B6D4; --cor-texto: #0E7490; --cor-fundo: rgba(6,182,212,.12); }
[data-bs-theme="dark"] :is(.barra-escolha-opcao, .cartao-radio)[data-cor="ciano"] { --cor-texto: #67E8F9; }
.barra-escolha:has([data-cor="ciano"] input:checked) .barra-escolha-marca { background: #06B6D4; box-shadow: 0 3px 10px rgba(6,182,212,.40); }
/* rosa (12/10/2026, sexo feminino) */
:is(.barra-escolha-opcao, .cartao-radio)[data-cor="rosa"] { --cor: #D9479A; --cor-texto: #B32A78; --cor-fundo: rgba(217,71,154,.12); }
[data-bs-theme="dark"] :is(.barra-escolha-opcao, .cartao-radio)[data-cor="rosa"] { --cor-texto: #F08CC6; }
.barra-escolha:has([data-cor="rosa"] input:checked) .barra-escolha-marca { background: #D9479A; box-shadow: 0 3px 10px rgba(217,71,154,.40); }
.barra-escolha:has([data-cor="violeta"] input:checked) .barra-escolha-marca { background: var(--ceu-violeta); box-shadow: 0 3px 10px color-mix(in srgb, var(--ceu-violeta) 40%, transparent); }
.barra-escolha:has(.barra-escolha-opcao:nth-child(5) input:checked) .barra-escolha-marca { transform: translateX(400%); }
.barra-escolha-opcao:has(input:disabled), .cartao-radio:has(input:disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
.barra-escolha-marca { position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--n)); border-radius: 999px; opacity: 0;
background: var(--ceu-sup); box-shadow: var(--ceu-sombra-2); transition: transform .3s var(--ceu-curva), background-color .25s, box-shadow .25s, opacity .2s; }
.barra-escolha:has(input:checked) .barra-escolha-marca { opacity: 1; }
.barra-escolha:has(.barra-escolha-opcao:nth-child(2) input:checked) .barra-escolha-marca { transform: translateX(100%); }
.barra-escolha:has(.barra-escolha-opcao:nth-child(3) input:checked) .barra-escolha-marca { transform: translateX(200%); }
.barra-escolha:has(.barra-escolha-opcao:nth-child(4) input:checked) .barra-escolha-marca { transform: translateX(300%); }
.barra-escolha:has([data-cor="sinal"] input:checked) .barra-escolha-marca { background: var(--ceu-sinal); box-shadow: 0 3px 10px color-mix(in srgb, var(--ceu-sinal) 40%, transparent); }
.barra-escolha:has([data-cor="ok"] input:checked) .barra-escolha-marca { background: var(--ceu-ok); box-shadow: 0 3px 10px color-mix(in srgb, var(--ceu-ok) 40%, transparent); }
.barra-escolha:has([data-cor="perda"] input:checked) .barra-escolha-marca { background: var(--ceu-perda); box-shadow: 0 3px 10px color-mix(in srgb, var(--ceu-perda) 40%, transparent); }
.barra-escolha:has([data-cor="atencao"] input:checked) .barra-escolha-marca { background: var(--ceu-atencao); box-shadow: 0 3px 10px color-mix(in srgb, var(--ceu-atencao) 40%, transparent); }
.barra-escolha:has(.barra-escolha-opcao:first-of-type:hover) { transform: rotateY(-8deg); }
.barra-escolha:has(.barra-escolha-opcao:nth-last-child(2):hover) { transform: rotateY(8deg); }
@media (max-width: 575.98px) {
/* no celular a barra de 4 vira 2 x 2, sem a marca deslizante: a opcao marcada pinta o proprio fundo */
.barra-escolha[style*="--n: 4"] { grid-template-columns: 1fr 1fr; height: auto; border-radius: 18px; gap: 2px; }
.barra-escolha[style*="--n: 4"] .barra-escolha-opcao { height: 30px; }
.barra-escolha[style*="--n: 4"] .barra-escolha-marca { display: none; }
.barra-escolha[style*="--n: 4"] .barra-escolha-opcao:has(input:checked) { background: var(--cor); }
.barra-escolha-opcao .bi { display: none; }
.barra-escolha { height: auto; min-height: 34px; }
.barra-escolha-opcao { min-height: 28px; }
.barra-escolha-opcao > span { white-space: normal; text-align: center; line-height: 1.15; padding: 3px 4px; font-size: 11.5px; }
}
/* pilulas com icone (resultado, classificacao) */
.cartoes-radio { display: flex; flex-wrap: wrap; gap: 8px; }
.cartao-radio { position: relative; display: flex; margin: 0; cursor: pointer; user-select: none; }
.cartao-radio input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.cartao-radio-face { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 12px;
border: 1.5px solid var(--ceu-fio); border-radius: 999px; background: var(--ceu-sup);
color: var(--ceu-nevoa); font: 600 12.5px/1 var(--ceu-fonte); white-space: nowrap;
transition: border-color .15s, box-shadow .2s, background-color .2s, color .2s, transform .2s var(--ceu-curva); }
.cartao-radio-face .bi { font-size: 15px; line-height: 1; color: var(--ceu-suave); transition: color .2s, transform .35s var(--ceu-curva); }
/* o ponto do modelo, aqui a direita */
.cartao-radio-face::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor); opacity: 0; transform: scale(0); transition: .25s ease; margin-left: 1px; }
.cartao-radio:hover .cartao-radio-face { border-color: var(--cor); transform: translateY(-1px); }
.cartao-radio:hover .cartao-radio-face .bi { color: var(--cor-texto); transform: scale(1.1); }
.cartao-radio input:checked + .cartao-radio-face { border-color: var(--cor); background: var(--cor-fundo); color: var(--cor-texto); box-shadow: 0 3px 10px color-mix(in srgb, var(--cor) 18%, transparent); }
.cartao-radio input:checked + .cartao-radio-face .bi { color: var(--cor-texto); }
.cartao-radio input:checked + .cartao-radio-face::after { opacity: 1; transform: scale(1); }
.cartao-radio input:focus-visible + .cartao-radio-face { box-shadow: var(--ceu-foco); }
.barra-escolha.barra-escolha-mini { height: 30px; min-width: 0; }
.barra-escolha.barra-escolha-mini .barra-escolha-opcao { font-size: 12px; }
/* =========================================================================
AMBIENTE (11/10/2026): faixa de homologacao, moldura ambar, selo no menu e escolha na entrada
========================================================================= */
.faixa-ambiente { flex: 0 0 100%; order: -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; padding: 5px 14px; border-radius: 12px;
background: repeating-linear-gradient(-45deg, #F2A007 0 14px, #E89400 14px 28px); color: #1F1400; font-size: 12.5px; font-weight: 500;
box-shadow: 0 4px 14px rgba(242,160,7,.30); }
.faixa-ambiente strong { font-weight: 800; letter-spacing: .06em; }
.faixa-ambiente .bi { font-size: 15px; }
.faixa-ambiente-link { margin-left: auto; color: #1F1400 !important; font-weight: 700; text-decoration: underline !important; white-space: nowrap; }
.faixa-ambiente-solta { position: fixed; z-index: 2500; top: 8px; left: 50%; transform: translateX(-50%); width: min(calc(100% - 16px), 1100px); }
body.ambiente-homologacao .topo { flex-wrap: wrap; row-gap: 8px; }
body.ambiente-homologacao::after { content: ''; position: fixed; inset: 0; z-index: 3000; pointer-events: none; border: 3px solid #F2A007; }
.selo-ambiente { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: #F2A007; color: #1F1400; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.escolha-ambiente { margin: 0 0 14px; }
.escolha-ambiente .barra-escolha { width: 100%; }
@media (max-width: 575.98px) { .faixa-ambiente-texto { display: none; } }
/* Avatar sem foto nos cartoes de perfil (11/10/2026): silhueta num anel em degrade
(uiverse.io igoramos77/silly-fireant-70, MIT, adaptado). Partial partes/_avatar_silhueta.html */
.avatar.avatar-silhueta { padding: 4px; border: 0 !important; background: linear-gradient(135deg, #177AFA 15%, #03C9D1 100%) !important; overflow: visible; }
.avatar.avatar-silhueta svg { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--ceu-sup); box-sizing: border-box; }
.avatar-silhueta .silhueta-fundo { fill: #A9BEE3; }
.avatar-silhueta .silhueta-pessoa { fill: #FFFFFF; transform-origin: 50% 100%; transition: transform .5s var(--ceu-curva); }
.hero-ficha:hover .avatar-silhueta .silhueta-pessoa { transform: scale(1.06); }
[data-bs-theme="dark"] .avatar-silhueta .silhueta-fundo { fill: #34425C; }
[data-bs-theme="dark"] .avatar-silhueta .silhueta-pessoa { fill: #C7D3EA; }
/* ficha do colaborador (11/10/2026, "coloca a silhueta na ficha do colaborador tambem"): a silhueta ocupa a bolinha */
.colaborador-hero .colaborador-avatar:has(.avatar-silhueta) { background: transparent; border: 0; overflow: visible; }
.colaborador-avatar .avatar.avatar-silhueta { width: 100% !important; height: 100% !important; box-shadow: var(--ceu-sombra-2); }
.colaborador-hero:hover .avatar-silhueta .silhueta-pessoa { transform: scale(1.06); }
/* Caixas de dado (11/10/2026, Dados pessoais do colaborador e documentos do candidato): rotulo encaixado na
borda (uiverse.io danielleallennn/lazy-robin-49) e copiar que vira check com dica (Galahhad/kind-cheetah-52) */
.dados-caixas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; padding-top: 8px; }
.dado { position: relative; min-width: 0; border: 1.5px solid var(--ceu-fio-forte, var(--ceu-fio)); border-radius: 12px; padding: 13px 12px 9px;
background: var(--ceu-sup); transition: border-color .2s, box-shadow .2s; }
.dado:hover { border-color: color-mix(in srgb, var(--ceu-sinal) 55%, var(--ceu-fio)); box-shadow: 0 2px 10px color-mix(in srgb, var(--ceu-sinal) 12%, transparent); }
.dado-largo { grid-column: 1 / -1; }
.dado-rotulo { position: absolute; top: -8px; left: 9px; max-width: calc(100% - 18px); padding: 0 6px; background: var(--ceu-sup); color: var(--ceu-nevoa);
font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dado:has(.copiar-dado) .dado-rotulo { max-width: calc(100% - 50px); }
.dado:hover .dado-rotulo { color: var(--ceu-sinal-texto, var(--ceu-sinal)); }
.dado-valor { display: block; color: var(--ceu-tinta); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.dado-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dado-vazio { color: var(--ceu-suave); }
.copiar-dado { position: absolute; top: -12px; right: 8px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; cursor: pointer;
border-radius: 8px; border: 1.5px solid var(--ceu-fio-forte, var(--ceu-fio)); background: var(--ceu-sup); color: var(--ceu-nevoa);
transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ceu-curva); }
.copiar-dado:hover { color: var(--ceu-sinal-texto, var(--ceu-sinal)); border-color: var(--ceu-sinal); transform: translateY(-1px); }
.copiar-dado:focus-visible { outline: none; box-shadow: var(--ceu-foco); }
.copiar-dado svg { grid-area: 1 / 1; }
.copiar-dado .copiar-check { display: none; }
.copiar-dado.copiado { color: #fff; background: var(--ceu-ok); border-color: var(--ceu-ok); }
.copiar-dado.copiado .copiar-prancheta { display: none; }
.copiar-dado.copiado .copiar-check { display: block; }
.copiar-dica { position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(3px); opacity: 0; pointer-events: none; white-space: nowrap;
padding: 4px 8px; border-radius: 6px; background: var(--ceu-tinta); color: var(--ceu-sobre-tinta, #fff); font-size: 11px; font-weight: 600; transition: opacity .15s, transform .15s; }
.copiar-dica::before { content: 'Copiar'; }
.copiar-dica::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--ceu-tinta); }
.copiar-dado:hover .copiar-dica, .copiar-dado.copiado .copiar-dica { opacity: 1; transform: translateX(-50%) translateY(0); }
.copiar-dado.copiado .copiar-dica { background: var(--ceu-ok); }
.copiar-dado.copiado .copiar-dica::before { content: 'Copiado!'; }
.copiar-dado.copiado .copiar-dica::after { border-top-color: var(--ceu-ok); }
@media (max-width: 575.98px) { .dados-caixas { grid-template-columns: 1fr; } }
/* copiar inline (matricula no cartao do colaborador, 11/10/2026) */
.copiar-dado.copiar-inline { position: relative; top: auto; right: auto; width: 20px; height: 20px; border-radius: 6px; margin-right: -4px; border-width: 1px; }
.copiar-dado.copiar-inline svg { width: 11px; height: 11px; }
.colaborador-hero .meta > span.meta-matricula { padding-right: 6px; }
/* =========================================================================
VAGAS (11/10/2026): etapas da vaga (uiverse.io PriyanshuGupta28/orange-newt-23) e barra de
preenchimento (FColombati/curly-chipmunk-73, refeita como barra estatica). MIT.
========================================================================= */
.etapas-linha { --n: 4; list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; }
.etapas-linha.etapas-com-divisoria { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--ceu-fio); }
.etapa { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 12px; min-width: 0; }
.etapa:not(:last-child)::after { content: ''; position: absolute; top: 15px; left: 36px; right: 4px; height: 2px; border-radius: 2px; background: var(--ceu-fio-forte, var(--ceu-fio)); }
.etapa-feito:not(:last-child)::after { background: var(--ceu-tinta); }
.etapa-circulo { position: relative; z-index: 1; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center;
font-size: 13px; font-weight: 700; border: 2px solid var(--ceu-fio-forte, var(--ceu-fio)); background: var(--ceu-sup); color: var(--ceu-suave); }
.etapa-feito .etapa-circulo { background: var(--ceu-tinta); border-color: var(--ceu-tinta); color: var(--ceu-sobre-tinta, #fff); }
.etapa-atual .etapa-circulo { border-color: var(--ceu-tinta); color: var(--ceu-tinta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ceu-sinal) 18%, transparent); }
.etapa-falhou .etapa-circulo { background: var(--ceu-perda); border-color: var(--ceu-perda); color: #fff; }
.etapa-circulo .bi { font-size: 15px; }
.etapa-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.etapa-texto strong { font-size: 13.5px; font-weight: 600; color: var(--ceu-tinta); }
.etapa-pendente .etapa-texto strong { color: var(--ceu-suave); }
.etapa-situacao { display: inline-flex; padding: 1px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; background: var(--ceu-afundado); color: var(--ceu-nevoa); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etapa-feito .etapa-situacao { background: var(--ceu-ok-fundo); color: var(--ceu-ok-texto); }
.etapa-atual .etapa-situacao { background: var(--ceu-sinal-fundo); color: var(--ceu-sinal-texto, var(--ceu-sinal)); }
.etapa-falhou .etapa-situacao { background: var(--ceu-perda-fundo); color: var(--ceu-perda-texto); }
.etapa-alerta .etapa-circulo { background: var(--ceu-atencao); border-color: var(--ceu-atencao); color: #1F1400; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ceu-atencao) 22%, transparent); }
.etapa-alerta .etapa-situacao { background: var(--ceu-atencao-fundo); color: var(--ceu-atencao-texto); }
.card-etapas > .card-body { padding: 18px 22px !important; }
.etapa-quando { font-size: 11.5px; color: var(--ceu-suave); }
@media (max-width: 991.98px) {
.etapas-linha { grid-template-columns: 1fr; gap: 14px; }
.etapa { flex-direction: row; align-items: flex-start; gap: 12px; }
.etapa:not(:last-child)::after { top: 34px; bottom: -14px; left: 15px; right: auto; width: 2px; height: auto; }
}
.barra-kawaii { --base: var(--ceu-sinal); position: relative; display: block; height: 20px; border: 5px solid var(--ceu-sup); border-radius: 999px;
background: var(--ceu-afundado); box-shadow: 0 0 10px rgba(0,0,0,.07), 0 2px 6px rgba(0,0,0,.07), inset 0 1px 2px rgba(0,0,0,.06); overflow: hidden; }
.barra-kawaii.completa { --base: var(--ceu-ok); }
.barra-kawaii::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--progresso, 0%); border-radius: 999px;
background:
radial-gradient(circle at 6px 4px, color-mix(in srgb, var(--base) 45%, #fff) 1.4px, transparent 2px),
radial-gradient(circle at 10px 4px, color-mix(in srgb, var(--base) 45%, #fff) 1.4px, transparent 2px),
linear-gradient(color-mix(in srgb, var(--base) 45%, #fff) 0 0) 10px 3px / calc(100% - 22px) 2px no-repeat,
linear-gradient(transparent 62%, color-mix(in srgb, var(--base) 88%, #000) 85%),
var(--base);
transition: width .6s var(--ceu-curva); }
.barra-kawaii.mini { display: block; width: 52px; height: 12px; border-width: 3px; margin: 4px auto 0; }
.barra-kawaii.mini::before { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--base) 85%, #000) 90%), var(--base); }
/* Mini linha de etapas (12/10/2026): processos seletivos do candidato e outras listas */
.etapas-mini { list-style: none; display: flex; align-items: center; margin: 6px 0 0; padding: 0; }
.etapa-mini { position: relative; width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; line-height: 1;
border: 1.5px solid var(--ceu-fio-forte, var(--ceu-fio)); background: var(--ceu-sup); color: #fff; }
.etapa-mini + .etapa-mini { margin-left: 12px; }
.etapa-mini + .etapa-mini::before { content: ''; position: absolute; right: 100%; top: 50%; width: 12px; height: 1.5px; margin-right: 1.5px; transform: translateY(-50%); background: var(--ceu-fio-forte, var(--ceu-fio)); }
.etapa-mini-feito { background: var(--ceu-tinta); border-color: var(--ceu-tinta); color: var(--ceu-sobre-tinta, #fff); }
.etapa-mini-feito + .etapa-mini::before { background: var(--ceu-tinta); }
.etapa-mini-atual { width: 16px; height: 16px; flex-basis: 16px; border: 3px solid var(--ceu-sinal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ceu-sinal) 18%, transparent); }
.etapa-mini-alerta { width: 16px; height: 16px; flex-basis: 16px; border: 3px solid var(--ceu-atencao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ceu-atencao) 22%, transparent); }
.etapa-mini-falhou { background: var(--ceu-perda); border-color: var(--ceu-perda); }
.etapa-mini .bi { font-size: 12px; }
.ouv-etapas { margin: 16px 0 6px; }
.etapas-linha[style*="--n: 3"] { max-width: 760px; }
/* Barra de progresso do sistema no modelo uiverse.io FColombati/curly-chipmunk-73 (12/10/2026): borda branca,
brilho e sombra embaixo; cores: padrao azul, .progresso-verde, -ambar, -vermelho, -azul. Vale em Documentacoes,
Relatorio gerencial, Bonificacao, Experiencia e onde mais houver .barra-progresso. */
.barra-progresso { --base: var(--ceu-sinal); position: relative; display: block; height: 16px !important; border: 4px solid var(--ceu-sup); border-radius: 999px;
background: var(--ceu-afundado); box-shadow: 0 0 8px rgba(0,0,0,.07), 0 2px 5px rgba(0,0,0,.06), inset 0 1px 2px rgba(0,0,0,.06); overflow: hidden; }
.barra-progresso.progresso-verde { --base: var(--ceu-ok); }
.barra-progresso.progresso-ambar { --base: var(--ceu-atencao); }
.barra-progresso.progresso-vermelho { --base: var(--ceu-perda); }
.barra-progresso.progresso-azul { --base: var(--ceu-sinal); }
.barra-progresso .preenchido { display: block; height: 100%; width: var(--progresso, 0%); border-radius: 999px;
background:
radial-gradient(circle at 5px 3px, color-mix(in srgb, var(--base) 40%, #fff) 1.2px, transparent 1.8px),
linear-gradient(color-mix(in srgb, var(--base) 40%, #fff) 0 0) 9px 2px / calc(100% - 18px) 1.5px no-repeat,
linear-gradient(transparent 60%, color-mix(in srgb, var(--base) 85%, #000) 88%),
var(--base) !important;
transition: width .6s var(--ceu-curva); }
.linha-categoria .barra-progresso, .barras-doc .barra-progresso { height: 12px !important; border-width: 3px; }
.barra-experiencia { width: 120px; max-width: 100%; height: 13px !important; border-width: 3px; margin-top: 5px; }
.barra-pct { width: 56px; height: 11px !important; border-width: 2.5px; margin: 4px 0 0 auto; }
.barra-pct.progresso-vermelho .preenchido { min-width: 0; }
.copiar-dado.copiar-inline { vertical-align: middle; margin-left: 4px; }
.numero-com-copiar { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; vertical-align: middle; }
.numero-com-copiar .copiar-dado { flex: 0 0 auto; }
/* Candidato contratado e no Ponto (12/10/2026): cartao/linha verde com a fita no canto
(uiverse.io mrhyddenn/massive-earwig-94, MIT, adaptado) */
.table tbody tr.linha-no-ponto > td { background: color-mix(in srgb, var(--ceu-ok) 9%, var(--ceu-sup)) !important; }
.table tbody tr.linha-no-ponto:hover > td { background: color-mix(in srgb, var(--ceu-ok) 15%, var(--ceu-sup)) !important; }
.table tbody tr.linha-no-ponto > td:first-child { position: relative; overflow: hidden; box-shadow: inset 3px 0 0 var(--ceu-ok); }
@media (min-width: 768px) { .table tbody tr.linha-no-ponto > td:first-child { padding-left: 40px !important; } }
.fita-ponto { position: absolute; top: 0; left: 0; width: 66px; height: 66px; overflow: hidden; pointer-events: none; z-index: 1; }
.fita-ponto span { position: absolute; top: 13px; left: -27px; width: 106px; height: 15px; display: flex; align-items: center; justify-content: center;
transform: rotate(-45deg); background-image: linear-gradient(45deg, #0F9F6E 0%, #2BC48A 51%, #12A26B 100%); color: #fff;
font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0,0,0,.18); }
@media (max-width: 767.98px) {
.tabela-cartoes tr.linha-no-ponto { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--ceu-ok) 45%, var(--ceu-fio)) !important; }
.tabela-cartoes tr.linha-no-ponto > td:first-child { position: static; box-shadow: none; }
}
/* Ficha do colaborador (12/10/2026): barra do periodo de experiencia em curso e o dia de hoje na jornada */
.experiencia-em-curso { display: grid; gap: 6px; margin: 18px 0 16px; padding-top: 14px; border-top: 1px solid var(--ceu-fio); }
.experiencia-em-curso .barra-progresso { max-width: 420px; }
.tabela-jornada-semana th.dia-hoje { color: var(--ceu-sinal-texto, var(--ceu-sinal)) !important; }
.tabela-jornada-semana td.dia-hoje { background: color-mix(in srgb, var(--ceu-sinal) 9%, var(--ceu-sup)) !important; box-shadow: inset 0 -3px 0 var(--ceu-sinal); }
.selo-hoje { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--ceu-sinal); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: middle; text-transform: lowercase; }
/* Estrelas (12/10/2026, uiverse.io andrew-demchenk0/clever-elephant-35): campo de nota e exibicao da media */
.estrelas-campo { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.estrelas-campo label { position: relative; margin: 0; cursor: pointer; font-size: 30px; line-height: 1; color: var(--ceu-fio-forte, #cfd7e1); transition: color .15s, transform .2s var(--ceu-curva); }
.estrelas-campo input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.estrelas-campo label:has(input:checked), .estrelas-campo label:has(input:checked) ~ label { color: #FFA723; }
.estrelas-campo:hover label { color: var(--ceu-fio-forte, #cfd7e1); }
.estrelas-campo label:hover, .estrelas-campo label:hover ~ label { color: #FF9E0B !important; }
.estrelas-campo label:hover { transform: scale(1.12); }
.estrelas-campo label:has(input:focus-visible) span:first-of-type { outline: 2px solid var(--ceu-sinal); outline-offset: 2px; border-radius: 4px; }
.estrelas-nota { --nota: 0; position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 1px; white-space: nowrap; vertical-align: middle; }
.estrelas-nota .estrelas-fundo { color: var(--ceu-fio-forte, #cfd7e1); }
.estrelas-nota .estrelas-cheias { position: absolute; inset: 0 auto 0 0; width: calc(var(--nota) / 5 * 100%); overflow: hidden; color: #FFA723; }
.estrelas-nota.estrelas-g { font-size: 19px; }
.estrelas-numero { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--ceu-nevoa); vertical-align: middle; }
.estrelas-vazio { font-size: 11.5px; color: var(--ceu-suave); }
.estrelas-candidato { line-height: 1; margin-top: 2px; }
.estrelas-candidato.d-block { display: block; }
/* Fita de canto generica (12/10/2026, uiverse.io mrhyddenn/massive-earwig-94): .item-com-fita + .fita-canto;
cor por .fita-ok | .fita-perda | .fita-atencao (fundo do item na mesma cor). A dos candidatos e a .fita-ponto. */
.item-com-fita { --fita-a: #0F9F6E; --fita-b: #2BC48A; --fita-fundo: var(--ceu-ok); position: relative; overflow: hidden; padding-left: 34px !important;
background: color-mix(in srgb, var(--fita-fundo) 8%, var(--ceu-sup)) !important; box-shadow: inset 3px 0 0 var(--fita-fundo); }
.item-com-fita:hover { background: color-mix(in srgb, var(--fita-fundo) 14%, var(--ceu-sup)) !important; }
:is(.item-com-fita, .linha-com-fita) { --fita-a: #0F9F6E; --fita-b: #2BC48A; --fita-fundo: var(--ceu-ok); }
:is(.item-com-fita, .linha-com-fita).fita-perda { --fita-a: #C9353B; --fita-b: #E5484D; --fita-fundo: var(--ceu-perda); }
:is(.item-com-fita, .linha-com-fita).fita-atencao { --fita-a: #D98A00; --fita-b: #F2A007; --fita-fundo: var(--ceu-atencao); }
/* em linha de tabela: fundo tingido, borda e a fita no 1o td; no celular (tabela-cartoes) a fita fica no canto do cartao */
.table tbody tr.linha-com-fita > td { background: color-mix(in srgb, var(--fita-fundo) 8%, var(--ceu-sup)) !important; }
.table tbody tr.linha-com-fita:hover > td { background: color-mix(in srgb, var(--fita-fundo) 14%, var(--ceu-sup)) !important; }
.table tbody tr.linha-com-fita > td:first-child { position: relative; overflow: hidden; box-shadow: inset 3px 0 0 var(--fita-fundo); }
@media (min-width: 768px) { .table tbody tr.linha-com-fita > td:first-child { padding-left: 30px !important; } }
@media (max-width: 767.98px) {
.tabela-cartoes tr.linha-com-fita { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--fita-fundo) 45%, var(--ceu-fio)) !important; }
.tabela-cartoes tr.linha-com-fita > td:first-child { position: static; box-shadow: none; }
}
.fita-canto { position: absolute; top: 0; left: 0; width: 58px; height: 58px; overflow: hidden; pointer-events: none; z-index: 1; }
.fita-canto span { position: absolute; top: 11px; left: -24px; width: 92px; height: 15px; display: flex; align-items: center; justify-content: center;
transform: rotate(-45deg); background-image: linear-gradient(45deg, var(--fita-a) 0%, var(--fita-b) 51%, var(--fita-a) 100%); color: #fff;
font-size: 7.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0,0,0,.18); }
/* =========================================================================
12/10/2026: Financeiro, Trabalhe Conosco, Ouvidoria, menu lateral e clima com elementos do uiverse.io
========================================================================= */
/* Botao "Enviar" com o aviao que voa (adamgiebl/smart-moth-68, MIT) */
.btn.btn-aviao { overflow: hidden; }
.btn.btn-aviao .bi { display: inline-block; transition: transform .3s ease-in-out; }
.btn.btn-aviao span { display: inline-block; transition: transform .3s ease-in-out; }
.btn.btn-aviao:hover .bi { animation: aviao-voa .6s ease-in-out infinite alternate; transform: translateX(.9em) rotate(45deg) scale(1.1); }
.btn.btn-aviao:hover span { transform: translateX(6em); }
.btn.btn-aviao::before { display: none !important; }
@keyframes aviao-voa { from { translate: 0 .1em; } to { translate: 0 -.1em; } }
/* Zona de envio de arquivo (Yaya12085/yellow-goat-62, MIT) - static/js/zona-upload.js; a da Ouvidoria (.ouv-solta) no mesmo desenho */
.zona-upload { display: grid; gap: 6px; padding: 8px; border-radius: 14px; background: color-mix(in srgb, var(--ceu-sinal) 5%, var(--ceu-sup)); box-shadow: 0 4px 18px rgba(0,0,0,.06); }
.zona-upload-area, .ouv-solta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 14px;
border: 2px dashed color-mix(in srgb, var(--ceu-sinal) 70%, transparent) !important; border-radius: 10px; text-align: center; color: var(--ceu-corpo, var(--ceu-tinta)); cursor: pointer;
transition: background-color .2s, border-color .2s, transform .2s var(--ceu-curva); }
.zona-upload-area:hover, .zona-upload.arrastando .zona-upload-area, .ouv-solta:hover, .ouv-solta.arrastando { background: color-mix(in srgb, var(--ceu-sinal) 9%, transparent); border-color: var(--ceu-sinal) !important; }
.zona-upload-area svg { width: 46px; height: 46px; color: var(--ceu-sinal); transition: transform .3s var(--ceu-curva); }
.zona-upload-area:hover svg, .zona-upload.arrastando svg { transform: translateY(-4px); }
.zona-upload-area p { margin: 0; font-size: 13px; }
.zona-upload-area input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.zona-upload-rodape { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ceu-sinal) 9%, var(--ceu-sup)); font-size: 12.5px; color: var(--ceu-nevoa); }
.zona-upload-rodape .bi { color: var(--ceu-sinal); font-size: 16px; }
.zona-upload-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zona-upload.com-arquivo .zona-upload-nome { color: var(--ceu-tinta); font-weight: 600; }
.zona-upload-limpar { border: 0; background: transparent; color: var(--ceu-perda); padding: 2px 4px; border-radius: 6px; cursor: pointer; }
.zona-upload-limpar:hover { background: var(--ceu-perda-fundo); }
.ouv-solta > .bi { font-size: 40px; color: var(--ceu-sinal); }
/* Cartoes de escolha da Ouvidoria publica: efeito dos cartoes com icone (Yaya12085/silent-liger-85) */
.ouv-card { position: relative; transition: transform .25s var(--ceu-curva), box-shadow .25s, border-color .2s !important; border: 2px solid var(--ceu-fio) !important; }
.ouv-card::before { content: ''; position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ceu-fio-forte); background: var(--ceu-sup);
opacity: 0; transform: scale(0); transition: .25s ease; }
.ouv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.10) !important; }
.ouv-card:hover::before { opacity: 1; transform: scale(1); }
.ouv-card.denuncia:hover { border-color: var(--ceu-perda) !important; } .ouv-card.denuncia:hover::before { background: var(--ceu-perda); border-color: var(--ceu-perda); }
.ouv-card.sugestao:hover { border-color: var(--ceu-sinal) !important; } .ouv-card.sugestao:hover::before { background: var(--ceu-sinal); border-color: var(--ceu-sinal); }
.ouv-card.elogio:hover { border-color: var(--ceu-ok) !important; } .ouv-card.elogio:hover::before { background: var(--ceu-ok); border-color: var(--ceu-ok); }
.ouv-card .icone { transition: transform .35s var(--ceu-curva); }
.ouv-card:hover .icone { transform: scale(1.12) rotate(-6deg); }
/* Menu lateral: icone salta ao passar o mouse (3bdel3ziz-T/curly-duck-62, MIT) */
.menu-item .bi { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s; }
.menu-item:hover .bi { transform: translateY(-2px) scale(1.14) rotate(-6deg); }
.menu-item.ativo:hover .bi { transform: scale(1.08); }
/* Clima: icone animado (vinodjangid07/grumpy-mule-23, MIT, adaptado): raios girando, sol pulsando, lua com brilho,
nuvem flutuando, chuva caindo, raio piscando; no cartao, o icone sobre um circulo de cor do tempo */
.clima-mini .raios, .clima-icone .raios { transform-origin: 32px 32px; animation: clima-gira 14s linear infinite; }
.clima-mini .astro, .clima-icone .astro { transform-origin: 32px 32px; }
.clima-sol .astro, .clima-nuvem_sol .astro { animation: clima-pulsa 3s ease-in-out infinite; }
.clima-lua .astro { animation: clima-lua 3.5s ease-in-out infinite; }
.clima-mini .nuvem, .clima-icone .nuvem { animation: clima-nuvem 5s ease-in-out infinite; }
.clima-mini .gotas line, .clima-icone .gotas line { animation: clima-chuva 1s linear infinite; }
.clima-icone .gotas line:nth-child(2), .clima-mini .gotas line:nth-child(2) { animation-delay: .33s; }
.clima-icone .gotas line:nth-child(3), .clima-mini .gotas line:nth-child(3) { animation-delay: .66s; }
.clima-icone .raio, .clima-mini .raio { animation: clima-raio 2.4s steps(1) infinite; }
.clima-meio .clima-icone { position: relative; width: 60px; height: 60px; padding: 4px; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, color-mix(in srgb, #F5A524 30%, #fff) 0%, color-mix(in srgb, var(--ceu-sinal) 22%, transparent) 70%); }
.clima-meio .clima-icone.clima-lua { background: radial-gradient(circle at 35% 35%, #DDE6F5 0%, color-mix(in srgb, #5A6BB0 30%, transparent) 70%); }
@keyframes clima-gira { to { transform: rotate(360deg); } }
@keyframes clima-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes clima-lua { 0%, 100% { filter: drop-shadow(0 0 0 rgba(245,215,120,0)); } 50% { filter: drop-shadow(0 0 4px rgba(245,215,120,.9)); } }
@keyframes clima-nuvem { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes clima-chuva { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes clima-raio { 0%, 90% { opacity: 1; } 92%, 96% { opacity: .1; } }
/* Financeiro vazio = tudo em dia: check animado (Yaya12085/nasty-firefox-13, MIT) */
.ilustracao-sucesso { width: 64px; height: 64px; margin: 0 auto 10px; border-radius: 50%; background: var(--ceu-ok-fundo); display: grid; place-items: center; }
.ilustracao-sucesso svg { width: 44px; height: 44px; fill: none; stroke: var(--ceu-ok-texto); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.ilustracao-sucesso circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: sucesso-traco .7s ease-out forwards; stroke-width: 2.5; opacity: .5; }
.ilustracao-sucesso path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sucesso-traco .45s .55s ease-out forwards; }
.estado-sucesso .mensagem { color: var(--ceu-ok-texto); font-weight: 700; }
@keyframes sucesso-traco { to { stroke-dashoffset: 0; } }
/* Conta salario como cartao bancario (Praashoo7/black-lizard-62, MIT, adaptado) */
.conta-visual { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.conta-visual .conta-dados { flex: 1 1 320px; min-width: 0; }
.cartao-banco { position: relative; flex: 0 0 auto; width: 290px; height: 178px; padding: 16px 18px; border-radius: 16px; overflow: hidden; color: #fff;
background: radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.18) 0%, transparent 45%), linear-gradient(135deg, #1B2A44 0%, #0E1116 60%, #1F3B2E 100%);
box-shadow: 0 14px 30px rgba(14,17,22,.28); font-family: var(--ceu-fonte); transition: transform .4s var(--ceu-curva); }
.cartao-banco:hover { transform: rotateX(6deg) rotateY(-8deg) translateY(-2px); }
.cartao-banco::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
transform: translateX(-120%); transition: transform .9s ease; pointer-events: none; }
.cartao-banco:hover::after { transform: translateX(120%); }
.cartao-banco-nome { position: absolute; top: 14px; right: 18px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }
.cartao-banco-chip { position: absolute; top: 46px; left: 18px; width: 40px; height: 30px; }
.cartao-banco-chip rect { fill: #E6C26B; stroke: #B8913A; } .cartao-banco-chip path { stroke: #B8913A; fill: none; stroke-width: 1.2; }
.cartao-banco-sem-contato { position: absolute; top: 50px; left: 70px; width: 22px; height: 22px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.8; stroke-linecap: round; }
.cartao-banco-numero { position: absolute; left: 18px; right: 18px; top: 96px; font-size: 18px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-banco-agencia { position: absolute; left: 18px; top: 124px; font-size: 11px; letter-spacing: .08em; opacity: .85; }
.cartao-banco-titular { position: absolute; left: 18px; right: 18px; bottom: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 575.98px) { .cartao-banco { width: 100%; max-width: 320px; } }
.ouv-card, .ouv-card:hover, .ouv-card * { text-decoration: none !important; }
/* Logo do banco (12/10/2026, matheuscuba/icones-bancos-brasileiros): SVG preto como mascara na cor do banco, num circulo branco */
.logo-banco { --cor-banco: var(--ceu-nevoa); display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%;
background: #fff; box-shadow: 0 0 0 1px var(--ceu-fio), 0 2px 6px rgba(0,0,0,.08); vertical-align: middle; }
.logo-banco i { display: block; width: 72%; height: 72%; background: var(--cor-banco); -webkit-mask: var(--icone-banco) center / contain no-repeat; mask: var(--icone-banco) center / contain no-repeat; }
.logo-banco-generico i { width: auto; height: auto; background: none; -webkit-mask: none; mask: none; color: var(--ceu-suave); font-size: 13px; }
.logo-banco.logo-banco-cartao { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.cartao-banco .cartao-banco-nome { right: 58px; top: 22px; }
.campo-banco { display: flex; align-items: center; gap: 8px; }
.campo-banco .logo-banco { width: 34px; height: 34px; flex-basis: 34px; transition: transform .3s var(--ceu-curva); }
.campo-banco .form-control { flex: 1 1 auto; min-width: 0; }
.campo-banco-nome { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ceu-nevoa); min-height: 1em; }
/* ===== Tela de entrada com elementos do uiverse.io (12/10/2026) =====
Olho da senha que vira olho cortado com "pop" (catraco/moody-mole-16), interruptor iOS no
"Salvar" (zanina-yassine/afraid-eel-50, o mesmo dos .form-switch), spinner de laminas no botao
enquanto confere (mrhyddenn/black-bullfrog-16) e check quando entra; aviso de Caps Lock e
formulario que treme no erro. Todos MIT, adaptados as cores da entrada. */
.tela-entrada .olho-entrada { position: relative; }
.tela-entrada .olho-entrada svg { position: absolute; width: 17px; height: 17px; fill: currentColor; animation: olho-pop .5s; }
.tela-entrada .olho-entrada .olho-fechado { display: none; width: 19px; }
.tela-entrada .olho-entrada[aria-pressed="true"] .olho-aberto { display: none; }
.tela-entrada .olho-entrada[aria-pressed="true"] .olho-fechado { display: block; }
@keyframes olho-pop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); } }
.tela-entrada .aviso-caps { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0 14px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #8A5A00; background: #FFF4D6; border: 1px solid #F3D48A; animation: olho-pop .35s; }
.tela-entrada .aviso-caps[hidden] { display: none; }
.tela-entrada .interruptor-entrada { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tela-entrada .interruptor-entrada input {
appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 38px !important; height: 20px !important; margin: 0;
border-radius: 999px; background: #D5DCE6; cursor: pointer; transition: background .3s var(--ceu-curva);
}
.tela-entrada .interruptor-entrada input::before {
content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
box-shadow: 0 1px 3px rgba(14,17,22,.25); transition: transform .3s var(--ceu-curva);
}
.tela-entrada .interruptor-entrada input:checked { background: var(--ceu-verde-acao, #1F9D55); }
.tela-entrada .interruptor-entrada input:checked::before { transform: translateX(18px); }
.tela-entrada .interruptor-entrada input:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(46,125,239,.3); }
.tela-entrada .interruptor-entrada input:disabled { opacity: .5; cursor: default; }
.tela-entrada .botao-entrada { display: grid; place-items: center; }
.tela-entrada .botao-entrada > * { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--ceu-curva); }
.tela-entrada .spinner-entrada, .tela-entrada .check-entrada { opacity: 0; transform: scale(.6); pointer-events: none; }
.tela-entrada .botao-entrada.carregando .botao-entrada__texto, .tela-entrada .botao-entrada.entrou .botao-entrada__texto { opacity: 0; transform: translateY(-6px); }
.tela-entrada .botao-entrada.carregando .spinner-entrada { opacity: 1; transform: none; }
.tela-entrada .botao-entrada.entrou, .tela-entrada .botao-entrada.entrou:hover { background: var(--ceu-verde-acao, #1F9D55) !important; color: #fff !important; }
.tela-entrada .botao-entrada.entrou::before { opacity: 0; }
.tela-entrada .botao-entrada.entrou .check-entrada { opacity: 1; transform: none; }
.tela-entrada .botao-entrada:disabled { opacity: 1; cursor: progress; }
.tela-entrada .check-entrada { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.tela-entrada .botao-entrada.entrou .check-entrada { animation: check-desenha .45s .1s var(--ceu-curva) forwards; }
@keyframes check-desenha { to { stroke-dashoffset: 0; } }
.tela-entrada .spinner-entrada { position: relative; width: 22px; height: 22px; font-size: 22px; }
.tela-entrada .spinner-entrada i {
position: absolute; left: .4629em; bottom: 0; width: .074em; height: .2777em; border-radius: .0555em;
background: transparent; transform-origin: center -.2222em; animation: lamina-entrada 1s infinite linear;
}
.tela-entrada .spinner-entrada { top: -.15em; }
.tela-entrada .spinner-entrada i:nth-child(1) { transform: rotate(0deg); animation-delay: 0s; }
.tela-entrada .spinner-entrada i:nth-child(2) { transform: rotate(30deg); animation-delay: .083s; }
.tela-entrada .spinner-entrada i:nth-child(3) { transform: rotate(60deg); animation-delay: .166s; }
.tela-entrada .spinner-entrada i:nth-child(4) { transform: rotate(90deg); animation-delay: .249s; }
.tela-entrada .spinner-entrada i:nth-child(5) { transform: rotate(120deg); animation-delay: .332s; }
.tela-entrada .spinner-entrada i:nth-child(6) { transform: rotate(150deg); animation-delay: .415s; }
.tela-entrada .spinner-entrada i:nth-child(7) { transform: rotate(180deg); animation-delay: .498s; }
.tela-entrada .spinner-entrada i:nth-child(8) { transform: rotate(210deg); animation-delay: .581s; }
.tela-entrada .spinner-entrada i:nth-child(9) { transform: rotate(240deg); animation-delay: .664s; }
.tela-entrada .spinner-entrada i:nth-child(10) { transform: rotate(270deg); animation-delay: .747s; }
.tela-entrada .spinner-entrada i:nth-child(11) { transform: rotate(300deg); animation-delay: .83s; }
.tela-entrada .spinner-entrada i:nth-child(12) { transform: rotate(330deg); animation-delay: .913s; }
@keyframes lamina-entrada { 0% { background-color: var(--entrada-botao-texto, #fff); } 100% { background-color: transparent; } }
.tela-entrada .form-entrada.tremer { animation: tremer-entrada .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes tremer-entrada {
10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}
/* ===== Botao de baixar planilha (12/10/2026) =====
uiverse.io omar49511/dangerous-newt-42 (verde, logo do Excel, preenchimento da esquerda no hover)
+ nazar-gavrylyk/evil-dragon-24 (ao clicar encolhe num circulo que enche, um ponto da a volta e abre
em "Baixado"). MIT. Partial partes/_botao_planilha.html; classes trocadas pelo tema.js. */
.botao-planilha {
--verde: #307750; --verde-2: #469b61; --verde-3: #1d5a37;
display: inline-flex; align-items: center; gap: .5rem; position: relative; isolation: isolate; overflow: hidden;
height: 32px; padding: 3px 14px 3px 3px; border-radius: 999px; background: var(--verde);
color: #fff !important; font: 600 .8rem/1 var(--ceu-fonte, inherit); letter-spacing: .01em; white-space: nowrap;
text-decoration: none !important; box-shadow: 0 8px 14px -8px rgba(16,124,65,.75); cursor: pointer;
transition: padding .4s ease, gap .4s ease, background .4s ease, box-shadow .25s, transform .25s;
}
.botao-planilha::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; border-radius: inherit; background: var(--verde-2); transition: width .35s ease; }
.botao-planilha:hover::before, .botao-planilha:focus-visible::before { width: 100%; }
.botao-planilha:hover { transform: translateY(-1px); box-shadow: 0 10px 16px -8px rgba(16,124,65,.8); }
.botao-planilha:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(48,119,80,.35); }
.botao-planilha.disabled { opacity: .5; pointer-events: none; }
.botao-planilha__circulo { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.18); transition: background .4s, box-shadow .4s; }
.botao-planilha__circulo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 0; background: var(--verde-3); }
.botao-planilha__circulo > * { position: absolute; transition: opacity .3s, transform .35s ease; }
.botao-planilha .logo { width: 14px; height: 14px; fill: #fff; }
.botao-planilha .seta, .botao-planilha .check { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateY(-9px); }
.botao-planilha .check { stroke-width: 2.6; transform: scale(.4); }
.botao-planilha .quadro { width: 9px; height: 9px; border-radius: 2px; background: #fff; opacity: 0; }
.botao-planilha:hover .logo { opacity: 0; transform: translateY(9px); }
.botao-planilha:hover .seta { opacity: 1; transform: none; animation: seta-planilha .9s ease-in-out .3s infinite; }
@keyframes seta-planilha { 50% { transform: translateY(3px); } }
.botao-planilha__texto, .botao-planilha__feito { max-width: 12em; overflow: hidden; transition: max-width .4s ease, opacity .3s; }
.botao-planilha__feito { max-width: 0; opacity: 0; }
/* clicou: vira circulo que enche (instalando) com o ponto girando em volta */
.botao-planilha.baixando { padding-right: 3px; gap: 0; pointer-events: none; }
.botao-planilha.baixando::before { width: 0; transition: none; }
.botao-planilha.baixando .botao-planilha__texto { max-width: 0; opacity: 0; }
.botao-planilha.baixando .botao-planilha__circulo { rotate: 180deg; animation: pulso-planilha 1s forwards; }
.botao-planilha.baixando .botao-planilha__circulo::before { animation: enche-planilha 1.6s ease-in-out forwards; }
.botao-planilha.baixando .logo, .botao-planilha.baixando .seta { opacity: 0; animation: none; }
.botao-planilha.baixando .quadro { opacity: 1; }
.botao-planilha.baixando::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; animation: volta-planilha 1.6s ease-in-out forwards; }
@keyframes pulso-planilha { 0% { scale: .92; box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { scale: 1; box-shadow: 0 0 0 10px rgba(255,255,255,0); } 100% { scale: .95; box-shadow: none; } }
@keyframes enche-planilha { to { height: 100%; } }
@keyframes volta-planilha { 0% { transform: rotate(-90deg) translate(15px); opacity: 1; } 99% { transform: rotate(270deg) translate(15px); opacity: 1; } 100% { opacity: 0; } }
/* terminou: abre em "Baixado" com o check */
.botao-planilha.baixado { background: #1F9D55; }
.botao-planilha.baixado::before { width: 0; }
.botao-planilha.baixado .botao-planilha__texto { max-width: 0; opacity: 0; }
.botao-planilha.baixado .botao-planilha__feito { max-width: 8em; opacity: 1; }
.botao-planilha.baixado .logo, .botao-planilha.baixado .seta { opacity: 0; animation: none; }
.botao-planilha.baixado .check { opacity: 1; transform: none; }
/* ===== Bonificacao e Configuracoes com elementos do uiverse.io (12/10/2026) ===== */
/* Anel de porcentagem (inspirado em Ratinax/hard-chipmunk-89): partes/_anel.html */
@property --p-anel { syntax: ''; inherits: false; initial-value: 0; }
.anel {
--cor-anel: var(--ceu-verde-acao, #12A26B); --p-anel: var(--p, 0);
position: relative; flex: none; display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
background: conic-gradient(var(--cor-anel) calc(var(--p-anel) * 1%), color-mix(in srgb, var(--cor-anel) 14%, #E6EBF2) 0);
box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--cor-anel) 70%, transparent);
animation: anel-enche 1.1s cubic-bezier(.23,1,.32,1) both; vertical-align: middle;
}
@keyframes anel-enche { from { --p-anel: 0; } }
.anel::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--ceu-sup, #fff); }
.anel > span { position: relative; font: 700 .7rem/1 var(--ceu-mono, ui-monospace, monospace); color: var(--cor-anel); letter-spacing: -.02em; }
.anel.anel-sm { width: 38px; height: 38px; }
.anel.anel-sm::before { inset: 4px; }
.anel.anel-sm > span { font-size: .62rem; }
.anel-atencao { --cor-anel: #E8A317; } .anel-perda { --cor-anel: #E5484D; } .anel-azul { --cor-anel: #2E7DEF; }
[data-bs-theme="dark"] .anel { background: conic-gradient(var(--cor-anel) calc(var(--p-anel) * 1%), color-mix(in srgb, var(--cor-anel) 18%, #232B3A) 0); }
/* Ponto "ao vivo" que pulsa (uiverse themrsami/quick-cat-81): .ponto-status.ponto-vivo */
.ponto-status.ponto-vivo { position: relative; overflow: visible; }
.ponto-status.ponto-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: ponto-vivo 1.8s ease-out infinite; }
@keyframes ponto-vivo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
/* Batimento cardiaco (uiverse milley69/chilly-swan-51): partes/_batimento.html */
.batimento { display: inline-block; flex: none; width: 52px; height: 39px; --cor-bat: #12A26B; }
.batimento svg { width: 100%; height: 100%; overflow: visible; }
.batimento polyline { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.batimento .fundo { stroke: color-mix(in srgb, var(--cor-bat) 22%, transparent); }
.batimento .frente { stroke: var(--cor-bat); stroke-dasharray: 48, 144; stroke-dashoffset: 192; animation: batimento 1.4s linear infinite; }
.batimento-atencao { --cor-bat: #E8A317; } .batimento-perda { --cor-bat: #E5484D; }
@keyframes batimento { 72.5% { opacity: 0; } to { stroke-dashoffset: 0; } }
/* Categoria longa da penalidade: o chip quebra em bloco arredondado, nao em pilula esticada */
.badge.quebra { white-space: normal; text-align: left; border-radius: 10px; line-height: 1.25; padding-top: .3em; padding-bottom: .3em; }
/* Avatar silhueta no tamanho lg (cabecalhos de ficha) */
.avatar.lg.avatar-silhueta { padding: 3px; }
.avatar.lg.avatar-silhueta svg { border-width: 2px; }
.faixa-indicadores > * { position: relative; }
.faixa-indicadores .anel { position: absolute; top: 10px; right: 12px; }
.cartao-indicador { position: relative; }
.cartao-indicador .batimento, .faixa-indicadores .batimento, .cartao-indicador .anel { position: absolute; top: 10px; right: 12px; }
/* ===== Varredura geral com elementos do uiverse.io (12/10/2026) ===== */
/* Guias/subguias: pilula que desliza entre as abas (ilkhoeri/slippery-elephant-47), JS deslizeDasGuias */
.guias, .subguias { position: relative; }
.deslize-guia { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; box-shadow: var(--ceu-sombra-2); }
.tem-deslize-guia { isolation: isolate; }
:root .tem-deslize-guia .alvo-deslize.alvo-deslize { color: var(--ceu-nevoa) !important; }
:root .guias.tem-deslize-guia .alvo-deslize.alvo-deslize { color: color-mix(in srgb, var(--cor-area, #2E7DEF) 72%, #0E1116) !important; }
.tem-deslize-guia > .guia, .tem-deslize-guia > .guia-grupo, .tem-deslize-guia > .subguia { position: relative; z-index: 1; }
:root .tem-deslize-guia .alvo-deslize.alvo-deslize, :root[data-bs-theme] .tem-deslize-guia .alvo-deslize.alvo-deslize { background: transparent !important; box-shadow: none !important; animation: none !important; }
/* Sino com aviso nao lido: balanca de tempos em tempos e no hover (catraco/brown-dodo-68) */
.sino > .bi { display: inline-block; transform-origin: 50% 10%; }
.sino:hover > .bi { animation: sino-balanca .6s ease; }
.sino.sino-tocando > .bi { animation: sino-balanca-espaco 6s ease infinite; }
.sino.sino-tocando > .badge { animation: ponto-pula 6s ease infinite; }
@keyframes sino-balanca { 25% { transform: rotate(25deg); } 50% { transform: rotate(-20deg) scale(1.2); } 75% { transform: rotate(15deg); } }
@keyframes sino-balanca-espaco { 0%, 88%, 100% { transform: none; } 91% { transform: rotate(25deg); } 94% { transform: rotate(-20deg) scale(1.2); } 97% { transform: rotate(15deg); } }
@keyframes ponto-pula { 0%, 88%, 100% { scale: 1; } 93% { scale: 1.25; } }
/* Botao do assistente com o pulso em volta (themrsami/helpless-bulldog-100) */
.assistente-botao { isolation: isolate; }
.assistente-botao::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: inherit; animation: assistente-pulso 2.6s cubic-bezier(.4,0,.6,1) infinite; pointer-events: none; }
.assistente-botao[aria-expanded="true"]::after { animation: none; }
@keyframes assistente-pulso { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.55); opacity: 0; } }
/* Atualizar/refazer: o icone da uma volta ao clicar e gira no hover (JaydipPrajapati1910/dry-frog-0) */
.btn > .bi-arrow-clockwise, .btn > .bi-arrow-repeat, .btn > .bi-arrow-counterclockwise { display: inline-block; transition: transform .5s ease; }
.btn:hover > .bi-arrow-clockwise, .btn:hover > .bi-arrow-repeat { transform: rotate(180deg); }
.btn > .icone-girando { animation: icone-gira .5s linear 3; }
@keyframes icone-gira { to { transform: rotate(360deg); } }
/* ===== Guia ativa em "vidro liquido" na cor da area (12/10/2026) =====
uiverse.io mymiamo/yellow-rattlesnake-26 (MIT): no lugar da pilula preta, a guia ativa vira um vidro
tingido com a cor da area do menu (--cor-area: verde na Bonificacao, azul em Candidatos...), com os
realces internos do modelo e um brilho da mesma cor por fora. Vale para a guia e para o grupo ativo. */
:root .guias .guia.ativa, :root .guias .guia.ativa:hover,
:root[data-bs-theme] .guias .guia.ativa, :root[data-bs-theme] .guias .guia.ativa:hover,
:root .guias .guia-grupo:has(.guia.ativa) > .guia-grupo-titulo {
--cor-vidro: var(--cor-area, #2E7DEF);
background: color-mix(in srgb, var(--cor-vidro) 16%, #FFFFFF) !important;
color: color-mix(in srgb, var(--cor-vidro) 72%, #0E1116) !important;
box-shadow:
inset 2px 2px 5px -2px rgba(255,255,255,.9),
inset -2px -2px 5px 2px rgba(255,255,255,.55),
inset 0 -2px 0 color-mix(in srgb, var(--cor-vidro) 25%, transparent),
0 0 0 1px color-mix(in srgb, var(--cor-vidro) 35%, transparent),
0 6px 16px -6px color-mix(in srgb, var(--cor-vidro) 65%, transparent) !important;
}
:root[data-bs-theme="dark"] .guias .guia.ativa, :root[data-bs-theme="dark"] .guias .guia.ativa:hover,
:root[data-bs-theme="dark"] .guias .guia-grupo:has(.guia.ativa) > .guia-grupo-titulo {
background: color-mix(in srgb, var(--cor-vidro) 24%, #1B1B1B) !important;
color: color-mix(in srgb, var(--cor-vidro) 75%, #FFFFFF) !important;
box-shadow:
inset 1px 1px 3px -1px rgba(255,255,255,.35),
inset 0 -2px 0 color-mix(in srgb, var(--cor-vidro) 30%, transparent),
0 0 0 1px color-mix(in srgb, var(--cor-vidro) 45%, transparent),
0 6px 18px -6px color-mix(in srgb, var(--cor-vidro) 70%, transparent) !important;
}
:root .guias .guia.ativa .contador { background: color-mix(in srgb, var(--cor-area, #2E7DEF) 22%, transparent); color: inherit; }
/* hover das outras guias: o vidro claro do modelo */
.guias .guia:not(.ativa):hover, .guias .guia-grupo:not(:has(.guia.ativa)) > .guia-grupo-titulo:hover {
background: color-mix(in srgb, var(--cor-area, #2E7DEF) 8%, var(--ceu-sup));
color: color-mix(in srgb, var(--cor-area, #2E7DEF) 70%, var(--ceu-tinta));
box-shadow: inset 2px 2px 5px -2px rgba(255,255,255,.6), inset 0 -2px 0 color-mix(in srgb, var(--cor-area, #2E7DEF) 15%, transparent);
}
.guias .guia:active { transform: scale(.98); }
/* a pilula que desliza leva o mesmo vidro */
.guias .deslize-guia { box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-area, #2E7DEF) 35%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--cor-area, #2E7DEF) 65%, transparent); }
/* ===== Troca de tela sem piscar (12/10/2026) =====
Relato: "quando eu vou trocando de menu ou guia da uma piscada". Medido quadro a quadro: a cada tela
nova a saudacao do topo ("Boa tarde, Nome" + data) ficava escondida ate o clima chegar (.clima-topo com
display none) e a guia ativa entrava com um "pop" de escala/opacidade. A saudacao agora aparece sempre
(regra .cartao-topo.clima-topo la em cima), o clima vem guardado da tela anterior (base.html, sessionStorage)
e o "pop" da guia ativa saiu. View Transition entre paginas foi testada e descartada: no Chrome gerava
um quadro claro no meio da troca. */
/* Pilula pendente (classes postas no quando a tela anterior pediu o deslize; o tema.js tira):
o item ativo nasce sem a pilula, para ela chegar deslizando sem antes aparecer e sumir. */
:root.deslize-menu-pendente .menu-item.ativo, :root.deslize-menu-pendente .menu-item.ativo:hover { background: transparent; box-shadow: none; color: var(--menu-texto); }
:root.deslize-menu-pendente .menu-item.ativo .bi { background: color-mix(in srgb, var(--cor-item, #2E7DEF) 14%, transparent) !important; color: var(--cor-icone, var(--menu-texto)) !important; }
:root[data-bs-theme].deslize-guias-pendente .guias .guia.ativa,
:root[data-bs-theme].deslize-guias-pendente .guias .guia-grupo:has(.guia.ativa) > .guia-grupo-titulo,
:root[data-bs-theme].deslize-subguias-pendente .subguias .subguia.ativa {
background: transparent !important; box-shadow: none !important; animation: none !important;
}
/* =========================================================================
STATUS DA CATRACA no topo (27/10/2026): wifi em miniatura (uiverse
mobinkakei/pink-deer-76) + ponto, pintados por data-estado; selos do menu
no modelo uiverse kamehame-ha/swift-penguin-73 (pilula com fundo a 10%).
========================================================================= */
.status-catraca { --cor-catraca: #94a3b8; }
.status-catraca[data-estado="ok"] { --cor-catraca: #22c55e; }
.status-catraca[data-estado="online"] { --cor-catraca: #3b82f6; }
.status-catraca[data-estado="liberada"] { --cor-catraca: #eab308; }
.status-catraca[data-estado="sem_resposta"] { --cor-catraca: #ef4444; }
.status-catraca .wifi-catraca { position: relative; width: 22px; height: 22px; display: inline-grid; place-items: center; }
.status-catraca .wifi-catraca svg { position: absolute; inset: 0; width: 22px; height: 22px; }
.status-catraca .wifi-catraca svg.circle-middle { width: 15.4px; height: 15.4px; inset: 3.3px; }
.status-catraca .wifi-catraca svg.circle-inner { width: 8.8px; height: 8.8px; inset: 6.6px; }
.status-catraca .wifi-catraca circle { fill: none; stroke-width: 7px; stroke-linecap: round; transform: rotate(-100deg); transform-origin: center; }
.status-catraca .wifi-catraca circle.back { stroke: color-mix(in srgb, var(--cor-catraca) 28%, transparent); }
.status-catraca .wifi-catraca circle.front { stroke: var(--cor-catraca); }
.status-catraca .wifi-catraca svg.circle-outer circle { stroke-dasharray: 62.75 188.25; }
.status-catraca .wifi-catraca svg.circle-middle circle { stroke-dasharray: 42.5 127.5; }
.status-catraca .wifi-catraca svg.circle-inner circle { stroke-dasharray: 22 66; }
/* so anima enquanto consulta ou quando esta sem resposta (chama atencao); nos outros estados fica parado */
.status-catraca[data-estado="carregando"] svg.circle-outer circle.front, .status-catraca[data-estado="sem_resposta"] svg.circle-outer circle.front { animation: wifi-catraca-outer 1.8s ease infinite .15s; }
.status-catraca[data-estado="carregando"] svg.circle-middle circle.front, .status-catraca[data-estado="sem_resposta"] svg.circle-middle circle.front { animation: wifi-catraca-middle 1.8s ease infinite .1s; }
.status-catraca[data-estado="carregando"] svg.circle-inner circle.front, .status-catraca[data-estado="sem_resposta"] svg.circle-inner circle.front { animation: wifi-catraca-inner 1.8s ease infinite .05s; }
@keyframes wifi-catraca-outer { 0% { stroke-dashoffset: 25; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 301; } 80%, 100% { stroke-dashoffset: 276; } }
@keyframes wifi-catraca-middle { 0% { stroke-dashoffset: 17; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 204; } 80%, 100% { stroke-dashoffset: 187; } }
@keyframes wifi-catraca-inner { 0% { stroke-dashoffset: 9; } 25% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 106; } 80%, 100% { stroke-dashoffset: 97; } }
.status-catraca .ponto-catraca { position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--cor-catraca); border: 2px solid var(--ceu-sup, #fff); box-sizing: content-box; }
.status-catraca[data-estado="ok"] .ponto-catraca, .status-catraca[data-estado="online"] .ponto-catraca { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-catraca) 60%, transparent); animation: ponto-catraca 2.4s ease-out infinite; }
.status-catraca[data-estado="liberada"] .ponto-catraca, .status-catraca[data-estado="sem_resposta"] .ponto-catraca { animation: ponto-catraca 1.2s ease-out infinite; }
@keyframes ponto-catraca { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-catraca) 55%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
.menu-status-catraca .item-status-catraca { padding: .3rem 0; }
.menu-status-catraca .item-status-catraca + .item-status-catraca { border-top: 1px dashed var(--ceu-fio-suave, #e3e8ee); }
.selo-status { font-size: .78rem; line-height: 1.25rem; padding: 1px .5rem; border-radius: .375rem; border: 1px solid currentColor; font-weight: 600; }
.selo-status.blue { color: rgb(59 130 246); background: rgba(59, 130, 246, .10); }
.selo-status.yellow { color: rgb(202 138 4); background: rgba(234, 179, 8, .12); }
.selo-status.green { color: rgb(22 163 74); background: rgba(34, 197, 94, .10); }
.selo-status.red { color: rgb(239 68 68); background: rgba(239, 68, 68, .10); }
.selo-status.grey { color: #64748b; background: rgba(100, 116, 139, .10); }
/* ---------------------------------------------------------------------------
Aviso pulsante de passagem sem ponto ao lado do sino (28/10/2026)
--------------------------------------------------------------------------- */
/* sempre visivel no topo (pedido de 28/10/2026): cinza e parado sem pendencia; vermelho e pulsando com pendencia */
.aviso-sem-ponto .btn-icone > .bi { position: relative; z-index: 1; }
.aviso-sem-ponto .pulso-sem-ponto { position: absolute; inset: 4px; border-radius: 50%; background: rgba(229, 83, 61, .35); opacity: 0; }
.aviso-sem-ponto[data-estado="pendente"] .btn-icone { color: #e5533d; }
.aviso-sem-ponto[data-estado="pendente"] .pulso-sem-ponto { opacity: 1; animation: pulso-sem-ponto 1.6s ease-out infinite; }
.aviso-sem-ponto .badge { position: absolute; top: 2px; right: 2px; font-size: .62rem; padding: .2em .4em; z-index: 2; }
@keyframes pulso-sem-ponto { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
.lista-avisos-sem-ponto { max-height: 60vh; overflow-y: auto; }
.aviso-item-sem-ponto { padding: .5rem .9rem; border-bottom: 1px solid var(--ceu-fio, #e3e8ee); font-size: .85rem; }
.aviso-item-sem-ponto:last-child { border-bottom: 0; }
/* Editar / excluir (partes/_btn_editar.html e _btn_lixeira.html; nasceram na guia Horarios em 28/10/2026 e
viraram componentes do sistema em 29/10/2026 com os EPIs; pedido: "o botao de editar e excluir nao ficou legal, ache outro em
elementos no uiverse.io"): editBtn de vinodjangid07/young-snake-87 (lapis inclina e risca a base) e bin-button de
vinodjangid07/tame-cobra-18 (tampa da lixeira abre), em 34 px e nas cores do tema. */
.btn-editar-ac, .btn-lixeira-ac { width: 34px; height: 34px; border-radius: 11px; cursor: pointer; vertical-align: middle; flex: none; }
.btn-editar-ac {
display: inline-flex; align-items: center; justify-content: center; border: 0; position: relative; overflow: hidden;
background: var(--cor-area, #4f46e5); color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .12); transition: all .3s; text-decoration: none;
}
.btn-editar-ac::before {
content: ""; width: 200%; height: 200%; position: absolute; z-index: 1; border-radius: 50%; filter: blur(8px);
background: color-mix(in srgb, #fff 22%, var(--cor-area, #4f46e5)); transform: scale(0); transition: all .3s;
}
.btn-editar-ac:hover::before, .btn-editar-ac:focus-visible::before { transform: scale(1); }
.btn-editar-ac:hover, .btn-editar-ac:focus-visible { color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); outline: 0; }
.btn-editar-ac svg { height: 13px; fill: #fff; position: relative; z-index: 3; transition: all .2s; transform-origin: bottom; }
.btn-editar-ac i { position: relative; z-index: 3; font-size: .95rem; }
.btn-editar-ac:hover svg, .btn-editar-ac:focus-visible svg { transform: rotate(-15deg) translateX(3px); }
.btn-editar-ac::after {
content: ""; width: 16px; height: 1.5px; position: absolute; bottom: 10px; left: -4px; background: #fff; border-radius: 2px;
z-index: 2; transform: scaleX(0); transform-origin: left; transition: transform .5s ease-out;
}
.btn-editar-ac:hover::after, .btn-editar-ac:focus-visible::after { transform: scaleX(1); left: 0; transform-origin: right; }
.btn-lixeira-ac {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
background: #e5533d; border: 2px solid #f6c3bb; transition-duration: .3s;
}
.btn-lixeira-ac .caixa { width: 10px; }
.btn-lixeira-ac .tampa { width: 12px; transform-origin: right; transition-duration: .3s; }
.btn-lixeira-ac:hover .tampa, .btn-lixeira-ac:focus-visible .tampa { transform: rotate(45deg); }
.btn-lixeira-ac:hover, .btn-lixeira-ac:focus-visible { background: #c9302c; outline: 0; }
.btn-lixeira-ac:active, .btn-editar-ac:active { transform: scale(.9); }
[data-bs-theme="dark"] .btn-lixeira-ac { border-color: #7a2a20; }