/* =====================================================================
   Painel de Aprovação de Pedidos — design system
   Baseado em APPLE_STYLE.md: fonte do sistema, materiais translúcidos,
   resposta no pointer-down, movimento curto e interrompível, tracking
   por tamanho, reduced-motion / reduced-transparency.
   ===================================================================== */

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f2f2f5;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #a1a1a6;
  --accent: #0071e3;
  --accent-hover: #0077ed;
  --accent-soft: rgba(0, 113, 227, 0.12);
  --success: #34c759;
  --success-soft: rgba(52, 199, 89, 0.14);
  --warning: #ff9f0a;
  --warning-soft: rgba(255, 159, 10, 0.16);
  --danger: #ff3b30;
  --danger-soft: rgba(255, 59, 48, 0.12);
  --info: #5ac8fa;
  --info-soft: rgba(90, 200, 250, 0.16);
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.16);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --sombra-rolagem: rgba(0, 0, 0, 0.14);
  --etiqueta: #b25000;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 0.32s;
  --dur-fast: 0.12s;
  --topbar-h: 3.5rem;
  --largura-pagina: 1440px;
  --gutter: 1.25rem;
  --gutter-mobile: 0.85rem;
  --grad-accent: linear-gradient(135deg, #0a84ff 0%, #5e5ce6 55%, #bf5af2 100%);
  --grad-hero: linear-gradient(120deg, rgba(10, 132, 255, 0.16), rgba(94, 92, 230, 0.12) 50%, rgba(191, 90, 242, 0.1));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --glass: rgba(28, 28, 30, 0.72);
    --glass-strong: rgba(28, 28, 30, 0.88);
    --text: #f5f5f7;
    --text-2: #98989d;
    --text-3: #636366;
    --accent: #0a84ff;
    --accent-hover: #409cff;
    --accent-soft: rgba(10, 132, 255, 0.2);
    --success: #30d158;
    --success-soft: rgba(48, 209, 88, 0.18);
    --warning: #ffd60a;
    --warning-soft: rgba(255, 214, 10, 0.16);
    --danger: #ff453a;
    --danger-soft: rgba(255, 69, 58, 0.18);
    --info: #64d2ff;
    --info-soft: rgba(100, 210, 255, 0.16);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.2);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sombra-rolagem: rgba(0, 0, 0, 0.9);
  --etiqueta: #ff9f0a;
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: #2c2c2e;
  --glass: rgba(28, 28, 30, 0.72);
  --glass-strong: rgba(28, 28, 30, 0.88);
  --text: #f5f5f7;
  --text-2: #98989d;
  --text-3: #636366;
  --accent: #0a84ff;
  --accent-hover: #409cff;
  --accent-soft: rgba(10, 132, 255, 0.2);
  --success: #30d158;
  --success-soft: rgba(48, 209, 88, 0.18);
  --warning: #ffd60a;
  --warning-soft: rgba(255, 214, 10, 0.16);
  --danger: #ff453a;
  --danger-soft: rgba(255, 69, 58, 0.18);
  --info: #64d2ff;
  --info-soft: rgba(100, 210, 255, 0.16);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.2);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --sombra-rolagem: rgba(0, 0, 0, 0.9);
  --etiqueta: #ff9f0a;
}

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

html {
  font: 100%/1.5 var(--font);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
}

.display {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.titulo {
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.caption {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-2);
  /* texto secundário nunca empurra o layout: chaves de parâmetro e e-mails são
     tokens longos sem espaço, e no celular jogavam a página para fora da tela */
  overflow-wrap: anywhere;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.oculto {
  display: none !important;
}

/* seções de aba: o [hidden] do navegador perde para o display:flex de .pilha,
   então as abas escondidas continuavam visíveis empilhadas */
.aba[hidden] {
  display: none;
}

/* ---------- barra superior (material translúcido) ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1rem;
  /* alinha o conteúdo do topo com a coluna da .pagina, inclusive em telas largas */
  padding: 0 max(var(--gutter), calc((100% - var(--largura-pagina)) / 2 + var(--gutter)));
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
}

/* marca = só o ícone (o nome da empresa fica no hero do Início) */
.topbar__marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
}

.topbar__marca:hover {
  text-decoration: none;
}


.topbar__marca .lucide {
  width: 1.35rem;
  height: 1.35rem;
}

.topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.topbar__nav::-webkit-scrollbar {
  display: none;
}

.topbar__nav a {
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out;
}

.topbar__nav a:hover {
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}

.topbar__nav a.ativo {
  background: var(--accent-soft);
  color: var(--accent);
}

.topbar__usuario {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-2);
  font-size: 0.875rem;
  white-space: nowrap;
}

.topbar__usuario .btn svg {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform var(--dur) var(--ease);
}

.topbar__usuario .btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* menu do usuário (dropdown) */
.menu {
  position: relative;
}

.menu__lista {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 13rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  transform-origin: top right;
  animation: folha-entrar 0.2s var(--ease);
  z-index: 60;
}

.menu__lista[hidden] {
  display: none;
}

.menu__titulo {
  padding: 0.4rem 0.6rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

.menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out, transform 100ms ease-out;
}

.menu__item:hover {
  background: var(--surface-2);
}

.menu__item:active {
  transform: scale(0.98);
}

.menu__item.ativo {
  color: var(--accent);
}

.menu__item.ativo::after {
  content: "✓";
  font-weight: 700;
}

.menu__separador {
  height: 1px;
  margin: 0.3rem 0.2rem;
  background: var(--border);
}

.menu__item--perigo {
  color: var(--danger);
}

/* seletor de tema segmentado (login) */
.segmentado {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  gap: 2px;
}

.segmentado button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--dur-fast) ease-out, color var(--dur-fast), transform 100ms ease-out;
}

.segmentado button:active {
  transform: scale(0.96);
}

.segmentado button.ativo {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

/* ---------- layout ---------- */
.pagina {
  width: 100%;
  max-width: var(--largura-pagina);
  margin: 0 auto;
  padding: 1.5rem var(--gutter) 4rem;
}

.pagina__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.pagina__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grade {
  display: grid;
  gap: 1rem;
}

/* trava de responsividade: item de grid/flex não pode ser esticado pelo conteúdo
   (sem isto, uma tabela ou uma fileira de pílulas alarga o card inteiro) */
.grade > *,
.pilha > *,
.campo {
  min-width: 0;
}

.grade--cards {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grade--form {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}

/* dentro de um diálogo a grade é formulário, não linha de filtro: alinhar pelo
   fim desalinha os rótulos quando um campo tem texto de ajuda embaixo */
.folha .grade--form {
  align-items: start;
}

.pilha {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ---------- cartões ---------- */
.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: 1.1rem 1.25rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card--interativo:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

/* entrada escalonada: cada filho recebe --i via JS ou nth-child */
.entrar > * {
  animation: subir 0.5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.entrar > :nth-child(1) { --i: 0; }
.entrar > :nth-child(2) { --i: 1; }
.entrar > :nth-child(3) { --i: 2; }
.entrar > :nth-child(4) { --i: 3; }
.entrar > :nth-child(5) { --i: 4; }
.entrar > :nth-child(6) { --i: 5; }

/* hero do início */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 1.5rem 1.75rem;
  background: var(--grad-hero), var(--surface);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  pointer-events: none;
  animation: flutuar 14s ease-in-out infinite alternate;
}

.hero::before {
  width: 280px;
  height: 280px;
  right: -60px;
  top: -120px;
  background: radial-gradient(circle, rgba(10, 132, 255, 0.55), transparent 65%);
}

.hero::after {
  width: 220px;
  height: 220px;
  right: 22%;
  bottom: -140px;
  background: radial-gradient(circle, rgba(191, 90, 242, 0.45), transparent 65%);
  animation-delay: -6s;
}

.hero > * {
  position: relative;
}

.hero__saudacao {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* nome da empresa no hero (o topo mostra só o nome do painel) */
.hero__cliente {
  color: var(--text);
  font-weight: 600;
}

.hero__cliente::after {
  content: " · ";
  color: var(--text-2);
  font-weight: 400;
}

.ao-vivo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-2);
}

.ao-vivo::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 var(--success-soft);
  animation: pulsar 2s ease-out infinite;
}

/* gráfico de barras (CSS puro) */
.barras {
  display: grid;
  gap: 0.55rem;
}

.barra {
  display: grid;
  grid-template-columns: minmax(7rem, 14rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
}

.barra__rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-2);
}

.barra__trilho {
  height: 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.barra__valor {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-accent);
  transition: width 0.9s var(--ease);
}

.barra--perigo .barra__valor {
  background: linear-gradient(90deg, var(--warning), var(--danger));
}

.barra__numero {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 5.5rem;
  text-align: right;
}

/* esqueleto de carregamento */
.esqueleto {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
}

.esqueleto span {
  display: block;
  height: 0.9rem;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: brilhar 1.4s linear infinite;
}

.esqueleto span:nth-child(2n) { width: 85%; }
.esqueleto span:nth-child(3n) { width: 65%; }

/* ícones */
.lucide,
svg.lucide {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}

.btn .lucide {
  width: 1rem;
  height: 1rem;
}

.btn--icone .lucide {
  width: 1.05rem;
  height: 1.05rem;
}

.topbar__nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.topbar__nav .lucide {
  width: 1rem;
  height: 1rem;
  opacity: 0.8;
}

.kpi__icone .lucide {
  width: 1.4rem;
  height: 1.4rem;
}

.menu__item .lucide {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  opacity: 0.85;
}

.menu__item {
  justify-content: flex-start;
}

.menu__item.ativo::after {
  margin-left: auto;
}

.card--sem-padding {
  padding: 0;
  overflow: hidden;
}

.card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.kpi {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.kpi__icone {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.kpi__icone svg {
  width: 1.4rem;
  height: 1.4rem;
}

.kpi__valor {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.kpi--sucesso .kpi__icone { background: var(--success-soft); color: var(--success); }
.kpi--perigo .kpi__icone { background: var(--danger-soft); color: var(--danger); }
.kpi--alerta .kpi__icone { background: var(--warning-soft); color: var(--warning); }
.kpi--info .kpi__icone { background: var(--info-soft); color: var(--info); }

/* ---------- botões (resposta no pointer-down) ---------- */
.btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  background: var(--surface-2);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 100ms ease-out, background var(--dur-fast) ease-out, opacity var(--dur-fast);
  user-select: none;
}

.btn:hover {
  background: var(--border);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.btn svg {
  width: 1rem;
  height: 1rem;
}

.btn--primario {
  background: var(--grad-accent);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(10, 132, 255, 0.7);
  transition: transform 100ms ease-out, background-position var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn--primario:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 24px -8px rgba(94, 92, 230, 0.75);
}

.btn--sucesso {
  background: var(--success-soft);
  color: var(--success);
}

.btn--perigo {
  background: var(--danger-soft);
  color: var(--danger);
}

.btn--alerta {
  background: var(--warning-soft);
  color: var(--warning);
}

.btn--fantasma {
  background: transparent;
  border-color: var(--border-strong);
}

.btn--icone {
  padding: 0.4rem;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
}

.btn--pequeno {
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
}

/* botão circular: setas de carrossel, "+" de card expansível */
.btn--redondo {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border-radius: 50%;
  background: var(--surface-2);
}

.btn--redondo .lucide {
  width: 1.05rem;
  height: 1.05rem;
}

/* sólido invertido (preto no claro, branco no escuro) */
.btn--contraste {
  background: var(--text);
  color: var(--surface);
}

.btn--contraste:hover {
  background: var(--text);
  opacity: 0.85;
}

.btn--bloco {
  width: 100%;
}

/* foco por teclado */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.entrada:focus-visible {
  outline: none;
}

/* botão ocupado */
.btn.ocupado {
  pointer-events: none;
  opacity: 0.75;
}

.btn.ocupado .lucide {
  animation: girar 0.9s linear infinite;
}

/* ---------- formulários ---------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* .rotulo = mesmo visual do label, para grupos (pílulas, radiogroup) que não
   podem usar <label> por não terem um único controle */
.campo > label,
.campo > .rotulo {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.entrada,
select.entrada,
textarea.entrada {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.entrada:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.entrada:read-only {
  background: var(--surface-2);
  color: var(--text-2);
}

select.entrada {
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}

textarea.entrada {
  resize: vertical;
  min-height: 5rem;
}

.campo--auto {
  position: relative;
}

.auto-lista {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 16rem;
  overflow: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  transform-origin: top;
  animation: aparecer var(--dur-fast) ease-out;
}

.auto-lista li {
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.9rem;
}

.auto-lista li:hover,
.auto-lista li.ativo {
  background: var(--accent-soft);
}

.entrada-com-acao {
  position: relative;
}

.entrada-com-acao .btn--icone {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
}

.entrada-com-acao .btn--icone:active {
  transform: translateY(-50%) scale(0.94);
}

.entrada-com-acao .entrada:read-only {
  padding-right: 2.4rem;
  font-weight: 500;
  color: var(--text);
}

.entrada__icone {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: var(--text-3);
  pointer-events: none;
  transition: color var(--dur-fast);
}

.entrada--com-icone {
  padding-left: 2.4rem;
}

.entrada-com-acao:focus-within .entrada__icone {
  color: var(--accent);
}

/* interruptor S/N */
.interruptor {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1.55rem;
  flex-shrink: 0;
}

.interruptor input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.interruptor__trilho {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.interruptor__trilho::before {
  content: "";
  position: absolute;
  width: 1.3rem;
  height: 1.3rem;
  left: 0.125rem;
  top: 0.125rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform var(--dur) var(--ease);
}

.interruptor input:checked + .interruptor__trilho {
  background: var(--success);
}

.interruptor input:checked + .interruptor__trilho::before {
  transform: translateX(1.05rem);
}

.interruptor input:active + .interruptor__trilho::before {
  width: 1.5rem;
}

.interruptor input:disabled + .interruptor__trilho {
  opacity: 0.5;
  cursor: default;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.checkbox input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent);
}

/* ---------- tabelas ---------- */
.tabela-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
  /* sombra de borda: só aparece enquanto existe conteúdo fora da vista (scroll edge effect) */
  background:
    linear-gradient(to right, var(--surface) 45%, transparent) 0 0 / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 45%, transparent) 100% 0 / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--sombra-rolagem), transparent) 0 0 / 0.9rem 100%
      no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--sombra-rolagem), transparent) 100% 0 / 0.9rem
      100% no-repeat scroll;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.tabela th,
.tabela td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

.tabela tbody tr {
  transition: background var(--dur-fast) ease-out;
  animation: aparecer 0.35s ease-out both;
  animation-delay: calc(min(var(--i, 0), 20) * 22ms);
}

.tabela tbody tr:hover {
  background: var(--surface-2);
}

.tabela tr.destaque {
  background: var(--danger-soft);
}

.tabela tr.destaque:hover {
  background: var(--danger-soft);
  filter: brightness(0.97);
}

.tabela td.num,
.tabela th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tabela td.centro,
.tabela th.centro {
  text-align: center;
}

/* coluna que PODE quebrar linha: encolhe antes da tabela precisar rolar */
.tabela .quebra {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 8rem;
}

.tabela .acoes {
  display: flex;
  gap: 0.3rem;
  justify-content: flex-end;
}

/* coluna estreita de controle (interruptor, botão) — vira largura total no mobile */
.tabela td.tabela__acao,
.tabela th.tabela__acao {
  width: 6rem;
}

.tabela__vazio {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-2);
}

.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  color: var(--text-2);
  text-align: center;
}

.vazio .lucide {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-3);
  animation: subir 0.5s var(--ease);
}

.tabela th.ordenavel {
  cursor: pointer;
  user-select: none;
}

.tabela th.ordenavel:hover {
  color: var(--text);
}

.tabela th .ordem {
  display: inline-block;
  width: 0.9em;
  margin-left: 0.2rem;
  opacity: 0.35;
  transition: opacity var(--dur-fast), transform var(--dur) var(--ease);
}

.tabela th[aria-sort="ascending"] .ordem,
.tabela th[aria-sort="descending"] .ordem {
  opacity: 1;
  color: var(--accent);
}

.tabela th[aria-sort="descending"] .ordem {
  transform: rotate(180deg);
}

/* contador ao lado de títulos */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.tabela--tv {
  font-size: 1.35rem;
}

.tabela--tv th,
.tabela--tv td {
  padding: 0.75rem 1rem;
}

.tabela--tv th {
  font-size: 0.95rem;
}

/* ---------- tabelas responsivas ----------
   Até 720px cada <tr> vira um cartão: o cabeçalho some (continua para leitor de tela)
   e cada célula mostra o título da coluna via data-rotulo (renderTabela emite).
   `.tabela--fixa` e `.tabela--tv` continuam grade rolável. */
@media (max-width: 979px) {
  .tabela:not(.tabela--tv) th,
  .tabela:not(.tabela--tv) td {
    padding: 0.5rem 0.6rem;
  }
}

@media (max-width: 720px) {
  .tabela:not(.tabela--fixa):not(.tabela--tv) {
    display: block;
    font-size: 0.9rem;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody {
    display: block;
    padding: 0.75rem;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody tr {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody tr + tr {
    margin-top: 0.6rem;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody tr:hover {
    background: var(--surface-2);
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody tr.destaque {
    background: var(--danger-soft);
    box-shadow: inset 3px 0 0 var(--danger);
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td {
    width: auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.15rem 0.75rem;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    color: var(--text-2);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td:not([data-rotulo])::before {
    content: none;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td:empty {
    display: none;
  }

  /* célula com mais de um bloco (comprador + inclusão) empilha abaixo do rótulo */
  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td > div {
    flex: 1 0 100%;
  }

  /* primeira célula funciona como título do cartão */
  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td:first-child {
    margin-bottom: 0.2rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 600;
  }

  /* texto longo: rótulo em cima, conteúdo alinhado à esquerda */
  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td.quebra {
    min-width: 0;
    text-align: left;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td.quebra::before {
    flex: 1 0 100%;
  }

  /* célula de ações (coluna sem título) vai para o fim do cartão */
  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td:not([data-rotulo]) {
    justify-content: flex-end;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td:last-child:not([data-rotulo]) {
    margin-top: 0.25rem;
  }

  .tabela:not(.tabela--fixa):not(.tabela--tv) tbody td .acoes {
    flex: 1 0 100%;
    justify-content: flex-end;
  }

  .tabela__vazio,
  .vazio {
    padding: 2rem 1rem;
  }
}

/* ---------- cards de item ---------- */
.itens {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1rem 1.25rem 1.25rem;
}

.item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
  animation: subir 0.45s var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 16) * 40ms);
}

.item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.item--bloqueado {
  border-color: rgba(255, 59, 48, 0.35);
  background: linear-gradient(180deg, var(--danger-soft), transparent 38%), var(--surface);
}

.item__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.item__codigo {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-2);
}

.item__nome {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.item__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.item__regra {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--danger);
}

.metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem 0.75rem;
}

.metrica {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.metrica__rotulo {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metrica__valor {
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.metrica__valor small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
}

.metrica--destaque .metrica__valor {
  color: var(--danger);
}

.item__secao {
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border);
}

.item__secao-titulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vendas {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 2.4rem;
}

.vendas__barra {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.vendas__barra i {
  display: block;
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: var(--accent-soft);
  min-height: 3px;
  transition: height 0.8s var(--ease);
}

.vendas__barra:first-child i {
  background: var(--grad-accent);
}

.vendas__barra small {
  font-size: 0.65rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.item__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
}

/* 1 card por linha: em telas largas as seções ficam lado a lado */
@media (min-width: 960px) {
  .item {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) 1.5fr minmax(150px, 0.9fr) 1.6fr minmax(150px, auto);
    grid-template-areas: "cabecalho metricas vendas precos rodape";
    align-items: start;
    gap: 1.25rem;
  }

  .item__cabecalho { grid-area: cabecalho; display: flex; flex-direction: column; gap: 0.5rem; }
  .item__metricas { grid-area: metricas; }
  .item__vendas { grid-area: vendas; }
  .item__precos { grid-area: precos; }
  .item__rodape {
    grid-area: rodape;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    margin-top: 0;
  }

  .item__secao {
    padding-top: 0;
    border-top: 0;
    padding-left: 1.25rem;
    border-left: 1px dashed var(--border);
    height: 100%;
  }

  .item__topo {
    flex-direction: column;
  }

  .item__selos {
    justify-content: flex-start;
  }

  .item__total {
    text-align: right;
  }
}

.item__total {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.item__total small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
}

.variacao {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
}

.variacao--alta { background: var(--danger-soft); color: var(--danger); }
.variacao--baixa { background: var(--success-soft); color: var(--success); }
.variacao--igual { background: var(--surface-2); color: var(--text-2); }

.variacao .lucide {
  width: 0.8rem;
  height: 0.8rem;
}

@media (max-width: 480px) {
  .itens {
    grid-template-columns: 1fr;
    padding: 0.85rem;
  }

  .metricas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- resumo do pedido (cabeçalho em card) ---------- */
.resumo {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.2fr;
  gap: 1.25rem 2rem;
  align-items: start;
}

.resumo__principal {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-right: 2rem;
  border-right: 1px dashed var(--border);
}

.resumo__valor {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.resumo__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.85rem 1.25rem;
}

.resumo__campos .metrica__valor {
  font-size: 0.95rem;
  white-space: normal;
}

.resumo__nota {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 0.9rem;
}

.resumo__nota .lucide {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.resumo__nota--sucesso { background: var(--success-soft); color: var(--success); }
.resumo__nota--alerta { background: var(--warning-soft); color: var(--warning); }
.resumo__nota--perigo { background: var(--danger-soft); color: var(--danger); }
.resumo__nota--info { background: var(--info-soft); color: var(--info); }

.resumo__nota strong {
  display: block;
  font-weight: 600;
}

.resumo__nota span {
  color: var(--text);
  opacity: 0.85;
}

@media (max-width: 860px) {
  .resumo {
    grid-template-columns: 1fr;
  }

  .resumo__principal {
    padding-right: 0;
    border-right: 0;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border);
  }
}

/* ---------- cards de pedido ---------- */
.pedidos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1rem 1.25rem 1.25rem;
}

.pedido {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: subir 0.45s var(--ease) both;
  animation-delay: calc(min(var(--i, 0), 16) * 40ms);
}

.pedido:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.pedido--A { border-left-color: var(--danger); }
.pedido--L { border-left-color: var(--success); }
.pedido--R { border-left-color: var(--warning); }
.pedido--F { border-left-color: var(--info); }

.pedido__id {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pedido__numero {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pedido__numero a:hover {
  text-decoration: none;
}

.pedido__fornecedor {
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.pedido__pessoas {
  display: grid;
  gap: 0.5rem;
}

.pessoa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  min-width: 0;
}

.pessoa__avatar {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--grad-accent);
}

.pessoa__avatar--neutro {
  background: var(--border-strong);
  color: var(--text);
}

.pessoa small {
  display: block;
  font-size: 0.7rem;
  color: var(--text-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pedido__valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.pedido__valor strong {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pedido__acoes {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.pedido__liberacao {
  font-size: 0.8rem;
  color: var(--text-2);
}

@media (max-width: 979px) {
  .pedido {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id valor"
      "forn forn"
      "pessoas pessoas"
      "acoes acoes";
    gap: 0.75rem 1rem;
    padding: 0.9rem 1rem;
  }

  .pedido__id { grid-area: id; }
  .pedido__valor { grid-area: valor; align-self: start; }
  .pedido__forn { grid-area: forn; }
  .pedido__pessoas {
    grid-area: pessoas;
    grid-template-columns: 1fr 1fr;
  }
  .pedido__acoes {
    grid-area: acoes;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
  }
  .pedido__acoes .btn {
    flex: 1;
    justify-content: center;
  }
  .pedido__numero { font-size: 1.15rem; }
  .pedido__valor strong { font-size: 1.2rem; }
  .pedido__liberacao { text-align: right; }
  .pedido__id .caption,
  .pedido__forn .caption { font-size: 0.75rem; }

  .card__cabecalho {
    flex-wrap: wrap;
  }

  .card__cabecalho .linha {
    width: 100%;
  }

  .card__cabecalho .linha .btn {
    flex: 1;
    justify-content: center;
  }
}

@media (min-width: 980px) {
  .pedido {
    grid-template-columns: minmax(160px, 0.9fr) minmax(220px, 1.5fr) minmax(200px, 1.3fr) minmax(190px, 1.2fr) auto;
    align-items: center;
    gap: 1.25rem;
  }

  .pedido__acoes {
    flex-wrap: nowrap;
  }
}

/* ---------- selos ---------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.selo--sucesso { background: var(--success-soft); color: var(--success); }
.selo--perigo { background: var(--danger-soft); color: var(--danger); }
.selo--alerta { background: var(--warning-soft); color: var(--warning); }
.selo--info { background: var(--info-soft); color: var(--info); }
.selo--neutro { background: var(--surface-2); color: var(--text-2); }

.negativo { color: var(--danger); }
.positivo { color: var(--success); }

/* ---------- folha (dialog) ---------- */
dialog.folha {
  border: 0;
  padding: 0;
  width: min(560px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  border-radius: 18px;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--text);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

dialog.folha--larga {
  width: min(960px, calc(100vw - 2rem));
}

dialog.folha[open] {
  animation: folha-entrar var(--dur) var(--ease);
}

dialog.folha.fechando {
  animation: folha-sair 0.22s ease-in forwards;
}

dialog.folha::backdrop {
  background: rgba(0, 0, 0, 0.35);
  animation: aparecer var(--dur) ease-out;
}

.folha__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
}

.folha__corpo {
  padding: 0 1.25rem 1rem;
  overflow: auto;
  max-height: calc(100vh - 12rem);
}

.folha__rodape {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
}

.detalhes {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
}

.detalhes dt {
  color: var(--text-2);
}

.detalhes dd {
  margin: 0;
  font-weight: 500;
}

/* ---------- toast ---------- */
.toasts {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: var(--shadow-2);
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: subir var(--dur) var(--ease);
}

.toast.saindo {
  animation: descer 0.22s ease-in forwards;
}

.toast--sucesso { color: var(--success); }
.toast--erro { color: var(--danger); }
.toast--info { color: var(--text); }

/* ---------- carregando ---------- */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 200;
  opacity: 0;
  transition: width 0.4s var(--ease), opacity 0.2s;
}

.progresso.ativo {
  width: 80%;
  opacity: 1;
}

.progresso.completo {
  width: 100%;
  opacity: 0;
}

.spinner {
  width: 1.1rem;
  height: 1.1rem;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}

/* ---------- login ---------- */
.login {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--bg);
  overflow: hidden;
}

.login__fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login__fundo span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: flutuar 18s ease-in-out infinite alternate;
}

.login__fundo span:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -18vw; background: #0a84ff; }
.login__fundo span:nth-child(2) { width: 38vw; height: 38vw; right: -10vw; bottom: -14vw; background: #bf5af2; animation-delay: -7s; }
.login__fundo span:nth-child(3) { width: 26vw; height: 26vw; right: 18vw; top: 8vw; background: #5e5ce6; animation-delay: -12s; opacity: 0.35; }

.login__cartao {
  position: relative;
}

/* a arte da logo é branca: no tema claro precisa inverter para virar preta.
   Segue a regra de três camadas — claro no :root, escuro nas duas formas. */
.login__logo {
  height: 2.25rem;
  width: auto;
  align-self: center;
  margin-bottom: 0.75rem;
  filter: invert(1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .login__logo {
    filter: none;
  }
}

:root[data-theme="dark"] .login__logo {
  filter: none;
}

.login__cartao {
  width: min(400px, 100%);
  padding: 2rem 1.75rem 1.75rem;
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-radius: 22px;
  box-shadow: var(--shadow-2);
  animation: folha-entrar 0.45s var(--ease);
}


.erro-inline {
  color: var(--danger);
  font-size: 0.85rem;
  min-height: 1.2rem;
  /* a altura reservada é intencional (evita o layout pular quando o erro
     aparece); a margem padrão de <p> em cima dela é que abria o vão */
  margin: 0;
}

/* ---------- painel TV ---------- */
body.tv {
  overflow: hidden;
}

body.tv .pagina {
  max-width: none;
  padding: 1rem 1.5rem;
}

.tv__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}

.tv__relogio {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.tv__viewport {
  height: calc(100vh - 6rem);
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* ---------- etapas do instalador ---------- */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.etapas li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.etapas .ok { color: var(--success); }
.etapas .erro { color: var(--danger); }

.etapas small {
  display: block;
  color: var(--text-2);
  white-space: pre-wrap;
  font-family: var(--mono);
  font-size: 0.75rem;
}

/* etapa com detalhe (erro/arquivo) vira item de acordeão */
.etapas .etapas__item {
  display: block;
  padding: 0;
}

.etapas .etapas__item > details {
  border-bottom: 0;
}

.etapas .etapas__item > details > summary {
  display: grid;
  grid-template-columns: 1.4rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0;
}

.etapas .etapas__item .acordeao__corpo {
  padding: 0 0 0.75rem 2rem;
}

/* ---------- rodapé ---------- */
.rodape {
  margin-top: auto;
  padding: 1.5rem max(var(--gutter), calc((100% - var(--largura-pagina)) / 2 + var(--gutter))) 2rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--text-3);
}

.rodape a {
  color: var(--text-2);
  font-weight: 600;
  transition: color var(--dur-fast);
}

.rodape a:hover {
  color: var(--accent);
  text-decoration: none;
}

body {
  display: flex;
  flex-direction: column;
}

body > .topbar,
body > .login {
  width: 100%;
}

body.tv .rodape {
  display: none;
}

.login .rodape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 1.25rem;
}

/* =====================================================================
   Vitrine — componentes no padrão apple.com/store
   Pílulas de filtro, etiqueta, grade bento, card expansível, carrossel,
   acordeão e painel duplo. Todos funcionam sem JS (menos o carrossel, que
   usa `ligarCarrossel()` só para setas e pontos) e todos são responsivos.
   ===================================================================== */

/* ---------- pílulas de filtro (Student Life / Power Picks…) ---------- */
.pilulas {
  position: relative;
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  padding: 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.pilulas::-webkit-scrollbar {
  display: none;
}

.pilulas--solta {
  background: transparent;
  padding: 0;
  gap: 0.4rem;
}

.pilulas > * {
  flex: 0 0 auto;
}

.pilulas label {
  position: relative;
  display: inline-flex;
}

.pilulas input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pilulas button,
.pilulas label span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) ease-out, color var(--dur-fast) ease-out,
    transform 100ms ease-out;
}

.pilulas button:hover,
.pilulas label:hover span {
  color: var(--text);
}

.pilulas button:active,
.pilulas label:active span {
  transform: scale(0.97);
}

/* ativo: pílula sólida invertida (preta no claro, branca no escuro) */
.pilulas button.ativo,
.pilulas input:checked + span {
  background: var(--text);
  color: var(--surface);
}

.pilulas--solta button.ativo,
.pilulas--solta input:checked + span {
  box-shadow: var(--shadow-1);
}

.pilulas input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- indicador que desliza de uma pílula para a outra ----
   Criado e posicionado por ligarPilulas(); sem JS o fundo sólido da pílula
   ativa continua valendo (degrada sem quebrar). */
.pilulas__indicador {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--text);
  pointer-events: none;
  transform: translateX(0);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease),
    opacity var(--dur-fast) ease-out;
}

/* primeira posição (e reposicionamento por resize) entra sem animar */
.pilulas__indicador--parado {
  transition: none;
}

.pilulas--solta .pilulas__indicador {
  top: 0;
  bottom: 0;
  box-shadow: var(--shadow-1);
}

/* com o indicador ligado, quem pinta o fundo é ele — a pílula fica só com o texto */
.pilulas--deslizante button,
.pilulas--deslizante label {
  position: relative;
  z-index: 1;
}

.pilulas--deslizante button.ativo,
.pilulas--deslizante input:checked + span {
  background: transparent;
  box-shadow: none;
}

.pilulas .lucide {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---------- etiqueta (eyebrow "Novo", "Só no painel") ---------- */
.etiqueta {
  display: inline-block;
  margin-bottom: 0.15rem;
  color: var(--etiqueta);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.etiqueta--info { color: var(--accent); }
.etiqueta--sucesso { color: var(--success); }
.etiqueta--perigo { color: var(--danger); }

/* ---------- grade bento (cards de tamanhos diferentes) ---------- */
.grade--bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(11rem, auto);
  gap: 1rem;
}

.grade--bento > .card--largo { grid-column: span 2; }
.grade--bento > .card--alto { grid-row: span 2; }
.grade--bento > .card--grande { grid-column: span 2; grid-row: span 2; }

/* card com o conteúdo no rodapé, como os cards de produto da Apple */
.card--vitrine {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
}

.card--vitrine .card__midia {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 6rem;
  color: var(--text-3);
}

@media (max-width: 979px) {
  .grade--bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .grade--bento > .card--grande { grid-column: span 2; grid-row: span 1; }
}

@media (max-width: 720px) {
  .grade--bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .grade--bento > .card--largo,
  .grade--bento > .card--alto,
  .grade--bento > .card--grande {
    grid-column: auto;
    grid-row: auto;
  }
}

/* ---------- card expansível com "+" (Why Apple is the best place…) ---------- */
details.recurso {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface-2);
}

details.recurso > summary {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  cursor: pointer;
}

details.recurso > summary::-webkit-details-marker {
  display: none;
}

.recurso__icone .lucide {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 1.5;
}

.recurso__titulo {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.recurso__resumo {
  margin: 0;
  color: var(--text-2);
  font-size: 0.9rem;
  padding-right: 2.5rem;
}

.recurso__mais {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--text);
  color: var(--surface);
  transition: transform var(--dur) var(--ease);
}

details.recurso {
  position: relative;
}

details.recurso[open] .recurso__mais {
  transform: rotate(45deg);
}

.recurso__conteudo {
  margin-top: 0.75rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.9rem;
  animation: aparecer var(--dur-fast) ease-out;
}

/* ---------- carrossel (In the spotlight) ---------- */
.carrossel {
  position: relative;
}

.carrossel__trilho {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}

.carrossel__trilho::-webkit-scrollbar {
  display: none;
}

.carrossel__item {
  flex: 0 0 min(34rem, 88%);
  scroll-snap-align: start;
}

.carrossel__item--largo {
  flex-basis: min(52rem, 94%);
}

.carrossel__controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.carrossel__pontos:empty {
  display: none;
}

.carrossel__pontos {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
}

.carrossel__ponto {
  width: 0.45rem;
  height: 0.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text-3);
  cursor: pointer;
  transition: background var(--dur-fast) ease-out, transform var(--dur) var(--ease);
}

.carrossel__ponto.ativo {
  background: var(--text);
  transform: scale(1.15);
}

.carrossel [data-carrossel]:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- acordeão (Unlock the world of Apple) ---------- */
.acordeao {
  display: flex;
  flex-direction: column;
}

details.acordeao__item {
  border-bottom: 1px solid var(--border);
}

details.acordeao__item:last-child {
  border-bottom: 0;
}

details.acordeao__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) ease-out;
}

details.acordeao__item > summary::-webkit-details-marker {
  display: none;
}

details.acordeao__item > summary:hover {
  color: var(--accent);
}

details.acordeao__item > summary .lucide {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--text-2);
  transition: transform var(--dur) var(--ease);
}

details.acordeao__item[open] > summary .lucide {
  transform: rotate(180deg);
}

.acordeao__corpo {
  padding-bottom: 1rem;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.6;
  animation: subir var(--dur) var(--ease);
}

/* ---------- painel duplo (conteúdo + mídia) ---------- */
.painel-duplo {
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) 1.15fr;
  align-items: center;
  gap: 2rem;
  padding: 2rem;
  border-radius: 20px;
  background: var(--surface-2);
}

.painel-duplo__midia {
  display: grid;
  place-items: center;
  min-height: 12rem;
}

@media (max-width: 979px) {
  .painel-duplo {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__trilho {
    scroll-behavior: auto;
  }
}

/* ---------- animações ---------- */
@keyframes aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes folha-entrar {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes folha-sair {
  to { opacity: 0; transform: translateY(14px) scale(0.98); }
}

@keyframes subir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes descer {
  to { opacity: 0; transform: translateY(12px); }
}

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

@keyframes flutuar {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(52, 199, 89, 0); }
}

@keyframes brilhar {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  dialog.folha[open],
  .login__cartao,
  .toast {
    animation: aparecer 0.15s ease-out;
  }

  dialog.folha.fechando,
  .toast.saindo {
    animation: none;
    opacity: 0;
  }

  .hero::before,
  .hero::after,
  .login__fundo span,
  .ao-vivo::before {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  dialog.folha,
  .toast,
  .auto-lista,
  .tabela th,
  .login__cartao {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .card,
  dialog.folha,
  .login__cartao {
    border: 1px solid var(--border-strong);
  }
}

.topbar__hamburguer {
  display: none;
}

@media (max-width: 720px) {
  .topbar {
    padding: 0 var(--gutter-mobile);
    gap: 0.5rem;
  }

  .topbar__marca {
    min-width: 0;
    flex: 1;
  }

  .topbar__usuario span {
    display: none;
  }

  .topbar__hamburguer {
    display: inline-flex;
  }

  .topbar__nav {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    z-index: 49;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    margin: 0;
    padding: 0.6rem 0.85rem 0.85rem;
    background: var(--glass-strong);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-2);
    transform-origin: top;
    transform: scaleY(0.96) translateY(-6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) ease-out, transform var(--dur) var(--ease);
  }

  .topbar__nav.aberto {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .topbar__nav a {
    padding: 0.7rem 0.8rem;
    font-size: 1rem;
  }

  .topbar__usuario {
    margin-left: 0;
  }

  .pagina {
    padding: 1rem var(--gutter-mobile) 3rem;
  }

  /* cabeçalho de card e ações da página: alvos de toque maiores, sem espremer
     (o empilhamento em si já vem do bloco max-width: 979px) */
  .card__cabecalho {
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
  }

  .card__cabecalho .linha {
    gap: 0.4rem;
  }

  .pagina__acoes .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .grade--form {
    grid-template-columns: 1fr;
  }
}

@media print {
  .topbar,
  .pagina__acoes,
  .btn,
  .toasts {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card {
    box-shadow: none;
  }
}