/* --------------------------------------------------------------------------
   03. Cockpit documental: fonte/secoes/cockpit.php

   Capítulo escuro entre dois de papel. As duas divisas são deduzidas em
   site.css; nada aqui desenha borda de seção, e a atmosfera fica longe das
   bordas para não brigar com a sombra da divisa. Porta do capítulo de rede
   do molde: palco com cadeia numerada, alertas com fio, duas ações e a
   régua com a máquina de estados. Aqui a paleta tem estados (--ok, --aviso,
   --erro), então a severidade ganha cor além da forma do fio.
   -------------------------------------------------------------------------- */
.secao-cockpit {
  background: var(--sup-0);
  overflow: hidden;
  overflow: clip;
}

.cockpit-atmosfera {
  position: absolute;
  z-index: 0;
  inset: calc(var(--divisa-altura) * 1.2) 0;
  pointer-events: none;
}

.cockpit-atmosfera > * {
  position: absolute;
  inset: 0;
  display: block;
}

.cockpit-malha {
  --mov-forca: 7%;
  opacity: 0.6;
  background-image:
    repeating-linear-gradient(90deg, var(--borda) 0 1px, transparent 1px var(--e9)),
    repeating-linear-gradient(var(--borda) 0 1px, transparent 1px var(--e9));
  -webkit-mask-image: radial-gradient(116% 54% at 50% 50%, var(--texto), transparent 74%);
  mask-image: radial-gradient(116% 54% at 50% 50%, var(--texto), transparent 74%);
}

.cockpit-halo {
  --mov-forca: 4%;
}

.cockpit-halo-nucleo {
  --mov-opacidade-min: 0.35;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 42% at 16% 24%, var(--acento-vidro), transparent 70%),
    radial-gradient(48% 40% at 86% 76%, var(--acento-vidro), transparent 72%);
}

.secao-cockpit > .container {
  position: relative;
  z-index: 1;
}

/* --- Palco ---------------------------------------------------------------- */
.cockpit-palco {
  --mov-forca: 1.4%;
  position: relative;
  overflow: hidden;
  overflow: clip;
  margin: 0;
  padding: var(--e6);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-xl);
  background: var(--sup-1);
  box-shadow: var(--sombra-3);
}

.cockpit-palco::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(90deg, var(--borda) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(var(--borda) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, var(--texto), transparent);
  mask-image: radial-gradient(80% 70% at 50% 40%, var(--texto), transparent);
  pointer-events: none;
}

.cockpit-palco > * {
  position: relative;
  z-index: 1;
}

.cockpit-palco > .cockpit-palco-profundidade {
  --mov-forca: 9%;
  position: absolute;
  z-index: 0;
  inset: calc(var(--e9) * -1) 0;
  display: block;
  pointer-events: none;
}

.cockpit-palco-luz {
  --mov-opacidade-min: 0.3;
  --mov-opacidade-max: 1;
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(58% 54% at 20% 36%, var(--acento-vidro), transparent 72%),
    radial-gradient(64% 58% at 88% 88%, var(--acento-vidro), transparent 74%);
}

.cockpit-palco-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  margin-bottom: var(--e6);
}

.cockpit-palco-base {
  margin: var(--e6) 0 0;
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.cockpit-palco-base strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- Cadeia ----------------------------------------------------------------
   Seis nós em linha acima de 1200 px, três por linha até 981 px e coluna
   única abaixo disso. Cada nó pendura um elo ::before na borda esquerda; o
   primeiro de cada linha não tem elo. */
.cockpit-cadeia {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--e5);
  counter-reset: cadeia;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cockpit-no {
  position: relative;
  display: grid;
  gap: var(--e3);
  align-content: start;
  counter-increment: cadeia;
  padding: var(--e4);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
}

.cockpit-no::before {
  content: "";
  position: absolute;
  top: calc(var(--e4) + 18px);
  right: 100%;
  width: var(--e5);
  height: 7px;
  background:
    radial-gradient(circle, var(--acento) 0 3px, transparent 3.5px) right center / 7px 7px no-repeat,
    linear-gradient(90deg, var(--borda-forte), var(--acento-linha)) left center / 100% 1px no-repeat;
  pointer-events: none;
}

.cockpit-no:first-child::before {
  content: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cockpit-no::before {
      transform-origin: left center;
      scale: 0 1;
      animation: cockpit-elo linear both;
      animation-timeline: view();
      animation-range: entry 25% entry 70%;
    }

    @keyframes cockpit-elo {
      to { scale: 1 1; }
    }

    /* Em linha os seis nós entram juntos: a cadeia publica uma timeline e
       cada elo corre um pouco depois do anterior, na ordem da operação. */
    @media (min-width: 1201px) {
      .cockpit-cadeia { view-timeline-name: --cockpit-cadeia; }
      .cockpit-no::before { animation-timeline: --cockpit-cadeia; animation-range: cover 12% cover 32%; }
      .cockpit-no:nth-child(3)::before { animation-range: cover 18% cover 38%; }
      .cockpit-no:nth-child(4)::before { animation-range: cover 24% cover 44%; }
      .cockpit-no:nth-child(5)::before { animation-range: cover 30% cover 50%; }
      .cockpit-no:nth-child(6)::before { animation-range: cover 36% cover 56%; }
    }

    @media (max-width: 980px) {
      .cockpit-cadeia::before {
        transform-origin: center top;
        scale: 1 0;
        animation: cockpit-trilho linear both;
        animation-timeline: view();
        animation-range: entry 10% cover 35%;
      }

      @keyframes cockpit-trilho {
        to { scale: 1 1; }
      }
    }
  }
}

.cockpit-no-barra {
  position: absolute;
  inset: 0 0 auto;
  display: block;
  height: 2px;
  border-radius: var(--r-full) var(--r-full) 0 0;
  background: var(--acento-linha);
  pointer-events: none;
}

.cockpit-no-icone {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--acento-linha);
  border-radius: var(--r-sm);
  background: var(--acento-vidro);
  color: var(--acento);
}

.cockpit-no-icone .icone {
  width: 19px;
  height: 19px;
}

.cockpit-no-icone::after {
  content: counter(cadeia);
  position: absolute;
  top: calc(var(--e2) * -1);
  right: calc(var(--e2) * -1);
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding-inline: var(--e1);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
  background: var(--sup-3);
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  line-height: 1;
}

.cockpit-no > strong {
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-max);
  letter-spacing: var(--tk3);
  line-height: 1.3;
}

.cockpit-no-dado {
  color: var(--suave);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  line-height: 1.5;
  text-transform: uppercase;
}

.cockpit-no-valor {
  color: var(--suave);
  font-size: var(--c4);
  font-weight: var(--p-medio);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cockpit-no--ok .cockpit-no-barra { background: var(--ok); }
.cockpit-no--ok .cockpit-no-icone::after { border-color: var(--ok); color: var(--ok); }

.cockpit-no--atencao {
  border-color: color-mix(in srgb, var(--aviso) 40%, var(--borda));
  background: var(--sup-3);
}

.cockpit-no--atencao .cockpit-no-barra {
  background: repeating-linear-gradient(90deg, var(--aviso) 0 6px, transparent 6px 12px);
}

.cockpit-no--atencao .cockpit-no-icone {
  border-color: color-mix(in srgb, var(--aviso) 45%, transparent);
  background: color-mix(in srgb, var(--aviso) 10%, transparent);
  color: var(--aviso);
}

.cockpit-no--atencao .cockpit-no-valor {
  color: var(--texto);
  font-weight: var(--p-forte);
}

.cockpit-no--pendente {
  border-style: dashed;
  background: transparent;
}

.cockpit-no--pendente .cockpit-no-barra { background: transparent; }

.cockpit-no--pendente .cockpit-no-icone {
  border-style: dashed;
  border-color: var(--borda-forte);
  background: transparent;
  color: var(--tenue);
}

/* --- Corpo: alertas e ações ------------------------------------------------ */
.cockpit-corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--esp-grid);
  align-items: start;
  margin-top: var(--esp-bloco);
}

.cockpit-alertas > h3,
.cockpit-acoes > h3 {
  margin: 0;
}

.cockpit-alertas > p:not([class]) {
  margin-top: var(--e4);
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

.cockpit-alertas > ul {
  display: grid;
  gap: var(--e4);
  margin: var(--e6) 0 0;
  padding: 0;
  list-style: none;
}

.cockpit-alerta {
  position: relative;
  padding: var(--e5) var(--e5) var(--e5) var(--e6);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  transition: border-color var(--dur-2) var(--ease);
}

.cockpit-alerta:hover {
  border-color: var(--borda-forte);
}

.cockpit-alerta::before {
  content: "";
  position: absolute;
  inset: var(--e4) auto var(--e4) var(--e4);
  width: 2px;
  border-radius: var(--r-full);
  background: var(--suave);
}

.cockpit-alerta--atencao::before {
  background: repeating-linear-gradient(var(--aviso) 0 5px, transparent 5px 10px);
}

.cockpit-alerta--critico::before {
  background: var(--erro);
}

.cockpit-alerta strong {
  display: block;
  margin-bottom: var(--e1);
  color: var(--texto);
  font-size: var(--c3);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.4;
}

.cockpit-alerta span {
  display: block;
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.cockpit-acoes > .grade {
  gap: var(--e5);
  margin-top: var(--e6);
}

.cockpit-acoes .cartao {
  display: grid;
  gap: var(--e4);
  align-content: start;
}

.cockpit-acoes h4 {
  margin: 0;
  color: var(--texto);
  font-family: var(--titulo);
  font-size: var(--t5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  line-height: 1.35;
}

.cockpit-acoes .cartao p {
  margin: 0;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.75;
}

.cockpit-acoes-nota {
  position: relative;
  margin: var(--e5) 0 0;
  padding: var(--e5) var(--e5) var(--e5) calc(var(--e5) + var(--e6));
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  background: var(--sup-2);
  color: var(--suave);
  font-size: var(--c4);
  line-height: 1.75;
}

.cockpit-acoes-nota .icone {
  position: absolute;
  top: calc(var(--e5) + 2px);
  left: var(--e5);
  width: 18px;
  height: 18px;
  color: var(--acento);
}

.cockpit-acoes-nota strong {
  color: var(--texto);
  font-weight: var(--p-forte);
}

/* --- Régua da máquina de estados ----------------------------------------- */
.cockpit-estados {
  position: relative;
  margin-top: var(--esp-bloco);
  padding-top: var(--esp-bloco);
}

.cockpit-regua {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, var(--acento-linha), var(--borda-forte) 50%, transparent);
}

.cockpit-estados-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--e4) var(--esp-grid);
  align-items: end;
}

.cockpit-estados-intro p {
  margin: 0;
  color: var(--suave);
  font-size: var(--c3);
  line-height: 1.8;
}

.cockpit-estados-faixas {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e6);
}

.cockpit-estados-lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* O caminho feliz é uma sequência: cada selo aponta para o próximo. */
.cockpit-estados-lista:not(.cockpit-estados-lista--desvio) > li + li::before {
  content: "";
  display: inline-block;
  width: var(--e4);
  height: 1px;
  margin-right: var(--e3);
  vertical-align: middle;
  background: var(--acento-linha);
}

.cockpit-estados-lista:not(.cockpit-estados-lista--desvio) > li:last-child .selo {
  border-color: color-mix(in srgb, var(--ok) 50%, transparent);
  color: var(--ok);
}

.cockpit-estados-lista--desvio .selo {
  border-style: dashed;
  color: var(--suave);
}

.cockpit-estados-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e2) var(--e3);
  margin-top: var(--e6);
}

.cockpit-estados-nota strong {
  color: var(--texto);
}

/* --- Responsivo: 1200 / 980 / 680 / 380 ---------------------------------- */
@media (max-width: 1200px) {
  .cockpit-cadeia {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cockpit-no:nth-child(3n + 1)::before {
    content: none;
  }
}

@media (max-width: 980px) {
  .cockpit-palco {
    padding: var(--e5);
  }

  .cockpit-cadeia {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e4);
    padding-left: var(--e6);
  }

  .cockpit-cadeia::before {
    content: "";
    position: absolute;
    top: var(--e5);
    bottom: var(--e5);
    left: 3px;
    width: 1px;
    background: linear-gradient(var(--acento-linha), var(--borda-forte));
    pointer-events: none;
  }

  .cockpit-no {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "ico nome valor" "ico dado valor";
    gap: var(--e1) var(--e4);
    align-items: center;
    padding: var(--e4) var(--e5);
  }

  .cockpit-no::before,
  .cockpit-no:first-child::before,
  .cockpit-no:nth-child(3n + 1)::before {
    content: "";
    top: 50%;
    right: auto;
    left: calc(var(--e6) * -1);
    width: var(--e6);
    margin-top: -3px;
  }

  .cockpit-no-icone { grid-area: ico; }
  .cockpit-no > strong { grid-area: nome; }
  .cockpit-no-dado { grid-area: dado; }
  .cockpit-no-valor { grid-area: valor; text-align: right; }

  .cockpit-corpo,
  .cockpit-estados-intro {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .cockpit-malha {
    --mov-forca: 4%;
    opacity: 0.4;
  }

  .cockpit-halo {
    --mov-forca: 2.5%;
  }

  .cockpit-palco {
    padding: var(--e4);
    border-radius: var(--r-lg);
  }

  .cockpit-cadeia {
    padding-left: var(--e5);
  }

  .cockpit-no {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ico nome" "ico dado" "ico valor";
    align-items: start;
    gap: var(--e1) var(--e3);
    padding: var(--e4);
  }

  .cockpit-no::before,
  .cockpit-no:first-child::before,
  .cockpit-no:nth-child(3n + 1)::before {
    left: calc(var(--e5) * -1);
    width: var(--e5);
  }

  .cockpit-no-icone { align-self: center; }
  .cockpit-no-valor { text-align: left; }

  .cockpit-alerta {
    padding: var(--e4) var(--e4) var(--e4) var(--e5);
  }

  .cockpit-alerta::before {
    inset: var(--e3) auto var(--e3) var(--e3);
  }

  /* Em coluna estreita a seta entre os selos quebra a linha no meio. */
  .cockpit-estados-lista:not(.cockpit-estados-lista--desvio) > li + li::before {
    content: none;
  }
}

@media (max-width: 380px) {
  .cockpit-palco {
    padding: var(--e3);
  }

  .cockpit-cadeia {
    padding-left: var(--e4);
  }

  .cockpit-no::before,
  .cockpit-no:first-child::before,
  .cockpit-no:nth-child(3n + 1)::before {
    left: calc(var(--e4) * -1);
    width: var(--e4);
  }

  .cockpit-no {
    padding: var(--e3);
  }
}