/* cards (v2.5, 19/10/2026): card recolhido vira pílula com ícone e número, como os ícones do Zoom Earth */
.painel.ar.recolhido, .painel.principal.recolhido, .lateral.recolhido { display:none !important; }
.pilulas { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.pilulas:empty, .pilulas:not(:has(.pil:not([hidden]))) { display:none; }
.pilulas.dir { position:absolute; top:54px; right:20px; align-items:flex-end; z-index:2; }
.pil { all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 12px;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px;
  color:var(--fg); font:400 14px/1 "Geist",system-ui,sans-serif; font-variant-numeric:tabular-nums; animation:pilEntra .35s cubic-bezier(.2,.7,.2,1); }
.pil[hidden] { display:none; }
.pil:hover { background:rgba(40,38,35,.9); } .pil:focus-visible { outline:2px solid var(--fg); outline-offset:2px; }
.pil svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--fg3); }
.pil b { font-weight:500; font-size:17px; } .pil i { width:9px; height:9px; border-radius:50%; } .pil span { color:var(--fg3); }
@keyframes pilEntra { from { opacity:0; translate:-8px 0; } }
.pilulas.dir .pil { animation-name:pilEntraD; } @keyframes pilEntraD { from { opacity:0; translate:8px 0; } }
@media (max-width:860px) {
  .pilulas { flex-direction:row; flex-wrap:wrap; padding:10px 16px; }
  .pilulas.dir { position:static; order:5; justify-content:flex-start; }
}
/* com os dois cards recolhidos, a coluna perde o vidro e a borda: ficam só as pílulas */
@media (min-width:861px) { .coluna:not(:has(> .painel:not(.recolhido))) { background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0; overflow:visible !important; }
 }
/* computador: a seta aponta para o lado em que o card recolhe */
@media (min-width:861px) { .coluna .painel .recolher svg { transform:rotate(-90deg); } .lateral .recolher svg { transform:rotate(90deg); } }
/* só com pílulas, a coluna encolhe para o tamanho delas (a trava do mapa mede a coluna para achar a área livre) */
@media (min-width:861px) { .coluna:not(:has(> .painel:not(.recolhido))) { width:auto; } }

/* ---- cards compactos no computador (19/10/2026): mais estreitos, números menores, gráfico baixo ---- */
@media (min-width:861px) {
  html body .coluna { width:320px; }
  html body .coluna > .ar, html body .coluna > .principal { padding:14px 16px 12px; }
  /* ar */
  html body .ar h2 { font-size:15px; } html body #arT { padding-right:56px; }
  html body .ar .linha { margin-top:4px; gap:10px; } html body .ar .aqi { font-size:40px; }
  html body .ar .cat { font-size:13px; }
  html body .regua { margin:6px 0 2px; } html body .regua .m { height:20px; } html body .regua .n span { font-size:10px; }
  html body .ar .pm { font-size:11px; margin-top:4px; color:var(--fg3); }
  html body .hojep { margin:6px 0 0; } html body .hojep b { font-size:14px !important; } html body .hojep small { font-size:10px !important; }
  html body .ar .graft { font-size:11px; margin-top:10px; }
  html body .grafbar { height:72px; margin:16px 0 24px 24px; }
  html body .grafbar * { font-size:10px; }
  html body #arBarrasNota { font-size:10px !important; line-height:1.35; }
  /* focos */
  html body .coluna > .principal .k { font-size:11px; }
  html body .coluna > .principal h1 { font-size:15px; margin:2px 0 2px; }
  html body .coluna > .principal .contador { font-size:40px; }
  html body .coluna > .principal .ritmo { font-size:13px; margin-top:4px; }
  html body .coluna > .principal .kpis { margin-top:10px; } html body .coluna > .principal .kpis div { padding-top:6px; }
  html body .coluna > .principal .kpis b { font-size:16px; } html body .coluna > .principal .kpis span { font-size:10px !important; }
  html body .coluna > .principal .meta { font-size:10px !important; margin-top:8px; }
  html body .coluna .painel > .recolher { top:10px; right:10px; }  /* a do ar fica no .cantos, ao lado do compartilhar */ html body .cantos { top:10px; right:10px; }
}

/* ---- o mesmo enxugamento nos outros cards (rankings/relatos, Tempo, Comparar, cartão do município) ---- */
@media (min-width:861px) {
  /* rankings e relatos (direita) */
  html body .lateral { width:280px; padding:14px 16px; }
  html body .lateral h2 { font-size:15px; margin-bottom:8px; }
  html body .lateral .rank .r { font-size:12px; padding:5px 0; grid-template-columns:16px 1fr auto; gap:3px 8px; }
  html body .lateral .rank .p { font-size:10px; } html body .lateral .rank .dot { width:7px; height:7px; margin-right:6px; }
  html body .lateral .grupo button { font-size:12px; }
  html body .relconta .tot { font-size:12px; margin:2px 0 6px; } html body .relconta .tot small { font-size:10px; }
  html body .relconta .niv { gap:3px; } html body .relconta .niv span { font-size:12px; }
  html body .relconta .onde h3 { font-size:12px; margin-top:10px; } html body .relconta .onde p { font-size:10px; }
  html body .relconta .onde button { min-height:24px; font-size:12px; }
  html body .lateral .nota, html body .lateral .sub { font-size:10px !important; line-height:1.35; }
  html body .meubairro label, html body .pioresb h3 { font-size:14px; }
  html body .dias { height:56px; }
  /* Tempo */
  html body .meteo { width:320px; padding:14px 16px 12px; } html body .meteo-lado { width:300px; }
  html body .meteo h2 { font-size:15px; } html body .meteo h3 { font-size:11px; margin:12px 0 6px; }
  html body .meteo p, html body .meteo li, html body .meteo td { font-size:12px; }
  html body .meteo small, html body .meteo .fonte, html body .meteo-lado .sub { font-size:10px !important; }
  /* Comparar */
  html body .antes { padding:12px 16px 10px; } html body .antes h2 { font-size:15px; }
  /* cartão do município */
  html body .cartao { font-size:12px; } html body .cartao .cn { font-size:14px; }
}
@media (min-width:861px) {
  /* Tempo: número de agora e lista de dias menores */
  html body .meteo .hagora { column-gap:12px; padding-bottom:10px; margin-bottom:10px; }
  html body .meteo .hagora b { font-size:36px; } html body .meteo .hagora > span:last-child { font-size:12px; }
  html body .meteo .hamanha .mm b { font-size:22px; }
  html body .meteo .mdias > div { grid-template-columns:40px 1fr auto; gap:8px; padding:5px 0; font-size:12px; }
  html body .meteo .mdias .ct { gap:6px; } html body .meteo .mdias .ct .ico, html body .meteo .mdias .ct img.ico { width:16px; height:16px; }
  /* Comparar: mesma largura e tipografia dos outros cards */
  html body .palco.painel { grid-template-columns:320px 1fr; }
  html body .palco .lado { padding:14px 16px 12px; font-size:12px; }
  html body .palco .lado h2 { font-size:15px; } html body .palco .esc { gap:10px; margin-top:12px; }
  html body .palco .esc select, html body .palco .esc button { font-size:13px; }
  html body .palco .nota { margin-top:12px; font-size:12px; }
}
/* Tempo e Comparar não têm o card da direita: a pílula dele também some */
body.aba-meteo .pilulas.dir, body.aba-cmp .pilulas.dir { display:none !important; }
@media (min-width:861px) { html body .meteo-lado p { font-size:11px; line-height:1.45; } }
/* pílulas da esquerda fora da coluna: no computador, no canto onde a coluna começava; no celular, logo acima dela */
@media (min-width:861px) { .pilulas.esq { position:absolute; top:54px; left:20px; z-index:2; } }
@media (max-width:860px) { .pilulas.esq { order:1; } }
body.aba-meteo .pilulas.esq, body.aba-cmp .pilulas.esq { display:none !important; }

/* ---- celular, só os números grandes menores (pedido de 19/10/2026); o resto fica como está ---- */
@media (max-width:860px) {
  html body .ar .aqi { font-size:36px; }
  html body .contador { font-size:40px !important; }
  html body .meteo .hagora b { font-size:36px; }
}

/* ---- coluna de ícones no meio da borda direita (computador) ---- */
.rail { display:none; }
@media (min-width:861px) {
  .com-rail .rail { display:flex; flex-direction:column; position:fixed; right:20px; top:50%; translate:0 -50%; z-index:5; padding:4px;
    background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:12px; }
  .rail button, .com-rail .rail .ferr button { all:unset; box-sizing:border-box; cursor:pointer; width:40px; height:40px; display:grid; place-items:center; border-radius:8px; color:var(--fg2); }
  .rail button:hover { color:var(--fg); background:rgba(250,250,249,.06); } .rail button:focus-visible { outline:2px solid var(--fg); outline-offset:1px; }
  .rail button[aria-pressed="true"] { color:var(--bg); background:var(--fg) !important; }
  .com-rail .rail .ferr { display:flex; flex-direction:column; margin:4px 0 0; padding:4px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:none; box-shadow:none; float:none; }
  .com-rail .rail .ferr button + button { border:0 !important; }
  .com-rail .pilulas.dir { display:none !important; }   /* o ícone da coluna faz o papel da pílula */
  .com-rail .lateral, .com-rail .meteo-lado { right:74px; }  /* os cards da direita abrem ao lado da coluna */
  body.com-rail.aba-cmp .rail { display:none; }
  body.com-rail.aba-meteo .rail-lat { display:none; }
}