/* Login, cadastro e redefinir senha no estilo do Guia de design EBCO (substitui login.css).
   A disposição e as animações são as mesmas da versão anterior; mudam cor, fonte, bordas e componentes.
   Toda cor sai de tokens.css; no modo escuro (night-mode) os tokens mudam e tudo acompanha. */

:root {
   --icone-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
   --icone-seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   --ease: cubic-bezier(.22, 1, .36, 1);
}

body.login-v2,
body[data-view="reset"] {
   /* no body, para acompanhar os tokens do modo escuro */
   --anel-cartao: 0 0 0 1px color-mix(in oklch, var(--foreground) 10%, transparent);
   background: var(--background) !important;
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   line-height: var(--leading-sm);
   font-weight: 400;
   color: var(--foreground);
   padding: 0 !important;
   -webkit-font-smoothing: antialiased;
}

/* O mesmo fundo do dashboard, quase invisível: só uma textura atrás do painel */
body.login-v2::before,
body[data-view="reset"]::before {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   background: url(/comunidade/content/themes/default/images/home/dashboard_bg.png) center / cover no-repeat;
   filter: blur(3px) saturate(.4);
   opacity: .12;
   transform: scale(1.04);
   pointer-events: none;
}

body.night-mode.login-v2::before,
body.night-mode[data-view="reset"]::before {
   opacity: .16;
}

/* Ícones Lucide: o style.css antigo pinta todo traço de SVG de branco */
.icone {
   width: 1rem;
   height: 1rem;
   flex: none;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* o CSS antigo pinta traço e recheio de SVG (branco, e no modo escuro também o recheio) */
.icone * {
   fill: none !important;
   stroke: currentColor;
}

.login-stage {
   position: relative;
   min-height: 100vh;
   min-height: 100dvh;
   display: grid;
   place-items: center;
   padding: 4.5rem 24px;
}

/* O painel: cartão do guia (fundo branco, contorno a 10% e sombra em duas camadas) */
.login-panel {
   position: relative;
   display: grid;
   /* coluna da foto limitada pela altura da tela (proporção da foto) e encolhe com a largura */
   grid-template-columns: minmax(0, min(520px, calc((100vh - 176px) * .746))) minmax(300px, 400px);
   gap: clamp(28px, 4vw, 64px);
   align-items: center;
   padding: 16px clamp(28px, 4vw, 56px) 16px 16px;
   border-radius: var(--radius-xl);
   background:
      /* luz que acompanha o mouse dentro do painel (uniebco.js grava --mx e --my e liga .is-luz);
         com o mouse fora, --luz é 0% e o painel fica só na cor do cartão */
      radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), color-mix(in oklch, var(--primary) var(--luz), transparent), transparent 50%),
      var(--card);
   color: var(--card-foreground);
   box-shadow: var(--anel-cartao), var(--sombra-cartao-alta);
}

/* Intensidade da luz do mouse: registrada para poder acender e apagar com transição */
@property --luz {
   syntax: "<percentage>";
   inherits: false;
   initial-value: 0%;
}

.login-panel {
   --luz: 0%;
   transition: --luz .5s var(--ease);
}

.login-panel.is-luz {
   --luz: 10%;
}

/* Foto inteira (proporção original 1024x1373, sem corte) */
.login-photo {
   position: relative;
   margin: 0;
   width: 100%;
   aspect-ratio: 1024 / 1373;
   border-radius: var(--radius-lg);
   overflow: hidden;
}

.login-photo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   display: block;
}

/* O véu: o azul da marca por cima da foto, mais denso no pé (nos dois temas: é identidade, não ação) */
.login-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg,
      color-mix(in oklch, var(--marca-azul) 30%, transparent) 0%,
      color-mix(in oklch, var(--marca-azul) 38%, transparent) 55%,
      color-mix(in oklch, var(--marca-azul) 72%, transparent) 100%);
   opacity: var(--veil-o, 1);
   transition: opacity .9s var(--ease);
}

/* Coluna do formulário */
.login-side {
   display: flex;
   flex-direction: column;
   padding: 24px 0;
}

/* Logo Ebco, Seabox e Techscan, centralizado sobre o formulário.
   O PNG é branco: no claro, o filtro #tinta-marca pinta de azul da marca; no escuro fica branco. */
.login-logo {
   align-self: center;
   width: min(16rem, 80%);
   margin-bottom: clamp(24px, 5vh, 48px);
   line-height: 0;
}

.login-logo img {
   display: block;
   width: 100%;
   height: auto;
   filter: url(#tinta-marca);
}

body.night-mode .login-logo img {
   filter: none;
}

.login-title {
   margin: 0;
   font-family: inherit;
   font-weight: 600;
   font-size: var(--text-xl);
   line-height: var(--leading-xl);
   letter-spacing: -0.025em;
   text-transform: none;
   color: var(--foreground);
}

/* Voltar (cadastro -> login) */
.login-back,
.login-back:visited {
   display: inline-flex;
   align-items: center;
   gap: .375rem;
   align-self: flex-start;
   margin: 0 0 14px -8px;
   padding: .375rem .5rem;
   border-radius: var(--radius-md);
   font-size: var(--text-sm);
   font-weight: 500;
   color: var(--muted-foreground);
   text-decoration: none;
   transition: background-color .15s ease, color .15s ease;
}

.login-back:hover {
   color: var(--foreground);
   background: var(--muted);
   text-decoration: none;
}

.login-title + .login-form {
   margin-top: 24px;
}

.login-sub {
   margin: .25rem 0 1.5rem;
   font-size: var(--text-sm);
   color: var(--muted-foreground);
}

.login-form {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

/* Campo do guia: rótulo em cima, contorno do token --input, foco com o anel da marca.
   O HTML é o mesmo de antes (ícone, campo, rótulo, botão de mostrar); a grade só reordena. */
.field {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   row-gap: .5rem;
   margin: 0;
}

.field__label {
   grid-row: 1;
   grid-column: 1;
   font-size: var(--text-sm);
   line-height: 1.25;
   font-weight: 500;
   color: var(--foreground);
}

/* Obrigatório com asterisco vermelho */
.field:has(.field__input[required]) .field__label::after {
   content: "*";
   margin-left: .125rem;
   color: var(--urgente-forte);
}

.field__input {
   grid-row: 2;
   grid-column: 1;
   width: 100%;
   height: 2.25rem;
   padding: 0 .75rem 0 2.25rem;
   border-radius: var(--radius-md);
   border: 1px solid var(--input);
   background: var(--background);
   color: var(--foreground);
   font: inherit;
   font-size: var(--text-sm);
   box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
   outline: none;
   transition: border-color .2s ease, box-shadow .2s ease;
   -webkit-appearance: none;
   appearance: none;
}

.field-pair .field__input,
.field:not(:has(.field__icon)) .field__input {
   padding-left: .75rem;
}

.field--password .field__input {
   padding-right: 2.5rem;
}

.field__input:focus {
   border-color: var(--ring);
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}

.field__input[aria-invalid="true"] {
   border-color: var(--destructive);
}

.field__input[aria-invalid="true"]:focus {
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
}

/* Preenchimento automático do navegador não pinta o campo de amarelo */
.field__input:-webkit-autofill {
   -webkit-text-fill-color: var(--foreground);
   -webkit-box-shadow: 0 0 0 1000px var(--background) inset;
}

.field__icon {
   grid-row: 2;
   grid-column: 1;
   justify-self: start;
   align-self: center;
   position: relative;
   z-index: 1;
   margin-left: .75rem;
   color: var(--muted-foreground);
   pointer-events: none;
   transition: color .2s ease;
}

.field:focus-within .field__icon {
   color: var(--primary-texto);
}

/* Escuro: todos os ícones brancos (no campo, no botão de mostrar a senha e na seta do seletor) */
body.night-mode :is(.field__icon, .field:focus-within .field__icon, .field__reveal, .login-back .icone) {
   color: var(--foreground);
}

body.night-mode .field--select::after {
   background: var(--foreground);
}

.field__reveal {
   grid-row: 2;
   grid-column: 1;
   justify-self: end;
   align-self: center;
   position: relative;
   z-index: 1;
   display: grid;
   place-items: center;
   width: 1.75rem;
   height: 1.75rem;
   margin-right: .25rem;
   padding: 0;
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--muted-foreground);
   cursor: pointer;
}

.field__reveal:hover {
   color: var(--foreground);
   background: var(--muted);
}

.field__reveal .icone--esconder,
.field__reveal[aria-pressed="true"] .icone--mostrar {
   display: none;
}

.field__reveal[aria-pressed="true"] .icone--esconder {
   display: block;
}

/* Seletor: mesmo campo, com a seta desenhada no lugar da nativa */
.field--select .field__input {
   padding-right: 2.25rem;
   cursor: pointer;
}

.field--select::after {
   content: "";
   grid-row: 2;
   grid-column: 1;
   justify-self: end;
   align-self: center;
   width: 1rem;
   height: 1rem;
   margin-right: .75rem;
   background: var(--muted-foreground);
   -webkit-mask: var(--icone-seta-baixo) center / contain no-repeat;
   mask: var(--icone-seta-baixo) center / contain no-repeat;
   pointer-events: none;
}

/* Obrigatório vazio: a frase embaixo do campo (criada pelo uniebco.js) */
.field__erro {
   grid-row: 3;
   grid-column: 1;
   font-size: var(--text-xs);
   line-height: var(--leading-xs);
   font-weight: 500;
   color: var(--urgente-forte);
}

/* Caps Lock: etiqueta de atenção (fundo suave, texto forte) */
.field__hint {
   display: inline-flex;
   align-items: center;
   gap: .25rem;
   width: fit-content;
   margin: -.5rem 0 0;
   padding: .125rem .5rem;
   border-radius: 9999px;
   background: var(--atencao-suave);
   color: var(--atencao-forte);
   font-size: var(--text-xs);
   line-height: var(--leading-xs);
   font-weight: 500;
}

.field__hint[hidden] {
   display: none;
}

.field__hint .icone {
   width: .875rem;
   height: .875rem;
}

.field-pair {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
}

/* Lembrar-me / esqueceu a senha */
.login-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin: 0;
}

.check {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   margin: 0;
   font-size: var(--text-sm);
   color: var(--foreground);
   cursor: pointer;
}

.check input {
   position: absolute;
   opacity: 0;
   pointer-events: none;
}

.check__box {
   flex: none;
   width: 1rem;
   height: 1rem;
   border-radius: 4px;
   border: 1px solid var(--input);
   background: var(--background);
   display: grid;
   place-items: center;
   transition: background-color .15s ease, border-color .15s ease;
}

.check__box::after {
   content: "";
   width: 8px;
   height: 4px;
   border: 2px solid var(--primary-foreground);
   border-top: 0;
   border-right: 0;
   transform: translateY(-1px) rotate(-45deg) scale(0);
   transition: transform .18s var(--ease);
}

.check input:checked + .check__box {
   background: var(--primary);
   border-color: var(--primary);
}

.check input:checked + .check__box::after {
   transform: translateY(-1px) rotate(-45deg) scale(1);
}

.check input:focus-visible + .check__box {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
}

.js_hidden-section .check {
   margin-top: .75rem;
}

.js_hidden-section .field {
   margin-bottom: .25rem;
}

.login-link,
.login-link:visited {
   color: var(--primary-texto);
   font-size: var(--text-sm);
   font-weight: 500;
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-color: color-mix(in oklch, var(--primary-texto) 35%, transparent);
}

.login-link:hover {
   color: var(--primary-texto);
   text-decoration-color: currentColor;
}

/* Botão principal do guia: azul da marca, texto branco */
.login-submit {
   position: relative;
   height: 2.5rem;
   margin-top: .25rem;
   border: 0;
   border-radius: var(--radius-md);
   background: var(--primary);
   color: var(--primary-foreground);
   font-family: inherit;
   font-weight: 500;
   font-size: var(--text-sm);
   letter-spacing: normal;
   text-transform: none;
   cursor: pointer;
   transition: background-color .2s ease, transform .2s var(--ease);
}

.login-submit:hover {
   background: color-mix(in oklch, var(--primary) 88%, transparent);
}

.login-submit:active {
   transform: scale(.985);
}

.login-submit:disabled {
   opacity: .7;
   cursor: progress;
}

.login-submit .spinner-grow {
   width: .875rem;
   height: .875rem;
   vertical-align: -1px;
}

/* Foco do guia: anel na cor da marca */
:is(.login-stage, #modal) :focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
}

.login-submit:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 40%, transparent);
}

/* Aviso de erro vindo da comunidade (ela abre com slideDown, em linha: o ícone vai em linha) */
.login-alert {
   margin: 0;
   padding: .625rem .75rem;
   border: 0;
   border-radius: var(--radius-md);
   background: var(--urgente-suave);
   color: var(--urgente-forte);
   font-size: var(--text-sm);
   line-height: var(--leading-sm);
   font-weight: 500;
}

.login-alert::before {
   content: "";
   display: inline-block;
   width: 1rem;
   height: 1rem;
   margin-right: .5rem;
   vertical-align: -3px;
   background: currentColor;
   -webkit-mask: var(--icone-alerta) center / contain no-repeat;
   mask: var(--icone-alerta) center / contain no-repeat;
}

.login-foot {
   margin: 1.5rem 0 0;
   padding-top: 1rem;
   border-top: 1px solid var(--border);
   font-size: var(--text-sm);
   color: var(--muted-foreground);
   text-align: center;
}

/* Entrada: um único momento, o painel sobe e a foto "revela" sob o véu */
@media (prefers-reduced-motion: no-preference) {
   .login-panel {
      animation: panel-in .9s var(--ease) both;
   }

   .login-photo::after {
      animation: veil-in 1.6s var(--ease) .2s both;
   }

   .login-side > * {
      animation: side-in .8s var(--ease) both;
   }

   .login-side > :nth-child(2) { animation-delay: .08s; }
   .login-side > :nth-child(3) { animation-delay: .16s; }
}

@keyframes panel-in {
   from { opacity: 0; transform: translateY(18px) scale(.985); }
}

@keyframes veil-in {
   from { background-color: color-mix(in oklch, var(--marca-azul) 85%, transparent); }
   to   { background-color: transparent; }
}

@keyframes side-in {
   from { opacity: 0; transform: translateY(10px); }
}

/* Telas médias: a foto encolhe junto com a altura do painel */
@media (max-width: 1000px) {
   .login-panel {
      gap: 28px;
      padding-right: 28px;
   }
}

/* Celular e tablet: sem foto (abaixo de 900px ela ficaria menor que o formulário) */
@media (max-width: 899px) {
   .login-stage {
      padding: 16px;
      align-items: start;
   }

   .login-panel {
      grid-template-columns: 1fr;
      width: 100%;
      padding: 28px 20px;
   }

   .login-photo {
      display: none;
   }

   .login-side {
      padding: 0;
   }

      .login-logo {
      width: min(12rem, 70%);
   }
}

/* ---------- Redefinir senha (página da comunidade: /comunidade/reset) ---------- */

/* Cabeçalho e rodapé padrão da comunidade não aparecem nesta tela, como no login */
body[data-view="reset"] .main-header,
body[data-view="reset"] .row.footer {
   display: none;
}

body[data-view="reset"] .main-wrapper {
   padding: 0;
   background: transparent;
}

.login-steps {
   display: flex;
   gap: 8px;
   margin: 0 0 18px;
   padding: 0;
   list-style: none;
   font-size: var(--text-xs);
   color: var(--muted-foreground);
}

.login-steps li {
   display: flex;
   align-items: center;
   gap: 8px;
}

.login-steps li + li::before {
   content: "";
   width: 18px;
   height: 1px;
   background: var(--border);
}

.login-steps b {
   display: inline-grid;
   place-items: center;
   width: 1.375rem;
   height: 1.375rem;
   border-radius: 50%;
   background: var(--muted);
   color: var(--muted-foreground);
   font-weight: 600;
   font-size: var(--text-xs);
   font-variant-numeric: tabular-nums;
}

.login-steps .is-current {
   color: var(--foreground);
   font-weight: 600;
}

.login-steps .is-current b {
   background: var(--primary);
   color: var(--primary-foreground);
}

/* Etapas já concluídas */
.login-steps .is-done {
   color: var(--foreground);
}

.login-steps .is-done b {
   background: var(--bom-suave);
   color: var(--bom-forte);
}

/* ---------- Janelas do código de 6 dígitos, da nova senha e do aviso final ---------- */
:is(body[data-view="reset"], body.login-v2) .modal-backdrop.show {
   background: var(--foreground);
   opacity: .45;
}

/* no escuro o texto é claro: o fundo da janela escurece com o azul-marinho da página */
:is(body[data-view="reset"], body.login-v2).night-mode .modal-backdrop.show {
   background: var(--background);
   opacity: .8;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-dialog {
   max-width: 480px;
   display: flex;
   align-items: center;
   min-height: calc(100% - 3.5rem);
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-content {
   width: 100%;
   border: 0;
   border-radius: var(--radius-xl);
   background: var(--card);
   box-shadow: var(--anel-cartao), var(--sombra-cartao-alta);
   color: var(--foreground);
   font-family: var(--font-sans);
   overflow: hidden;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-header,
:is(body[data-view="reset"], body.login-v2) #modal .modal-footer {
   border: 0;
   padding: 1.5rem 1.5rem 0;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-footer {
   padding: 0 1.5rem 1.5rem;
   gap: .5rem;
   justify-content: flex-end;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-footer > * {
   margin: 0;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-body {
   padding: 1rem 1.5rem 1.25rem;
   color: var(--foreground);
   font-size: var(--text-sm);
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-title {
   font-family: inherit;
   font-weight: 600;
   font-size: var(--text-base);
   line-height: var(--leading-base);
   letter-spacing: normal;
   text-transform: none;
   color: var(--foreground);
}

:is(body[data-view="reset"], body.login-v2) #modal .close {
   color: var(--muted-foreground);
   text-shadow: none;
   opacity: 1;
}

:is(body[data-view="reset"], body.login-v2) #modal .close:hover {
   color: var(--foreground);
}

:is(body[data-view="reset"], body.login-v2) #modal .form-control-label {
   margin-bottom: .5rem;
   color: var(--foreground);
   font-size: var(--text-sm);
   font-weight: 500;
}

:is(body[data-view="reset"], body.login-v2) #modal .form-control {
   height: 2.25rem;
   padding: 0 .75rem;
   border-radius: var(--radius-md);
   border: 1px solid var(--input);
   background: var(--background);
   color: var(--foreground);
   font-family: inherit;
   font-size: var(--text-sm);
   box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
}

:is(body[data-view="reset"], body.login-v2) #modal .form-control:focus {
   border-color: var(--ring);
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}

/* Código de 6 dígitos: espaçado, algarismos de largura fixa */
:is(body[data-view="reset"], body.login-v2) #modal :is(input[name="reset_key"], input[name="two_factor_key"]) {
   height: 2.75rem;
   font-size: var(--text-xl);
   letter-spacing: .4em;
   text-align: center;
   font-variant-numeric: tabular-nums;
}

/* O e-mail para onde o código foi: etiqueta neutra */
:is(body[data-view="reset"], body.login-v2) #modal .badge-warning {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: .125rem .5rem;
   border-radius: 9999px;
   background: var(--muted);
   color: var(--foreground);
   font-weight: 500;
   font-size: var(--text-xs);
}

:is(body[data-view="reset"], body.login-v2) #modal .btn {
   height: 2.25rem;
   padding: 0 1rem !important;
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   font-family: inherit;
   font-weight: 500;
   font-size: var(--text-sm);
   line-height: 2.125rem;
   letter-spacing: normal;
   text-transform: none;
   box-shadow: none;
}

:is(body[data-view="reset"], body.login-v2) #modal .btn-primary {
   background: var(--primary) !important;
   border-color: var(--primary) !important;
   color: var(--primary-foreground);
}

:is(body[data-view="reset"], body.login-v2) #modal .btn-primary:hover {
   background: color-mix(in oklch, var(--primary) 88%, transparent) !important;
}

/* Secundário: com contorno */
:is(body[data-view="reset"], body.login-v2) #modal .btn-light {
   background: var(--background);
   border-color: var(--border);
   color: var(--foreground);
   box-shadow: 0 1px 2px oklch(0 0 0 / 0.05);
}

:is(body[data-view="reset"], body.login-v2) #modal .btn-light:hover {
   background: var(--muted);
}

:is(body[data-view="reset"], body.login-v2) #modal .btn:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 40%, transparent);
}

:is(body[data-view="reset"], body.login-v2) #modal .alert-danger {
   border: 0;
   border-radius: var(--radius-md);
   background: var(--urgente-suave);
   color: var(--urgente-forte);
   font-weight: 500;
}

:is(body[data-view="reset"], body.login-v2) #modal .alert-danger::before {
   content: "";
   display: inline-block;
   width: 1rem;
   height: 1rem;
   margin-right: .5rem;
   vertical-align: -3px;
   background: currentColor;
   -webkit-mask: var(--icone-alerta) center / contain no-repeat;
   mask: var(--icone-alerta) center / contain no-repeat;
}

/* Etapa 2: código e e-mail empilhados, em vez de duas colunas apertadas */
:is(body[data-view="reset"], body.login-v2) #modal .modal-body .row > [class*="col-"] {
   flex: 0 0 100%;
   max-width: 100%;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-body .row .form-group {
   margin: 0 0 12px !important;
}

:is(body[data-view="reset"], body.login-v2) #modal .form-group ~ .form-group {
   margin-top: 1rem !important;
}

/* Etapa final: senha alterada (sentimento "bom": fundo suave, ícone forte) */
:is(body[data-view="reset"], body.login-v2) #modal .big-icon {
   width: 3.5rem;
   height: 3.5rem;
   margin: .5rem auto 1rem;
   display: grid;
   place-items: center;
   border-radius: 50%;
}

:is(body[data-view="reset"], body.login-v2) #modal .big-icon.success {
   background: var(--bom-suave);
   color: var(--bom-forte);
}

:is(body[data-view="reset"], body.login-v2) #modal .big-icon.error {
   background: var(--urgente-suave);
   color: var(--urgente-forte);
}

:is(body[data-view="reset"], body.login-v2) #modal .big-icon .fa-3x {
   font-size: 1.5rem;
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-body h4 {
   font-family: inherit;
   font-weight: 600;
   font-size: var(--text-base);
   letter-spacing: normal;
   text-transform: none;
   color: var(--foreground);
}

:is(body[data-view="reset"], body.login-v2) #modal .modal-body .mt20 {
   color: var(--muted-foreground);
}

:is(body[data-view="reset"], body.login-v2) #modal .js_go-login {
   display: grid;
   place-items: center;
   margin-top: 1.25rem;
   text-decoration: none;
}

/* Aviso de cookies (montado pela comunidade): cartão claro, botão principal da marca */
:is(body[data-view="reset"], body.login-v2) .cc-window.cc-window {
   border-radius: var(--radius-xl);
   background: var(--card) !important;
   color: var(--foreground) !important;
   font-family: var(--font-sans);
   font-size: var(--text-sm);
   line-height: var(--leading-sm);
   box-shadow: var(--anel-cartao), var(--sombra-cartao-alta);
}

:is(body[data-view="reset"], body.login-v2) .cc-window .cc-link {
   color: var(--primary-texto) !important;
   opacity: 1;
   padding: 0;
}

:is(body[data-view="reset"], body.login-v2) .cc-window .cc-btn {
   border: 0;
   border-radius: var(--radius-md);
   background: var(--primary) !important;
   color: var(--primary-foreground) !important;
   font-size: var(--text-sm);
   font-weight: 500;
}