/* LISTA DE INTERCAMBIOS (móvil). CSS tal cual lo entregó ChatGPT en el chat
   "Diseño HTML Intercambios" (13/08/2026), con tres cambios obligados: las
   reglas globales del diseño suelto (`*`, `body`, `button`) se acotan a
   `.pbc-minter-screen` para no pisar el resto de la web, y la cabecera azul
   viene de includes/mobile_topbar.html (la cabecera única de la app), no del
   logo dibujado a mano de la maqueta.

   Fichero propio, cargado solo en la pantalla que lo usa. */

.pbc-minter-screen {
  /* Nombres locales de siempre, valores de la paleta unica (pbc-design-tokens.css). */
  --pbc-minter-blue: hsl(var(--pbc-blue));
  --pbc-minter-blue-dark: hsl(var(--pbc-blue-dark));
  --pbc-minter-yellow: hsl(var(--pbc-gold));
  --pbc-minter-ink: hsl(var(--pbc-ink));
  --pbc-minter-muted: hsl(var(--pbc-muted));
  --pbc-minter-bg: hsl(var(--pbc-page));
  --pbc-minter-white: hsl(var(--pbc-surface));
  --pbc-minter-line: hsl(var(--pbc-line));
  --pbc-minter-green: hsl(var(--pbc-green));

  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  color: var(--pbc-minter-ink);
  background: var(--pbc-minter-bg);
  font-family: var(--pbc-font);
  -webkit-font-smoothing: antialiased;
}

/* Tablets ya entran aquí (Guille, 20/08/2026), no solo teléfono: sin esto se
   veía una tira de 390px perdida en medio de la pantalla ancha. */
@media (min-width: 600px) {
  .pbc-minter-screen { max-width: 480px; }
}

.pbc-minter-screen * {
  box-sizing: border-box;
}

.pbc-minter-screen button {
  font: inherit;
}

/* Cabecera azul con curva: solo la marca y el título. MISMO azul plano y misma
   letra que la cabecera del resto de la app (mobile-topbar.css): el degradado
   propio la hacía distinta (Viola Boehm, 15/09/2026). */
.pbc-minter-header {
  position: relative;
  padding: calc(var(--space-3) + env(safe-area-inset-top)) 0 46px;
  overflow: hidden;
  color: hsl(var(--pbc-on-color));
  background: var(--pbc-minter-blue);
}
/* La curva de abajo HACIA DENTRO, igual que Portada y Clases (mobile-topbar.css,
   .pbc-mtop::after): un óvalo del color del fondo que muerde el azul. Antes eran
   esquinas redondeadas que abombaban hacia fuera (Guille, 18/09/2026). */
.pbc-minter-header::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -7%;
  left: -7%;
  bottom: -30px;
  height: 52px;
  border-radius: 50% 50% 0 0;
  background: var(--pbc-minter-bg);
}
.pbc-minter-header > * { position: relative; z-index: 1; }

.pbc-minter-title {
  margin: 0;
  padding: 0 var(--page-gutter);
  color: hsl(var(--pbc-on-color));
  font-family: var(--pbc-font);
  font-size: var(--pbc-text-title);
  line-height: 1.04;
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -1.2px;
}

.pbc-minter-main {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  padding: var(--block-gap) var(--page-gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
}
/* ESPACIADO (Viola, 14/09/2026): el hueco entre bloques lo pone el gap de
   arriba; los margin sueltos de cada hijo se sumaban o se comían. El título
   de sección se pega a su lista (8px) y se aparta de lo anterior (24px). */
/* Clase repetida a propósito: gana a las reglas de una sola clase de más abajo. */
.pbc-minter-main.pbc-minter-main > * { margin-top: 0; margin-bottom: 0; }
.pbc-minter-main.pbc-minter-main > .pbc-minter-section-title { margin: var(--space-2) var(--space-1) calc(var(--space-2) * -1); }

.pbc-minter-actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: 0;
}

.pbc-minter-button {
  min-width: 0;
  min-height: 76px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 12px 13px;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--pbc-minter-ink);
  font-size: 14px;
  line-height: 1.14;
  font-weight: 820;
  box-shadow: 0 6px 14px rgba(21, 38, 59, .11), inset 0 -2px 0 rgba(21, 38, 59, .09);
  transition: transform .16s ease, box-shadow .16s ease;
}

.pbc-minter-button:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(21, 38, 59, .10), inset 0 1px 0 rgba(21, 38, 59, .08);
}

.pbc-minter-button svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.pbc-minter-button-primary {
  background: var(--pbc-minter-yellow);
}

.pbc-minter-button-secondary {
  border: 1px solid hsl(var(--pbc-line));
  background: var(--pbc-minter-white);
  color: var(--pbc-minter-blue-dark);
}

/* PBC Live: tercera opción de arriba, en el verde propio de Live (base #00A86B,
   botón #00C97F). Fila entera para que no apriete a "Crear" y "Encontrar". */
.pbc-minter-live {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 13px 14px;
  border-radius: 18px;
  color: hsl(var(--pbc-on-color));
  background: linear-gradient(135deg, #00C97F 0%, #00A86B 100%);
  box-shadow: 0 6px 14px rgba(0, 118, 76, .22), inset 0 -2px 0 rgba(0, 90, 58, .18);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.pbc-minter-live:hover,
.pbc-minter-live:focus { color: hsl(var(--pbc-on-color)); text-decoration: none; }

/* Con gente dentro: late despacio para que el ojo vaya ahí (Guille, 18/08/2026).
   Es un latido del resplandor, no un encender/apagar: lo segundo marea y en un
   móvil se lee como un error. Sin nadie, el botón se queda quieto. */
.pbc-minter-live.is-live {
  animation: pbc-minter-live-beat 1.9s ease-in-out infinite;
}

.pbc-minter-live.is-live .pbc-minter-live-dot {
  animation: pbc-minter-live-dot 1.9s ease-in-out infinite;
}

@keyframes pbc-minter-live-beat {
  0%, 100% { box-shadow: 0 6px 14px rgba(0, 118, 76, .22), inset 0 -2px 0 rgba(0, 90, 58, .18); }
  50% { box-shadow: 0 6px 20px rgba(0, 201, 127, .55), 0 0 0 4px rgba(0, 201, 127, .22), inset 0 -2px 0 rgba(0, 90, 58, .18); }
}

@keyframes pbc-minter-live-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(.75); }
}

@media (prefers-reduced-motion: reduce) {
  .pbc-minter-live.is-live,
  .pbc-minter-live.is-live .pbc-minter-live-dot { animation: none; }
}

.pbc-minter-live:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0, 118, 76, .2);
}

.pbc-minter-live-ico {
  width: 44px;
  height: 44px;
  padding: 9px;
  border-radius: 14px;
  color: hsl(var(--pbc-on-color));
  background: rgba(255, 255, 255, .22);
}

.pbc-minter-live-text { min-width: 0; }

.pbc-minter-live-title {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 860;
  letter-spacing: -.25px;
}

.pbc-minter-live-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.pbc-minter-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .32);
}

.pbc-minter-live-flags { display: inline-flex; gap: 3px; margin-left: 2px; }

.pbc-minter-live-flags img {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  object-fit: cover;
}

.pbc-minter-live-chevron {
  width: 15px;
  height: 24px;
  color: rgba(255, 255, 255, .9);
}

/* VALORAR EL INTERCAMBIO QUE YA PASÓ (Guille, 27/08/2026). Misma fila que el
   botón de Live para que no rompa el ritmo de la pantalla, pero en el turquesa
   de la marca y en claro: es un aviso que caduca, no una tercera opción fija.
   Turquesa #02A9CA, el mismo de la tarjeta del panel, para que sean la misma
   cosa en las dos pantallas. */
.pbc-minter-rate {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 2px solid hsl(var(--pbc-cyan));
  background: hsl(var(--pbc-cyan-soft));
  color: hsl(var(--pbc-cyan-ink));
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease;
}

.pbc-minter-rate:hover,
.pbc-minter-rate:focus { color: hsl(var(--pbc-cyan-ink)); text-decoration: none; }

.pbc-minter-rate:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(2, 169, 202, .22);
}

.pbc-minter-rate-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border-radius: 14px;
  color: hsl(var(--pbc-on-color));
  background: hsl(var(--pbc-cyan));
}

.pbc-minter-rate-ico svg { width: 100%; height: 100%; }

.pbc-minter-rate-text { min-width: 0; }

.pbc-minter-rate-title {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
  font-size: 16px;
  line-height: 1.15;
  font-weight: 860;
  letter-spacing: -.25px;
}

.pbc-minter-rate-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  color: #3d6b76;
}

.pbc-minter-rate-cta {
  padding: 8px 13px;
  border-radius: 12px;
  background: hsl(var(--pbc-cyan));
  color: hsl(var(--pbc-on-color));
  font-size: 14px;
  font-weight: 840;
  white-space: nowrap;
}

.pbc-minter-section-title {
  margin: 22px 2px 11px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 840;
  letter-spacing: -.25px;
}

.pbc-minter-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El "+" de invitar va ENCIMA de la tarjeta, no dentro: un enlace no puede
   contener otro enlace. El envoltorio le da el sistema de coordenadas. */
.pbc-minter-card-wrap {
  position: relative;
}

.pbc-minter-invite {
  position: absolute;
  z-index: 2;
  top: 11px;
  right: 11px;
  display: grid;
  width: 34px;
  height: 34px;
  color: hsl(var(--pbc-on-color));
  background: hsl(var(--pbc-red));
  border-radius: 50%;
  box-shadow: 0 3px 9px rgba(226, 61, 46, .32);
  place-items: center;
}

.pbc-minter-invite svg {
  width: 19px;
  height: 19px;
}

.pbc-minter-invite:active {
  transform: translateY(1px);
}

.pbc-minter-card {
  position: relative;
  display: block;
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(203, 219, 233, .75);
  border-radius: 20px;
  background: var(--pbc-minter-white);
  box-shadow: 0 5px 15px rgba(31, 66, 99, .07);
  color: inherit;
  text-decoration: none;
}

.pbc-minter-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.pbc-minter-languages {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

/* Banderas EXACTAMENTE como en el calendario de intercambios (Guille, 14/08/2026:
   "la antesala no se parece al calendario, mismas banderitas y misma visibilidad").
   Allí (.tandem-lang-flag en assets/css/tandems.css) son rectángulos con la esquina
   redondeada y el tamaño lo pone flag-icons con font-size: 26px de alto, ancho 4:3.
   Antes aquí eran círculos de 34px recortados y no se parecían en nada. El
   calendario no se toca: es esta pantalla la que se copia de él. */
.pbc-minter-flag {
  flex: 0 0 auto;
  display: inline-flex;
  line-height: 0;
}

.pbc-minter-flag .fi {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 26px;
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, .14);
}

.pbc-minter-flag-fallback {
  display: inline-grid;
  min-width: 35px;
  height: 26px;
  place-items: center;
  background: hsl(var(--pbc-line-soft));
  color: var(--pbc-minter-blue-dark);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  border-radius: 3px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, .14);
}

.pbc-minter-swap {
  width: 28px;
  height: 22px;
  flex: 0 0 auto;
}

.pbc-minter-status {
  flex: 0 0 auto;
  max-width: 115px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #E5F7F1;
  color: hsl(var(--pbc-green));
  font-size: 12px;
  line-height: 1.05;
  font-weight: 820;
  text-align: center;
  white-space: nowrap;
}

.pbc-minter-status-full {
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-muted));
}

/* Falta gente = ROJO (Guille 14/08/2026). El margen deja hueco al "+", que va
   flotando en esa misma esquina. */
.pbc-minter-status-missing {
  margin-right: 40px;
  background: #FDE7E4;
  color: #B3261E;
}

.pbc-minter-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 9px 0;
  color: var(--pbc-minter-ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.pbc-minter-meta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--pbc-minter-blue);
}

/* "Te preguntaremos a las X" en la tarjeta (Guille 24/08/2026): mismo tamaño
   que la fila de fecha pero en gris, es información, no una cita. */
.pbc-minter-askline {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 9px;
  color: hsl(var(--pbc-muted));
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
}

.pbc-minter-askline svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin-top: 1px;
  color: hsl(var(--pbc-muted));
}

.pbc-minter-date-strong {
  color: var(--pbc-minter-blue-dark);
  font-size: 12px;
  font-weight: 880;
  letter-spacing: .25px;
}

.pbc-minter-separator {
  color: hsl(var(--pbc-subtle));
  font-weight: 500;
}

.pbc-minter-people {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid hsl(var(--pbc-line-soft));
}

.pbc-minter-avatar-stack {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-left: 2px;
}

.pbc-minter-avatar {
  width: 29px;
  height: 29px;
  object-fit: cover;
  border: 2px solid var(--pbc-minter-white);
  border-radius: 50%;
  background: hsl(var(--pbc-line));
  box-shadow: 0 0 0 1px hsl(var(--pbc-line));
}

/* Sin foto: el mismo círculo, en gris, para que la fila no se descuadre. */
.pbc-minter-avatar-empty {
  display: inline-block;
  background: hsl(var(--pbc-line));
}

.pbc-minter-avatar + .pbc-minter-avatar {
  margin-left: -9px;
}

.pbc-minter-names {
  min-width: 0;
  overflow: hidden;
  color: hsl(var(--pbc-ink-soft));
  font-size: 13px;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pbc-minter-empty {
  margin-top: 12px;
  padding: 18px 18px;
  border: 1px solid rgba(203, 219, 233, .75);
  border-radius: 20px;
  background: var(--pbc-minter-white);
  box-shadow: 0 5px 15px rgba(31, 66, 99, .07);
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.pbc-minter-empty-image {
  display: block;
  width: 172px;
  height: 148px;
  flex: 0 0 auto;
  margin: -6px 0 -6px -8px;
  object-fit: contain;
  object-position: center;
}

.pbc-minter-empty-copy {
  min-width: 0;
}

.pbc-minter-empty-brand {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 840;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pbc-minter-muted);
}

/* LA FRASE Y LA MARCA, AL FINAL DE LA PANTALLA (Guille, 23/09/2026). Ya no van
   dentro del recuadro de "todavia no tienes intercambios" sino debajo de
   "Sugeridos para ti", asi que se centran y llevan su propio aire. */
.pbc-minter-empty-motto {
  margin: 18px 0 6px;
  text-align: center;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--pbc-minter-blue-dark);
}

.pbc-minter-empty-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 840;
}

.pbc-minter-empty-text {
  margin: 6px 0 15px;
  color: var(--pbc-minter-muted);
  font-size: 14px;
  line-height: 1.4;
}

.pbc-minter-empty-actions {
  display: grid;
  gap: 9px;
}

.pbc-minter-empty-button {
  width: 100%;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 16px;
  border: 0;
  border-radius: 15px;
  color: var(--pbc-minter-ink);
  font-size: 14px;
  font-weight: 820;
  text-decoration: none;
  cursor: pointer;
}

.pbc-minter-empty-button svg {
  width: 20px;
  height: 20px;
}

.pbc-minter-empty-button-primary {
  background: var(--pbc-minter-yellow);
  box-shadow: inset 0 -2px 0 rgba(21, 38, 59, .10);
}

.pbc-minter-empty-button-secondary {
  border: 1px solid hsl(var(--pbc-line));
  background: var(--pbc-minter-white);
  color: var(--pbc-minter-blue-dark);
}

@media (max-width: 350px) {
  .pbc-minter-empty-image {
    width: 128px;
    height: 112px;
  }

  .pbc-minter-empty-motto {
    font-size: 16px;
  }

  .pbc-minter-main {
    padding-right: 12px;
    padding-left: 12px;
  }

  .pbc-minter-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 13px;
  }

  .pbc-minter-status {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pbc-minter-button {
    transition: none;
  }
}

/* ── LO QUE ESPERA TU RESPUESTA (Guille, 18/08/2026) ────────────────────────
   Dos bloques justo debajo de "Crear" y "Encontrar": el aviso de confirmar
   asistencia y las invitaciones sin contestar. Van en AMARILLO de marca (el
   mismo del botón principal) para que canten a la primera: son lo único de la
   pantalla que pide una acción ahora mismo. */
.pbc-minter-confirm {
  margin: 14px 0 0;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: linear-gradient(140deg, #FFF3BE 0%, #FFE98A 60%, #FFE07A 100%);
  border: 1px solid hsl(var(--pbc-gold));
  box-shadow: 0 6px 16px rgba(21, 38, 59, .10);
}

.pbc-minter-confirm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: hsl(var(--pbc-gold-ink));
}

.pbc-minter-confirm-text {
  display: grid;
  gap: 2px;
}

.pbc-minter-confirm-title {
  font-size: 16px;
  font-weight: 840;
  letter-spacing: -.2px;
  color: var(--pbc-minter-ink);
}

.pbc-minter-confirm-when {
  font-size: 13.5px;
  font-weight: 700;
  color: hsl(var(--pbc-gold-ink));
}

.pbc-minter-confirm-btn {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 13px 12px;
  border: 0;
  border-radius: 14px;
  background: var(--pbc-minter-blue);
  color: hsl(var(--pbc-on-color));
  font-size: 16px;
  font-weight: 820;
  cursor: pointer;
}

.pbc-minter-confirm-link {
  display: block;
  margin: 9px 0 0;
  text-align: center;
  color: var(--pbc-minter-blue-dark);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.pbc-minter-confirm-done {
  margin: 6px 0 0;
  text-align: center;
  color: hsl(var(--pbc-green));
  font-size: 15px;
  font-weight: 800;
}

/* Invitación sin contestar: misma caja blanca que las tarjetas de la lista,
   con la cara y el nombre de quien invita arriba y los dos botones abajo. */
.pbc-minter-invites {
  list-style: none;
}

.pbc-minter-invite-card {
  padding: 13px 14px 12px;
  border-radius: 18px;
  border: 1px solid hsl(var(--pbc-gold));
  background: var(--pbc-minter-white);
  box-shadow: 0 6px 16px rgba(21, 38, 59, .08);
}

.pbc-minter-invite-who {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
}

.pbc-minter-invite-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--pbc-minter-ink);
}

.pbc-minter-invite-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 0;
}

.pbc-minter-invite-yes,
.pbc-minter-invite-no {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 820;
  text-decoration: none;
  cursor: pointer;
}

.pbc-minter-invite-yes {
  border: 0;
  background: var(--pbc-minter-blue);
  color: hsl(var(--pbc-on-color));
}

.pbc-minter-invite-no {
  border: 1px solid hsl(var(--pbc-line));
  background: var(--pbc-minter-white);
  color: var(--pbc-minter-blue-dark);
}

/* ── EL PINGÜINO QUE SE PASEA (Guille, 23/08/2026) ───────────────────────────
   Tercer bicho de la familia, detrás del ajolote de la portada y de la zorrita
   de Clases. Quien lo mueve es static/js/pbc-pinguino-paseo.js.

   Lo suyo: "que nunca desaparezca, siempre queda abajo del todo". Su casa es un
   sitio FIJO de la esquina de abajo, no una tarjeta, así que con el scroll no
   se va y siempre hay un sitio al que volver.

   Reglas de la casa que se respetan aquí:
   · La capa NO recibe toques (pointer-events:none): solo el dibujo. Los botones
     de la pantalla siguen siendo suyos.
   · Va por debajo de la barra de abajo (z-index 1030) para no taparla nunca.
   · Solo en el móvil: en escritorio esta pantalla es otra cosa y no hay barra
     de abajo contra la que apoyarlo.
   · Con "reducir movimiento" el guion ni se enciende. */
.pbc-pinguino-paseo { display: none; }

@media (max-width: 767.98px) {
  .pbc-pinguino-paseo {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 79px;    /* la proporción de cada fotograma de la tira (212x376) */
    height: 140px;
    z-index: 1020;
    pointer-events: none;
    will-change: transform;
    transform-origin: 50% 50%;
    /* Hasta que el guion lo coloca no se enseña: si no, asomaría un fotograma
       pegado a la esquina de arriba a la izquierda. */
    opacity: 0;
    transition: opacity .45s ease;
  }
  .pbc-pinguino-paseo.is-listo { opacity: 1; }
  /* GUARDADO: ni se ve ni recibe toques. En reposo manda el pingüino de
     siempre, el de la tarjeta, y el dedo va a ESE dibujo: de ahí sale el que
     anda (Guille, 23/08/2026: "debería salir desde la imagen que ya está").
     Solo se esconde el quieto MIENTRAS el otro anda suelto, y esa clase la
     pone el guion: si el guion no llega, la pantalla se ve igual que hoy. */
  .pbc-pinguino-paseo.is-guardado { opacity: 0; }
  .pbc-pinguino-paseo.is-guardado .pbc-pinguino-paseo-img { display: none; }
  .pbc-minter-empty-image.is-paseo {
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
  }
  .pbc-minter-empty-image.is-paseo.is-paseando { visibility: hidden; }
  /* La tira de verdad no se enseña: es de donde el lienzo copia los fotogramas. */
  .pbc-pinguino-paseo-fuente { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
  .pbc-pinguino-paseo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    cursor: grab;
    /* Sin esto, en el móvil el dedo arrastra la página en vez del pingüino. */
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
  }
  /* Al tocarlo: botecito con squash, el mismo de los otros dos bichos. */
  .pbc-pinguino-paseo-img.is-tocado {
    animation: pbc-ppaseo-boing .6s cubic-bezier(.34, 1.56, .64, 1) 1;
  }
  @keyframes pbc-ppaseo-boing {
    0% { transform: scale(1, 1); }
    28% { transform: scale(1.16, .86) rotate(-5deg); }
    55% { transform: scale(.92, 1.12) rotate(4deg); }
    78% { transform: scale(1.05, .97) rotate(-2deg); }
    100% { transform: scale(1, 1); }
  }
  .pbc-pinguino-paseo.is-cogido .pbc-pinguino-paseo-img {
    cursor: grabbing;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .28));
  }
  /* COPOS: es un pingüino, así que suelta nieve en vez de burbujas (ajolote) o
     polvo (zorrita). */
  .pbc-pinguino-paseo-copo {
    position: absolute;
    top: 26px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: inset 0 0 0 1px rgba(31, 66, 99, .16);
    pointer-events: none;
    animation: pbc-ppaseo-copo 1.3s ease-out forwards;
  }
  @keyframes pbc-ppaseo-copo {
    0% { transform: translate(0, 0) scale(.5); opacity: 0; }
    18% { opacity: .95; }
    100% { transform: translate(16px, 54px) scale(1.1); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .pbc-pinguino-paseo { display: none; }
    .pbc-minter-empty-image.is-paseo { visibility: visible; }
  }
}

/* ── LO QUE TE FALTA VALORAR (Guille, 14/09/2026) ──────────────────────────
   Pantalla hermana de la lista de intercambios: reutiliza sus tarjetas tal
   cual, así que aquí solo va lo que no existía. */

/* Volver, arriba a la derecha: el logo ya ocupa la izquierda de la cabecera y
   moverlo cambiaría todas las pantallas que cuelgan de base-pantalla.html. */
.pbc-minter-back {
  position: absolute;
  top: 13px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: hsl(var(--pbc-on-color));
  background: rgba(255, 255, 255, .18);
  text-decoration: none;
}

.pbc-minter-back:hover,
.pbc-minter-back:focus { color: hsl(var(--pbc-on-color)); background: rgba(255, 255, 255, .3); }

.pbc-minter-rate-lead {
  margin: 0 2px 14px;
  color: #4a5b6b;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

/* Con quién fue: las mismas chapas grises de siempre, para que la fila diga a
   quién estás valorando sin abrir nada. */
.pbc-minter-people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.pbc-minter-person {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: #33465c;
  font-size: 13px;
  font-weight: 700;
}

.pbc-minter-rate-more {
  margin: 14px 2px 0;
  color: #6b7a8b;
  font-size: 13px;
  font-weight: 600;
}

/* Sin nada pendiente: se dice, no se deja la pantalla en blanco. */
.pbc-minter-rate-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 34px 18px 30px;
  border-radius: 20px;
  background: hsl(var(--pbc-surface));
  box-shadow: 0 8px 20px rgba(15, 45, 80, .07);
  text-align: center;
}

.pbc-minter-rate-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  margin-bottom: 4px;
  border-radius: 50%;
  color: hsl(var(--pbc-cyan));
  background: hsl(var(--pbc-cyan-soft));
}

.pbc-minter-rate-empty-title {
  margin: 0;
  font-size: 19px;
  font-weight: 860;
  letter-spacing: -.3px;
  color: #10314d;
}

.pbc-minter-rate-empty-sub {
  margin: 0 0 12px;
  color: #5a6b7d;
  font-size: 14px;
  font-weight: 600;
}

.pbc-minter-rate-empty .pbc-minter-button { min-width: 190px; justify-content: center; }

/* Intercambios sugeridos (Viola Boehm, 14/09/2026): la misma tarjeta blanca de
   la lista, con el botón a la derecha. El botón es el azul del "Aceptar" de la
   bandeja, que es la otra puerta para unirse desde esta pantalla. */
.pbc-minter-suggest-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pbc-minter-suggest-info {
  min-width: 0;
}

.pbc-minter-suggest-info .pbc-minter-meta {
  margin: 10px 0 0;
}

.pbc-minter-suggest-join {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--pbc-minter-blue);
  color: #fff;
  font-size: 15.5px;
  font-weight: 820;
  text-decoration: none;
}

.pbc-minter-suggest-join:hover,
.pbc-minter-suggest-join:focus {
  color: #fff;
  text-decoration: none;
}

.pbc-minter-suggest-join:active {
  transform: translateY(1px);
}