/* Pecas do Carga. Estado sempre em atributo (aria-* ou data-*), nunca em classe modificadora. */

/* ---------------------------------------------------------- Topo */

.carga-topo {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--carga-space-2);
  min-height: var(--carga-topo-altura);
  padding: var(--carga-space-1) var(--carga-space-3);
  background: var(--carga-surface-raised);
  border-bottom: 1px solid var(--carga-border-faint);
}

.carga-topo-titulo {
  font-size: var(--carga-type-size-5);
  font-weight: 700;
  color: var(--carga-text-strong);
  letter-spacing: -0.01em;
}

.carga-topo-apoio {
  font-size: var(--carga-type-size-2);
  color: var(--carga-text-muted);
}

.carga-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--carga-space-1);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--carga-text-strong);
}

.carga-marca-selo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--carga-text-strong);
  color: var(--carga-surface-raised);
  font-size: var(--carga-type-size-3);
  font-weight: 800;
}

/* ---------------------------------------------------------- Barra (navegacao de baixo) */

.carga-barra {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
  min-height: var(--carga-barra-altura);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--carga-surface-raised);
  border-top: 1px solid var(--carga-border-default);
}

.carga-barra-item {
  display: grid;
  grid-template-rows: auto auto;
  gap: 2px;
  place-items: center;
  padding: var(--carga-space-1) 2px;
  color: var(--carga-text-muted);
  font-size: var(--carga-type-size-1);
  font-weight: 600;
  min-height: var(--carga-target-large);
  transition: color var(--carga-motion-toque) var(--carga-motion-curva);
}

.carga-barra-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carga-barra-item[aria-current='page'] {
  color: var(--carga-accent-strong);
}

.carga-barra-item[aria-current='page'] svg {
  stroke-width: 2.3;
}

.carga-barra-sino {
  position: absolute;
  transform: translate(14px, -10px);
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  border-radius: var(--carga-radius-pill);
  background: var(--carga-signal-bad);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------- Placa */

.carga-placa {
  background: var(--carga-surface-raised);
  border: 1px solid var(--carga-border-faint);
  border-radius: var(--carga-radius-3);
  padding: var(--carga-space-3);
  box-shadow: var(--carga-shadow-raised);
}

.carga-placa[data-tom='alerta'] {
  border-color: var(--carga-signal-bad);
  background: var(--carga-signal-bad-wash);
}

.carga-placa[data-tom='bom'] {
  border-color: var(--carga-signal-good);
  background: var(--carga-signal-good-wash);
}

.carga-placa-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--carga-space-2);
  margin-bottom: var(--carga-space-2);
  flex-wrap: wrap;
}

.carga-placa-cabeca > :last-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------------------------------------------------------- Botao */

.carga-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--carga-space-1);
  min-height: var(--carga-target-default);
  padding-inline: var(--carga-space-4);
  border-radius: var(--carga-radius-2);
  background: var(--carga-surface-sunken);
  color: var(--carga-text-strong);
  font-weight: 650;
  font-size: var(--carga-type-size-4);
  border: 1px solid transparent;
  transition: transform var(--carga-motion-toque) var(--carga-motion-curva),
    background var(--carga-motion-toque) var(--carga-motion-curva);
  user-select: none;
}

.carga-botao:active {
  transform: scale(0.97);
}

.carga-botao[data-enfase='primario'] {
  background: var(--carga-accent);
  color: var(--carga-text-onaccent);
  box-shadow: var(--carga-shadow-raised);
}

.carga-botao[data-enfase='forte'] {
  background: var(--carga-text-strong);
  color: var(--carga-surface-raised);
}

.carga-botao[data-enfase='contorno'] {
  background: transparent;
  border-color: var(--carga-border-strong);
}

.carga-botao[data-enfase='fantasma'] {
  background: transparent;
  color: var(--carga-text-muted);
}

.carga-botao[data-enfase='perigo'] {
  background: var(--carga-signal-bad);
  color: #fff;
}

.carga-botao[data-tamanho='miudo'] {
  min-height: var(--carga-target-dense);
  padding-inline: var(--carga-space-2);
  font-size: var(--carga-type-size-3);
  border-radius: var(--carga-radius-1);
}

.carga-botao[data-tamanho='grande'] {
  min-height: var(--carga-target-huge);
  font-size: var(--carga-type-size-5);
  border-radius: var(--carga-radius-3);
  width: 100%;
}

.carga-botao:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.carga-botao-icone {
  display: grid;
  place-items: center;
  width: var(--carga-target-default);
  height: var(--carga-target-default);
  border-radius: var(--carga-radius-2);
  color: var(--carga-text-default);
  flex: 0 0 auto;
}

.carga-botao-icone svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carga-botao-icone:active {
  background: var(--carga-surface-sunken);
}

/* ---------------------------------------------------------- Campo */

.carga-campo {
  display: grid;
  gap: var(--carga-space-0);
}

.carga-campo-rotulo {
  font-size: var(--carga-type-size-2);
  font-weight: 600;
  color: var(--carga-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.carga-campo input,
.carga-campo select,
.carga-campo textarea {
  min-height: var(--carga-target-default);
  padding: var(--carga-space-1) var(--carga-space-2);
  border: 1.5px solid var(--carga-border-default);
  border-radius: var(--carga-radius-2);
  background: var(--carga-surface-raised);
  color: var(--carga-text-strong);
  font-size: var(--carga-type-size-4);
  width: 100%;
}

.carga-campo input[inputmode='decimal'],
.carga-campo input[inputmode='numeric'] {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--carga-type-size-6);
  text-align: right;
}

.carga-campo input::placeholder {
  color: var(--carga-text-faint);
  font-weight: 400;
}

.carga-campo[data-estado='ruim'] input {
  border-color: var(--carga-signal-bad);
  background: var(--carga-signal-bad-wash);
}

.carga-campo-dica {
  font-size: var(--carga-type-size-2);
  color: var(--carga-text-muted);
}

.carga-campo-dica[data-tom='ruim'] {
  color: var(--carga-signal-bad);
  font-weight: 600;
}

.carga-campo-dica[data-tom='bom'] {
  color: var(--carga-signal-good);
  font-weight: 600;
}

/* ---------------------------------------------------------- Marcador */

.carga-marcador {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding-inline: var(--carga-space-1);
  border-radius: var(--carga-radius-pill);
  background: var(--carga-surface-sunken);
  color: var(--carga-text-default);
  font-size: var(--carga-type-size-2);
  font-weight: 650;
  white-space: nowrap;
}

.carga-marcador[data-tom='ruim'] {
  background: var(--carga-signal-bad-wash);
  color: var(--carga-signal-bad);
}

.carga-marcador[data-tom='bom'] {
  background: var(--carga-signal-good-wash);
  color: var(--carga-signal-good);
}

.carga-marcador[data-tom='acento'] {
  background: var(--carga-accent-wash);
  color: var(--carga-accent-strong);
}

.carga-marcador[data-tom='info'] {
  background: var(--carga-signal-info-wash);
  color: var(--carga-signal-info);
}

/* ---------------------------------------------------------- Lista e item */

.carga-lista {
  display: grid;
  gap: var(--carga-space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.carga-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--carga-space-2);
  width: 100%;
  min-height: var(--carga-target-large);
  padding: var(--carga-space-2);
  background: var(--carga-surface-raised);
  border: 1px solid var(--carga-border-faint);
  border-radius: var(--carga-radius-2);
  text-align: left;
  transition: transform var(--carga-motion-toque) var(--carga-motion-curva);
}

.carga-item:active {
  transform: scale(0.99);
  background: var(--carga-surface-sunken);
}

.carga-item[data-estado='feito'] {
  opacity: 0.55;
}

.carga-item[data-tom='ruim'] {
  border-inline-start: 4px solid var(--carga-signal-bad);
}

.carga-item[data-tom='acento'] {
  border-inline-start: 4px solid var(--carga-accent);
}

.carga-item-nome {
  font-weight: 650;
  color: var(--carga-text-strong);
  font-size: var(--carga-type-size-4);
}

.carga-item-apoio {
  font-size: var(--carga-type-size-2);
  color: var(--carga-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--carga-space-0) var(--carga-space-1);
  align-items: center;
}

.carga-item-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  color: var(--carga-text-strong);
  white-space: nowrap;
}

/* ---------------------------------------------------------- Metrica */

.carga-metricas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--carga-space-1);
}

.carga-metrica {
  background: var(--carga-surface-raised);
  border: 1px solid var(--carga-border-faint);
  border-radius: var(--carga-radius-2);
  padding: var(--carga-space-2);
  display: grid;
  gap: 2px;
}

.carga-metrica-rotulo {
  font-size: var(--carga-type-size-1);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--carga-text-muted);
}

.carga-metrica-valor {
  /* o numero e a informacao: nunca quebra linha, e encolhe junto com o cartao */
  font-size: clamp(var(--carga-type-size-5), 6.2vw, var(--carga-type-size-7));
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--carga-text-strong);
  line-height: 1.05;
}

.carga-metrica-valor[data-tom='bom'] {
  color: var(--carga-signal-good);
}

.carga-metrica-valor[data-tom='ruim'] {
  color: var(--carga-signal-bad);
}

.carga-metrica-apoio {
  font-size: var(--carga-type-size-2);
  color: var(--carga-text-muted);
}

/* ---------------------------------------------------------- Aviso */

.carga-aviso {
  display: grid;
  gap: var(--carga-space-0);
  padding: var(--carga-space-2);
  border-radius: var(--carga-radius-2);
  background: var(--carga-surface-sunken);
  border-inline-start: 4px solid var(--carga-border-strong);
  font-size: var(--carga-type-size-3);
}

.carga-aviso[data-tom='ruim'] {
  background: var(--carga-signal-bad-wash);
  border-color: var(--carga-signal-bad);
  color: var(--carga-signal-bad);
}

.carga-aviso[data-tom='bom'] {
  background: var(--carga-signal-good-wash);
  border-color: var(--carga-signal-good);
  color: var(--carga-signal-good);
}

.carga-aviso[data-tom='acento'] {
  background: var(--carga-accent-wash);
  border-color: var(--carga-accent);
  color: var(--carga-accent-strong);
}

.carga-aviso-titulo {
  font-weight: 750;
}

/* ---------------------------------------------------------- Trilho de abas */

.carga-trilho {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--carga-surface-sunken);
  border-radius: var(--carga-radius-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.carga-trilho::-webkit-scrollbar {
  display: none;
}

.carga-aba {
  flex: 1 0 auto;
  min-height: var(--carga-target-dense);
  padding-inline: var(--carga-space-2);
  border-radius: var(--carga-radius-1);
  font-size: var(--carga-type-size-3);
  font-weight: 650;
  color: var(--carga-text-muted);
  white-space: nowrap;
}

.carga-aba[aria-selected='true'] {
  background: var(--carga-surface-raised);
  color: var(--carga-text-strong);
  box-shadow: var(--carga-shadow-raised);
}

/* ---------------------------------------------------------- Grade de toque */

.carga-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: var(--carga-space-1);
}

.carga-tijolo {
  display: grid;
  align-content: space-between;
  gap: var(--carga-space-0);
  min-height: 84px;
  padding: var(--carga-space-1);
  background: var(--carga-surface-raised);
  border: 1.5px solid var(--carga-border-default);
  border-radius: var(--carga-radius-2);
  text-align: left;
  transition: transform var(--carga-motion-toque) var(--carga-motion-curva);
}

.carga-tijolo:active {
  transform: scale(0.96);
}

.carga-tijolo[data-escolhido='true'] {
  border-color: var(--carga-accent);
  background: var(--carga-accent-wash);
}

.carga-tijolo-nome {
  font-size: var(--carga-type-size-3);
  font-weight: 650;
  color: var(--carga-text-strong);
  line-height: 1.2;
}

.carga-tijolo-apoio {
  font-size: var(--carga-type-size-1);
  color: var(--carga-text-muted);
  font-variant-numeric: tabular-nums;
}

.carga-tijolo-conta {
  position: absolute;
  transform: translate(0, -4px);
  align-self: end;
  justify-self: end;
  min-width: 24px;
  height: 24px;
  border-radius: var(--carga-radius-pill);
  background: var(--carga-accent);
  color: var(--carga-text-onaccent);
  font-size: var(--carga-type-size-2);
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------- Passo (quantidade) */

.carga-passo {
  display: grid;
  grid-template-columns: var(--carga-target-default) 1fr var(--carga-target-default);
  align-items: center;
  gap: var(--carga-space-0);
  background: var(--carga-surface-sunken);
  border-radius: var(--carga-radius-2);
  padding: 3px;
}

.carga-passo-botao {
  display: grid;
  place-items: center;
  min-height: var(--carga-target-dense);
  border-radius: var(--carga-radius-1);
  background: var(--carga-surface-raised);
  font-size: var(--carga-type-size-6);
  font-weight: 800;
  color: var(--carga-text-strong);
  box-shadow: var(--carga-shadow-raised);
}

.carga-passo-botao:active {
  background: var(--carga-accent-wash);
}

.carga-passo-valor {
  text-align: center;
  font-size: var(--carga-type-size-6);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--carga-text-strong);
  border: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
}

/* ---------------------------------------------------------- Folha (painel de baixo) */

.carga-folha {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  align-items: end;
  background: rgb(10 12 16 / 0.5);
  animation: carga-aparece var(--carga-motion-troca) var(--carga-motion-curva);
}

.carga-folha-corpo {
  background: var(--carga-surface-page);
  border-radius: var(--carga-radius-4) var(--carga-radius-4) 0 0;
  padding: var(--carga-space-3);
  padding-bottom: calc(var(--carga-space-5) + env(safe-area-inset-bottom));
  max-height: 92dvh;
  overflow-y: auto;
  display: grid;
  gap: var(--carga-space-3);
  animation: carga-sobe var(--carga-motion-entra) var(--carga-motion-curva);
  max-width: 760px;
  width: 100%;
  margin-inline: auto;
}

.carga-folha-cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--carga-space-2);
  position: sticky;
  top: calc(var(--carga-space-3) * -1);
  padding-block: var(--carga-space-1);
  margin-block: calc(var(--carga-space-1) * -1);
  background: var(--carga-surface-page);
  z-index: 1;
}

@keyframes carga-aparece {
  from {
    opacity: 0;
  }
}

@keyframes carga-sobe {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* ---------------------------------------------------------- Barra de acao fixa */

.carga-rodape-acao {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 40;
  padding: var(--carga-space-2) var(--carga-space-3);
  padding-bottom: calc(var(--carga-space-2) + env(safe-area-inset-bottom));
  background: var(--carga-surface-raised);
  border-top: 1px solid var(--carga-border-default);
  box-shadow: 0 -4px 16px rgb(10 12 16 / 0.08);
  display: grid;
  gap: var(--carga-space-1);
  max-width: 760px;
  margin-inline: auto;
}

/* ---------------------------------------------------------- Vazio */

.carga-vazio {
  display: grid;
  gap: var(--carga-space-2);
  place-items: center;
  text-align: center;
  padding: var(--carga-space-7) var(--carga-space-3);
  color: var(--carga-text-muted);
}

.carga-vazio svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.5;
}

/* ---------------------------------------------------------- Torrada */

.carga-torrada {
  position: fixed;
  left: 50%;
  bottom: calc(var(--carga-barra-altura) + var(--carga-space-3));
  transform: translateX(-50%);
  z-index: 80;
  padding: var(--carga-space-1) var(--carga-space-3);
  min-height: var(--carga-target-dense);
  display: flex;
  align-items: center;
  gap: var(--carga-space-1);
  border-radius: var(--carga-radius-pill);
  background: var(--carga-surface-inverse);
  color: var(--carga-text-oninverse);
  font-size: var(--carga-type-size-3);
  font-weight: 650;
  box-shadow: var(--carga-shadow-float);
  animation: carga-sobe var(--carga-motion-troca) var(--carga-motion-curva);
  max-width: calc(100vw - 32px);
}

.carga-torrada[data-tom='ruim'] {
  background: var(--carga-signal-bad);
  color: #fff;
}

/* ---------------------------------------------------------- Barra de proporcao */

.carga-proporcao {
  height: 8px;
  border-radius: var(--carga-radius-pill);
  background: var(--carga-surface-sunken);
  overflow: hidden;
}

.carga-proporcao-preenche {
  height: 100%;
  border-radius: inherit;
  background: var(--carga-accent);
  width: calc(var(--carga-runtime-proporcao, 0) * 1%);
  transition: width var(--carga-motion-entra) var(--carga-motion-curva);
}

/* ---------------------------------------------------------- Tabela enxuta */

.carga-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--carga-type-size-3);
}

.carga-tabela th {
  text-align: left;
  font-size: var(--carga-type-size-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--carga-text-muted);
  padding: var(--carga-space-0) var(--carga-space-1);
  border-bottom: 1px solid var(--carga-border-default);
}

.carga-tabela td {
  padding: var(--carga-space-1);
  border-bottom: 1px solid var(--carga-border-faint);
  color: var(--carga-text-default);
}

.carga-tabela td:last-child,
.carga-tabela th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* valor em dinheiro nunca parte no meio */
  white-space: nowrap;
  width: 1%;
}