/* ══════════════════════════════════════════════════════════════════════════
   PREVISÃO DO TEMPO — 18/09/26, ordem do dono.

   *"o card do feed que será exibido, fazer algo incrivelmente lindo, mas só é
   visível para cada usuário."*

   A REGRA DE COR DESTA TELA é diferente da casa toda, e de propósito: aqui o
   fundo é o CÉU, e o céu muda. Cada grupo de tempo (limpo, nuvens, chuva,
   trovoada, neve, noite) tem o seu degradê, e é ele que dá a impressão de
   "abrir a janela" em vez de "abrir um app". Por cima do céu o texto é sempre
   claro, então as cores de texto aqui são fixas — não são tokens do tema, e
   não devem virar: trocar por var(--text) faria o branco sumir no tema claro.

   Fora do céu (as caixas de baixo), a casa manda: var(--surface), var(--border),
   var(--text). ══════════════════════════════════════════════════════════════ */

.clima-pagina {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* Respiro entre a barra de cima e o céu (18/09/26, ordem do dono). */
    padding-top: 14px;
    padding-bottom: 28px;
}

/* ── O CÉU ────────────────────────────────────────────────────────────────── */

.clima-ceu {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    /* 18/09/26, ordem do dono (desktop): "sensação"/mín-máx ficavam na
       extremidade de baixo, sem respiro, enquanto sobrava em cima — mesma
       altura total, mas padding assimétrico sobe o conteúdo um pouco. */
    padding: 20px 24px 28px;
    min-height: 210px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 18px;
    background: linear-gradient(160deg, #2b6cb0, #4299e1 55%, #90cdf4);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
}

/* A coluna da esquerda (lugar, temperatura, máxima e mínima) e, à direita, o
   "Como está o seu dia?" — o desenho que o dono mandou. Numa tela estreita a
   segunda coluna cai para baixo sozinha pelo `flex-wrap`. */
.clima-ceu__col {
    flex: 1 1 320px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* O CÉU DE CADA TEMPO — as MESMAS cores valem para o cartão do feed, que é o
   mesmo céu num retângulo menor. Foi por não valerem nos dois que o cartão do
   feed nasceu azul de sol num dia nublado. */
.clima-ceu[data-grupo="limpo"],
.clima-cartao[data-grupo="limpo"]        { background: linear-gradient(160deg, #1e6fd9, #4aa3f0 52%, #9fd0f7); }
.clima-ceu[data-grupo="nuvens"],
.clima-cartao[data-grupo="nuvens"]       { background: linear-gradient(160deg, #3b6ea5, #6f9ec9 55%, #b9cfe2); }
.clima-ceu[data-grupo="nublado"],
.clima-cartao[data-grupo="nublado"]      { background: linear-gradient(160deg, #4a5568, #718096 55%, #a0aec0); }
.clima-ceu[data-grupo="nevoeiro"],
.clima-cartao[data-grupo="nevoeiro"]     { background: linear-gradient(160deg, #5a6472, #8b95a3 55%, #c3c9d2); }
.clima-ceu[data-grupo="garoa"],
.clima-cartao[data-grupo="garoa"]        { background: linear-gradient(160deg, #395a7a, #5b7f9e 55%, #92b2c8); }
.clima-ceu[data-grupo="chuva"],
.clima-cartao[data-grupo="chuva"]        { background: linear-gradient(160deg, #23405c, #3d6285 55%, #6d94b4); }
.clima-ceu[data-grupo="trovoada"],
.clima-cartao[data-grupo="trovoada"]     { background: linear-gradient(160deg, #1b2440, #33406b 55%, #5a6796); }
.clima-ceu[data-grupo="neve"],
.clima-cartao[data-grupo="neve"]         { background: linear-gradient(160deg, #5b7ba6, #8fa9c4 55%, #d6e4f0); }
.clima-ceu[data-grupo="limpo-noite"],
.clima-cartao[data-grupo="limpo-noite"]  { background: linear-gradient(160deg, #0b1533, #16255c 55%, #2b3d7a); }
.clima-ceu[data-grupo="nuvens-noite"],
.clima-cartao[data-grupo="nuvens-noite"] { background: linear-gradient(160deg, #101a30, #22304f 55%, #3a4a6d); }

/* As estrelas da noite: uma camada de pontinhos, sem imagem nenhuma. */
.clima-ceu[data-noite="1"]::after,
.clima-cartao[data-noite="1"]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, .9), transparent),
        radial-gradient(1.4px 1.4px at 28% 12%, rgba(255, 255, 255, .7), transparent),
        radial-gradient(1.8px 1.8px at 46% 28%, rgba(255, 255, 255, .8), transparent),
        radial-gradient(1.3px 1.3px at 64% 16%, rgba(255, 255, 255, .6), transparent),
        radial-gradient(1.7px 1.7px at 78% 32%, rgba(255, 255, 255, .85), transparent),
        radial-gradient(1.4px 1.4px at 88% 18%, rgba(255, 255, 255, .7), transparent);
}

.clima-ceu__topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.clima-ceu__lugar {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.clima-ceu__data {
    margin: 2px 0 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, .82);
}

.clima-ceu__agora {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    /* 18/09/26, ordem do dono: "sensação de X" ficava colado na borda de
       baixo do céu; o respiro que sobrava era o de cima (topo → agora). */
    margin-top: 15px;
}

.clima-ceu__icone {
    font-size: 64px;
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .25));
}

.clima-ceu__temp {
    font-size: 4.2rem;
    line-height: 0.92;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.clima-ceu__cond {
    font-size: 1.1rem;
    font-weight: 700;
}

.clima-ceu__sens {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, .8);
}

.clima-ceu__minmax {
    margin-top: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.clima-ceu__minmax b { color: #ffd88a; }

/* ── "Como está o seu dia?" ───────────────────────────────────────────────── */

.clima-humor {
    position: relative;
    z-index: 1;
    flex: 1 1 260px;
    align-self: stretch;
    border-radius: 18px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 14px;
    backdrop-filter: blur(6px);
}

.clima-humor__titulo {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
}

.clima-humor__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.clima-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 8px 14px;
    cursor: pointer;
    transition: background var(--duration, .2s), transform var(--duration, .2s);
}

.clima-chip:hover { background: rgba(255, 255, 255, .26); }
.clima-chip.is-marcado { background: #fff; color: #10233d; }

/* ── A faixa das horas ────────────────────────────────────────────────────── */

.clima-caixa {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    padding: 16px;
}

.clima-caixa__titulo {
    margin: 0 0 12px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.clima-horas {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.clima-horas::-webkit-scrollbar { display: none; }

.clima-hora {
    flex: 0 0 auto;
    min-width: 62px;
    text-align: center;
    border-radius: 14px;
    padding: 10px 6px;
    background: var(--surface-3, rgba(148, 163, 184, .12));
}

.clima-hora__h { font-size: .74rem; color: var(--text-3); font-weight: 600; }
.clima-hora__i { font-size: 22px; line-height: 1.5; }
.clima-hora__t { font-size: .95rem; font-weight: 700; color: var(--text); }

/* ── O gráfico das 24 horas ───────────────────────────────────────────────── */

.clima-grafico { width: 100%; height: 170px; display: block; }
.clima-grafico text { font-size: 11px; fill: var(--text-3); }

/* ── Os detalhes ──────────────────────────────────────────────────────────── */

.clima-detalhes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.clima-detalhe {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    background: var(--surface-3, rgba(148, 163, 184, .12));
    padding: 11px 13px;
}

.clima-detalhe__i { font-size: 20px; line-height: 1; }
.clima-detalhe__r { font-size: .8rem; color: var(--text-3); }
.clima-detalhe__v { font-size: .98rem; font-weight: 700; color: var(--text); }

/* ── Os 7 dias ────────────────────────────────────────────────────────────── */

.clima-dia {
    display: grid;
    grid-template-columns: 74px 34px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
}

.clima-dia + .clima-dia { border-top: 1px solid var(--border); }
.clima-dia__nome { font-size: .92rem; font-weight: 600; color: var(--text); }
.clima-dia__i { font-size: 20px; text-align: center; }
.clima-dia__barra {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6cb2f5, #ffd08a, #ff8f6b);
    opacity: .75;
}
.clima-dia__t { font-size: .92rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.clima-dia__t span { color: var(--text-3); font-weight: 600; }

/* ── O CARTÃO 3:4 DO FEED (só para quem é dono dele) ──────────────────────── */

.clima-cartao {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    color: #fff;
    padding: 20px;
    margin-bottom: 14px;
    cursor: pointer;
    background: linear-gradient(160deg, #1e6fd9, #4aa3f0 52%, #9fd0f7);
    box-shadow: 0 16px 38px rgba(15, 23, 42, .2);
}

.clima-cartao__selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    padding: 5px 11px;
}

.clima-cartao__corpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
}

.clima-cartao__temp { font-size: 3.4rem; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.clima-cartao__icone { font-size: 56px; line-height: 1; }
.clima-cartao__cidade { font-size: 1.05rem; font-weight: 700; }
.clima-cartao__data { font-size: .82rem; color: rgba(255, 255, 255, .82); }
.clima-cartao__pe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    font-size: .9rem;
}

.clima-cartao__so-voce {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    color: rgba(255, 255, 255, .8);
}

.clima-cartao__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

/* ── O CARTÃO PEQUENO DO MENU (abaixo do nome, acima do selo) ─────────────── */

/* EM GRADE (18/09/26, print do dono: "está truncado"): os <span> de cidade e data
   são inline e caíam na MESMA linha, um por cima do outro, com a temperatura
   entrando no meio. Três colunas: ícone, cidade/data empilhadas, temperatura com
   máx/mín embaixo. */
.clima-mini {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "i meta temp" "i meta mm";
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 9px 11px;
    margin-bottom: 8px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration, .2s), background var(--duration, .2s);
}

.clima-mini:hover { border-color: var(--border-hover, var(--accent)); background: var(--surface-3, var(--surface)); }
.clima-mini[hidden] { display: none; }

.clima-mini__i { grid-area: i; font-size: 26px; line-height: 1; }
.clima-mini__meta { grid-area: meta; min-width: 0; display: flex; flex-direction: column; }
.clima-mini__cidade {
    display: block;
    font-size: .86rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clima-mini__data {
    display: block;
    font-size: .74rem;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clima-mini__temp { grid-area: temp; font-size: 1.25rem; font-weight: 800; line-height: 1.1; color: var(--text); text-align: right; align-self: end; }
.clima-mini__mm { grid-area: mm; font-size: .72rem; color: var(--text-3); text-align: right; white-space: nowrap; align-self: start; }

/* A barra encolhida não tem largura para o cartão — a mesma régua do selo. */
.sidebar.is-collapsed .clima-mini { display: none; }

/* ── Estados ──────────────────────────────────────────────────────────────── */

.clima-vazio {
    text-align: center;
    padding: 34px 20px;
    color: var(--text-2);
}

.clima-vazio__i { font-size: 40px; line-height: 1; margin-bottom: 10px; }

.clima-acoes {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* A forma do "Trocar cidade" (18/09/26) — mesma receita da linha de lugar do
   256bip News (assets/css/noticias.css, .ntc-forma). */
.clima-forma-cidade {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* O campo e a lista de sugestões moram no MESMO wrapper posicionado — é ele
   que dá o chão para a lista flutuar logo abaixo do campo (18/09/26). */
.clima-cidade-campo {
    position: relative;
    flex: 1 1 200px;
}

.clima-forma-cidade input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.clima-forma-cidade input:focus {
    outline: none;
    border-color: var(--border-hover, var(--accent));
}

.clima-forma-cidade .btn { height: 40px; }

/* AS SUGESTÕES ENQUANTO DIGITA (18/09/26, ordem do dono: *"existe uma forma
   nessa API que já vai alimentando, para evitar erro de digitação?"*) — a
   MESMA busca do Open-Meteo que a previsão já usa, só que devolvendo a lista
   inteira (api/clima_cidades.php → bip_clima_sugestoes). */
.clima-cidade-sugestoes {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .16);
}

.clima-cidade-sugestoes[hidden] { display: none; }

.clima-cidade-sugestoes li {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
}

.clima-cidade-sugestoes li:hover,
.clima-cidade-sugestoes li:focus {
    background: var(--surface-3, rgba(148, 163, 184, .16));
    outline: none;
}

/* `display:flex` acima bate o `display:none` do atributo nativo em
   especificidade igual (o CSS do autor sempre vence o UA) — sem isto o
   `hidden` no JS não escondia nada. */
.clima-acoes[hidden],
.clima-forma-cidade[hidden] {
    display: none;
}

@media (max-width: 560px) {
    .clima-ceu { padding: 18px; min-height: 0; gap: 14px; }
    .clima-ceu__temp { font-size: 3.4rem; }
    .clima-ceu__icone { font-size: 52px; }
    .clima-detalhes { grid-template-columns: 1fr; }
}