/* Issue #1870 — el Discord del club. Todo lo de Discord va en blurple y nada
   más lo usa: en las placas el verde ya dice "ganó/sos vos" y el ámbar "te
   toca", así que la marca de voz no podía ser ninguno de los dos. */
:root { --dc: #5865f2; --dc-rgb: 88,101,242; --dc-claro: #a5adff; }

.dc-logo, .dc-auris, .dc-parlante { display: inline-block; flex: none; background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat; mask: var(--icono) center / contain no-repeat; }
.dc-logo { --icono: url("/discord.svg"); width: 1.25em; height: .95em; }
.dc-auris { --icono: url("/voz.svg"); width: 1em; height: 1em; }
/* El parlante de los canales de voz, dibujado: cuerpo + cono. */
.dc-parlante { width: .9em; height: .9em; margin-right: 6px; opacity: .7;
  --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h4l5-4v14l-5-4H3z'/%3E%3Cpath d='M16 8a5 5 0 0 1 0 8M19 5a9 9 0 0 1 0 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- topbar --- */
.dc-pill { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; flex: none;
  padding: 6px 11px; border-radius: 9px; font-size: 12px; line-height: 1; text-decoration: none;
  white-space: nowrap; color: #fff; background: rgba(var(--dc-rgb),.18);
  border: 1px solid rgba(var(--dc-rgb),.55); }
.dc-pill:hover { background: rgba(var(--dc-rgb),.32); }
.dc-pill .dc-logo { color: var(--dc-claro); }
.dc-cuenta { display: inline-flex; align-items: center; gap: 5px; font-weight: 600;
  padding-left: 7px; border-left: 1px solid rgba(255,255,255,.18); color: var(--dc-claro); }
.dc-cuenta i { width: 7px; height: 7px; border-radius: 50%; background: #3ba55d;
  box-shadow: 0 0 0 3px rgba(59,165,93,.25); animation: dcLatir 2s ease-in-out infinite; }
@keyframes dcLatir { 50% { box-shadow: 0 0 0 5px rgba(59,165,93,0); } }

/* --- avatares chicos de las listas --- */
.dc-av { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #e4f5ec;
  background: linear-gradient(150deg, #2f6f57, #1c4737);
  box-shadow: 0 0 0 2px rgba(var(--dc-rgb),.7); }
.dc-av img { width: 100%; height: 100%; object-fit: cover; }

.dc-sub { display: block; font-size: 11px; color: var(--muted); }
.dc-fila { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.dc-quien { min-width: 0; display: grid; }
.dc-quien b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-quien small { font-size: 11px; color: var(--dc-claro); }
.dc-canal { margin: 8px 0 4px; }
.dc-canal ul, .dc-lista { list-style: none; margin: 0; padding: 0 0 0 4px; }
.dc-canal-nom { display: flex; align-items: center; font-size: 12px; font-weight: 600;
  color: var(--muted); text-decoration: none; margin-bottom: 2px; }
.dc-canal-nom:hover { color: var(--ink); }
.dc-canal-nom small { margin-left: auto; font-weight: 400; }
/* #1905 — una lista por canal: "tu torneo" y "en tu mesa" son marcas, no secciones. */
.dc-marca { flex: none; margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 10.5px;
  font-weight: 600; line-height: 1.3; color: var(--dc-claro); background: rgba(var(--dc-rgb),.16); }
.dc-canal-nom .dc-marca { margin-left: 8px; }
.dc-canal-nom .dc-marca + small { margin-left: auto; }
.dc-canal-torneo .dc-canal-nom { color: var(--ink); }
/* El que no vinculó su Discord: se lo ve, pero no es nadie de la mesa. */
.dc-fila-anon { opacity: .62; }
.dc-fila-anon .dc-av { box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.dc-fila-anon .dc-quien b { font-weight: 500; }
.dc-vacio { margin: 10px 0; font-size: 12px; color: var(--muted); }
.dc-pop > .dc-vincular { flex: none; }
.dc-vincular { margin: 10px 0 0; padding: 9px 10px; border-radius: 9px; font-size: 11.5px;
  color: var(--muted); background: rgba(255,255,255,.04); border: 1px dashed var(--line); }
.dc-vincular a { color: var(--dc-claro); font-weight: 600; }

.dc-botones { display: grid; gap: 7px; margin-top: 12px; }
.dc-btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 700;
  text-decoration: none; color: #fff; }
.dc-btn-voz { background: var(--dc); }
.dc-btn-voz:hover { background: #4752c4; }
.dc-btn-sec { background: transparent; color: var(--dc-claro); border: 1px solid rgba(var(--dc-rgb),.5); }
.dc-btn-sec:hover { background: rgba(var(--dc-rgb),.14); }

/* --- lobby: la tarjeta de la columna, debajo del resumen del club --- */
.dc-card { margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(160deg, rgba(var(--dc-rgb),.16), rgba(var(--dc-rgb),.04));
  border: 1px solid rgba(var(--dc-rgb),.35); }
.dc-card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dc-card > header .dc-logo { font-size: 22px; color: var(--dc-claro); }
.dc-card > header strong { font-size: 14px; }
/* Con un torneo elegido la columna es del detalle: la tarjeta se va con el resumen. */
#detailEmpty[hidden] ~ .dc-card { display: none; }

/* --- lobby en el teléfono: la columna no existe, va una tira arriba --- */
.dc-tira { display: none; }
@media (max-width: 900px) {
  .dc-card { display: none; }
  .dc-tira { display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
    padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink);
    background: linear-gradient(100deg, rgba(var(--dc-rgb),.28), rgba(var(--dc-rgb),.08));
    border: 1px solid rgba(var(--dc-rgb),.45); }
  .dc-tira[hidden] { display: none; }
  .dc-tira > .dc-logo { font-size: 20px; color: var(--dc-claro); }
  .dc-tira-txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .dc-caras { display: inline-flex; padding-left: 6px; }
  .dc-caras .dc-av { width: 22px; height: 22px; font-size: 10px; margin-left: -6px;
    box-shadow: 0 0 0 2px #1a1c3a; }
  .dc-tira-cta { font-size: 12px; font-weight: 700; color: #fff; padding: 6px 10px;
    border-radius: 8px; background: var(--dc); }
}
/* En el teléfono la barra de arriba ya parte en dos renglones: la pastilla
   empujaba "Salir" a un tercero. La tira de arriba de las solapas dice lo mismo. */
@media (max-width: 700px) { .dc-pill { display: none; } }

/* --- mesa: el botón de la barra flotante y su panel --- */
.floatbtn.dc-mesa-btn { display: inline-flex; align-items: center; gap: 6px; }
.floatbtn.dc-mesa-btn .dc-logo { color: var(--dc-claro); }
.floatbtn.dc-mesa-btn.con-gente { color: #fff; background: rgba(var(--dc-rgb),.85); }
.floatbtn.dc-mesa-btn.con-gente .dc-logo { color: #fff; }
.floatbtn.dc-mesa-btn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--dc-claro), 0 4px 12px rgba(0,0,0,.45); }

.dc-pop { position: fixed; z-index: 45; left: calc(var(--safe-left, 0px) + 10px);
  bottom: calc(var(--safe-bottom, 0px) + 52px); width: min(300px, calc(100vw - 20px));
  max-height: min(440px, 70dvh); display: flex; flex-direction: column;
  border-radius: 14px; background: rgb(17,19,24); border: 1px solid rgba(var(--dc-rgb),.45);
  box-shadow: 0 18px 50px rgba(0,0,0,.65); padding: 12px 14px 14px;
  animation: entrar .16s cubic-bezier(.2,.8,.3,1); }
.dc-pop[hidden] { display: none; }
.dc-pop-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); }
.dc-pop-head .dc-logo { color: var(--dc-claro); font-size: 18px; }
.dc-pop-head .dc-sub { flex: 1; display: inline; margin-left: 2px; }
.dc-pop-head button { padding: 3px 7px; }
.dc-pop-cuerpo { overflow-y: auto; min-height: 0; }
.dc-pop h4 { margin: 12px 0 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; }

/* --- chat: el logo al lado del ✕ --- */
.dc-chat { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px;
  color: var(--dc-claro); background: rgba(var(--dc-rgb),.16); }
.dc-chat:hover { color: #fff; background: var(--dc); }
.dc-chat .dc-logo { font-size: 15px; }

/* --- la placa: auriculares en la esquina del avatar --- */
.pod .avatar { position: relative; }
.dc-en-voz { position: absolute; right: -.9cqmin; bottom: -.7cqmin; width: 2.7cqmin; height: 2.7cqmin;
  border-radius: 50%; background: var(--dc); box-shadow: 0 0 0 .35cqmin rgb(10,13,15);
  display: grid; place-items: center; }
.dc-en-voz::before { content: ""; width: 62%; height: 62%; background: #fff;
  -webkit-mask: url("/voz.svg") center / contain no-repeat; mask: url("/voz.svg") center / contain no-repeat; }

/* #1882 — "Discord" en los controles del reproductor: el azul de Discord, para
   que no se confunda con "Compartir", que baja un archivo. */
.rp-controls .rp-discord { color: var(--dc-claro); border-color: color-mix(in srgb, var(--dc) 45%, transparent); }