/* ==========================================================================
   Lâmina Gaúcha — tema para Oracle APEX (Universal Theme)
   --------------------------------------------------------------------------
   Espelha o visual de site/src/styles/global.css. Sobe como **Static
   Application File** e entra em Shared Components → User Interface → CSS.

   O ARQUIVO AQUI É A FONTE DA VERDADE. Editar pelo App Builder faz a versão
   do APEX divergir desta, e ninguém percebe até alguém reinstalar a app.
   Mexeu aqui, suba de novo.

   ── Uma diferença deliberada em relação ao site ──────────────────────────
   O site carrega Oswald e Inter por @fontsource (pacotes npm, servidos do
   próprio domínio). No APEX não há build de assets, então vêm do Google
   Fonts por @import. Efeito prático: a primeira visita depende de um
   terceiro. Se um dia isso incomodar, o caminho é subir os .woff2 como
   static files e trocar o @import por @font-face.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  /* Mesmos valores de site/src/styles/global.css — não divergir */
  --lg-laranja: #ff6d00;
  --lg-laranja-claro: #ff8c33;
  --lg-verde: #007320;
  --lg-vermelho: #de4046;
  --lg-amarelo: #fcdb00;

  --lg-carvao: #14110f;
  --lg-carvao-2: #1e1a17;
  --lg-carvao-3: #2b2521;
  --lg-borda: #3a322c;

  --lg-texto: #f2ece5;
  --lg-texto-suave: #b8ada1;
  --lg-texto-fraco: #8a7f74;

  --lg-fonte-titulo: 'Oswald', 'Helvetica Neue', Impact, sans-serif;
  --lg-fonte-corpo: 'Inter', system-ui, -apple-system, sans-serif;

  --lg-largura: 68rem;
  --lg-raio: 4px;
}

/* --------------------------------------------------------------- base ---- */

body,
.t-Body,
.t-PageBody {
  background: var(--lg-carvao);
  color: var(--lg-texto);
  font-family: var(--lg-fonte-corpo);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.t-Body-content,
.t-Body-main {
  background: var(--lg-carvao);
}

/* Títulos em caixa alta, como no site.
   line-height folgado de propósito: em português maiúsculo o til e o
   circunflexo batem na linha de cima o tempo todo (LÂMINA, MÃO, AÇÃO). */
h1, h2, h3, h4,
.t-Region-title,
.t-Body-title {
  font-family: var(--lg-fonte-titulo);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--lg-texto);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }

p { text-wrap: pretty; }

a,
.t-Button--link {
  color: var(--lg-laranja);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover,
.t-Button--link:hover {
  color: var(--lg-laranja-claro);
}

/* O foco visível é acessibilidade, não enfeite: quem navega por teclado
   precisa saber onde está. Mesmo tratamento do site. */
:focus-visible {
  outline: 2px solid var(--lg-laranja);
  outline-offset: 3px;
}

hr,
.t-Region--hideHeader .t-Region-header {
  border-color: var(--lg-borda);
}

/* ------------------------------------------------------------- cabeçalho -- */

.t-Header,
.t-Header-branding,
.t-Header-nav {
  background: var(--lg-carvao-2);
  border-bottom: 1px solid var(--lg-borda);
  box-shadow: none;
}

/* O logo entra como <img> pelo atributo Logo da aplicação. Altura fixa para
   ele não crescer junto com a fonte do navegador e estourar a barra. */
.t-Header-logo img,
.t-Header-branding img {
  height: 40px;
  width: auto;
}

.t-Header-logo-link,
.t-Header-logo-link:hover {
  color: var(--lg-texto);
  text-decoration: none;
}

.t-Header-navBar .t-Button {
  color: var(--lg-texto-suave);
}

/* ------------------------------------------------- faixa do título da página --
   Descoberto ao rodar a app pela primeira vez: o Universal Theme põe o título
   numa faixa CLARA, independente do body. Sem estas regras sobra uma tarja
   branca embaixo do cabeçalho escuro — o erro salta aos olhos.
   ------------------------------------------------------------------------- */

.t-Body-title,
.t-Body-titleWrap,
.t-BreadcrumbRegion,
.t-BreadcrumbRegion-body,
.t-Body-info {
  background: var(--lg-carvao-2);
  border-bottom: 1px solid var(--lg-borda);
  color: var(--lg-texto);
  box-shadow: none;
}

.t-BreadcrumbRegion-title,
.t-Breadcrumb-label,
.t-Body-title h1 {
  color: var(--lg-texto);
  font-family: var(--lg-fonte-titulo);
  text-transform: uppercase;
}

/* NÃO acrescente regra para esconder o ícone do foguete aqui. Ele vem de uma
   OPÇÃO DE TEMPLATE, não de CSS: região do Breadcrumb Bar → template Hero →
   Template Options → "Display Icon" = No (grava a classe t-HeroRegion--hideIcon).
   Foi assim que se resolveu em 22/08/2026. Esconder por CSS mascararia a causa
   e voltaria a aparecer em qualquer página nova com o mesmo template. */

/* ---------------------------------------------------------------- regiões -- */

.t-Region,
.t-Card,
.t-Alert,
.t-ContentBlock {
  background: var(--lg-carvao-2);
  border: 1px solid var(--lg-borda);
  border-radius: var(--lg-raio);
  color: var(--lg-texto);
}

/* O indicador de severidade do alerta.
   O Universal Theme pinta a faixa da esquerda com uma cor clara propria, que
   no fundo carvao vira um bloco branco gritando ao lado do texto -- foi o que
   apareceu na tela "Voce ja respondeu".
   TUDO LARANJA, MENOS O ERRO (27/08/2026, segunda rodada): primeiro o aviso
   deixou o amarelo, depois o sucesso deixou o verde -- decisao do Guilherme
   olhando as telas: a faixa colorida ao lado do carvao so conversa com o resto
   do site quando e laranja. A faixa deixou de codificar severidade de
   proposito; quem diz "deu certo" ou "faltou algo" e o TEXTO. A unica excecao
   e o ERRO, que segue vermelho: falha precisa gritar diferente. */
.t-Alert .t-Alert-icon,
.t-Alert-icon {
  background: var(--lg-laranja);
  color: var(--lg-carvao);
}

.t-Alert--warning .t-Alert-icon { background: var(--lg-laranja); }
.t-Alert--danger .t-Alert-icon,
.t-Alert--red .t-Alert-icon    { background: var(--lg-vermelho); }
.t-Alert--success .t-Alert-icon,
.t-Alert--green .t-Alert-icon  { background: var(--lg-laranja); }

/* O icone dentro da faixa fica na cor do fundo da pagina: contraste alto sobre
   qualquer uma das quatro, sem precisar de uma regra por cor. */
.t-Alert .t-Alert-icon .t-Icon,
.t-Alert .t-Alert-icon .a-Icon {
  color: var(--lg-carvao);
}

/* Foto de galeria sem legenda. Nao e enfeite de aviso: o guarda de procedencia
   do site RECUSA o build quando falta legenda, entao uma foto muda aqui e uma
   publicacao que nao vai acontecer. Amarelo, e nao vermelho: nada quebrou
   ainda, e ele mesmo resolve em dois cliques. */
.lg-pv__semlegenda {
  color: var(--lg-amarelo);
  font-style: italic;
}

.t-Region-header {
  background: transparent;
  border-bottom: 1px solid var(--lg-borda);
}

.t-Region-body {
  color: var(--lg-texto);
}

.t-Card-title {
  font-family: var(--lg-fonte-titulo);
  text-transform: uppercase;
  color: var(--lg-texto);
}
.t-Card-desc {
  color: var(--lg-texto-suave);
}

/* Faixa de destaque — o mesmo papel da tarja laranja do card do Instagram:
   é a informação que decide se a pessoa continua lendo. */
.lg-destaque {
  font-family: var(--lg-fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--lg-laranja);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------- botões -- */

.t-Button {
  font-family: var(--lg-fonte-titulo);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--lg-raio);
  border: 1px solid var(--lg-borda);
  background: var(--lg-carvao-3);
  color: var(--lg-texto);
}
.t-Button:hover {
  background: var(--lg-borda);
  color: var(--lg-texto);
}

.t-Button--hot,
.t-Button--primary {
  background: var(--lg-laranja);
  border-color: var(--lg-laranja);
  color: var(--lg-carvao);
  font-weight: 600;
}
.t-Button--hot:hover,
.t-Button--primary:hover {
  background: var(--lg-laranja-claro);
  border-color: var(--lg-laranja-claro);
  color: var(--lg-carvao);
}

/* --------------------------------------------------------------- formulário */

.t-Form-label,
.t-Form-fieldContainer .t-Form-label {
  color: var(--lg-texto-suave);
  font-family: var(--lg-fonte-corpo);
  font-weight: 500;
}

.apex-item-text,
.apex-item-textarea,
.apex-item-select,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
textarea,
select {
  background: var(--lg-carvao);
  border: 1px solid var(--lg-borda);
  border-radius: var(--lg-raio);
  color: var(--lg-texto);
  font-family: var(--lg-fonte-corpo);
}

.apex-item-text:focus,
.apex-item-textarea:focus,
textarea:focus,
select:focus {
  border-color: var(--lg-laranja);
  box-shadow: 0 0 0 1px var(--lg-laranja);
}

::placeholder {
  color: var(--lg-texto-fraco);
}

/* Erro em vermelho da paleta, não no vermelho padrão do tema */
.t-Form-error,
.a-Form-error {
  color: var(--lg-vermelho);
}

/* ----------------------------------------------------------------- rodapé -- */

.t-Footer {
  background: var(--lg-carvao-2);
  border-top: 1px solid var(--lg-borda);
  color: var(--lg-texto-fraco);
}
.t-Footer a {
  color: var(--lg-texto-suave);
}

/* ------------------------------------------------- página pública / login -- */

.t-Login-container .t-Login-region,
.t-Login-region {
  background: var(--lg-carvao-2);
  border: 1px solid var(--lg-borda);
}

/* O FUNDO AZUL DA TELA DE ENTRAR (28/08/2026). O Universal Theme pinta a
   .t-Login-bg com a cor primaria do tema, que e azul -- e azul e a unica cor
   que este projeto nao tem em lugar nenhum. Ate aqui o CSS so tratava o
   CARTAO do login, entao o cartao ficava certo dentro de um fundo de outra
   marca. Pinta-se o fundo, o corpo e a camada de imagem: as tres existem no
   HTML gerado e qualquer uma sozinha deixa faixa azul aparecendo na borda. */
.t-Login-bg,
.t-Login-bgImg {
  background-color: var(--lg-carvao);
  background-image: none;
}

/* O TITULO SAI DE VISTA, MAS NAO DO DOM. O SVG da marca ja escreve "Lâmina
   Gaúcha"; o <h2> logo abaixo repetia o nome. Some visualmente e continua
   sendo lido por leitor de tela -- ele e o alvo do aria-labelledby da regiao,
   entao remove-lo de verdade deixaria o cartao de login sem nome acessivel. */
.t-Login-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* O LADRILHO AZUL E O TAMANHO DE SELO vinham da MESMA regra do tema, e nao da
   imagem (28/08/2026 -- cheguei a culpar o arquivo antes de ler o CSS do
   Universal Theme, que diz tudo):

     .t-Login-logo { background-color: var(--ut-app-icon-background-color, ...);
                     border-radius: var(--ut-login-logo-border-radius, .25rem);
                     height: var(--ut-login-logo-size, 4rem);
                     width:  var(--ut-login-logo-size, 4rem); }

   Ou seja: o tema trata a imagem do login como ICONE DE APLICATIVO -- 4rem de
   lado, cantos arredondados e o fundo da cor do icone do app, que aqui e azul.
   Trocar de arquivo nunca ia resolver.

   Desligamos pelas PROPRIAS variaveis do tema (fundo transparente, sem raio) e
   soltamos a medida: a marca e quase quadrada, entao quem manda e a ALTURA --
   largura fixa achataria. O max-width em 80% protege o celular. */
.t-Login-logo,
img.t-Login-logo[data-app-icon] {
  --ut-app-icon-background-color: transparent;
  --ut-login-logo-border-radius: 0;
  background-color: transparent;
  border-radius: 0;
  height: 150px;
  width: auto;
  max-width: 80%;
  margin-inline: auto;
  display: block;
}

/* Os filetes da marca fecham o topo do cartao, como no site e no card do
   Instagram -- e o que diz "esta tela e a mesma casa" antes de o logotipo
   sequer carregar. */
.t-Login-containerHeader {
  border-top: 4px solid transparent;
  border-image: linear-gradient(
      to right,
      var(--lg-verde) 0 25%,
      var(--lg-amarelo) 25% 50%,
      var(--lg-vermelho) 50% 75%,
      var(--lg-laranja) 75% 100%
    ) 1;
}

/* --------------------------------------------------------------- utilidades */

.lg-largura {
  max-width: var(--lg-largura);
  margin-inline: auto;
}

/* Filetes da marca — verde, amarelo, vermelho, laranja — como no topo e no pé
   do card do Instagram. Usar em <div class="lg-filetes"></div>. */
.lg-filetes {
  height: 6px;
  background: linear-gradient(
    to right,
    var(--lg-verde) 0 25%,
    var(--lg-amarelo) 25% 50%,
    var(--lg-vermelho) 50% 75%,
    var(--lg-laranja) 75% 100%
  );
}

/* ==========================================================================
   App 200 — cadastro público do cuteleiro
   --------------------------------------------------------------------------
   Classes emitidas por PKG_FORM_PUBLICO.CAMPO_HTML (lg-pergunta*, lg-opcao*)
   e pelas regiões estáticas das páginas 1 a 6. Mexer nos nomes aqui exige
   mexer no pacote — os dois lados combinam por convenção, não por contrato.
   ========================================================================== */

.lg-abertura h1 {
  font-family: var(--lg-fonte-titulo);
  font-size: 1.9rem;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.lg-abertura p,
.lg-explicacao p,
.lg-obrigado p,
.lg-vazio p,
.lg-intro {
  font-family: var(--lg-fonte-corpo);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 0.85rem;
}

.lg-termo {
  font-family: var(--lg-fonte-corpo);
  font-size: 0.9rem;
  line-height: 1.55;
  max-height: 22rem;
  overflow-y: auto;
}

.lg-progresso {
  font-family: var(--lg-fonte-titulo);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  margin: 0 0 0.35rem;
}

.lg-progresso-nota {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.85;
}

/* O relatório das perguntas é uma lista, não uma tabela: o cabeçalho de coluna
   e as bordas da grade só atrapalham quem está respondendo. */
#lg-perguntas table,
#lg-perguntas tbody,
#lg-perguntas tr,
#lg-perguntas td {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
}

#lg-perguntas thead {
  display: none;
}

.lg-pergunta {
  padding: 1.1rem 0 1.3rem;
  border-bottom: 1px solid var(--lg-borda);
}

.lg-pergunta-cabeca {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.lg-pergunta-num {
  font-family: var(--lg-fonte-titulo);
  color: var(--lg-laranja);
  font-size: 0.95rem;
  min-width: 1.6rem;
}

.lg-pergunta-texto {
  font-family: var(--lg-fonte-corpo);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
}

/* A ajuda é o texto entre parênteses do questionário — é ela que faz a pessoa
   responder sem medo. Discreta, mas nunca escondida. */
.lg-pergunta-ajuda {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.8;
  margin: 0 0 0.6rem 2.2rem;
}

.lg-pergunta-campo {
  margin-left: 2.2rem;
}

.lg-pergunta-audio,
.lg-arquivo-dica {
  font-size: 0.85rem;
  opacity: 0.75;
  margin: 0.4rem 0 0 2.2rem;
}

.lg-pergunta-anexos {
  margin: 0.5rem 0 0 2.2rem;
  padding-left: 1rem;
  font-size: 0.85rem;
}

.lg-textarea,
.lg-text,
.lg-select {
  width: 100%;
  max-width: 46rem;
  font-family: var(--lg-fonte-corpo);
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: var(--lg-raio);
}

.lg-textarea {
  min-height: 7rem;
  line-height: 1.55;
}

.lg-opcao {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.lg-opcao label,
.lg-opcao-texto {
  font-size: 0.98rem;
  cursor: pointer;
}

/* CAMPO ISCA (P2_ISCA, na página do cadastro). Ele tem de sair da tela sem sair
   do HTML: robô de formulário preenche todo campo que encontra, e é isso que o
   processo "Criar cadastro" usa para descartar a submissão. O template Hidden do
   item esconde só o RÓTULO — sem esta regra o campo aparecia na tela como uma
   caixa larga sem legenda embaixo de "Site", e quem se cadastra digitava nela.
   Não é display:none de propósito: campo com display:none é justamente o que os
   robôs aprenderam a pular, e fora da tela eles continuam preenchendo. */
#P2_ISCA_CONTAINER {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* O PEDIDO DE ARQUIVOS (página dos arquivos). Diz o que a gente gostaria de
   receber e o que já chegou. NADA aqui é obrigatório — o cadastro fecha sem
   nenhuma foto. O que a lista faz é pedir com número na frente: "duas fotos de
   faca" é pedido que a pessoa consegue medir, "manda umas fotos" não é. */
.lg-pedido {
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.lg-pedido li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.98rem;
  line-height: 1.5;
}

.lg-pedido-marca {
  font-family: var(--lg-fonte-titulo);
  min-width: 1.4rem;
}

.lg-pedido-ok .lg-pedido-marca {
  color: var(--lg-laranja);
}

.lg-pedido-falta {
  opacity: 0.85;
}

.lg-pedido-nota {
  font-size: 0.9rem;
  margin: 0 0 0.6rem;
  opacity: 0.85;
}

/* BOTÕES NO CELULAR. A barra de ações do Universal Theme é um GRID de três
   colunas (esquerda / meio / direita) que não quebra sozinho: na tela de
   arquivos os três botões somam 434px de largura, e num telefone de 390px eles
   não cabem — foi o que apareceu navegando pelo celular. Aqui embaixo a barra
   passa a empilhar, com cada botão ocupando a linha inteira.

   A ORDEM INVERTE de propósito: empilhado, a ação principal fica em cima e o
   "voltar" por último, que é a ordem em que o dedo procura. Vale para todas as
   telas, porque o questionário tem QUATRO botões na mesma barra e sofre do
   mesmo jeito — só ninguém tinha chegado ao fim dele no celular ainda. */
@media (max-width: 40rem) {
  /* O QUE MANDA AQUI E grid-template-areas, NAO grid-template-columns.
     Duas tentativas se perderam nisso: o Universal Theme declara
     `grid-template-areas: "button-left button-content button-right"`, e enquanto
     as tres areas estiverem numa linha o grid recria as tres colunas — nem
     `grid-template-columns: 1fr` nem `!important` mudam isso, porque a contagem
     de colunas vem das AREAS. Medido: 690px de botao em 500px de tela, com a
     regra carregada e ignorada.
     As areas aqui servem SO para forcar uma coluna. Elas nao reordenam nada: o
     tema NAO coloca os filhos por `grid-area` (medido: `grid-area: auto` nos
     tres), eles caem em posicionamento automatico, na ordem do codigo. Entao o
     empilhado sai voltar -> enviar, e fica assim de proposito: no celular o
     dedo descansa embaixo, e a acao que fecha a tela ser a ultima e o alcance
     natural. Quem quiser inverter mexe com `order` nos `--left`/`--right`, nao
     nas areas. */
  .t-ButtonRegion .t-ButtonRegion-wrap {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "button-right"
      "button-content"
      "button-left" !important;
    row-gap: 0.5rem;
  }

  /* A coluna do meio nasce vazia nesta app e só adicionaria espaço morto. */
  .t-ButtonRegion-col--content {
    display: none;
  }

  .t-ButtonRegion-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .t-ButtonRegion .t-Button {
    width: 100%;
    margin: 0;
    justify-content: center;
  }

  /* A LISTA DE ARQUIVOS ROLA DE LADO. Medido no celular: a tabela tem 525px e o
     espaco tem 450px, com overflow-x: visible — ou seja, a ultima coluna
     (Excluir) fica INALCANCAVEL, nao apenas apertada. Rolagem horizontal e o
     conserto que nao esconde informacao: quem precisa apagar um arquivo desliza
     e chega na lixeira. */
  .t-Report-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* A NOTA DO PROTOCOLO. Ele deixou de ser a identidade do cuteleiro — quem
   identifica e o WhatsApp (CADASTRO_UK_ZAP) — e virou numero de inscricao.
   Entao ele continua na tela, mas em segundo plano: pedir para alguem anotar um
   codigo que nao precisa mais e trabalho inutil que a pessoa faz por educacao. */
.lg-protocolo-nota {
  font-size: 0.92rem;
  opacity: 0.8;
}

/* O COMPONENTE DE ARQUIVO DO APEX VEM PINTADO PARA TEMA CLARO, e num tema
   carvão isso não é "meio apagado": é invisível. Medido na tela, antes:

     .a-FileDrop-heading ....... rgb(0, 0, 0)          preto puro
     .a-FileDrop-description ... rgba(0, 0, 0, 0.65)
     .a-FileDrop-icon .......... rgba(0, 0, 0, 0.65)
     .a-FileDrop-remove ........ rgb(22, 21, 19)       quase-preto
     borda do dropzone ......... rgba(22, 21, 19, 0.5)

   Ou seja: "Arrastar e Soltar" e a instrução não apareciam, e o único elemento
   legível era o botão "Escolher Arquivo" — que já vinha com texto claro.

   E o HEADING é o mesmo elemento nos dois estados: vazio ele diz "Arrastar e
   Soltar", com arquivo escolhido ele diz o NOME DO ARQUIVO. Preto puro ali é o
   motivo de a pessoa escolher a foto e não ver que escolheu. As duas queixas
   tinham uma causa só. */
.a-FileDrop--dropzone {
  background: var(--lg-carvao);
  border-color: var(--lg-borda);
}

.a-FileDrop-heading {
  color: var(--lg-texto);
}

.a-FileDrop-description,
.a-FileDrop-icon {
  color: var(--lg-texto-suave);
}

.a-FileDrop-remove {
  color: var(--lg-texto);
  background: var(--lg-carvao-3);
  border-color: var(--lg-borda);
}

/* ESCOLHIDO TEM DE SE VER DE LONGE. O APEX marca o estado com a classe
   `has-files` no dropzone — então o aviso não precisa de texto novo nem de
   JavaScript: a moldura acende no laranja da marca e o nome do arquivo vem na
   mesma cor. Quem está de pé na oficina, com o celular na mão, vê a moldura
   mudar antes de ler qualquer coisa. */
.a-FileDrop--dropzone.has-files {
  background: var(--lg-carvao-2);
  border-color: var(--lg-laranja);
}

.a-FileDrop--dropzone.has-files .a-FileDrop-heading,
.a-FileDrop--dropzone.has-files .a-FileDrop-icon {
  color: var(--lg-laranja);
}

/* ── Prévia da foto escolhida (tela de anexos) ──────────────────────────────
   Aparece entre o campo de arquivo e os campos de autoria, e some sozinha
   quando o arquivo não é imagem. O teto de altura é o que impede uma foto de
   celular em pé de empurrar o botão de enviar para fora da tela no telefone. */
.lg-previa {
  margin: .75rem 0 1.25rem;
}

.lg-previa__rotulo {
  font-family: var(--fonte-titulo, 'Oswald', sans-serif);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave, #b8ada1);
  margin: 0 0 .5rem;
}

.lg-previa__img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  border-radius: var(--raio, 4px);
  border: 1px solid var(--borda, #3a322c);
  object-fit: contain;
}

/* ─── Fotos na tela de aprovação ────────────────────────────────────────────
   O termo que ele aceita promete "as fotos que você enviou, COM AS LEGENDAS
   QUE APARECEM NESTA REVISÃO" — e até 26/08/2026 a tela não mostrava foto
   nenhuma. Ele autorizava o uso de imagens que não estava vendo.
   O retrato vem primeiro e maior porque é ele que abre a página; as peças
   vêm em grade, na ordem em que ele mandou.                                  */

.lg-fotos {
  display: grid;
  gap: 1.25rem;
}

.lg-fotos__figura {
  margin: 0;
  background: var(--lg-carvao-2, #1e1a17);
  border: 1px solid var(--lg-borda, #3a322c);
  border-radius: var(--lg-raio, 4px);
  overflow: hidden;
}

.lg-fotos__img {
  display: block;
  width: 100%;
  height: auto;
  /* Fotos de celular chegam em pé e com 3 mil pixels de altura: sem o teto,
     uma foto sozinha empurra o termo e os botões para fora da tela. */
  max-height: 460px;
  object-fit: contain;
  background: #000;
}

.lg-fotos__legenda {
  padding: .6rem .8rem;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--lg-texto-suave, #b8ada1);
}

.lg-fotos__marca {
  display: block;
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lg-laranja, #ff6d00);
  margin-bottom: .2rem;
}

.lg-fotos__sem {
  color: var(--lg-texto-fraco, #8a7f74);
  font-style: italic;
}

/* Da segunda foto em diante, duas por linha em tela larga. O retrato fica
   sozinho na primeira linha de propósito: é o que abre a página dele. */
@media (min-width: 44rem) {
  .lg-fotos__resto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

/* O clique na foto abre o original; o link não pode parecer texto. */
.lg-fotos__link {
  display: block;
  line-height: 0;
}

.lg-fotos__link:focus-visible {
  outline: 2px solid var(--lg-laranja, #ff6d00);
  outline-offset: -2px;
}

/* ─── Prévia da página, na tela "minha página" ──────────────────────────────
   O cuteleiro precisa ver COMO VAI FICAR antes de dizer o que mudar. Isto
   imita a página do site — retrato no topo, texto, galeria, ficha ao lado —
   com a mesma paleta, para ele reconhecer o que está olhando. Não é um clone
   pixel a pixel: é o suficiente para a decisão dele ser informada.          */

.lg-pv {
  display: grid;
  gap: 1.75rem;
}

/* ── topo: retrato + nome ── */
.lg-pv__topo {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.lg-pv__retrato {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--lg-borda, #3a322c);
  background: #000;
  flex: none;
}

.lg-pv__nome {
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
  line-height: 1.1;
}

.lg-pv__cutelaria {
  margin: .15rem 0 0;
  color: var(--lg-laranja, #ff6d00);
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .8rem;
}

.lg-pv__onde {
  margin: .3rem 0 0;
  color: var(--lg-texto-suave, #b8ada1);
  font-size: .92rem;
}

/* ── galeria ── */
.lg-pv__titulo {
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .82rem;
  color: var(--lg-laranja, #ff6d00);
  margin: 0 0 .75rem;
}

.lg-pv__galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}

.lg-pv__galeria figure {
  margin: 0;
  background: var(--lg-carvao-2, #1e1a17);
  border: 1px solid var(--lg-borda, #3a322c);
  border-radius: var(--lg-raio, 4px);
  overflow: hidden;
}

.lg-pv__galeria img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: #000;
}

/* FOTO DEITADA NA GALERIA. `transform` gira o DESENHO e nao a CAIXA: a
   moldura continua deitada (190px de altura por largura fluida) e a foto
   girada vazaria por cima do vizinho. Entao a imagem deitada passa a ocupar
   um quadrado do tamanho da altura da caixa -- quadrado girado continua
   quadrado -- e fica centrada. Sai um pouco menor que as outras, e e o preco
   de mostrar a faca em pe sem recortar o que importa.
   O retrato (108x108) e o item da lista de legendas (96x96) nao precisam
   disto: a caixa deles ja e quadrada. */
.lg-pv__galeria img.lg-gira-90,
.lg-pv__galeria img.lg-gira-270 {
  width: 190px;
  height: 190px;
  margin: 0 auto;
}

.lg-pv__galeria figcaption {
  padding: .55rem .7rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--lg-texto-suave, #b8ada1);
}

/* ── ficha ── */
.lg-pv__ficha {
  background: var(--lg-carvao-2, #1e1a17);
  border: 1px solid var(--lg-borda, #3a322c);
  border-radius: var(--lg-raio, 4px);
  padding: 1.25rem;
}

.lg-pv__ficha dl {
  margin: 0;
  display: grid;
  gap: .1rem;
}

.lg-pv__ficha dt {
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .72rem;
  color: var(--lg-laranja, #ff6d00);
  margin-top: .85rem;
}

.lg-pv__ficha dd {
  margin: .15rem 0 0;
  color: var(--lg-texto, #f2ece5);
}

/* A placa do logo é a mesma ideia da ficha do site e da página de parceiros:
   arte feita para fundo branco SOME no carvão, e quem sabe qual é o caso é o
   LOGO_PARA do anexo — não o CSS. */
.lg-pv__logo {
  display: grid;
  place-items: center;
  padding: .9rem;
  border-radius: var(--lg-raio, 4px);
  margin-bottom: 1rem;
}
.lg-pv__logo--fundo-escuro { background: var(--lg-carvao-3, #2b2521); }
.lg-pv__logo--fundo-claro  { background: #ffffff; }
.lg-pv__logo img {
  width: 100%;
  height: auto;
  max-height: 6.5rem;
  object-fit: contain;
}

/* Em tela larga, ficha ao lado do texto — como no site. */
@media (min-width: 52rem) {
  .lg-pv {
    grid-template-columns: minmax(0, 1fr) 17rem;
    align-items: start;
  }
  .lg-pv__topo,
  .lg-pv__corpo,
  .lg-pv__titulo,
  .lg-pv__galeria { grid-column: 1; }
  .lg-pv__ficha {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: 1rem;
  }
}

/* ─── Edição das legendas, na tela "minha página" ───────────────────────────
   A foto ao lado do campo não é enfeite: legenda escrita sem ver a foto vira
   legenda trocada — e com três facas parecidas isso acontece. Cada campo fica
   grudado na imagem a que pertence.                                          */

.lg-leg {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0 0 1rem;
  padding: .85rem;
  background: var(--lg-carvao-2, #1e1a17);
  border: 1px solid var(--lg-borda, #3a322c);
  border-radius: var(--lg-raio, 4px);
}

.lg-leg__foto {
  width: 96px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-radius: var(--lg-raio, 4px);
  background: #000;
}

.lg-leg__campo {
  flex: 1 1 auto;
  min-width: 0;
}

.lg-leg__marca {
  display: block;
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lg-laranja, #ff6d00);
  margin-bottom: .35rem;
}

.lg-leg__texto {
  width: 100%;
  resize: vertical;
}

/* O report que hospeda os cartões não deve parecer tabela. */
.lg-leg-lista .t-Report-cell,
.lg-leg-lista .t-Report-colHead { padding: 0; border: 0; }

/* ─── Questionário numa página só: a barra de ações gruda no rodapé ─────────
   Com os blocos, "salvar" estava sempre a uma tela de distância. Numa página
   longa ele ficaria lá no fim — e quem precisa parar no meio (o ônibus
   chegou, o cliente ligou) não vai rolar até o fim para achar o botão: vai
   fechar a aba. Grudar a barra é o que faz "pode parar quando quiser" ser
   verdade, e não só uma frase.                                              */

.lg-acoes-fixas {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--lg-carvao, #14110f);
  border-top: 1px solid var(--lg-borda, #3a322c);
  /* Respeita a faixa do iPhone, senão o botão fica sob o indicador. */
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* O título de cada bloco, agora dentro da lista de perguntas. */
.lg-secao {
  font-family: var(--lg-fonte-titulo, 'Oswald', sans-serif);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .95rem;
  color: var(--lg-laranja, #ff6d00);
  margin: 2.25rem 0 .25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--lg-borda, #3a322c);
}
.lg-secao:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.lg-progresso-nota--calma {
  color: var(--lg-texto, #f2ece5);
}

/* "O tamanho da sua resposta vira o tamanho da sua pagina" (30/08/2026).
   Nasceu de uma medicao, nao de palpite: dos cinco cuteleiros cadastrados,
   os dois ultimos escreveram em media 33 e 38 caracteres por resposta,
   contra 336 do Mauricio Dalcin. A pagina da IA sai pobre porque a
   materia-prima e pobre -- e a IA nao pode encher, porque nao inventa.
   Pedir mais AQUI e o unico jeito honesto de melhorar a pagina.
   Laranja e nao cinza: e convite, e convite que ninguem le nao convida. */
.lg-progresso-nota--conta {
  color: var(--lg-texto, #f2ece5);
  border-left: 3px solid var(--lg-laranja, #ff6d00);
  padding-left: .85rem;
  margin-top: .9rem;
}

/* A nota que substitui o campo no retrato. */
.lg-leg__nota {
  display: block;
  color: var(--lg-texto-suave, #b8ada1);
  font-size: .9rem;
  line-height: 1.45;
}

/* ─── Interactive Report no tema carvão ─────────────────────────────────────
   O widget do IR (a-IRR) NÃO herda o escuro da região: ele colore fundo,
   toolbar, cabeçalho, linhas e busca por VARIÁVEIS próprias (--a-gv-*,
   --a-toolbar-*, --a-field-input-*) que o theme style Iris define como
   branco no :root. Foi por isso que Cuteleiros e Provedores de IA saíram
   como um painel branco dentro da região escura — com o texto pálido do
   carvão por cima, ilegível — enquanto os classic reports (que herdam tudo
   da .t-Region) já nasciam certos.

   AS VARIÁVEIS SE ANCORAM EM .a-IRR-container, NÃO NO TEMPLATE DA REGIÃO.
   Primeira tentativa foi em .t-IRR-region e não pegou: as páginas deste app
   declaram o IR com template @/standard, que vira .t-Region — .t-IRR-region
   só existe quando se usa o template "Interactive Report". O wrapper
   .a-IRR-container é do próprio widget e existe SEMPRE, seja qual for o
   template da região.

   O escopo é estreito de propósito: os menus e diálogos do IR (Ações,
   filtro, ordenação) são anexados ao <body>, fora do container, e ficam com
   o visual claro do tema — superfície flutuante clara sobre página escura é
   legível e não vale o custo de re-pintar cada diálogo.

   Duas cores o Iris grava FIXAS na regra (#fafafa no cabeçalho, #fff no
   hover), onde variável não alcança — daí as regras literais no fim. Este
   arquivo é o último CSS da página, então empata em especificidade e vence
   pela ordem. */

/* O shell, quando a região usa o template dedicado de IR. */
.t-IRR-region {
  background: var(--lg-carvao-2);
  border: 1px solid var(--lg-borda);
  border-radius: var(--lg-raio);
  color: var(--lg-texto);
}

.t-IRR-region,
.a-IRR-container {
  --a-gv-background-color: var(--lg-carvao-2);
  --a-gv-border-color: var(--lg-borda);
  --a-gv-cell-border-color: var(--lg-borda);
  --a-gv-header-background-color: var(--lg-carvao-3);
  --a-gv-header-cell-border-color: var(--lg-borda);
  --a-gv-row-hover-background-color: var(--lg-carvao-3);
  --a-gv-nodata-message-text-color: var(--lg-texto-suave);
  --a-gv-pagination-button-text-color: var(--lg-texto);

  --a-toolbar-background-color: var(--lg-carvao-2);
  --a-toolbar-border-color: var(--lg-borda);
  --a-toolbar-sep-border-color: var(--lg-borda);

  /* A caixa de busca e os botões da toolbar (Ações, lupa) não são .t-Button:
     usam as variáveis de campo e de botão do widget, que o Iris deixa com
     texto quase-preto — invisível sobre o carvão. */
  --a-field-input-background-color: var(--lg-carvao);
  --a-field-input-text-color: var(--lg-texto);
  --a-field-input-border-color: var(--lg-borda);
  --a-field-input-focus-background-color: var(--lg-carvao);
  --a-field-input-focus-text-color: var(--lg-texto);
  --a-field-input-focus-border-color: var(--lg-laranja);
  --a-button-text-color: var(--lg-texto);

  /* As pastilhas de filtro/busca ativas (linha abaixo da toolbar). */
  --a-report-controls-border-color: var(--lg-borda);
  --a-report-controls-cell-label-background-color: var(--lg-carvao-3);
  --a-report-controls-cell-label-text-color: var(--lg-texto);
  --a-report-controls-cell-label-hover-background-color: var(--lg-borda);
}

/* As cores que o Iris grava direto na regra, fora do alcance das variáveis. */
.a-IRR-header,
.a-IRR-header--group,
.a-IRR-header--group:hover {
  background-color: var(--lg-carvao-3);
}

.a-IRR-header:hover,
.a-IRR-header.is-active {
  background-color: var(--lg-borda);
  /* O is-active também força a cor do texto pela variável do menu (quase-
     preto); sem esta linha o rótulo some no exato momento do clique. */
  color: var(--lg-texto);
}

.a-IRR-headerLink {
  color: var(--lg-texto);
}

.a-IRR-button.a-IRR-button--controls {
  background-color: var(--lg-carvao-3);
  color: var(--lg-texto);
}

/* ─── Classic report no MESMO padrão do IR ──────────────────────────────────
   O cabeçalho do classic report vem de --ut-region-header-background-color,
   que o Iris define como #fff — a mesma família de problema do IR acima, só
   que aqui uma faixa branca atrás dos títulos em vez do painel inteiro. E os
   títulos ficavam LARANJA porque coluna ordenável é um <a>, e o a global
   deste arquivo é laranja: certo para link no texto, errado para título de
   coluna. O padrão da casa é o da tela de Cuteleiros: faixa carvão-3,
   título claro, linhas na cor da borda do tema. */

.t-Report {
  --ut-report-header-cell-background-color: var(--lg-carvao-3);
  --ut-report-cell-border-color: var(--lg-borda);
  --ut-report-cell-hover-background-color: var(--lg-carvao-3);
  --ut-report-cell-alt-background-color: rgba(255, 255, 255, .03);
}

.t-Report-colHead,
.t-Report-colHead a,
.t-Report-colHead a:hover {
  color: var(--lg-texto);
}

/* ─────────────────────────────────────────────────────────────────────────
   AVISO DE CAMPO — o recado que aparece embaixo do Site e do Instagram
   quando o que foi digitado não tem cara de endereço, ou quando o domínio
   não responde.

   AMARELO E NÃO VERMELHO, de propósito. Vermelho é a cor do erro que
   IMPEDE, e aqui nada impede: o cadastro segue mesmo com o aviso na tela.
   Um site fora do ar naquele minuto, um domínio recém-registrado que ainda
   não propagou, a rede do celular oscilando — qualquer um faz a verificação
   falhar sobre um endereço certo. Pintar isso de vermelho ensinaria o
   cuteleiro a desconfiar do próprio dado correto.
   ───────────────────────────────────────────────────────────────────────── */
.lg-aviso-campo {
  margin: .4rem 0 0;
  padding: .45rem .7rem;
  font-size: .85rem;
  line-height: 1.45;
  color: #f2ece5;
  background: rgba(255, 109, 0, .10);
  border-left: 3px solid #ff6d00;
  border-radius: 3px;
}

/* O link "confira se é o seu" embaixo do Instagram. Discreto de propósito:
   é um convite, não um alerta -- não há nada errado com o campo. Por isso
   não usa a faixa laranja do .lg-aviso-campo, que é para o que precisa de
   atenção. */
.lg-conferir-campo {
  margin: .35rem 0 0;
  font-size: .82rem;
  color: #8a7f74;
}
.lg-conferir-campo a { color: #ff6d00; }