/* ══════════════════════════════════════════════════════════════
   Pantanal Integra — Mapa · Rotina · Plantão, sob a Mesa
   Cada frente carrega a sua cor por toda a página.
════════════════════════════════════════════════════════════════ */

/* ─── Selo do produto ─────────────────────────────────────────── */
.produto-selo {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--t-body);
  color: var(--paper-84);
}
.produto-selo img { width: 3.75rem; height: auto; flex: none; }
.produto-selo b { font-family: var(--face-display); font-weight: 700; color: var(--white); }

/* ─── Confluência (capa) ──────────────────────────────────────── */
.capa-integra .capa-i__visual { display: grid; align-content: center; }
.confluencia { display: grid; gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.confluencia__f,
.confluencia__leito {
  display: grid;
  gap: 2px;
  background: var(--navy);
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--c, var(--amber));
}
.confluencia b {
  font-family: var(--face-display);
  font-weight: 700;
  font-size: var(--t-body);
  color: var(--white);
}
.confluencia span { font-size: var(--t-caption); color: var(--paper-58); }
.confluencia__leito { background: var(--field-dark); }

/* ─── Módulo das frentes (abas) ───────────────────────────────── */
.mod { border-top: 1px solid var(--rule); }

.mod__abas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
}
/* A aba escolhida fica no tom da página; as outras recuam.
   O contrário — destacar a escolhida com fundo cinza — lia como desativada. */
.mod__aba {
  position: relative;
  background: var(--field);
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "glifo n" "nome nome" "sub sub";
  gap: var(--s-2) var(--s-3);
  align-items: center;
  text-align: left;
  transition: background var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.mod__aba::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--c);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--t-mid) var(--ease-out);
}
.mod__aba[aria-selected="true"]::before { scale: 1 1; }
.mod__aba:hover { background: var(--field-2); }
.mod__aba[aria-selected="true"] { background: var(--paper); }

.mod__glifo { grid-area: glifo; width: 1.5rem; height: 1.5rem; color: var(--ink-34); transition: color var(--t-mid) var(--ease); }
.mod__aba[aria-selected="true"] .mod__glifo { color: var(--c); }
/* Amarelo não tem contraste sobre off-white nem como traço fino */
.mod__aba[data-f="plantao"][aria-selected="true"] .mod__glifo { color: var(--navy); }

/* Ficha de cor sempre visível: as três cores do produto convivem na página
   mesmo com uma só aba aberta. Como é marca, e não texto, o amarelo pode. */
.mod__n {
  grid-area: n;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-caption);
  color: var(--ink-66);
}
.mod__n::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--c);
  opacity: 0.45;
  transition: opacity var(--t-mid) var(--ease);
}
.mod__aba[aria-selected="true"] .mod__n::before { opacity: 1; }
.mod__nome { grid-area: nome; font-family: var(--face-display); font-size: var(--t-h1); color: var(--ink-66); transition: color var(--t-fast) var(--ease); }
.mod__aba[aria-selected="true"] .mod__nome { color: var(--ink); }
.mod__sub { grid-area: sub; font-size: var(--t-caption); color: var(--ink-66); }

/* Painel: recebe a cor da frente selecionada */
.mod__painel {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-6) 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
@media (prefers-reduced-motion: no-preference) {
  .mod__painel[data-entrando] { animation: painel-entra 320ms var(--ease-out) both; }
}
@keyframes painel-entra {
  from { opacity: 0; translate: 0 var(--s-3); }
  to { opacity: 1; translate: 0 0; }
}

.mod__frase {
  grid-column: 1;
  font-family: var(--face-display);
  font-size: var(--t-h1);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  padding-left: var(--s-6);
  border-left: 3px solid var(--c);
  max-width: 30ch;
}
.mod__itens { grid-column: 2; display: grid; gap: var(--s-3); align-content: start; }
.mod__itens li {
  position: relative;
  padding-left: var(--s-6);
  color: var(--ink-76);
}
.mod__itens li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 12px; height: 1px;
  background: var(--c);
}
.mod__fato {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-5);
  color: var(--ink-76);
}
.mod__fato b { font-family: var(--face-display); font-weight: 700; color: var(--ink); }

/* Painel do Plantão: fluxo + escala */
.mod__painel--plantao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fluxo { grid-column: 1; display: grid; gap: var(--s-4); align-content: start; }
.fluxo__f {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.fluxo__n { grid-row: span 2; font-size: var(--t-h2); color: var(--navy); }
.fluxo__f b { font-family: var(--face-display); font-weight: 700; }
.fluxo__f span:last-child { font-size: var(--t-caption); color: var(--ink-66); }

.escala {
  grid-column: 2;
  border: 1px solid var(--rule);
  background: var(--field);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-1);
  align-content: start;
}
.escala__vivo {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--track-caption); text-transform: uppercase;
  color: var(--ink-66);
}
.escala__vivo .pulso { background: var(--amber); }
.escala__nome { font-family: var(--face-display); font-size: var(--t-h1); }
.escala__quando { font-size: var(--t-body); color: var(--ink-66); margin-bottom: var(--s-3); }

.escala__hoje { display: grid; border-top: 1px solid var(--rule); }
.escala__hoje-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  margin-inline: calc(var(--s-3) * -1);
  align-items: baseline;
  font-size: var(--t-caption);
  color: var(--ink-66);
}
.escala__hoje-turno { font-weight: 500; }
.escala__hoje-quem { font-family: var(--face-display); }
.escala__hoje-linha.is-agora { background: var(--amber); color: var(--navy); }

/* ─── Mesa ────────────────────────────────────────────────────── */
.mesa {
  margin-top: var(--s-6);
  background: var(--navy);
  color: var(--white);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--s-4) var(--s-8);
  align-items: start;
}
.mesa__marca {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  color: var(--amber);
}
.mesa__marca svg { width: 2.25rem; height: 2.25rem; }
.mesa__marca span { font-family: var(--face-display); font-size: var(--t-h1); color: var(--white); }
.mesa__txt { color: var(--paper-84); max-width: 62ch; }
.mesa__txt b { color: var(--white); font-family: var(--face-display); font-weight: 700; }
.mesa__loop {
  grid-column: 2;
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-4);
  font-size: var(--t-caption);
  color: var(--paper-58);
}
.mesa__loop svg { flex: none; margin-top: 0.1em; color: var(--amber); }

/* ─── Duelo (consultoria × Integra) ───────────────────────────── */
.duelo { border-top: 1px solid var(--rule-dark); }
.duelo__cab, .duelo__linhas > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-6);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule-dark-soft);
  align-items: baseline;
}
.duelo__cab {
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--track-caption); text-transform: uppercase;
  color: var(--paper-58);
}
.duelo__cab span:first-child { grid-column: 2; }
.duelo__linhas { margin: 0; }
.duelo__linhas dt {
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--track-caption); text-transform: uppercase;
  color: var(--paper-58);
}
.duelo__linhas dd { margin: 0; color: var(--paper-58); }
.duelo__linhas dd:last-child {
  color: var(--white);
  position: relative;
  padding-left: var(--s-6);
}
.duelo__linhas dd:last-child::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 8px; height: 8px;
  border-left: 1.5px solid var(--amber);
  border-bottom: 1.5px solid var(--amber);
  rotate: -45deg;
}

/* ─── Eventos que acionam ─────────────────────────────────────── */
.eventos { border-top: 1px solid var(--rule); }
.eventos__i {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: center;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.eventos__nome { font-family: var(--face-display); font-size: var(--t-h2); }
.eventos__chip {
  font-size: var(--t-caption); font-weight: 500;
  letter-spacing: var(--track-caption); text-transform: uppercase;
  white-space: nowrap;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  color: var(--ink-66);
}
.eventos__i[data-nivel="imediato"] .eventos__chip,
.eventos__i[data-nivel="familia"] .eventos__chip {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy);
}

/* ─── Números da estrada ──────────────────────────────────────── */
.numeros {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
}
.numeros li { background: var(--navy); padding: var(--s-6) var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.numeros__v { font-size: var(--t-display); line-height: 1; color: var(--amber); }
.numeros__r { color: var(--paper-84); font-size: var(--t-body); }

.fonte {
  margin-top: var(--s-8);
  font-size: var(--t-caption);
  line-height: 1.6;
  color: var(--ink-66);
  max-width: 84ch;
}
.fonte--dark { color: var(--paper-58); }

/* ─── Três fases ──────────────────────────────────────────────── */
.fases-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
}
.fases-3 li {
  border-top: 3px solid var(--c);
  padding-top: var(--s-5);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.fases-3 .caption { color: var(--ink-66); }
.fases-3 p { color: var(--ink-76); }

/* ─── Dobras (papéis · fora do escopo) ────────────────────────── */
.dobra { margin-top: var(--s-10); border-top: 1px solid var(--rule); }
.dobra__i { border-bottom: 1px solid var(--rule); }
.dobra__i summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-5);
  cursor: pointer;
  font-family: var(--face-display);
  font-size: var(--t-h2);
  list-style: none;
  transition: color var(--t-fast) var(--ease);
}
.dobra__i summary::-webkit-details-marker { display: none; }
.dobra__i summary:hover { color: var(--accent); }
.dobra__sinal { position: relative; width: 1.25rem; height: 1.25rem; flex: none; }
.dobra__sinal::before, .dobra__sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: currentColor;
  transition: rotate var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.dobra__sinal::after { rotate: 90deg; }
.dobra__i[open] .dobra__sinal::after { rotate: 0deg; opacity: 0; }

.papeis { display: grid; margin: 0 0 var(--s-6); }
.papeis > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--s-5);
  padding-block: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  align-items: baseline;
}
.papeis dt { font-family: var(--face-display); font-size: var(--t-body); }
.papeis dd { margin: 0; color: var(--ink-76); }

.fora { display: grid; gap: var(--s-2); padding-bottom: var(--s-6); }
.fora li { position: relative; padding-left: var(--s-5); color: var(--ink-66); }
.fora li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--ink-34);
}

/* ─── Fecho ───────────────────────────────────────────────────── */
.fecho-i__cx {
  border-top: 3px solid var(--accent);
  padding-top: var(--s-8);
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  max-width: 52ch;
}

/* ─── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 64rem) {
  .mod__abas { grid-template-columns: 1fr; }
  .mod__aba {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "glifo nome n" "glifo sub sub";
    align-items: center;
    padding: var(--s-4) var(--s-5);
    gap: var(--s-1) var(--s-4);
  }
  .mod__aba::before { inset: 0 auto 0 0; width: 3px; height: auto; scale: 1 0; transform-origin: top; }
  .mod__aba[aria-selected="true"]::before { scale: 1 1; }
  .mod__nome { font-size: var(--t-h2); }
  .mod__painel, .mod__painel--plantao { grid-template-columns: 1fr; gap: var(--s-6); }
  .mod__frase, .mod__itens, .fluxo, .escala { grid-column: 1; }

  .mesa { grid-template-columns: 1fr; padding: var(--s-6); }
  .mesa__loop { grid-column: 1; }

  .duelo__cab { display: none; }
  .duelo__linhas > div { grid-template-columns: 1fr; gap: var(--s-2); padding-block: var(--s-5); }
  .duelo__linhas dd { position: relative; padding-left: var(--s-6); }
  .duelo__linhas dd:first-of-type::before {
    content: "";
    position: absolute;
    left: 0; top: 0.72em;
    width: 10px; height: 1px;
    background: var(--rule-dark);
  }

  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fases-3 { grid-template-columns: 1fr; gap: var(--s-6); }
  .papeis > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

@media (max-width: 40rem) {
  .produto-selo img { width: 3rem; }
  .numeros { grid-template-columns: 1fr; }
  .eventos__i { grid-template-columns: 1fr; gap: var(--s-2); align-items: start; }
  .eventos__chip { justify-self: start; }
  .mod__frase { font-size: var(--t-h2); }
}