/* ============================================================================
   nav.css — Header + Nav compartit · app.jofre.cat
   v6 — afegit WRF 1.5km
   ============================================================================ */

/* ── Header base ── */
.app-header {
    background: rgba(15,23,42,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #334155;
    padding: .5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}

/* ── Inner: grid 3 columnes → [títol] [nav centrat] [status] ── */
.app-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .5rem;
    max-width: 1800px;
    margin: 0 auto;
    min-height: 44px;
}

.header-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

.header-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .4rem;
}

/* ── Títol ── */
.header-title {
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    font-size: clamp(.85rem, .5rem + .8vw, 1.1rem) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
}

.header-title .h-icon {
    flex-shrink: 0;
    -webkit-text-fill-color: initial !important;
}

.header-title .h-text {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* ── Colors gradient per visor ── */
.header-title.app-header-meso   .h-text { background-image: linear-gradient(135deg,#c4b5fd,#a78bfa) !important; }
.header-title.app-header-global .h-text { background-image: linear-gradient(135deg,#93c5fd,#60a5fa) !important; }
.header-title.app-header-estac  .h-text { background-image: linear-gradient(135deg,#67e8f9,#22d3ee) !important; }
.header-title.app-header-vext   .h-text { background-image: linear-gradient(135deg,#fde68a,#fbbf24) !important; }
.header-title.app-header-reg    .h-text { background-image: linear-gradient(135deg,#6ee7b7,#34d399) !important; }
.header-title.app-header-verif  .h-text { background-image: linear-gradient(135deg,#4ade80,#22d3ee) !important; }
.header-title.app-header-harm   .h-text { background-image: linear-gradient(135deg,#58a6ff,#38bdf8) !important; }
.header-title.app-header-wrf    .h-text { background-image: linear-gradient(135deg,#fb923c,#f59e0b) !important; }
.header-title.app-header-clima  .h-text { background-image: linear-gradient(135deg,#f472b6,#ec4899) !important; }

/* ── Status badge ── */
.status-badge {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 20px;
    font-size: .78rem;
    background: rgba(255,255,255,.06);
    white-space: nowrap;
    transition: background .2s, color .2s;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ── Status badge per tema ── */
.app-header--meso   .status-badge,
.app-header--meso   .status-badge.success,
.app-header--meso   .status-badge.loading { background:rgba(139,92,246,.15);  color:#a78bfa; }

.app-header--global .status-badge,
.app-header--global .status-badge.success,
.app-header--global .status-badge.loading { background:rgba(59,130,246,.15);  color:#60a5fa; }

.app-header--estac  .status-badge,
.app-header--estac  .status-badge.success,
.app-header--estac  .status-badge.loading { background:rgba(6,182,212,.15);   color:#22d3ee; }

.app-header--vext   .status-badge,
.app-header--vext   .status-badge.success,
.app-header--vext   .status-badge.loading { background:rgba(245,158,11,.15);  color:#fbbf24; }

.app-header--reg    .status-badge,
.app-header--reg    .status-badge.success,
.app-header--reg    .status-badge.loading { background:rgba(110,231,183,.15); color:#6ee7b7; }

.app-header--harm   .status-badge,
.app-header--harm   .status-badge.success,
.app-header--harm   .status-badge.loading { background:rgba(88,166,255,.15);  color:#58a6ff; }

.app-header--wrf    .status-badge,
.app-header--wrf    .status-badge.success,
.app-header--wrf    .status-badge.loading { background:rgba(251,146,60,.15);  color:#fb923c; }

/* ── uni-nav — contenidor ── */
.app-header-inner > .uni-nav {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    padding: 0;
    margin: 0;
}

/* ── uni-nav — icones ── */
.app-header-inner > .uni-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    text-decoration: none !important;
    font-size: 22px;
    color: #8b949e !important;
    -webkit-text-fill-color: #8b949e !important;
    border: 1px solid transparent;
    position: relative;
    flex-shrink: 0;
    transition: background .12s, border-color .12s;
    user-select: none;
}

/* Fletxa enrere — més petita i separada */
.app-header-inner > .uni-nav a:first-child {
    font-size: 16px;
    width: 32px;
    border-right: 1px solid rgba(255,255,255,.12);
    border-radius: 6px 0 0 6px;
    margin-right: 3px;
    padding-right: 3px;
}

.app-header-inner > .uni-nav a:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    color: #e6edf3 !important;
    -webkit-text-fill-color: #e6edf3 !important;
}

.app-header-inner > .uni-nav a.aqui {
    background: rgba(88,166,255,.15);
    border-color: rgba(88,166,255,.4);
    color: #60a5fa !important;
    -webkit-text-fill-color: #60a5fa !important;
}

/* aqui per tema WRF — taronja */
.app-header--wrf .uni-nav a.aqui {
    background: rgba(251,146,60,.15);
    border-color: rgba(251,146,60,.4);
    color: #fb923c !important;
    -webkit-text-fill-color: #fb923c !important;
}

/* ── Nav-links de text (compatibilitat pàgines antigues) ── */
.nav-links {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: nowrap;
}

.nav-link {
    text-decoration: none;
    font-size: .75rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all .25s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    opacity: .65;
    cursor: pointer;
    -webkit-text-fill-color: initial !important;
}

.nav-link.nav-meso   { color:#8b5cf6 !important; border-color:rgba(139,92,246,.3);  background:rgba(139,92,246,.07);  }
.nav-link.nav-global { color:#3b82f6 !important; border-color:rgba(59,130,246,.3);  background:rgba(59,130,246,.07);  }
.nav-link.nav-estac  { color:#06b6d4 !important; border-color:rgba(6,182,212,.3);   background:rgba(6,182,212,.07);   }
.nav-link.nav-vext   { color:#f59e0b !important; border-color:rgba(245,158,11,.3);  background:rgba(245,158,11,.07);  }
.nav-link.nav-reg    { color:#6ee7b7 !important; border-color:rgba(110,231,183,.3); background:rgba(110,231,183,.07); }
.nav-link.nav-clima  { color:#f472b6 !important; border-color:rgba(244,114,182,.3); background:rgba(244,114,182,.07); }

.nav-link:hover      { opacity:1; filter:brightness(1.2); box-shadow:0 0 10px currentColor; }
.nav-link.nav-active { opacity:1; font-weight:700; cursor:default; pointer-events:none; filter:brightness(1.2); box-shadow:0 0 10px currentColor; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1100px) {
    .app-header-inner {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
    .header-left  { grid-column: 1; grid-row: 1; }
    .header-right { grid-column: 2; grid-row: 1; justify-self: end; }

    .app-header-inner > .uni-nav,
    .nav-links {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding: .35rem 0;
        border-top: 1px solid #334155;
        gap: .3rem;
    }
    .nav-link { font-size:.7rem; padding:.2rem .45rem; }
}

@media (max-width: 700px) {
    .app-header-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .header-left  { grid-column: 1; grid-row: 1; }
    .app-header-inner > .uni-nav,
    .nav-links    { grid-column: 1; grid-row: 2; }
    .header-right {
        grid-column: 1; grid-row: 3;
        justify-self: stretch;
        justify-content: center;
        border-top: 1px solid #334155;
        padding-top: .4rem;
        width: 100%;
    }
    .header-right .tabs  { width: 100%; }
    .header-right .tab   { flex:1; text-align:center; font-size:.72rem; padding:5px 4px; }
    .header-right .controls { justify-content:center; width:100%; }
}

@media (max-width: 500px) {
    .app-header { padding:.35rem .5rem; }
    .app-header-inner > .uni-nav a             { width:34px; height:34px; font-size:19px; }
    .app-header-inner > .uni-nav a:first-child { width:28px; font-size:14px; }
    .nav-link { flex:0 0 calc(33.333% - .2rem); text-align:center; }
}