/* ===========================================================================
   vmixcall.css - el poc que Tabler no porta de sèrie
   ---------------------------------------------------------------------------
   Tot el gruix del disseny ve de vendor/tabler.min.css. Aquí només hi ha el
   xat (bombolles), la pàgina de la trucada i quatre retocs. Si una cosa es pot
   fer amb una classe de Tabler, es fa amb Tabler i no s'escriu aquí.
   =========================================================================== */

/* --- la mida de tot: un punt més petit ------------------------------------
   Un sol comandament, i tot el que ve darrere el segueix: Tabler ho mesura
   TOT en rem (les lletres, els botons, el gruix de les targetes, les
   separacions), o sigui que baixar l'arrel de 16 a 15 px encongeix el conjunt
   sense trencar cap proporció. Sobre això, dos retocs a mà:
     · el text de lectura es queda a ~14 px, que és on es llegeix bé;
     · els títols de targeta baixen a la mida del text i guanyen pes i una
       mica de tracking negatiu -- pesen per la lletra, no per la mida.
   Si algun dia es vol tornar enrere, es canvia el 15px i prou. */
:root { font-size: 15px; }
body { font-size: .9375rem; }               /* ≈14 px de lectura */

.card-title {
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.card-header { --tblr-card-cap-padding-y: .75rem; }
.card-body   { --tblr-card-spacer-y: .875rem; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { letter-spacing: -.015em; }

/* NORMA DELS BOTONS PETITS (btn-sm): nomes dins de FILES DE TAULA i de
   capcaleres de targeta, on la densitat ho demana -- historial, usuaris,
   seguretat, les files dels endolls. Els botons de peu de targeta i els
   d'accio principal van a la mida normal. Aixo es el que feia que la
   pantalla d'Escenes sembles d'una altra mida que la d'Estudi.
   Els botons, ajustats a la lletra nova: una mica menys de coixí vertical
   perquè no quedin inflats al costat dels camps. */
.btn { --tblr-btn-padding-y: .4375rem; }
.btn-sm { --tblr-btn-padding-y: .25rem; }
.form-label { font-size: .8125rem; font-weight: 600; margin-bottom: .25rem; }
.form-hint { font-size: .8125rem; }

/* Les capçaleres de taula, petites i en versaletes: es distingeixen de les
   dades sense necessitat de gruix ni de línies. */
.table thead th {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tblr-secondary);
}

/* --- els quatre colors que Tabler no ens dona ---------------------------- */
/* El negre de la pantalla de la trucada. Estava escrit sis vegades a mà per
   aquí sota, i n'hi havia prou que se n'escapés un perquè la barra i el fons
   no fossin ben bé el mateix negre. */
:root {
  --vmx-fosc: #12181f;
  --vmx-fosc-clar: #1a222c;
  --vmx-fosc-vora: #2b3542;
  --vmx-fosc-text: #f8fafc;
  --vmx-fosc-text-suau: #cbd5e1;
}

/* --- la pell: profunditat, vores i el pes de cada cosa --------------------
   Tabler ve amb targetes planes i una vora grisa; el panell s'hi passa hores
   i es nota si les coses tenen el seu lloc. Ombres TENYIDES del blau fosc del
   text (no negre pur, que embruta), vora més fina i un sol moment de moviment
   a tota la interfície: el botó d'escena, que és el que es prem en directe. */
.card {
  --tblr-card-border-color: rgba(24, 36, 51, .10);
  box-shadow: 0 1px 2px rgba(24, 36, 51, .05),
              0 8px 20px -12px rgba(24, 36, 51, .18);
}
.card-header { background: transparent; }
.navbar { box-shadow: 0 1px 0 rgba(24, 36, 51, .08); }

.escena-boto {
  transition: transform .12s cubic-bezier(.2, .8, .2, 1),
              box-shadow .12s cubic-bezier(.2, .8, .2, 1);
}
.escena-boto:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(24, 36, 51, .35);
}
.escena-boto:active:not(:disabled) { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .escena-boto { transition: none; }
}

/* --- l'aparell que ara mateix no contesta (1.61.0) ------------------------ */
/* Mentre dura el marge de gràcia -- el vMix carregant un preset, posem --
   tota la targeta es queda GRISA i una mica apagada. Es veu d'una ullada que
   allò no s'està refrescant, sense cap alerta al cos ni res que cridi: el que
   hi ha escrit segueix sent l'última cosa que en sabem, i quan torna a
   contestar es desperta sola. */
.ap-esperant {
  filter: grayscale(1);
  opacity: .62;
  transition: opacity .25s ease, filter .25s ease;
}
.ap-esperant .card-header { background: var(--tblr-bg-surface-secondary, #f6f8fb); }
@media (prefers-reduced-motion: reduce) {
  .ap-esperant { transition: none; }
}

/* Els avisos, sense el filet gruixut de color: un fons suau i el text ja
   diuen prou. */
.alert { border-width: 1px; }

/* --- xat: fil i bombolles ------------------------------------------------ */
.xat-fil {
  display: grid;
  gap: .5rem;
  max-height: 15rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
.xat-fil:empty { display: none; }

.bombolla {
  max-width: 85%;
  padding: .5rem .75rem;
  border-radius: var(--tblr-border-radius-lg);
  line-height: 1.45;
  font-size: .875rem;
  border: 1px solid var(--tblr-border-color);
  background: var(--tblr-bg-surface);
}
.bombolla p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bombolla .qui {
  display: block;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .125rem;
}
.bombolla.estudi { justify-self: start; border-bottom-left-radius: 4px; }
.bombolla.auto {
  justify-self: start;
  border-bottom-left-radius: 4px;
  background: var(--tblr-bg-surface-secondary);
  border-style: dashed;
}
.bombolla.oient {
  justify-self: end;
  border-bottom-right-radius: 4px;
  background: var(--tblr-primary-lt);
  border-color: transparent;
}

/* El globus de missatges pendents damunt del botó de xat del panell */
.xat-globus {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .3rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--tblr-danger);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}

/* --- portada pública ----------------------------------------------------- */
.marca-punt { width: 3.5rem; height: 3.5rem; }

/* --- la pàgina de la trucada --------------------------------------------- */
/* Ocupa tota la finestra: el marc de la trucada ha de ser el protagonista i
   no ha de fer mai barra de desplaçament. */
.pagina-trucada {
  margin: 0;
  /* 100vh primer com a xarxa per als Safari vells; el dvh mana on existeix
     (iOS 15.4+) i descompta la barra d'adreces que puja i baixa. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--vmx-fosc);
  color: var(--vmx-fosc-text);
}
.barra-trucada {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .75rem;
  background: var(--vmx-fosc-clar);
  border-bottom: 1px solid var(--vmx-fosc-vora);
}
.barra-trucada .btn { color: var(--vmx-fosc-text-suau); border-color: var(--vmx-fosc-vora); }
#marc-trucada {
  flex: 1 1 auto;
  /* Sense min-height:0, un fill flex no pot encongir per sota del seu
     contingut, i el Safari d'iOS dona als marcs l'alçada del contingut:
     la pàgina sencera es desbordava en lloc d'omplir la finestra. */
  min-height: 0;
  width: 100%;
  border: 0;
  display: block;
  background: var(--vmx-fosc);
}
.avis-trucada { flex: 0 0 auto; padding: .35rem .75rem; text-align: center; }

/* --- registre de seguretat ----------------------------------------------- */
.registre-scroll { max-height: 26rem; overflow-y: auto; }

/* --- retocs menors ------------------------------------------------------- */
/* Els botons i els camps que van de costat, a la mateixa alçada exacta. */
.input-group > .btn { display: inline-flex; align-items: center; }
.card-title .icon { vertical-align: text-bottom; }

/* --- logos (emissora, dia de partit…) ------------------------------------ */
/* Alçada fixa i amplada lliure: així un logo apaïsat i un de quadrat queden
   igual de grossos a la vista, que és el que compara l'ull. */
.logo-portada { height: 4.5rem; width: auto; max-width: 100%; object-fit: contain; }
.logo-login   { height: 3rem;   width: auto; max-width: 100%; object-fit: contain; }
.logo-barra   { height: 1.75rem; width: auto; object-fit: contain; }

/* --- la mediateca -------------------------------------------------------- */
/* El quadre que ensenya la imatge triada. Fons a quadres perque un logo amb
   transparencia sobre blanc no es veu, i el que importa es veure'l tal com
   es. */
.media-mostra {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25rem;
  border: 1px dashed var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #f1f3f5 25%, transparent 25%, transparent 75%, #f1f3f5 75%),
    linear-gradient(45deg, #f1f3f5 25%, transparent 25%, transparent 75%, #f1f3f5 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  color: var(--tblr-secondary);
  font-size: .8125rem;
  cursor: pointer;
  overflow: hidden;
}
.media-mostra:hover { border-color: var(--tblr-primary); }
.media-mostra img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Les mides, per CLASSE. En linia no serveixen: la CSP del panell
   (style-src 'self') es menja qualsevol style= i el quadre creixia fins a
   l'amplada de la columna. */
.media-xs    { width: 60px;  height: 40px; }
.media-sm    { width: 90px;  height: 60px; }
.media-md    { width: 120px; height: 80px; }
.media-ample { width: 100%;  height: 4.5rem; }

.media-dialeg {
  width: min(60rem, 94vw);
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--tblr-border-radius);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
  overflow: hidden;
}
.media-dialeg::backdrop { background: rgba(0, 0, 0, .55); }
.media-cap, .media-peu {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--tblr-bg-surface);
}
.media-cap { border-bottom: 1px solid var(--tblr-border-color); }
.media-peu { border-top: 1px solid var(--tblr-border-color); }
.media-avis { padding: .5rem 1rem 0; font-size: .875rem; }
.media-graella {
  display: grid;
  /* 1.48.0: 8.5rem = SIS per fila a la finestra de 60rem (abans en cabien
     set i les miniatures quedaven massa petites per reconeixer un logo).
     Si la finestra es mes estreta, l'auto-fill ja en posa menys. */
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: .75rem;
  padding: 1rem;
  overflow-y: auto;
  max-height: 60vh;
}
.media-fitxa {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .35rem;
  border: 2px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: #fff;
  cursor: pointer;
  text-align: center;
}
.media-fitxa img {
  width: 100%;
  height: 5rem;
  object-fit: contain;
  background-image:
    linear-gradient(45deg, #f1f3f5 25%, transparent 25%, transparent 75%, #f1f3f5 75%),
    linear-gradient(45deg, #f1f3f5 25%, transparent 25%, transparent 75%, #f1f3f5 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.media-fitxa.triada { border-color: var(--tblr-primary); }
.media-peu-fitxa { font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- els botons d'escena de la portada ----------------------------------- */
/* Tots iguals: la imatge a DALT (180x120, sencera i sense deformar-se:
   contain, no cover) i el nom a BAIX, dins del mateix boto. Les que no tenen
   imatge fan exactament la mateixa mida amb el nom al mig del forat -- si
   no, la filera queda com una dentadura. */
/* 1.69.0: més petits. Ocupaven massa alçada a la portada, que és on es
   mira tot d'un cop d'ull. 180x120 -> 128x72 (16:9, la proporció d'una
   captura de programa) i el nom amb la lletra més petita. */
.escena-boto {
  width: 128px;
  padding: 0;
  overflow: hidden;
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  display: inline-flex;
  flex-direction: column;
}
.escena-imatge {
  width: 128px;
  height: 72px;
  flex: 0 0 72px;              /* la imatge mai no es menja el nom */
  object-fit: contain;         /* sencera i proporcionada, mai retallada */
  display: block;
  background: var(--tblr-bg-surface-secondary);
}
.escena-buida {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  font-weight: 600;
  color: var(--tblr-secondary);
  background: var(--tblr-bg-surface-secondary);
}
.escena-nom {
  display: block;
  padding: .25rem .35rem;
  font-size: .75rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
/* 1.69.0: l'última escena aplicada ja no va sota els botons ocupant una
   fila per ella sola -- va al costat del títol «Escenes», petita i
   apagada, que és on molesta menys i s'entén igual. */
/* 1.84.0: el títol i l'«Última: ...», junts i a la mateixa línia de base.
   El min-width:0 és el que permet que la línia de sota s'encongeixi dins del
   flex (sense això, un flex item no baixa mai per sota del seu contingut i
   el text llarg empenyeria el botó de plegar fora de la capçalera). */
.escenes-cap { min-width: 0; }

.escenes-darrera {
  font-size: .75rem;
  color: var(--tblr-secondary);
  opacity: .75;
  font-weight: 400;
  /* 1.84.0: ara viu dins d'una caixa flex al costat del títol (per anar a la
     mateixa línia de base). El text és llarg -- «Última: «RÀDIO CAPITAL»,
     21/8/2026 23:35:57 · Ràdio Capital» -- i sense això, en pantalla
     estreta, empenyeria el botó de plegar fora de la capçalera. El títol
     mai s'encongeix; el que cedeix és aquesta línia. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- el que dibuixa el navegador i no cap full d'estil -------------------- */
/* La selecció de text, el cursor i la barra de desplaçament venen de fàbrica i
   no s'assemblen a res del panell. Són quatre línies i es nota. */
::selection { background: var(--tblr-primary-lt); color: var(--tblr-body-color); }
:root { caret-color: var(--tblr-primary); scrollbar-color: #c5ccd6 transparent; }
/* El focus del teclat: el mateix a tot arreu i sempre visible (a Aparells i a
   Escenes s'hi treballa a cop de tabulador). */
:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 2px;
  border-radius: var(--tblr-border-radius);
}
/* Els números de les taules (durades, minuts, comptadors), de la mateixa
   amplada: així les columnes no ballen d'una fila a l'altra. */
.table td, .h1, .badge { font-variant-numeric: tabular-nums; }

/* --- barra de desar enganxada a baix (Aparells) --------------------------- */
/* La pagina es llarga i el boto quedava massa avall: aixi el tens sempre a
   la vista i, amb canvis pendents, s'encen. */
.barra-desar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  box-shadow: 0 -.25rem .75rem rgba(0, 0, 0, .06);
}
.barra-desar.te-canvis {
  border-color: var(--tblr-warning);
  /* OJO: --tblr-warning-lt en aquesta versio de Tabler es
     color-mix(... 10%, transparent), o sigui gairebe transparent, i com que la
     barra es sticky i se solapa amb el contingut en fer scroll, es veia
     translucida. Barregem el warning contra la SUPERFICIE opaca (que ja
     s'adapta a clar/fosc), aixi queda opaca i tenyida en tots dos temes. */
  background: #fff4dd;
  background: color-mix(in oklab, var(--tblr-warning) 14%, var(--tblr-bg-surface));
}
.barra-desar.te-canvis #barra-desar-text { color: var(--tblr-body-color); font-weight: 600; }

/* --- amplades i retalls que abans anaven en style= ------------------------ */
/* La CSP diu style-src 'self': els estils EN LINIA no s'apliquen mai. Tot el
   que abans era style="max-width:..." viu aqui. */
.ampl-5   { max-width: 5rem; }
.ampl-8   { max-width: 8rem; }
.ampl-9   { max-width: 9rem; }
.ampl-12  { max-width: 12rem; }
.ampl-16  { max-width: 16rem; }
.ampl-22  { max-width: 22rem; }
.ampl-34  { max-width: 34rem; }
.text-cru { white-space: pre-wrap; }
/* Els noms de les sortides del vMix, tots iguals: aixi els desplegables de
   les sis files comencen a la mateixa columna (1.50.0). */
.ampl-sortida { flex: 0 0 9.5rem; max-width: 9.5rem; }

/* --- capçalera de pàgina en una sola línia -------------------------------- */
/* Tot amb la lletra petita del «Control d'estudi»; el nom de la pàgina, del
   mateix cos però amb més pes i en color de text, per saber on ets d'un cop
   d'ull sense menjar-se mitja pantalla. */
/* El MATEIX aire a sobre i a sota de la línia: Tabler hi posava un padding
   sencer de pàgina (1,5 rem) a dalt i el cos en tornava a posar un altre a
   baix, i quedava descompensat. Mig rem i prou, a banda i banda. */
.page-header-linia { margin-block: .5rem 0; }
.page-body { margin-top: .5rem; }
/* El .page-header de Tabler porta el seu propi marge de dalt: es rebaixa a
   mig rem. L'ALÇADA MÍNIMA es queda (2,25 rem, la d'un botó): és el que fa
   que la franja sigui IGUAL a totes les pàgines, tinguin botó a la dreta
   (Escenes, amb «Escena nova») o no en tinguin (Estudi). Sense això, la
   d'Estudi quedava arrapada al contingut i la d'Escenes no. */
.page-header.page-header-linia { margin-top: .5rem; min-height: 2.25rem; }
.page-header-linia .page-pretitle { line-height: 1.6; }
.page-header-linia .titol-pagina {
  color: var(--tblr-body-color);
  font-weight: 600;
}
.page-header-linia a { text-decoration: none; }
.page-header-linia a:hover { text-decoration: underline; }

/* El nom de la trucada (VCALL1) es curt: que no es mengi l'espai de
   l'enllac, que es el que de veritat s'ha de poder llegir. */
.ran-nom { flex: 0 0 8rem; max-width: 8rem; }

/* --- la fitxa de cada escena a la llista --------------------------------- */
.escena-fitxa-foto {
  width: 90px;
  height: 60px;
  flex: 0 0 90px;
  object-fit: contain;
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius) 0 0 var(--tblr-border-radius);
}

/* --- botons d'icona del VLC (pantalla completa i bucle) ------------------ */
/* Tres estats clars: apagat (gris), en blau si esta actiu. El bucle de video
   i el de llista son DUES icones diferents (la de video porta l'1 a dins). */
/* Un botó que NOMÉS és una icona.
   Tabler dona a `.btn .icon` un marge pensat per a «icona + text» (negatiu a
   l'esquerra, positiu a la dreta) i un `min-width`: en un botó sense text
   això DESCENTRA el dibuix, que és el que passava a les fletxes d'ordenar
   les escenes. Aquí es treu el marge i es centra de debò. */
.btn-icona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  line-height: 1;
}
.btn-icona .icon,
.btn-icona svg {
  display: block;
  margin: 0;
  min-width: 0;
}
.btn-sm.btn-icona { width: 2rem; height: 2rem; }
.btn-icona.actiu {
  color: #fff;
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

/* --- avis quan la trucada no pot anar dins del marc ---------------------- */
.avis-insegur {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}
.avis-insegur .card { color: var(--tblr-body-color); }

/* --- avis de permis del microfon a la pagina de la trucada --------------- */
.avis-permis {
  flex: 0 0 auto;
  padding: .6rem .75rem;
  background: var(--tblr-danger);
  color: #fff;
  text-align: center;
  font-size: .875rem;
}

/* --- "gira el mobil" a la pagina de la trucada --------------------------- */
/* Nomes en pantalles tactils i en vertical: en un ordinador amb la finestra
   estreta no hi pinta res. El marc es queda carregat a sota; nomes el tapem. */
.gira-mobil { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .gira-mobil {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: 2rem;
    text-align: center;
    background: var(--vmx-fosc);
    color: var(--vmx-fosc-text);
  }
  .gira-icona { animation: gira 2s ease-in-out infinite; }
  @keyframes gira {
    0%, 40% { transform: rotate(0deg); }
    60%, 100% { transform: rotate(-90deg); }
  }
}

/* El logo del directe es veu sobre negre: al tastet, s'ensenya igual. */
.media-mostra.sobre-fosc {
  background: var(--vmx-fosc);
  background-image: none;
}

/* --- vumetre del vMix ---------------------------------------------------- */
/* El llenc del vumetre. Aixo anava a l'atribut style i la CSP se'l menjava:
   el canvas sortia amb els seus 300 px de fabrica en lloc d'omplir la
   targeta. */
.vmix-vu {
  width: 100%;
  height: 30px;
  display: block;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
}
.vmix-caixa {
  padding: .6rem .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
}
/* (el vúmetre es pinta amb estils propis des del javascript: així no depèn
   d'aquest fitxer i, si mai arribés vell, sortiria buit i no ple.) */

/* --- missatge fix de l'estudi, a la pantalla de la trucada --------------- */
.avis-estudi {
  flex: 0 0 auto;
  padding: .6rem .9rem;
  background: var(--tblr-primary);
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}

/* 1.66.0: pujada de vídeos i selector de miniatures del vMix.
   Van per CLASSE i no amb style= perquè la CSP no admet estils en línia
   (ho vigila el selftest). */
/* 1.72.0: el camp de triar fitxers omple el que queda fins al boto (com a
   la pantalla Estudi); el min-width: 0 li permet encongir-se dins del flex
   quan el nom del fitxer es llarg. */
.ap-fitxer { flex: 1 1 auto; min-width: 0; }
.ap-barra { height: 6px; }
.ap-barra-int { width: 0; }
.ap-amagat { display: none; }
.ap-mini {
  border-radius: 4px;
  background: #111;
  min-height: 40px;
}
.ap-tria {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 2px;
}
.ap-tria:hover { border-color: var(--tblr-primary, #206bc4); }
.ap-tria img {
  display: block;
  border-radius: 3px;
  background: #111;
}

/* 1.67.0: miniatures de PGM i preview del vMix a la pantalla Estudi.
   Van per classe perquè la CSP no admet style= (ho vigila el selftest). */
.vmix-mini {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  background: #111;
  margin-bottom: 4px;
}

/* 1.67.0: barra de progrés de la pujada des de la pantalla Estudi. */
.vlc-puja-barra { height: 6px; }

/* 1.70.0: el camp de triar fitxers ocupa tot el que queda fins al botó
   (abans es quedava curt, a 260 px, i deixava un forat a la dreta). El
   min-width: 0 és el que li permet ENCONGIR-SE dins del flex: sense
   això, un nom de fitxer llarg l'infla i empeny el botó fora. El botó
   va a la mateixa alçada perquè la filera és align-items: stretch. */
.vlc-puja-camp { flex: 1 1 auto; min-width: 0; }

/* 1.69.0: la miniatura arrenca amb el fons fosc i, quan n'arriba una de
   bona, es queda. Sense transició de color: el que es volia evitar és
   justament el pampallugueig. */
.vmix-mini.viva { background: transparent; }

/* 1.80.0: EL NOM DEL PLA, amb la mateixa lletra que el seu rètol («En
   antena», «En preview»). Abans el d'antena anava en negreta gran i el de
   preview en text normal: dues mides i dos pesos per a dues coses que són
   el mateix. Ara les quatre línies són iguals i el que les distingeix és
   el color, que ja n'hi ha prou. */
.vmix-pla { color: var(--tblr-body-color); font-weight: 600; }

/* 1.80.0: MARC A LA MINIATURA D'ANTENA quan s'està gravant o emetent. El
   que surt per aquella finestra està quedant enregistrat o sortint a fora:
   es veu d'una ullada, sense llegir res. El marc va per DINS (box-shadow
   inset) perquè no faci créixer la imatge ni mogui res de lloc. */
.vmix-mini.en-aire {
  /* 1.81.0: el doble de gruix. A 3 px la ratlla vermella quedava massa
     fina per veure-la d'una ullada des de l'altra punta de l'estudi, que
     és justament per al que hi és. */
  box-shadow: inset 0 0 0 6px var(--tblr-danger, #d63939);
  outline: 2px solid var(--tblr-danger, #d63939);
  outline-offset: 1px;
}

/* 1.76.0: cada videotrucada, amb la seva miniatura viva a l'esquerra i el
   nom, l'enllaç i la casella a la dreta. Tot per classe: la CSP no admet
   style= (ho vigila el selftest).

   La columna de la miniatura no s'encongeix (flex: 0 0 auto) i la de les
   dades sí (min-width: 0), que és el que evita que un enllaç llarg de vMix
   Call infli la filera i empenyi la miniatura fora de la targeta. */
.ran-fila {
  display: flex;
  gap: 12px;
  /* 1.79.0: stretch i no flex-start. Aixi la columna de la miniatura fa
     EXACTAMENT l'alcada del bloc de la dreta (el nom, l'enllac i la casella
     del pas automatic) i la filera queda quadrada. */
  align-items: stretch;
}
.ran-mini-cel {
  flex: 0 0 auto;
  width: 140px;
  display: flex;
  flex-direction: column;
}
.ran-dades { flex: 1 1 auto; min-width: 0; }
/* La miniatura OMPLE la cel·la: es deixa anar l'aspect-ratio (que la
   clavava a 16:9 i deixava un forat a sota) i mana l'alcada del text. El
   object-fit: cover ja evita que la imatge es deformi. */
.ran-mini {
  flex: 1 1 auto;
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  margin-bottom: 0;
}
/* Nomes a Aparells, on hi ha el boto de triar-la a sota. */
.ran-tria { margin-top: 6px; }
/* El requadre buit fa EXACTAMENT la mida de la miniatura: així la targeta no
   pega un bot quan se'n tria una (ni quan el vMix no contesta). */
.ran-mini-buida { border: 1px dashed rgba(255, 255, 255, .25); }
/* 1.79.0: els botons de GRAVAR i STREAM del vMix. REC a l'esquerra i STREAM
   a la dreta, un al costat de l'altre, a la dreta de la targeta i alineats
   amb el final del requadre.

   L'ESTIL EL POSA LA INTERFICIE, no aquest fitxer: apagats son
   .btn-outline-danger i en marxa .btn-danger, les mateixes classes que fa
   servir la resta del panell (btn-outline-danger es el de "Carregar el
   preset", que tambe es una accio delicada). Aqui nomes hi ha la
   col·locacio i el pilot que bategà. */
.vmix-marxa-cel {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.vmix-marxa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.vmix-marxa-punt { display: inline-flex; line-height: 1; }
/* El pilot batega NOMES mentre grava o emet: si bategués sempre, no voldria
   dir res. */
.vmix-marxa-punt.bategant { animation: vmix-bategar 1.4s ease-in-out infinite; }
@keyframes vmix-bategar {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
/* Qui tingui posat "menys moviment" al sistema, que no vegi res parpellejar. */
@media (prefers-reduced-motion: reduce) {
  .vmix-marxa-punt.bategant { animation: none; }
}
/* En pantalla estreta els dos botons passen a sota i s'reparteixen l'ample. */
@media (max-width: 575.98px) {
  .vmix-marxa-cel { width: 100%; }
  .vmix-marxa { flex: 1 1 0; justify-content: center; }
}

/* --- EL MENÚ EN PANTALLA ESTRETA (1.87.0) ---------------------------------
   Tota la feina de mostrar-lo i amagar-lo ja la fa Tabler: per sota de 768 px
   el menú només es veu amb la classe `show`, i a partir de 768 px es veu
   sempre i el botó de tres punts desapareix. Aquí només hi ha dues coses:
   quina icona surt al botó, i que el menú vagi PER SOBRE del contingut en
   lloc d'empènyer-lo avall -- com el calaix d'una app de mòbil. */
.navbar-toggler .menu-tanca { display: none; }
.navbar-toggler[aria-expanded="true"] .menu-obre { display: none; }
.navbar-toggler[aria-expanded="true"] .menu-tanca { display: inline-flex; }

@media (max-width: 767.98px) {
  /* La barra és sticky, o sigui que ja fa de referència: el menú s'hi penja a
     sota i ocupa tota l'amplada de la finestra. */
  #navbar-menu.show {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1035;
    padding: .25rem .75rem .5rem;
    background: var(--tblr-bg-surface, #fff);
    border-bottom: 1px solid var(--tblr-border-color, #dadfe5);
    box-shadow: 0 .5rem 1.5rem rgba(24, 36, 51, .18);
  }
  /* Prou alt per prémer-hi amb el dit sense encertar el del costat. */
  #navbar-menu.show .nav-link { padding: .65rem .25rem; }
}

.ran-tria, .ran-tria-cap {
  border: 1px solid var(--tblr-border-color, #dadfe5);
  background: transparent;
}
.ran-tria-cap { margin-top: 4px; }

/* En pantalla estreta la miniatura passa a dalt i ocupa tota l'amplada: a
   140 px al costat d'un mòbil no hi cabria res a la dreta. */
@media (max-width: 575.98px) {
  .ran-fila { flex-direction: column; }
  .ran-mini-cel { width: 100%; }
}

/* 1.94.0: Ordinadors (agents dels PCs del vMix i del VLC) */
.ord-estat dt { font-weight: 500; color: var(--tblr-secondary); }
.ord-estat dd { margin-bottom: .35rem; }
.ord-minuts { width: auto; }
.ord-plec { border-top: 1px solid var(--tblr-border-color); padding-top: .6rem; margin-top: .6rem; }
.ord-plec > summary { cursor: pointer; font-weight: 600; }
.ord-app { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.ord-app strong { min-width: 3.5rem; }
.ord-registre td { font-size: .85rem; }
.ord-compte .small { opacity: .9; }
/* tots els controls d'una fila d'accions, a la mateixa alçada */
.ord-accions .btn, .ord-accions .form-select, .ord-accions .form-control { height: 2.25rem; }
.ord-accions .btn { display: inline-flex; align-items: center; }