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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Grade sutil de 32px: fundo inteiro nas telas de entrada (body.ceu) e,
   esmaecendo, no alto das telas de trabalho (.main-content::before) */
body.ceu {
  background-image:
    linear-gradient(var(--grade) 1px, transparent 1px),
    linear-gradient(90deg, var(--grade) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}

/* Wrapper principal */
/* Sem z-index de propósito: com ele o #app virava uma camada própria e tudo o
   que mora dentro (modais, menus) ficava preso abaixo da barra inferior e da
   faixa do demo, que estão fora dele. Posicionado e depois do canvas no HTML,
   ele já pinta por cima do céu. */
#app {
  position: relative;
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--card3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
* { scrollbar-color: var(--card3) transparent; scrollbar-width: thin; }

::selection { background: var(--gold-glow); color: var(--text); }

/* Tipografia */
h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
p { line-height: 1.6; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, kbd { font-family: var(--mono); }

/* Números alinhados em tabelas, valores e contadores */
.num, .tabular, td, .stat-value, .kcard-valor, .parcela-valor, .cotacao-valor { font-variant-numeric: tabular-nums lining-nums; }

/* ── Primitivas da Inscrição ─────────────────────────────
   .titulo-pagina   título de tela: Neohellenic 700, caixa alta, grande
   .numeral         número de etapa ou indicador, em Neohellenic
   .letreiro        texto em Didot (marca e momentos de marca)
   .fio-tinta       fio grosso no topo de colunas e seções, como nas inscrições */
.titulo-pagina {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.875rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.numeral {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.letreiro { font-family: var(--marca); font-weight: 400; }

/* Letreiro PRΛXIS: GFS Didot espaçado, com o A trocado pelo símbolo (o Λ do
   Didot fechado na base). O SVG tem a largura de avanço do Λ (0,74 em) e a
   altura dele sobre a linha de base (0,7188 em); a margem repõe o espaçamento
   que o letter-spacing não aplica ao SVG. */
.marca {
  display: inline-block;
  font-family: var(--marca);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  margin-right: -0.14em;
}
.marca-tri {
  display: inline-block;
  width: 0.74em;
  height: 0.7188em;
  margin-right: 0.14em;
  vertical-align: baseline;
  fill: currentColor;
  overflow: visible;
}
.simbolo { display: block; flex-shrink: 0; }
.fio-tinta { border-top: 2px solid var(--tinta); }

/* Rótulo de seção: frase normal na fonte da interface, com fio à direita */
.rotulo-secao {
  font-family: var(--font);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text3);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.rotulo-secao::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Inputs */
input, select, textarea {
  font-family: inherit;
  font-size: 0.875rem;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  color: var(--text);
  padding: 0.55rem 0.8rem;
  width: 100%;
  min-height: 40px;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
input[type="checkbox"], input[type="radio"] { min-height: 0; }

input:hover:not(:focus):not(:disabled), select:hover:not(:focus):not(:disabled), textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}

input::placeholder, textarea::placeholder { color: var(--text3); opacity: 0.8; }

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* Datas: o campo nativo fica escondido e um campo de texto dd/mm/aaaa com o
   calendário da marca toma o lugar (js/campo-data.js) */
.campo-data-nativo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}
.campo-data-texto {
  font-variant-numeric: tabular-nums lining-nums;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238C7E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='1'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 15px 15px;
}
.campo-data-texto[aria-invalid] { border-color: var(--red-border); }
.campo-data-texto[aria-invalid]:focus { box-shadow: 0 0 0 3px var(--red-dim); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23908474' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.25rem;
  cursor: pointer;
  text-overflow: ellipsis;
}

textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 0.4rem;
}

/* Botões */
button {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  border-radius: var(--radius-btn);
  padding: 0.55rem 1.05rem;
  min-height: 38px;
  background: none;
  color: inherit;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
button svg { flex-shrink: 0; }

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Links e rótulos com aparência de botão recebem a mesma base dos <button>
   (:where zera a especificidade: as variações abaixo continuam valendo) */
:where(a, label):where(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.55rem 1.05rem;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
:is(a, label):is(.btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-icon):hover { text-decoration: none; }

.btn-primary {
  background: var(--gold-fill);
  border-color: var(--gold-fill);
  color: var(--on-gold);
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--gold-fill-hover); border-color: var(--gold-fill-hover); }

.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-secondary:hover:not(:disabled) { background: var(--card3); }

/* Discreto: sem borda forte, para ações de apoio */
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text2);
}
.btn-ghost:hover:not(:disabled) { background: var(--card3); color: var(--text); border-color: var(--border-strong); }

.btn-danger {
  background: var(--red-dim);
  border-color: var(--red-border);
  color: var(--red);
}
.btn-danger:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }

.btn-sm {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  min-height: 32px;
  gap: 0.35rem;
}

.btn-icon {
  padding: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text3);
  width: 36px;
  height: 36px;
  min-height: 36px;
}
.btn-icon:hover:not(:disabled) { background: var(--card3); color: var(--text); border-color: var(--border-strong); }

/* Cards */
.card {
  background: var(--card);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition), background var(--transition);
}
.light .card { box-shadow: var(--shadow-sm); }
.light .card:not(.no-hover):hover { box-shadow: var(--shadow-sm); }

/* Cards clicáveis reagem só na borda — nada de "pulo" */
.card:not(.no-hover):hover { border-color: var(--border-strong); }

/* Variações de cor dos cards (antes eram brilhos radiais): agora um fio
   de 2px no topo, discreto, que indica a natureza do número */
.card-glow-gold, .card-glow-blue, .card-glow-green, .card-glow-red { --fio: transparent; }
.card-glow-gold  { --fio: var(--gold); }
.card-glow-blue  { --fio: var(--blue); }
.card-glow-green { --fio: var(--green); }
.card-glow-red   { --fio: var(--red); }
.card-glow-gold::before, .card-glow-blue::before, .card-glow-green::before, .card-glow-red::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fio);
  opacity: 0.7;
  pointer-events: none;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
  padding: 0.16rem 0.5rem;
  border-radius: var(--radius-tag);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-gold    { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-border); }
.badge-green   { background: var(--green-dim); color: var(--green); border-color: var(--green-border); }
.badge-red     { background: var(--red-dim); color: var(--red); border-color: var(--red-border); }
.badge-blue    { background: var(--blue-dim); color: var(--blue); border-color: var(--blue-border); }
.badge-amber   { background: var(--amber-dim); color: var(--amber); border-color: var(--amber-border); }
.badge-neutral { background: var(--neutral-dim); color: var(--text2); border-color: var(--border); }

/* Divisor */
.divider {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 1.5rem 0;
}

/* Carregamento global: a mesma barra do splash (um fio com o trecho
   terracota correndo), sobre o fundo velado. Aparece depois de um instante,
   para não piscar em operações rápidas. */
#spinner-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  align-items: center;
  justify-content: center;
}
#spinner-overlay.visible { display: flex; flex-direction: column; gap: 18px; animation: spinnerAparece 0.2s ease 0.12s both; }
.spinner-texto { font-size: 0.86rem; color: var(--text2); text-align: center; padding: 0 24px; }
/* Espera longa, com texto (a renovação da demo): o fundo cobre a tela de trás,
   para o texto não disputar com os cartões */
#spinner-overlay:has(.spinner-texto:not(:empty)) { background: color-mix(in srgb, var(--bg) 94%, transparent); }
.spinner-texto:empty { display: none; }
@keyframes spinnerAparece { from { opacity: 0; } to { opacity: 1; } }

.spinner {
  position: relative;
  width: 88px;
  height: 2px;
  overflow: hidden;
  background: var(--border-strong);
}
.spinner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: var(--gold-fill);
  animation: spinnerCorre 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes spinnerCorre { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .spinner::after { animation: none; left: 30%; }
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toast */
#toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}

/* Aviso: superfície reta com o fio do alto na cor do recado (oliva, carmim,
   egeu, ocre), o ícone de traço na mesma cor e o texto em tinta */
.toast {
  --toast-cor: var(--blue);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--toast-cor);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  padding: 11px 8px 11px 14px;
  width: 380px;
  max-width: calc(100vw - 2.5rem);
  box-shadow: var(--shadow-md);
  animation: toastIn 0.2s ease;
  pointer-events: auto;
}
.toast-green { --toast-cor: var(--green); }
.toast-red   { --toast-cor: var(--red); }
.toast-blue  { --toast-cor: var(--blue); }
.toast-amber { --toast-cor: var(--amber); }
.toast-ico { color: var(--toast-cor); flex-shrink: 0; display: flex; margin-top: 2px; }
.toast-msg { flex: 1; min-width: 0; color: var(--text); font-size: 0.86rem; font-weight: 500; line-height: 1.45; padding-top: 1px; text-wrap: pretty; }
.toast-fechar {
  width: 30px; height: 30px;
  min-height: 30px;
  margin: -4px 0 -4px 2px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.toast-fechar:hover { background: var(--card2); color: var(--text); }
.toast-fechar:active:not(:disabled) { transform: none; }
.toast.out { animation: toastOut 0.2s ease forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }

/* Celular: avisos centralizados na largura útil, acima da barra inferior */
@media (max-width: 767px) {
  #toast-container { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; align-items: stretch; }
  body:has(#bottom-nav) #toast-container { bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 0.6rem); }
  .toast { width: auto; min-width: 0; max-width: none; }
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal-overlay.visible { display: flex; }
/* Celular: a página fica parada atrás de modal, busca e folha da conta */
@media (max-width: 767px) {
  body:has(.modal-overlay.visible, .cmd-palette-overlay.visible, .user-menu.folha.open) { overflow: hidden; }
}

/* Modal: superfície reta com o fio de tinta no alto (o título fica com cada
   tela; as de pedidos e configurações usam Neohellenic em caixa alta) */
.modal {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--radius) var(--radius);
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.2s ease;
  display: flex;
  flex-direction: column;
}

@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(0.985); } to { opacity: 1; transform: none; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem 1.15rem 1.5rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
}
.modal-header h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.005em; }

.modal-body { padding: 1.5rem; flex: 1; }

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  position: sticky;
  bottom: 0;
  background: var(--card);
  z-index: 2;
}

/* Alert/Confirm dialog */
.dialog-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.dialog-overlay.visible { display: flex; animation: dialogFundoIn 0.16s ease; }
.dialog-overlay.saindo { display: flex; animation: dialogFundoOut 0.15s ease forwards; pointer-events: none; }
.dialog-overlay.saindo .dialog { animation: dialogOut 0.15s ease forwards; }
@keyframes dialogFundoIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialogFundoOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes dialogOut { to { opacity: 0; transform: scale(0.98); } }

/* Diálogo de confirmação: reto, fio de tinta no alto (carmim quando a ação
   apaga ou desfaz algo), pergunta em frase curta e as ações embaixo */
.dialog {
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-top: 2px solid var(--tinta);
  border-radius: 0 0 var(--radius) var(--radius);
  width: 100%;
  max-width: 440px;
  padding: 22px 24px 20px;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.18s ease;
}
.dialog.dialog-perigo { border-top-color: var(--red); }
.dialog h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.32; margin-bottom: 8px; color: var(--text); text-wrap: balance; }
.dialog p  { color: var(--text2); font-size: 0.9rem; margin-bottom: 24px; line-height: 1.6; text-wrap: pretty; }
.dialog h3:last-child { margin-bottom: 22px; }
/* Cancelar à esquerda, ação principal à direita (mesma ordem no foco) */
.dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.dialog-actions > button { min-height: 40px; padding-inline: 1.15rem; }

/* Celular: o diálogo vira folha de baixo, como os modais */
@media (max-width: 767px) {
  .dialog-overlay { padding: 0; align-items: flex-end; }
  .dialog {
    max-width: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: folhaSobe 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .dialog-actions > * { flex: 1 1 0; min-height: 46px; }
}

/* Avatar */
.avatar {
  border-radius: 50%;
  object-fit: cover;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.avatar-sm { width: 26px; height: 26px; font-size: 0.72rem; }
.avatar-md { width: 32px; height: 32px; font-size: 0.84rem; }
.avatar-lg { width: 40px; height: 40px; font-size: 1rem; }

/* Utilitários */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-blue { color: var(--blue); }
.text-muted { color: var(--text3); }
.text-sm { font-size: 0.8rem; }
.text-xs { font-size: 0.72rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Dot de status */
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-green  { background: var(--green); }
.dot-red    { background: var(--red); }
.dot-gold   { background: var(--gold); }
.dot-blue   { background: var(--blue); }
.dot-gray   { background: var(--text3); }

/* ── Foco visível — WCAG 2.11 ────────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Campos: anel de 2 px na cor de destaque. O navegador trata o foco num campo
   de texto como "visível" mesmo pelo mouse, então ele aparece sempre que o
   campo recebe o cursor (antes era só uma sombra de 12%, quase invisível) */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  box-shadow: none;
}

/* ── prefers-reduced-motion — 2.10 ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .skeleton::after { animation: none; }
}