/* Página de exemplo: mapa ocupando a tela, painel embaixo no celular e ao lado
   no computador. Tokens de estilo.css (design system VUSE). */
html.ex, html.ex body { height: 100%; }
.ex body { display: flex; flex-direction: column; min-height: 100dvh; }
.ex-tela { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ex-mapa { flex: 1; min-height: 52vh; background: var(--sup-2); }
.ex-painel { background: var(--sup); border-top: 1px solid var(--borda); padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
  max-height: 48vh; overflow-y: auto; }
@media (min-width: 900px) {
  .ex-tela { flex-direction: row-reverse; }
  .ex-mapa { min-height: 0; }
  .ex-painel { width: 380px; max-height: none; border-top: 0; border-right: 1px solid var(--borda); }
}

.ex-painel label { display: block; font-size: 14px; font-weight: 600; color: var(--texto-2); margin-bottom: 4px; }
.ex-linha { display: flex; gap: 8px; }
.ex-painel input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: var(--texto-1); background: var(--sup-2);
  border: 1px solid var(--borda); border-radius: var(--r); padding: 10px 12px; }
.ex-painel input:focus-visible { outline: 3px solid var(--marca); outline-offset: 1px; }
.ex-campo { position: relative; margin-bottom: 12px; }

.ex-botao { font: inherit; font-size: 15px; font-weight: 650; border: 0; border-radius: var(--r); padding: 10px 16px; cursor: pointer;
  background: var(--marca); color: #fff; }
.ex-botao.ex-sec { background: var(--marca-suave); color: var(--marca-texto); }
.ex-link { font: inherit; background: none; border: 0; padding: 0; color: var(--marca-texto); text-decoration: underline; cursor: pointer; }
.ex-painel a { color: var(--marca-texto); }

.ex-lista { position: absolute; z-index: 2; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--sup); border: 1px solid var(--borda); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); }
.ex-lista li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ex-lista li:hover, .ex-lista li:focus-visible { background: var(--marca-suave); outline: none; }
.ex-lista span { font-size: 13px; color: var(--texto-3); }

.ex-resumo { border-top: 1px solid var(--borda); padding-top: 12px; margin-top: 4px; }
.ex-tempo { font-size: 22px; font-weight: 750; margin: 0 0 8px; }
.ex-partes { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; font-size: 14px; }
.ex-partes dt { color: var(--texto-3); }
.ex-partes dd { margin: 0; }
.ex-nota { font-size: 13px; color: var(--texto-3); margin: 8px 0 0; }
.ex-erro { font-size: 14px; color: #a1281e; background: #fdecea; border-radius: var(--r); padding: 8px 12px; margin: 8px 0 0; }
@media (prefers-color-scheme: dark) {
  .ex-erro { color: #ffb4a9; background: #3b1f1c; }
}
.ex-campo > input { width: 100%; }