/* =========================================================================
   ZYQ Studio — Painel
   Base visual: sistema Ventriloc (tema claro, papel quente, 95% neutro).
   Movimento: mesma linguagem do site principal (ZYQ Studio), trazida para
   um painel:
     - fontes do site: Bricolage Grotesque (display) + Figtree (texto)
     - easings do site: --ease-out, --ease-io, --spring
     - entrada em fade, revelacao com atraso, deriva de nevoa (70s),
       flutuacao continua, barra em gradiente que cresce
   Acento ZYQ: SOMENTE o acento muda.
     Ember Orange (#ff682c) -> gradiente da marca (#2E7CF6 -> #8B5CF6 -> #EC4899)
     Brass (#816729)        -> roxo solido (#8B5CF6)
   Sem sombra em lugar nenhum. Profundidade por tom de superficie.
   Todo movimento respeita prefers-reduced-motion.
   ========================================================================= */

/* --- Fontes (auto-hospedadas; CSP fechado, sem CDN) ---------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url('/static/fonts/bricolage-grotesque-latin-var.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('/static/fonts/figtree-latin-var.woff2') format('woff2-variations');
}

:root {
  /* Ventriloc — neutros */
  --graphite: #202020;
  --canvas: #ffffff;
  --ash: #efefef;
  --fog: #f5f5f5;
  --ivory: #ebe6dd;
  --steel: #4d4d4d;
  --slate: #828282;
  --mist: #e8e8e8;

  /* Acento ZYQ */
  --accent: #8B5CF6;
  --accent-ink: #6D28D9;
  --accent-wash: rgba(139, 92, 246, 0.10);
  --g1: #2E7CF6;
  --g2: #8B5CF6;
  --g3: #EC4899;
  --accent-grad: linear-gradient(90deg, #2E7CF6 0%, #8B5CF6 50%, #EC4899 100%);
  --danger: #DB2777;
  --danger-ink: #9D174D;
  --danger-wash: rgba(219, 39, 119, 0.10);

  /* Tipografia (do site) */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Movimento (do site) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* Espacamento (base 4px) */
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-36: 36px;
  --sp-40: 40px;
  --sp-60: 60px;
  --page-max: 1200px;

  /* Raios */
  --r-tags: 20px;
  --r-cards: 8px;
  --r-buttons: 0px;
  --r-pills: 200px;
  --r-asym: 6px 0 0 0;
}

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

html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  animation: pagein .7s var(--ease-out) both;
}

@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }

/* Névoa de fundo: muito suave, deriva em ciclo lento (como no site). */
.neb {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(46, 124, 246, 0.10), transparent 70%),
    radial-gradient(34% 30% at 78% 26%, rgba(139, 92, 246, 0.12), transparent 72%),
    radial-gradient(40% 34% at 60% 88%, rgba(236, 72, 153, 0.07), transparent 74%);
  filter: blur(20px);
  animation: drift 70s var(--ease-io) -20s infinite alternate;
  will-change: transform;
}

@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}

h1, h2, h3, .h1, .h2, .h3, .brand-word, .kpi-value, .amount, .total-value, .plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96;
  margin: 0;
  text-wrap: balance;
}

.h1 { font-size: 30px; line-height: 1.08; }
.h2 { font-size: 25px; line-height: 1.14; }
.h3 { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; }

p { margin: 0; }
a { color: inherit; }

.lede { color: var(--steel); font-size: 15px; margin-top: var(--sp-8); max-width: 60ch; }
.cap { color: var(--slate); text-transform: capitalize; }
.muted { color: var(--slate); font-size: 15px; }
.mono { font-variant-numeric: tabular-nums; color: var(--steel); font-size: 13px; }
.hint { color: var(--slate); font-size: 13px; margin-top: var(--sp-20); line-height: 1.5; }
.warn { color: var(--danger-ink); }
.prov { color: var(--accent-ink); text-transform: capitalize; }

/* Sublinhado que cresce: um fio de acento se estica sob o texto quando o
   ponteiro chega. A base em --mist fica sempre visível para o link continuar
   parecendo link mesmo sem hover. */
.link {
  color: var(--graphite);
  text-decoration: none;
  padding-bottom: 1px;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--mist), var(--mist));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: color .2s var(--ease-out), background-size .38s var(--ease-out);
}
.link:hover { color: var(--accent-ink); background-size: 100% 1px, 100% 1px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------- */
/* Movimento: revelação na entrada (com atraso) e flutuação contínua        */
/* ----------------------------------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { to { translate: 0 -6px; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulsedot {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

.rv { animation: rise .7s var(--ease-out) both; }
/* Atrasos por classe (não usamos style inline: a CSP bloqueia). */
.dl1 { animation-delay: .05s; }
.dl2 { animation-delay: .11s; }
.dl3 { animation-delay: .17s; }
.dl4 { animation-delay: .23s; }
.dl5 { animation-delay: .29s; }
.dl6 { animation-delay: .35s; }

/* Cascata nas listas longas, sem style inline. */
.cards > .rv:nth-child(1) { animation-delay: .02s; }
.cards > .rv:nth-child(2) { animation-delay: .07s; }
.cards > .rv:nth-child(3) { animation-delay: .12s; }
.cards > .rv:nth-child(4) { animation-delay: .17s; }
.cards > .rv:nth-child(5) { animation-delay: .22s; }
.cards > .rv:nth-child(6) { animation-delay: .27s; }
.cards > .rv:nth-child(7) { animation-delay: .32s; }
.cards > .rv:nth-child(8) { animation-delay: .37s; }
.cards > .rv:nth-child(n+9) { animation-delay: .4s; }
.list > .list-row { animation: rise .6s var(--ease-out) both; }
.list > .list-row:nth-child(2) { animation-delay: .07s; }
.list > .list-row:nth-child(3) { animation-delay: .14s; }
.list > .list-row:nth-child(4) { animation-delay: .21s; }
.list > .list-row:nth-child(5) { animation-delay: .28s; }
.list > .list-row:nth-child(n+6) { animation-delay: .32s; }

/* ----------------------------------------------------------------------- */
/* Botões                                                                   */
/* ----------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 12px 20px;
  border-radius: var(--r-buttons);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out),
              border-color .25s var(--ease-out), transform .25s var(--spring), opacity .25s var(--ease-out);
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:hover:not(:disabled) { transform: translateY(-1.5px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn-sm { font-size: 14px; padding: 9px 14px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--accent-grad);
  color: #fff;
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: gradflow 8s var(--ease-io) infinite alternate;
  transition: transform .25s var(--spring), color .25s var(--ease-out), opacity .25s var(--ease-out);
}
/* O gradiente vivo já dá o movimento; o hover responde com a elevação do .btn.
   Por cima, um brilho estreito atravessa e descansa até o próximo ciclo. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
  transform: translateX(-130%);
  animation: shine 7s var(--ease-io) infinite;
}
@keyframes gradflow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes shine {
  0%, 58% { transform: translateX(-130%); }
  86%, 100% { transform: translateX(130%); }
}

.btn-ghost {
  background: transparent;
  border-color: var(--graphite);
  color: var(--graphite);
}
.btn-ghost:hover:not(:disabled) { background: var(--graphite); color: #fff; }

.btn-danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger-ink);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-wash); }

/* ----------------------------------------------------------------------- */
/* Formulários                                                              */
/* ----------------------------------------------------------------------- */

.form { display: grid; gap: var(--sp-20); }
.form-grid { grid-template-columns: 1fr; }
.form-actions { display: flex; gap: var(--sp-12); flex-wrap: wrap; }

.field { display: grid; gap: 6px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
.field-inline { display: flex; align-items: center; gap: 10px; }
.field-inline input { width: 20px; height: 20px; accent-color: var(--accent); }

/* Nada dentro de um grid pode ser forçado além da coluna (min-content de
   <select>/<input> com texto longo estourava e era cortado no celular). */
.form-grid > *,
.search > *,
.row-card-actions > *,
.totals > *,
.cols > *,
.cards > *,
.kpis > * { min-width: 0; }

.label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: 0.01em;
}

.input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--graphite);
  background: var(--canvas);
  background-image: var(--accent-grad);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  border: 1px solid var(--mist);
  border-radius: var(--r-cards);
  padding: 12px 14px;
  min-height: 46px;
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), background-size .45s var(--ease-out);
}
.input::placeholder { color: var(--slate); }
.input:hover { border-color: #d9d9d9; }
.input:focus { border-color: var(--accent); outline: none; background-size: 100% 2px; }
textarea.input { resize: vertical; line-height: 1.45; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 38px; }

.input-code {
  font-size: 22px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------- */
/* Cartões e superfícies                                                    */
/* ----------------------------------------------------------------------- */

.card {
  background: var(--ash);
  border: 1px solid var(--mist);
  border-radius: var(--r-cards);
  padding: var(--sp-20);
  margin-bottom: var(--sp-20);
}
.card-asym { border-radius: var(--r-asym); }

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
}

.create-card { padding: 0; overflow: hidden; }
.create-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-20);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color .2s var(--ease-out);
}
.create-summary::-webkit-details-marker { display: none; }
.create-summary:hover { color: var(--accent-ink); }
/* A seta substitui o antigo "+/–": gira em vez de trocar de glifo. */
.create-summary .sum-ico { width: 18px; height: 18px; flex: none; color: var(--accent-ink); }
.create-summary .sum-chev { width: 18px; height: 18px; margin-left: auto; color: var(--slate); transition: transform .32s var(--ease-out); }
details[open] > .create-summary .sum-chev { transform: rotate(180deg); color: var(--accent-ink); }
.create-card[open] > .create-summary { border-bottom: 1px solid var(--mist); }
.create-card > form, .create-card > .muted { padding: var(--sp-20); margin: 0; }
.create-card[open] > form, .create-card[open] > .muted { animation: rise .5s var(--ease-out) both; }

.banner-exemplos {
  background: var(--ivory);
  border-radius: var(--r-asym);
  padding: var(--sp-20);
  margin-bottom: var(--sp-20);
  display: grid;
  gap: var(--sp-16);
}
.banner-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.banner-text { color: var(--steel); font-size: 15px; margin-top: 6px; }

/* KPIs — uma faixa única de números: uma só superfície e células divididas
   por fios, em vez de quatro cartões soltos. Fica mais leve e alinha melhor:
   no celular 2×2, no desktop 4 em linha. A célula acende no hover. */
.kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  background: var(--fog);
  border: 1px solid var(--mist);
  border-radius: var(--r-tags);
  overflow: hidden;
  margin-bottom: var(--sp-20);
}
.kpi {
  padding: var(--sp-16);
  display: grid;
  gap: 6px;
  align-content: start;
  border-bottom: 1px solid var(--mist);
  transition: background-color .35s var(--ease-out);
}
.kpi:nth-child(odd) { border-right: 1px solid var(--mist); }
.kpi:nth-child(3),
.kpi:nth-child(4) { border-bottom: none; }
/* Só acende onde existe hover de verdade: no toque o branco ficava "colado". */
@media (hover: hover) {
  .kpi:hover { background: var(--canvas); }
}
.kpi-label { font-size: 12px; font-weight: 600; color: var(--slate); letter-spacing: 0.01em; }
.kpi-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: 13px; color: var(--steel); }

/* O número principal recebe o gradiente da marca. Fica no roxo sólido quando
   o navegador não sabe recortar fundo no texto (nunca texto invisível). */
.kpi-value-grad { color: var(--accent-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kpi-value-grad {
    background: var(--accent-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ----------------------------------------------------------------------- */
/* Navegação                                                                */
/* ----------------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mist);
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.topbar.is-scrolled { background: rgba(255, 255, 255, 0.96); border-bottom-color: #dcdcdc; }
/* Fio de acento sob a barra: 1px de marca, discreto. */
.topbar::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent-grad);
  opacity: .5;
}
.topbar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-12) var(--sp-16);
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-grad);
  flex: none;
  animation: floaty 3.6s var(--ease-io) infinite alternate, pulsedot 3.6s var(--ease-io) infinite;
}
.brand-word { font-size: 19px; letter-spacing: -0.02em; font-weight: 700; }
.brand-thin { color: var(--slate); font-weight: 400; }
.brand-lg .brand-word { font-size: 22px; }

/* Mobile: as seções viram uma grade de tags que PREENCHE as duas linhas —
   3 na primeira e as 2 últimas mais largas na segunda. Era o defeito da grade
   de 3 colunas: com 5 itens sobrava uma célula vazia, parecendo desalinhado.
   Grade de 6 colunas: as 3 primeiras ocupam 2 colunas cada, as 2 últimas 3
   cada (2 × 3 = 6), então nenhuma linha fica com buraco. */
.navpill {
  order: 3;
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
}
.navlink {
  grid-column: span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 8px;
  border-radius: var(--r-tags);
  background: var(--ash);
  border: 1px solid var(--mist);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  color: var(--graphite);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--spring);
}
.navlink:nth-child(4),
.navlink:nth-child(5) { grid-column: span 3; }
.navlink:hover { transform: translateY(-1px); }
.navlink:active { transform: translateY(0); }

/* Ícone das seções: só aparece na barra inferior do celular. */
.navlink-ico { display: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.navlink.is-active {
  background: var(--accent-wash);
  border-color: rgba(139, 92, 246, 0.28);
  color: var(--accent-ink);
}
.topbar-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-12); }
.who { display: none; }

/* ----------------------------------------------------------------------- */
/* Página                                                                   */
/* ----------------------------------------------------------------------- */

.page { position: relative; z-index: 1; max-width: var(--page-max); margin: 0 auto; padding: var(--sp-20) var(--sp-16) var(--sp-60); }

.page-head { display: grid; gap: var(--sp-16); margin-bottom: var(--sp-20); }
.page-actions { display: flex; gap: var(--sp-12); flex-wrap: wrap; }

.toolbar { margin-bottom: var(--sp-20); }
.search { display: flex; gap: var(--sp-12); flex-wrap: wrap; align-items: center; }
.search .input { flex: 1 1 200px; }
.search select.input { flex: 0 1 160px; }

.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); margin-bottom: var(--sp-20); }
.total { background: var(--fog); border-radius: var(--r-cards); padding: var(--sp-12) var(--sp-16); display: grid; gap: 4px; }
.total-label { font-size: 11px; color: var(--slate); font-weight: 600; }
.total-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------- */
/* Listas de registros                                                      */
/* ----------------------------------------------------------------------- */

.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-12); }
.row-card {
  background: var(--ash);
  border-radius: var(--r-cards);
  padding: var(--sp-16);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-12);
  transition: transform .35s var(--spring), background-color .35s var(--ease-out);
}
.row-card:hover { transform: translateY(-2px); }
.row-card.is-paid { background: var(--fog); }
.row-card-main { min-width: 0; }
.row-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.row-sub { color: var(--steel); font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; }
.row-dates { color: var(--slate); font-size: 13px; margin-top: 3px; }
.row-card-side { display: flex; align-items: baseline; gap: var(--sp-12); min-width: 0; flex-wrap: wrap; }
.amount { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.status-tag { font-size: 12px; font-weight: 600; border-radius: var(--r-tags); padding: 3px 10px; }
.status-tag.is-paid { background: var(--accent-wash); color: var(--accent-ink); }
.status-tag.is-pending { background: #e4e4e4; color: var(--steel); }
.row-card-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: start; min-width: 0; }

.editor { position: relative; min-width: 0; max-width: 100%; }
.editor > summary { list-style: none; cursor: pointer; }
.editor > summary::-webkit-details-marker { display: none; }
.editor[open] > .form { margin-top: var(--sp-12); animation: rise .5s var(--ease-out) both; }
.danger-form { margin-top: var(--sp-12); }

.list { list-style: none; padding: 0; margin: 0; }
.list-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-12);
  padding: 12px 0;
  border-bottom: 1px solid var(--mist);
}
.list-row:last-child { border-bottom: none; }
.row-text { display: grid; gap: 2px; min-width: 0; }
.row-main { font-weight: 600; overflow-wrap: anywhere; }
.row-text .row-sub { margin-top: 0; font-size: 13px; color: var(--slate); }
.row-value { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-meta { color: var(--slate); font-size: 13px; }

/* Disco de identificação das listas: iniciais no acento, sobre o cartão. */
.avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cols { display: grid; gap: var(--sp-20); }

/* ----------------------------------------------------------------------- */
/* Etapas do projeto                                                        */
/* ----------------------------------------------------------------------- */

.stages { list-style: none; display: flex; margin: 0 0 var(--sp-12); padding: 0; gap: 4px; flex-wrap: wrap; }
.stage {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-tags);
  background: #e4e4e4;
  color: var(--steel);
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.stage.done { background: var(--accent-wash); color: var(--accent-ink); }
.stage.current {
  background: var(--accent-grad);
  color: #fff;
  background-size: 180% 100%;
  animation: stageshift 6s var(--ease-io) infinite alternate;
}
@keyframes stageshift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.stage-actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }

/* ----------------------------------------------------------------------- */
/* Badges                                                                   */
/* ----------------------------------------------------------------------- */

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: var(--r-tags);
  background: #e4e4e4;
  color: var(--steel);
  letter-spacing: 0.01em;
}
.badge-ex { background: var(--accent-wash); color: var(--accent-ink); }
.badge-off { background: var(--canvas); color: var(--slate); border: 1px solid var(--mist); }
.badge-stage { background: var(--canvas); color: var(--steel); border: 1px solid var(--mist); }
.badge-origin { background: var(--canvas); color: var(--steel); border: 1px solid var(--mist); }
.badge-origin-site { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }

/* Etiqueta de contexto (mês do resumo, total do período). Reutilizável. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--r-pills);
  background: var(--fog);
  border: 1px solid var(--mist);
  color: var(--steel);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------- */
/* Gráfico de colunas — fios de grade, valor sobre a coluna e o mês atual    */
/* no gradiente. Sem a caixa cinza em volta da coluna (era o que deixava o   */
/* gráfico com cara de não terminado).                                      */
/* ----------------------------------------------------------------------- */

.chart { position: relative; }
.bars { position: relative; z-index: 1; display: flex; align-items: stretch; gap: var(--sp-12); height: 176px; }
.bar { flex: 1; min-width: 0; height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
/* A coluna ocupa a área alta e a etiqueta do mês fica na base (a ordem do
   grid não segue o DOM: aqui a etiqueta vem antes da coluna no HTML). */
.bar-col { grid-row: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; justify-items: center; }
.bar-track { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar-fill {
  width: 100%;
  max-width: 40px;
  min-height: 3px;
  background: #cdbcf8;
  border-radius: 6px 6px 2px 2px;
  transform-origin: 50% 100%;
  animation: grow .9s var(--ease-io) both;
}
.bar:last-child .bar-fill { background: var(--accent-grad); }
.bar:nth-child(1) .bar-fill { animation-delay: .05s; }
.bar:nth-child(2) .bar-fill { animation-delay: .12s; }
.bar:nth-child(3) .bar-fill { animation-delay: .19s; }
.bar:nth-child(4) .bar-fill { animation-delay: .26s; }
.bar:nth-child(5) .bar-fill { animation-delay: .33s; }
.bar:nth-child(6) .bar-fill { animation-delay: .40s; }
.bar-label { grid-row: 2; font-size: 11px; color: var(--slate); text-transform: capitalize; text-align: center; }
.bar-value { font-size: 11px; color: var(--steel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar:hover .bar-value { color: var(--graphite); }

/* Fios de grade alinhados com a área de plotagem das colunas (o topo deixa o
   espaço do valor e a base, o da etiqueta do mês). */
.chart-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  bottom: 27px;
  z-index: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  pointer-events: none;
}
.chart-grid span { border-top: 1px dashed #dedede; }
.chart-grid span:last-child { border-bottom: 1px solid #d2d2d2; }

.h0 { height: 0%; } .h5 { height: 5%; } .h10 { height: 10%; } .h15 { height: 15%; }
.h20 { height: 20%; } .h25 { height: 25%; } .h30 { height: 30%; } .h35 { height: 35%; }
.h40 { height: 40%; } .h45 { height: 45%; } .h50 { height: 50%; } .h55 { height: 55%; }
.h60 { height: 60%; } .h65 { height: 65%; } .h70 { height: 70%; } .h75 { height: 75%; }
.h80 { height: 80%; } .h85 { height: 85%; } .h90 { height: 90%; } .h95 { height: 95%; }
.h100 { height: 100%; }

/* ----------------------------------------------------------------------- */
/* Tabela (auditoria)                                                       */
/* ----------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--mist); vertical-align: top; }
.table th { font-size: 12px; font-weight: 600; color: var(--slate); }
.table td { color: var(--steel); }
.table tbody tr { transition: background-color .2s var(--ease-out); }
.table tbody tr:hover { background: var(--fog); }

/* ----------------------------------------------------------------------- */
/* Feedback                                                                 */
/* ----------------------------------------------------------------------- */

.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-cards); font-size: 15px; margin-bottom: var(--sp-20); animation: rise .5s var(--ease-out) both; }
.flash-ok { background: var(--accent-wash); color: var(--accent-ink); }
.flash-erro { background: var(--danger-wash); color: var(--danger-ink); }
.flash.is-out { opacity: 0; transform: translateY(-6px); transition: opacity .4s var(--ease-out), transform .4s var(--ease-out); }

/* ----------------------------------------------------------------------- */
/* Autenticação — telas de acesso                                           */
/* Fundo vivo (névoa em contra-deriva + aura girando) e cartão com anel de   */
/* gradiente; nenhum sombra, tudo em transform (leve no celular).           */
/* ----------------------------------------------------------------------- */

body.auth { background: var(--ash); }
body.auth .neb { opacity: .9; }

/* Segunda camada de névoa só nas telas de acesso: deriva na direção oposta. */
body.auth .neb::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 26% at 16% 78%, rgba(139, 92, 246, 0.18), transparent 72%),
    radial-gradient(26% 24% at 84% 70%, rgba(46, 124, 246, 0.16), transparent 72%);
  animation: drift2 34s var(--ease-io) -6s infinite alternate;
}
@keyframes drift2 {
  from { transform: translate3d(4%, 3%, 0) scale(1.05); }
  to { transform: translate3d(-4%, -3%, 0) scale(1); }
}

.auth-wrap { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-20); }

/* Aura de cor girando devagar atrás do cartão. */
.auth-wrap::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(72vmin, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(46, 124, 246, 0.34),
    rgba(139, 92, 246, 0.34),
    rgba(236, 72, 153, 0.28),
    rgba(46, 124, 246, 0.34));
  filter: blur(64px);
  opacity: .6;
  pointer-events: none;
  animation: aura 26s linear infinite;
}
@keyframes aura { to { transform: rotate(1turn); } }

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--canvas);
  border-radius: var(--r-asym);
  padding: var(--sp-36) var(--sp-20);
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: var(--sp-16);
  animation: cardin .8s var(--spring) both;
}
@keyframes cardin {
  from { opacity: 0; transform: translateY(22px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Anel de gradiente que gira em volta do cartão — contorno, não sombra. */
@property --ring { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.auth-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--ring), var(--g1), var(--g2), var(--g3), var(--g2), var(--g1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .75;
  animation: ringspin 16s linear infinite;
}
@keyframes ringspin { to { --ring: 360deg; } }

.auth-card-wide { max-width: 560px; }
.auth-card .h1 { font-size: 28px; }
.auth-card .form { margin-top: var(--sp-8); }

/* A sub-linha de acento ao focar agora é do próprio .input (vale em todo o
   painel, não só nas telas de acesso). */

/* O botão principal herda o gradiente vivo do resto do painel (gradflow);
   aqui só o gradiente é mais largo, para o deslize ficar mais visível. */
.auth-card .btn-primary { background-size: 260% 100%; }

.qr-block { display: grid; gap: var(--sp-20); justify-items: center; }
.qr { border-radius: var(--r-cards); background: var(--canvas); animation: floaty 5s var(--ease-io) infinite alternate; }
.qr-side { display: grid; gap: 10px; justify-items: center; text-align: center; }
.secret { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--fog); padding: 8px 12px; border-radius: var(--r-cards); word-break: break-all; }

.empty-state { position: relative; z-index: 1; display: grid; gap: var(--sp-12); justify-items: center; text-align: center; padding: var(--sp-60) var(--sp-20); }
.empty-code { font-family: var(--font-display); font-size: 52px; font-weight: 800; color: var(--slate); }

/* ----------------------------------------------------------------------- */
/* Rodapé                                                                   */
/* ----------------------------------------------------------------------- */

.foot { position: relative; z-index: 1; border-top: 1px solid var(--mist); margin-top: var(--sp-40); }
.foot-note { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-20) var(--sp-16); color: var(--slate); font-size: 12px; }

/* ----------------------------------------------------------------------- */
/* Desktop                                                                  */
/* ----------------------------------------------------------------------- */

@media (min-width: 720px) {
  .h1 { font-size: 40px; }
  .kpi-value { font-size: 36px; }
  .page { padding: var(--sp-36) var(--sp-20) var(--sp-60); }
  .page-head { grid-template-columns: 1fr auto; align-items: end; }
  .page-actions { justify-content: flex-end; }
  .card { padding: var(--sp-40); }
  .create-card { padding: 0; }
  .create-summary, .create-card > form, .create-card > .muted { padding: var(--sp-20) var(--sp-40); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi { padding: var(--sp-20); border-bottom: none; border-right: 1px solid var(--mist); }
  .kpi:last-child { border-right: none; }
  .bars { height: 208px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .cols { grid-template-columns: 1fr 1fr; }
  .row-card { grid-template-columns: 1fr auto; }
  .row-card-actions { grid-column: 2; justify-content: flex-end; }
  .row-card-side { grid-column: 2; justify-content: flex-end; }
  .topbar-inner { padding: var(--sp-12) var(--sp-20); }

  /* Tablet: as 5 seções continuam numa linha própria abaixo da marca, agora
     com 5 colunas iguais — uma linha só, sem buraco. */
  .navpill { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .navlink,
  .navlink:nth-child(4),
  .navlink:nth-child(5) { grid-column: auto; }
  .who { display: inline; color: var(--slate); font-size: 13px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-card { padding: var(--sp-40); }
  .qr-block { grid-template-columns: auto 1fr; justify-items: start; align-items: center; }
  .qr-side { justify-items: start; text-align: left; }
}

/* Desktop: marca à esquerda, seções centradas e "Sair" à direita, todos na
   mesma linha. Aqui a grade substitui o flex: 1fr | auto | 1fr deixa a barra
   de seções exatamente no centro da página, sem as margens `auto` brigando
   (era o que jogava o "Sair" para o meio). Precisa de ~826px para a marca
   (106px) e o "Sair" (68px) caberem ao lado da barra (540px), daí o corte
   em 840px. */
@media (min-width: 840px) {
  .topbar-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--sp-16);
    flex-wrap: nowrap;
  }
  .brand { grid-column: 1; justify-self: start; white-space: nowrap; }
  .navpill {
    grid-column: 2;
    order: 0;
    flex-basis: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 6px;
    background: var(--ash);
    border-radius: var(--r-pills);
  }
  .navlink {
    grid-column: auto;
    flex: none;
    min-height: 0;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-pills);
  }
  .navlink:nth-child(4),
  .navlink:nth-child(5) { grid-column: auto; }
  .navlink:hover { background: rgba(255, 255, 255, 0.6); transform: none; }
  .navlink:active { transform: none; }
  .navlink.is-active { background: var(--canvas); border-color: transparent; }
  .topbar-end { grid-column: 3; justify-self: end; margin-left: 0; }
}

@media (min-width: 1000px) {
  .totals { grid-template-columns: repeat(3, minmax(0, 220px)); }
}

/* Acessibilidade: alvos de toque confortáveis no celular. */
@media (max-width: 719px) {
  .btn { padding: 13px 18px; }
  .row-card-actions .btn { flex: 1 1 auto; }

  /* Navegação vira barra inferior fixa, como app: o topo fica só com a marca e
     o "Sair" e o conteúdo ganha a tela inteira — a grade no topo ocupava ~20%
     da tela o tempo todo. O topo perde o "backdrop-filter" aqui porque ele
     viraria o bloco de referência da barra fixa (ela não grudaria na janela);
     a própria barra traz o seu desfoque. */
  .topbar { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .navpill {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--mist);
  }
  .navlink,
  .navlink:nth-child(4),
  .navlink:nth-child(5) {
    grid-column: auto;
    flex-direction: column;
    gap: 3px;
    min-height: 46px;
    padding: 4px 2px;
    background: transparent;
    border-color: transparent;
    border-radius: var(--r-cards);
    font-size: 11px;
    letter-spacing: 0;
    color: var(--slate);
  }
  .navlink-ico { display: block; width: 19px; height: 19px; }
  .navlink:hover,
  .navlink:active { transform: none; }
  .navlink.is-active { background: var(--accent-wash); border-color: transparent; }
  /* Nada fica escondido atrás da barra. */
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }

  /* O gráfico de 6 colunas não cabe com os valores no celular. Vira uma
     lista de barras horizontais: rótulo, barra e valor, tudo visível. */
  .chart-grid { display: none; }
  .bars { flex-direction: column; gap: 10px; height: auto; align-items: stretch; }
  .bar {
    flex: none;
    height: auto;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-rows: auto;
    grid-template-areas: "label track value";
    align-items: center;
    gap: 10px;
  }
  /* O rótulo, a barra e o valor passam a ser itens da própria linha. */
  .bar-col { display: contents; }
  .bar-label { grid-area: label; text-align: left; }
  .bar-track {
    grid-area: track;
    display: block;
    width: 100%;
    max-width: none;
    height: 12px;
    border-radius: 999px;
    background: var(--mist);
    overflow: hidden;
  }
  .bar-fill { height: 100% !important; min-height: 0; max-width: none; border-radius: 999px; transform: none; animation: none; }
  .bar-value { grid-area: value; text-align: right; }
  .h0 { width: 0%; } .h5 { width: 5%; } .h10 { width: 10%; } .h15 { width: 15%; }
  .h20 { width: 20%; } .h25 { width: 25%; } .h30 { width: 30%; } .h35 { width: 35%; }
  .h40 { width: 40%; } .h45 { width: 45%; } .h50 { width: 50%; } .h55 { width: 55%; }
  .h60 { width: 60%; } .h65 { width: 65%; } .h70 { width: 70%; } .h75 { width: 75%; }
  .h80 { width: 80%; } .h85 { width: 85%; } .h90 { width: 90%; } .h95 { width: 95%; }
  .h100 { width: 100%; }
  .table, .table thead, .table tbody, .table tr, .table td { display: block; }
  .table thead { display: none; }
  .table tr { border-bottom: 1px solid var(--mist); padding: 10px 0; }
  .table td { border: none; padding: 3px 0; }
  .table td[data-label]::before { content: attr(data-label) ': '; color: var(--slate); font-size: 12px; }
}

/* ----------------------------------------------------------------------- */
/* Movimento v2 — a camada de interação                                     */
/* Vocabulário tirado das vitrines de movimento, escrito na língua do       */
/* painel: só transform/opacity (barato no celular), zero sombra, zero cor  */
/* nova, tudo dentro do acento ZYQ. Sem JS nada quebra: os efeitos são      */
/* verniz, não estrutura.                                                   */
/* ----------------------------------------------------------------------- */

/* 1. Transição entre telas. O cruzamento suave do navegador (o antigo sobe e
   some, o novo sobe e entra) tira aquele "piscar" do clique de navegação. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: vt-out .26s var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in .44s var(--ease-out) both; }

/* 2. Fio de progresso da rolagem, fixo no topo. Criado por JS. */
.nav-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  background: var(--accent-grad);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* 3. Luz que segue o ponteiro nos cartões. Só existe onde há ponteiro real:
   no toque fica desligada (não deixa mancha grudada). */
@media (hover: hover) {
  .spot { position: relative; }
  .spot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
                rgba(139, 92, 246, 0.09), transparent 62%);
    opacity: 0;
    transition: opacity .4s var(--ease-out);
  }
  .spot:hover::before { opacity: 1; }
}

/* 4. Onda no clique dos botões. */
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: currentColor;
  opacity: .16;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .62s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* 5. Cascata nas linhas da auditoria (ordem atribuída por JS em --i). */
.table tbody tr { animation: rise .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 26ms); }
@media (hover: hover) {
  .table tbody tr { transition: background-color .25s var(--ease-out); }
  .table tbody tr:hover { background: var(--fog); }
}

/* 6. Listas: fio de acento que cresce e disco que responde ao ponteiro. */
.list-row { position: relative; }
.list-row::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 50%;
  width: 2px;
  height: 0;
  translate: 0 -50%;
  border-radius: 2px;
  background: var(--accent-grad);
  transition: height .32s var(--ease-out);
}
.list-row .avatar { transition: transform .35s var(--spring); }
@media (hover: hover) {
  .list-row:hover::after { height: 62%; }
  .list-row:hover .avatar { transform: translateY(-2px) scale(1.07); }
}

/* 7. Ícone da barra inferior se ergue sob o dedo. */
@media (max-width: 719px) {
  .navlink-ico { transition: transform .3s var(--spring); }
  .navlink:hover .navlink-ico,
  .navlink:active .navlink-ico { transform: translateY(-2px); }
}

/* 8. Régua de acento que se desenha sob o título da página. */
.page-head { position: relative; }
.page-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 1px;
  background: linear-gradient(90deg, var(--g2), rgba(139, 92, 246, 0) 78%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: drawline .9s var(--ease-out) .18s forwards;
}
@keyframes drawline { to { transform: scaleX(1); } }

/* 9. Indicador que desliza na barra de seções (desktop). O item ativo não
   pinta mais o próprio fundo: quem pinta é esta pílula, que caminha. */
.nav-indicator { display: none; }
@media (min-width: 840px) {
  .nav-indicator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    display: block;
    width: var(--iw, 0);
    transform: translateX(var(--ix, 0));
    border-radius: var(--r-pills);
    background: var(--canvas);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: transform .42s var(--spring), width .42s var(--spring), opacity .3s var(--ease-out);
  }
  .navlink { position: relative; z-index: 1; background: transparent; }
  .navlink.is-active { background: transparent; border-color: transparent; }
}

/* 10. Anel de progresso dos pagamentos (SVG; o traço se desenha). */
.ring-wrap { display: none; }
.ring { width: 58px; height: 58px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--mist); stroke-width: 4; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease-out); }
.ring-label {
  position: absolute;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) {
  .ring-wrap { display: grid; place-items: center; position: relative; }
}

/* Seleção de texto no tom do acento. */
::selection { background: rgba(139, 92, 246, 0.22); }

/* ----------------------------------------------------------------------- */
/* Visual v2 — ícones e acabamento                                          */
/* Onde há ícone, ele é traço fino de 24×24 herdando a cor do texto. O       */
/* movimento dos ícones é mínimo: um gesto por intenção, nada de dança.      */
/* ----------------------------------------------------------------------- */

/* Base dos ícones. O tamanho padrão acompanha a fonte; as classes específicas
   (.title-ico, .sec-ico, .btn .ico) sobrescrevem. Nenhum ícone tem cor própria:
   todos herdam currentColor. */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -0.16em;
  transition: transform .32s var(--spring);
}

/* Tile de acento ao lado do título da página. */
.ph-title { display: flex; align-items: center; gap: var(--sp-12); }
.title-ico {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: var(--r-cards);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* Selo de ícone nas cabeças de cartão. */
.card-head { align-items: center; }
.card-head .h3 { margin-right: auto; }
.sec-ico {
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: var(--r-cards);
  background: var(--accent-wash);
  color: var(--accent-ink);
}

/* Ícone das células de KPI e o fio de acento que cresce no topo da célula. */
.kpi { position: relative; }
.kpi-top { display: flex; align-items: center; gap: 8px; }
.kpi-ico { width: 18px; height: 18px; color: var(--slate); }
.kpi::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--accent-grad);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .4s var(--ease-out);
}
@media (hover: hover) {
  .kpi:hover .kpi-ico { color: var(--accent-ink); transform: translateY(-1px) scale(1.1); }
  .kpi:hover::after { transform: scaleX(1); }
}

/* Ícones dos botões: tamanho próprio e um gesto por tipo de ação. */
.btn .ico { width: 17px; height: 17px; }
.btn-sm .ico { width: 15px; height: 15px; }
.btn:hover:not(:disabled) .i-go { transform: translateX(3px); }
.btn:hover:not(:disabled) .i-back { transform: translateX(-3px); }
.btn:hover:not(:disabled) .i-out { transform: translateX(3px); }
.btn:hover:not(:disabled) .i-spin { transform: rotate(90deg); }
.btn:hover:not(:disabled) .i-drop { transform: translateY(2.5px); }
.btn:hover:not(:disabled) .i-tilt { transform: rotate(-7deg); }
.btn:hover:not(:disabled) .i-search { transform: rotate(-10deg) scale(1.06); }
.btn:hover:not(:disabled) .i-zoom { transform: scale(1.15); }

/* Campo de texto com ícone à esquerda (telas de acesso). */
.input-wrap { position: relative; display: block; }
.input-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  translate: 0 -50%;
  width: 18px;
  height: 18px;
  color: var(--slate);
  pointer-events: none;
  transition: color .25s var(--ease-out);
}
.input-wrap:focus-within .input-ico { color: var(--accent-ink); }
.input-has-ico { padding-left: 42px; }

/* Estado vazio com ícone (linhas e telas de "nada aqui"). */
.empty-inline { display: flex; align-items: center; gap: 10px; color: var(--slate); font-size: 15px; }
.empty-inline .ico { width: 20px; height: 20px; }
.empty-ico { width: 48px; height: 48px; color: var(--slate); animation: floaty2 5s var(--ease-io) infinite alternate; }
@keyframes floaty2 { to { translate: 0 -6px; } }

/* Ícone das ações na tabela de auditoria. */
.act { display: inline-flex; align-items: center; gap: 8px; }
.act-ico { width: 24px; height: 24px; padding: 5px; border-radius: var(--r-cards); background: var(--fog); color: var(--steel); }
.act-ico.is-ok { background: var(--accent-wash); color: var(--accent-ink); }
.act-ico.is-danger { background: var(--danger-wash); color: var(--danger-ink); }

/* Etiquetas, chips e totais com ícone. */
.chip .ico { width: 13px; height: 13px; color: var(--slate); }
.total-label { display: flex; align-items: center; gap: 6px; }
.total-label .ico { width: 14px; height: 14px; color: var(--slate); }

/* Selo de status com ponto: lê-se de longe sem depender da cor. */
.status-tag { display: inline-flex; align-items: center; gap: 6px; }
.status-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Cartão de registro: fio de acento que sobe pela esquerda no hover. */
.row-card { position: relative; }
.row-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: var(--r-cards) 0 0 var(--r-cards);
  background: var(--accent-grad);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .35s var(--ease-out);
}
@media (hover: hover) { .row-card:hover::before { transform: scaleY(1); } }

/* Ícone do flash e do rodapé. */
.flash .ico { width: 19px; height: 19px; }
.foot-note .ico { display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--slate); }

/* O ícone da seção ativa dá um pulo único ao entrar na tela. */
@keyframes icoPop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
.navlink.is-active .navlink-ico { animation: icoPop .5s var(--spring); }

/* Ícones dentro de textos e rótulos: acompanham a fonte do contexto. */
.link .ico { width: 1em; height: 1em; vertical-align: -0.14em; color: var(--accent-ink); }
.link:hover .i-go { transform: translateX(2px); }
.label .ico { width: 13px; height: 13px; color: var(--slate); }
.hint .ico { width: 14px; height: 14px; color: var(--slate); vertical-align: -0.22em; }
.banner-title .ico { width: 18px; height: 18px; color: var(--accent-ink); vertical-align: -0.24em; }
.badge .ico { width: 12px; height: 12px; }

/* ----------------------------------------------------------------------- */
/* Movimento reduzido: nada anima, tudo aparece pronto                      */
/* ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    animation-delay: 0s !important;
  }
  .bar-fill { transform: none; }
  .rv, .flash { opacity: 1; transform: none; }
  /* Os pseudo-elementos de transição de tela não são atingidos pelo `*`. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .nav-progress { transform: none; opacity: 0; }
  .nav-indicator, .ring-fg, .list-row::after, .navlink-ico { transition: none !important; }
}