/* Painel de bordo dos stands: a base comum do app do vendedor, do painel do dono e do admin (plano da
   interface, Parte 0). Os valores são os tokens medidos do sistema visual; o contraste de cada par está
   provado em tests/test_interface_base_css.py. As cores de cada tema chegam por temas.css (stands/interface/temas.py,
   com data-paleta no <html>); sem tema (admin) valem as cores de reserva abaixo.
   O tema: claro por omissão; escuro com prefers-color-scheme quando a pessoa não escolheu; o escolhido
   quando o servidor escreve data-tema no <html> (sem script, sem a tela piscar). */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fontes/PlusJakartaSans-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --fundo: #f4f1ec; --cartao: #fffdf9; --cartao-2: #f8f5f0; --linha: #efe9e1; --linha-forte: #dcd4c9;
  --texto: #1c1915; --texto-leve: #6a635a;
  --relogio-verde: #17663f; --relogio-verde-pilula: #e3ebe3;
  --relogio-ambar: #80530a; --relogio-ambar-pilula: #f0e9dc;
  --relogio-vermelho: #ad2a1f; --relogio-vermelho-pilula: #f5e4df;
  --mostrador-trilho: #ebe5dc; --mostrador-meta: #1c1915;
  --sombra-cartao: 0 1px 2px rgba(60, 40, 20, .06), 0 8px 24px rgba(60, 40, 20, .06);
  --brilho: .10;
  /* O destaque: reserva (o azul do sistema visual), substituída pelo tema do stand (temas.css). */
  --stand-faixa: #1f4e79; --stand-faixa-texto: #ffffff; --stand-acento: #1f4e79; --stand-acento-texto-botao: #ffffff;
  --stand-texto: #1f4e79; --stand-pilula: #d7eaff;
  /* A temperatura: reserva (a do Grafite), substituída pelo tema (temas.css). */
  --temp: #794db6; --temp-pilula: #eee7ff;
  --fonte: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --raio-cartao: 16px; --raio-pilula: 999px;
  --espaco-1: 6px; --espaco-2: 12px; --espaco-3: 16px; --espaco-4: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0f0d0b; --cartao: #191613; --cartao-2: #211d19; --linha: #221e1a; --linha-forte: #3a332c;
    --texto: #f2ede6; --texto-leve: #a59c90;
    --relogio-verde: #62d49d; --relogio-verde-pilula: #253429;
    --relogio-ambar: #f0b752; --relogio-ambar-pilula: #3b301d;
    --relogio-vermelho: #ff8c7c; --relogio-vermelho-pilula: #3e2924;
    --mostrador-trilho: #2f2924; --mostrador-meta: #f2ede6;
    --sombra-cartao: none; --brilho: .22;
    --stand-acento: #3881c4; --stand-acento-texto-botao: #14110e; --stand-texto: #4397e3; --stand-pilula: #0f2d49; --temp: #c09aff; --temp-pilula: #302445;
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0f0d0b; --cartao: #191613; --cartao-2: #211d19; --linha: #221e1a; --linha-forte: #3a332c;
  --texto: #f2ede6; --texto-leve: #a59c90;
  --relogio-verde: #62d49d; --relogio-verde-pilula: #253429;
  --relogio-ambar: #f0b752; --relogio-ambar-pilula: #3b301d;
  --relogio-vermelho: #ff8c7c; --relogio-vermelho-pilula: #3e2924;
  --mostrador-trilho: #2f2924; --mostrador-meta: #f2ede6;
  --sombra-cartao: none; --brilho: .22;
  --stand-acento: #3881c4; --stand-acento-texto-botao: #14110e; --stand-texto: #4397e3; --stand-pilula: #0f2d49; --temp: #c09aff; --temp-pilula: #302445;
}

*, *::before, *::after { box-sizing: border-box; }
/* O atributo hidden ganha sempre: sem isto, .cartao { display: grid } mostrava o cartão escondido (a "Passkey nova"
   na tela de recuperar, o "link incompleto" na exportação; achado na prova no navegador, 2026-11-04). */
[hidden] { display: none !important; }
/* Um link solto (sem classe) na cor de texto do tema, nunca o azul do navegador (a "Sou gestor e perdi o acesso"
   da tela de entrar, 2026-11-04). Os links com classe (botões, pílulas, cartões) têm o seu estilo. */
a:not([class]) { color: var(--stand-texto); font-weight: 600; text-underline-offset: 3px; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 500 15px/1.55 var(--fonte);
       -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }   /* o iPhone amplia campos com menos de 16px */
.num { font-variant-numeric: tabular-nums; }

/* Ícone: <svg class="ic"><use href="/comum/icones.svg?v=…#i-relogio"/></svg> */
.ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
      stroke-linecap: round; stroke-linejoin: round; }

/* Rótulo: pequeno, em maiúsculas espaçadas, sempre com ícone fino à esquerda */
.rotulo { display: flex; align-items: center; gap: var(--espaco-1); margin: 0; font: 700 11px/14px var(--fonte);
          letter-spacing: .09em; text-transform: uppercase; color: var(--texto-leve); }
.rotulo .ic { width: 14px; height: 14px; }

/* Cartão: borda quase invisível; o brilho e a linha no topo só no que mais importa (.destaque) */
.cartao { position: relative; overflow: hidden; background: var(--cartao); border: 1px solid var(--linha);
          border-radius: var(--raio-cartao); box-shadow: var(--sombra-cartao); }
.cartao.destaque { border-top: 2px solid var(--stand-acento); }
.cartao.destaque::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, var(--stand-acento) 0%, transparent 65%);
  opacity: var(--brilho); pointer-events: none; }
.cartao.destaque > * { position: relative; }
/* Numa grade de altura fixa, um cartão com overflow escondido encolheria e cortaria o próprio botão. */
.grade-cartoes { display: grid; gap: var(--espaco-2); align-content: start; grid-auto-rows: max-content; }

/* Botões: um só cheio por tela (a ação mais urgente); os outros tingidos ou de contorno */
.botao, .botao-tinto, .botao-contorno { display: inline-flex; justify-content: center; align-items: center;
  gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--raio-pilula); font: 700 14px var(--fonte);
  text-decoration: none; cursor: pointer; }
.botao { width: 100%; min-height: 48px; border: 0; background: var(--stand-acento); color: var(--stand-acento-texto-botao); font-size: 15px; }
.botao-tinto { border: 0; background: var(--stand-pilula); color: var(--stand-texto); }
.botao-contorno { border: 1px solid var(--linha-forte); background: transparent; color: var(--texto); }
.botao[disabled], .botao-tinto[disabled], .botao-contorno[disabled] { opacity: .5; cursor: default; }

/* Pílulas de navegação: abas, períodos, menu; o item ativo numa pílula tingida da cor do stand */
.pilulas { display: flex; gap: 6px; flex-wrap: wrap; }
.pilulas a, .menu-lateral a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: var(--raio-pilula); text-decoration: none; color: var(--texto-leve); font: 600 14px var(--fonte); }
.pilulas a[aria-current="page"], .menu-lateral a[aria-current="page"] { background: var(--stand-pilula); color: var(--stand-texto); }

/* O relógio: pílula tingida com ícone, minutos e palavra (a palavra é obrigatória) */
.relogio { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: var(--raio-pilula);
           font: 600 13px/16px var(--fonte); white-space: nowrap; }
.relogio b { font-weight: 800; font-size: 14px; }
.relogio .ic { width: 15px; height: 15px; }
.relogio.verde { background: var(--relogio-verde-pilula); color: var(--relogio-verde); }
.relogio.ambar { background: var(--relogio-ambar-pilula); color: var(--relogio-ambar); }
.relogio.vermelho { background: var(--relogio-vermelho-pilula); color: var(--relogio-vermelho); }

/* O único mostrador: a garantia de 1 minuto */
.numero-grande { margin: 0; font: 800 44px/1 var(--fonte); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mostrador { position: relative; height: 6px; border-radius: 3px; background: var(--mostrador-trilho); }
.mostrador i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--relogio-verde); }
.mostrador.abaixo i { background: var(--relogio-ambar); }   /* nunca vermelho: o dono decide pelo número */
.mostrador b { position: absolute; top: -5px; bottom: -5px; width: 2px; border-radius: 1px; background: var(--mostrador-meta); }

/* Avatar: iniciais com um aro fino da cor do stand */
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; padding: 2px;
          background: linear-gradient(140deg, var(--stand-texto), transparent 70%); }
.avatar span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--cartao-2);
               color: var(--texto); font: 700 14px var(--fonte); box-shadow: inset 0 0 0 2px var(--cartao); }

/* A logo do stand; sem a versão clara, no escuro vai numa placa do tamanho da logo */
.logo { display: inline-flex; align-items: center; align-self: flex-start; }
.logo img { display: block; height: 28px; width: auto; max-width: 160px; }
.logo.placa { background: #f4f1ec; border-radius: 10px; padding: 6px 10px; }

/* Foco visível e transições só de resposta (toque, troca de tela); nada se mexe sozinho */
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--stand-texto); outline-offset: 2px; }
.botao, .botao-tinto, .botao-contorno, .pilulas a, .menu-lateral a {
  transition: background-color .18s ease, color .18s ease, transform .12s ease, box-shadow .18s ease; }
.botao:active, .botao-tinto:active, .botao-contorno:active { transform: scale(.97); }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  @view-transition { navigation: none; }
}