/* * tema-nexo.css — o visual Nexo Legal por cima das telas de calculo. * * SO PINTA. As telas continuam as mesmas -- o previdenciario-layout.js (classes * fc-*) e o trabalhista-component.js (utilitarios do Tailwind) -- com os mesmos * ids, os mesmos botoes e o mesmo motor. Este arquivo so troca cor, fonte, * cantos e tamanhos, e so vale dentro de um elemento com a classe tema-nexo. * No app.html (e no modelo-nexo.html) quem leva a classe sao os dois * conteineres de calculo, #view-previdenciario e #view-trabalhista: o resto do * app nao muda. * * O PADRAO (o mesmo do canvas de design): * cartao fundo branco, cantos de 16, sombra 0 6px 18px, recuo de 24 * caixa dentro de cartao: borda #E5E7EB, cantos de 12, recuo de 16 * texto titulo 16/700, rotulo 13/600, corpo 14, legenda 12, indicador 24/700 * controle botao, campo e select com 44px de altura e cantos de 12 * etiqueta 12/600, arredondada, sem borda, uma cor por significado * * Todo seletor comeca por .tema-nexo: assim ele pesa uma classe a mais que o * do desenho original e vence sem precisar de !important (o CSS do layout e * injetado em tempo de execucao, DEPOIS deste arquivo). */ /* ── base ──────────────────────────────────────────────────────────────── */ .tema-nexo { color: #111827; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; } /* no app a tela ocupa a area de conteudo inteira: limita como no design */ .tema-nexo .fc, #view-trabalhista.tema-nexo > div { max-width: 1280px; margin-left: auto; margin-right: auto; } .tema-nexo .animate-fade-in { animation: nx-entra .2s ease-out; } @keyframes nx-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════════════════ PREVIDENCIARIO — as classes fc-* do previdenciario-layout.js ════════════════════════════════════════════════════════════════════════ */ .tema-nexo .fc { --fc-azul: #4F46E5; --fc-azul2: #4F46E5; --fc-tinta: #111827; --fc-suave: #6B7280; --fc-fraco: #9CA3AF; --fc-linha: #E5E7EB; --fc-borda: #D1D5DB; --fc-fundo: #F9FAFB; --fc-cartao: #FFFFFF; --fc-obrig: #FFFFFF; --fc-verde: #047857; --fc-verde-f: #ECFDF5; --fc-verde-ff: #ECFDF5; --fc-verm: #B91C1C; --fc-verm-f: #FEF2F2; --fc-verm-ff: #FEF2F2; --fc-lar: #B45309; --fc-lar-f: #FFFBEB; --fc-lar-ff: #FFFBEB; --fc-azul-f: #EEF2FF; --fc-azul-ff: #EEF2FF; --fc-cinza-f: #F3F4F6; font-family: inherit; font-size: 14px; line-height: 1.5; color: #111827; background: transparent; min-height: 0; padding-bottom: 0; } /* a barra do documento vira o cartao do caso */ .tema-nexo .fc-doc { background: #FFFFFF; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); min-height: 0; padding: 24px; gap: 16px; } .tema-nexo .fc-doc__tag { font-size: 12px; font-weight: 600; color: #4338CA; background: #EEF2FF; border: 0; border-radius: 999px; padding: 4px 10px; } .tema-nexo .fc-doc__nome { font-size: 16px; font-weight: 700; color: #111827; border: 0; padding: 0; min-width: 0; max-width: 520px; } .tema-nexo .fc-doc__nome--vazio { color: #9CA3AF; font-weight: 600; } .tema-nexo .fc-doc__info { font-size: 13px; color: #6B7280; } .tema-nexo .fc-icone { height: 44px; padding: 0 18px; gap: 8px; border-radius: 12px; border: 1px solid #D1D5DB; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 600; } .tema-nexo .fc-icone:hover { background: #F9FAFB; color: #111827; } .tema-nexo .fc-icone--ativo { background: #EEF2FF; border-color: #4F46E5; color: #3730A3; } .tema-nexo .fc-faixa { display: none; } /* abas sublinhadas */ .tema-nexo .fc-abas { justify-content: flex-start; gap: 4px; background: transparent; padding: 0; margin-top: 24px; border-bottom: 1px solid #E5E7EB; } .tema-nexo .fc-aba { padding: 12px 16px; font-size: 14px; font-weight: 500; color: #4B5563; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tema-nexo .fc-aba:hover { background: transparent; color: #111827; } .tema-nexo .fc-aba--resultado { font-weight: 500; } .tema-nexo .fc-aba--ativa, .tema-nexo .fc-aba--ativa:hover { color: #4F46E5; border-bottom-color: #4F46E5; font-weight: 600; } .tema-nexo .fc-aba--off, .tema-nexo .fc-aba--off:hover { color: #D1D5DB; } .tema-nexo .fc-aba__n { font-size: 12px; font-weight: 600; color: #4338CA; background: #EEF2FF; border-radius: 999px; padding: 2px 8px; margin-left: 6px; } .tema-nexo .fc-abas__sep { background: #E5E7EB; margin: 12px 8px; } /* pagina */ .tema-nexo .fc-pagina, .tema-nexo .fc-pagina--larga { max-width: none; margin: 0; padding: 24px 0 0; } /* pilulas viram o controle segmentado */ .tema-nexo .fc-pilulas { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: 4px; background: #F3F4F6; border-radius: 12px; padding: 4px; margin: 0 0 24px; } .tema-nexo .fc-pilula { height: 36px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: #4B5563; font-size: 14px; font-weight: 500; } .tema-nexo .fc-pilula:hover { color: #111827; } .tema-nexo .fc-pilula--ativa, .tema-nexo .fc-pilula--ativa:hover { background: #FFFFFF; color: #4F46E5; font-weight: 600; box-shadow: 0 1px 3px rgba(15,23,42,0.12); } /* cartoes */ .tema-nexo .fc-cartao { background: #FFFFFF; border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); margin-bottom: 24px; } .tema-nexo .fc-cartao__cab { padding: 24px 24px 0; gap: 16px; align-items: flex-start; } .tema-nexo .fc-cartao__tit { font-size: 16px; font-weight: 700; color: #111827; } .tema-nexo .fc-cartao__sub { font-size: 13px; color: #6B7280; margin: 4px 0 0; line-height: 1.5; } .tema-nexo .fc-cartao__corpo { padding: 16px 24px 24px; } .tema-nexo .fc-cartao__corpo--sem { padding: 16px 0 0; } .tema-nexo .fc-grade { gap: 16px; } .tema-nexo .fc-grade--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } /* campos: rotulo em cima, caixa de 44px embaixo */ .tema-nexo .fc-campo { border: 0; border-radius: 0; background: transparent; padding: 0; min-height: 0; gap: 8px; justify-content: flex-start; } .tema-nexo .fc-campo:focus-within { border: 0; box-shadow: none; } .tema-nexo .fc-campo__rot { font-size: 13px; font-weight: 600; color: #374151; line-height: 1.3; } .tema-nexo .fc-campo__rot i { color: #B91C1C; } .tema-nexo .fc-campo input, .tema-nexo .fc-campo select { height: 44px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 12px; padding: 0 14px; background: #FFFFFF; font-size: 14px; color: #111827; } .tema-nexo .fc-campo input:focus, .tema-nexo .fc-campo select:focus { outline: 0; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .tema-nexo .fc-campo--obrig input, .tema-nexo .fc-campo--obrig select { background: #FFFFFF; } .tema-nexo .fc-campo--falta { border: 0; box-shadow: none; } .tema-nexo .fc-campo--falta input, .tema-nexo .fc-campo--falta select { border-color: #F59E0B; box-shadow: 0 0 0 3px rgba(245,158,11,0.15); } .tema-nexo .fc-campo--ro input { background: #F9FAFB; } .tema-nexo .fc-campo--alt { border: 0; box-shadow: none; } .tema-nexo .fc-campo--alt input, .tema-nexo .fc-campo--alt select { border-color: #B45309; box-shadow: 0 0 0 3px rgba(180,83,9,0.12); } /* a classe fc-campo tambem aparece direto num input (salario novo) */ .tema-nexo input.fc-campo { height: 44px; min-height: 44px !important; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 12px; padding: 0 14px !important; background: #FFFFFF; font: inherit; font-size: 14px; } .tema-nexo .fc-linha { gap: 16px; align-items: flex-end; margin-bottom: 16px; } .tema-nexo .fc-radios { gap: 8px; padding: 0; flex-wrap: wrap; font-size: 14px; } .tema-nexo .fc-radios > span { font-size: 13px; font-weight: 600; color: #374151; margin-right: 4px; } .tema-nexo .fc-radio { height: 44px; box-sizing: border-box; padding: 0 16px; gap: 8px; border: 1px solid #D1D5DB; border-radius: 12px; background: #FFFFFF; font-weight: 500; color: #374151; } .tema-nexo .fc-radio:has(input:checked) { border-color: #4F46E5; background: #EEF2FF; color: #3730A3; font-weight: 600; } .tema-nexo .fc-radio input { accent-color: #4F46E5; width: 16px; height: 16px; } .tema-nexo .fc-ajuda { font-size: 12px; color: #6B7280; margin: 8px 0 0; line-height: 1.5; } .tema-nexo .fc-ajuda b { color: #374151; } /* botoes: todos com 44px */ .tema-nexo .fc-btn { height: 44px; box-sizing: border-box; padding: 0 18px; gap: 8px; border-radius: 12px; border: 1px solid #D1D5DB; background: #FFFFFF; color: #374151; font-size: 14px; font-weight: 600; white-space: nowrap; vertical-align: middle; } .tema-nexo .fc-btn:hover { background: #F9FAFB; color: #111827; } .tema-nexo .fc-btn--cheio { background: #4F46E5; border-color: #4F46E5; color: #FFFFFF; font-weight: 700; } .tema-nexo .fc-btn--cheio:hover { background: #4338CA; border-color: #4338CA; color: #FFFFFF; } .tema-nexo .fc-btn--verde { background: #047857; border-color: #047857; color: #FFFFFF; font-weight: 700; } .tema-nexo .fc-btn--verde:hover { background: #065F46; color: #FFFFFF; } .tema-nexo .fc-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; } .tema-nexo .fc-btn--perigo { border-color: #FECACA; color: #B91C1C; } .tema-nexo .fc-btn--perigo:hover { background: #FEF2F2; color: #B91C1C; } .tema-nexo .fc-btn--grande { padding: 0 24px; font-size: 14px; } .tema-nexo .fc-btn:disabled { opacity: .45; } .tema-nexo .fc-acoes { gap: 8px; } .tema-nexo .fc-mini { width: 44px; height: 44px; border-radius: 12px; border: 1px solid #E5E7EB; background: #FFFFFF; color: #4B5563; font-size: 14px; flex-shrink: 0; } .tema-nexo .fc-mini:hover { border-color: #D1D5DB; background: #F9FAFB; color: #111827; } .tema-nexo .fc-mini--ok { color: #047857; } .tema-nexo .fc-mini--perigo { color: #B91C1C; } .tema-nexo .fc-acoes-linha .fc-mini { width: 44px; height: 44px; border: 0; background: transparent; } .tema-nexo .fc-acoes-linha .fc-mini:hover { background: #F3F4F6; } /* avisos */ .tema-nexo .fc-aviso { gap: 12px; border: 0; border-radius: 12px; padding: 16px; font-size: 14px; margin-bottom: 24px; line-height: 1.5; } .tema-nexo .fc-cartao .fc-aviso { margin-bottom: 16px; } .tema-nexo .fc-cartao .fc-aviso:last-child { margin-bottom: 0; } .tema-nexo .fc-aviso > i { margin-top: 3px; } .tema-nexo .fc-aviso .fc-btn { margin: 8px 0 0 !important; } .tema-nexo .fc-aviso--alerta { background: #FFFBEB; color: #92400E; } .tema-nexo .fc-aviso--info { background: #EEF2FF; color: #3730A3; } .tema-nexo .fc-aviso--erro { background: #FEF2F2; color: #991B1B; } .tema-nexo .fc-aviso--ok { background: #ECFDF5; color: #065F46; } .tema-nexo .fc-aviso__tit { font-weight: 600; } .tema-nexo .fc-detalhes { border: 0; background: #EEF2FF; border-radius: 12px; margin-bottom: 24px; } .tema-nexo .fc-detalhes > summary { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #3730A3; } .tema-nexo .fc-detalhes ul { padding: 0 16px 16px 36px; } .tema-nexo .fc-detalhes li { font-size: 13px; color: #3730A3; margin: 4px 0; } /* secoes de resultado viram cartoes, com o selo de situacao no titulo */ .tema-nexo .fc-secao { background: #FFFFFF; border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); margin-bottom: 24px; overflow: hidden; } .tema-nexo .fc-secao__cab, .tema-nexo .fc-secao--ok > .fc-secao__cab, .tema-nexo .fc-secao--nao > .fc-secao__cab, .tema-nexo .fc-secao--reaf > .fc-secao__cab, .tema-nexo .fc-secao--info > .fc-secao__cab, .tema-nexo .fc-secao--neutro > .fc-secao__cab, .tema-nexo details.fc-secao > summary .fc-secao__cab { border-left: 0; background: #FFFFFF; color: #111827; padding: 24px 24px 16px; font-size: 16px; font-weight: 700; justify-content: flex-start; gap: 8px; flex-wrap: wrap; } .tema-nexo .fc-secao__cab > span:first-child { display: inline-flex; align-items: center; gap: 8px; } .tema-nexo .fc-secao--ok > .fc-secao__cab > span:first-child::before, .tema-nexo .fc-secao--nao > .fc-secao__cab > span:first-child::before, .tema-nexo .fc-secao--reaf > .fc-secao__cab > span:first-child::before, .tema-nexo details.fc-secao--neutro > summary .fc-secao__cab > span:first-child::before { width: 24px; height: 24px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .tema-nexo .fc-secao--ok > .fc-secao__cab > span:first-child::before { content: "\2713"; background: #ECFDF5; color: #047857; } .tema-nexo .fc-secao--nao > .fc-secao__cab > span:first-child::before { content: "\2715"; background: #FEF2F2; color: #B91C1C; } .tema-nexo .fc-secao--reaf > .fc-secao__cab > span:first-child::before { content: "!"; background: #FFFBEB; color: #92400E; } .tema-nexo details.fc-secao--neutro > summary .fc-secao__cab > span:first-child::before { content: "\2013"; background: #F3F4F6; color: #6B7280; } .tema-nexo .fc-secao__cab small { font-size: 12px; font-weight: 600; opacity: 1; border-radius: 999px; padding: 4px 10px; background: #F3F4F6; color: #374151; } .tema-nexo .fc-secao--ok > .fc-secao__cab small { background: #ECFDF5; color: #047857; } .tema-nexo .fc-secao--nao > .fc-secao__cab small { background: #FEF2F2; color: #B91C1C; } .tema-nexo .fc-secao--info > .fc-secao__cab small { background: #EEF2FF; color: #4338CA; } .tema-nexo .fc-secao__corpo { padding: 0 24px 24px; } .tema-nexo .fc-secao--reaf .fc-secao__corpo { font-size: 14px; color: #374151; } .tema-nexo details.fc-secao > summary .fc-secao__cab::after { content: "mostrar"; margin-left: auto; font-size: 13px; font-weight: 600; color: #4F46E5; } .tema-nexo details.fc-secao[open] > summary .fc-secao__cab::after { content: "ocultar"; } /* grupos e cartoes de regra */ .tema-nexo .fc-grupo { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #4338CA; margin: 0 0 12px; gap: 8px; } .tema-nexo .fc-grupo:not(:first-child) { margin-top: 24px; } .tema-nexo .fc-regras { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 16px; } .tema-nexo .fc-regra, .tema-nexo .fc-regra--ok, .tema-nexo .fc-regra--nao, .tema-nexo .fc-regra--na { border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; } .tema-nexo .fc-regra--melhor { border-color: #4F46E5; box-shadow: 0 0 0 1px #4F46E5; } .tema-nexo .fc-regra__cab, .tema-nexo .fc-regra--ok .fc-regra__cab, .tema-nexo .fc-regra--nao .fc-regra__cab, .tema-nexo .fc-regra--na .fc-regra__cab { background: #FFFFFF; padding: 16px 16px 8px; font-size: 14px; font-weight: 700; color: #111827; } .tema-nexo .fc-regra--na .fc-regra__cab { color: #6B7280; } .tema-nexo .fc-regra__base { font-size: 12px; font-weight: 600; color: #4338CA; margin-top: 4px; } .tema-nexo .fc-regra__reqs { font-size: 13px; } .tema-nexo .fc-regra__reqs th { font-size: 12px; font-weight: 600; color: #4B5563; padding: 8px 16px 4px; } .tema-nexo .fc-regra__reqs td { padding: 4px 16px; color: #374151; } .tema-nexo .fc-regra__reqs td:first-child { color: #6B7280; } .tema-nexo .fc-regra__reqs td:nth-child(2) { border-right: 1px solid #F3F4F6; white-space: nowrap; } .tema-nexo .fc-regra__reqs tr:last-child td { padding-bottom: 16px; } .tema-nexo .fc-ok { color: #047857; } .tema-nexo .fc-x { color: #B91C1C; } .tema-nexo .fc-falta { font-size: 12px; color: #B45309; } .tema-nexo .fc-regra__pe { border-top: 1px solid #F3F4F6; padding: 12px 16px; font-size: 12px; gap: 16px; } .tema-nexo .fc-regra__formula { color: #6B7280; line-height: 1.5; } .tema-nexo .fc-regra__formula .fc-btn { display: flex; width: fit-content; margin-top: 8px !important; } .tema-nexo .fc-regra__rmi { font-size: 16px; font-weight: 700; color: #111827; } .tema-nexo .fc-regra__rmi small { font-size: 12px; font-weight: 500; color: #6B7280; text-transform: none; letter-spacing: 0; } .tema-nexo .fc-regra__faixa { border-top: 0; background: #FFFBEB; padding: 12px 16px; font-size: 13px; color: #92400E; } .tema-nexo .fc-regra__alt { border-top: 1px solid #F3F4F6; padding: 12px 16px; font-size: 13px; } .tema-nexo .fc-regra__alt-tit { font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #4338CA; } .tema-nexo .fc-alt b { color: #3730A3; } .tema-nexo .fc-alt__nota { color: #6B7280; font-size: 12px; } /* etiquetas */ .tema-nexo .fc-chip { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; border: 0; border-radius: 999px; padding: 4px 10px; line-height: 1.4; } .tema-nexo .fc-chip--grupo, .tema-nexo .fc-chip--cinza { background: #F3F4F6; color: #374151; border: 0; } .tema-nexo .fc-chip--melhor { background: #4F46E5; color: #FFFFFF; } .tema-nexo .fc-chip--ctps, .tema-nexo .fc-chip--azul { background: #EEF2FF; color: #4338CA; } .tema-nexo .fc-chip--alerta { background: #FFFBEB; color: #92400E; } .tema-nexo .fc-chip--erro { background: #FEF2F2; color: #B91C1C; } .tema-nexo .fc-chip--ok { background: #ECFDF5; color: #047857; } /* a melhor regra: o indicador escuro */ .tema-nexo .fc-destaque { border: 0; border-radius: 16px; background: #312E81; box-shadow: 0 6px 18px rgba(15,23,42,0.08); padding: 24px; gap: 24px; margin-bottom: 24px; color: #FFFFFF; } .tema-nexo .fc-destaque__rot { font-size: 13px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #C7D2FE; } .tema-nexo .fc-destaque__nome { font-size: 16px; font-weight: 700; color: #FFFFFF; margin-top: 8px; } .tema-nexo .fc-destaque__formula { font-size: 12px; color: #E0E7FF; margin-top: 4px; } .tema-nexo .fc-destaque__valor { font-size: 24px; font-weight: 700; color: #FFFFFF; margin-top: 8px; font-variant-numeric: tabular-nums; } .tema-nexo .fc-destaque .fc-btn { background: #FFFFFF; border-color: #FFFFFF; color: #312E81; margin-top: 8px; } .tema-nexo .fc-destaque .fc-btn:hover { background: #EEF2FF; } /* o resumo do caso vira a fileira de indicadores */ .tema-nexo .fc-resumo { display: flex; flex-wrap: wrap; gap: 24px; background: transparent; border: 0; border-radius: 0; margin-bottom: 24px; overflow: visible; } .tema-nexo .fc-resumo > div, .tema-nexo .fc-resumo > div:last-child { flex: 1 1 260px; background: #FFFFFF; border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); padding: 24px; } .tema-nexo .fc-resumo span { font-size: 13px; font-weight: 500; color: #6B7280; text-transform: none; letter-spacing: 0; } .tema-nexo .fc-resumo b { font-size: 24px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tema-nexo .fc-resumo b.fc-falta-dado { color: #B45309; font-size: 16px; } /* chave e valor do demonstrativo, em caixas */ .tema-nexo .fc-colunas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 0 24px 24px; } .tema-nexo .fc-colunas > div { border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; } .tema-nexo .fc-colunas h4 { font-size: 14px; font-weight: 700; color: #4338CA; margin: 0 0 8px; } .tema-nexo .fc-kv { justify-content: space-between; gap: 12px; font-size: 14px; margin: 8px 0; } .tema-nexo .fc-kv > span:first-child { color: #6B7280; white-space: normal; } .tema-nexo .fc-kv__pontos { flex: 1; border-bottom: 1px dotted #E5E7EB; } .tema-nexo .fc-kv > b { font-weight: 600; font-variant-numeric: tabular-nums; } /* nas Fontes da memoria as linhas sao filhas diretas: sem caixa em cada uma */ .tema-nexo .fc-colunas > div.fc-kv { border: 0; border-radius: 0; padding: 0; } /* o cartao da escolha da regra vem com recuo proprio no HTML */ .tema-nexo .fc-cartao[style*="padding:12px 16px"] { padding: 24px !important; } .tema-nexo .fc-secao > div[style*="padding:4px 14px 12px"] { padding: 0 24px 24px !important; } .tema-nexo .fc-secao > div[style*="padding:4px 14px 12px"] .fc-ajuda { background: #EEF2FF; color: #312E81; border-radius: 12px; padding: 16px; font-size: 14px; } /* tabelas */ .tema-nexo .fc-tabela { font-size: 14px; } .tema-nexo .fc-tabela th { background: #F9FAFB; color: #4B5563; font-size: 12px; font-weight: 600; padding: 12px 16px; border: 0; border-bottom: 1px solid #E5E7EB; white-space: nowrap; } .tema-nexo .fc-tabela td { padding: 12px 16px; border-left: 0; border-bottom: 1px solid #F3F4F6; } .tema-nexo .fc-tabela th:first-child, .tema-nexo .fc-tabela td:first-child { padding-left: 24px; } .tema-nexo .fc-tabela th:last-child, .tema-nexo .fc-tabela td:last-child { padding-right: 24px; } .tema-nexo .fc-tabela tbody tr:nth-child(even) td { background: #FFFFFF; } .tema-nexo .fc-tabela tbody tr:hover td { background: #F9FAFB; } .tema-nexo .fc-tabela--compacta td, .tema-nexo .fc-tabela--compacta th { padding-left: 24px; padding-right: 24px; } .tema-nexo .fc-tabela--grade td { padding: 8px; } .tema-nexo .fc-tabela--grade th { padding: 12px 8px; white-space: normal; } /* a grade de periodos cabe na tela: campos em pares e colunas de largura fixa (a 1a e a ultima ja levam os 24px de recuo); a descricao fica com o resto */ .tema-nexo .fc-tabela--grade { min-width: 1040px; } .tema-nexo .fc-g-acoes { width: 124px; } .tema-nexo .fc-g-n { width: 40px; } .tema-nexo .fc-g-per { width: 132px; } .tema-nexo .fc-g-enq { width: 200px; } .tema-nexo .fc-g-car { width: 80px; } .tema-nexo .fc-g-comp { width: 140px; } .tema-nexo .fc-g-obs { width: 172px; } .tema-nexo .fc-pilha { gap: 8px; } .tema-nexo .fc-cab-pilha { gap: 4px; } .tema-nexo .fc-acoes-grade { gap: 4px; } .tema-nexo .fc-tabela--grade .fc-celula[data-vinc="inicio"], .tema-nexo .fc-tabela--grade .fc-celula[data-vinc="fim"], .tema-nexo .fc-tabela--grade .fc-celula[data-vinc="computavelDesde"] { min-width: 0; } .tema-nexo .fc-tabela td > input.comp-mes, .tema-nexo .fc-tabela td > input.comp-valor { height: 44px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 12px; padding: 0 12px; font-size: 14px; } .tema-nexo .fc-celula { height: 44px; box-sizing: border-box; border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; padding: 0 10px; font-size: 14px; } .tema-nexo .fc-celula:hover { border-color: #D1D5DB; } .tema-nexo .fc-celula[data-vinc="inicio"], .tema-nexo .fc-celula[data-vinc="fim"], .tema-nexo .fc-celula[data-vinc="computavelDesde"] { min-width: 120px; } .tema-nexo .fc-celula:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .tema-nexo select.fc-celula:disabled { background: #F9FAFB; } .tema-nexo .fc-caixa { width: 18px; height: 18px; accent-color: #4F46E5; } .tema-nexo .fc-sub { font-size: 12px; color: #6B7280; padding: 4px 0 0 2px; } .tema-nexo .fc-especial, .tema-nexo .fc-beneficio { background: #FFFBEB !important; font-weight: 600; } .tema-nexo .fc-tabela tr.fc-off td { background: #F9FAFB !important; color: #9CA3AF; } .tema-nexo .fc-tabela tr.fc-edicao td { background: #FFFBEB !important; border-top: 0; border-bottom: 1px solid #FDE68A; } .tema-nexo .fc-pe-tabela { padding: 16px 24px; font-size: 12px; color: #6B7280; border-top: 1px solid #F3F4F6; } .tema-nexo .fc-check { font-size: 14px; } /* envio de arquivo */ .tema-nexo .fc-drop { border: 1px dashed #A5B4FC; border-radius: 12px; background: #FFFFFF; padding: 32px 16px; } .tema-nexo .fc-drop:hover, .tema-nexo .fc-drop.border-indigo-500 { border-color: #4F46E5; background: #EEF2FF; } .tema-nexo .fc-drop__icone { font-size: 24px; color: #818CF8; margin-bottom: 8px; } .tema-nexo .fc-drop__tit { font-size: 14px; font-weight: 600; color: #3730A3; } .tema-nexo .fc-drop__sub { font-size: 13px; color: #6B7280; margin-top: 4px; } .tema-nexo .fc-progresso { background: #E5E7EB; height: 6px; border-radius: 999px; } .tema-nexo .fc-progresso > div { background: #4F46E5; } .tema-nexo .fc-vazio { font-size: 14px; color: #6B7280; padding: 48px 16px; } .tema-nexo .fc-vazio i { color: #A5B4FC; font-size: 24px; } /* CTPS e deficiencia */ .tema-nexo .fc-ctps { border: 1px solid #E5E7EB; border-radius: 12px; padding: 16px; margin-top: 12px; } .tema-nexo .fc-ctps--ok { border-color: #A7F3D0; } .tema-nexo .fc-ctps__nome { font-size: 14px; font-weight: 700; margin: 8px 0 4px; } .tema-nexo .fc-ctps__linha { font-size: 12px; color: #6B7280; } .tema-nexo .fc-ctps__bloco { font-size: 12px; border: 0 !important; border-radius: 12px; padding: 12px; margin-top: 8px; } .tema-nexo .fc-ctps__bloco--alerta { background: #FFFBEB; color: #92400E; } .tema-nexo .fc-ctps__bloco--erro { background: #FEF2F2; color: #991B1B; } .tema-nexo .fc-ctps__bloco--info { background: #EEF2FF; color: #3730A3; } .tema-nexo .fc-ctps__bloco--neutro { background: #F9FAFB; color: #4B5563; } .tema-nexo .fc-pcd { gap: 8px; font-size: 14px; margin-bottom: 8px; } /* janela de periodo novo */ .tema-nexo .fc-modal-fundo { background: rgba(17,24,39,0.5); } .tema-nexo .fc-modal { border-radius: 16px; box-shadow: 0 20px 50px rgba(15,23,42,0.25); } .tema-nexo .fc-modal__cab { padding: 24px 24px 16px; border-bottom: 0; font-size: 16px; font-weight: 700; } .tema-nexo .fc-modal__corpo { padding: 0 24px 24px; gap: 16px; } .tema-nexo .fc-modal__pe { padding: 16px 24px 24px; border-top: 1px solid #F3F4F6; gap: 8px; } /* os paineis de Outros Beneficios e Atrasados (Tailwind dentro do encaixe) */ .tema-nexo .fc-encaixe > div { border: 0 !important; border-radius: 16px !important; box-shadow: 0 6px 18px rgba(15,23,42,0.08) !important; padding: 24px !important; } .tema-nexo .fc-encaixe h3 { font-size: 16px; font-weight: 700; } .tema-nexo .fc-encaixe label { font-size: 13px; font-weight: 600; color: #374151; } .tema-nexo .fc-encaixe input:not([type=checkbox]):not([type=radio]), .tema-nexo .fc-encaixe select { height: 44px; min-height: 44px; box-sizing: border-box; border: 1px solid #D1D5DB !important; border-radius: 12px !important; padding: 0 14px !important; font-size: 14px !important; font-weight: 400; background: #FFFFFF; } .tema-nexo .fc-encaixe input:focus, .tema-nexo .fc-encaixe select:focus { border-color: #4F46E5 !important; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .tema-nexo .fc-encaixe button.bg-slate-800 { height: 44px; background: #4F46E5 !important; border-radius: 12px !important; padding: 0 18px !important; font-size: 14px; font-weight: 700; } .tema-nexo .fc-encaixe button.bg-slate-800:hover { background: #4338CA !important; } .tema-nexo .fc-encaixe #pa-mais { color: #4F46E5; } @media (max-width: 760px) { .tema-nexo .fc-pagina { padding: 24px 0 0; } .tema-nexo .fc-regras { grid-template-columns: 1fr; } .tema-nexo .fc-doc__nome { max-width: 100%; } } /* ════════════════════════════════════════════════════════════════════════ TRABALHISTA — o trabalhista-component.js, que e feito de Tailwind ════════════════════════════════════════════════════════════════════════ */ #view-trabalhista.tema-nexo { font-family: inherit; color: #111827; } #view-trabalhista.tema-nexo > div { min-height: 0; background: transparent; flex-direction: column; font-family: inherit; } /* a barra lateral escura vira a fileira de abas */ #view-trabalhista.tema-nexo aside { width: 100%; background: transparent; color: #4B5563; padding: 0; box-shadow: none; z-index: auto; } #view-trabalhista.tema-nexo aside > div:first-child, #view-trabalhista.tema-nexo aside > div.mt-auto { display: none; } #view-trabalhista.tema-nexo aside nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #E5E7EB; } #view-trabalhista.tema-nexo aside nav > * { margin-top: 0 !important; margin-bottom: 0 !important; } #view-trabalhista.tema-nexo aside nav button, #view-trabalhista.tema-nexo aside nav button.rounded-lg { width: auto; flex: 0 0 auto; padding: 12px 16px; border-radius: 0; background: transparent; color: #4B5563; box-shadow: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } #view-trabalhista.tema-nexo aside nav button:hover { background: transparent; color: #111827; } #view-trabalhista.tema-nexo aside nav button span { color: inherit; } #view-trabalhista.tema-nexo aside nav button span.font-medium { font-size: 14px; font-weight: 500; } #view-trabalhista.tema-nexo aside nav button > div > span:first-child, #view-trabalhista.tema-nexo aside nav button > span.opacity-75 { display: none; } #view-trabalhista.tema-nexo aside nav button.bg-blue-600, #view-trabalhista.tema-nexo aside nav button.bg-blue-600:hover { background: transparent; color: #4F46E5; border-bottom-color: #4F46E5; box-shadow: none; } #view-trabalhista.tema-nexo aside nav button.bg-blue-600 span.font-medium { font-weight: 600; } /* o conteudo */ #view-trabalhista.tema-nexo main { padding: 24px 0 0; background: transparent; overflow: visible; } #view-trabalhista.tema-nexo main > header { background: #FFFFFF; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); padding: 24px; margin-bottom: 24px; gap: 16px; align-items: center; } #view-trabalhista.tema-nexo main > header h2, #view-trabalhista.tema-nexo main > header h2.text-3xl { font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0; color: #111827; } #view-trabalhista.tema-nexo main > header p { font-size: 13px; font-weight: 400; color: #6B7280; margin-top: 4px; } #view-trabalhista.tema-nexo main > header .flex { gap: 8px; } #view-trabalhista.tema-nexo .max-w-5xl { max-width: none; } #view-trabalhista.tema-nexo .space-y-8 > :not([hidden]) ~ :not([hidden]), #view-trabalhista.tema-nexo .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 24px; } #view-trabalhista.tema-nexo .mb-6 { margin-bottom: 24px; } /* cartoes e caixas */ #view-trabalhista.tema-nexo section.bg-white, #view-trabalhista.tema-nexo .space-y-6 > div.bg-white:not(.overflow-hidden), #view-trabalhista.tema-nexo .space-y-8 > div.bg-white:not(.overflow-hidden) { border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); padding: 24px; } #view-trabalhista.tema-nexo .rounded-xl { border-radius: 16px; } #view-trabalhista.tema-nexo section .rounded-xl, #view-trabalhista.tema-nexo section .rounded-lg, #view-trabalhista.tema-nexo .rounded-lg { border-radius: 12px; } #view-trabalhista.tema-nexo .shadow-sm, #view-trabalhista.tema-nexo .shadow-lg, #view-trabalhista.tema-nexo .shadow-xl { box-shadow: 0 6px 18px rgba(15,23,42,0.08); } #view-trabalhista.tema-nexo section .shadow-sm { box-shadow: none; } #view-trabalhista.tema-nexo .border-slate-200, #view-trabalhista.tema-nexo .border-slate-100 { border-color: #E5E7EB; } /* titulos de cartao sem a barrinha azul nem a linha embaixo */ #view-trabalhista.tema-nexo h2.text-lg { font-size: 16px; font-weight: 700; color: #111827; border-bottom: 0; padding-bottom: 0; margin-bottom: 16px; } #view-trabalhista.tema-nexo h2.text-lg > div.w-1 { display: none; } #view-trabalhista.tema-nexo h3 { letter-spacing: 0; } #view-trabalhista.tema-nexo .text-lg { font-size: 16px; } #view-trabalhista.tema-nexo .text-xl { font-size: 16px; } #view-trabalhista.tema-nexo .text-2xl, #view-trabalhista.tema-nexo .text-3xl { font-size: 24px; line-height: 1.25; } #view-trabalhista.tema-nexo .font-black { font-weight: 700; } #view-trabalhista.tema-nexo .text-sm { font-size: 14px; } #view-trabalhista.tema-nexo .text-xs, #view-trabalhista.tema-nexo .text-\[10px\], #view-trabalhista.tema-nexo .text-\[11px\] { font-size: 12px; } #view-trabalhista.tema-nexo .uppercase:not(.prose *), #view-trabalhista.tema-nexo .tracking-wider:not(.prose *), #view-trabalhista.tema-nexo .tracking-widest:not(.prose *) { text-transform: none; letter-spacing: 0; } #view-trabalhista.tema-nexo .font-mono { font-family: inherit; font-variant-numeric: tabular-nums; } /* rotulos e campos */ #view-trabalhista.tema-nexo label.text-sm { font-size: 13px; font-weight: 600; color: #374151; } #view-trabalhista.tema-nexo input:not([type=checkbox]):not([type=radio]):not([type=range]), #view-trabalhista.tema-nexo select { height: 44px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 12px; background-color: #FFFFFF; font-size: 14px; color: #111827; } #view-trabalhista.tema-nexo textarea { border: 1px solid #D1D5DB; border-radius: 12px; font-size: 14px; } #view-trabalhista.tema-nexo input:focus, #view-trabalhista.tema-nexo select:focus, #view-trabalhista.tema-nexo textarea:focus { outline: 0; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); --tw-ring-color: transparent; } #view-trabalhista.tema-nexo input[type=checkbox], #view-trabalhista.tema-nexo input[type=radio] { accent-color: #4F46E5; width: 18px; height: 18px; } #view-trabalhista.tema-nexo input[type=range] { accent-color: #4F46E5; } /* botoes */ #view-trabalhista.tema-nexo main button:not(aside button) { min-height: 44px; border-radius: 12px; font-size: 14px; } #view-trabalhista.tema-nexo button.bg-blue-600, #view-trabalhista.tema-nexo button.bg-green-600 { background: #4F46E5; color: #FFFFFF; font-weight: 700; box-shadow: none; padding-left: 18px; padding-right: 18px; } #view-trabalhista.tema-nexo button.bg-blue-600:hover, #view-trabalhista.tema-nexo button.bg-green-600:hover { background: #4338CA; } #view-trabalhista.tema-nexo main > header button.bg-white { border-color: #D1D5DB; color: #374151; font-weight: 600; box-shadow: none; padding-left: 18px; padding-right: 18px; } /* cores da marca no lugar do azul e do grafite */ #view-trabalhista.tema-nexo .bg-blue-600 { background-color: #4F46E5; } #view-trabalhista.tema-nexo .text-blue-600, #view-trabalhista.tema-nexo .text-blue-500 { color: #4F46E5; } #view-trabalhista.tema-nexo .text-blue-700, #view-trabalhista.tema-nexo .text-blue-800 { color: #3730A3; } #view-trabalhista.tema-nexo .bg-blue-50 { background-color: #EEF2FF; } #view-trabalhista.tema-nexo .border-blue-100, #view-trabalhista.tema-nexo .border-blue-200 { border-color: #C7D2FE; } #view-trabalhista.tema-nexo main .bg-slate-900 { background-color: #312E81; } #view-trabalhista.tema-nexo main .bg-slate-900 .text-emerald-400 { color: #C7D2FE; } #view-trabalhista.tema-nexo .text-slate-800 { color: #111827; } #view-trabalhista.tema-nexo .text-slate-600 { color: #4B5563; } #view-trabalhista.tema-nexo .text-slate-500 { color: #6B7280; } /* tabelas */ #view-trabalhista.tema-nexo table { font-size: 14px; font-variant-numeric: tabular-nums; } #view-trabalhista.tema-nexo thead th { background: #F9FAFB; color: #4B5563; font-size: 12px; font-weight: 600; padding: 12px 16px; text-transform: none; letter-spacing: 0; } #view-trabalhista.tema-nexo tbody td { padding: 12px 16px; } /* a fileira de indicadores da liquidacao: cartoes brancos, como no previdenciario */ #view-trabalhista.tema-nexo .space-y-6 > .grid.gap-4.mb-6 { gap: 24px; } #view-trabalhista.tema-nexo .space-y-6 > .grid.gap-4.mb-6 > div { background: #FFFFFF; border: 0; border-radius: 16px; box-shadow: 0 6px 18px rgba(15,23,42,0.08); padding: 24px; } #view-trabalhista.tema-nexo .space-y-6 > .grid.gap-4.mb-6 > div > :first-child { font-size: 13px; font-weight: 500; color: #6B7280; } #view-trabalhista.tema-nexo .space-y-6 > .grid.gap-4.mb-6 > div > :last-child { font-size: 24px; font-weight: 700; color: #111827; margin-top: 8px; line-height: 1.25; } #view-trabalhista.tema-nexo main .bg-slate-900 .bg-slate-800 { background: rgba(255,255,255,0.12); color: #C7D2FE; } #view-trabalhista.tema-nexo main .bg-slate-900 > div:first-child > :first-child { font-size: 13px; font-weight: 500; color: #C7D2FE; } /* o cartao da tabela de verbas: cabecalho branco e celulas das pontas com 24 */ #view-trabalhista.tema-nexo .overflow-hidden > div.bg-slate-50:first-child { background: #FFFFFF; padding: 24px 24px 16px; border-bottom: 0; } #view-trabalhista.tema-nexo .overflow-hidden > div.bg-slate-50:first-child h3, #view-trabalhista.tema-nexo .overflow-hidden > div.bg-slate-50:first-child .font-bold.text-slate-700 { font-size: 16px; color: #111827; } #view-trabalhista.tema-nexo thead th:first-child, #view-trabalhista.tema-nexo tbody td:first-child { padding-left: 24px; } #view-trabalhista.tema-nexo thead th:last-child, #view-trabalhista.tema-nexo tbody td:last-child { padding-right: 24px; } /* ════════════════════════════════════════════════════════════════════════ OS ELEMENTOS NOVOS (08/10/2026): salarios abaixo do periodo, observacoes, marcas Novo/Alterado, "Como funciona?", legenda dos indicadores, o melhor beneficio, a RMI do beneficio e as fontes do piso e do teto ════════════════════════════════════════════════════════════════════════ */ .tema-nexo .fc-tabela tr.fc-aberto > td { background: #EEF2FF !important; } .tema-nexo .fc-tabela tr.fc-sal-linha > td { background: #F9FAFB !important; border-bottom: 1px solid #E5E7EB; } .tema-nexo .fc-sal-area { padding: 16px 24px 24px 64px; gap: 16px; } .tema-nexo .fc-sal-area__tit { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #4338CA; } .tema-nexo .fc-sal-area__info { font-size: 13px; color: #6B7280; } .tema-nexo .fc-sal-grade { gap: 8px; } .tema-nexo .fc-sal { border: 1px solid #E5E7EB; border-radius: 12px; padding: 8px 12px; font-size: 13px; } .tema-nexo .fc-obs { font-size: 13px; font-weight: 600; color: #374151; gap: 8px; } .tema-nexo .fc-obs textarea { border: 1px solid #D1D5DB; border-radius: 12px; padding: 10px 14px; font-size: 14px; min-height: 72px; } .tema-nexo .fc-obs textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,0.15); } .tema-nexo .fc-chip--novo { background: #EEF2FF; color: #4338CA; } .tema-nexo .fc-chip--alterado { background: #FFFBEB; color: #92400E; } .tema-nexo .fc-tabela tr.fc-marcada > td:first-child { box-shadow: inset 3px 0 0 #4F46E5; } .tema-nexo .fc-tabela tr.fc-marcada--alterada > td:first-child { box-shadow: inset 3px 0 0 #F59E0B; } .tema-nexo .fc-como { border: 1px solid #E5E7EB; border-radius: 12px; background: #FFFFFF; margin-bottom: 24px; } .tema-nexo .fc-cartao .fc-como { margin: 0 0 16px; } .tema-nexo .fc-como > summary { padding: 12px 16px; font-size: 14px; font-weight: 600; color: #4F46E5; } .tema-nexo .fc-como ol { padding: 0 16px 16px 36px; font-size: 13px; color: #374151; } .tema-nexo .fc-legenda { gap: 12px; } .tema-nexo .fc-legenda__item { border: 1px solid #E5E7EB; border-radius: 12px; padding: 12px 16px; font-size: 14px; } .tema-nexo .fc-legenda__desc { margin-top: 8px; color: #374151; } .tema-nexo .fc-legenda details { font-size: 13px; margin-top: 8px; } .tema-nexo .fc-legenda summary { color: #4F46E5; } .tema-nexo .fc-fonte { font-size: 12px; color: #6B7280; } .tema-nexo .fc-fonte a, .tema-nexo .fc-link { color: #4F46E5; } /* o melhor beneficio: o cartao mais visivel da tela */ .tema-nexo .fc-melhor { border: 0; border-radius: 16px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(15,23,42,0.08); outline: 2px solid #047857; outline-offset: -2px; margin-bottom: 24px; } .tema-nexo .fc-melhor__selo { background: #047857; font-size: 12px; letter-spacing: .08em; padding: 10px 24px; } .tema-nexo .fc-melhor__selo .fa-star { color: #FCD34D; } .tema-nexo .fc-melhor__corpo { padding: 24px; gap: 16px 32px; } .tema-nexo .fc-melhor__nome { font-size: 20px; font-weight: 700; color: #111827; } .tema-nexo .fc-melhor__base { font-size: 13px; font-weight: 600; color: #4338CA; margin-top: 4px; } .tema-nexo .fc-melhor__formula { font-size: 13px; color: #6B7280; margin-top: 8px; } .tema-nexo .fc-melhor__valor span { font-size: 13px; color: #6B7280; } .tema-nexo .fc-melhor__valor strong { font-size: 36px; font-weight: 800; color: #047857; } .tema-nexo .fc-melhor__acoes { padding: 0 24px 24px; gap: 8px; } .tema-nexo .fc-melhor .fc-btn--cheio { background: #047857; border-color: #047857; } .tema-nexo .fc-melhor .fc-btn--cheio:hover { background: #065F46; border-color: #065F46; } .tema-nexo .fc-rmi-total { border: 0; border-radius: 16px; background: #FFFFFF; box-shadow: 0 6px 18px rgba(15,23,42,0.08); outline: 2px solid #4F46E5; outline-offset: -2px; padding: 24px; margin-bottom: 24px; } .tema-nexo .fc-rmi-total__rot { font-size: 12px; color: #4338CA; } .tema-nexo .fc-rmi-total__valor { font-size: 36px; font-weight: 800; color: #111827; margin-top: 8px; } .tema-nexo .fc-rmi-total__regra { font-size: 13px; color: #6B7280; margin-top: 8px; } .tema-nexo .fc-tabela tr.fc-melhor-linha td { background: #ECFDF5 !important; } @media (max-width: 760px) { .tema-nexo .fc-sal-area { padding: 16px; } .tema-nexo .fc-melhor__valor strong, .tema-nexo .fc-rmi-total__valor { font-size: 28px; } } /* o painel de atrasados: o tooltip das siglas nao pode ser cortado */ .tema-nexo .fc-encaixe > div { overflow: visible !important; } /* dentro da area dos salarios o botao pode quebrar linha (no celular ela e estreita) */ .tema-nexo .fc-sal-area .fc-btn { white-space: normal; height: auto; min-height: 44px; text-align: left; }