/* ---------------------------------------------------------------------------
   Pinganillo — estils propis
   Només el que Tabler no porta de sèrie. Tot amb variables de Tabler perquè
   el tema clar i el fosc funcionin sols.
   --------------------------------------------------------------------------- */

.pinganillo-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .35rem;
  background: var(--tblr-primary);
  color: #fff;
  font-size: 1rem;
}

/* -- Commutador de tema --------------------------------------------------- */
[data-bs-theme="light"] .icona-clar,
[data-bs-theme="dark"] .icona-fosc { display: none; }

/* -- Taula de trucades en directe ---------------------------------------- */
.taula-trucades td { vertical-align: middle; }

.taula-trucades tr.fila-nova {
  animation: entrada-fila 1.2s ease-out;
}

@keyframes entrada-fila {
  from { background-color: var(--tblr-success-lt); }
  to   { background-color: transparent; }
}

.taula-trucades tr.fila-acabada {
  opacity: .45;
  text-decoration: line-through;
  transition: opacity .6s ease;
}

.durada-viva {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* -- Diagrama de seqüència SIP ------------------------------------------- */
.diagrama-sip {
  --amplada-columna: 190px;
  overflow-x: auto;
  padding: 1rem .5rem;
}

.diagrama-sip table {
  border-collapse: collapse;
  min-width: 100%;
  font-size: .8125rem;
}

.diagrama-sip th {
  position: sticky;
  top: 0;
  background: var(--tblr-bg-surface);
  padding: .5rem .75rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--tblr-border-color);
  white-space: nowrap;
  z-index: 2;
}

.diagrama-sip td {
  padding: .35rem .5rem;
  border-bottom: 1px solid var(--tblr-border-color-light, var(--tblr-border-color));
}

.diagrama-sip .cel-temps {
  color: var(--tblr-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.fletxa-sip {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .5rem;
  border-radius: .3rem;
  background: var(--tblr-bg-surface-secondary);
  font-family: var(--tblr-font-monospace);
  white-space: nowrap;
}

.fletxa-sip.cap-a-la-dreta { flex-direction: row; }
.fletxa-sip.cap-a-l-esquerra { flex-direction: row-reverse; }

.fletxa-sip.resposta-correcta { background: var(--tblr-success-lt); color: var(--tblr-success); }
.fletxa-sip.resposta-provisional { background: var(--tblr-azure-lt); color: var(--tblr-azure); }
.fletxa-sip.resposta-error { background: var(--tblr-danger-lt); color: var(--tblr-danger); }
.fletxa-sip.peticio { background: var(--tblr-bg-surface-tertiary, var(--tblr-bg-surface-secondary)); }

/* -- Targeta de troballa de diagnòstic ------------------------------------ */
.troballa {
  border-left: .25rem solid var(--tblr-border-color);
  padding-left: .85rem;
}
.troballa.troballa-danger { border-left-color: var(--tblr-danger); }
.troballa.troballa-warning { border-left-color: var(--tblr-warning); }
.troballa.troballa-info { border-left-color: var(--tblr-info); }
.troballa.troballa-success { border-left-color: var(--tblr-success); }

.troballa ol { margin-bottom: 0; padding-left: 1.1rem; }
.troballa ol li { margin-bottom: .35rem; }

/* -- Camí de la trucada (rastrejador) ------------------------------------ */
.grao-cami {
  display: flex;
  gap: .9rem;
  padding-bottom: 1.25rem;
  position: relative;
}

.grao-cami:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 2.4rem;
  bottom: 0;
  width: 2px;
  background: var(--tblr-border-color);
}

.grao-icona {
  flex: 0 0 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  z-index: 1;
}

/* -- Mesurador d'àudio de l'escolta -------------------------------------- */
.mesurador-audio {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3rem;
}

.mesurador-audio span {
  flex: 1;
  background: var(--tblr-primary);
  border-radius: 1px;
  min-height: 2px;
  transition: height .08s linear;
}

/* -- Detalls menors ------------------------------------------------------- */
.monoespai { font-family: var(--tblr-font-monospace); font-size: .8125rem; }

.capsa-registre {
  font-family: var(--tblr-font-monospace);
  font-size: .78125rem;
  background: var(--tblr-bg-surface-secondary);
  border-radius: var(--tblr-border-radius);
  padding: .75rem;
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.indicador-connexio .status-dot { margin-right: .35rem; }

@media (max-width: 575.98px) {
  .diagrama-sip { font-size: .75rem; }
  .taula-compacta-mobil td,
  .taula-compacta-mobil th { padding: .35rem; }
}