/* ==========================================================================
   TodaRota · blocos de conteúdo
   Cartão, métrica, rosca, tabela e estados. Tudo aqui é PLANO: o relevo
   pertence só aos controles (ver .key em base.css).
   ========================================================================== */

/* Única região que rola. A topbar (irmã, flex:none) fica fixa acima. */
.page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s7);
}

/* ==========================================================================
   A disposição — bento
   Oito regiões nomeadas num mosaico. Quem decide onde cada uma cai é esta
   grade, nunca o cartão: cartão que sabe onde mora não sobrevive a um
   rearranjo. (Uma segunda disposição em faixas foi construída e comparada
   em 24/07; o bento venceu e a outra saiu — manter duas significaria
   manter as duas em toda tela nova.)
   ========================================================================== */

.layout {
  display: grid;
  gap: var(--s4);
  align-content: start;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-areas:
    "hero  s1    s2"
    "hero  s3    s4"
    "serie serie frota"
    "rank  rank  score";
}

@media (max-width: 1280px) {
  .layout {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hero  hero"
      "s1    s2"
      "s3    s4"
      "serie serie"
      "frota score"
      "rank  rank";
  }
}
@media (max-width: 860px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas: "hero" "s1" "s2" "s3" "s4" "serie" "frota" "score" "rank";
  }
}

/* ---- Cartão: a peça do painel ------------------------------------------ */

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}
/* Tabela sangra até a borda: linha de tabela com respiro dos dois lados
   desperdiça a largura que os nomes longos precisam. */
.card--flush {
  padding: 0;
  overflow: hidden;
  /* Não estica pra preencher as duas fileiras da grade: cartão esticado
     com vazio embaixo do rodapé lê como carregamento travado. */
  align-self: start;
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.card__head h2 {
  font-size: var(--t-md);
  font-weight: 500;
  color: var(--text-2);
}
.card--flush .card__head { margin: 0; padding: var(--s5) var(--s5) var(--s4); }

/* Toda saída de cartão leva a uma lista já filtrada. */
.card__out {
  margin-left: auto;
  flex: none;
  font-size: 13px;
  color: var(--text-5);
  transition: color .12s ease;
}
.card__out:hover { color: var(--text); text-decoration: underline; }
.card__note { font-size: var(--t-sm); color: var(--text-6); }

/* ---- Herói -------------------------------------------------------------- */

.hero__top { display: flex; align-items: center; gap: var(--s4); }
.hero__value {
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1;
}

/* ---- Tira de números ----------------------------------------------------
   Dois ou três contadores lado a lado, separados por fio. Serve pro que é
   contagem seca e não merece cartão próprio.
   ------------------------------------------------------------------------ */

.strip {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin: var(--s4) 0;
}
.strip__cel { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.strip__val { font-size: var(--t-lg); font-weight: 600; letter-spacing: -.015em; }
.strip__lab { font-size: var(--t-sm); color: var(--text-5); }
.strip__div { width: 1px; align-self: stretch; background: var(--line-card); }

/* ---- Faixa de alerta dentro do cartão -----------------------------------
   Superfície inteira, como o cartão de alerta. Continua valendo: no máximo
   uma por tela.
   ------------------------------------------------------------------------ */

.card__alert {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--alert-bg);
  border: 1px solid var(--alert-line);
  border-radius: var(--r-control);
  font-size: var(--t-sm);
  color: var(--alert-text);
  transition: background .14s ease, border-color .14s ease;
}
.card__alert:hover { background: var(--alert-bg-hover); border-color: var(--alert-line-hover); }
.card__alert-val { font-size: var(--t-lg); font-weight: 600; color: var(--accent); }
.card__alert .metric__arrow { color: var(--alert-arrow); }

/* ---- Progresso rotulado -------------------------------------------------- */

.card__prog { margin-top: var(--s5); }
.card__prog-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s3);
  font-size: var(--t-sm);
  color: var(--text-5);
}
.card__prog-head strong { font-size: var(--t-md); font-weight: 600; color: var(--text); }

/* ---- Cartão de métrica -------------------------------------------------- */

.metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  color: inherit;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
/* O cartão sobe ao passar o mouse: a superfície clareia, sem sombra. */
.metric:hover {
  background: var(--bg-card-hover);
  border-color: var(--hairline-hover);
}

.metric__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--t-sm);
  color: var(--text-4);
}
.metric__arrow { margin-left: auto; color: var(--text-7); }

.metric__value {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.015em;
}
.metric__note  { font-size: var(--t-sm); color: var(--text-6); }

/* Pastilha circular do ícone. */
.metric__icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--bg-badge);
  display: grid;
  place-items: center;
  color: var(--text-4);
}

/* O delta é um CHIP, não texto solto: lê de longe e sustenta a regra de cor. */
.metric__delta {
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
}
/* Regra dura: nesta métrica menos é melhor, então subir é alerta. */
.metric__delta.is-up   { color: var(--accent); background: rgba(242, 118, 46, .13); }
.metric__delta.is-down { color: var(--good);   background: rgba(99, 165, 126, .14); }

/* ---- Legenda ------------------------------------------------------------ */

.legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  font-size: var(--t-sm);
}
.legend__row { display: flex; align-items: center; gap: var(--s2); }
.legend__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; }
.legend__name { color: var(--text-3); }
.legend__val  { margin-left: auto; color: var(--text-4); }

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

.table {
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  overflow: hidden;
}

.table__head,
.table__row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 110px 110px 96px;
  align-items: center;
  padding: 0 var(--s5);
}

.table__head {
  height: 42px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-5);
}

.table__row {
  height: 46px;
  border-top: 1px solid var(--line-row);
  color: inherit;
  cursor: pointer;
  transition: background .12s ease;
}
.table__row:hover { background: rgba(255, 255, 255, .03); }

.table__pos { font-size: var(--t-sm); color: var(--text-6); }
.right { text-align: right; }
.muted { color: var(--text-4); }

.table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line-row);
}
.table__count { font-size: var(--t-sm); color: var(--text-6); }

/* ---- Pílula de risco ----------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.pill--alto  { background: var(--pill-alto-bg);  color: var(--pill-alto-fg);  border-color: var(--pill-alto-line); }
.pill--medio { background: var(--pill-medio-bg); color: var(--pill-medio-fg); border-color: var(--pill-medio-line); }
.pill--baixo { background: var(--pill-baixo-bg); color: var(--pill-baixo-fg); border-color: var(--pill-baixo-line); }

/* ==========================================================================
   Estados
   Carregando e vazio não são detalhe: são o que o operador vê todo dia às 6h
   quando o motor ainda não respondeu.
   ========================================================================== */

@keyframes pulse { 0%, 100% { opacity: .4 } 50% { opacity: .95 } }

.skeleton {
  background: var(--bg-badge);
  border-radius: 5px;
  height: 10px;
  animation: pulse 1.6s ease-in-out infinite;
}
.skeleton--pill { height: 18px; width: 52px; border-radius: var(--r-pill); justify-self: end; }
.skeleton--num  { width: 32px; justify-self: end; }
.skeleton--pos  { width: 14px; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: 48px 32px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
}
.empty__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--bg-badge);
  display: grid;
  place-items: center;
  color: var(--text-5);
}
.empty__title { font-size: var(--t-lg); font-weight: 600; }
.empty__text {
  font-size: var(--t-md);
  color: var(--text-4);
  max-width: 340px;
  line-height: 1.5;
  text-wrap: pretty;
}
.empty .key { margin-top: 14px; }