:root {
    --primary: #004f9f;
    --primary-dark: #003c78;
    --primary-light: #eaf3fb;
    --green: #007f31;
    --teal: #004f9f;
    --tertiary: #ffd500;
    --text: #1f1f1f;
    --muted: #5f6368;
    --surface: #f7f8f9;
    --border: #d9dde1;
    --heading-font: "Open Sans","Segoe UI",Arial,sans-serif;
    --body-font: "Open Sans","Segoe UI",Arial,sans-serif;
}

.regioes-layout { 
    display:grid; 
    grid-template-columns:minmax(330px,.9fr) minmax(480px,1.1fr); 
    gap:20px; align-items:start; 
}

.regioes-lista { display:flex; flex-direction:column; gap:8px; }
.regiao-opcao { width:100%; min-height:58px; display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:9px 15px; border:1px solid var(--border); border-radius:15px; color:var(--text); background:#fff; text-align:left; cursor:pointer; transition:border-color .18s,background .18s,box-shadow .18s; }
.regiao-opcao:hover { border-color:#9eafd0; box-shadow:0 3px 10px rgba(20,45,87,.07); }
.regiao-opcao:focus-visible { outline:3px solid rgba(21,53,118,.22); outline-offset:2px; }
.regiao-opcao.is-active { border-color:#2451ad; background:#eaf0fb; box-shadow:0 2px 5px rgba(21,53,118,.08); }
.regiao-opcao strong { font-size:.9rem; }
.regiao-numero { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; color:#fff; background:var(--teal); font-weight:750; }
.regiao-opcao:nth-child(3n+2) .regiao-numero { background:#7d6bc5; }
.regiao-opcao:nth-child(3n) .regiao-numero { background:#d49a47; }
.regiao-total { color:#687182; font-family:Consolas,monospace; font-size:.72rem; white-space:nowrap; }
.regiao-detalhe { min-height:470px; padding:28px 30px; border:1px solid var(--border); border-radius:22px; background:#fff; box-shadow:0 2px 5px rgba(27,38,54,.06); }
.regiao-titulo { display:flex; gap:16px; align-items:center; }
.regiao-numero-destaque { width:52px; height:52px; flex:0 0 52px; border-radius:13px; font-size:1.2rem; }
.regiao-titulo h2 { margin:3px 0 0; color:#20232b; font-size:clamp(1.25rem,3vw,1.7rem); font-weight:750; }
.regiao-descricao { margin:14px 0 0; color:#424854; font-size:.95rem; line-height:1.55; white-space:pre-line; }
.regiao-descricao.sem-descricao { color:#7b818b; font-style:italic; }
.regiao-divisor { height:1px; margin:23px 0 17px; background:var(--border); }
.regiao-resumo { margin:0 0 16px; color:#606775; font-size:.9rem; }
.municipios-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; padding:0; list-style:none; }
.municipios-grid li { min-height:40px; display:flex; align-items:center; gap:9px; padding:9px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface); font-size:.87rem; }
.pin { color:var(--green); font-size:1rem; font-weight:700; }
.regioes-mensagem { padding:17px; border-radius:10px; }
.regioes-vazio { color:var(--muted); background:#f5f6f7; }
.regioes-erro { margin-top:14px; color:#8b2018; background:#fdecea; }
[hidden] { display:none!important; }
@media(max-width:850px) { .regioes-layout { grid-template-columns:1fr; } .regioes-lista { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {  .regioes-cabecalho { margin-bottom:24px; } .regioes-lista { grid-template-columns:1fr; } .regiao-detalhe { min-height:0; padding:22px 18px; } .municipios-grid { grid-template-columns:1fr; } .regiao-opcao { grid-template-columns:32px 1fr; } .regiao-total { grid-column:2; } } 

/* Alinhamento visual com o Design System MS documentado no Figma. */

html,body { background:#fff; }
.embed-body { color:var(--text); font-family:var(--body-font); font-size:16px; line-height:1.5; }
.regioes-publico { max-width:1200px;}
.regioes-cabecalho { max-width:760px; padding-bottom:24px; }
.regioes-cabecalho h1,.regiao-titulo h2 { font-family:var(--heading-font); }
.regioes-cabecalho h1 {
    color: #30302e;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
}
.regioes-cabecalho p { 
    color: var(--muted);
    font-size: 20px;

}
.regioes-sobretitulo { 
    color: var(--primary);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
    text-transform: uppercase;
}
/* .regioes-layout { grid-template-columns:minmax(320px,.82fr) minmax(480px,1.18fr); gap:24px; } */
.regiao-opcao { min-height:64px; grid-template-columns:32px 1fr auto; gap:12px; padding:12px 16px; border-color:var(--border); border-radius:4px; color:var(--text); font-family:var(--body-font); box-shadow:none; }
.regiao-opcao:hover { border-color:var(--primary); background:#f8fbfe; box-shadow:none; }
.regiao-opcao:focus-visible { outline-color:rgba(0,79,159,.25); }
.regiao-opcao.is-active { padding-left:13px; border-color:var(--primary); border-left-width:4px; background:var(--primary-light); box-shadow:inset 0 0 0 1px rgba(0,79,159,.04); }
.regiao-opcao strong { font-size:.875rem; line-height:1.35; font-weight:700; }
.regiao-numero { width:32px; height:32px; border:1px solid var(--primary); border-radius:50%; color:var(--primary); background:#fff; font-family:var(--heading-font); font-size:.875rem; font-weight:700; }
.regiao-opcao:nth-child(n) .regiao-numero { background:#fff; }
.regiao-opcao.is-active .regiao-numero { color:#fff; background:var(--primary); }
.regiao-total { color:var(--muted); font-family:var(--body-font); font-size:.75rem; line-height:1.35; }
.regiao-detalhe { padding:32px; border-color:var(--border); border-radius:4px; box-shadow:0 2px 6px rgba(10,35,60,.06); }
.regiao-numero-destaque { width:48px; height:48px; flex-basis:48px; color:#fff; background:var(--primary); font-size:1.25rem; }
.regiao-titulo h2 { color:#08294c; font-size:clamp(1.25rem,3vw,1.5rem); line-height:1.3; font-weight:700; }
.regiao-descricao { margin-top:16px; color:#3f4448; font-size:.875rem; line-height:1.6; }
.regiao-descricao.sem-descricao { color:#71767b; }
.regiao-divisor { margin:24px 0 16px; background:var(--border); }
.regiao-resumo { margin-bottom:16px; color:var(--muted); font-size:.875rem; }
.regiao-resumo strong { color:var(--primary); }
.municipios-grid { gap:8px; }
.municipios-grid li { min-height:44px; gap:10px; padding:10px 12px; border-color:var(--border); border-radius:4px; background:var(--surface); font-size:.875rem; line-height:1.4; }
.pin { width:8px; height:8px; flex:0 0 8px; border-radius:50%; background:var(--green); font-size:0; }
.regioes-mensagem { padding:16px; border:1px solid var(--border); border-radius:4px; font-size:.875rem; }
.regioes-vazio { background:var(--surface); }
.regioes-erro { margin-top:16px; border-color:#da1e28; color:#8c171e; background:#fff1f1; }
@media(max-width:640px) {
    .regioes-publico { padding:24px 16px 32px; }
    .regioes-cabecalho { padding-bottom:20px; }    
    .regiao-detalhe { padding:24px 20px; }
    .regioes-cabecalho h1 {
        font-size: 20px;
    }
}