/* Painel geral: 5 modelos visuais com os mesmos dados (escolha no topo do painel: Visual).
   Só CSS, preso em html[data-pg-modelo]; as cores vêm dos tokens do tema (claro/escuro) e do layout do site. */

/* ---------- seletor de visual ---------- */
.pg-visual{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12.5px;color:var(--mut)}
.pg-visual .seg-v{display:inline-flex;padding:2px;border-radius:9px;background:var(--soft);border:1px solid var(--line)}
.pg-visual button{min-height:30px;min-width:30px;padding:0 9px;border:0;border-radius:7px;background:transparent;color:var(--ink2);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.pg-visual button[aria-pressed=true]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.pg-visual-nome{font-weight:700;color:var(--ink)}
@media (max-width:600px){.pg-visual{margin-left:0;width:100%;justify-content:space-between}}

/* abas em linha (os 5 modelos) */
[data-pg-modelo] .pg .tabs{display:flex!important;flex-wrap:wrap;grid-template-columns:none}
[data-pg-modelo] .pg .tabs button{flex:0 0 auto}

/* =========================================================
   1 · LIMPO — sem caixas, linhas finas, muito respiro
   ========================================================= */
[data-pg-modelo="1"] .pg{--f-num:inherit}
[data-pg-modelo="1"] .pg .wrap{gap:34px}
[data-pg-modelo="1"] .pg section.card,[data-pg-modelo="1"] .pg .more{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:22px 0 0;box-shadow:none}
[data-pg-modelo="1"] .pg .more>summary{padding-left:0}
[data-pg-modelo="1"] .pg .inner{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
[data-pg-modelo="1"] .pg .filters{background:var(--bg);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:10px 0}
[data-pg-modelo="1"] .pg .tabs{gap:0;border-bottom:1px solid var(--line)}
[data-pg-modelo="1"] .pg .tabs button{background:transparent!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:10px 14px!important;min-height:0;box-shadow:none!important;color:var(--ink2)!important}
[data-pg-modelo="1"] .pg .tabs button span{display:none}
[data-pg-modelo="1"] .pg .tabs button[aria-selected=true]{border-bottom-color:var(--accent)!important;color:var(--ink)!important}
[data-pg-modelo="1"] .pg .tabs button[aria-selected=true] b{color:var(--ink)}
[data-pg-modelo="1"] .pg .tiles{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-pg-modelo="1"] .pg .tile{background:transparent!important;border:0;border-left:1px solid var(--line);border-radius:0;padding:16px 20px}
[data-pg-modelo="1"] .pg .tile:first-child{border-left:0;padding-left:0}
[data-pg-modelo="1"] .pg .tile .v{font-size:30px;font-weight:700}
[data-pg-modelo="1"] .pg .tile.pg-hero .v{color:var(--accent)}
[data-pg-modelo="1"] .pg td{border-bottom-color:color-mix(in srgb,var(--line) 60%,transparent)}
[data-pg-modelo="1"] .pg th{border-bottom-color:var(--line)}
[data-pg-modelo="1"] .pg .pill{background:transparent!important;padding:0;font-weight:600}
[data-pg-modelo="1"] .pg .pill.es{color:var(--mut)}
[data-pg-modelo="1"] .pg .bar{height:4px;width:56px}
[data-pg-modelo="1"] .pg .diag{background:transparent;border:0;border-left:3px solid var(--line);border-radius:0;padding:4px 0 4px 16px}
[data-pg-modelo="1"] .pg .card .note{font-size:12px}
[data-pg-modelo="1"] .pg-carga{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}

/* =========================================================
   2 · CARTÕES — fundo suave, cartões com sombra, cantos redondos
   ========================================================= */
[data-pg-modelo="2"] body.pg-pagina{background:color-mix(in srgb,var(--soft) 70%,var(--bg))}
[data-pg-modelo="2"] .pg{background:transparent}
[data-pg-modelo="2"] .pg section.card,[data-pg-modelo="2"] .pg .more,[data-pg-modelo="2"] .pg .filters,[data-pg-modelo="2"] .pg-carga{border:0;border-radius:18px;box-shadow:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06)}
[data-pg-modelo="2"] .pg section.card{padding:22px 24px}
[data-pg-modelo="2"] .pg .inner{border:0;border-radius:12px;background:var(--soft)}
[data-pg-modelo="2"] .pg .tabs{gap:8px}
[data-pg-modelo="2"] .pg .tabs button{border:0!important;border-radius:999px!important;padding:9px 16px!important;min-height:0;background:var(--card)!important;box-shadow:0 1px 2px rgba(16,24,40,.06)!important;flex:0 0 auto}
[data-pg-modelo="2"] .pg .tabs button span{display:none}
[data-pg-modelo="2"] .pg .tabs button[aria-selected=true]{background:var(--accent)!important}
[data-pg-modelo="2"] .pg .tabs button[aria-selected=true] b{color:#fff}
[data-pg-modelo="2"] .pg .tiles{gap:14px}
[data-pg-modelo="2"] .pg .tile{--cor:var(--accent);border:0;border-radius:16px;padding:16px 18px;box-shadow:inset 0 4px 0 var(--cor),0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06)}
[data-pg-modelo="2"] .pg .tile:nth-child(2){--cor:#2BA0A8}[data-pg-modelo="2"] .pg .tile:nth-child(3){--cor:#7B61D9}
[data-pg-modelo="2"] .pg .tile:nth-child(4){--cor:#E0A21F}[data-pg-modelo="2"] .pg .tile:nth-child(5){--cor:#D9578A}
[data-pg-modelo="2"] .pg .tile.pg-hero{background:var(--card)}
[data-pg-modelo="2"] .pg .tile .v{font-size:28px;font-weight:700}
[data-pg-modelo="2"] .pg td{border-bottom:0}
[data-pg-modelo="2"] .pg tbody tr:nth-child(even):not(.grp){background:color-mix(in srgb,var(--soft) 55%,transparent)}
[data-pg-modelo="2"] .pg tbody td:first-child{border-radius:8px 0 0 8px}[data-pg-modelo="2"] .pg tbody td:last-child{border-radius:0 8px 8px 0}
[data-pg-modelo="2"] .pg .bar{height:8px;width:70px;border-radius:4px}
[data-pg-modelo="2"] .pg .diag{border:0;border-radius:14px;background:var(--soft)}
[data-pg-modelo="2"] .pg-troca{border-radius:999px}

/* =========================================================
   3 · COMPACTO — denso, tudo à vista, bom para análise
   ========================================================= */
[data-pg-modelo="3"] .pg{font-size:13px}
[data-pg-modelo="3"] .pg .wrap{gap:12px;padding-block:12px 40px}
[data-pg-modelo="3"] .pg h1{font-size:19px}
[data-pg-modelo="3"] .pg .eyebrow{font-size:10px}
[data-pg-modelo="3"] .pg .tabs{gap:4px;flex-wrap:nowrap!important;overflow-x:auto}
[data-pg-modelo="3"] .pg .tabs button{padding:6px 11px!important;min-height:0;border-radius:7px!important;flex:0 0 auto}
[data-pg-modelo="3"] .pg .tabs button span{display:none}
[data-pg-modelo="3"] .pg .filters{padding:8px 10px;gap:8px 12px;border-radius:8px}
[data-pg-modelo="3"] .pg .fld label{font-size:10px}
[data-pg-modelo="3"] .pg .tiles{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
[data-pg-modelo="3"] .pg .tile{padding:8px 10px;border-radius:8px;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
[data-pg-modelo="3"] .pg .tile .eyebrow{width:100%}
[data-pg-modelo="3"] .pg .tile .v{font-size:19px}
[data-pg-modelo="3"] .pg section.card{padding:12px;border-radius:8px;gap:8px}
[data-pg-modelo="3"] .pg .card h2{font-size:15px}
[data-pg-modelo="3"] .pg .card .note{font-size:11.5px}
[data-pg-modelo="3"] .pg td{padding:4px 7px;border-bottom:0}
[data-pg-modelo="3"] .pg th{padding:5px 7px;position:sticky;top:0;background:var(--card);z-index:1}
[data-pg-modelo="3"] .pg tbody tr:nth-child(odd):not(.grp){background:color-mix(in srgb,var(--soft) 60%,transparent)}
[data-pg-modelo="3"] .pg .pill{font-size:11px;padding:1px 7px}
[data-pg-modelo="3"] .pg .more{border-radius:8px}
[data-pg-modelo="3"] .pg .more>summary{padding:9px 12px;font-size:13.5px}
[data-pg-modelo="3"] .pg .diag{padding:10px}
@media (max-width:900px){[data-pg-modelo="3"] .pg .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================
   4 · EXECUTIVO — números grandes, faixa de destaque, leitura rápida
   ========================================================= */
[data-pg-modelo="4"] .pg header.pg-cab{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#000));color:#fff;border-radius:20px;padding:26px 28px 18px}
[data-pg-modelo="4"] .pg header.pg-cab h1{color:#fff;font-size:30px}
[data-pg-modelo="4"] .pg header.pg-cab .eyebrow,[data-pg-modelo="4"] .pg header.pg-cab .sub{color:rgba(255,255,255,.8)}
[data-pg-modelo="4"] .pg .presbtn{background:rgba(255,255,255,.16)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important}
[data-pg-modelo="4"] .pg .tabs{gap:6px}
[data-pg-modelo="4"] .pg .tabs button{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:12px!important;box-shadow:none!important;padding:9px 14px!important;min-height:0}
[data-pg-modelo="4"] .pg .tabs button b{color:#fff}
[data-pg-modelo="4"] .pg .tabs button span{display:none}
[data-pg-modelo="4"] .pg .tabs button[aria-selected=true]{background:#fff!important}
[data-pg-modelo="4"] .pg .tabs button[aria-selected=true] b{color:var(--accent)}
[data-pg-modelo="4"] .pg .tiles{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
[data-pg-modelo="4"] .pg .tile{padding:20px 22px;border-radius:16px;gap:8px}
[data-pg-modelo="4"] .pg .tile .v{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1}
[data-pg-modelo="4"] .pg .tile.pg-hero{background:var(--card);border:2px solid var(--accent)}
[data-pg-modelo="4"] .pg .tile.pg-hero .v{color:var(--accent)}
[data-pg-modelo="4"] .pg section.card{border-radius:16px;padding:24px 26px}
[data-pg-modelo="4"] .pg .card h2{font-size:20px;font-weight:700}
[data-pg-modelo="4"] .pg .rs td{padding:11px 8px}
[data-pg-modelo="4"] .pg .rs .num{font-size:15px;font-weight:700}
[data-pg-modelo="4"] .pg .bar{height:10px;width:110px;border-radius:5px}
[data-pg-modelo="4"] .pg .filters{border-radius:14px}
[data-pg-modelo="4"] .pg .profile .big{font-size:52px}
[data-pg-modelo="4"] .pg .more{border-radius:14px}

/* =========================================================
   5 · LATERAL — menu fixo à esquerda, conteúdo em coluna
   ========================================================= */
@media (min-width:1100px){
  [data-pg-modelo="5"] .pg .wrap{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px 28px;align-items:start;max-width:1400px}
  [data-pg-modelo="5"] .pg .wrap>*{grid-column:2}
  [data-pg-modelo="5"] .pg header.pg-cab{display:flex;grid-column:1;grid-row:1 / span 20;position:sticky;top:16px;flex-direction:column;align-items:stretch;gap:14px;padding:18px 14px;border-right:1px solid var(--line)}
  [data-pg-modelo="5"] .pg header.pg-cab h1{font-size:19px}
  [data-pg-modelo="5"] .pg .tabs{display:flex!important;flex-direction:column;flex-wrap:nowrap;gap:2px;overflow:visible}
  [data-pg-modelo="5"] .pg .tabs button{width:100%;text-align:left;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:9px!important;padding:9px 12px!important;min-height:0}
  [data-pg-modelo="5"] .pg .tabs button span{display:none}
  [data-pg-modelo="5"] .pg .tabs button:hover{background:var(--soft)!important}
  [data-pg-modelo="5"] .pg .tabs button[aria-selected=true]{background:var(--accent-soft)!important;box-shadow:inset 3px 0 0 var(--accent)!important}
  [data-pg-modelo="5"] .pg .tabs button[aria-selected=true] b{color:var(--accent)}
  [data-pg-modelo="5"] .pg .presbtn{order:9;justify-content:center}
  [data-pg-modelo="5"] .pg #coverage{font-size:12px}
  [data-pg-modelo="5"] .pg .filters{top:8px}
}
[data-pg-modelo="5"] .pg section.card,[data-pg-modelo="5"] .pg .more{border-radius:14px}
[data-pg-modelo="5"] .pg .tiles{gap:12px}
[data-pg-modelo="5"] .pg .tile{border-radius:12px;border-left:3px solid var(--accent)}
[data-pg-modelo="5"] .pg .tile .v{font-size:28px;font-weight:700}
[data-pg-modelo="5"] .pg td{border-bottom-color:color-mix(in srgb,var(--line) 70%,transparent)}
[data-pg-modelo="5"] .pg .pill{padding:2px 10px}

/* aba escolhida: texto legível no escuro quando o fundo não é o accent */
[data-pg-modelo="1"] .pg .tabs button[aria-selected=true],[data-pg-modelo="5"] .pg .tabs button[aria-selected=true]{color:var(--ink)!important}
[data-pg-modelo="4"] .pg .tabs button[aria-selected=true]{color:var(--accent)!important}
[data-tema=escuro][data-pg-modelo="4"] .pg header.pg-cab{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 42%,#0B1220),#0E1524)}
[data-pg-modelo="5"] .pg .tabs button span{display:none}