/* ==========================================================================
   Onisne | ATLAS MUNDIAL — estilos que complementam o mapas.css
   (o mapas.css enviado estava cortado no meio: faltavam layout, mapa, camadas, legenda, caixa de pirâmides, etc.)
   Tudo usa as variáveis do tema, então funciona nos modos claro, escuro e alto contraste.
   ========================================================================== */
.atlas-view { color: var(--ink); font-family: var(--fonte); }
.atlas-title { font-family: var(--fonte-titulo); font-weight: 700; color: var(--ink); font-size: clamp(1.6rem, 3vw, 2.2rem); }
.atlas-kicker, .atlas-side-eyebrow { color: var(--marca-forte); }
.atlas-intro p { color: var(--muted); }
.atlas-status { border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.atlas-status[data-state="error"] { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 10%, var(--surface)); color: var(--erro); }
.atlas-status[data-state="success"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); color: var(--ok); }
.atlas-toolbar { border: 1px solid color-mix(in srgb, var(--line) 60%, transparent); border-radius: 22px; background: var(--surface); box-shadow: var(--sombra); }
.atlas-control-label { color: var(--muted); }
.atlas-select { border: 1.5px solid var(--line); border-radius: 14px; background-color: var(--surface-2); color: var(--ink); }
.atlas-select:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marca) 20%, transparent); }
.atlas-segmented { display: inline-flex; gap: .3rem; padding: .3rem; border-radius: 999px; background: var(--surface-2); }
.atlas-segment { padding: .5rem 1.05rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 .84rem var(--fonte); transition: background .3s, color .3s; }
.atlas-segment.active { background: var(--grad); color: #fff; }
.atlas-reset { min-height: 40px; padding: .5rem 1.1rem; border: 1.5px solid color-mix(in srgb, var(--marca) 50%, transparent); border-radius: 999px; background: var(--surface); color: var(--marca-forte); font: 600 .84rem var(--fonte); transition: background .25s, transform .25s; }
.atlas-reset:hover { background: color-mix(in srgb, var(--marca) 13%, var(--surface)); transform: translateY(-1px); }
.atlas-toggles { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.atlas-toggle { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .84rem; font-weight: 500; cursor: pointer; transition: border-color .2s; }
.atlas-toggle:hover { border-color: var(--marca); }
.atlas-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.atlas-toggle-ui { position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px; background: var(--track); box-shadow: inset 0 0 0 1.5px var(--line); transition: background .3s; }
.atlas-toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background .3s; }
.atlas-toggle input:checked + .atlas-toggle-ui { background: var(--grad); box-shadow: none; }
.atlas-toggle input:checked + .atlas-toggle-ui::after { transform: translateX(16px); background: #fff; }
.atlas-toggle input:focus-visible + .atlas-toggle-ui { outline: 3px solid var(--marca-forte); outline-offset: 3px; }
.atlas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.atlas-map-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 26px; background: var(--surface); box-shadow: var(--sombra); }
.atlas-map-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.3rem; }
.atlas-layer-title { margin: 0; font: 600 1rem var(--fonte-titulo); } .atlas-layer-description { margin: .15rem 0 0; font-size: .8rem; color: var(--muted); }
.atlas-live-label { font-size: .74rem; color: var(--muted); }
.atlas-map-stage { position: relative; min-height: 420px; background: var(--surface-2); }
.atlas-map-canvas, .atlas-globe-canvas { width: 100%; height: 100%; min-height: 420px; }
.atlas-map-loading { position: absolute; inset: 0; z-index: 500; display: grid; place-content: center; justify-items: center; gap: .8rem; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(4px); color: var(--muted); font-size: .88rem; }
.atlas-map-loading.is-hidden { display: none; }
.atlas-spinner { width: 38px; height: 38px; border: 4px solid var(--track); border-top-color: var(--marca-2); border-radius: 50%; animation: giro .9s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.atlas-map-legend, #atlas-legend { position: absolute; z-index: 450; left: 1rem; bottom: 1rem; max-width: 240px; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--sombra); font-size: .76rem; color: var(--ink); }
.atlas-legend-title { margin-bottom: .4rem; font-weight: 700; font-size: .78rem; }
.atlas-legend-row { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; }
.atlas-legend-swatch { flex: none; width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.atlas-map-footer { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.3rem; font-size: .76rem; color: var(--muted); }
.atlas-sidebar { display: grid; gap: 1rem; }
.atlas-side-card { padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 22px; background: var(--surface); box-shadow: var(--sombra); font-size: .86rem; }
.atlas-side-card h2, .atlas-side-card h3 { margin: .2rem 0 .5rem; font-size: 1rem; }
.atlas-side-card-highlight { background: linear-gradient(135deg, color-mix(in srgb, var(--marca) 16%, var(--surface)), color-mix(in srgb, var(--marca-2) 14%, var(--surface))); }
.atlas-side-description, .atlas-side-note { margin: 0; color: var(--muted); line-height: 1.5; font-size: .82rem; }
.atlas-layer-list { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; } .atlas-layer-list li { display: flex; align-items: center; gap: .55rem; font-size: .82rem; }
.atlas-layer-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); }
.atlas-layer-dot.dot-purple { background: var(--marca); } .atlas-layer-dot.dot-blue { background: #3c93fa; } .atlas-layer-dot.dot-gold { background: #e8c66a; } .atlas-layer-dot.dot-green { background: #3ea66b; } .atlas-layer-dot.dot-orange { background: #d27a45; } .atlas-layer-dot.dot-pink { background: var(--marca-2); }
.atlas-source-links, .atlas-source-text { font-size: .76rem; color: var(--muted); } .atlas-source-links a { color: var(--marca-forte); }
.atlas-region-picker { display: flex; flex-wrap: wrap; gap: .4rem; } .atlas-region-button, .atlas-pyramid-region-open { padding: .35rem .8rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 500 .78rem var(--fonte); transition: all .2s; }
.atlas-region-button:hover, .atlas-pyramid-region-open:hover { border-color: var(--marca); color: var(--marca-forte); }
.atlas-pyramid-dialog { width: min(920px, 94vw); padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--ink); box-shadow: var(--sombra-forte); overflow: hidden; }
.atlas-pyramid-dialog::backdrop { background: rgb(10 8 30 / .6); backdrop-filter: blur(5px); }
.atlas-dialog-head, .atlas-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; }
.atlas-pyramid-title { margin: 0; font: 600 1.05rem var(--fonte-titulo); } .atlas-pyramid-caption { margin: 0; font-size: .8rem; color: var(--muted); }
.atlas-pyramid-frame-wrap { background: var(--surface-2); } .atlas-pyramid-frame { display: block; width: 100%; height: min(60vh, 520px); border: 0; }
.atlas-dialog-close, .atlas-pyramid-close { width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 1.1rem; transition: transform .3s, background .2s; } .atlas-dialog-close:hover, .atlas-pyramid-close:hover { background: var(--grad); color: #fff; transform: rotate(90deg); }
.atlas-pyramid-external { color: var(--marca-forte); font-weight: 600; font-size: .84rem; }
/* ferramentas de consulta (busca de país, distância, desafio) */
.atlas-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.atlas-box { display: grid; gap: .55rem; align-content: start; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); border-radius: 22px; background: var(--surface); box-shadow: var(--sombra); }
.atlas-box label, .atlas-box .atlas-control-label { font-weight: 600; font-size: .84rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.atlas-box input, .atlas-box select { width: 100%; }
.atlas-box button { padding: .55rem 1.1rem; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 600 .84rem var(--fonte); }
.atlas-linha { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.atlas-linha > select, .atlas-linha > input { flex: 1 1 145px; min-width: 0; }
.atlas-box .atlas-country-actions button { flex: 1 1 120px; padding-inline: .75rem; }
.atlas-country-data-status { margin: .2rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.atlas-country-sources { margin-top: .6rem; }
.atlas-country-sources a { color: var(--marca-forte); }
.atlas-country-temp { padding: .55rem .7rem; border-radius: 12px; background: var(--surface); }
.atlas-pais-card, .atlas-dados, .atlas-quiz, .atlas-quiz-msg, .atlas-dist, .atlas-texto, .atlas-texto-det, .atlas-paises { font-size: .84rem; color: var(--ink); }
.atlas-pais-card { padding: .8rem 1rem; border-radius: 16px; background: var(--surface-2); } .atlas-pais-nome { font-weight: 700; }
.atlas-quiz-msg { color: var(--muted); }
@media (max-width: 980px) { .atlas-layout { grid-template-columns: 1fr; } .atlas-intro { flex-direction: column; align-items: flex-start; } }