/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · la FICHA de otra persona (Guille 10/11/2026: «incluye el
   perfil también»): la que se abre al tocar a alguien en el chat, la
   comunidad o un intercambio (includes/person_card.html + js/person-card.js).

   Solo se carga con el interruptor DISENO_UNICO y todo va dentro de `.pbc-du`
   (la clase que la base pone en <body>). Sin colores escritos a mano (lo
   vigila mainmodule/tests/test_du_perfil.py). Mismas piezas que el kit:
   tarjeta blanca de radio 20, letra PBC Sans 400/700, botones que se hunden
   y la foto ENTERA (ancho fijo y alto natural, nunca recortada en círculo).
   ══════════════════════════════════════════════════════════════════════════ */

.pbc-du .pbc-pc-card {
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  box-shadow: 0 18px 45px hsl(var(--pbc-shadow) / .25);
}
/* Cerrar: botón secundario cuadrado del kit (antes, círculo con borde rojo). */
.pbc-du .pbc-pc-x {
  width: 44px !important;
  height: 44px !important;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pc-x:hover,
.pbc-du .pbc-pc-x:focus-visible {
  border-color: hsl(var(--pbc-line));
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
}

/* La foto ENTERA. Sin foto, la inicial en un cuadro con las esquinas
   redondeadas (nunca el animal del rango). El marco del rango, si lo lleva
   puesto, es el borde del color de su rango. */
.pbc-du .pbc-pc-ini.du-fc-pic {
  width: 96px;
  height: 96px;
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pc-ini.du-fc-pic.has-photo {
  width: 168px;
  height: auto;
  background: hsl(var(--pbc-page));
  line-height: 0;
}
.pbc-du .pbc-pc-ini.du-fc-pic.has-frame { border: 4px solid var(--du-frame, hsl(var(--pbc-blue))); }
.pbc-du .du-fc-pic .pbc-pc-photo {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: initial;
  border-radius: 0;
}

.pbc-du .pbc-pc-name {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.3px;
  text-align: center;
  padding-right: 0;
}
.pbc-du .pbc-pc-meta {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
}
/* Podios y rachas: píldoras suaves con su icono de línea (sin emojis). */
.pbc-du .pbc-pc-trophy,
.pbc-du .pbc-pc-medal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-radius: 999px;
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-gold-ink));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pc-about,
.pbc-du .pbc-pc-ask {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-body);
  line-height: 1.5;
}
.pbc-du .pbc-pc-sec-t {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-pc-chip {
  border-radius: var(--pbc-radius-tag);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pc-more { color: hsl(var(--pbc-blue-dark)); font-weight: var(--pbc-weight-bold); }

/* Botones: mensaje privado = azul del kit; amistad y avisos de sus eventos =
   secundarios del kit. Todos se hunden. */
.pbc-du .pbc-pc-dm,
.pbc-du .pbc-pc-friend,
.pbc-du .pbc-host-follow-btn {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-blue));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  color: hsl(var(--pbc-on-color));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-pc-friend,
.pbc-du .pbc-host-follow-btn {
  border-color: hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink));
}
.pbc-du .pbc-pc-friend-ico { color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-pc-dm:active,
.pbc-du .pbc-pc-friend:active,
.pbc-du .pbc-host-follow-btn:active { transform: translateY(3px); box-shadow: none; }
.pbc-du .pbc-pc-dm:disabled,
.pbc-du .pbc-pc-friend:disabled {
  border-color: hsl(var(--pbc-line-soft));
  background: hsl(var(--pbc-line-soft));
  box-shadow: none;
  color: hsl(var(--pbc-ink-soft));
}
.pbc-du .pbc-pc-friend-why { color: hsl(var(--pbc-muted)) !important; font-size: var(--pbc-size-small) !important; }

/* Reseñas dentro de la ficha. */
.pbc-du .pbc-pc-rev-title { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-pc-rev-text { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-pc-praise-chip {
  border-radius: var(--pbc-radius-tag);
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  font-weight: var(--pbc-weight-bold);
}

/* El visor de la foto en grande: la foto ENTERA, alto natural. */
/* Se encoge entera, a lo ancho o a lo alto, sin bandas ni recortes. */
.pbc-du .pbc-pv-round.du-pv-pic {
  width: auto !important;
  max-width: min(92vw, 520px) !important;
  height: auto !important;
  max-height: 72vh !important;
  border-radius: var(--pbc-radius-card);
  object-fit: initial;
  background: transparent;
  box-shadow: 0 18px 45px hsl(var(--pbc-shadow) / .45);
}
.pbc-du .pbc-pv-name { font-family: var(--pbc-font); font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }