/* * Componentes próprios do BigAdv Petições. * * Assim como o CSS da marca, é escrito à mão: o pacote do Filament 5 distribui * apenas as classes `fi-*` dos seus componentes, então utilitárias do Tailwind * usadas nas nossas views não teriam efeito nenhum — os blocos apareciam como * texto corrido. * * Tema escuro pela classe `dark` no . */ /* ============================================================ ATALHOS Cards de ação do painel inicial. O primeiro é o CTA principal (Nova peça) e recebe tratamento visual mais forte que os demais. ------------------------------------------------------------------ */ .bigadv-actions { display: grid; grid-template-columns: 1fr; gap: 0.875rem; } @media (min-width: 640px) { .bigadv-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .bigadv-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bigadv-action { position: relative; display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; border-radius: 0.75rem; border: 1px solid rgb(228 231 237); background-color: #fff; text-decoration: none; box-shadow: 0 1px 2px rgb(15 23 42 / 0.04); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease; } .bigadv-action:hover { border-color: rgb(203 209 219); box-shadow: 0 6px 18px -6px rgb(15 23 42 / 0.18); transform: translateY(-1px); } .bigadv-action:focus-visible { outline: 2px solid #202860; outline-offset: 2px; } .dark .bigadv-action { border-color: rgb(255 255 255 / 0.1); background-color: rgb(255 255 255 / 0.04); box-shadow: none; } .dark .bigadv-action:hover { border-color: rgb(255 255 255 / 0.22); background-color: rgb(255 255 255 / 0.07); } /* CTA principal: fundo da cor da marca, para não competir com os demais. */ .bigadv-action--primary { border-color: #202860; background-color: #202860; box-shadow: 0 8px 20px -8px rgb(32 40 96 / 0.55); } .bigadv-action--primary:hover { border-color: #2b3578; background-color: #2b3578; box-shadow: 0 12px 26px -8px rgb(32 40 96 / 0.6); } .dark .bigadv-action--primary { border-color: #3a4790; background-color: #2b3578; } .dark .bigadv-action--primary:hover { background-color: #354199; } .bigadv-action__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background-color: rgb(241 243 247); color: rgb(71 85 105); } .bigadv-action__icon svg { width: 1.25rem; height: 1.25rem; } .dark .bigadv-action__icon { background-color: rgb(255 255 255 / 0.08); color: rgb(203 213 225); } .bigadv-action--primary .bigadv-action__icon { background-color: rgb(255 255 255 / 0.16); color: #fff; } .bigadv-action__body { min-width: 0; } .bigadv-action__title { display: block; font-size: 0.875rem; font-weight: 600; color: rgb(17 24 39); line-height: 1.3; } .dark .bigadv-action__title { color: #fff; } .bigadv-action--primary .bigadv-action__title { color: #fff; } .bigadv-action__description { display: block; margin-top: 0.1875rem; font-size: 0.75rem; color: rgb(100 116 139); line-height: 1.35; } .dark .bigadv-action__description { color: rgb(148 163 184); } .bigadv-action--primary .bigadv-action__description { color: rgb(255 255 255 / 0.72); } .bigadv-action__arrow { margin-left: auto; flex-shrink: 0; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; color: rgb(148 163 184); } .bigadv-action__arrow svg { width: 1rem; height: 1rem; } .bigadv-action:hover .bigadv-action__arrow { opacity: 1; transform: translateX(0); } .bigadv-action--primary .bigadv-action__arrow { color: rgb(255 255 255 / 0.85); } /* ====================================================== LISTAS DE PAINEL Usadas em "Modelos mais utilizados" e "Atividade recente". ------------------------------------------------------------------ */ .bigadv-list { display: flex; flex-direction: column; } .bigadv-list__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid rgb(241 243 247); } .bigadv-list__item:first-child { border-top: 0; padding-top: 0; } .bigadv-list__item:last-child { padding-bottom: 0; } .dark .bigadv-list__item { border-color: rgb(255 255 255 / 0.08); } .bigadv-list__main { min-width: 0; } .bigadv-list__title { display: block; font-size: 0.8125rem; font-weight: 500; color: rgb(17 24 39); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bigadv-list__title:hover { color: #202860; } .dark .bigadv-list__title { color: rgb(243 244 246); } .dark .bigadv-list__title:hover { color: #8fb4ff; } .bigadv-list__meta { display: block; margin-top: 0.125rem; font-size: 0.6875rem; color: rgb(100 116 139); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dark .bigadv-list__meta { color: rgb(148 163 184); } .bigadv-empty { font-size: 0.8125rem; color: rgb(100 116 139); } .dark .bigadv-empty { color: rgb(148 163 184); } /* ------------------------------------------------- linha do tempo */ .bigadv-timeline { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding-inline-start: 1rem; border-inline-start: 1px solid rgb(228 231 237); } .dark .bigadv-timeline { border-color: rgb(255 255 255 / 0.12); } .bigadv-timeline__item { position: relative; } .bigadv-timeline__item::before { content: ''; position: absolute; inset-inline-start: -1.3125rem; top: 0.375rem; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: #202860; } .dark .bigadv-timeline__item::before { background-color: #6d80d6; } .bigadv-timeline__text { font-size: 0.8125rem; color: rgb(17 24 39); } .dark .bigadv-timeline__text { color: rgb(243 244 246); } .bigadv-timeline__meta { font-size: 0.6875rem; color: rgb(100 116 139); } .dark .bigadv-timeline__meta { color: rgb(148 163 184); } /* ============================================== MÉTRICAS DE IA (painel) ------------------------------------------------------------------ */ .bigadv-ai__provider { margin-bottom: 1rem; padding: 0.75rem; border-radius: 0.5rem; background-color: rgb(246 247 250); } .dark .bigadv-ai__provider { background-color: rgb(255 255 255 / 0.05); } .bigadv-ai__label { font-size: 0.6875rem; color: rgb(100 116 139); } .dark .bigadv-ai__label { color: rgb(148 163 184); } .bigadv-ai__value { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 600; color: rgb(17 24 39); } .dark .bigadv-ai__value { color: #fff; } .bigadv-ai__model { margin-top: 0.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.6875rem; color: rgb(100 116 139); } .bigadv-ai__note { margin-top: 0.375rem; font-size: 0.6875rem; color: rgb(100 116 139); } .dark .bigadv-ai__note { color: rgb(148 163 184); } .bigadv-ai__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .bigadv-ai__stat-label { font-size: 0.6875rem; color: rgb(100 116 139); } .dark .bigadv-ai__stat-label { color: rgb(148 163 184); } .bigadv-ai__stat-value { font-size: 1.125rem; font-weight: 600; color: rgb(17 24 39); } .dark .bigadv-ai__stat-value { color: #fff; } .bigadv-ai__stat-value--danger { color: rgb(190 24 60); } .dark .bigadv-ai__stat-value--danger { color: rgb(253 164 175); } /* ==================================================== AVISOS / CALLOUTS ------------------------------------------------------------------ */ .bigadv-callout { padding: 0.875rem 1rem; border-radius: 0.625rem; border: 1px solid; font-size: 0.8125rem; } .bigadv-callout__title { font-weight: 600; } .bigadv-callout__body { margin-top: 0.25rem; } .bigadv-callout a { text-decoration: underline; } .bigadv-callout--warning { border-color: rgb(253 230 138); background-color: rgb(255 251 235); color: rgb(120 53 15); } .dark .bigadv-callout--warning { border-color: rgb(245 158 11 / 0.35); background-color: rgb(245 158 11 / 0.12); color: rgb(253 230 138); } .bigadv-callout--success { border-color: rgb(167 243 208); background-color: rgb(236 253 245); color: rgb(6 78 59); } .dark .bigadv-callout--success { border-color: rgb(16 185 129 / 0.35); background-color: rgb(16 185 129 / 0.12); color: rgb(167 243 208); } /* ================================================== CONVITE DE ACESSO Modal com os textos prontos para copiar (e-mail e WhatsApp). ------------------------------------------------------------------ */ .bigadv-invite { display: flex; flex-direction: column; gap: 1.25rem; } .bigadv-invite__summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 0.875rem 1rem; border-radius: 0.625rem; background-color: rgb(246 247 250); } .dark .bigadv-invite__summary { background-color: rgb(255 255 255 / 0.05); } .bigadv-invite__summary dt { font-size: 0.6875rem; color: rgb(100 116 139); } .dark .bigadv-invite__summary dt { color: rgb(148 163 184); } .bigadv-invite__summary dd { margin-top: 0.125rem; font-size: 0.8125rem; font-weight: 600; color: rgb(17 24 39); overflow-wrap: anywhere; } .dark .bigadv-invite__summary dd { color: #fff; } .bigadv-invite__block { display: flex; flex-direction: column; gap: 0.5rem; } .bigadv-invite__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .bigadv-invite__head h4 { font-size: 0.8125rem; font-weight: 600; color: rgb(17 24 39); } .dark .bigadv-invite__head h4 { color: #fff; } .bigadv-invite__buttons { display: flex; gap: 0.5rem; } .bigadv-invite__btn { display: inline-flex; align-items: center; padding: 0.3125rem 0.75rem; border-radius: 0.5rem; border: 1px solid #202860; background-color: #202860; color: #fff; font-size: 0.75rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .bigadv-invite__btn:hover { background-color: #2b3578; border-color: #2b3578; } .bigadv-invite__btn--ghost { background-color: transparent; border-color: rgb(203 209 219); color: rgb(51 65 85); } .bigadv-invite__btn--ghost:hover { background-color: rgb(246 247 250); border-color: rgb(148 163 184); } .dark .bigadv-invite__btn--ghost { border-color: rgb(255 255 255 / 0.2); color: rgb(226 232 240); } .dark .bigadv-invite__btn--ghost:hover { background-color: rgb(255 255 255 / 0.08); } .bigadv-invite__subject { font-size: 0.75rem; color: rgb(71 85 105); } .dark .bigadv-invite__subject { color: rgb(203 213 225); } .bigadv-invite__text { width: 100%; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid rgb(228 231 237); background-color: rgb(250 251 252); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; line-height: 1.55; color: rgb(30 41 59); resize: vertical; } .bigadv-invite__text--single { resize: none; } .dark .bigadv-invite__text { border-color: rgb(255 255 255 / 0.12); background-color: rgb(255 255 255 / 0.04); color: rgb(226 232 240); } .bigadv-invite__note { font-size: 0.75rem; color: rgb(100 116 139); line-height: 1.5; } .dark .bigadv-invite__note { color: rgb(148 163 184); } @media (max-width: 640px) { .bigadv-invite__summary { grid-template-columns: 1fr; } } /* ============================================ PENDÊNCIAS DE CONFIGURAÇÃO Alertas no topo do painel. Ficam visíveis o suficiente para serem resolvidos, e somem quando não há mais nada pendente. ------------------------------------------------------------------ */ .bigadv-alerts { display: flex; flex-direction: column; gap: 0.75rem; } .bigadv-alert { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.125rem; border-radius: 0.75rem; border: 1px solid; border-inline-start-width: 4px; } .bigadv-alert__icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; } .bigadv-alert__icon svg { width: 1.25rem; height: 1.25rem; } .bigadv-alert__body { flex: 1; min-width: 0; } .bigadv-alert__title { font-size: 0.875rem; font-weight: 600; line-height: 1.35; } .bigadv-alert__text { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; } .bigadv-alert__action { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; align-self: center; padding: 0.5rem 0.875rem; border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, transform .15s ease; } .bigadv-alert__action svg { width: 0.875rem; height: 0.875rem; } .bigadv-alert__action:hover { transform: translateX(1px); } /* --- atenção --- */ .bigadv-alert--warning { border-color: rgb(252 211 77); border-inline-start-color: rgb(245 158 11); background-color: rgb(255 251 235); } .bigadv-alert--warning .bigadv-alert__icon { background-color: rgb(254 243 199); color: rgb(180 83 9); } .bigadv-alert--warning .bigadv-alert__title { color: rgb(120 53 15); } .bigadv-alert--warning .bigadv-alert__text { color: rgb(146 64 14); } .bigadv-alert--warning .bigadv-alert__action { background-color: rgb(217 119 6); color: #fff; } .bigadv-alert--warning .bigadv-alert__action:hover { background-color: rgb(180 83 9); } .dark .bigadv-alert--warning { border-color: rgb(245 158 11 / 0.35); border-inline-start-color: rgb(245 158 11); background-color: rgb(245 158 11 / 0.1); } .dark .bigadv-alert--warning .bigadv-alert__icon { background-color: rgb(245 158 11 / 0.2); color: rgb(252 211 77); } .dark .bigadv-alert--warning .bigadv-alert__title { color: rgb(253 230 138); } .dark .bigadv-alert--warning .bigadv-alert__text { color: rgb(252 211 77); } /* --- crítico --- */ .bigadv-alert--danger { border-color: rgb(252 165 165); border-inline-start-color: rgb(220 38 38); background-color: rgb(254 242 242); } .bigadv-alert--danger .bigadv-alert__icon { background-color: rgb(254 226 226); color: rgb(185 28 28); } .bigadv-alert--danger .bigadv-alert__title { color: rgb(127 29 29); } .bigadv-alert--danger .bigadv-alert__text { color: rgb(153 27 27); } .bigadv-alert--danger .bigadv-alert__action { background-color: rgb(220 38 38); color: #fff; } .bigadv-alert--danger .bigadv-alert__action:hover { background-color: rgb(185 28 28); } .dark .bigadv-alert--danger { border-color: rgb(248 113 113 / 0.35); border-inline-start-color: rgb(248 113 113); background-color: rgb(248 113 113 / 0.1); } .dark .bigadv-alert--danger .bigadv-alert__icon { background-color: rgb(248 113 113 / 0.2); color: rgb(254 202 202); } .dark .bigadv-alert--danger .bigadv-alert__title { color: rgb(254 202 202); } .dark .bigadv-alert--danger .bigadv-alert__text { color: rgb(252 165 165); } @media (max-width: 768px) { .bigadv-alert { flex-wrap: wrap; } .bigadv-alert__action { width: 100%; justify-content: center; } } /* ==================================================== SELECTS LEGÍVEIS `wrapOptionLabels(false)` impede o texto de quebrar letra a letra, mas sozinho ele apenas corta a frase. Aqui as opções longas continuam legíveis: o texto completo aparece no title (nativo do navegador) e a lista suspensa não é truncada — só o valor fechado é. ------------------------------------------------------------------ */ /* Espaço mínimo para o rótulo respirar antes de reticenciar. */ .fi-select-input-ctn .fi-select-input-value-ctn { min-width: 0; } /* Na lista aberta o rótulo aparece inteiro, quebrando linha se precisar: ali há largura sobrando e ler a opção é o que importa. */ .fi-select-input-ctn-option-labels-not-wrapped .fi-select-input-option > span { text-overflow: clip; white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.35; } .fi-select-input-ctn-option-labels-not-wrapped .fi-select-input-option { align-items: flex-start; padding-block: 0.4375rem; } /* Rótulo longo em campo estreito: mostra o texto completo ao passar o mouse. */ .fi-select-input-value-ctn > span[title] { cursor: default; } /* =========================================== ESPAÇAMENTO DE RODAPÉ DE FORM Botões de gravação colavam no container acima quando a página monta o próprio formulário (editor da peça, assistente). ------------------------------------------------------------------ */ .bigadv-form-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgb(228 231 237); } .dark .bigadv-form-footer { border-color: rgb(255 255 255 / 0.1); } .bigadv-form-footer__hint { font-size: 0.75rem; color: rgb(100 116 139); line-height: 1.4; } .dark .bigadv-form-footer__hint { color: rgb(148 163 184); } @media (max-width: 640px) { .bigadv-form-footer__hint { flex-basis: 100%; } } /* ------------------------------------- apontamentos da checagem de IA */ .bigadv-issues { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.625rem 0; } .bigadv-issue { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; line-height: 1.45; } .bigadv-issue__level { flex-shrink: 0; margin-top: 0.0625rem; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .bigadv-issue__level--critico { background-color: rgb(254 202 202); color: rgb(127 29 29); } .bigadv-issue__level--atencao { background-color: rgb(253 230 138); color: rgb(120 53 15); } .bigadv-issue__level--sugestao { background-color: rgb(186 230 253); color: rgb(12 74 110); } .bigadv-issue__level--nota { background-color: rgb(226 232 240); color: rgb(51 65 85); } .dark .bigadv-issue__level--critico { background-color: rgb(190 24 60 / 0.35); color: rgb(254 202 202); } .dark .bigadv-issue__level--atencao { background-color: rgb(180 83 9 / 0.35); color: rgb(253 230 138); } .dark .bigadv-issue__level--sugestao { background-color: rgb(3 105 161 / 0.35); color: rgb(186 230 253); } .dark .bigadv-issue__level--nota { background-color: rgb(255 255 255 / 0.12); color: rgb(226 232 240); } /* ================================================= CADASTRO E TERMOS ------------------------------------------------------------------ */ .bigadv-register__badge { display: inline-block; margin-inline-start: 0.25rem; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; background-color: rgb(58 166 191 / 0.15); color: #2b7f96; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .dark .bigadv-register__badge { background-color: rgb(95 200 216 / 0.18); color: #7fd8e6; } .bigadv-terms { display: flex; flex-direction: column; gap: 0.625rem; } .bigadv-terms__summary { padding: 0.625rem 0.875rem; border-radius: 0.5rem; border: 1px solid rgb(252 211 77); background-color: rgb(255 251 235); font-size: 0.8125rem; font-weight: 600; color: rgb(120 53 15); } .dark .bigadv-terms__summary { border-color: rgb(245 158 11 / 0.35); background-color: rgb(245 158 11 / 0.1); color: rgb(253 230 138); } .bigadv-terms__scroll { max-height: 15rem; overflow-y: auto; padding: 0.875rem 1rem; border-radius: 0.5rem; border: 1px solid rgb(228 231 237); background-color: rgb(250 251 252); } .dark .bigadv-terms__scroll { border-color: rgb(255 255 255 / 0.12); background-color: rgb(255 255 255 / 0.04); } .bigadv-terms__section + .bigadv-terms__section { margin-top: 0.875rem; } .bigadv-terms__section h4 { font-size: 0.8125rem; font-weight: 600; color: rgb(17 24 39); } .dark .bigadv-terms__section h4 { color: #fff; } .bigadv-terms__section p { margin-top: 0.1875rem; font-size: 0.8125rem; line-height: 1.5; color: rgb(71 85 105); } .dark .bigadv-terms__section p { color: rgb(203 213 225); } .bigadv-terms__version { font-size: 0.6875rem; color: rgb(148 163 184); } /* --------------------------------- chamada de cadastro na tela de login */ .bigadv-login-cta { margin-top: 1.5rem; } .bigadv-login-cta__divider { display: block; position: relative; text-align: center; margin-bottom: 1rem; } .bigadv-login-cta__divider::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1px; background-color: rgb(228 231 237); } .dark .bigadv-login-cta__divider::before { background-color: rgb(255 255 255 / 0.12); } .bigadv-login-cta__divider > span { position: relative; padding-inline: 0.75rem; background-color: #fff; font-size: 0.75rem; color: rgb(100 116 139); } .dark .bigadv-login-cta__divider > span { background-color: rgb(24 24 27); color: rgb(148 163 184); } .bigadv-login-cta__btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.6875rem 1rem; border-radius: 0.625rem; border: 1px solid #202860; background-color: #fff; color: #202860; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; } .bigadv-login-cta__btn svg { width: 1.125rem; height: 1.125rem; } .bigadv-login-cta__btn:hover { background-color: #202860; color: #fff; box-shadow: 0 8px 20px -8px rgb(32 40 96 / 0.5); } .dark .bigadv-login-cta__btn { border-color: #6d80d6; background-color: transparent; color: #a5b4fc; } .dark .bigadv-login-cta__btn:hover { background-color: #2b3578; color: #fff; } .bigadv-login-cta__note { margin-top: 0.625rem; text-align: center; font-size: 0.75rem; line-height: 1.4; color: rgb(100 116 139); } .dark .bigadv-login-cta__note { color: rgb(148 163 184); } /* ============================================ MENUS SUSPENSOS LEGÍVEIS O Filament limita o painel a 14rem (com !important) e aplica `truncate` ao rótulo. Em português os rótulos são mais longos que em inglês, e itens como "Revisar português e clareza" ou "Checar coerência da peça" saíam cortados no meio da palavra. ------------------------------------------------------------------ */ .fi-dropdown-panel { /* Largura suficiente para os rótulos do sistema, sem estourar em tela estreita. Precisa de !important para vencer a regra do pacote. */ max-width: min(20rem, calc(100vw - 2rem)) !important; } /* Rótulo longo quebra linha em vez de ser cortado: num menu, ler o item inteiro é mais importante do que manter tudo em uma única linha. */ .fi-dropdown-list-item-label { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; line-height: 1.35; } /* Com o rótulo em duas linhas, o ícone precisa alinhar pelo topo. */ .fi-dropdown-list-item { align-items: flex-start; } .fi-dropdown-list-item > .fi-icon, .fi-dropdown-list-item .fi-dropdown-list-item-icon { margin-top: 0.0625rem; flex-shrink: 0; } /* ==================================================== LOGIN SOCIAL ------------------------------------------------------------------ */ .bigadv-social { display: flex; flex-direction: column; } .bigadv-social__buttons { display: grid; grid-template-columns: 1fr; gap: 0.625rem; } @media (min-width: 640px) { .bigadv-social__buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bigadv-social__btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.625rem 1rem; border-radius: 0.625rem; border: 1px solid rgb(212 216 224); background-color: #fff; color: rgb(31 41 55); font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .bigadv-social__btn:hover { border-color: rgb(148 163 184); box-shadow: 0 4px 12px -4px rgb(15 23 42 / 0.18); } .dark .bigadv-social__btn { border-color: rgb(255 255 255 / 0.16); background-color: rgb(255 255 255 / 0.05); color: rgb(243 244 246); } .dark .bigadv-social__btn:hover { border-color: rgb(255 255 255 / 0.3); background-color: rgb(255 255 255 / 0.09); } .bigadv-social__icon { display: flex; flex-shrink: 0; } .bigadv-social__icon svg { width: 1.125rem; height: 1.125rem; } .bigadv-social__divider { display: block; position: relative; text-align: center; margin-top: 1.25rem; } .bigadv-social__divider::before { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1px; background-color: rgb(228 231 237); } .dark .bigadv-social__divider::before { background-color: rgb(255 255 255 / 0.12); } .bigadv-social__divider > span { position: relative; padding-inline: 0.75rem; background-color: #fff; font-size: 0.75rem; color: rgb(100 116 139); } .dark .bigadv-social__divider > span { background-color: rgb(24 24 27); color: rgb(148 163 184); } /* --- confirmação de identidade já conectada, no cadastro --- */ .bigadv-social-linked { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1rem; border-radius: 0.625rem; border: 1px solid rgb(167 243 208); background-color: rgb(236 253 245); } .dark .bigadv-social-linked { border-color: rgb(16 185 129 / 0.35); background-color: rgb(16 185 129 / 0.1); } .bigadv-social-linked__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 0.08); } .bigadv-social-linked__icon svg { width: 1.25rem; height: 1.25rem; } .bigadv-social-linked__title { font-size: 0.875rem; font-weight: 600; color: rgb(6 78 59); } .dark .bigadv-social-linked__title { color: rgb(167 243 208); } .bigadv-social-linked__text { margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: rgb(4 120 87); } .dark .bigadv-social-linked__text { color: rgb(110 231 183); }