/* Planoscópio — tudo escopado em .ps (conteúdo) ou .ps-topo / .ps-rodape (cabeçalho e
   rodapé do site, includes/chrome.php) para não vazar pro tema.

   Paleta derivada da logomarca (azul #2252A9), a mesma do protótipo
   (prototype/style.css): mudar uma, mudar a outra. Cor de texto e fonte continuam
   herdadas do tema (o plugin não briga com a tipografia do site); o plugin só põe
   o azul da marca em links, gráfico, botões e superfícies de destaque.

   Tipografia: Plus Jakarta Sans (títulos) + Inter (texto e números), hospedadas no próprio
   plugin (assets/fonts/, subconjunto latin, licença OFL): sem chamada ao Google a cada visita
   (LGPD) e sem depender do tema. Valem para o site inteiro; a seção "Tipografia" no fim
   deste arquivo sobrepõe a fonte do tema. As tabelas ligam os números tabulares, porque a
   Inter é proporcional por padrão.

   O tema atual (hostinger-ai-theme) só tem modo claro, então os tokens abaixo são
   claros. Se um dia o tema ganhar modo escuro, é só redeclarar --ps-* num
   "@media (prefers-color-scheme: dark)" — nada mais neste arquivo usa cor fixa,
   exceto o verde/âmbar/vermelho semânticos (ok/aviso/erro), que nunca são decoração. */

.ps, .ps-topo, .ps-rodape {
  --ps-azul: #2252a9;
  --ps-azul-forte: #173d80;
  --ps-azul-suave: #e8effb;
  --ps-azul-fundo: #f4f7fd;
  --ps-linha: #dae2f0;
  --ps-muted: #55627a;
  --ps-mercado: #6b7686;
  --ps-aviso-bg: #fff4e5;
  --ps-aviso-fg: #7a4a00;
  --ps-bg: #ffffff;
  --ps-raio: 12px;
  line-height: 1.55;
}
.ps a { color: var(--ps-azul); text-underline-offset: 2px; }
.ps a:hover { color: var(--ps-azul-forte); }
.ps :focus-visible { outline: 3px solid var(--ps-azul); outline-offset: 2px; border-radius: 4px; }

.ps h2.ps-titulo { margin-bottom: .15rem; }
.ps h3 { margin: 2.25rem 0 .6rem; padding-bottom: .4rem; border-bottom: 2px solid var(--ps-azul-suave); }
.ps .ps-sub { color: var(--ps-muted); font-size: .95rem; margin-top: 0; }

.ps .ps-rolagem { overflow-x: auto; margin: .75rem 0 1.25rem; }
.ps .ps-rolagem:focus-visible { outline-offset: 0; }
.ps table { width: 100%; border-collapse: collapse; margin: 0; font-size: .92rem; }
.ps th, .ps td { font-variant-numeric: tabular-nums; text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--ps-linha); vertical-align: top; }
.ps th { white-space: nowrap; font-weight: 600; color: var(--ps-muted); background: var(--ps-azul-fundo); font-size: .85rem; }
.ps tbody tr:hover { background: var(--ps-azul-fundo); }

.ps .ps-fonte { color: var(--ps-muted); font-size: .78rem; overflow-wrap: anywhere; }
.ps .ps-fontes ul { padding-left: 1.1rem; }
.ps .ps-fontes li { margin-bottom: .4rem; }
.ps .ps-vazio { padding: 1rem; text-align: center; color: var(--ps-muted); border: 1px dashed var(--ps-linha); border-radius: var(--ps-raio); }

.ps .ps-badge { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600; margin-left: .3rem; }
.ps .ps-badge-neutro { background: var(--ps-azul-suave); color: var(--ps-azul-forte); }
.ps .ps-badge-aviso { background: var(--ps-aviso-bg); color: var(--ps-aviso-fg); }

.ps .ps-painel { border: 1px solid var(--ps-linha); border-radius: var(--ps-raio); padding: 1rem 1.25rem; margin: 1rem 0; }
.ps .ps-aviso { background: var(--ps-aviso-bg); color: var(--ps-aviso-fg); border-color: transparent; }
.ps .ps-nao-diz { background: var(--ps-azul-fundo); border-style: dashed; border-color: var(--ps-azul); }
.ps .ps-nao-diz li { margin-bottom: .5rem; }

.ps .ps-detalhes summary { cursor: pointer; font-weight: 600; color: var(--ps-azul); margin: .5rem 0; }
.ps .ps-detalhes summary:hover { color: var(--ps-azul-forte); }

/* Gráfico de IGR */
.ps .ps-grafico { margin: 1rem 0; }
.ps .ps-grafico svg { width: 100%; height: auto; display: block; }
.ps .ps-grade { stroke: var(--ps-linha); stroke-width: 1; }
.ps .ps-eixo { fill: var(--ps-muted); font-size: 11px; }
.ps .ps-linha { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.ps .ps-linha-op { stroke: var(--ps-azul); }
.ps .ps-linha-mercado { stroke: var(--ps-mercado); stroke-dasharray: 5 4; }
.ps .ps-grafico figcaption { font-size: .82rem; color: var(--ps-muted); margin-top: .35rem; }
.ps .ps-leg { display: inline-block; width: 1.4rem; height: 0; border-top: 2px solid; vertical-align: middle; margin: 0 .2rem 0 .6rem; }
.ps .ps-leg-op { border-color: var(--ps-azul); }
.ps .ps-leg-mercado { border-color: var(--ps-mercado); border-top-style: dashed; }

/* Lista de operadoras: busca + filtro por UF */
.ps .ps-filtros { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: .75rem 0; }
.ps .ps-filtros label { display: inline-flex; gap: .4rem; align-items: center; }
.ps .ps-filtros input[type="search"], .ps .ps-filtros select {
  max-width: 100%; font: inherit; color: inherit; background: var(--ps-bg);
  border: 1px solid var(--ps-linha); border-radius: 8px; padding: .4rem .6rem;
}
.ps .ps-filtros input[type="search"]:focus, .ps .ps-filtros select:focus { border-color: var(--ps-azul); }
.ps .ps-contagem { color: var(--ps-muted); font-size: .9em; }
.ps tr[hidden] { display: none; }

@media (max-width: 640px) {
  .ps table { font-size: .86rem; }
  .ps th, .ps td { padding: .45rem .5rem; }
  .ps .ps-painel { padding: .85rem 1rem; }
  /* O SVG tem viewBox fixo de 720 e encolhe pela metade no celular: compensa texto e traço. */
  .ps .ps-eixo { font-size: 21px; }
  .ps .ps-linha { stroke-width: 4; }
  .ps .ps-filtros label { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: .25rem; }
}

/* Cabeçalho e rodapé do site (includes/chrome.php). Mesmo desenho do protótipo. */
.ps-topo, .ps-rodape { font-family: inherit; line-height: 1.55; }
.ps-topo a, .ps-rodape a { text-underline-offset: 2px; }
.ps-topo :focus-visible, .ps-rodape :focus-visible { outline: 3px solid var(--ps-azul); outline-offset: 2px; border-radius: 4px; }

.ps-topo { position: relative; z-index: 50; background: var(--ps-bg); border-bottom: 1px solid var(--ps-linha); }
.ps-topo__in { max-width: 960px; margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; }
.ps-marca { display: inline-flex; line-height: 0; }
.ps-marca img { height: 34px; width: auto; display: block; }
.ps-topo nav a { color: #12203a; text-decoration: none; font-weight: 600; font-size: .92rem; padding: .4rem .75rem; border-radius: 999px; }
.ps-topo nav a:hover { background: var(--ps-azul-suave); color: var(--ps-azul-forte); }
.ps-topo__nav { display: flex; gap: .25rem; }
.ps-topo__menu { display: none; }

.ps-rodape { margin-top: 3rem; padding: 2rem 0 1.5rem; background: var(--ps-azul-fundo); border-top: 1px solid var(--ps-linha); color: var(--ps-muted); font-size: .9rem; }
.ps-rodape__in { max-width: 960px; margin: 0 auto; padding: 0 1.25rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; }
.ps-rodape__marca { flex: 1 1 16rem; }
.ps-rodape .ps-marca img { height: 28px; margin-bottom: .6rem; }
.ps-rodape p { margin: 0; }
.ps-rodape__marca p { max-width: 20rem; }
.ps-rodape .ps-rodape__tit { margin: 0 0 .5rem; color: #12203a; font-weight: 700; font-size: .85rem; }
.ps-rodape ul { list-style: none; margin: 0; padding: 0; }
.ps-rodape li { margin: 0 0 .4rem; }
.ps-rodape a { color: #12203a; text-decoration: none; }
.ps-rodape a:hover { color: var(--ps-azul); text-decoration: underline; }
.ps-rodape .ps-rodape__nota { flex: 1 1 100%; margin-top: .75rem; padding-top: 1rem; border-top: 1px solid var(--ps-linha); font-size: .8rem; }

@media (max-width: 720px) {
  .ps-rodape__in { gap: 1.5rem 2rem; }
  .ps-rodape__marca { flex-basis: 100%; }
}
@media (max-width: 720px) {
  /* Celular: o menu horizontal some e entra o botão de três tracinhos (<details>, sem JS). */
  .ps-topo .ps-marca img { height: 28px; }
  .ps-topo__in { padding: .45rem 1.25rem; }
  .ps-topo__nav { display: none; }
  .ps-topo__menu { display: block; margin-left: auto; }
  .ps-topo__menu summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -.6rem; border-radius: 10px; cursor: pointer; list-style: none; }
  .ps-topo__menu summary::-webkit-details-marker { display: none; }
  .ps-topo__menu summary:hover, .ps-topo__menu[open] summary { background: var(--ps-azul-suave); }
  .ps-hamb { display: block; width: 22px; height: 16px; color: #12203a;
    background: linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; }
  .ps-topo__menu nav { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: .5rem 1.25rem 1rem; background: var(--ps-bg); border-bottom: 1px solid var(--ps-linha); box-shadow: 0 10px 20px rgba(18, 32, 58, .08); }
  .ps-topo__menu nav a { padding: .8rem .6rem; font-size: 1rem; border-radius: 8px; }
}

/* Tipografia (site inteiro). Sobrepõe a fonte do tema: "html body" ganha de "body" e de
   :where(h1) do tema sem precisar de !important. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html body, html body button, html body input, html body select, html body textarea {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html body :is(h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-post-title, .wp-block-site-title) {
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Destaque da home (mesmo desenho do hero do protótipo). Usado numa página com <div class="ps">. */
.ps .ps-hero { background: var(--ps-azul-fundo); border: 1px solid var(--ps-linha); border-radius: 20px; padding: 2.5rem 2rem; margin: 1.5rem 0 2.5rem; }
.ps .ps-hero__eyebrow { margin: 0 0 .5rem; color: var(--ps-azul); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.ps .ps-hero__titulo { margin: 0 0 .75rem; font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.15; text-align: left; }
.ps .ps-hero__lede { margin: 0 0 1.5rem; max-width: 40rem; font-size: 1.1rem; color: var(--ps-muted); }
.ps .ps-hero__acoes { display: flex; flex-wrap: wrap; gap: .75rem; }
.ps a.ps-btn { display: inline-block; padding: .65rem 1.2rem; border: 2px solid var(--ps-azul); border-radius: 999px; background: var(--ps-azul); color: #fff; font-weight: 600; text-decoration: none; }
.ps a.ps-btn:hover { background: var(--ps-azul-forte); border-color: var(--ps-azul-forte); color: #fff; }
.ps a.ps-btn--sec { background: transparent; color: var(--ps-azul); }
.ps a.ps-btn--sec:hover { background: var(--ps-azul-suave); color: var(--ps-azul-forte); }
@media (max-width: 640px) { .ps .ps-hero { padding: 1.75rem 1.25rem; } }

/* Largura do conteúdo = largura do cabeçalho (960px). O tema centraliza o conteúdo numa coluna de
   700px e dá 40-104px de recuo lateral; nas páginas com conteúdo do plugin, a coluna passa a ter
   a mesma largura e o mesmo recuo (1.25rem) do cabeçalho, em qualquer tamanho de tela. */
.wp-block-post-content.has-global-padding:has(> .ps) { padding-left: 1.25rem; padding-right: 1.25rem; }
.wp-block-post-content > .ps { max-width: 960px; }