/* Componentes do Figma: Botão, Chip de filtro, Selo de estado, Campo, Checkbox, Seletor de modo, Aba de navegação. */

/* ---- botão ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid transparent;
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--texto-1);
  font: 500 14px / 1.2 var(--f-texto);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--rapido) var(--curva), background-color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn--primario {
  background: var(--laranja);
}

.btn--primario:hover:not(:disabled) {
  background: #ff6a1f;
}

.btn--secundario {
  background: var(--superficie);
  border-color: var(--linha-forte);
}

.btn--secundario:hover:not(:disabled) {
  background: var(--rebaixado);
}

.btn--fantasma:hover:not(:disabled) {
  background: var(--rebaixado);
}

.btn--perigo {
  background: var(--erro);
  color: var(--superficie);
}

.btn--perigo:hover:not(:disabled) {
  background: #9a1f18;
}

.btn--p {
  height: 32px;
  padding: 0 14px;
}

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

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.btn-icone {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  background: var(--superficie);
}

/* ---- chip de filtro ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pill);
  background: var(--superficie);
  color: var(--texto-1);
  font: 400 14px / 1.5 var(--f-texto);
  white-space: nowrap;
  transition: background-color var(--rapido) var(--curva);
}

.chip:hover {
  background: var(--rebaixado);
}

.chip__n {
  color: var(--texto-3);
  font: 400 12px / 1.35 var(--f-mono);
}

.chip[aria-pressed="true"] {
  border-color: var(--texto-1);
  background: var(--texto-1);
  color: var(--superficie);
}

.chip[aria-pressed="true"] .chip__n {
  color: var(--sobre-escuro);
}

/* ---- selo de estado ---- */
.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--raio-pill);
  font: 400 11px / 1.2 var(--f-mono);
  white-space: nowrap;
  vertical-align: middle;
}

.selo svg {
  flex: none;
  width: 12px;
  height: 12px;
}

.selo__ponto {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laranja);
}

.selo--em-dia,
.selo--ao-vivo {
  background: var(--texto-1);
  border-color: var(--texto-1);
  color: var(--superficie);
}

.selo--exibindo,
.selo--aguardando {
  border-color: var(--linha-forte);
  color: var(--texto-1);
}

.selo--no-limite,
.selo--teste {
  border-style: dashed;
  border-color: var(--linha-forte);
  color: var(--texto-1);
}

.selo--zerado {
  border-color: var(--erro);
  color: var(--erro);
}

.selo--pausado {
  background: var(--rebaixado);
  color: var(--texto-1);
}

.selo--divergente {
  background: var(--erro-veu);
  border-color: var(--erro);
  color: var(--erro);
}

.selo--falhou {
  background: var(--erro-veu);
  color: var(--erro);
}

.selo--inativo {
  border-color: var(--linha);
  color: var(--texto-2);
}

.selo--atencao {
  border-color: var(--laranja);
  color: var(--laranja-texto);
}

.selo--erro {
  border-color: var(--erro);
  color: var(--erro);
}

/* ---- campo ---- */
.campo {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.campo__rotulo {
  color: var(--texto-3);
  font: 400 12px / 1.4 var(--f-mono);
}

.campo__ajuda {
  color: var(--texto-3);
  font: 400 12px / 1.4 var(--f-texto);
}

.campo__erro {
  color: var(--erro);
  font: 400 12px / 1.4 var(--f-texto);
}

.entrada,
.selecao {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  background: var(--superficie);
  color: var(--texto-1);
  font: 400 14px / 1.5 var(--f-texto);
  appearance: none;
  transition: border-color var(--rapido) var(--curva);
}

.entrada::placeholder {
  color: var(--texto-3);
}

.entrada:hover,
.selecao:hover {
  border-color: var(--sobre-escuro);
}

.entrada:focus-visible,
.selecao:focus-visible {
  outline: none;
  border: 1.5px solid var(--linha-forte);
  padding: 0 13.5px;
  border-radius: var(--raio-md);
}

.entrada[aria-invalid="true"] {
  border: 1.5px solid var(--erro);
  padding: 0 13.5px;
}

.entrada:disabled,
.selecao:disabled {
  background: var(--rebaixado);
  color: var(--texto-3);
  cursor: not-allowed;
}

.entrada--mono {
  font-family: var(--f-mono);
}

.selecao-caixa {
  position: relative;
  display: block;
}

.selecao {
  padding-right: 40px;
  cursor: pointer;
}

.selecao-caixa > svg {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}

.selecao--p {
  height: 40px;
}

/* ---- checkbox ---- */
.marcador {
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.marcador input {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}

.marcador__caixa {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--superficie);
}

.marcador__caixa svg {
  width: 13px;
  height: 13px;
  opacity: 0;
}

.marcador input:checked + .marcador__caixa {
  background: var(--texto-1);
}

.marcador input:checked + .marcador__caixa svg {
  opacity: 1;
}

.marcador input:indeterminate + .marcador__caixa {
  background: var(--texto-1);
}

.marcador input:focus-visible + .marcador__caixa {
  outline: var(--foco);
  outline-offset: 2px;
}

/* ---- seletor de modo ---- */
.modo {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--raio-pill);
  background: var(--rebaixado);
}

.modo button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--raio-pill);
  background: transparent;
  font: 500 14px / 1.2 var(--f-texto);
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.modo button[aria-checked="true"] {
  background: var(--texto-1);
  color: var(--superficie);
}

.modo button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* ---- cartões, listas e tabelas ---- */
.cartao {
  border: 1px solid var(--linha);
  border-radius: var(--raio-xl);
  background: var(--superficie);
  overflow: hidden;
}

.cartao--pad {
  padding: 24px;
}

.linha-h {
  height: 1px;
  background: var(--linha);
}

.linha-v {
  width: 1px;
  background: var(--linha);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--texto-3);
  font: 400 12px / 1.4 var(--f-mono);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--laranja);
}

.titulo-contagem {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.titulo-contagem .t-numero {
  color: var(--laranja-texto);
}

.tabela-rolagem {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.tabela th {
  padding: 18px 20px 14px;
  font-weight: 400;
  vertical-align: bottom;
  white-space: nowrap;
}

.tabela th .th-t {
  display: block;
  color: var(--texto-1);
  font: 400 12px / 1.4 var(--f-mono);
}

.tabela th .th-s {
  display: block;
  color: var(--texto-3);
  font: 400 11px / 1.2 var(--f-mono);
}

.tabela thead tr {
  border-bottom: 1px solid var(--linha);
  background: var(--faixa);
}

.tabela tbody tr + tr {
  border-top: 1px solid var(--linha);
}

.tabela td {
  padding: 14px 20px;
  vertical-align: middle;
}

.tabela tbody tr[data-linha]:hover {
  background: color-mix(in srgb, var(--rebaixado) 45%, transparent);
}

.tabela tbody tr[aria-selected="true"] {
  background: var(--laranja-veu);
  outline: 2px solid var(--laranja);
  outline-offset: -2px;
}

.tabela .num {
  text-align: right;
}

/* ---- faixas de aviso ---- */
.aviso {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--erro);
  border-radius: var(--raio-lg);
  background: var(--erro-veu);
  color: var(--texto-1);
}

.aviso--tracejado {
  border-style: dashed;
  border-color: var(--linha-forte);
  background: transparent;
}

.aviso--neutro {
  border-color: var(--linha);
  background: var(--rebaixado);
}

.caixa-erro {
  display: grid;
  gap: 8px;
  padding: 16px 20px;
  border: 1px solid var(--erro);
  border-radius: var(--raio-md);
  background: var(--erro-veu);
}

.caixa-erro__titulo {
  color: var(--erro);
  font: 500 14px / 1.5 var(--f-texto);
}

.caixa-erro__texto {
  font: 400 12px / 1.4 var(--f-texto);
}

/* ---- vazio, carregando ---- */
.esqueleto {
  display: block;
  border-radius: var(--raio-md);
  background: var(--rebaixado);
  animation: pulsa 1.4s ease-in-out infinite;
}

@keyframes pulsa {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto {
    animation: none;
  }

  * {
    transition-duration: 1ms !important;
  }
}

.vazio {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.vazio p {
  max-width: 44ch;
  color: var(--texto-2);
}

/* ---- aviso rápido (toast) ---- */
.toasts {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.toast {
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: var(--raio-md);
  background: var(--texto-1);
  color: var(--superficie);
  font: 400 14px / 1.4 var(--f-texto);
  animation: sobe 200ms var(--curva);
}

.toast--erro {
  background: var(--erro);
}

@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (max-width: 860px) {
  .toasts {
    right: 16px;
    left: 16px;
    bottom: 84px;
    justify-items: stretch;
  }

  .toast {
    max-width: none;
  }
}

/* ---- tecla ---- */
.tecla {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--raio-sm);
  background: var(--superficie);
  color: var(--texto-1);
  font: 500 12px / 1.3 var(--f-mono);
}

.carregando {
  display: grid;
  gap: 12px;
}

.marcador__texto {
  display: grid;
  gap: 2px;
}

.selo-lugar {
  display: inline-flex;
  flex: none;
}