/* ============================================================================
   PERFIL — mesma superfície do "Preencher currículo" (v234)

   O padrão de superfície aberta já existe em `modal-surfaces-v235.css`:
   CABEÇALHO BRANCO (--cv-open-surface-header), CORPO AZUL
   (--cv-open-surface-body) e divisa em --cv-open-surface-border. É o que o
   Preencher usa (.cv-f2-head branco sobre .cv-f2-compose azul).

   O cartão de Perfil recebia só o corpo azul: ficava um bloco azul inteiro,
   sem o cabeçalho branco que dá a divisa do padrão. Além disso vinha de outra
   época no resto — botão Fechar em pílula vermelha, campos e botões com raio
   de 999px — e ao lado do Preencher pareciam dois produtos diferentes.

   Esta camada NÃO redefine as superfícies: ela CONSOME as variáveis do v235 e
   completa o que faltava (cabeçalho branco com divisa, botão de fechar
   quadrado de 40px, campo com borda fria e foco azul, botão de 44px).

   ⚠️ Regras propositalmente ESPECÍFICAS de `.cv-access-*`. As regras antigas
   são compartilhadas com o modal de Histórico (`.cv-history-*`); mexer nelas
   arrastaria o histórico junto. Esta camada é aditiva e reversível.
   ========================================================================== */

/* ---- fundo: mesmo par do Preencher (escuro + desfoque) ---- */
.cv-access-overlay {
  padding: 24px !important;
  background: rgba(8, 20, 39, 0.58) !important;
  backdrop-filter: blur(8px) !important;
}

/* ---- cartão: branco liso, sem o gradiente antigo ---- */
.cv-access-card {
  width: min(620px, calc(100vw - 48px)) !important;
  max-height: calc(100vh - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--cv-open-surface-border, #aebfd4) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 70px rgba(7, 18, 36, 0.3) !important;
  color: #0d1f3c;
  /*
   * Cabeçalho fixo + corpo que rola: o modal cresce com o conteúdo sem que o
   * título suma, que era o incômodo em tela baixa.
   *
   * Isto era uma GRADE de duas linhas (`auto minmax(0, 1fr)`), e a grade
   * escondia dois defeitos que só apareciam quando o cartão batia no teto de
   * altura:
   *
   *  1. A coluna não esticava: o cabeçalho branco nascia 11px para dentro de
   *     cada lado e sobrava uma moldura azul em volta, o "desalinhado com a
   *     janela" que foi relatado.
   *  2. O cartão tem QUATRO filhos (cabeçalho, introdução, status da nuvem e
   *     formulário), não dois. A linha elástica caía sobre a INTRODUÇÃO, que
   *     encolhia de 39px para 20px e perdia a última linha do texto, enquanto
   *     o formulário, o único que deveria rolar, ficava intacto.
   *
   * Coluna flex resolve os dois de uma vez e não depende de contar filhos: o
   * alinhamento vem do `stretch` natural do eixo cruzado, e quem estica e rola
   * é declarado explicitamente logo abaixo.
   */
  display: flex !important;
  flex-direction: column;
  /*
   * Uma regra genérica reserva `scrollbar-gutter: stable both-edges` nos
   * cartões que rolam. Boa ideia lá, mas aqui quem rola passou a ser o corpo,
   * não o cartão. A reserva virava uma moldura azul de 10px de cada lado em
   * volta do cabeçalho branco: era o "desalinhado com a janela".
   * A reserva vai junto para quem de fato rola, logo abaixo.
   */
  scrollbar-gutter: auto !important;
  box-sizing: border-box;
}

.cv-access-card[data-access-mode="login"] {
  width: min(480px, calc(100vw - 48px)) !important;
}

/* ---- cabeçalho em faixa, como o .cv-f2-head ---- */
/* o que faltava: cabeçalho BRANCO sobre corpo azul, com a divisa do padrão */
html body.cvx-on .cv-access-card > .cv-access-header,
.cv-access-card > .cv-access-header {
  margin: 0;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--cv-open-surface-border, #aebfd4) !important;
  background: var(--cv-open-surface-header, #ffffff) !important;
}

.cv-access-card > .cv-access-header .cv-access-title {
  font-size: 18px;
  font-weight: 850;
  color: #0d2752;
  white-space: nowrap;
}

.cv-access-card > .cv-access-header .cv-access-close {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 32px;
}

.cv-access-card > .cv-access-header .cv-access-close svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* O botão de fechar NÃO é redefinido aqui de propósito: o projeto já tem o
   padrão `cv-close-standard-v136`, aplicado por JS a todos os modais. Cheguei
   a trocá-lo por um "×" quadrado e a pílula vermelha do padrão sumiu — era
   consistência existente, não desvio. Fica como está. */

/* ============================================================================
   UMA CALHA SÓ, DOS DOIS LADOS

   O cabeçalho ficava simétrico em 23px, mas o corpo media 23 à esquerda e 33 à
   direita. Os 10px de diferença eram a reserva de barra de rolagem, cobrada
   sempre, inclusive quando não havia o que rolar.
   ========================================================================== */
.cv-access-card > .cv-access-intro,
.cv-access-card > .cv-access-grid {
  padding-left: 22px;
  padding-right: 22px;
}

/* O chip da nuvem ficava entre a introdução e o rótulo "Nome", que começam em
   23, mas o texto dele nascia em 38: a moldura alinhava e o texto não, e no
   meio de dois textos alinhados era ele que saltava fora da coluna.

   Aqui ele vira o que de fato é: uma linha de recado, não um cartão. Sem
   moldura, sem fundo e sem recuo, o texto cai na mesma coluna do resto. O
   estado continua legível porque a própria frase muda com ele, e a cor
   acompanha; nunca dependeu só da cor. */
/* Um padrão só, nas duas abas: o chip é cartão como todo bloco do modal.

   O recuo é 14px e não 16 porque a barra de destaque do estado ocupa 3px. Com
   ela somada, o texto cai nos mesmos 40px onde começa o conteúdo dos outros
   cartões. */
.cv-access-card > .cv-cloud-status-card {
  margin: 12px 22px 0 !important;
  padding: 11px 16px 11px 14px !important;
  border: 1px solid var(--cv-open-surface-border, #aebfd4) !important;
  border-left-width: 3px !important;
  border-radius: 12px !important;
  background: var(--cv-open-surface-header, #fff) !important;
  min-height: 0 !important;
}

/* Quem NÃO encolhe: texto curto e informativo some inteiro se ceder um pouco.
   Sem isto o flex distribui o aperto entre todos e a introdução perde linha. */
.cv-access-card > .cv-access-header,
.cv-access-card > .cv-access-intro,
.cv-access-card > .cv-cloud-status-card {
  flex: 0 0 auto;
}

/* Quem cede e rola: o formulário. `min-height: 0` é obrigatório, porque sem
   ele o filho flex nunca fica menor que o conteúdo e o cartão estoura. */
.cv-access-card > .cv-access-grid {
  flex: 1 1 auto;
  min-height: 0;
}

.cv-access-card > .cv-access-intro {
  margin: 16px 0 0;
  color: #40516b;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}

.cv-access-card > .cv-access-grid {
  /* 12px é o respiro do conjunto, o mesmo que separa os cartões do resumo.
     Antes o chip fechava com 2px e a grade abria com 16, e o primeiro vão saía
     18 enquanto os de baixo saíam 12. */
  gap: 12px;
  /* a margem de baixo somava com o padding e sobravam 65px de nada no fim */
  margin: 12px 0 0;
  padding-bottom: 18px;
  overflow: auto;
  /* Sem reserva de barra: ela custava 10px fixos na direita e quebrava a
     simetria com o cabeçalho o tempo todo, para resolver um pulo que só
     acontece quando o conteúdo passa da altura da tela. Quando a barra
     aparecer, o conteúdo cede espaço a ela, como em qualquer aplicativo. */
  scrollbar-gutter: auto;
}

/*
 * A foto ficava numa COLUNA à esquerda: o avatar ocupava o topo e o resto da
 * coluna descia vazio ao lado dos campos, espaço morto que só piorava quanto
 * mais alto o formulário. Vira uma FAIXA de identidade no topo: avatar à
 * esquerda, ação e explicação à direita, e os campos ganham a largura toda.
 */
.cv-access-card:not([data-access-mode="login"]) > .cv-access-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

.cv-access-card:not([data-access-mode="login"]) .cv-profile-preview {
  display: grid !important;
  /* Ocupa a largura toda de novo. Encolher ao conteúdo resolvia o descampado à
     direita, mas deixava a faixa desalinhada dos campos logo abaixo. O lado
     direito agora tem sempre uma explicação, então não sobra vazio. */
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "avatar acao"
    "avatar nota";
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  /* 16px à esquerda, como nos demais cartões: assim todo conteúdo de cartão
     começa no mesmo ponto, 40px da borda do modal */
  padding: 12px 16px;
  border: 1px solid var(--cv-open-surface-border, #aebfd4);
  border-radius: 12px;
  background: var(--cv-open-surface-header, #fff);
  justify-items: start !important;
}

.cv-access-card:not([data-access-mode="login"]) .cv-photo-target {
  grid-area: avatar;
}

.cv-access-card:not([data-access-mode="login"]) .cv-photo-label {
  grid-area: acao;
  align-self: end;
}

.cv-access-card:not([data-access-mode="login"]) .cv-photo-nota,
.cv-access-card:not([data-access-mode="login"]) .cv-photo-nota-local {
  grid-area: nota;
  align-self: start;
  max-width: none;
  text-align: left;
}

/* Sempre há uma explicação à direita do retrato: para conta vinculada, que a
   foto local vale no lugar da do Google; para conta local, onde ela fica. Antes
   a conta local não tinha nenhuma, e a faixa ficava com metade vazia. */
.cv-photo-nota-local {
  display: none;
  color: #60728d;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
}

body:not(.cv-profile-google) .cv-photo-nota-local {
  display: block;
}

/* ---- campos: borda fria e foco azul do Preencher ---- */
.cv-access-field input,
.cv-access-field select {
  border: 1px solid #b9c9df !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  background: #ffffff !important;
  color: #0f1c33 !important;
  font: 500 13px/1.4 Arial, sans-serif !important;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.cv-access-field input:focus {
  outline: none !important;
  border-color: #245fb7 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(36, 95, 183, 0.14) !important;
}

.cv-access-field {
  font-size: 12px;
  font-weight: 800;
  color: #102c58;
}

/* A faixa de aviso reservava 18px de linha mesmo vazia, e isso aparecia como
   sobra no fim do cartão. Zero altura em vez de `display:none`: assim ela
   continua na árvore de acessibilidade e o leitor de tela ainda anuncia a
   mensagem quando ela chega. */
.cv-access-status:empty {
  /* `min-height: 18px` da regra base vence qualquer `height`, então o mínimo
     precisa ser zerado junto */
  min-height: 0;
  height: 0;
  margin: 0;
  overflow: hidden;
}

/* ============================================================================
   VER E EDITAR SÃO INTENÇÕES DIFERENTES

   Abrir o Perfil só para conferir o e-mail não deveria colocar um formulário
   inteiro na frente, com campos abertos e um botão de salvar esperando. O
   alternador separa as duas coisas e o modal abre sempre em leitura.

   Só existe no Perfil. Em Entrar e Criar conta nem aparece.
   ========================================================================== */
.cv-profile-tabs {
  display: none;
}

.cv-access-card[data-access-mode="profile"] .cv-profile-tabs {
  display: inline-flex;
  /* empurra o alternador até encostar no Fechar, em vez de deixá-lo boiando no
     meio do cabeçalho por conta do `space-between` */
  margin-left: auto;
  flex: 0 0 auto;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cv-open-surface-border, #aebfd4);
  border-radius: 10px;
  background: #f2f6fd;
}

.cv-profile-tab {
  /* menor que os 44px de um botão de ação: aqui é uma chave de modo dentro da
     faixa do cabeçalho, não uma ação principal */
  min-height: 30px;
  padding: 5px 14px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #52658a;
  font: 800 12px Arial, sans-serif;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.cv-profile-tab:hover {
  color: #17365f;
}

.cv-profile-tab[aria-selected="true"] {
  background: #17365f;
  color: #fff;
}

.cv-profile-tab:focus-visible {
  outline: 2px solid #245fb7;
  outline-offset: 2px;
}

/* ============================================================================
   ABA INFORMAÇÕES: DOIS BLOCOS, NÃO SEIS PEDAÇOS SOLTOS

   A leitura reaproveitava o formulário e a mesma coisa reaparecia em vários
   cantos. O e-mail saía no campo E de novo dentro do selo do Google. A
   introdução dizia o que o chip da nuvem logo abaixo já dizia. Três dados
   curtos gastavam três pares de rótulo e valor empilhados, e o retrato ficava
   solto no topo, longe do nome a que pertence.

   Vira um bloco de identidade, onde retrato, nome, e-mail e papel finalmente
   ficam juntos, e uma lista curta de como a pessoa entra. O chip da nuvem
   continua onde estava, porque ali é estado ao vivo e não texto fixo.
   ========================================================================== */
.cv-profile-resumo {
  display: none;
}

.cv-access-card[data-profile-tab="ver"] .cv-profile-resumo {
  display: grid;
  gap: 12px;
}

/* Em leitura não sobra nenhum controle: o formulário inteiro sai, e com ele os
   campos, o botão de salvar e o bloco de vincular o Google. Vincular é edição,
   e mora na outra aba. */
.cv-access-card[data-profile-tab="ver"] .cv-profile-preview,
.cv-access-card[data-profile-tab="ver"] .cv-access-form,
.cv-access-card[data-profile-tab="ver"] > .cv-access-intro {
  display: none !important;
}

/* ---- bloco de identidade ---- */
.cv-resumo-identidade {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "avatar nome  papel"
    "avatar email papel";
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--cv-open-surface-border, #aebfd4);
  border-radius: 12px;
  background: var(--cv-open-surface-header, #fff);
}

.cv-resumo-avatar {
  grid-area: avatar;
  width: 54px !important;
  height: 54px !important;
  font-size: 17px !important;
}

.cv-resumo-nome {
  grid-area: nome;
  align-self: end;
  font: 850 15px/1.25 Arial, sans-serif;
  color: #0d2752;
  overflow-wrap: anywhere;
}

.cv-resumo-email {
  grid-area: email;
  align-self: start;
  font: 600 12.5px/1.35 Arial, sans-serif;
  color: #52658a;
  overflow-wrap: anywhere;
}

.cv-resumo-papel {
  grid-area: papel;
  justify-self: end;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  padding: 7px 15px !important;
  letter-spacing: .04em;
}

/* O azul da marca com o dourado é aplicado por uma regra presa ao id
   `#cvProfileRoleDisplay`, e id não se repete em dois lugares. Espelhado aqui
   com os mesmos valores, senão a etiqueta do resumo nasce clara e o ADM some
   dentro dela. */
body.cv-role-admin #cvProfileResumoPapel {
  background: linear-gradient(135deg, #0d1f4c, #1c3f8b);
  color: #f4d58a;
  border-color: #0d1f4c;
}

/* ---- como a pessoa entra ---- */
.cv-resumo-lista {
  display: grid;
  margin: 0;
  border: 1px solid var(--cv-open-surface-border, #aebfd4);
  border-radius: 12px;
  background: var(--cv-open-surface-header, #fff);
  overflow: hidden;
}

.cv-resumo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
}

.cv-resumo-linha + .cv-resumo-linha {
  border-top: 1px solid var(--cv-open-surface-border, #aebfd4);
}

.cv-resumo-linha dt {
  font: 700 12.5px Arial, sans-serif;
  color: #52658a;
}

.cv-resumo-linha dd {
  margin: 0;
  font: 800 12.5px Arial, sans-serif;
  color: #14294a;
}

/* o que ainda não existe fica em tom mais fraco, sem virar aviso de erro */
.cv-resumo-linha dd[data-estado="nao"] {
  color: #8494ad;
  font-weight: 700;
}

/* ============================================================================
   PERFIL ≠ LOGIN

   Perfil e Entrar dividem o MESMO formulario, e o que e exclusivo do login
   ficava visivel nos dois: o divisor "ou" e o rodape "Ao entrar, voce aceita os
   Termos". Quem ja estava dentro abria o Perfil e via uma tela de entrada.
   Some so no Perfil. No login continua igual.
   ========================================================================== */
.cv-access-card[data-access-mode="profile"] > .cv-access-grid .cv-access-or,
.cv-access-card[data-access-mode="profile"] > .cv-access-grid .cv-access-legal {
  display: none !important;
}

/* O bloco do Google no Perfil nao e entrada: e o vinculo da conta, opcional.
   Fora do Perfil este cabecalho nao existe. */
.cv-profile-google-row {
  display: none;
}

.cv-access-card[data-access-mode="profile"] .cv-profile-google-row {
  display: grid;
  gap: 2px;
  margin: 4px 0 8px;
  padding-top: 12px;
  border-top: 1px solid var(--cv-open-surface-border, #aebfd4);
}

.cv-profile-google-title {
  font-size: 12px;
  font-weight: 800;
  color: #102c58;
}

.cv-profile-google-hint {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: #5c6e8b;
}

/* ============================================================================
   O FORMULARIO PARA DE SER UMA PILHA DE BARRAS DE LARGURA TOTAL

   Nome e E-mail merecem a linha inteira. Papel e uma etiqueta de leitura de
   tres letras e Salvar e um botao: ocupando a largura toda viravam duas faixas
   enormes com vazio dentro. Papel encolhe ate o texto e a Senha ocupa a sobra.
   ========================================================================== */
/* O formulário continua de uma coluna só. Quem vira duas é o par Papel/Senha,
   e só na edição do Perfil.

   Fazer o contrário (formulário de duas colunas e `> *` mandando todo mundo
   atravessar as duas) custava recálculo de estilo em cada filho, e o orçamento
   de varredura do integrity mede exatamente isso. */
.cv-access-dupla {
  display: contents;
}

.cv-access-card[data-access-mode="profile"][data-profile-tab="editar"] .cv-access-dupla {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  /* Pelo TOPO, não pela base. A senha carrega uma linha de ajuda embaixo e é
     mais alta que o papel; alinhando pela base, o rótulo "Papel" descia e os
     dois rótulos da mesma linha ficavam em alturas diferentes. */
  align-items: start;
}

/* Papel e LEITURA, nao campo editavel. A etiqueta cola no texto em vez de
   fingir uma caixa de entrada vazia pela metade.

   Mexo SO no tamanho. A cor fica como esta: o papel de administrador tem uma
   variante propria (fundo escuro, texto dourado) e clarear o fundo aqui deixou
   o dourado com contraste de 1.5:1, ilegivel. */
.cv-access-card[data-access-mode="profile"] .cv-access-role-pill {
  justify-self: start;
  width: auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  letter-spacing: .04em;
}

/* Explicação curta abaixo do campo. Só faz sentido na edição: em Informações
   quem responde pela senha é a linha "Senha local" do resumo. */
.cv-access-ajuda {
  display: none;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #60728d;
}

.cv-access-card[data-profile-tab="editar"] .cv-access-ajuda {
  display: block;
}

/* ---- senha com olho: conferir antes de salvar ---- */
.cv-access-input-wrap {
  position: relative;
  display: block;
}

/* `!important` aqui nao e teimosia: sem ele o input fica nos 180px do tamanho
   padrao do elemento e o olho, ancorado na direita do embrulho, aparece boiando
   longe do campo. */
.cv-access-input-wrap input {
  width: 100% !important;
  max-width: 100% !important;
  /* espaco reservado para o olho nao cobrir o texto digitado */
  padding-right: 44px !important;
}

/* Ancorado por `top`+`bottom`, nao por `top:50%` + `translateY(-50%)`: alguma
   regra global anula o `transform` destes botoes e o olho caia 17px, saindo
   para fora da base do campo. Esticar entre as duas bordas centraliza sozinho
   e nao depende de transform nenhum. */
.cv-pass-toggle {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #5c6e8b;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.cv-pass-toggle:hover {
  background: #eef3fb;
  color: #17365f;
}

.cv-pass-toggle:focus-visible {
  outline: 2px solid #245fb7;
  outline-offset: 1px;
}

.cv-pass-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o icone diz o ESTADO ATUAL: olho aberto = escondida, clique para ver */
.cv-pass-toggle .cv-pass-eye-off,
.cv-pass-toggle[aria-pressed="true"] .cv-pass-eye {
  display: none;
}

.cv-pass-toggle[aria-pressed="true"] .cv-pass-eye-off {
  display: block;
}

/* ---- botões: 44px, raio 8, verde de confirmação do Preencher ---- */
.cv-access-actions .cv-access-primary,
.cv-access-actions .cv-access-secondary {
  min-height: 44px;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

/* No Perfil sobra UM botao visivel (Salvar) e a regra base manda `flex:1 1 auto`
   nos primarios: ele esticava numa faixa verde de ponta a ponta, com peso de
   passo obrigatorio num formulario que so se salva quando ha o que mudar.
   Encolhe ao texto e vai para a direita, onde a leitura termina. */
.cv-access-card[data-access-mode="profile"] .cv-access-actions {
  justify-content: flex-end;
}

.cv-access-card[data-access-mode="profile"] .cv-access-actions .cv-access-primary {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  padding: 10px 30px !important;
}

.cv-access-actions .cv-access-primary:hover,
.cv-access-actions .cv-access-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(13, 31, 76, 0.16) !important;
}

#cvAccessSaveButton {
  background: #287a50 !important;
  border: 1px solid #287a50 !important;
}

#cvAccessSaveButton:hover,
#cvAccessSaveButton:focus,
#cvAccessSaveButton:active {
  background: #31905f !important;
  border-color: #31905f !important;
}

#cvAccessLoginButton,
#cvAccessCreateButton {
  background: #174a91 !important;
  border: 1px solid #174a91 !important;
}

.cv-access-actions .cv-access-secondary {
  background: #f7f9fc !important;
  border: 1px solid #d5deeb !important;
  color: #17365f !important;
}

/* ============================================================================
   FOTO DO PERFIL — sempre trocável, seja conta Google ou local.

   Trocar a foto já era possível, mas o caminho era um botãozinho cinza escrito
   "Foto" embaixo do avatar: ninguém descobria. Agora o próprio avatar é o
   alvo, com selo de câmera e rótulo explícito. Quem entrou pelo Google vê a
   mesma coisa — a foto local passa a valer no lugar da foto da conta Google.
   ========================================================================== */
.cv-profile-preview {
  gap: 8px !important;
}

.cv-photo-target {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.cv-photo-target:focus-visible {
  outline: 3px solid rgba(36, 95, 183, 0.34);
  outline-offset: 3px;
}

.cv-photo-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #174a91;
  box-shadow: 0 4px 10px rgba(13, 31, 76, 0.28);
  transition: background .15s ease, transform .15s ease;
}

.cv-photo-target:hover .cv-photo-badge {
  background: #1e5baa;
  transform: scale(1.06);
}

.cv-photo-badge svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cv-photo-label {
  border: 0 !important;
  border-radius: 8px !important;
  background: #eef3fb !important;
  color: #123260 !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
}

.cv-photo-label:hover,
.cv-photo-label:focus {
  background: #dfe9f8 !important;
  color: #123260 !important;
}

/* aviso curto, só para quem entrou pelo Google */
.cv-photo-nota {
  display: none;
  max-width: 132px;
  color: #60728d;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

body.cv-profile-google .cv-photo-nota {
  display: block;
}

@media (max-width: 640px) {
  .cv-access-card[data-access-mode="profile"] > .cv-access-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 10px;
  }

  .cv-access-card[data-access-mode="profile"] > .cv-access-header .cv-access-title {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .cv-access-card[data-access-mode="profile"] > .cv-access-header .cv-access-close {
    grid-column: 2;
    grid-row: 1;
  }

  .cv-access-card[data-access-mode="profile"] > .cv-access-header .cv-profile-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
  }

  .cv-access-card[data-access-mode="profile"] > .cv-access-header .cv-profile-tab {
    flex: 1 1 0;
    min-width: 0;
  }

  .cv-access-card > .cv-access-grid {
    grid-template-columns: 1fr !important;
    justify-items: center;
  }
}