/* forecast-v2.css — montanha desenhada pelos dados + previsão por dia compacta (resort_details.php).
   Igual na STE e no My Snow Life: as cores vêm das variáveis de cada style.css (--accent-primary etc.). */

/* ============ Montanha ============ */
.mtn2 {
    width: 100%;
    max-width: 560px;
    margin: 1.25rem auto 0;
}
.mtn2-svg { display: block; width: 100%; height: auto; overflow: visible; }
.mtn2-svg text { font-family: var(--font-display, inherit), sans-serif; fill: var(--text-secondary, #94a3b8); }

.mtn2-axis { stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.mtn2-guide { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 2 3; }
.mtn2-dot { fill: #0f172a; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.mtn2-k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.mtn2-m { font-size: 15px; font-weight: 800; fill: #fff !important; }
.mtn2-s { font-size: 12px; font-weight: 700; fill: var(--accent-primary, #38bdf8) !important; }

.mtn2-row { cursor: pointer; }
.mtn2-row:hover .mtn2-guide { stroke: rgba(255, 255, 255, .4); }
.mtn2-row.on .mtn2-k { fill: var(--accent-primary, #38bdf8); }
.mtn2-row.on .mtn2-guide { stroke: var(--accent-primary, #38bdf8); stroke-opacity: .7; stroke-dasharray: none; }
.mtn2-row.on .mtn2-dot { fill: #fff; stroke: var(--accent-primary, #38bdf8); stroke-width: 3; filter: drop-shadow(0 0 6px var(--accent-primary, #38bdf8)); }

.mtn2-here rect { fill: rgba(15, 23, 42, .92); stroke: var(--accent-primary, #38bdf8); stroke-opacity: .6; }
.mtn2-here text { font-size: 10.5px; font-weight: 700; fill: #fff !important; }

/* previsão 6 dias por altitude (pílula sobre a montanha) */
.mtn2-fc rect:first-child { fill: rgba(15, 23, 42, .88); stroke: rgba(255, 255, 255, .18); }
.mtn2-fc text { font-size: 13px; font-weight: 800; fill: var(--text-muted, #64748b) !important; }
.mtn2-fc .mtn2-bar { fill: rgba(255, 255, 255, .25); }
.mtn2-fc.has rect:first-child { fill: rgba(14, 116, 144, .55); stroke: #67e8f9; }
.mtn2-fc.has text { fill: #fff !important; }
.mtn2-fc.has .mtn2-bar { fill: #a5f3fc; }
.mtn2-fc.big rect:first-child { fill: var(--accent-primary, #38bdf8); stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 6px var(--accent-primary, #38bdf8)); }
.mtn2-fc.big text { fill: #fff !important; }
.mtn2-fc.big .mtn2-bar { fill: #fff; }
.mtn2-legend { font-size: 10.5px; font-weight: 600; fill: var(--text-muted, #64748b) !important; }

.mtn2-fl line { stroke: #67e8f9; stroke-width: 1.5; stroke-opacity: .85; }
.mtn2-fl text { font-size: 11px; font-weight: 700; fill: #67e8f9 !important; }

.mtn2-vert line { stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; }
.mtn2-vert text { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.mtn2-vert-v { font-weight: 800; fill: #fff; }

/* ============ Previsão por dia ============ */
.fc-days.snow-forecast-grid {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
    scroll-snap-type: x proximity;
}
.fc-day {
    flex: 0 0 136px;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
    border-radius: 12px;
    padding: .7rem .7rem .6rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    transition: border-color .2s, background .2s;
}
.fc-day:hover { border-color: var(--accent-primary, #38bdf8); background: rgba(255, 255, 255, .05); }
.fc-day.weekend { background: rgba(255, 255, 255, .055); }
/* neve do dia: faixa que sobe do pé do card (20 cm = cheio) */
.fc-day::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--snow, 0) * 100%);
    background: linear-gradient(to top, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    pointer-events: none;
}
.fc-day > * { position: relative; z-index: 1; }
.fc-day { text-align: left; }

.fc-row {
    all: unset;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "date snow" "icon temps";
    align-items: center;
    gap: .45rem .3rem;
    cursor: default;
}
.fc-date { grid-area: date; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.fc-date b { font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--text-secondary, #94a3b8); }
.fc-date span { font-size: .95rem; font-weight: 800; color: var(--accent-primary, #38bdf8); }
.weekend .fc-date b { color: #fff; }
.fc-icon { grid-area: icon; text-align: center; font-size: 1.4rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
.fc-snow { grid-area: snow; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fc-snow-v { font-size: .9rem; font-weight: 800; color: var(--text-muted, #64748b); white-space: nowrap; }
.has-snow .fc-snow-v { color: #fff; font-size: 1.05rem; }
.fc-ens { font-size: .66rem; font-weight: 700; color: #a78bfa; white-space: nowrap; }
.fc-ens.alert { color: #fbbf24; }
.fc-snow .fc-ens { display: none; }   /* no PC o 🎲 fica na faixa de avisos; na linha do celular aparece ao lado da neve */
/* faixa de avisos: sempre presente e com a mesma altura, com ou sem aviso */
.fc-tags { display: flex; justify-content: center; align-items: center; gap: 6px; height: 20px; overflow: hidden; }
.fc-tags > span { font-size: .66rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.fc-tags .fc-ens { background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .25); }
.fc-tags .fc-ens.alert { background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .3); }
.fc-tags .fc-rain { background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .2); }
.fc-temps { grid-area: temps; display: flex; justify-content: flex-end; gap: 3px; }
.fc-temps .temp { font-size: .8rem; font-weight: 800; padding: .15rem .3rem; border-radius: 6px; min-width: 32px; text-align: center; }
.fc-chev { display: none; }

.fc-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: .7rem; color: var(--text-secondary, #94a3b8); text-align: center; }
/* no PC a descrição, a qualidade e a faixa do ensemble ficam no title (ícone, neve, 🎲); aparecem ao abrir a linha no celular */
.fc-wlabel, .fc-q, .fc-range { display: none; }
.fc-q { font-size: .66rem; }
.fc-range { color: #a78bfa; font-weight: 700; white-space: nowrap; }
.fc-feels { white-space: nowrap; }
.fc-feels > span { opacity: .7; }
.fc-feels .c { color: #a5f3fc; }
.fc-feels .w { color: #fde047; }
.fc-rain { color: #60a5fa; font-weight: 700; white-space: nowrap; }
.fc-line { width: 100%; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.fc-arrow { display: inline-block; font-style: normal; color: var(--color-cyan, #22d3ee); }

/* ============ Celular: uma linha por dia ============ */
@media (max-width: 640px) {
    .mtn2 { margin-top: .75rem; }

    .fc-days.snow-forecast-grid {
        flex-direction: column;
        gap: 0;
        overflow: visible;
        padding: 0;
        border: 1px solid var(--glass-border, rgba(255, 255, 255, .08));
        border-radius: 12px;
        overflow: hidden;
    }
    .fc-day {
        flex: none;
        border: 0;
        border-radius: 0;
        border-top: 1px solid rgba(255, 255, 255, .06);
        padding: 0;
        gap: 0;
    }
    .fc-day:first-child { border-top: 0; }
    .fc-day:hover { background: rgba(255, 255, 255, .03); }
    .fc-day.weekend { background: rgba(255, 255, 255, .05); }
    /* a faixa de neve vira uma barra horizontal da esquerda */
    .fc-day::after { top: 0; bottom: 0; right: auto; height: auto; width: calc(var(--snow, 0) * 100%); background: linear-gradient(to right, rgba(255, 255, 255, .03), rgba(255, 255, 255, .13)); }

    .fc-row {
        grid-template-columns: 62px 34px 1fr auto 16px;
        grid-template-areas: "date icon snow temps chev";
        column-gap: 8px;
        padding: .55rem .75rem;
        min-height: 44px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .fc-date { flex-direction: row; align-items: baseline; gap: 5px; }
    .fc-date span { font-size: .85rem; }
    .fc-icon { font-size: 1.3rem; }
    .fc-snow { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; }
    .fc-snow .fc-ens { display: inline; }
    /* avisos: no celular só com a linha aberta (o 🎲 já está na linha) */
    .fc-tags { display: none; height: auto; justify-content: flex-start; padding: 0 .75rem 4px calc(.75rem + 62px + 8px); }
    .fc-day.open .fc-tags:has(.fc-rain) { display: flex; }
    .fc-tags .fc-ens { display: none; }
    .fc-temps .temp { min-width: 30px; font-size: .78rem; padding: .12rem .35rem; }
    .fc-chev { display: block; color: var(--text-muted, #64748b); font-size: .8rem; transition: transform .2s; }
    .fc-day.open .fc-chev { transform: rotate(180deg); }

    .fc-more { display: none; justify-content: flex-start; text-align: left; padding: 0 .75rem .65rem calc(.75rem + 62px + 8px); font-size: .74rem; gap: 4px 12px; }
    .fc-day.open .fc-more { display: flex; }
    .fc-wlabel, .fc-q, .fc-range { display: inline; }
    .fc-wlabel { font-weight: 700; color: #fff; }
    .fc-line { width: auto; border-top: 0; padding-top: 0; justify-content: flex-start; gap: 12px; }
}