/* ==========================================================================
   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);
}

.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);
}

/* --------------------------------------------------------------- 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);
}

/* ==========================================================================
   Tela de login (app 300, administração)
   --------------------------------------------------------------------------
   O template de login do Universal Theme põe o TÍTULO DA REGIÃO logo abaixo
   da imagem — e como a região se chama "Lâmina Gaúcha", a marca aparecia duas
   vezes: desenhada e escrita. Some o texto e fica só o logotipo, maior.

   O seletor é `img.t-Login-logo` e não `.t-Login-logo` porque a classe está
   em DOIS elementos (um IMG e um SPAN vazio) — sem o `img` o span também
   ganharia largura e abriria um buraco no card.
   ========================================================================== */
.t-Login-title {
  display: none;
}

img.t-Login-logo {
  width: min(280px, 78%);
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0.5rem auto 1.5rem;
  display: block;

  /* O Universal Theme pinta um FUNDO AZUL (#00688C) nesse elemento — serve
     para quando o "logo" é um monograma de duas letras. Com a marca em PNG
     transparente por cima, o azul aparecia atrás das letras e virava um
     cartão dentro do cartão. Não era do arquivo: era daqui. */
  background: transparent;
  border-radius: 0;
}