/* SIGA — identidade "letreiro de ônibus": asfalto escuro, âmbar de LED, títulos condensados. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Barlow+Condensed:wght@500;600;700&display=swap");

:root {
  --chao: #15181b;      /* fundo geral */
  --placa: #1d2125;     /* painéis */
  --placa-2: #262b30;   /* campos, botões */
  --fio: #353b41;       /* bordas */
  --texto: #eceee9;
  --apagado: #949ba2;
  --ambar: #ffb21e;     /* destaque: letreiro de LED */
  --ambar-txt: #1b1300;
  --ok: #3ccf8e;
  --alerta: #ff5a52;
  --titulo: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --corpo: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--chao); color: var(--texto); font: 15px/1.45 var(--corpo); }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; letter-spacing: .02em; margin: 0; text-wrap: balance; }
[hidden] { display: none !important; }

/* Letreiro: o nome SIGA e os nomes de linha aparecem como placa de destino. */
.letreiro {
  display: inline-block; background: #000; color: var(--ambar);
  font: 700 18px/1 var(--titulo); letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 10px 5px; border-radius: 3px;
  text-shadow: 0 0 6px rgba(255, 178, 30, .45);
}

.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo input[type=text], .campo input[type=password] {
  width: 100%; padding: 11px 12px; background: var(--chao);
  border: 1px solid var(--fio); border-radius: 4px;
}
.campo input:focus { outline: none; border-color: var(--ambar); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 16px; border-radius: 4px; border: 1px solid var(--fio);
  background: var(--placa-2); font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn:hover { border-color: var(--apagado); }
.btn.prim { background: var(--ambar); border-color: var(--ambar); color: var(--ambar-txt); }
.btn.prim:hover { filter: brightness(1.08); }
.btn.perigo { background: none; color: var(--alerta); border-color: transparent; }
.btn.leve { background: none; }
.btn:disabled { opacity: .5; cursor: default; }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }

.msg { font-size: 14px; color: var(--apagado); min-height: 1.3em; margin: 0; }
.msg.erro { color: var(--alerta); }
.msg.ok { color: var(--ok); }

.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill.ok { background: rgba(60, 207, 142, .14); color: var(--ok); }
.pill.alerta { background: rgba(255, 90, 82, .16); color: var(--alerta); }
.pill.cinza { background: var(--placa-2); color: var(--apagado); }

.cor { width: 14px; height: 14px; border-radius: 3px; flex: none; }

/* ---------- mapa ---------- */
.leaflet-container { background: #0d0f11; font-family: var(--corpo); }
/* Inverte o mapa claro do OpenStreetMap para combinar com o tema escuro. */
.mapa-escuro { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.88) saturate(.35); }
.leaflet-bar a, .leaflet-bar a:hover { background: var(--placa); color: var(--texto); border-color: var(--fio); }
.leaflet-control-attribution { background: rgba(0, 0, 0, .55) !important; color: var(--apagado) !important; }
.leaflet-control-attribution a { color: var(--apagado) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--placa); color: var(--texto); }
.leaflet-tooltip { background: var(--placa); color: var(--texto); border: 1px solid var(--fio); }
.leaflet-tooltip::before { display: none; }

.pin-ponto { background: var(--texto); border: 3px solid #000; border-radius: 50%; }
/* Parada: placa quadrada âmbar, como a placa de ponto de ônibus. */
.pin-parada { background: var(--ambar); border: 2px solid #000; border-radius: 3px; }

/* Ônibus no mapa: ponto colorido + letreiro com o nome da linha. */
.bus-icone { position: relative; }
.bus-icone .ponto {
  position: absolute; inset: 0; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .45);
}
.bus-icone .placa {
  position: absolute; left: 24px; top: -4px; white-space: nowrap;
  background: #000; color: var(--ambar); padding: 4px 7px 3px; border-radius: 3px;
  font: 700 14px/1 var(--titulo); letter-spacing: .06em; text-transform: uppercase;
}
.bus-icone .placa small { display: block; color: var(--apagado); font: 400 11px/1.3 var(--corpo); letter-spacing: 0; text-transform: none; }
.bus-icone.fora .ponto { border-color: var(--alerta); animation: pisca 1s infinite alternate; }
.bus-icone.parado { opacity: .55; }
@keyframes pisca { to { box-shadow: 0 0 0 9px rgba(255, 90, 82, .35); } }
@media (prefers-reduced-motion: reduce) { .bus-icone.fora .ponto { animation: none; } }