/* public/css/componentes.css — peças do sistema visual (redesenho de 07/10/2026).
   Só usa variáveis de /css/tokens.css; carregar os dois, nesta ordem.
   Prefixo ui- para não colidir com .btn, .panel e .c-* que as páginas antigas
   ainda definem. Texto cobalto usa --marca-texto; fundo cobalto, --marca.
   Aurora (27/10/2026): brilho no fundo da página (--aurora), painéis de vidro
   (--vidro + --vidro-desfoque) e botão principal em degradê (--grad-marca). */

/* ── Base ─────────────────────────────────────────────────────────────── */
.ui {
  margin: 0;
  background: var(--aurora), var(--fundo);
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  font-weight: 500;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }

.ui-destaque { font-size: var(--t-destaque); font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.ui-titulo { font-size: var(--t-titulo); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 0; }
.ui-secao { font-size: var(--t-secao); font-weight: 700; letter-spacing: -.015em; margin: 0; }
.ui-legenda { font-size: var(--t-legenda); font-weight: 600; color: var(--texto-3); }
.ui-codigo { font-family: var(--fonte-mono); font-size: var(--t-codigo); font-weight: 400; color: var(--texto-3); }
.ui-link { color: var(--marca-texto); font-weight: 700; text-decoration: none; }
.ui-link:hover { text-decoration: underline; }

.ui-icone {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Botão ────────────────────────────────────────────────────────────── */
.ui-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-5);
  border: 1px solid transparent; border-radius: 12px;
  font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.ui-botao .ui-icone { width: 18px; height: 18px; }
.ui-botao:focus-visible { outline: 2px solid var(--marca-texto); outline-offset: 2px; }
.ui-botao:disabled { opacity: .5; cursor: not-allowed; }
.ui-botao--primario { background: var(--marca) var(--grad-marca); color: #fff; box-shadow: var(--brilho-marca); }
.ui-botao--primario:hover:not(:disabled) { background: var(--marca-forte) var(--grad-marca-forte); }
.ui-botao--secundario { background: var(--vidro-forte); color: var(--texto); border-color: var(--vidro-borda); -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); }
.ui-botao--secundario:hover:not(:disabled) { background: var(--superficie-2); }
.ui-botao--discreto { background: transparent; color: var(--texto-2); }
.ui-botao--discreto:hover:not(:disabled) { background: var(--superficie-2); color: var(--texto); }
.ui-botao--perigo { background: var(--falta-suave); color: var(--falta); }
.ui-botao--bloco { display: flex; width: 100%; }
.ui-botao[aria-busy="true"] { cursor: progress; opacity: .85; }

.ui-girando {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: ui-girar .8s linear infinite;
}
@keyframes ui-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-girando { animation-duration: 2.4s; } }

.ui-botao-icone {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: var(--r-p); background: transparent; color: var(--texto-2); cursor: pointer;
}
.ui-botao-icone:hover { background: var(--superficie-2); color: var(--texto); }

/* ── Campo ────────────────────────────────────────────────────────────── */
.ui-campo { display: block; margin-bottom: var(--e-4); }
.ui-campo > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--texto); }
.ui-entrada {
  display: block; width: 100%; height: 46px; padding: 0 13px;
  background: var(--vidro-forte); color: var(--texto);
  border: 1px solid var(--vidro-borda); border-radius: 12px;
  font-family: inherit; font-size: var(--t-corpo); font-weight: 500;
  transition: border-color .15s, box-shadow .15s;
}
.ui-entrada::placeholder { color: var(--texto-3); }
.ui-entrada:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.ui-entrada:disabled { background: var(--superficie-2); color: var(--texto-3); }
.ui-entrada--mono { font-family: var(--fonte-mono); font-size: 14px; }
.ui-ajuda { font-size: var(--t-legenda); font-weight: 500; color: var(--texto-3); margin-top: 6px; }
.ui-campo--erro .ui-entrada { border-color: var(--falta); box-shadow: 0 0 0 4px var(--falta-suave); }
.ui-campo--erro .ui-ajuda { color: var(--falta); font-weight: 600; }

/* ── Cartão e painel ──────────────────────────────────────────────────── */
.ui-cartao {
  background: var(--vidro); border: 1px solid var(--vidro-borda);
  border-radius: var(--r-g); padding: var(--e-4) var(--e-5);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); box-shadow: var(--sombra-cartao);
}
.ui-cartao--destaque { background: var(--marca) var(--grad-marca); border-color: transparent; color: #fff; box-shadow: var(--brilho-marca); }
.ui-cartao--destaque .ui-legenda { color: #fff; opacity: .78; }

.ui-painel {
  background: var(--vidro); border: 1px solid var(--vidro-borda); border-radius: var(--r-g); overflow: hidden;
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque); box-shadow: var(--sombra-cartao);
}
.ui-painel__cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: 14px var(--e-5); border-bottom: 1px solid var(--vidro-borda);
}
.ui-painel__titulo { font-size: 15px; font-weight: 700; margin: 0; }
.ui-painel__sub { font-size: var(--t-legenda); font-weight: 600; color: var(--texto-3); }

/* ── Tabela ───────────────────────────────────────────────────────────── */
.ui-tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.ui-tabela th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--texto-3);
  padding: 11px var(--e-4); border-bottom: 1px solid var(--linha);
}
.ui-tabela td { padding: 13px var(--e-4); border-bottom: 1px solid var(--linha); font-weight: 600; vertical-align: top; }
.ui-tabela tr:last-child td { border-bottom: 0; }
.ui-tabela tbody tr:hover td { background: var(--marca-suave); }
.ui-tabela .ui-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Etiqueta de situação ─────────────────────────────────────────────── */
.ui-etiqueta {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 4px 10px; border-radius: var(--r-pilula);
  font-size: 12px; font-weight: 700;
  color: var(--neutro); background: var(--neutro-suave);
}
.ui-etiqueta::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-etiqueta--falta { color: var(--falta); background: var(--falta-suave); }
.ui-etiqueta--atencao { color: var(--atencao); background: var(--atencao-suave); }
.ui-etiqueta--ok { color: var(--ok); background: var(--ok-suave); }
.ui-etiqueta--excesso { color: var(--excesso); background: var(--excesso-suave); }
.ui-etiqueta--neutro { color: var(--neutro); background: var(--neutro-suave); }

/* ── Avisos ───────────────────────────────────────────────────────────── */
/* Flutuante: cores invertidas em relação ao tema (grafite no claro, claro no
   escuro), para se destacar do conteúdo que fica por baixo. */
.ui-aviso {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: 14px var(--e-4); border-radius: var(--r-m);
  background: var(--texto); color: var(--fundo);
  font-size: 14px; font-weight: 600; box-shadow: var(--sombra-flutuante);
}
.ui-aviso__detalhe { display: block; margin-top: 2px; font-size: var(--t-legenda); font-weight: 500; opacity: .75; }
.ui-alerta {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: 13px 14px; border-radius: var(--r-m);
  background: var(--atencao-suave); color: var(--atencao);
  font-size: 14px; font-weight: 700;
}
.ui-alerta__detalhe { display: block; margin-top: 2px; font-size: var(--t-legenda); font-weight: 500; color: var(--texto-2); }
.ui-alerta--ok { background: var(--ok-suave); color: var(--ok); }
.ui-alerta--falta { background: var(--falta-suave); color: var(--falta); }
.ui-alerta--neutro { background: var(--neutro-suave); color: var(--texto); }

/* ── Estado vazio ─────────────────────────────────────────────────────── */
.ui-vazio { text-align: center; padding: var(--e-8) var(--e-6); }
.ui-vazio__icone {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 16px; background: var(--marca) var(--grad-marca); color: #fff; box-shadow: var(--brilho-marca);
}
.ui-vazio__icone .ui-icone { width: 26px; height: 26px; }
.ui-vazio h4 { font-size: 16px; font-weight: 800; margin: var(--e-3) 0 0; }
.ui-vazio p { font-size: 13.5px; color: var(--texto-2); margin: var(--e-1) 0 0; }

/* ── Cabeçalho ────────────────────────────────────────────────────────── */
.ui-cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-5); background: var(--vidro-forte); border-bottom: 1px solid var(--vidro-borda);
  position: sticky; top: 0; z-index: 40;
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.ui-marca { display: block; height: 38px; width: auto; border-radius: 9px; }
.ui-cabecalho__acoes { display: flex; align-items: center; gap: 6px; }
@media (max-width: 768px) { .ui-cabecalho { padding: var(--e-3) 14px; } }

/* ── Menu lateral (computador) ────────────────────────────────────────── */
.ui-menu-lateral {
  display: flex; flex-direction: column; gap: 2px; width: 220px; flex: none;
  padding: 14px 10px; background: var(--vidro); border-right: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.ui-menu-grupo {
  padding: var(--e-3) var(--e-3) 6px;
  font-size: 12px; font-weight: 600; color: var(--texto-3);
}
.ui-menu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px var(--e-3); border: 0; border-radius: var(--r-p); background: none;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2);
  text-align: left; text-decoration: none; cursor: pointer;
}
.ui-menu-item:hover { background: var(--superficie-2); color: var(--texto); }
.ui-menu-item.is-ativo { background: var(--marca-suave); color: var(--marca-texto); font-weight: 700; box-shadow: var(--anel-ativo); }
.ui-menu-item.is-bloqueado { opacity: .75; }
.ui-menu-item .ui-cadeado { margin-left: auto; width: 16px; height: 16px; color: var(--texto-3); }

/* ── Menu em pílulas (celular) ────────────────────────────────────────── */
.ui-pilulas {
  display: flex; gap: var(--e-2); padding: 10px 14px; overflow-x: auto; scrollbar-width: none;
  background: var(--vidro-forte); border-bottom: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.ui-pilulas::-webkit-scrollbar { display: none; }
.ui-pilula {
  display: inline-flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  padding: var(--e-2) 13px; border: 0; border-radius: var(--r-pilula);
  background: var(--superficie-2); color: var(--texto-2);
  font-family: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.ui-pilula .ui-icone { width: 16px; height: 16px; }
.ui-pilula.is-ativo { background: var(--marca) var(--grad-marca); color: #fff; box-shadow: var(--brilho-marca); }

/* ── Menu do usuário ──────────────────────────────────────────────────── */
.ui-usuario { position: relative; }
.ui-usuario > button {
  display: flex; align-items: center; gap: var(--e-2);
  padding: 4px 10px 4px 4px; border: 1px solid var(--vidro-borda); border-radius: var(--r-pilula);
  background: var(--vidro-forte); color: var(--texto);
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ui-avatar {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--marca) var(--grad-marca); color: #fff; font-size: 12px; font-weight: 700;
}
.ui-usuario__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 220px;
  padding: 6px; background: var(--vidro-forte); border: 1px solid var(--vidro-borda);
  border-radius: var(--r-m); box-shadow: var(--sombra-flutuante);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
}
.ui-usuario__menu[hidden] { display: none; }
.ui-usuario__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--e-2); background: none;
  font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--texto);
  text-align: left; text-decoration: none; cursor: pointer;
}
.ui-usuario__item:hover { background: var(--superficie-2); }
.ui-usuario__item--perigo { color: var(--falta); }
.ui-usuario__sep { height: 1px; margin: 4px 0; background: var(--linha); }

/* ── Modal ────────────────────────────────────────────────────────────── */
.ui-modal-fundo {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--e-4);
  background: rgba(5, 6, 14, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ui-modal-fundo[hidden] { display: none; }
.ui-modal {
  width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--vidro-borda);
  border-radius: var(--r-xg); box-shadow: var(--sombra-flutuante); padding: var(--e-6);
}
.ui-modal__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-4); }
.ui-modal__rodape { display: flex; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-6); }
@media (max-width: 480px) {
  .ui-modal-fundo { place-items: end stretch; padding: 0; }
  .ui-modal { max-width: none; border-radius: var(--r-xg) var(--r-xg) 0 0; }
}

/* Instalar o app (08/10/2026): botão do pwa.js e o passo a passo de cada aparelho. */
.pwa-instalar[hidden] { display: none; }
.pwa-instalar { gap: 6px; white-space: nowrap; }
.pwa-instalar .ui-icone { width: 18px; height: 18px; }
.pwa-instalar--entrada { margin-top: var(--e-3); }
.pwa-ajuda { max-width: 420px; }
.pwa-ajuda__titulo { margin: 0 0 var(--e-4); font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.pwa-ajuda__passos { margin: 0 0 var(--e-6); padding-left: 22px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--texto-2); }
.pwa-ajuda__passos li::marker { color: var(--marca-texto); font-weight: 800; }
.pwa-ajuda__fechar { margin-top: 0; }
@media (max-width: 480px) { .pwa-ajuda { max-width: none; } }

/* Modal de excluir conta: centralizado também no celular, então cantos todos redondos. */
.excluir-conta-box.ui-modal { border-radius: var(--r-xg); }

/* Barra de busca das listas (QR Codes, Transportadora, Compras da linhagem). */
.busca-lista { position: relative; display: block; }
.busca-lista .ui-icone { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.busca-lista .ui-entrada { padding-left: 42px; }
.busca-lista .ui-entrada::-webkit-search-cancel-button { cursor: pointer; }
.busca-sem-resultado { margin: 24px 16px; text-align: center; color: var(--texto-3); font-size: 14px; }

/* Celular e tablet: fundo com brilho fixo obriga a redesenhar a tela inteira
   a cada rolagem; ali o brilho rola junto com a página. */
@media (hover: none) and (pointer: coarse) {
  .ui { background-attachment: scroll; }
}

/* Aviso de "sem conexão" (public/session.js): pílula de vidro no topo, nas
   cores do tema, com um ponto que pulsa enquanto tenta reconectar. */
.sessao-offline {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 9999;
  display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
  padding: 10px 18px; border-radius: var(--r-pilula);
  background: var(--vidro-forte); color: var(--texto); border: 1px solid var(--vidro-borda);
  box-shadow: var(--sombra-flutuante);
  -webkit-backdrop-filter: var(--vidro-desfoque); backdrop-filter: var(--vidro-desfoque);
  font-family: var(--fonte); font-size: 13.5px; font-weight: 600;
}
.sessao-offline::before {
  content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--atencao); animation: ui-pulsar 1.2s ease-in-out infinite;
}
@keyframes ui-pulsar { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .sessao-offline::before { animation: none; } }