/* ============================================================
   Cabeça's Garage — air cooled · vintage forever
   Design System (App da Cabeça + Portal web) — paleta da logomarca:
   papel envelhecido, vermelho tijolo, preto quente, dourado e teal.
   ============================================================ */

:root {
  color-scheme: light;   /* trava tema claro: iOS não escurece/branqueia campos ao focar/autocompletar */
  /* Paleta vintage — cores da logomarca Cabeça's Garage */
  --c-bg:        #ece0c2;   /* pergaminho/papel envelhecido */
  --c-surface:   #fbf4e3;   /* creme (cartões) */
  --c-surface-2: #f4e9cf;   /* creme mais quente */
  --c-ink:       #241a10;   /* preto quente (tinta) */
  --c-ink-soft:  #6d5c44;   /* marrom suave */
  --c-line:      #ddcca8;   /* linha em tom de palha */

  --c-primary:   #9d2f22;   /* vermelho tijolo (faixas da logo) */
  --c-primary-d: #7a2318;   /* vermelho escuro */
  --c-primary-l: #f2ddd1;   /* vermelho claro (tint) */

  --c-gold:      #c1954a;   /* dourado das letras */
  --c-gold-d:    #94701f;
  --c-gold-l:    #f2e5c6;

  --c-vip:       #3f6e3a;   /* verde (boné) */
  --c-success:   #3f6e3a;
  --c-success-l: #e2eddc;
  --c-warn:      #c8861d;
  --c-warn-l:    #faeed5;
  --c-danger:    #b3402f;
  --c-danger-l:  #f7e2de;
  --c-info:      #2f4d8a;   /* azul (boné) */

  /* Cores dos 4 bonés (identidade de cada cabeça) */
  --c-cap-amarelo: #e6b234;
  --c-cap-vermelho:#b23a2c;
  --c-cap-verde:   #3f6e3a;
  --c-cap-azul:    #2f4d8a;
  --c-teal:        #5f8a7d;  /* teal do miolo (sunburst) */

  --radius:   14px;
  --radius-s: 9px;
  --shadow:   0 6px 22px rgba(36,26,16,.14);
  --shadow-s: 0 2px 8px rgba(36,26,16,.10);

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* ---------- Tipografia utilitária ---------- */
.muted   { color: var(--c-ink-soft); }
.tiny    { font-size: 12px; }
.small   { font-size: 13px; }
.strong  { font-weight: 700; }

/* tabela comparativa de planos (Funcionalidades por plano) — usada no app e nos portais */
.cmp { width:100%; border-collapse:collapse; }
.cmp th, .cmp td { padding:9px 8px; border-bottom:1px solid var(--c-line); vertical-align:middle; }
.cmp thead th { position:sticky; top:0; background:var(--c-surface); border-bottom:2px solid var(--c-line); text-align:center; }
.cmp thead th:first-child { text-align:left; font-size:12px; color:var(--c-ink-soft); }
.cmp tbody tr:last-child td { border-bottom:none; }
.center  { text-align: center; }
.upper   { letter-spacing: .02em; }

/* ---------- Badges de categoria ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.badge--apoiador    { background: #e7e2d6; color: #5a5345; }
.badge--colaborador { background: #e2ebf5; color: #264b75; }
.badge--vip         { background: #e2efe4; color: var(--c-vip); }
.badge--patrono     { background: var(--c-gold-l); color: var(--c-gold-d); }

.badge--ok      { background: var(--c-success-l); color: var(--c-success); }
.badge--warn    { background: var(--c-warn-l);    color: var(--c-warn); }
.badge--danger  { background: var(--c-danger-l);  color: var(--c-danger); }
.badge--info    { background: #e1edf8;            color: var(--c-info); }
.badge--muted   { background: #eceae2;            color: var(--c-ink-soft); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-s);
  padding: 11px 16px; font-size: 14.5px; font-weight: 600;
  background: var(--c-primary); color: #fff; transition: filter .15s, transform .05s;
}
.btn:hover  { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
/* Botão de largura cheia precisa ser de NÍVEL DE BLOCO. Como .btn é inline-flex,
   um .btn--block continuava inline: no portal, onde a coluna é centralizada com
   margin:auto, ele ignorava a centralização e encostava na borda esquerda — o
   "Chamar Uber" saía 183px à esquerda dos cards. De quebra, elemento inline cria
   caixa de linha, e o espaço em branco do HTML ao redor virava altura fantasma. */
.btn--block { width: 100%; display: flex; }
.btn--ghost { background: transparent; color: var(--c-primary); border-color: var(--c-line); }
.btn--gold  { background: var(--c-gold); }
.btn--soft  { background: var(--c-primary-l); color: var(--c-primary-d); }
.btn--danger{ background: var(--c-danger); }
/* Botão de função que depende de integração externa ainda não conectada (mostra 🔒 · em breve) */
.btn--locked { opacity: .68; }
.btn--locked::after { content: 'em breve'; margin-left: 8px; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; background: rgba(0,0,0,.14); color: inherit;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.btn--sm    { padding: 7px 12px; font-size: 13px; }

/* ---------- Cards ---------- */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-s);
}
.card--pad { padding: 16px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field > label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--c-ink-soft); margin-bottom: 6px;
}
.input, .select, .textarea, .select-ac {
  width: 100%; padding: 11px 12px; font-size: 14.5px; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--radius-s);
  background-color: var(--c-surface); color: var(--c-ink); -webkit-text-fill-color: var(--c-ink);
}
.input, .textarea, .select-ac { -webkit-appearance: none; appearance: none; }
.input:focus, .select:focus, .textarea:focus, .select-ac:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-l);
}
/* Campos e caixas de seleção: sempre creme (nunca "branco") ao tocar/passar/focar,
   e sem o flash de toque nem o fundo branco/amarelo do autofill do navegador. */
.input, .select, .textarea, .select-ac { -webkit-tap-highlight-color: transparent; }
.input:hover, .select:hover, .textarea:hover, .select-ac:hover,
.input:active, .select:active, .textarea:active, .select-ac:active,
.input:focus, .select:focus, .textarea:focus, .select-ac:focus { background: var(--c-surface); }
.input:-webkit-autofill, .select:-webkit-autofill, .textarea:-webkit-autofill, .select-ac:-webkit-autofill,
.input:-webkit-autofill:focus, .select-ac:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
  -webkit-text-fill-color: var(--c-ink);
  caret-color: var(--c-ink);
  transition: background-color 9999s ease-in-out 0s;
}
::selection { background: var(--c-primary-l); color: var(--c-ink); }
.textarea { resize: vertical; min-height: 84px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Evita o "estouro" de itens de grid (min-width:auto) que fazia os campos se sobreporem em telas estreitas */
.row2 > * { min-width: 0; }
.row2 input, .row2 select, .row2 .input, .row2 .select { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 360px){ .row2 { grid-template-columns: 1fr; } }

/* ---------- Toast ---------- */
#toast-wrap {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none;
}
.toast {
  background: var(--c-ink); color: #fff; padding: 11px 18px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow); animation: toastIn .25s ease;
}
.toast--ok   { background: var(--c-success); }
.toast--err  { background: var(--c-danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(20,28,35,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; z-index: 8000; animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--c-surface); border-radius: var(--radius);
  width: 100%; max-width: 460px; max-height: 88vh; overflow: auto;
  box-shadow: var(--shadow); animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.95); opacity: .6; } }
.modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--c-line);
}
.modal__head h3 { font-size: 17px; }
.modal__body { padding: 18px; }
.modal__x {
  border: none; background: var(--c-surface-2); width: 32px; height: 32px;
  border-radius: 8px; font-size: 18px; color: var(--c-ink-soft);
}

.hide { display: none !important; }

/* ---------- Arte do evento (flyer) — render compartilhado (CRM preview · app · portal) ---------- */
.arte-ev { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; max-width: 460px;
  display: flex; box-shadow: 0 8px 26px rgba(29,42,53,.16); }
.arte-ev__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.arte-ev__veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.62) 100%); }
.arte-ev__in { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding: 22px; }
.arte-ev__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.arte-ev__logo { height: 46px; width: auto; border-radius: 10px; background: rgba(255,255,255,.88); padding: 4px; }
.arte-ev__tag { font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.arte-ev__body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.arte-ev__sub { font-size: 13px; font-weight: 700; letter-spacing: .08em; opacity: .85; }
.arte-ev__titulo { font-size: 30px; font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.arte-ev--destaque .arte-ev__titulo, .arte-ev--especial .arte-ev__titulo { }
.arte-ev__meta { font-size: 13.5px; font-weight: 700; opacity: .95; margin-top: 2px; }
.arte-ev__texto { font-size: 13.5px; line-height: 1.5; opacity: .92; white-space: pre-wrap; }
.arte-ev__video { position: relative; border-radius: 12px; overflow: hidden; margin-top: 6px; aspect-ratio: 16/9; background: rgba(0,0,0,.35); }
.arte-ev__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arte-ev__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.arte-ev__cta { align-self: flex-start; font-size: 13px; font-weight: 800; padding: 9px 16px; border-radius: 999px; margin-top: 12px; }
@media (max-width: 480px){ .arte-ev__titulo { font-size: 25px; } }

/* ---------- Início personalizável: arrastar os quadros direto na tela (modo edição) ---------- */
.pi-editbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--c-gold-l); border: 1px solid var(--c-gold);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; color: #7a5e1d; position: sticky; top: 0; z-index: 5; }
/* Grade de 12 colunas — cada quadro ocupa uma largura (--w) ajustável; empilha em telas estreitas */
.pi-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.pi-cell { grid-column: span var(--w, 12); min-width: 0; display: flex; flex-direction: column; }
.pi-cell__body { flex: 1; min-height: 0; }
.pi-cell__body > *:last-child { margin-bottom: 0; }
.pi-cell[data-h] { height: var(--h); }
.pi-cell[data-h] .pi-cell__body { overflow: auto; }
@media (max-width: 760px){ .pi-cell { grid-column: span 12 !important; height: auto !important; } }
/* Modo de edição: card arrastável + alças de redimensionar (largura → direita · altura → base) */
.pi-cell--edit { position: relative; border: 2px dashed var(--c-line); border-radius: 14px; padding: 10px 16px 16px 10px; background: var(--c-surface-2); cursor: grab; }
.pi-cell--edit:active { cursor: grabbing; }
.pi-card__tools { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pi-card__grip { font-size: 11.5px; font-weight: 700; color: var(--c-ink-soft); letter-spacing: .03em; }
.pi-card__fix { font-size: 11px; color: var(--c-ink-soft); }
.pi-card__hide { border: 1px solid var(--c-line); background: var(--c-surface); color: var(--c-danger); border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.pi-card__hide:hover { background: var(--c-danger-l); }
.pi-resize { position: absolute; display: flex; align-items: center; justify-content: center; }
.pi-resize::before { content: ''; border-radius: 2px; background: var(--c-primary); opacity: .5; }
.pi-resize:hover::before { opacity: 1; }
.pi-resize--w { top: 8px; bottom: 12px; right: 0; width: 14px; cursor: ew-resize; border-radius: 0 12px 12px 0; background: linear-gradient(90deg, transparent, var(--c-primary-l)); }
.pi-resize--w::before { width: 3px; height: 34px; }
.pi-resize--h { left: 8px; right: 12px; bottom: 0; height: 14px; cursor: ns-resize; border-radius: 0 0 12px 12px; background: linear-gradient(0deg, var(--c-primary-l), transparent); }
.pi-resize--h::before { height: 3px; width: 34px; }


/* ============================================================
   COMPONENTES COMPARTILHADOS — app e portal
   Vieram do app.css. São componentes genéricos (card, tile, banner,
   kv, grades, capa do carro, quadro de mapa), não a moldura de celular.
   Ficam aqui para o portal parar de carregar o app.css e deixar de
   herdar a estética do app — mexer no visual do app não afeta o portal.
   ============================================================ */
.sec-title:first-child { margin-top: 4px; }
.tile + .tile { border-top:1px solid var(--c-line); }
.tile__ico { width:42px; height:42px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:19px; background:var(--c-primary-l); }
.tile__main { flex:1; min-width:0; }
.tile__main b { font-size:14.5px; display:block; }
.tile__main span { font-size:12.5px; color:var(--c-ink-soft); }
.chev { color:var(--c-ink-soft); font-size:20px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat-box { padding:14px 8px; text-align:center; }
.stat-box b { display:block; font-size:18px; line-height:1.2; letter-spacing:-.2px; color:var(--c-primary); white-space:nowrap; }
.stat-box span { display:block; margin-top:2px; font-size:11px; line-height:1.2; color:var(--c-ink-soft); }
.scard { background:var(--c-surface); border:1px solid var(--c-line); border-radius:14px;
  padding:13px; cursor:pointer; box-shadow:var(--shadow-s); position:relative; transition:transform .1s; }
.scard__ico { width:36px; height:36px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:17px; margin-bottom:9px; }
.scard__val { font-size:19px; font-weight:800; line-height:1.05; }
.scard__title { font-size:12.5px; color:var(--c-ink-soft); font-weight:700; letter-spacing:.01em; }
.scard__sub { font-size:11.5px; margin-top:7px; line-height:1.3; }
.scard__chev { position:absolute; top:13px; right:12px; color:var(--c-ink-soft); font-size:16px; }
.car-cover__tag { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.55); color:#fff;
  padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:700; }
.dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
.dot--ok { background:var(--c-success); }
.dot--warn { background:var(--c-warn); }
.dot--danger { background:var(--c-danger); }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo-grid .pg { aspect-ratio:1; border-radius:10px; position:relative; }
.photo-grid .pg button { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.5); color:#fff; border:none; font-size:13px; line-height:1; }
.banner--info { background:#e1edf8; color:#1c4e7a; }
.banner--warn { background:var(--c-warn-l); color:#7a5410; }
/* Variante vermelha do banner. Estava só no app.css e o portal a usava sem
   estilo — a marcação vem do app.js, que desenha nas duas superfícies. */
.banner--danger { background:var(--c-danger-l); color:#8a2c1f; }
.banner--gold { background:var(--c-gold-l); color:#7a5e1d; }
.banner__ico { font-size:18px; }
.step { position:relative; padding-bottom:18px; }
.step__n { position:absolute; left:-30px; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--c-primary); color:#fff; font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center; z-index:1; }
.step h4 { font-size:14px; margin-bottom:3px; }
.step p { font-size:12.5px; color:var(--c-ink-soft); }
.kv:last-child { border-bottom:none; }
.kv span { color:var(--c-ink-soft); }
.kv b { text-align:right; }
.mapa-quadro iframe { display: block; width: 100%; height: 220px; border: 0; }
.mapa-quadro--baixo iframe { height: 160px; }
.mapa-quadro__abrir { display: block; padding: 10px 12px; font-size: 12.5px; font-weight: 700;
  text-align: center; color: var(--c-primary-d); background: var(--c-surface);
  border-top: 1px solid var(--c-line); text-decoration: none; }
.banner { border-radius:12px; padding:13px 14px; display:flex; gap:11px; align-items:flex-start; font-size:13px; }
.car-cover { height:150px; border-radius:14px; position:relative; overflow:hidden; }
.car-cover__btn { position:absolute; right:10px; top:10px; z-index:2; border:none; cursor:pointer;
  background:rgba(0,0,0,.58); color:#fff; font:inherit; font-size:11.5px; font-weight:700;
  padding:6px 11px; border-radius:999px; backdrop-filter:blur(3px); }
.kv { padding:9px 0; border-bottom:1px solid var(--c-line); display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.mapa-quadro { position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--c-line); box-shadow: var(--shadow-s); margin-bottom: 12px;
  background: var(--c-surface-2); }
.pg__capa { position:absolute; left:6px; top:6px; border:none; cursor:pointer; background:rgba(0,0,0,.55);
  color:#fff; width:24px; height:24px; border-radius:50%; font-size:12px; line-height:1; padding:0; }
.scards { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.sec-title { font-size: 14px; font-weight: 800;
  letter-spacing: .01em; color: var(--c-primary-d); margin: 20px 0 10px;
  display: flex; align-items: center; gap: 9px; }
.steps { position:relative; padding-left:30px; }
.tile { display:flex; align-items:center; gap:12px; padding:13px 14px; }

/* ============================================================
   FOLHA DE ACESSO — componente compartilhado (app e portal)
   Cabeçalho, miolo e rodapé do gate, telas de MFA e de biometria.
   Vivia no app.css e sumiu do portal quando ele parou de carregá-lo:
   a tela do código do Authenticator ficou sem pílula, sem espaçamento
   e com o campo do código sem formato. O enquadramento (folha que sobe
   no app, diálogo centrado no portal) fica em cada arquivo.
   ============================================================ */
.gate__head { flex: 0 0 auto; padding: 15px 18px 13px; border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, var(--c-gold-l) 0%, var(--c-surface) 100%); border-radius: 18px 18px 0 0; }
.gate__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 15px 18px 6px; }
.gate__foot { flex: 0 0 auto; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-line); background: var(--c-surface); }
.gate__crumb { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.gate__back { border: none; background: transparent; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--c-primary-d); padding: 0; cursor: pointer; }
.gate__marca { font-size: 12.5px; font-weight: 700; color: var(--c-primary-d); }
.gate__step { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-gold-d); background: rgba(255,255,255,.65); border: 1px solid var(--c-gold);
  border-radius: 999px; padding: 3px 9px; }
.gate__title { display: flex; align-items: center; gap: 9px; font-size: 18px; line-height: 1.2; }
.gate__title span { font-size: 21px; }
.gate__sub { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--c-ink-soft); }
.gate__err { min-height: 17px; margin-top: 7px; font-size: 12.5px; color: var(--c-danger); }
.mfa-qr { text-align: center; margin-bottom: 14px; }
.mfa-qr__frame { --b: 2px; --l: 22px; display: inline-block; padding: 13px; border-radius: 8px; line-height: 0;
  background:
    linear-gradient(var(--c-gold) 0 0) 0 0        / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 0 0        / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 100% 0     / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 100% 0     / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 0 100%     / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 0 100%     / var(--b) var(--l) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 100% 100%  / var(--l) var(--b) no-repeat,
    linear-gradient(var(--c-gold) 0 0) 100% 100%  / var(--b) var(--l) no-repeat,
    #fff;
  box-shadow: 0 8px 22px rgba(36,26,16,.18); }
.mfa-qr__hint { margin-top: 9px; font-size: 12.5px; line-height: 1.4; color: var(--c-ink-soft); }
.mfa-more { border: 1px solid var(--c-line); border-radius: var(--radius-s); background: var(--c-surface-2);
  margin-bottom: 9px; overflow: hidden; }
.mfa-more > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-size: 12.5px; font-weight: 700;
  color: var(--c-primary-d); display: flex; align-items: center; gap: 8px; }
.mfa-more > summary::-webkit-details-marker { display: none; }
.mfa-more > summary::after { content: '›'; margin-left: auto; font-size: 17px; line-height: 1;
  transition: transform .15s; }
.mfa-more[open] > summary::after { transform: rotate(90deg); }
.mfa-more__in { padding: 2px 12px 12px; }
.mfa-key { text-align: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .06em; line-height: 1.9; color: var(--c-ink); word-break: normal;
  background: var(--c-surface); border: 1px dashed var(--c-line); border-radius: 8px; padding: 8px 10px; }
.mfa-conta { font-size: 12.5px; line-height: 1.5; margin-bottom: 8px; }
.mfa-steps { list-style: none; counter-reset: mfa; margin: 0; padding: 0; }
.mfa-steps li { counter-increment: mfa; position: relative; padding-left: 27px; margin-bottom: 9px;
  font-size: 12.5px; line-height: 1.5; color: var(--c-ink-soft); }
.mfa-steps li:last-child { margin-bottom: 0; }
.mfa-steps li::before { content: counter(mfa); position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; border-radius: 50%; background: var(--c-gold-l); color: var(--c-gold-d);
  font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.mfa-campo { margin-top: 4px; }
.mfa-campo > label { display: block; text-align: center; font-size: 12.5px; font-weight: 600;
  color: var(--c-ink-soft); margin-bottom: 7px; }
.mfa-code { width: 100%; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 27px; font-weight: 700; letter-spacing: .42em; text-indent: .42em; padding: 12px 10px; }
.mfa-code::placeholder { color: var(--c-line); -webkit-text-fill-color: var(--c-line); font-weight: 600; }
.gate-box--mini .gate__head { padding: 13px 18px 11px; }
.gate-box--mini .gate__body { padding: 12px 18px 4px; }
.gate-box--mini .gate__title { font-size: 17px; }
.gate-box--mini .gate__sub { font-size: 12.5px; }
.bio-alvo--mini { margin: 0 0 6px; }
.bio-alvo--mini .bio-alvo__anel { width: 64px; height: 64px; border-width: 2px; }
.bio-alvo--mini .bio-alvo__ico { font-size: 30px; }
.bio-alvo { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 2px 0 10px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bio-alvo__anel { width: 86px; height: 86px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: radial-gradient(circle at 50% 35%, var(--c-surface) 0%, var(--c-gold-l) 100%);
  border: 2px solid var(--c-gold); box-shadow: 0 6px 18px rgba(36,26,16,.14); transition: transform .12s; }
.bio-alvo:active .bio-alvo__anel { transform: scale(.96); }
.bio-alvo__ico { font-size: 38px; line-height: 1; }
.bio-alvo__txt { font-size: 12.5px; font-weight: 700; color: var(--c-primary-d); }
.bio-alvo.is-lendo { cursor: default; }
.bio-alvo.is-lendo .bio-alvo__anel { animation: bioPulso 1.1s ease-in-out infinite; }
.bio-nota { font-size: 12px; line-height: 1.5; color: var(--c-ink-soft); background: var(--c-surface-2);
  border: 1px solid var(--c-line); border-radius: var(--radius-s); padding: 10px 12px; }
.bio-alt { display: block; width: 100%; margin-top: 4px; border: none; background: transparent;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; }
.bio-espera { text-align: center; padding: 26px 0 30px; }
.bio-espera__pulso { font-size: 42px; line-height: 1; margin-bottom: 10px; animation: bioPisca 1.2s ease-in-out infinite; }
.linkish { border: none; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--c-primary-d); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@keyframes bioPulso {
  0%, 100% { box-shadow: 0 8px 24px rgba(36,26,16,.16), 0 0 0 0 rgba(193,149,74,.55); }
  50%      { box-shadow: 0 8px 24px rgba(36,26,16,.16), 0 0 0 14px rgba(193,149,74,0); }
}
@keyframes bioPisca { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ============================================================
   SPLASH DE BOAS-VINDAS — componente compartilhado
   Vivia no app.css. Sem ele no portal, o .splash perdia o
   position:absolute, virava item do grid da moldura e caía dentro da
   coluna da barra lateral: a logo aparecia gigante no rodapé da lateral
   e sumia quando a animação terminava.
   ============================================================ */
.splash { position:absolute; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:linear-gradient(160deg, var(--c-primary) 0%, var(--c-primary-d) 68%, #241a10 100%);
  animation:splashIn .25s ease; }
.splash--out { animation:splashOut .45s ease forwards; }
.splash__inner { text-align:center; color:#f6ead2; padding:0 24px; position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; }
.splash__logo { width:min(190px,58vw); height:min(190px,58vw); border-radius:30px; background:#fbf4e3; object-fit:cover;
  margin:0 auto; box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 0 3px var(--c-gold);
  animation:splashLogo .7s cubic-bezier(.2,.85,.3,1.4) both; }
.splash__hi { font-size:24px; font-weight:800; letter-spacing:.02em; margin-top:20px; animation:splashUp .5s ease both .35s; }
.splash__tag { font-size:12.5px; letter-spacing:.04em; color:var(--c-gold); margin-top:6px; animation:splashUp .5s ease both .5s; }
.splash__road { position:absolute; left:0; right:0; bottom:20%; height:2px; background:rgba(246,234,210,.3); z-index:1; }
.splash__cars { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.splash__car { position:absolute; bottom:calc(20% - 4px); left:calc(100% + 40px); animation:splashDrive 3.4s linear both; }
.splash__car img, .splash__car svg { display:block; height:62px; width:auto; filter:drop-shadow(0 5px 8px rgba(0,0,0,.3)); }
@keyframes splashIn { from { opacity:0 } to { opacity:1 } }
@keyframes splashOut { to { opacity:0; transform:scale(1.05) } }
@keyframes splashLogo { from { opacity:0; transform:translateY(34px) scale(.5) rotate(-8deg) } to { opacity:1; transform:none } }
@keyframes splashUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:none } }
@keyframes splashDrive { from { left:calc(100% + 40px) } to { left:-360px } }

/* SAÍDA — a mesma cena ao contrário. O Fusca entra pela esquerda e sai pela
   direita, e a imagem é espelhada porque a frente tem de ir na direção do
   movimento: carro andando de ré não é despedida, é defeito. */
.splash--sai .splash__car { left:-360px; animation-name:splashDriveVolta; }
.splash--sai .splash__car img, .splash--sai .splash__car svg { transform:scaleX(-1); }
@keyframes splashDriveVolta { from { left:-360px } to { left:calc(100% + 40px) } }

/* "Entrar de novo" — só a despedida desenha, e hoje só o portal se despede.
   Mesmo assim a regra mora aqui, e não no portal.css: quem produz a marcação é
   o app.js, que roda nas duas superfícies. Estilo de marcação compartilhada
   preso na folha de uma delas é o defeito que o tools/auditar-css.py caça. */
.splash__volta { width:auto; margin-top:20px; padding:11px 26px; border:0;
  background:var(--c-gold); color:#2a2113; font-weight:800;
  animation:splashUp .5s ease both .65s; }
.splash__volta:hover { filter:brightness(1.06); }

/* ============================================================
   COMPONENTES COMPARTILHADOS — lote final
   Carteirinha da cabeça, abas segmentadas, ações rápidas, barra de
   progresso, variação de tile e de banner, e o radar de GPS.
   Todos são gerados por marcação que roda nas DUAS superfícies e
   estavam presos no app.css — apareciam sem estilo no portal.
   Encontrados pela auditoria em tools/auditar-css.py.
   ============================================================ */
.card-id {
  border-radius: 18px; padding: 20px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-d));
  box-shadow: var(--shadow);
}
.card-id--gold { background: linear-gradient(135deg, #b8923f 0%, #d8b85e 45%, #9e7d2e 100%); color:#2a2113; }
.card-id--geada     { background:#e9ebe6; color:#2b2b2b; }
.card-id--prata     { background: linear-gradient(135deg,#e6eaec 0%,#b1b7bd 40%,#d4d9dc 62%,#a5abb1 100%); color:#272b2e; }
.card-id--azulsaturno { background: linear-gradient(140deg,#345f92 0%,#264b75 55%,#16324f 100%); color:#fff; }
.card-id--verdeamazonas { background: linear-gradient(140deg,#3a7a4a 0%,#2a5c37 55%,#163d22 100%); color:#fff; }
.card-id--verdeamazonas .card-id__bg { background-position:100% 0%; }
.card-id--verdeamazonas .card-id__veil { background: linear-gradient(140deg, rgba(42,92,55,.60), rgba(22,61,34,.74)); }
.card-id--dakar     { background: linear-gradient(140deg,#3a3a40 0%,#222228 55%,#0e0e12 100%); color:#fff; }
.card-id--geada .card-id__photo, .card-id--prata .card-id__photo { background:rgba(0,0,0,.07); border-color:rgba(0,0,0,.18); }
.card-id--geada .card-id__wm, .card-id--prata .card-id__wm { opacity:.16; }
.card-id__bg { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url(../img/carteirinha-fundo_02.png?v=2); background-size:200% 200%; background-repeat:no-repeat; }
.card-id--geada     .card-id__bg { background-position:0% 0%; }
.card-id--prata     .card-id__bg { background-position:100% 0%; }
.card-id--azulsaturno .card-id__bg { background-position:0% 100%; }
.card-id--dakar     .card-id__bg { background-position:100% 100%; }
.card-id__veil { position:absolute; inset:0; z-index:0; pointer-events:none; }
.card-id--geada .card-id__veil     { background: rgba(245,246,243,.62); }
.card-id--prata .card-id__veil     { background: linear-gradient(135deg, rgba(196,201,206,.58), rgba(146,153,160,.70)); }
.card-id--azulsaturno .card-id__veil { background: linear-gradient(140deg, rgba(38,75,117,.56), rgba(22,50,79,.72)); }
.card-id--dakar .card-id__veil     { background: linear-gradient(140deg, rgba(24,24,30,.74), rgba(8,8,12,.88)); }
.card-id--azulsaturno, .card-id--verdeamazonas, .card-id--dakar { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.card-id--geada, .card-id--prata { text-shadow: 0 1px 2px rgba(255,255,255,.6); }
.card-id__bg { filter: contrast(1.06) saturate(1.08); }
.card-id::after {
  content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px;
  border-radius:50%; background:rgba(255,255,255,.08);
}
.card-id--geada::after, .card-id--prata::after { background:rgba(0,0,0,.04); }
.card-id::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:
    radial-gradient(150px 100px at 14% 8%, rgba(255,255,255,.22), transparent 72%),
    repeating-linear-gradient(125deg, rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 12px);
}
.card-id--geada::before { display:none; }
.card-id__wm { position:absolute; inset:0; width:100%; height:100%; opacity:.13; z-index:0; pointer-events:none; }
.card-id__top { display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; }
.card-id__logo { font-weight:800; letter-spacing:1px; font-size:15px; }
.card-id__logo small { display:block; font-size:8px; font-weight:600; opacity:.85; letter-spacing:.5px; }
.card-id__body { display:flex; align-items:center; gap:14px; margin-top:16px; position:relative; z-index:1; }
.card-id__photo { width:62px; height:62px; border-radius:14px; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800;
  border:2px solid rgba(255,255,255,.4); }
.card-id__name { font-size:19px; font-weight:800; }
.card-id__cat { font-size:12px; opacity:.92; letter-spacing:.06em; font-weight:700; }
.card-id__foot { display:flex; justify-content:space-between; margin-top:18px; font-size:11.5px;
  position:relative; z-index:1; opacity:.95; }
.card-id__foot b { display:block; font-size:14px; }
.tile__end { text-align:right; flex-shrink:0; }
.qa { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.qa button { background:var(--c-surface); border:1px solid var(--c-line); border-radius:12px;
  padding:12px 4px; display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:10.5px; font-weight:600; color:var(--c-ink); }
.qa .qa__ico { font-size:20px; }
.prog { height:8px; background:var(--c-line); border-radius:999px; overflow:hidden; }
.prog > i { display:block; height:100%; background:var(--c-primary); border-radius:999px; }
.prog--gold > i { background:var(--c-gold); }
.prog--ok > i { background:var(--c-success); }
.banner--muted { background:#eef1f0; color:#566; }
.gps {
  border-radius:16px; padding:20px; color:#fff; text-align:center;
  background:linear-gradient(135deg,#2e7d52,#1d5a3a); position:relative; overflow:hidden;
}
.gps__radar { width:90px; height:90px; margin:6px auto 14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); display:flex; align-items:center; justify-content:center;
  position:relative; }
.gps__radar::before { content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); animation:radar 2s ease-out infinite; }
.gps__pin { font-size:30px; }
.gps b { font-size:17px; }
.mtabs { display: flex; gap: 6px; margin: 14px 0 12px; background: var(--c-surface-2); border-radius: 12px; padding: 4px; }
.mtab { flex: 1; border: none; background: transparent; color: var(--c-ink-soft); font: inherit; font-size: 12.5px;
  font-weight: 700; padding: 9px 4px; border-radius: 9px; cursor: pointer; white-space: nowrap; line-height: 1.1; }
.mtab__b { display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 2px; font-size: 10.5px; font-weight: 800;
  background: var(--c-primary); color: #fff; border-radius: 999px; vertical-align: middle; }
@keyframes radar { from{transform:scale(.4);opacity:.9;} to{transform:scale(1.25);opacity:0;} }