/* ===========================================
   DESIGN TOKENS (Variáveis Globais)
   ======================================== */
:root {
  /* Cores principais */
  --p-green: #184e1b;           /* Verde-Floresta Profundo — tom dos focos do bloqueio desktop */
  --p-green-rgb: 24, 78, 27;    /* mesmos canais do --p-green p/ rgba() — anéis de foco, brilhos radiais, pulso do pino */
  --p-green-dark: #0a1f0b;      /* mesmo matiz, quase preto — também é o fundo do bloqueio desktop */
  --p-green-dark-rgb: 10, 31, 11; /* mesmos canais do --p-green-dark p/ rgba() — véus/gradientes escuros do feed */
  --p-green-light: #dde9dd;     /* tint claro no mesmo matiz */

  /* Cores de destaque */
  --a-gold: #e0a81c;            /* Amarelo-Ouro Vivo — mais saturado, evita aparência inativa */
  --a-gold-rgb: 224, 168, 28;  /* mesmos canais do --a-gold p/ rgba() — brilhos/anéis dourados (tutorial, toggles) */
  --a-gold-hover: #c89210;
  --a-gold-text: #a87808;       /* ocre mais escuro p/ TEXTO colorido */
  --info-blue: #2e5898;         /* Azul-Cobalto Metálico escuro — cor de SELEÇÃO/estado ativo */
  --info-blue-light: #dee5f2;   /* tint claro no mesmo matiz (paralelo a --p-green-light) */
  --info-blue-bright: #7aa3de;  /* azul claro p/ indicadores PEQUENOS sobre verde escuro (dots) */
  --gold-soft: #fdf8ee;         /* fundo creme (gatilho Pro) */
  --gold-soft-border: #f3e8c0;  /* borda das células Pro do comparativo */
  --whatsapp: #25D366;          /* verde oficial do botão WhatsApp */

  /* Estados semânticos — vermelho (perigo/erro), verde (sucesso), laranja (atenção) */
  --danger: #e53935;             /* denunciar, cancelar câmera, bordas de erro */
  --danger-rgb: 229, 57, 53;     /* canais do --danger p/ rgba() (glow de erro) */
  --danger-hover: #b71c1c;       /* vermelho pressionado */
  --danger-text: #c62828;        /* texto de alerta (IC baixo) */
  --danger-soft: #f9dcdc;        /* fundo de erro / tint da badge "Cancelado": tom
                                    de vermelho suave mas visível, em paridade com
                                    --p-green-light e --info-blue-light (antes #fff5f5
                                    ficava lavado demais na badge e nos campos de erro) */
  --success: #2c6e42;            /* confirmar foto, texto verde positivo */
  --success-fill: #3d8a58;       /* preenchimento de barra "bom" / ponto de status */
  --warn-text: #f57c00;          /* laranja claro do IC (faixa alerta) — distinto do vermelho */

  /* Superfícies específicas */
  --camera-bg: #111111;          /* fundo da área da câmera */
  --surface-company: #555558;    /* faixa de empresa nos cards de vaga */
  --surface-dark: #1c1c1e;       /* superfície escura (botão primário alternativo) */

  /* Fundos */
  --bg-white: #FFFFFF;
  --bg-soft: #F2F4F3;
  --bg-input: #ECEEED;
  --bg-canvas: #124014; /* verde ligeiramente mais escuro que --p-green — fundo das listas, atrás dos cards */

  /* Bordas */
  --border-light: #D4D8D5;
  --border-mid: #B0B8B2;

  /* Tipografia */
  --t-main: #1c2a30;            /* Cinza-Petróleo Suave — mais legível que preto puro */
  --t-sub: #5A6360;
  --t-light: #FFFFFF;
  --t-disabled: #B8BFBC;

  /* Escala tipográfica — do menor ao maior (px aproximado @16px root).
     Todo font-size de TEXTO usa um token; exceções: clamp() responsivos
     e os ícones do sprite SVG (font-size dimensiona o glifo, não texto). */
  --fs-1: 0.6rem;    /* ~10px — micro-rótulos: tabs, QAV, badges */
  --fs-2: 0.7rem;    /* ~11px — meta de cards, labels pequenos */
  --fs-3: 0.75rem;   /*  12px — hints, legal, timestamps */
  --fs-4: 0.8rem;    /* ~13px — bio, tags, células de comparativo */
  --fs-5: 0.85rem;   /* ~14px — labels de form, chips, botões compactos */
  --fs-6: 0.9rem;    /* ~14px — busca, botões de card, barras de serviço */
  --fs-7: 0.95rem;   /* ~15px — corpo: posts, nomes, subtítulos */
  --fs-8: 1rem;      /*  16px — inputs e botões (≥16px evita zoom iOS) */
  --fs-9: 1.1rem;    /* ~18px — títulos de painel/sheet, botão grande */
  --fs-10: 1.2rem;   /* ~19px — marca, títulos de confirmação */
  --fs-11: 1.3rem;   /* ~21px — título de diálogo */
  --fs-12: 1.5rem;   /*  24px — título de tela, dígitos OTP */
  --fs-13: 2.2rem;   /* ~35px — hero (título auth / bloqueio desktop) */

  /* Raios */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;             /* topo arredondado dos bottom-sheets (agenda, indicados, pedido) */
  --radius-pill: 28px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.13);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);    /* contato curto e definido (ex.: fita "salvo" girada) */
  --shadow-up: 0 -4px 12px rgba(0, 0, 0, 0.07);  /* sombra p/ CIMA — rodapé flutuante do verso da vaga */

  /* Destaque de estado por MUDANÇA DE COR, nunca por sombra (sombras de destaque
     furavam bordas e viravam linha sólida). SEMÂNTICA DE CORES (v262):
     AMARELO (--a-gold) = APENAS botões de AÇÃO (CTAs, links sobre verde).
     AZUL (--info-blue) = SELEÇÃO/estado ativo, em dois tons por contraste:
       sobre superfície CLARA → fundo --info-blue-light + texto --info-blue;
       sobre superfície VERDE ESCURA → fundo --info-blue sólido + texto --t-light;
       indicadores minúsculos sobre verde (dots) → --info-blue-bright.
     FOCO de input (transitório, não é seleção) segue --p-green-light; erro usa
     --danger-soft no fundo. Não há mais tokens de anel (--focus-ring/--ring-*). */

  /* Fill translúcido claro para CARDS sobre o verde (pedido/histórico): sem
     borda, a definição vem do contraste deste fundo com o --bg-canvas escuro
     (sombra escura não aparece sobre verde). */
  --card-on-green: rgba(var(--on-green-rgb), 0.08);

  /* Escala de toque padrão dos botões (feedback de :active). --subtle para alvos
     GRANDES (cards, linhas), onde um scale forte pareceria exagerado. Alvos
     pequenos/precisos (ícone de excluir, stepper) mantêm scales próprios mais fortes. */
  --press-scale: 0.97;
  --press-scale-subtle: 0.99;

  /* Pesos de fonte. NOTA: a Inter é carregada só em 400/600/800 (index.html);
     --fw-bold (700) renderiza de fato com a face 800 — trocar 700 cru por este
     token é byte-idêntico no render. */
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;
  --fw-heavy: 800;

  /* Overlays (backdrops de diálogos, sheets e painéis) */
  --overlay-rgb: 3, 32, 4;      /* verde-quase-preto dos backdrops — canal único p/ rgba() */
  --overlay: rgba(var(--overlay-rgb), 0.45);
  --overlay-soft: rgba(var(--overlay-rgb), 0.35);

  /* Branco translúcido sobre superfícies verdes (bordas/fundos/textos "on-green").
     Canal + escala harmonizada de opacidade (6 degraus) — usar os tokens
     semânticos em vez de alphas soltos. faint/soft = bordas e fundos sutis;
     muted/med = fundos e textos secundários; strong/solid = textos legíveis. */
  --on-green-rgb: 255, 255, 255;
  --on-green-faint:  rgba(var(--on-green-rgb), 0.15);
  --on-green-soft:   rgba(var(--on-green-rgb), 0.26);
  --on-green-muted:  rgba(var(--on-green-rgb), 0.35);
  --on-green-med:    rgba(var(--on-green-rgb), 0.5);
  --on-green-strong: rgba(var(--on-green-rgb), 0.7);
  --on-green-solid:  rgba(var(--on-green-rgb), 0.9);

  /* Blur de backdrop (véus de diálogos/sheets/faixas). O tutorial mantém o
     blur(1.5px) próprio, sutil de propósito. */
  --blur-sm: 5px;
  --blur-lg: 14px;

  /* Thumb da barra de rolagem fina sobre superfícies CLARAS (versos de card,
     corpos das gavetas claras) — verde-escuro translúcido. Sobre superfícies
     VERDES usa-se --on-green-muted (claro). Token único: o valor se repetia 8×. */
  --scroll-thumb-dark: rgba(var(--p-green-dark-rgb), 0.28);

  /* Curva de easing padrão dos sheets deslizantes (bottom-sheets e dropdowns).
     Fonte única do par pedido/histórico; agenda e indicados agora seguem a mesma. */
  --sheet-ease: cubic-bezier(0.3, 0.9, 0.7, 1);

  /* Fundo dos bloqueios de tela cheia (desktop e paisagem) — verde escuro com
     dois brilhos radiais. Token único: os dois blocos compartilhavam o mesmo
     gradiente copiado à mão. */
  --block-bg:
    radial-gradient(circle at 20% 30%, rgba(var(--p-green-rgb), 0.8) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(var(--overlay-rgb), 0.9) 0%, transparent 40%),
    linear-gradient(135deg, var(--p-green-dark) 0%, var(--p-green-dark) 100%);

  /* Transição padrão */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Curva de easing sozinha (sem propriedade/duração) — para transições de UMA
     propriedade específica. Compor `transition: color var(--transition)` gerava
     `color all 0.3s …` (lista inválida → declaração descartada, sem animação);
     usar `transition: color 0.3s var(--ease)`. É a MESMA curva de --transition. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Duração ÚNICA do crossfade da ZONA DO MEIO da action bar (troca de aba
     vagas/busca/pedidos E o overlay Sair/Editar do perfil — devem ser o MESMO
     fade). Fonte única; antes 0.22s (abas) e 0.25s (perfil) divergiam. */
  --fade-bar-zone: 0.22s;

  /* Fade ÚNICO dos backdrops (véus das gavetas/popups) — antes 0.45s cru 4×. */
  --fade-backdrop: 0.45s;

  /* Métricas de controle — antes literais repetidos (o acoplamento era por
     coincidência de número, não por token):
     --control-h  = altura/lado padrão dos CONTROLES COMPACTOS (botões/avatar/X
                    da action bar, busca, inputs de filtro, X de remover linha);
     --touch-min  = alvo de toque mínimo (padrão do .btn--icon e das abas). */
  --control-h: 40px;
  --touch-min: 44px;

  /* Barra de rolagem fina "sempre visível" (regra 9): largura + raio do thumb.
     A COR do thumb segue por contexto (--scroll-thumb-dark no claro,
     --on-green-muted no verde). */
  --scrollbar-w: 5px;
  --scrollbar-thumb-r: 4px;

  /* Respiro do fim das listas do feed p/ o conteúdo passar ACIMA dos controles
     flutuantes da bottom-bar — antes 100px cru 4×. */
  --bottombar-clearance: 100px;

  /* Raio dos cards-balão (pedido/histórico; um canto fica quase reto p/ o
     "rabinho" — o lado do canto varia por contexto). */
  --radius-balloon: 18px;

  /* ESCALA DE CAMADAS (z-index) — hierarquia macro nomeada; empilhamento
     INTERNO de componente (0/1/2/3) segue local. O loader do CSS crítico
     inline no <head> mantém 9999 cru (roda antes desta folha carregar). */
  --z-bar: 25;          /* bottom-bar flutuante do feed */
  --z-dropdown: 50;     /* autocomplete de área (onboarding) */
  --z-indicate: 200;    /* overlay do modo indicação */
  --z-sheet: 300;       /* gavetas/sheets/popup de indicados */
  --z-tutorial: 9500;   /* véu do tutorial (+1 p/ o balão) */
  --z-dialog: 9999;     /* véu dos diálogos (par do loader crítico) */
  --z-banner: 10000;    /* banner de atualização do PWA */
  --z-block: 99999;     /* bloqueios desktop/paisagem */

  /* Espaçamento */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 48px;
}


/* ===========================================
   RESET & BASE
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

html,
body.app-body {
  width: 100%;
  /* Cascata de fallback: vh (mais antigo) → dvh → --app-height (JS, mais confiável).
     A última declaração válida vence; em navegadores sem var()/dvh, cai para vh/dvh.
     É o que garante que a barra inferior do feed nunca vaze para fora da tela. */
  height: 100vh;
  height: 100dvh;
  height: var(--app-height, 100dvh);
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--app-height, 100dvh);
  /* Fundo VERDE, não branco: todo o app é verde (auth, onboarding, install,
     feed) e o splash nativo usa background_color verde do manifest. Se html/body
     ficassem brancos, qualquer frame em que o loader/tela verde ainda não pintou
     — fim do splash no Android, parse progressivo, bounce de overscroll no iOS,
     ou as laterais das telas (max-width:500px) em telas largas — vazaria branco.
     O <style> crítico inline no <head> já pinta o html de verde no 1º paint;
     esta regra (carregada depois) PRECISA manter o verde, senão reverteria o
     html para branco e recriaria o flash que o inline tentava evitar. */
  background-color: var(--p-green);
  color: var(--t-main);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* body como flex container — impede que .screen transborde a viewport.
   Essencial para PWA mobile: sem isso, height:100% em filhos pode ser
   maior que a área visível em iOS Safari com barra de URL visível. */
body.app-body {
  display: flex;
  flex-direction: column;
}

/* Proteção visual contra arrasto */
img, svg, button, a, span, div, .icon {
  -webkit-user-drag: none;
}

/* Liberação estrita para campos interativos */
input, textarea {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

/* Zera a BORDA DE UA dos controles de formulário. O app é borderless (definição
   por contraste/sombra); sem isto, ao remover a borda explícita de um <button>,
   reaparecia a borda padrão do navegador — em vários mobile um bevel `outset`
   BICOLOR (clara em cima/esquerda, escura embaixo/direita). Bordas funcionais
   ficam em elementos que NÃO são controle (avatar, caixa do checkbox, divisores),
   então não são afetadas. (Não há mais <select> nativo no app: os horários da
   vaga usam stepper próprio.) */
button, input, textarea {
  border: none;
}


/* ===========================================
   ÍCONES (sprite SVG — símbolos #ic-* no topo do <body>)
   .icon NÃO é mais uma fonte: é um <svg><use> do sprite. O
   nome da classe foi mantido para preservar a cascata das ~40 regras que
   dimensionam o ícone por `font-size` e o colorem por `color` — que seguem
   funcionando porque o SVG mede 1em×1em e usa `fill: currentColor`. Assim o ícone
   desenha no 1º paint, sem esperar download de fonte e SEM depender de rede
   (offline-safe no PWA). Troca de glifo em runtime: window.setIcon (core/app.js).
   ======================================== */
.icon {
  width: 1em;                 /* tamanho segue o font-size (herdado ou por regra) */
  height: 1em;
  font-size: 24px;            /* default do glifo (era o default da folha do Google) */
  fill: currentColor;         /* herda a cor via `color` das regras existentes */
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -0.15em;    /* assenta o ícone na linha de base do texto */
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.icon use { pointer-events: none; }


/* ===========================================
   ESTRUTURA DE TELAS (Roteamento Visual)

   Contrato de visibilidade:
   — Screens: controladas EXCLUSIVAMENTE por .screen--active
   — u-hidden NUNCA deve ser aplicado diretamente em .screen
   — u-hidden é reservado para sub-elementos internos

   Cadeia de altura: body(100dvh flex-col) → .screen--active(flex:1 min-h:0) → conteúdo interno
   flex:1 fica SÓ em .screen--active — se estiver no .screen base, duas telas
   transitando simultaneamente dividiriam o espaço pela metade (tela dividida).
   ======================================== */
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  /* Sem animação de entrada: a tela aparece opaca e imediata. Um translateY
     de entrada deixava uma tira do body (branco) aparecendo no topo por um
     instante antes de a tela subir e cobri-la; e um fade de opacidade deixava
     o body vazar no meio do fade-out do loader (flash claro). A transição
     entre telas fica por conta do fade-out do próprio loader. */
}

/* Padding padrão para telas com scroll livre (auth, onboarding).
   O fundo apenas iguala as laterais e respeita a safe-area — sem o excesso
   de 80px que deixava uma folga grande abaixo do botão final. */
#view-auth.screen,
#view-onboarding.screen,
#view-install.screen {
  padding: var(--space-lg) var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom, 0px));
}

.screen--active {
  display: flex;
  /* flex:1 + min-height:0 aqui — nunca no .screen base */
  flex: 1;
  min-height: 0;
}

.screen__header {
  width: 100%;
  margin-bottom: var(--space-lg);
  text-align: left;
}

/* Título e botão "Cancelar" na mesma linha (economiza altura) — título ocupa
   o espaço restante, alinhado à esquerda; o botão fica à direita, afastado do
   título e respeitando a margem direita da tela via o padding do próprio
   .screen. */
.screen__header-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.screen__header-nav .btn {
  flex-shrink: 0;
}

.screen__title {
  flex: 1;
  text-align: left;
  font-size: var(--fs-11);
  font-weight: var(--fw-heavy);
  color: var(--p-green-dark);
}



/* ===========================================
   UTILITY CLASSES
   ======================================== */

/* Ocultação universal — reservado para sub-elementos e overlays globais.
   NUNCA aplicar diretamente em .screen (use .screen--active). */
.u-hidden {
  display: none !important;
}

/* Fade-out do loader global */
.u-fade-out {
  opacity: 0;
  pointer-events: none;
}

.text-accent {
  color: var(--a-gold);
  font-weight: var(--fw-bold);
}


/* ===========================================
   ANIMAÇÕES
   ======================================== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dialogScaleUp {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ===========================================
   ACESSIBILIDADE
   ======================================== */

/* Painel de camada modal focado programaticamente (layerFocus, core/app.js):
   sem anel de foco — regra 5 do design system (estado nunca ganha anel). */
.pedido-sheet__panel:focus,
.historico-sheet__panel:focus,
.dialog-box:focus,
.indicated-popup__sheet:focus,
#btn-dialog-confirm:focus {
  outline: none;
}

/* Reduzir movimento (preferência do sistema): desliga SÓ as animações
   DECORATIVAS INFINITAS (pulsos/pisca). NÃO tocar nas transições funcionais
   (gavetas, painéis, flips): elas têm listeners de transitionend (moveGate/
   finalize) — sem transição o evento nunca dispara e a UI travaria. O spin
   de loading fica (é feedback de progresso, não decoração). */
@media (prefers-reduced-motion: reduce) {
  .agenda-filters__icon-btn--notify,   /* pisca do botão de contratos */
  .ic-meter__pin-tag,                  /* pulso do pino do IC (cadastro) */
  .tutorial-highlight {                /* pulso do destaque do tutorial */
    animation: none !important;
  }
  /* A barra de progresso da entrada (entryFill) FICA: é feedback dos 3s até o
     "Entrar", não decoração — mesma lógica do spin de loading. */
}