/* Portallfy — estilo base das telas. Tokens copiados do protótipo (--pfy-*).
   Cada tela tem o seu CSS só para o que for dela; o comum fica aqui. */
:root {
  --pfy-navy: #071B3B; --pfy-coral: #FF5A56; --pfy-orange: #FF8A45;
  --pfy-gradiente-marca: linear-gradient(135deg, #EC163C 0%, #ED2725 55%, #F05A1E 100%);
  --pfy-navy-900: #04122A; --pfy-navy-800: #0B2347; --pfy-navy-700: #13305C; --pfy-navy-600: #1D3F73;
  --pfy-navy-300: #8EA3C4; --pfy-navy-200: #B8C6DC; --pfy-navy-100: #E3E9F3; --pfy-navy-050: #F1F4F9;
  --pfy-coral-strong: #D93A36; --pfy-coral-deep: #B8282A; --pfy-coral-ink: #B4232A; --pfy-coral-tint: #FFF0EF;
  --pfy-coral-tint-2: #FFF8F7; --pfy-coral-line: #FFC6C4;
  --pfy-coral-glow: 0 0 0 3px rgba(255, 90, 86, 0.28), 0 6px 18px rgba(255, 90, 86, 0.22);
  --pfy-orange-ink: #B73A0E; --pfy-orange-tint: #FFF1E8; --pfy-orange-line: #FFCFAE;
  --pfy-bg: #F4F5F7; --pfy-bg-soft: #FAFBFC; --pfy-white: #FFFFFF;
  --pfy-ink: #071B3B; --pfy-ink-2: #2B3648; --pfy-ink-3: #545E6E; --pfy-ink-4: #8790A0; --pfy-ink-5: #B3BAC6;
  --pfy-line-strong: #C5CCD6; --pfy-line-2: #D5DAE2; --pfy-line: #E7EAEF; --pfy-mist: #E7EAEF;
  --pfy-scrim: rgba(7, 27, 59, 0.55);
  --pfy-success: #1E7A4C; --pfy-success-tint: #E8F5EE; --pfy-success-line: #BFE3CF; --pfy-success-on-dark: #8FE0B0;
  --pfy-warning: #8A5A00; --pfy-warning-tint: #FFF6E0; --pfy-warning-line: #F0D9A0; --pfy-warning-on-dark: #FFD88A;
  --pfy-warning-dot: #FFB020; --pfy-warning-dark: #3A2A10;
  --pfy-danger: #B42318; --pfy-danger-tint: #FDECEA; --pfy-danger-tint-2: #FFF7F5; --pfy-danger-line: #F3C1BC;
  --pfy-info: #1F4E8C; --pfy-info-tint: #E7EEF8; --pfy-info-line: #C3D3EA;
  --pfy-status-ativo: var(--pfy-coral-ink); --pfy-status-ativo-bg: var(--pfy-coral-tint); --pfy-status-ativo-line: var(--pfy-coral-line);
  --pfy-status-pago: var(--pfy-success); --pfy-status-pago-bg: var(--pfy-success-tint); --pfy-status-pago-line: var(--pfy-success-line);
  --pfy-chart-vendas: var(--pfy-navy); --pfy-chart-vendas-2: #9DB0CC; --pfy-chart-pico: var(--pfy-orange); --pfy-chart-grade: var(--pfy-line);
  --pfy-chart-cat-1: #2F5EA8; --pfy-chart-cat-2: #13A0A0; --pfy-chart-cat-3: #8A5CC2;
  --pfy-selecao-borda: var(--pfy-coral); --pfy-selecao-fundo: var(--pfy-coral-tint); --pfy-selecao-brilho: var(--pfy-coral-glow);
  --pfy-raio: 12px; --pfy-raio-sm: 8px;
  --pfy-fonte: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pfy-fonte-titulo: 'Barlow Condensed', 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pfy-bg); color: var(--pfy-ink); font: 16px/1.5 var(--pfy-fonte); }
a { color: var(--pfy-coral-ink); }
a:hover { color: var(--pfy-coral-deep); }
input, select, textarea, button { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; }
.titulo { font-family: var(--pfy-fonte-titulo); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }

/* Layout */
.pfy-topo { background: var(--pfy-navy); color: #fff; }
.pfy-topo .dentro { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.pfy-topo a { color: #fff; text-decoration: none; }
.pfy-marca { font-family: var(--pfy-fonte-titulo); font-weight: 700; font-size: 1.6rem; letter-spacing: .02em; }
.pfy-marca span { color: var(--pfy-coral); }
.dentro { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.dentro.estreito { max-width: 560px; }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.espaco { flex: 1; }
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
main { padding: 20px 0 48px; }

/* Cartão */
.cartao { background: var(--pfy-white); border: 1px solid var(--pfy-line); border-radius: var(--pfy-raio); padding: 16px; }
.cartao.sel { border-color: var(--pfy-selecao-borda); background: var(--pfy-selecao-fundo); box-shadow: var(--pfy-selecao-brilho); }

/* Botões (touch ≥ 44px) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--pfy-coral-strong); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--pfy-coral-deep); color: #fff; }
.btn-secundario { background: var(--pfy-white); color: var(--pfy-ink); border-color: var(--pfy-line-strong); }
.btn-secundario:hover:not(:disabled) { border-color: var(--pfy-ink-3); color: var(--pfy-ink); }
.btn-escuro { background: var(--pfy-navy); color: #fff; }
.btn-texto { background: none; color: var(--pfy-coral-ink); padding: 0 8px; }
.btn-bloco { width: 100%; }
.btn-perigo { background: var(--pfy-danger); color: #fff; }

/* Formulário */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .rotulo { font-size: .875rem; font-weight: 600; color: var(--pfy-ink-2); }
.entrada { width: 100%; min-height: 44px; padding: 10px 12px; background: var(--pfy-white); border: 1px solid var(--pfy-line-strong);
  border-radius: var(--pfy-raio-sm); }
.entrada:focus { outline: none; border-color: var(--pfy-coral); box-shadow: var(--pfy-coral-glow); }
.ajuda { font-size: .8125rem; color: var(--pfy-ink-3); }
.erro-campo { font-size: .8125rem; color: var(--pfy-danger); }
.marcar { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.marcar input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pfy-coral-strong); }

/* Opções selecionáveis (percurso, tamanho) */
.opcao { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; cursor: pointer;
  background: var(--pfy-white); border: 1px solid var(--pfy-line-2); border-radius: var(--pfy-raio); }
.opcao[aria-pressed="true"] { border-color: var(--pfy-selecao-borda); background: var(--pfy-selecao-fundo); box-shadow: var(--pfy-selecao-brilho); }
.opcao:disabled { background: var(--pfy-line); color: var(--pfy-ink-3); cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-width: 52px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--pfy-line-2); border-radius: var(--pfy-raio-sm);
  background: var(--pfy-white); cursor: pointer; font-weight: 700; }
.chip[aria-pressed="true"] { border-color: var(--pfy-selecao-borda); background: var(--pfy-selecao-fundo); box-shadow: var(--pfy-selecao-brilho); }
.chip:disabled { background: var(--pfy-line); color: var(--pfy-ink-3); text-decoration: line-through; cursor: not-allowed; }

/* Selos e avisos */
.selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: var(--pfy-navy-050); color: var(--pfy-ink-2); border: 1px solid var(--pfy-line); }
.selo.ok { background: var(--pfy-success-tint); color: var(--pfy-success); border-color: var(--pfy-success-line); }
.selo.alerta { background: var(--pfy-warning-tint); color: var(--pfy-warning); border-color: var(--pfy-warning-line); }
.selo.perigo { background: var(--pfy-danger-tint); color: var(--pfy-danger); border-color: var(--pfy-danger-line); }
.selo.info { background: var(--pfy-info-tint); color: var(--pfy-info); border-color: var(--pfy-info-line); }
.aviso { padding: 12px 14px; border-radius: var(--pfy-raio-sm); border: 1px solid var(--pfy-info-line); background: var(--pfy-info-tint); color: var(--pfy-info); }
.aviso.erro { border-color: var(--pfy-danger-line); background: var(--pfy-danger-tint); color: var(--pfy-danger); }
.aviso.ok { border-color: var(--pfy-success-line); background: var(--pfy-success-tint); color: var(--pfy-success); }
.aviso.alerta { border-color: var(--pfy-warning-line); background: var(--pfy-warning-tint); color: var(--pfy-warning); }

/* Tabelas: rolam numa caixa no celular */
.tabela-caixa { overflow-x: auto; border: 1px solid var(--pfy-line); border-radius: var(--pfy-raio); background: var(--pfy-white); }
table.tabela { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--pfy-line); white-space: nowrap; }
.tabela th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pfy-ink-3); background: var(--pfy-bg-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Abas e menus */
.abas { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--pfy-line); }
.aba { padding: 12px 14px; border: 0; background: none; cursor: pointer; font-weight: 700; color: var(--pfy-ink-3); border-bottom: 3px solid transparent; white-space: nowrap; }
.aba[aria-selected="true"] { color: var(--pfy-ink); border-bottom-color: var(--pfy-coral); }

/* Estados */
.vazio { padding: 32px 16px; text-align: center; color: var(--pfy-ink-3); }
.carregando { padding: 32px 16px; text-align: center; color: var(--pfy-ink-3); }
.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Aviso flutuante */
#pfy-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 999px; background: var(--pfy-navy); color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(7,27,59,.25); }
#pfy-toast.erro { background: var(--pfy-danger); }

/* Diálogo */
dialog.pfy-dialogo { border: 0; border-radius: var(--pfy-raio); padding: 20px; max-width: min(520px, calc(100% - 32px)); }
dialog.pfy-dialogo::backdrop { background: var(--pfy-scrim); }

:focus-visible { outline: 3px solid var(--pfy-coral); outline-offset: 2px; }
@media (max-width: 600px) { main { padding-top: 12px; } .cartao { padding: 14px; } }