/* barra.css - la barra general (capçalera, campaneta, menú d'usuari).
   La fan servir totes les pantalles i també l'Estudi, que és una aplicació a
   part amb el seu propi full d'estil: per això tot va dins de .nexe-barra i
   porta els colors del tema amb ell. Els colors es generen del nexe.css. */
/* L'espai de treball, el mateix a totes les pestanyes (i a l'Estudi): pensat
   per a 1920 x 1080. Del 1920 se'n van la barra de desplaçament i el marc
   del navegador i un marge a cada costat: 1840 px com a màxim, també en una
   pantalla de 3600 (no creix més: queda centrat). En pantalles més petites
   ocupa el que hi ha, amb el mateix marge; al mòbil, més estret. */
/* La lletra de Nexe: Inter (Rasmus Andersson, llicència OFL, fonts/Inter-
   LICENSE.txt). Guardada aquí (cap font de fora): un
   sol fitxer variable, de 100 a 900, 344 KB que el navegador desa. Abans era
   la del sistema, que al Linux és la DejaVu, ampla i sense caràcter. */
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  /* MOVIMENT: les corbes i les durades de tot Nexe, aquí i enlloc més.
     Mai ease-in a la interfície (comença lent just quan l'usuari mira); res
     per sobre dels 300 ms; el que es fa moltes vegades al dia, el més curt. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --d-press: 140ms; --d-hover: 160ms; --d-entra: 150ms; --d-surt: 100ms;
  --d-panel: 220ms; --d-batec: 1.4s;   /* el batec d'un punt «en marxa» */
}
:root {
  /* CAPES: qui queda per sobre de qui, en un sol lloc. Els valors petits
     (1-10) de dins d'un component no hi són: només ordenen les seves peces. */
  --z-barra: 30; --z-desplegable: 40; --z-modal: 1000; --z-modal-2: 1100;
  --z-avis: 1200;
}
:root { --lletra: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

:root { --amplada-pagina: 1840px; --marge-pagina: 28px; }
@media (max-width: 820px) { :root { --marge-pagina: 16px; } }

/* ========================================================== */
/* TEMES: dos, el clar i el fosc (nucli 0.20.0)               */
/* ========================================================== */
/* Mediterrània (clar, blau marí + taronja) i Nit (fosc). Cada usuari tria
   el seu des del menú d'usuari; Config → General diu quin és el de qui
   encara no n'ha triat cap. Aquí, en un sol lloc, perquè aquest full el
   carreguen totes les pàgines: les de Nexe i les de l'Estudi. Contrast
   mesurat: tot el text >= 4,5:1 sobre el seu fons, en tots dos. */
/* Mediterrània: clar */
[data-theme="mediterrania"] {
  --primary:        #1e4d6b;
  --primary-hover:  #173f59;
  --primary-soft:   #1e4d6b14;
  --primary-text:   #ffffff;
  --accent:         #b94f1b;
  --accent-hover:   #a04416;
  --accent-soft:    #e8743c1a;
  --bg:             #f5f7f9;
  --surface:        #ffffff;
  --surface-2:      #eef2f5;
  --text:           #1a2330;
  --text-soft:      #4b5866;
  --text-faint:     #5b6775;
  --border:         #cfd8e1;
  --border-soft:    #e4e9ee;
  --ok:             #24692a;
  --ok-soft:        #e7f3e8;
  --avis:           #8f5500;
  --avis-soft:      #fff3cd;
  --error:          #b3261e;
  --error-soft:     #fde8e6;
  --info:           #245080;
  --info-soft:      #e7eef7;
  --ona:           #b9cddf;   /* forma d\'ona: el que falta per sonar */
  --ona-feta:      #16324f;   /* i el que ja ha sonat */
  --error-text:    #ffffff;   /* text sobre --error (el blanc dels botons de perill, els comptadors) */
  --antena:        #c62828;   /* EN ANTENA, GRAVANT: el vermell del rètol de l'estudi, igual als dos temes */
  --antena-text:   #ffffff;
  --vel:           rgba(17, 24, 39, .45);  /* el vel de darrere d'una finestra */
  --forat-video:   #111;      /* el fons d'un vídeo o d'un reproductor (sempre fosc) */
  --text-sobre-blanc: #4b5866; /* text sobre un blanc «físic» (paper, mediateca) */
  /* les ombres: la de les cartes, la dels controls, la d'una pista o
     d'una llista que s'obre, la dels panells i la de les finestres */
  --ombra-carta:    0 2px 4px rgba(31, 41, 55, .04);
  --ombra-control:  0 1px 1px rgba(31, 41, 55, .06);
  --ombra-petita:   0 4px 12px rgba(0, 0, 0, .12);
  --ombra-panell:   0 12px 32px rgba(0, 0, 0, .16);
  --ombra-finestra: 0 16px 48px rgba(0, 0, 0, .2);
}

/* Nit: fosc */
[data-theme="nit"] {
  --primary:        #6ba0d4;
  --primary-hover:  #82afdc;
  --primary-soft:   #6ba0d41f;
  --primary-text:   #12151a;
  --accent:         #e8a040;
  --accent-hover:   #f2b256;
  --accent-soft:    #e8a0401f;
  --bg:             #15171c;
  --surface:        #1d2027;
  --surface-2:      #262a32;
  --text:           #e0e3e8;
  --text-soft:      #a6acb5;
  --text-faint:     #959aa3;
  --border:         #3a404b;
  --border-soft:    #2a2e37;
  --ok:             #7fcf83;
  --ok-soft:        #1f3a21;
  --avis:           #e2ad5c;
  --avis-soft:      #3b2d12;
  --error:          #f08a80;
  --error-soft:     #3d1d1a;
  --info:           #7fb1e0;
  --info-soft:      #1a2d45;
  --ona:           #3d5368;
  --ona-feta:      #7fb1e0;
  --error-text:    #12151a;
  --antena:        #c62828;
  --antena-text:   #ffffff;
  --vel:           rgba(0, 0, 0, .55);
  --forat-video:   #0b0b0f;
  --text-sobre-blanc: #4b5866;
  /* en fosc, les cartes no fan ombra (la vora ja les separa) */
  --ombra-carta:    none;
  --ombra-control:  none;
  --ombra-petita:   0 4px 12px rgba(0, 0, 0, .4);
  --ombra-panell:   0 12px 32px rgba(0, 0, 0, .45);
  --ombra-finestra: 0 16px 48px rgba(0, 0, 0, .5);
}
/* LES ÀREES (nucli 0.27.0): el color de cada bloc de mòduls, el de la marca
   NEXE RÀDIO (blau emissió, violeta estudi, corall continguts, turquesa
   dades, navy sistema), ajustat a cada tema perquè les icones i les marques tinguin
   contrast (>= 3:1) sobre el seu fons. Només per a icones, marques i
   punts: els botons, avisos i estats segueixen amb els colors del tema. */
[data-theme="mediterrania"] {
  --area-antena: #2563eb; --area-estudi: #7c3aed; --area-redaccio: #d64545;
  --area-supervisio: #0f8277; --area-sistema: #0f2a44;
}
[data-theme="nit"] {
  --area-antena: #60a5fa; --area-estudi: #b197fc; --area-redaccio: #f87171;
  --area-supervisio: #2dd4bf; --area-sistema: #b4c0cf;
}
[data-area="antena"] { --area: var(--area-antena); }
[data-area="estudi"] { --area: var(--area-estudi); }
[data-area="redaccio"] { --area: var(--area-redaccio); }
[data-area="supervisio"] { --area: var(--area-supervisio); }
[data-area="sistema"] { --area: var(--area-sistema); }
[data-theme="nit"] { color-scheme: dark; }
[data-theme="mediterrania"] { color-scheme: light; }


.nexe-barra {
  position: sticky; top: 0; z-index: var(--z-barra);
  font-family: var(--lletra);
  font-size: var(--t-body); line-height: 1.5; color: var(--text);
}
.nexe-barra *, .nexe-barra *::before, .nexe-barra *::after { box-sizing: border-box; }
.nexe-barra header.cap {
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--ombra-carta); position: static;
}
.nexe-barra header.cap .wrap {
  max-width: var(--amplada-pagina); margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
}
.nexe-barra .logo { display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; }
.nexe-barra .barra-sortir { margin: 0; }

/* les icones de la dreta: campaneta, usuari i sortir */
.nexe-barra .barra-icones {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.nexe-barra .barra-desplegable { position: relative; }
.nexe-barra .barra-icona {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 36px; height: 36px; padding: 0;
  background: none; border: 1px solid transparent; border-radius: var(--r-carta);
  color: var(--text-soft); cursor: pointer; box-shadow: none;
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.nexe-barra .barra-icona:hover, .nexe-barra .barra-icona[aria-expanded="true"] {
  color: var(--primary); background: var(--primary-soft);
}
.nexe-barra .barra-icona:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
/* el comptador de la campaneta: un .comptador.comptador-alarma a la cantonada */
.nexe-barra .barra-comptador { position: absolute; top: 0; right: 0; }
.nexe-barra .barra-panell {
  position: absolute; right: 0; top: calc(100% + 6px); width: 340px;
  max-height: 70vh; overflow-y: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-carta);
  box-shadow: var(--ombra-panell); z-index: var(--z-desplegable);
}
.nexe-barra .barra-panell-petit { width: 240px; }
.nexe-barra .barra-panell-cap {
  padding: 10px 14px; font-weight: 600; font-size: var(--t-meta);
  border-bottom: 1px solid var(--border);
}
.nexe-barra .barra-sub {
  font-weight: 400; font-size: var(--t-micro); color: var(--text-faint);
}
.nexe-barra .barra-opcio {
  display: block; padding: 10px 14px; font-size: var(--t-meta);
  color: var(--text); text-decoration: none;
}
.nexe-barra .barra-opcio:hover { background: var(--primary-soft); color: var(--primary); }
.nexe-barra .barra-buit {
  padding: 14px; color: var(--text-faint); font-size: var(--t-meta);
}
.nexe-barra .barra-noti {
  display: block; padding: 10px 14px; border-bottom: 1px solid var(--border);
  color: var(--text); text-decoration: none; font-size: var(--t-meta);
}
.nexe-barra a.barra-noti:hover { background: var(--primary-soft); }
.nexe-barra .barra-noti.nova { border-left: 3px solid var(--primary); }
.nexe-barra .barra-noti .t { font-weight: 600; }
.nexe-barra .barra-noti .m { color: var(--text-soft); }
.nexe-barra .barra-noti .m.mal { color: var(--error); }
.nexe-barra .barra-noti .q { color: var(--text-faint); font-size: var(--t-micro); }

@media (max-width: 820px) {
  .nexe-barra header.cap .wrap { flex-wrap: wrap; gap: 12px; }
  .nexe-barra .barra-panell { position: fixed; left: 16px; right: 16px;
    top: 60px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nexe-barra * { transition: none !important; }
}

/* ========================================================== */
/* MENÚS: EL DE DALT I EL DE CADA PESTANYA, IGUALS (0.18.0)   */
/* ========================================================== */
/* Mateixa lletra (13 px), mateix color i la mateixa marca de «hi som»: el
   subratllat del color del tema a la vora de baix de la franja. Abans el de
   dalt era una píndola grisa i el de sota un subratllat, amb lletres de
   mides diferents. Tot amb .nexe-barra/.nexe-marc al davant: guanya els
   :visited de qualsevol full. */
.nexe-barra header.cap { padding: 0 var(--marge-pagina); }
.nexe-barra header.cap .wrap { min-height: 56px; }
.nexe-marc .submenu-item, .nexe-marc .submenu-item:visited {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 0; background: none;
  border-top: 2px solid transparent; border-bottom: 2px solid transparent;
  color: var(--text-soft); font-size: var(--t-meta); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out);
}
.nexe-marc .submenu-item:hover, .nexe-marc .submenu-item:hover:visited {
  color: var(--text); background: none;
}
.nexe-marc .submenu-item.actiu, .nexe-marc .submenu-item.actiu:visited {
  color: var(--text); background: none; border-bottom-color: var(--area, var(--primary));
}

/* ---- el submenú de la pestanya ---- */
.nexe-marc {
  font-family: var(--lletra);
  line-height: 1.5; color: var(--text);
}
.nexe-marc *, .nexe-marc *::before, .nexe-marc *::after { box-sizing: border-box; }
.submenu.nexe-marc { background: var(--surface); border-bottom: 1px solid var(--border); }
.submenu .wrap {
  max-width: var(--amplada-pagina); margin: 0 auto; padding: 0 var(--marge-pagina);
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.submenu .wrap::-webkit-scrollbar { display: none; }
.nexe-marc .submenu-item { height: 46px; flex: none; }
.nexe-marc .submenu-item .icona { width: 16px; height: 16px; flex: none;
  color: var(--text-faint); transition: color var(--d-hover) var(--ease-out); }
.nexe-marc .submenu-item:hover .icona,
.nexe-marc .submenu-item.actiu .icona { color: var(--area, var(--text)); }
/* el comptador d'una pestanya del submenú és un .comptador */
/* buit, ja ocupa el seu lloc (sense veure's): el número arriba després pel
   JavaScript i, si no, la pestanya s'eixamplava i tot el submenú es movia */
.submenu-comptador:empty { visibility: hidden; }

/* ---- la capçalera de la pàgina: «ÀUDIO · PLAYER» ---- */
.pagina-cap .wrap {
  max-width: var(--amplada-pagina); margin: 0 auto; padding: 18px var(--marge-pagina) 0;
  display: flex; align-items: center; gap: 16px; min-height: 58px;
}
/* la mateixa alçada a totes les pàgines, hi hagi botons a la dreta o no:
   el títol cau sempre a la mateixa ratlla */
.pagina-accions { min-height: 40px; }
.nexe-marc .pagina-titol {
  margin: 0; flex: 1; font-size: var(--t-micro); font-weight: 400;
  line-height: 1.4; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint);
}
.nexe-marc .pagina-titol .pt-seccio { color: var(--text); font-weight: 700; }
.pagina-accions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pagina-accions select { width: auto; min-width: 200px; }
.pagina-extres { display: flex; justify-content: flex-end; gap: 8px;
  align-items: center; margin-bottom: 12px; }

/* ---- el peu: la signatura (Config → General i mòduls) ---- */
.nexe-peu .wrap {
  max-width: var(--amplada-pagina); margin: 0 auto;
  padding: 20px var(--marge-pagina) 24px; font-size: var(--t-micro);
  color: var(--text-faint); text-align: right;
}
.nexe-peu[data-alinea="esquerra"] .wrap { text-align: left; }
.nexe-peu[data-alinea="centre"] .wrap { text-align: center; }

@media (max-width: 820px) {
  .nexe-barra header.cap { padding-top: 10px; padding-bottom: 10px; }
  .nexe-barra header.cap .wrap { min-height: 0; }
  .nexe-marc .submenu-item { height: 44px; padding: 0 10px; }
}

/* ---- «Més ▾»: les entrades que no hi caben (barra.js) ---- */
.submenu nav.amb-mes { overflow: visible; flex-wrap: nowrap; }
.submenu nav > .submenu-item[hidden],
.menu-mes[hidden] { display: none !important; }
.menu-mes { position: relative; display: flex; align-items: stretch; flex: none; }
.nexe-barra button.menu-mes-boto, .nexe-marc button.menu-mes-boto,
.nexe-barra button.menu-mes-boto:hover, .nexe-marc button.menu-mes-boto:hover {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 12px;
  background: none; border: 0; border-top: 2px solid transparent;
  border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  color: var(--text-soft); font: inherit; font-size: var(--t-meta);
  font-weight: 500; cursor: pointer;
}
.nexe-barra button.menu-mes-boto:hover, .nexe-marc button.menu-mes-boto:hover,
.nexe-barra button.menu-mes-boto[aria-expanded="true"],
.nexe-marc button.menu-mes-boto[aria-expanded="true"] { color: var(--text); background: none; }
.menu-mes-boto.actiu { color: var(--text); border-bottom-color: var(--primary); }
.menu-mes-panell {
  position: absolute; right: 0; top: 100%; z-index: var(--z-desplegable); min-width: 220px;
  max-height: 70vh; overflow-y: auto; padding: 6px 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-carta);
  box-shadow: var(--ombra-panell);
}
.menu-mes-panell .menu-mes-opcio, .menu-mes-panell .menu-mes-opcio:visited {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  color: var(--text); text-decoration: none; font-size: var(--t-meta);
  white-space: nowrap; border-left: 2px solid transparent;
}
.menu-mes-panell .menu-mes-opcio .icona { width: 16px; height: 16px; color: var(--text-faint); }
.menu-mes-panell .menu-mes-opcio:hover { background: var(--surface-2); }
.menu-mes-panell .menu-mes-opcio.actiu { border-left-color: var(--primary); font-weight: 600; }

/* ---- tema clar / tema fosc, al menú d'usuari ---- */
.nexe-barra .barra-tema { margin: 0; border-top: 1px solid var(--border); }
.nexe-barra button.barra-opcio-boto, .nexe-barra button.barra-opcio-boto:hover {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  font: inherit; font-size: var(--t-meta); text-align: left; cursor: pointer;
  color: var(--text); padding: 10px 14px;
}
.nexe-barra button.barra-opcio-boto:hover { background: var(--primary-soft); color: var(--primary); }
.nexe-barra button.barra-opcio-boto .icona { color: var(--text-soft); }

/* ---- moviment dels desplegables i de les finestres (0.21.0) ----
   Abans apareixien de cop. Ara neixen del botó que els obre (d'aquí el
   transform-origin): 150 ms d'entrada, 100 de sortida, només opacitat i
   una escala mínima (res que mogui el contingut de la pàgina). Amb
   @starting-style l'entrada funciona encara que vinguin de display:none; la
   sortida, als navegadors que ho saben fer (allow-discrete); als altres,
   desapareixen com abans. Moviment reduït: res (vegeu el final). */
.nexe-barra .barra-panell, .menu-mes-panell {
  transform-origin: top right;
  transition: opacity var(--d-surt) var(--ease-out),
              transform var(--d-surt) var(--ease-out),
              display var(--d-surt) allow-discrete;
}
.nexe-barra .barra-panell:not([hidden]), .menu-mes-panell:not([hidden]) {
  transition-duration: var(--d-entra);
}
.nexe-barra .barra-panell[hidden], .menu-mes-panell[hidden] {
  display: none; opacity: 0; transform: scale(.97) translateY(-4px);
}
@starting-style {
  .nexe-barra .barra-panell:not([hidden]), .menu-mes-panell:not([hidden]) {
    opacity: 0; transform: scale(.97) translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nexe-barra .barra-panell, .menu-mes-panell {
    transition: none; transform: none;
  }
}

/* ---- «Salta al contingut»: el primer que troba qui va amb el teclat ---- */
.salta {
  position: absolute; left: 12px; top: -48px; z-index: var(--z-avis);
  padding: 8px 14px; border-radius: var(--r-control); font: 600 var(--t-meta, 13px)/1.4 var(--lletra);
  background: var(--primary); color: var(--primary-text); text-decoration: none;
  transition: top var(--d-entra) var(--ease-out);
}
.salta:focus { top: 8px; }
#contingut:focus { outline: none; }

/* ---- les icones (nucli/icones.py) dins del text: a l'alçada de la lletra,
   del color del text. Substitueixen els emojis (0.22.0). ---- */
svg.icona { display: inline-block; vertical-align: -0.2em; flex: none; }
:is(button, .boto, .boto-primari, .boto-petit, .boto-perill,
    .estat, h2, h3) > svg.icona { vertical-align: -0.18em; }

/* ========================================================== */
/* EL PORTAL: llançador, marca, mòdul actual, cerca i antena  */
/* ========================================================== */
/* nucli 0.27.0 (opció C del redisseny). En lloc de tretze pestanyes, la
   barra porta el llançador (els quadrets), la marca NEXE RÀDIO, el mòdul on
   som amb la seva icona de l'àrea, la cerca (Ctrl K) i què hi ha en antena. */
.nexe-barra header.cap .wrap { gap: 14px; }
.nexe-barra .logo { flex: none; color: var(--text); }
.nexe-barra svg.logo-marca { height: 26px; width: auto; display: block; }
.nexe-barra .barra-sep { width: 1px; height: 24px; background: var(--border); flex: none; }

/* el botó dels quadrets */
.nexe-barra .llancador-boto { border-color: var(--border); background: var(--surface-2); color: var(--text); }
.nexe-barra .llancador-boto[aria-expanded="true"] { background: var(--primary); border-color: var(--primary);
  color: var(--primary-text); }
.nexe-barra .quadrets { display: grid; grid-template-columns: repeat(3, 4px); gap: 3px; }
.nexe-barra .quadrets i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; }

/* el mòdul on som */
.nexe-barra .barra-on, .nexe-barra .barra-on:visited {
  display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--t-body);
}
.nexe-barra .barra-on svg.on-icona { width: 12px; height: 12px; color: var(--area); flex: none;
  align-self: flex-end; margin-bottom: 4px; stroke-width: 2.4; }
.nexe-barra .barra-on { gap: 6px; }
.nexe-barra .barra-on:hover span { color: var(--area); }

/* la cerca: obre el llançador amb el cursor a la caixa */
.nexe-barra button.barra-cerca {
  display: flex; align-items: center; gap: 10px; margin: 0 auto;
  height: 36px; width: 420px; max-width: 32vw; padding: 0 10px 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-carta); background: var(--surface-2);
  color: var(--text-soft); font: inherit; font-size: var(--t-meta); cursor: pointer;
  box-shadow: none;
}
.nexe-barra button.barra-cerca:hover { border-color: var(--text-faint); color: var(--text); background: var(--surface-2); }
.nexe-barra .barra-cerca span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nexe-barra kbd { font: inherit; font-size: var(--t-micro); padding: 0 6px; border: 1px solid var(--border);
  border-radius: var(--r-petit); color: var(--text-faint); background: var(--surface); }

/* en antena */
.nexe-barra .barra-antena, .nexe-barra .barra-antena:visited {
  display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 260px;
  color: var(--text); text-decoration: none; font-size: var(--t-meta); font-weight: 600;
}
.nexe-barra .barra-antena .estat-antena, .estat-antena.etiqueta-antena {
  padding: 2px 7px; border-radius: var(--r-petit); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; }
.nexe-barra .antena-prog { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nexe-barra .barra-icones { margin-left: 0; }

/* el panell del llançador */
.nexe-barra .barra-panell.llancador-panell {
  left: 0; right: auto; width: 1080px; max-width: calc(100vw - 2 * var(--marge-pagina));
  max-height: calc(100vh - 80px); padding: 16px; transform-origin: top left;
  display: flex; flex-direction: column; gap: 16px;
}
.nexe-barra .barra-panell.llancador-panell[hidden] { display: none; }
.nexe-barra .llancador-cerca {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-carta); background: var(--surface-2); color: var(--text-soft);
}
.nexe-barra .llancador-cerca input, .nexe-barra .llancador-cerca input:focus {
  flex: 1; height: 40px; border: 0; background: none; box-shadow: none; outline: none; padding: 0;
  font: inherit; font-size: var(--t-body); color: var(--text);
}
.nexe-barra .llancador-cerca:focus-within { border-color: var(--primary); }
.nexe-barra .llancador-arees { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.nexe-barra .area-titol {
  display: flex; align-items: center; gap: 8px; padding: 0 8px 8px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-soft);
}
.nexe-barra .llancador-area .area-titol::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--area); }
.nexe-barra .llancador-app, .nexe-barra .llancador-app:visited {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border-radius: var(--r-carta);
  color: var(--text); text-decoration: none; font-size: var(--t-body); font-weight: 500;
}
.nexe-barra .llancador-app:hover, .nexe-barra .llancador-app:focus-visible { background: var(--surface-2); }
.nexe-barra .llancador-app[aria-current="page"] { background: color-mix(in srgb, var(--area) 12%, transparent); font-weight: 600; }
.nexe-barra .llancador-app svg.app-icona { height: 28px; width: auto; color: var(--area); flex: none; }
/* els avisos d'una app del llançador: un .comptador.comptador-alarma a la dreta */
.nexe-barra .app-avisos { margin-left: auto; }
.nexe-barra .llancador-resultats { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.nexe-barra .llancador-resultat, .nexe-barra .llancador-resultat:visited {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--r-carta);
  color: var(--text); text-decoration: none; font-size: var(--t-body);
}
.nexe-barra .llancador-resultat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--area); flex: none; }
.nexe-barra .llancador-resultat small { color: var(--text-faint); font-size: var(--t-meta); }
.nexe-barra .llancador-resultat:hover, .nexe-barra .llancador-resultat:focus-visible,
.nexe-barra .llancador-resultat.tria { background: var(--surface-2); outline: none; }
.nexe-barra .llancador-buit { padding: 10px; color: var(--text-faint); font-size: var(--t-meta); }
.nexe-barra .llancador-recents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border-soft); }
.nexe-barra .llancador-recents .area-titol { padding: 0 6px 0 0; }
.nexe-barra .recents-llista { display: flex; flex-wrap: wrap; gap: 8px; }
.nexe-barra .recents-llista a, .nexe-barra .recents-llista a:visited {
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-carta);
  border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: var(--t-meta);
}
.nexe-barra .recents-llista a:hover { border-color: var(--text-faint); }

/* pantalles més estretes: primer marxa el text de la cerca, després l'antena */
@media (max-width: 1280px) { .nexe-barra .barra-antena { display: none; } }
@media (max-width: 1100px) {
  .nexe-barra button.barra-cerca { width: auto; max-width: none; margin-left: auto; }
  .nexe-barra .barra-cerca span, .nexe-barra .barra-cerca kbd { display: none; }
  .nexe-barra .llancador-arees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .nexe-barra header.cap .wrap { flex-wrap: nowrap; gap: 10px; }
  .nexe-barra svg.logo-marca { height: 20px; }
  .nexe-barra .barra-sep { display: none; }
  .nexe-barra .barra-on span { display: none; }
  .nexe-barra .barra-panell.llancador-panell { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; max-width: none; }
  .nexe-barra .llancador-arees { grid-template-columns: 1fr; }
}