/* Skeletons contextuais: preservam o conteúdo server-rendered existente. */
html::before {
    position: fixed;
    z-index: 3000;
    top: 0;
    right: 100%;
    left: 0;
    height: 3px;
    border-radius: 0 999px 999px 0;
    background: #37a66f;
    content: "";
    opacity: 0;
    pointer-events: none;
}

html.is-navigating::before { right: 18%; opacity: 1; transition: right .65s ease-out, opacity .12s ease; }

.context-skeleton { border: 1px solid #d9e3de; border-radius: 12px; background: #f8faf9; }
.context-skeleton--table { display: grid; gap: .55rem; margin: 0 0 .75rem; padding: .85rem; }
.context-skeleton--table i { display: block; height: .75rem; overflow: hidden; border-radius: 999px; background: #e0e8e4; }
.context-skeleton--table i:nth-of-type(1) { width: 72%; }
.context-skeleton--table i:nth-of-type(2) { width: 91%; }
.context-skeleton--table i:nth-of-type(3) { width: 58%; }

.context-skeleton--table i::after,
.context-skeleton--map b::after {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    content: "";
    animation: context-skeleton-shimmer 1.4s ease-in-out infinite;
}

[data-osm-map-shell] { position: relative; }
.context-skeleton--map { position: absolute; z-index: 550; inset: 50% auto auto 50%; display: grid; width: min(90%, 22rem); padding: 1rem; color: #263c31; text-align: center; transform: translate(-50%, -50%); box-shadow: 0 12px 30px rgba(20, 48, 35, .12); }
.context-skeleton--map > i { margin-bottom: .4rem; color: #278158; font-size: 1.75rem; }
.context-skeleton--map strong { font-size: .88rem; }
.context-skeleton--map span { color: #617169; font-size: .76rem; }
.context-skeleton--map b { display: block; overflow: hidden; width: 100%; height: 5px; margin-top: .7rem; border-radius: 999px; background: #dce7e1; }
.context-skeleton--map.has-error { border-color: #ecd6ad; background: #fff9eb; }
.context-skeleton--map.has-error > i { color: #a16c08; }

@keyframes context-skeleton-shimmer {
    from { transform: translateX(-110%); }
    to { transform: translateX(260%); }
}

@media (max-width: 767.98px) {
    .context-skeleton--table { padding: .7rem; }
    .context-skeleton--map { width: calc(100% - 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
    html.is-navigating::before { right: 0; transition: none; }
    .context-skeleton--table i::after,
    .context-skeleton--map b::after { animation: none; background: #cbdad2; }
}