:root {
  color-scheme: light;
  --papel: #EBEBEE;
  --superficie: #F8F8FA;
  --tinta: #141216;
  --suave: #5F5C69;
  --linha: #CFCDD6;
  --circulacao: #DEDDE3;
  --violeta: #4A22A6;
  --violeta-claro: #E4DCF7;
  --menta: #62DDBA;
  --menta-clara: #C9F3E6;
  --menta-escura: #0B6B52;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --texto: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.45;
  margin: 0;
  padding-inline: 16px;
}

.defs { position: absolute; width: 0; height: 0; }

button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }

/* No desktop o app aparece dentro de uma moldura de celular */

.palco {
  display: flex;
  flex-direction: column;
  padding-block: 16px 32px;
  max-width: 980px;
  margin-inline: auto;
}

.celular { min-width: 0; }
.app { background: var(--papel); }

@media (min-width: 900px) {
  .palco {
    align-items: center;
    padding-block: 40px;
  }
  .celular {
    width: 400px;
    height: min(840px, calc(100vh - 80px));
    border: 10px solid var(--tinta);
    border-radius: 46px;
    overflow: hidden;
    background: var(--papel);
    box-shadow: 0 30px 60px -30px rgba(20, 18, 22, .45);
  }
  .app { height: 100%; overflow-y: auto; }
}

/* Estrutura comum */

.app-corpo { display: grid; gap: 24px; padding: 20px 16px 28px; }

.secao { display: grid; gap: 10px; }
.secao-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.secao-titulo span { font-weight: 400; color: var(--suave); text-transform: none; letter-spacing: 0; }

.recolhe { border-top: 1px solid var(--linha); padding-top: 12px; }
.recolhe summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.recolhe summary::-webkit-details-marker { display: none; }
.recolhe summary::after { content: "+"; margin-left: auto; font-size: 16px; }
.recolhe[open] summary::after { content: "–"; }
.recolhe[open] > :not(summary) { margin-top: 12px; }

/* Cabeçalho: evento, hora e onde a pessoa está */

.cab-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cab-linha span { color: var(--suave); font-variant-numeric: tabular-nums; }
.local-ponto {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--menta);
  border: 2px solid var(--tinta);
}

/* Agora */

.agora { display: grid; gap: 14px; }
.agora-cab { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; color: var(--suave); }
.selo {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tinta);
  background: var(--menta);
  padding: 2px 8px;
  border-radius: 4px;
}
.agora-titulo { margin: -4px 0 0; font-size: 26px; line-height: 1.12; font-weight: 600; text-wrap: balance; }
.agora-desc { margin: -6px 0 0; color: var(--suave); font-style: italic; }

.onde {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 12px 12px 12px 14px;
}
.onde-texto { display: grid; gap: 1px; margin: 0; }
.onde-texto small {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--suave);
}
.onde-texto b { font-family: var(--mono); font-size: 18px; text-transform: uppercase; }
.onde-texto span { font-size: 13px; color: var(--suave); }
.onde .btn { flex: none; }
.onde-aqui { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; color: var(--menta-escura); }

.grupo { display: grid; gap: 8px; }
.grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}
.grupo-titulo span { font-weight: 400; font-size: 13px; color: var(--suave); }

.lista { display: grid; gap: 6px; }
.lab {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: stretch;
  width: 100%;
  padding: 0;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 10px;
  overflow: hidden;
}
.lab:hover { border-color: var(--tinta); }
.lab-num {
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
}
.lab-info { display: grid; gap: 2px; padding: 10px 12px; }
.lab-info b { font-weight: 600; text-wrap: balance; }
.lab-info span { font-family: var(--mono); font-size: 12px; color: var(--suave); }
.lab-seta { align-self: center; padding-right: 14px; font-family: var(--mono); font-size: 18px; }

/* Programação no formato do folder: horário em faixa preta */

.prog { display: grid; gap: 6px; }
.bloco-prog {
  display: grid;
  grid-template-columns: 54px 1fr;
  background: var(--superficie);
  border-radius: 10px;
  overflow: hidden;
}
.bloco-hora {
  background: var(--tinta);
  color: var(--papel);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  padding: 11px 8px;
  font-variant-numeric: tabular-nums;
}
.bloco-info { padding: 10px 12px; display: grid; gap: 2px; }
.bloco-info b { font-weight: 600; }
.bloco-info em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--menta);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: 2px;
}
.bloco-info i { color: var(--suave); font-size: 14px; }
.bloco-onde { font-family: var(--mono); font-size: 11px; color: var(--suave); margin-top: 2px; }
.bloco-ativ { margin: 6px 0 0; padding-left: 16px; display: grid; gap: 3px; font-size: 14px; font-style: italic; }
.bloco-ativ span { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--suave); }
.bloco-prog.passado { opacity: .5; }
.bloco-prog.atual { box-shadow: inset 0 0 0 2px var(--menta); }

/* Mapa */

.mapa-cartao {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 12px;
  display: grid;
  gap: 10px;
}
/* Visão geral ocupa a primeira coluna; cada prédio tem uma coluna com seus dois andares. */
.abas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: 6px;
}
.aba {
  display: grid;
  place-content: center;
  min-height: 42px;
  padding: 5px 6px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--linha);
  background: transparent;
}
.aba small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.aba-geral { grid-row: span 2; }
.aba:hover { border-color: var(--tinta); }
.aba[aria-selected="true"] { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.aba[aria-selected="true"] small { color: #B5B2BE; }

.mapa { display: block; width: 100%; height: auto; max-height: 460px; }
.etapa .mapa { max-height: 46vh; }
.mapa text {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 20px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--tinta);
  pointer-events: none;
}
.a rect, .a polygon { stroke: var(--tinta); stroke-width: 2; stroke-linejoin: round; }
.a-sala rect, .a-sala polygon { fill: var(--superficie); stroke-width: 3; }
.a-sala.agora rect, .a-sala.agora polygon { fill: var(--menta-clara); }
.a-sala.destino rect, .a-sala.destino polygon { fill: var(--violeta); }
.a-sala.destino text { fill: #FFFFFF; }
.a-circulacao rect, .a-circulacao polygon { fill: var(--circulacao); stroke: none; }
.a-escada rect { fill: url(#hachura); stroke-width: 1.5; }
.a-arquibancada rect { fill: url(#madeira); stroke-width: 1.5; }
.a-arquibancada text { fill: #5C4A2C; }
.a-wc rect { fill: #D5D4DB; stroke-width: 1.5; }
.a-wc text { font-size: 13px; fill: var(--suave); }
.a-bloco rect { fill: #D5D4DB; stroke-width: 1.5; }
.a-aberto rect, .a-aberto polygon { fill: url(#pontilhado); stroke: none; }
.a-inativo polygon { fill: #E2E1E6; stroke: var(--linha); stroke-dasharray: 6 6; }
.a-inativo text { fill: #9C99A6; font-weight: 400; }
.a-rua rect { fill: var(--tinta); stroke: none; }
.a-rua text { fill: #9C99A6; font-size: 14px; letter-spacing: .3em; }
.a-calcada rect { fill: #D3D2D9; stroke: none; }
.a-fachada rect { fill: var(--superficie); stroke-width: 3; }
.mapa .rotulo { font-size: 13px; font-weight: 400; fill: var(--suave); letter-spacing: .12em; }

g[data-acao] { cursor: pointer; pointer-events: bounding-box; }
g[data-acao]:hover rect, g[data-acao]:hover polygon { stroke: var(--violeta); }
g[data-acao]:focus-visible { outline: none; }
g[data-acao]:focus-visible rect, g[data-acao]:focus-visible polygon { stroke: var(--violeta); stroke-width: 6; }

.rota-halo { fill: none; stroke: var(--superficie); stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.rota { fill: none; stroke: var(--violeta); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.rota-fluxo {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 18;
  animation: fluxo 1.1s linear infinite;
}
@keyframes fluxo { to { stroke-dashoffset: -19; } }

.aqui-ponto { fill: var(--menta); stroke: var(--tinta); stroke-width: 3; }
.aqui-onda {
  fill: var(--menta);
  opacity: .6;
  transform-box: fill-box;
  transform-origin: center;
  animation: onda 1.8s ease-out infinite;
}
@keyframes onda { from { transform: scale(1); opacity: .6; } to { transform: scale(2.8); opacity: 0; } }
.partida { fill: var(--superficie); stroke: var(--violeta); stroke-width: 4; }
.pino-fundo { fill: var(--tinta); }
.pino-miolo { fill: var(--menta); }
.troca-fundo { fill: var(--tinta); }
.troca-icone { fill: none; stroke: #FFFFFF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--suave); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--tinta); }
.leg-agora { background: var(--menta-clara); }
.leg-aqui { background: var(--menta); border-radius: 50% !important; }


/* Rota */

.rota-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rota-topo span { font-size: 12px; color: var(--suave); text-align: right; }
.voltar { flex: none; background: transparent; border: 0; padding: 4px 0; font-family: var(--mono); font-size: 13px; }

.destino { display: grid; gap: 2px; }
.destino-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.destino-local { font-weight: 600; font-size: 16px; margin-top: 4px; }
.destino-lab { color: var(--suave); font-style: italic; text-wrap: balance; }
.destino-resumo {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--violeta-claro);
  color: #2C1466;
  font-size: 14px;
}

.passo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 12px; }
.passo-cab b { text-transform: uppercase; letter-spacing: .06em; }
.passo-cab span { color: var(--suave); text-align: right; }

.painel-passo {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: -12px -16px 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--papel);
  border-top: 1px solid var(--linha);
  box-shadow: 0 -14px 24px -18px rgba(20, 18, 22, .35);
}
.instrucao { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 500; text-wrap: pretty; }

.navegar { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.btn {
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 600;
  border: 1px solid var(--tinta);
  background: transparent;
}
.btn-primario { background: var(--violeta); border-color: var(--violeta); color: #FFFFFF; }
.btn-primario:hover { background: #3A1A86; }
.btn:disabled { opacity: .35; cursor: default; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.passos button {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  padding: 8px;
}
.passos button:hover { background: var(--superficie); }
.passos button[aria-current="step"] { background: var(--violeta-claro); }
.passos-num {
  grid-row: span 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid var(--tinta);
}
[aria-current="step"] .passos-num { background: var(--violeta); border-color: var(--violeta); color: #FFFFFF; }
.passos-onde { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.passos-texto { font-size: 14px; }

/* Chegada */

.chegada { display: grid; gap: 4px; justify-items: start; padding-top: 24px; }
.chegada-marca {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--menta);
  border: 3px solid var(--tinta);
  font-size: 26px;
  font-weight: 700;
}
.chegada h1 { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 600; }
.chegada p { margin: 0; font-weight: 500; }
.chegada .chegada-lab { color: var(--suave); font-style: italic; font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .rota-fluxo, .aqui-onda { animation: none; }
}