/* Página /tempo — usa as cores, tipografia e raios do site (ver :root em style.css) */
.tp { --tp-radius: 16px; }
.tp .tp-cartao { background: #fff; border: 1px solid var(--gray-200); border-radius: var(--tp-radius); box-shadow: var(--shadow-sm); }
.tp-atualizado { display: inline-block; margin-left: 6px; color: var(--gray-500); font-size: 13px; }
.tp-atualizado::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #1fb26b; margin-right: 6px; vertical-align: 1px; animation: tp-vivo 2s ease-in-out infinite; }
@keyframes tp-vivo { 0%, 100% { box-shadow: 0 0 0 0 rgba(31, 178, 107, .5); } 50% { box-shadow: 0 0 0 6px rgba(31, 178, 107, 0); } }

  display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: end; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; animation: tp-sobe .5s var(--ease) both; }

.tp-modo { display: inline-flex; background: var(--gray-100); border-radius: 999px; padding: 4px; position: relative; }
.tp-modo button, .tp-filtros button { font: inherit; font-size: 13px; font-weight: 600; border: 0; background: transparent; color: var(--gray-600); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background .25s, color .25s, box-shadow .25s; }
.tp-modo button.ativo { background: #fff; color: var(--blue-dark); box-shadow: var(--shadow-sm); }
.tp-modo button:not(.ativo):hover, .tp-filtros button:not(.ativo):hover { color: var(--black); }

/* Grelha principal */
.tp-grelha { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr); gap: 18px; align-items: start; }
.tp-lado { display: grid; gap: 18px; }

/* Mapa */
.tp-mapa { padding: 20px; }
.tp-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tp-cartao-topo h2, .tp-dias-cartao h3, .tp-todas-topo h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--black); }
.tp-cartao-topo p { font-size: 12.5px; color: var(--gray-500); margin: 4px 0 0; }
.tp-mapa-caixa { position: relative; margin-top: 12px; border-radius: 12px; padding: 10px; background:
  radial-gradient(circle at 30% 20%, #fff, transparent 60%), linear-gradient(150deg, var(--blue-faint), #e2eef6); }
#tpMapa { display: block; width: 100%; height: auto; max-height: calc(100vh - 260px); min-height: 300px; overflow: visible; }
.tp-prov { fill: #cfd4da; stroke: #fff; stroke-width: 14; stroke-linejoin: round; cursor: pointer; outline: none; transition: fill .6s ease, opacity .3s ease;
  opacity: 0; transform-box: fill-box; transform-origin: center; animation: tp-entra .7s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
#tpMapa.pronto .tp-prov { animation: none; opacity: 1; }
#tpMapa.pronto .tp-prov.tp-apagada { opacity: .22; }
@keyframes tp-entra { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.tp-realce { fill: none; pointer-events: none; stroke-linejoin: round; transition: d .25s; }
.tp-realce--hover { stroke: rgba(7, 63, 94, .55); stroke-width: 40; }
.tp-realce--sel { stroke: var(--blue-darker); stroke-width: 55; stroke-dasharray: 1800 0; animation: tp-contorno .8s var(--ease) both; }
@keyframes tp-contorno { from { stroke-dasharray: 0 6000; opacity: .2; } to { stroke-dasharray: 6000 0; opacity: 1; } }
.tp-prov:focus-visible { stroke: var(--blue); stroke-width: 70; }
.tp-pulso circle { fill: none; stroke: #fff; stroke-width: 60; opacity: 0; transform-origin: 0 0; }
.tp-pulso.on .a { animation: tp-onda 2.4s ease-out infinite; }
.tp-pulso.on .b { animation: tp-onda 2.4s ease-out 1.2s infinite; }
@keyframes tp-onda { 0% { transform: scale(.25); opacity: .95; } 100% { transform: scale(1.9); opacity: 0; } }
.tp-et { font: 700 560px var(--sans); fill: #0e2a3e; stroke: none; text-anchor: middle; dominant-baseline: central; pointer-events: none; transition: opacity .3s; }
.tp-et { transition: opacity .3s, fill .6s ease; }
.tp-et.tp-apagada { opacity: .2; }
.tp-dica { position: absolute; z-index: 5; pointer-events: none; background: var(--black); color: #fff; border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: var(--shadow-lg); display: grid; gap: 2px; white-space: nowrap; animation: tp-pop .15s var(--ease); }
.tp-dica strong { font-weight: 700; }
.tp-dica span { display: flex; align-items: center; color: #dbe7ef; font-size: 12.5px; }
@keyframes tp-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tp-legenda { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 2px 0; font-size: 12px; color: var(--gray-600); align-items: center; }
.tp-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.tp-legenda i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tp-legenda .tp-escala { flex: 1; min-width: 160px; }
.tp-legenda .tp-escala i { display: block; width: 100%; height: 10px; border-radius: 6px; background: linear-gradient(90deg, rgb(61,156,200), rgb(150,205,190), rgb(243,210,122), rgb(240,169,58), rgb(226,98,42), rgb(180,30,25)); }
.tp-legenda .tp-escala-n { flex-basis: 100%; display: flex; justify-content: space-between; font-size: 11px; color: var(--gray-500); margin-top: -6px; }

/* Painel principal (hero) */
.tp-hero { position: relative; overflow: hidden; border-radius: var(--tp-radius); color: #fff; min-height: 300px; box-shadow: var(--shadow); isolation: isolate; }
.tp-fundo { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; z-index: -2; }
.tp-fundo--clear { background: radial-gradient(circle at 85% 12%, rgba(255, 209, 102, .6), transparent 46%), linear-gradient(145deg, #0a5c84, #1077ad 50%, #3d9cc8); }
.tp-fundo--partly { background: radial-gradient(circle at 88% 10%, rgba(255, 209, 102, .35), transparent 44%), linear-gradient(145deg, #0f5f8c, #2c86b5 60%, #6fb3d6); }
.tp-fundo--cloudy { background: linear-gradient(145deg, #33566e, #5f7f95 60%, #8aa3b4); }
.tp-fundo--rain { background: linear-gradient(160deg, #0b2a40, #1c4d6e 60%, #2f6a8c); }
.tp-fundo--thunder { background: linear-gradient(160deg, #171f38, #33305c 60%, #4e4478); }
.tp-fundo--fog { background: linear-gradient(145deg, #5b7384, #8aa0ae 60%, #b4c3cc); }
.tp-fundo--noite { background:
  radial-gradient(1.6px 1.6px at 18% 22%, #fff, transparent), radial-gradient(1.2px 1.2px at 62% 14%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 38%, #fff, transparent), radial-gradient(1px 1px at 38% 48%, #fff, transparent), radial-gradient(1.3px 1.3px at 90% 20%, #fff, transparent),
  linear-gradient(160deg, #07162a, #0e2c4d 60%, #18436f); }
.tp-hero[data-tipo="clear"] .tp-fundo--clear, .tp-hero[data-tipo="partly"] .tp-fundo--partly, .tp-hero[data-tipo="cloudy"] .tp-fundo--cloudy, .tp-hero[data-tipo="rain"] .tp-fundo--rain,
.tp-hero[data-tipo="thunder"] .tp-fundo--thunder, .tp-hero[data-tipo="fog"] .tp-fundo--fog, .tp-hero[data-tipo="noite"] .tp-fundo--noite { opacity: 1; }
.tp-chuva { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .6s; pointer-events: none; overflow: hidden; }
.tp-chuva b { position: absolute; top: -24px; width: 1.5px; height: 18px; background: linear-gradient(transparent, rgba(255, 255, 255, .55)); animation: tp-cai linear infinite; }
@keyframes tp-cai { to { transform: translateY(360px); } }
.tp-hero[data-tipo="rain"] .tp-chuva, .tp-hero[data-tipo="thunder"] .tp-chuva { opacity: 1; }
.tp-hero[data-tipo="thunder"]::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; z-index: -1; pointer-events: none; animation: tp-relampago 7s infinite; }
@keyframes tp-relampago { 0%, 90%, 94%, 100% { opacity: 0; } 91% { opacity: .35; } 92% { opacity: 0; } 93% { opacity: .25; } }
.tp-hero-in { padding: 22px; }
.tp-troca { animation: tp-troca .55s var(--ease); }
@keyframes tp-troca { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tp-hero-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tp-hero-txt small { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.tp-temp { font-size: 76px; font-weight: 800; line-height: 1; letter-spacing: -3px; margin: 10px 0 4px; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; }
.tp-temp sup { font-size: 36px; font-weight: 700; letter-spacing: 0; margin-top: 6px; }
.tp-desc { font-size: 16px; color: rgba(255, 255, 255, .92); font-weight: 500; }
.tp-minmax { display: flex; gap: 18px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .85); }
.tp-minmax b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.tp-metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.tp-metricas > div { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 12px; padding: 10px 12px; }
.tp-metricas small { display: block; font-size: 11px; color: rgba(255, 255, 255, .75); margin-bottom: 3px; }
.tp-metricas strong { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tp-hero-acoes { margin-top: 16px; }
.tp-partilhar { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: background .2s, transform .2s; }
.tp-partilhar:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }

/* Previsão a 5 dias */
.tp-dias-cartao { padding: 18px; }
.tp-dias { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.tp-dia { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 10px 4px 8px; text-align: center; display: grid; justify-items: center; gap: 2px; animation: tp-sobe .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); transition: transform .2s var(--ease), border-color .2s; }
.tp-dia:hover { transform: translateY(-3px); border-color: var(--blue-light); }
.tp-dia small { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.tp-dia b { font-size: 16px; font-weight: 800; color: #d4180f; font-variant-numeric: tabular-nums; }
.tp-dia em { font-style: normal; font-size: 13px; font-weight: 600; color: #1a9bdc; font-variant-numeric: tabular-nums; }
.tp-barra-t { position: relative; width: 6px; height: 40px; background: var(--gray-200); border-radius: 4px; margin: 6px 0 4px; overflow: hidden; }
.tp-barra-t i { position: absolute; left: 0; right: 0; border-radius: 4px; background: linear-gradient(180deg, #e2622a, #3d9cc8); }
.tp-mm { font-size: 10.5px; color: var(--blue-dark); font-weight: 600; }
.tp-mm--zero { color: var(--gray-400); font-weight: 500; }

/* Lista das províncias */
.tp-todas { margin-top: 18px; padding: 20px; }
.tp-todas-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-filtros { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tp-filtros button { background: var(--gray-100); padding: 7px 14px; }
.tp-filtros button.ativo { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(16, 119, 173, .3); }
.tp-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; }
.tp-cidade { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; text-align: left; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 12px 14px; cursor: pointer; min-width: 0;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s; animation: tp-sobe .45s var(--ease) both; animation-delay: calc(var(--i) * 28ms); }
.tp-cartoes.sem-anim .tp-cidade, .tp-dias.sem-anim .tp-dia { animation: none; }
.tp-cidade:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue-light); }
.tp-cidade.ativo { border-color: var(--blue); background: var(--blue-faint); box-shadow: 0 0 0 3px rgba(16, 119, 173, .12); }
.tp-cidade-nome { min-width: 0; display: grid; }
.tp-cidade-nome strong { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cidade-nome small { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cidade-t { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.1; }
.tp-cidade-t small { display: block; font-size: 11px; font-weight: 600; }
.tp-cidade-t .q { font-style: normal; color: #d4180f; } .tp-cidade-t .f { font-style: normal; color: #1a9bdc; }
.tp-vazio { color: var(--gray-500); font-size: 14px; grid-column: 1 / -1; margin: 6px 0; }
.tp-nota { margin: 18px 2px 0; font-size: 12px; color: var(--gray-500); line-height: 1.6; max-width: 860px; }
.tp-nota a { color: var(--blue); }
.tp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ícones do céu (SVG) */
.tp-ic { width: 56px; height: 56px; display: block; overflow: visible; flex: none; }
.tp-ic--hero { width: 104px; height: 104px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .25)); }
.tp-ic--sm { width: 32px; height: 32px; }
.tp-ic--xs { width: 18px; height: 18px; display: inline-block; margin-right: 6px; }
.tp-ic--hero .ic-raios { animation: tp-gira 28s linear infinite; transform-origin: 32px 32px; }
.tp-ic--hero .ic-sol circle { animation: tp-pulsa 3.4s ease-in-out infinite; transform-origin: 32px 32px; }
.tp-ic--hero .ic-nuvem { animation: tp-deriva 6s ease-in-out infinite alternate; }
.tp-ic--hero .ic-fundo .ic-nuvem { animation: tp-deriva2 7.5s ease-in-out infinite alternate; }
.tp-ic--hero .ic-gotas line { animation: tp-gota 1.1s linear infinite; }
.tp-ic--hero .ic-gotas line:nth-child(2) { animation-delay: .35s; } .tp-ic--hero .ic-gotas line:nth-child(3) { animation-delay: .7s; }
.tp-ic--hero .ic-raio { animation: tp-raio 3.2s infinite; }
.tp-ic--hero .ic-nevoa line { animation: tp-nevoa 4s ease-in-out infinite alternate; }
.tp-ic--hero .ic-nevoa line:nth-child(2) { animation-delay: .8s; }
.tp-ic--hero .ic-estrelas circle { animation: tp-brilha 2.2s ease-in-out infinite alternate; }
.tp-ic--hero .ic-estrelas circle:nth-child(2) { animation-delay: .7s; } .tp-ic--hero .ic-estrelas circle:nth-child(3) { animation-delay: 1.3s; }
.tp-ic--hero .ic-lua { animation: tp-balanca 6s ease-in-out infinite alternate; transform-origin: 32px 32px; }
@keyframes tp-gira { to { transform: rotate(360deg); } }
@keyframes tp-pulsa { 50% { transform: scale(1.08); } }
@keyframes tp-deriva { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes tp-deriva2 { from { transform: translateX(4px); } to { transform: translateX(-4px); } }
@keyframes tp-gota { 0% { transform: translateY(-4px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes tp-raio { 0%, 55%, 61%, 100% { opacity: .25; } 56%, 59% { opacity: 1; } 57% { opacity: .3; } }
@keyframes tp-nevoa { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@keyframes tp-brilha { from { opacity: .25; } to { opacity: 1; } }
@keyframes tp-balanca { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes tp-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Ecrãs menores */
@media (max-width: 980px) {
  .tp-grelha { grid-template-columns: 1fr; }
  .tp-lado { order: -1; }
}
@media (max-width: 560px) {
  .tp-mapa, .tp-todas { padding: 14px; }
  .tp-hero-in { padding: 18px; }
  .tp-temp { font-size: 64px; }
  .tp-ic--hero { width: 84px; height: 84px; }
  .tp-cartoes { grid-template-columns: 1fr 1fr; }
  .tp-cidade { grid-template-columns: 1fr auto; padding: 11px 12px; }
  .tp-cidade-meio { display: none; }
  .tp-dia b { font-size: 15px; }
}

/* Quem prefere menos movimento: sem animações */
@media (prefers-reduced-motion: reduce) {
  .tp *, .tp *::before, .tp *::after, .tp-hero::after { animation: none !important; transition: none !important; }
  .tp-prov { opacity: 1; }
}

/* Ícones sobre fundo claro (cartões, previsão): nuvens e lua com mais contraste */
.tp-dica[hidden] { display: none; }
.tp-ic--sm .ic-nuvem { fill: #93a9ba; }
.tp-ic--sm .ic-fundo .ic-nuvem { fill: #c3d1dc; }
.tp-ic--sm .ic-lua path { fill: #e3b64a; }
.tp-ic--sm .ic-estrelas { fill: #e3b64a; }
.tp-ic--sm .ic-nevoa { stroke: #a9bccb; }
.tp-ic--sm .ic-gotas { stroke: #4f9fd6; }
.tp-ic--sm .ic-sol circle, .tp-ic--sm .ic-sol .ic-raios { fill: #f2b233; stroke: #f2b233; }
.tp-ic--sm .ic-sol .ic-raios { fill: none; }
.tp-legenda .tp-legenda-nota { flex-basis: 100%; font-size: 11.5px; color: var(--gray-500); }

/* Em ecrã largo o painel acompanha o leitor enquanto percorre o mapa */
@media (min-width: 981px) { .tp-lado { position: sticky; top: 92px; } }