/* Caixa no estado (VR-116), página inicial. Usa os tokens de app.css. */
.ag-caixa { position: absolute; z-index: 9; width: 340px; padding: 14px 16px 12px; border-radius: 14px;
  background: color-mix(in srgb, var(--sup) 94%, transparent); backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--ouro) 40%, var(--linha)); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8); animation: cx-in .16s ease-out; }
@keyframes cx-in { from { opacity: 0; transform: translateY(4px); } }
.ag-caixa p { margin: 0; }
.cx-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.cx-uf { font: 800 1.25rem/1.1 var(--f-tit); letter-spacing: -.02em; }
.cx-uf small { font: 500 .7rem var(--f-dado); color: var(--tinta-2); margin-left: 6px; letter-spacing: .1em; }
.cx-ficha { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--ouro); text-decoration: none; white-space: nowrap; }
.cx-fechar { border: 0; background: none; color: var(--tinta-2); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.cx-abas { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--sup-2); margin-bottom: 8px; }
.cx-abas button { flex: 1; border: 0; border-radius: 999px; padding: 6px 8px; background: transparent; color: var(--tinta-2); font: 600 .76rem var(--f-texto); cursor: pointer; }
.cx-abas button[aria-selected='true'] { background: var(--ouro); color: #1a1300; }
.cx-lista, .cx-con { list-style: none; margin: 0; padding: 0; }
.cx-lista a { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 6px 6px; margin: 0 -6px; border-radius: 10px; color: var(--tinta); text-decoration: none; }
.cx-lista a:hover, .cx-lista a:focus-visible { background: var(--sup-2); }
.cx-lista img, .cx-ini { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 1.5px var(--ouro); }
.cx-ini { display: grid; place-items: center; font: 700 1rem var(--f-tit); color: var(--ouro); background: var(--sup-2); }
.cx-q { display: grid; min-width: 0; } .cx-q b { font-size: .92rem; line-height: 1.2; } .cx-q small { font: .64rem var(--f-dado); color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em; }
.cx-v { display: grid; text-align: right; } .cx-v b { font: 600 .82rem var(--f-dado); color: var(--ouro); white-space: nowrap; } .cx-v small { font-size: .68rem; color: var(--tinta-2); }
.cx-regra { font-size: .7rem; line-height: 1.4; color: var(--tinta-2); margin-top: 8px !important; }
.cx-sub { font: 600 .66rem var(--f-dado); letter-spacing: .14em; text-transform: uppercase; color: var(--ouro); margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--linha); }
.cx-con a { display: grid; padding: 6px 0; color: var(--tinta); text-decoration: none; } .cx-con a:hover b { color: var(--ouro); }
.cx-con b { font-size: .86rem; line-height: 1.25; } .cx-con small { font: .66rem var(--f-dado); color: var(--tinta-2); }
.cx-vazio { font-size: .84rem; color: var(--tinta-2); padding: 8px 0; }
@media (max-width: 759px) {
  .ag-caixa { position: fixed; left: 10px !important; right: 10px; top: auto !important; bottom: 10px; width: auto; max-height: 72vh; overflow: auto; z-index: 60; }
}

/* Clique no mapa: sem o contorno branco de seleção; o contorno fica só para quem navega pelo teclado. */
.ag-svg a:focus { outline: none; }
.ag-svg a:focus-visible path { stroke: var(--ouro); stroke-width: 1.5; }