/* ══════════════════════════════════════════════════════════════════════════
   DISEÑO ÚNICO · ZONA INTERCAMBIOS Y EVENTOS («la 3 con marca PBC»)
   Guille 08-09/11/2026. Maquetas: lienzo https://claude.ai/artifact/4hhEPAoAwKMUzikVaEqBEF,
   página 1 (P3DeskInter, P3TicketDesk, P3Inter, P3Eventos, P3Desk, P3Form).

   Va ENCIMA de las piezas comunes (static/css/pbc-kit.css, clases pbc-k-*) y
   solo cambia el ASPECTO: mismas pantallas, mismos botones, mismos pasos.

   Reglas de esta hoja (las mismas que pbc-kit.css; lo vigila
   mainmodule/tests/test_du_intercambios.py):
   · Solo se carga con el interruptor DISENO_UNICO y TODO va dentro de `.pbc-du`
     (la clase que la plantilla pone en <body> con el interruptor). Apagado, nada
     de aquí existe y la pantalla es la de siempre.
   · Ni un color escrito a mano: todo sale de static/css/pbc-design-tokens.css.
   · Una letra (PBC Sans, 400 y 700) y la escala de la casa (13, 15, 17, 20, 24, 30-32).
   · Los calendarios NO cambian (Guille 09/11): fichas, colores, banderas y el «+»
     tal cual. Solo la parte de arriba, una sola barra de bajar y todo el ancho.

   Índice
     1. Calendario de intercambios en ordenador (tandem-schedule.html)
     2. La ficha de un intercambio (#tandemDetailModal, ordenador y móvil)
     3. El ticket de quien ya está apuntado (exchange-ticket-v2 y exchange-ticket)
     4. Conecta en el móvil (exchanges/my-exchanges.html)
     5. Eventos (weekly_events.html + includes/meventos_list.html)
     6. Proponer un evento (propose_event.html y propose_event_sent.html)
     7. Después del intercambio (tandem-feedback.html)
     8. Crear un intercambio en el móvil (exchanges/create.html)
   ══════════════════════════════════════════════════════════════════════════ */


/* ── 1 · CALENDARIO DE INTERCAMBIOS ──────────────────────────────────────── */

/* 1.1 · Fondo blanco, la letra de la casa y TODO EL ANCHO en ordenador. */
.pbc-du #tandemGrid {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
@media (min-width: 1024px) {
  .pbc-du #tandemGrid.container {
    max-width: none;
    padding: 30px 40px 48px;
  }
}

/* 1.2 · Cabecera: título con subrayado amarillo y «Crear» a la derecha. */
.pbc-du .du-x-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 22px;
}
.pbc-du .du-x-title {
  margin: 0;
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-xl);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
  line-height: 1.15;
}
.pbc-du .du-x-sub {
  margin: 6px 0 0;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  line-height: 1.4;
}
.pbc-du .du-x-head .du-x-create { margin: 0; }

/* «+ Crear un intercambio»: el botón amarillo que se hunde. */
.pbc-du #tandemGrid .tandem-suggest-hero {
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-gold));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  filter: none;
}
.pbc-du #tandemGrid .tandem-suggest-hero:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 hsl(var(--pbc-gold-dark));
}
.pbc-du #tandemGrid .tandem-suggest-hero svg { width: 20px; height: 20px; flex: 0 0 auto; }
.pbc-du #tandemGrid .tandem-suggest-hero.is-loading svg { display: none; }

/* 1.3 · «Sugeridos para ti» (includes/desktop_for_you.html). */
.pbc-du .pbc-foryou {
  margin: 0 0 22px;
  padding: 20px 22px !important;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-foryou-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-foryou-langs {
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
}
.pbc-du .pbc-foryou-langs b { color: hsl(var(--pbc-ink)); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-foryou-langs a { color: hsl(var(--pbc-blue)); font-weight: var(--pbc-weight-bold); }
@media (min-width: 1024px) {
  .pbc-du .pbc-foryou-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pbc-du .pbc-foryou-card {
  gap: 10px;
  padding: 14px 16px;
  border: 0;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-cyan-soft));
}
.pbc-du .pbc-foryou-flags { color: hsl(var(--pbc-cyan-ink)); }
.pbc-du .pbc-foryou-flags .fi { border-radius: 4px; box-shadow: 0 0 0 1px hsl(var(--pbc-ink) / .12); }
.pbc-du .pbc-foryou-when { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-foryou-when strong { font-weight: var(--pbc-weight-bold); }
/* «Unirme»: azul que se hunde, en pequeño. */
.pbc-du .pbc-foryou-join {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-foryou-join:hover { background: hsl(var(--pbc-blue)); }
.pbc-du .pbc-foryou-join:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
/* «Aún nadie ha creado…» y «Crear mis 3»: el aviso amarillo suave. */
.pbc-du .pbc-foryou-three {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-gold-soft));
}
.pbc-du .pbc-foryou-three-text {
  color: hsl(var(--pbc-gold-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-foryou-pairs li,
.pbc-du .pbc-foryou-slots li {
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-foryou-note { color: hsl(var(--pbc-gold-ink)); font-size: var(--pbc-size-label); }
/* «Crearlos con un clic» / «Crear mis 3 intercambios»: blanco con canto dorado. */
.pbc-du .pbc-foryou-btn {
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid hsl(var(--pbc-gold-dark) / .45);
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-gold-dark) / .45);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-foryou-btn:hover { background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-foryou-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-gold-dark) / .45); }
.pbc-du .pbc-foryou-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* El parpadeo que pidió Guille (01/11) se queda, pero en el contorno: la sombra
   ya es el canto del botón que se hunde. */
.pbc-du .pbc-foryou-blink { animation: du-x-blink 1.2s ease-in-out infinite; outline: 3px solid transparent; }
@keyframes du-x-blink {
  0%, 100% { outline-color: hsl(var(--pbc-blue) / .55); outline-offset: 0; }
  50% { outline-color: hsl(var(--pbc-blue) / 0); outline-offset: 8px; }
}
@media (prefers-reduced-motion: reduce) { .pbc-du .pbc-foryou-blink { animation: none; } }
.pbc-du .pbc-foryou-other { color: hsl(var(--pbc-blue)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-foryou-done {
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}

/* 1.4 · Avisos de arriba (valorar, invitado, nota) como tarjetas de la casa. */
.pbc-du #tandemGrid .tandem-guest-banner {
  border: 1px solid hsl(var(--pbc-cyan-line));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-cyan-soft));
}
.pbc-du #tandemGrid .tandem-guest-banner .text-sm { color: hsl(var(--pbc-cyan-ink)); font-size: var(--pbc-size-label); }

/* 1.5 · «Ver y filtrar»: secundario, blanco con borde y canto. */
.pbc-du #tandemGrid .gb-tandem-filters__summary {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}

/* 1.6 · La semana: flechas secundarias que se hunden y la fecha grande. */
.pbc-du #tandemGrid .schedule-date-nav {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.pbc-du #tandemGrid .schedule-date-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du #tandemGrid .schedule-date-nav-arrow:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du #tandemGrid .schedule-date-range {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}

/* 1.7 · El calendario: TAL CUAL por dentro (Guille 09/11). Solo una tarjeta de la
   casa alrededor, más ancho y UNA SOLA BARRA DE BAJAR: la de la página. La fila
   de los días se queda fija arriba al bajar. */
.pbc-du #tandemGrid .schedule-calendar-container {
  overflow: clip !important;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .pbc-du #tandemGrid .schedule-calendar-inner { max-height: none; }
  .pbc-du #tandemScroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}
/* Para que la fila de los días pueda quedarse fija, <body> no puede ser una caja
   con barra propia: `clip` recorta lo que se sale por los lados igual que
   `hidden`, pero sin crear esa caja. Navegador viejo sin `clip`: se queda como
   siempre (la fila sube con la página). */
body.pbc-du.du-x-page {
  overflow-x: clip !important;
  overflow-y: visible !important;
}
@media (min-width: 768px) {
  .pbc-du #tandemGrid .schedule-calendar-grid-header {
    position: sticky;
    top: var(--du-x-top, 0px);
    z-index: 30;
  }
}
/* Las horas vacías seguidas se pliegan en una línea «Mostrar 00:00–07:00»
   (Guille 09/11): se ve todo el día sin barra propia. Un toque las despliega. */
.pbc-du #tandemGrid .du-x-folded { display: none !important; }
.pbc-du #tandemGrid .du-x-fold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid hsl(var(--pbc-line-soft));
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-blue));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  cursor: pointer;
}
.pbc-du #tandemGrid .du-x-fold:hover { text-decoration: underline; }
.pbc-du #tandemGrid .du-x-fold svg { width: 18px; height: 18px; flex: 0 0 auto; }


/* ── 2 · LA FICHA DE UN INTERCAMBIO (P3TicketDesk) ───────────────────────── */
/* La misma ficha de siempre (la pinta tandems.js), con las piezas nuevas. En el
   ordenador, una tarjeta blanca centrada con el calendario borroso detrás; en
   el móvil, a pantalla completa como hoy. */
.pbc-du #tandemDetailModal::backdrop,
.pbc-du #tandemDayModal::backdrop {
  background: hsl(var(--pbc-ink) / .4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
@media (min-width: 640px) {
  .pbc-du #tandemDetailModal,
  .pbc-du #tandemDetailModal:modal,
  .pbc-du #tandemDayModal,
  .pbc-du #tandemDayModal:modal {
    max-width: 560px !important;
    border-radius: 24px;
    box-shadow: 0 30px 60px hsl(var(--pbc-ink) / .35);
  }
}
.pbc-du #tandemDetailModal,
.pbc-du #tandemDayModal {
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}

/* 2.1 · Arriba: los idiomas con su bandera (en negro sobre blanco) y copiar,
   compartir y cerrar como cuadritos secundarios. */
.pbc-du #tandemDetailModal .tandem-modal-header,
.pbc-du #tandemDayModal .tandem-modal-header {
  align-items: flex-start;
  padding: 22px 22px 12px;
  background: hsl(var(--pbc-surface));
  box-shadow: none;
}
.pbc-du #tandemDetailModal .tandem-modal-title,
.pbc-du #tandemDayModal .tandem-modal-header h3 {
  color: hsl(var(--pbc-ink)) !important;
  font-weight: var(--pbc-weight-bold);
}
.pbc-du #tandemDetailModal .tandem-modal-title__row {
  gap: 10px;
  font-size: var(--pbc-size-title-m);
  line-height: 1.2;
}
.pbc-du #tandemDetailModal .tandem-modal-title__row .fi {
  font-size: var(--pbc-size-title-m);
  border-radius: 4px;
  box-shadow: 0 0 0 1px hsl(var(--pbc-ink) / .12);
}
.pbc-du #tandemDetailModal .tandem-modal-header button,
.pbc-du #tandemDayModal .tandem-modal-header button {
  width: 44px !important;
  height: 44px !important;
  margin-left: 4px;
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-field) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du #tandemDetailModal .tandem-modal-header button:active,
.pbc-du #tandemDayModal .tandem-modal-header button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 hsl(var(--pbc-line));
}
.pbc-du #tandemDetailModal .tandem-modal-header button.td-flash {
  background: hsl(var(--pbc-green-soft)) !important;
  color: hsl(var(--pbc-green)) !important;
}
.pbc-du #tandemDetailModal .tandem-modal-header button svg,
.pbc-du #tandemDayModal .tandem-modal-header button svg { width: 20px; height: 20px; }

/* 2.2 · El cuerpo: aire entre bloques y texto de 17. */
.pbc-du #tandemDetailModal .space-y-4 > * + * { margin-top: 16px; }
/* Tipo de plan en bocadillo: «Intercambio · Gratis · 2 personas» (lo pone tandems.js). */
.pbc-du #tandemDetailModal .du-x-tagrow { display: flex; margin: 0; }
/* Cuándo: «Jueves 12 nov · 16:00–16:50 (Madrid) · 50 min». */
.pbc-du #tandemDetailModal .du-x-when {
  gap: 8px !important;
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-body) !important;
  font-weight: var(--pbc-weight-bold) !important;
  line-height: 1.35;
}
.pbc-du #tandemDetailModal .du-x-when svg { width: 20px; height: 20px; flex: 0 0 auto; color: hsl(var(--pbc-muted)); }
/* Plazas: «1/2 · falta alguien que hable inglés», con una bolita por plaza. */
.pbc-du #tandemDetailModal #tdGroup {
  gap: 8px !important;
  color: hsl(var(--pbc-cyan-ink)) !important;
  font-size: var(--pbc-size-label) !important;
}
.pbc-du #tandemDetailModal .du-x-dots { display: inline-flex; gap: 4px; }
.pbc-du #tandemDetailModal .du-x-dot {
  box-sizing: border-box;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsl(var(--pbc-cyan-ink));
}
.pbc-du #tandemDetailModal .du-x-dot--free {
  border: 2px solid hsl(var(--pbc-cyan-line));
  background: transparent;
}
.pbc-du #tandemDetailModal .du-x-seats { font-weight: var(--pbc-weight-bold); }
.pbc-du #tandemDetailModal .du-x-seats--full { color: hsl(var(--pbc-ink-soft)); }

/* Avisos de dentro: tarjetas suaves, sin colores fuertes. */
.pbc-du #tandemDetailModal #tdNativeCta {
  border: 1px solid hsl(var(--pbc-cyan-line));
  background: hsl(var(--pbc-cyan-soft)) !important;
  color: hsl(var(--pbc-cyan-ink)) !important;
}
.pbc-du #tandemDetailModal #tdNativeCta > i { display: none; }
.pbc-du #tandemDetailModal #tdNativeCtaL1 { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du #tandemDetailModal #tdNativeCtaL2 {
  color: hsl(var(--pbc-cyan-ink)) !important;
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
/* Sin el aviso «Pulsa Unirme para crear tu cuenta gratis» (Guille 09/11): la cuenta
   se pide al final, sola. */
.pbc-du #tandemDetailModal #tdGuestNote { display: none !important; }
.pbc-du #tandemDetailModal #tdPastNote,
.pbc-du #tandemDetailModal #tdLinkPending,
.pbc-du #tandemDetailModal #tdMatchLine {
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-radius: var(--pbc-radius-field) !important;
  background: hsl(var(--pbc-page)) !important;
  color: hsl(var(--pbc-ink-soft)) !important;
  font-size: var(--pbc-size-label) !important;
}
.pbc-du #tandemDetailModal #tdDesc { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); line-height: 1.45; }
.pbc-du #tandemDetailModal #tdError,
.pbc-du #tandemDetailModal #tdEditError {
  border: 0 !important;
  border-radius: var(--pbc-radius-field) !important;
  background: hsl(var(--pbc-red-soft)) !important;
  color: hsl(var(--pbc-red-dark)) !important;
  font-size: var(--pbc-size-label) !important;
  font-weight: var(--pbc-weight-bold) !important;
}

/* 2.3 · «Quién está»: anfitrión y el resto, con su bandera y su chapa. */
.pbc-du #tandemDetailModal #tdPartLabel {
  color: hsl(var(--pbc-muted)) !important;
  font-size: var(--pbc-size-small) !important;
  letter-spacing: .04em;
}
.pbc-du #tandemDetailModal #tdParticipants .tandem-part-name {
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-body) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du #tandemDetailModal #tdParticipants .tandem-part-ini {
  background: hsl(var(--pbc-cyan-ink)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
/* «Anfitrión» sin mayúsculas forzadas, en el bocadillo turquesa suave. */
.pbc-du #tandemDetailModal #tdParticipants .uppercase {
  padding: 2px 8px !important;
  border-radius: 8px !important;
  background: hsl(var(--pbc-cyan-soft)) !important;
  color: hsl(var(--pbc-cyan-ink)) !important;
  font-size: var(--pbc-size-small) !important;
  text-transform: none;
}
/* «Todavía sin historial»: gris de la casa, sin cursiva. */
.pbc-du #tandemDetailModal #tdParticipants [style*="italic"] {
  color: hsl(var(--pbc-muted)) !important;
  font-size: var(--pbc-size-small) !important;
  font-style: normal !important;
}

/* 2.4 · «¿Qué hablas tú?» y el botón azul que dice qué hablas y qué practicas:
   «Hablo inglés · Me apunto para practicar turco». Azul = unirme, en los dos
   lados (antes uno azul y otro amarillo; amarillo es pagar). */
.pbc-du #tandemDetailModal #tdChooseQ {
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-title-s) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du #tandemDetailModal .tandem-join3d {
  --tandem-join3d-shade: hsl(var(--pbc-blue-dark)) !important;
  gap: 14px;
  min-height: 64px;
  padding: 14px 18px;
  border-radius: 18px;
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  font-family: var(--pbc-font);
  filter: none;
}
.pbc-du #tandemDetailModal .tandem-join3d::after { transform: translateY(4px); }
.pbc-du #tandemDetailModal .tandem-join3d:active { transform: translateY(3px); }
.pbc-du #tandemDetailModal .tandem-join3d__flag {
  font-size: var(--pbc-size-title-l);
  border-radius: 5px;
  box-shadow: 0 0 0 2px hsl(var(--pbc-on-color) / .7);
}
.pbc-du #tandemDetailModal .tandem-join3d__t1 { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du #tandemDetailModal .tandem-join3d__t2 {
  margin-top: 3px;
  color: hsl(var(--pbc-blue-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  opacity: 1;
}
/* Solo escuchar: secundario. */
.pbc-du #tandemDetailModal .tandem-join3d--listen {
  --tandem-join3d-shade: hsl(var(--pbc-line)) !important;
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
}
.pbc-du #tandemDetailModal .tandem-join3d--listen .tandem-join3d__t2 { color: hsl(var(--pbc-muted)); }

/* El recuadro del nivel (ordenador): campo de la casa y botón azul. */
.pbc-du #tandemDetailModal #tdJoinLevelWrap {
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-radius: var(--pbc-radius-card) !important;
  background: hsl(var(--pbc-blue-soft)) !important;
}
.pbc-du #tandemDetailModal #tdJoinLevelLabel {
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-title-s) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du #tandemDetailModal #tdJoinLevel,
.pbc-du #tandemDetailModal #tdEditForm select,
.pbc-du #tandemDetailModal #tdEditForm input {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-field) !important;
  background-color: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body) !important;
}
.pbc-du #tandemDetailModal #tdJoinLevel:focus,
.pbc-du #tandemDetailModal #tdEditForm select:focus {
  border-color: hsl(var(--pbc-blue)) !important;
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)) !important;
  outline: 0;
}
.pbc-du #tandemDetailModal #tdEditForm {
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-radius: var(--pbc-radius-card) !important;
  background: hsl(var(--pbc-page)) !important;
}

/* 2.5 · Temas de conversación: una fila de la casa. */
.pbc-du #tandemDetailModal .du-x-topics {
  min-height: 52px;
  padding: 12px 16px !important;
  border: 1px solid hsl(var(--pbc-line-soft)) !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-cyan-ink)) !important;
  font-size: var(--pbc-size-label) !important;
  font-weight: var(--pbc-weight-bold) !important;
}

/* 2.6 · Abajo: los botones de siempre con las piezas de la casa. */
.pbc-du #tandemDetailModal .tandem-btn-primary,
.pbc-du #tandemDetailModal .tandem-btn-ghost,
.pbc-du #tandemDetailModal .tandem-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--pbc-radius-button);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: none;
}
.pbc-du #tandemDetailModal .tandem-btn-primary {
  border: 0;
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du #tandemDetailModal .tandem-btn-ghost {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du #tandemDetailModal .tandem-btn-danger {
  border: 2px solid hsl(var(--pbc-red) / .3);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-red-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-red) / .3);
}
.pbc-du #tandemDetailModal .tandem-btn-primary:active,
.pbc-du #tandemDetailModal .tandem-btn-ghost:active,
.pbc-du #tandemDetailModal .tandem-btn-danger:active { transform: translateY(2px); }
.pbc-du #tandemDetailModal #tdJoinConfirm { width: 100%; min-height: 54px; font-size: var(--pbc-size-body); }


/* ── 3 · EL TICKET DE QUIEN YA ESTÁ APUNTADO ─────────────────────────────── */
/* exchanges/exchange-ticket-v2.html (móvil, fase 2) y exchange-ticket.html (el
   de siempre, en ordenador). Mismas piezas, mismos botones y la misma barra de
   abajo; solo el aspecto: fondo blanco, tarjeta de la casa, la letra de la casa,
   «Empieza en» en píldora amarilla suave, verde = entrar y sin troquel. Los
   colores del ticket salen de sus variables, que aquí apuntan a la paleta. */
.pbc-du .pbc-mticket-app {
  --pbc-mticket-blue: hsl(var(--pbc-blue));
  --pbc-mticket-blue-dark: hsl(var(--pbc-blue-dark));
  --pbc-mticket-blue-soft: hsl(var(--pbc-blue-soft));
  --pbc-mticket-turquoise: hsl(var(--pbc-cyan));
  --pbc-mticket-yellow: hsl(var(--pbc-gold));
  --pbc-mticket-yellow-edge: hsl(var(--pbc-gold-dark));
  --pbc-mticket-ink: hsl(var(--pbc-ink));
  --pbc-mticket-muted: hsl(var(--pbc-muted));
  --pbc-mticket-bg: hsl(var(--pbc-surface));
  --pbc-mticket-line: hsl(var(--pbc-line));
  --pbc-mticket-success: hsl(var(--pbc-green));
  --pbc-mticket-white: hsl(var(--pbc-surface));
  font-family: var(--pbc-font);
}
/* La cabecera azul con su curva se queda; azul liso de la casa. */
.pbc-du .pbc-mticket-header { background: hsl(var(--pbc-blue)); }
.pbc-du .pbc-mticket-header-title {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
}
/* La tarjeta: blanca, línea fina, radio 20 y sombra suave. */
.pbc-du .pbc-mticket-ticket {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-mticket-language { font-weight: var(--pbc-weight-bold); }
/* «Intercambio · Gratis · 2 personas», centrado bajo los idiomas. */
.pbc-du .pbc-mticket-app .du-x-ttag { display: flex; width: fit-content; margin: 16px auto 0; }
.pbc-du .pbc-t2 .pbc-t2-chips { margin-top: 10px; }
.pbc-du .pbc-t2 .pbc-t2-chip {
  border: 1px solid hsl(var(--pbc-line));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
/* Confirmado / Por confirmar: etiquetas de estado de la casa. */
.pbc-du .pbc-t2 .pbc-t2-status {
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-t2 .pbc-t2-status--yes { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-green)); }
.pbc-du .pbc-t2 .pbc-t2-status--wait { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue-dark)); }
/* La fecha: grande, pero con la letra de la casa (700, no 900). */
.pbc-du .pbc-mticket-datetime {
  font-size: var(--pbc-size-title-m);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.3px;
}
/* «Empieza en 1 día 16 h»: la píldora amarilla suave de la maqueta. */
.pbc-du .pbc-t2 .pbc-t2-left {
  justify-content: center;
  gap: 6px;
  width: fit-content;
  margin: 14px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: hsl(var(--pbc-gold-soft));
  color: hsl(var(--pbc-gold-ink));
}
.pbc-du .pbc-t2 .pbc-t2-left span,
.pbc-du .pbc-t2 .pbc-t2-left b {
  color: hsl(var(--pbc-gold-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-t2 .pbc-t2-small,
.pbc-du .pbc-t2 .pbc-t2-ready,
.pbc-du .pbc-t2 .pbc-t2-steps li { font-size: var(--pbc-size-label); }
/* Sin troquel: una línea fina entre arriba y abajo. */
.pbc-du .pbc-mticket-divider {
  height: 0;
  margin: 24px 24px 22px;
  border-top: 1px solid hsl(var(--pbc-line-soft));
}
.pbc-du .pbc-mticket-divider::before,
.pbc-du .pbc-mticket-divider::after { display: none; }
/* Títulos de sección («Quién viene», «Qué va a pasar»…). */
.pbc-du .pbc-t2 .pbc-t2-kick,
.pbc-du .pbc-mticket-participants-label {
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: .04em;
}
.pbc-du .pbc-mticket-confirmation-title,
.pbc-du .pbc-mticket-confirmation-heading {
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.3px;
}
.pbc-du .pbc-mticket-person-name {
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mticket-person-lang { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }
/* Botones: azul por defecto (buscar otro, valorar), VERDE para entrar a la sala,
   blanco con borde para lo secundario. Todos se hunden al pulsar. */
.pbc-du .pbc-mticket-primary {
  border: 0;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mticket-primary:active { box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .pbc-mticket-primary[data-t2-enter],
.pbc-du .pbc-mticket-primary.du-x-enter {
  background: hsl(var(--pbc-green));
  box-shadow: 0 4px 0 hsl(var(--pbc-green-dark));
}
.pbc-du .pbc-mticket-primary[data-t2-enter]:active,
.pbc-du .pbc-mticket-primary.du-x-enter:active { box-shadow: 0 1px 0 hsl(var(--pbc-green-dark)); }
.pbc-du .pbc-mticket-secondary,
.pbc-du .pbc-mticket-cal-btn {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mticket-secondary:active,
.pbc-du .pbc-mticket-cal-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
/* «¿Vienes?»: el «Sí, voy» del propio ticket, azul que se hunde. */
.pbc-du .pbc-mticket-ask { border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-blue-soft)); }
.pbc-du .pbc-mticket-ask-title { color: hsl(var(--pbc-blue-dark)); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mticket-ask-btn {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
/* La barra de abajo (ticket nuevo): «Se abre a las…» en gris de «aún no»; los
   enlaces en azul de la casa. */
.pbc-du .pbc-t2-bar { font-family: var(--pbc-font); border-top-color: hsl(var(--pbc-line-soft)); }
.pbc-du .pbc-t2-bar .pbc-t2-wait {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-t2-bar .pbc-t2-link {
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-t2-bar .pbc-t2-remind { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }
/* 3.1 · En el ordenador, a lo ancho (Guille 10/11/2026: «que el diseño complete la
   pantalla»; nunca la columna del móvil en el centro). La cabecera azul, de lado a
   lado; el ticket, ancho y en dos columnas: a la izquierda los idiomas, la fecha,
   quién está y los botones; a la derecha la confirmación y los avisos, con una línea
   fina en medio en vez del troquel. Los botones, a su ancho (máx. 360 px). */
@media (min-width: 1024px) {
  .pbc-du .pbc-mticket-app { max-width: none; }
  .pbc-du .pbc-mticket-header-bar,
  .pbc-du .pbc-mticket-header-title { max-width: 1040px; margin-inline: auto; }
  .pbc-du .pbc-mticket-main { max-width: 1040px; margin-inline: auto; padding-inline: 24px; }
  .pbc-du .pbc-mticket-ticket {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .pbc-du .pbc-mticket-ticket > .pbc-mticket-ticket-top { grid-column: 1; grid-row: 1; padding: 32px 40px; }
  .pbc-du .pbc-mticket-ticket > .pbc-mticket-divider { display: none; }
  .pbc-du .pbc-mticket-ticket > .pbc-mticket-ticket-bottom {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    padding: 32px 40px;
    border-inline-start: 1px solid hsl(var(--pbc-line-soft));
  }
  .pbc-du .pbc-mticket-ticket-top > .pbc-mticket-primary,
  .pbc-du .pbc-mticket-ticket-top > .pbc-mticket-secondary,
  .pbc-du .pbc-mticket-ticket-top > .pbc-xinv-row { max-width: 360px; margin-inline: auto; }
}


/* ── 4 · CONECTA EN EL MÓVIL (exchanges/my-exchanges.html) ───────────────── */
/* La pantalla de siempre (crear, buscar, hablar ahora, tus intercambios,
   eventos, sugeridos y opiniones), con las piezas de la casa: fondo blanco,
   botones que se hunden, tarjetas de línea fina, sin mascota. */
.pbc-du .pbc-minter-screen { background: hsl(var(--pbc-surface)); }
.pbc-du .pbc-minter-section-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
}
/* Crear (amarillo, como «+ Crear un intercambio» del ordenador) y Buscar
   (blanco con borde): los dos se hunden al pulsar. */
.pbc-du .pbc-minter-button {
  border-radius: var(--pbc-radius-card);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-minter-button-primary { box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark)); }
.pbc-du .pbc-minter-button-secondary {
  border: 2px solid hsl(var(--pbc-line));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .pbc-minter-button:active { transform: translateY(3px); box-shadow: none; }
/* «Habla ahora mismo»: verde = entrar ya, liso y con su canto. */
.pbc-du .pbc-minter-live {
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-green));
  box-shadow: 0 4px 0 hsl(var(--pbc-green-dark));
}
.pbc-du .pbc-minter-live-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-minter-live-sub { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
/* Tarjetas: blancas, línea fina, radio 20 y sombra suave. */
.pbc-du .pbc-minter-card,
.pbc-du .pbc-minter-invite-card,
.pbc-du .pbc-cev-card {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
/* Estados: lleno en gris, falta gente en amarillo suave (rojo es cancelar). */
.pbc-du .pbc-minter-status {
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-minter-status-full { background: hsl(var(--pbc-line-soft)); color: hsl(var(--pbc-ink-soft)); }
.pbc-du .pbc-minter-status-missing { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-gold-ink)); }
/* Invitar a alguien (el «+» de cada tarjeta): secundario, nunca rojo. */
.pbc-du .pbc-minter-invite {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-blue));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
/* «¿Vienes a tu intercambio?»: tarjeta amarilla suave lisa y «Sí, voy» azul. */
.pbc-du .pbc-minter-confirm {
  border: 1px solid hsl(var(--pbc-gold) / .6);
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-gold-soft));
  box-shadow: none;
}
.pbc-du .pbc-minter-confirm-btn,
.pbc-du .pbc-minter-invite-yes,
.pbc-du .pbc-minter-suggest-join {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-minter-confirm-btn:active,
.pbc-du .pbc-minter-invite-yes:active,
.pbc-du .pbc-minter-suggest-join:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .pbc-minter-invite-no,
.pbc-du .pbc-minter-empty-button-secondary {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-minter-empty-button-primary {
  border-radius: var(--pbc-radius-button);
  box-shadow: 0 4px 0 hsl(var(--pbc-gold-dark));
}
/* Sin mascotas en pantallas de alumnos (Guille, 08-09/11/2026). */
.pbc-du .pbc-minter-empty-image { display: none; }
/* Valorar el último intercambio. */
.pbc-du .pbc-minter-rate {
  border: 1px solid hsl(var(--pbc-cyan-line));
  border-radius: var(--pbc-radius-card);
}
.pbc-du .pbc-minter-rate-cta {
  border-radius: 12px;
  background: hsl(var(--pbc-blue));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
/* Próximos eventos (carrusel): la etiqueta «Evento · Gratis» en bocadillo. */
.pbc-du .pbc-cev-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-cev-all { color: hsl(var(--pbc-blue)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-cev-when { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-cev-when svg { color: hsl(var(--pbc-muted)); }
.pbc-du .pbc-cev-going { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); }
.pbc-du .pbc-cev-live {
  background: hsl(var(--pbc-red-soft));
  color: hsl(var(--pbc-red-dark));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-cev-lang svg { width: 18px; height: 18px; flex: 0 0 auto; }
/* Sugeridos: «Yo hablo · Quiero practicar» con los campos de la casa. */
.pbc-du .pbc-langpick label { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-langpick select {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
}
.pbc-du .pbc-langpick select:focus { border-color: hsl(var(--pbc-blue)); box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)); outline: 0; }
.pbc-du .pbc-langpick-empty,
.pbc-du .pbc-langpick-done { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-langpick-done a { color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-missing,
.pbc-du .pbc-lf-create { border-radius: var(--pbc-radius-card); background: hsl(var(--pbc-gold-soft)); }
.pbc-du .pbc-three-done { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-ink)); }
/* «¿Ninguna hora te va? Crea la tuya»: al final de los sugeridos, secundario. */
.pbc-du .du-x-own {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  margin: 0 0 18px;
  padding: 10px 16px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-blue-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-align: center;
  text-decoration: none;
}
.pbc-du .du-x-own:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .du-x-own svg { width: 20px; height: 20px; flex: 0 0 auto; }
/* El vídeo de la comunidad: entero (ancho fijo, alto natural), sin bandas negras. */
.pbc-du .du-x-video { margin: 0 0 18px; }
.pbc-du .du-x-video video {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto;
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-page));
}
.pbc-du .du-x-video figcaption {
  margin-top: 8px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-align: center;
}


/* ── 5 · EVENTOS (weekly_events.html + includes/meventos_list.html) ──────── */
/* La agenda de siempre (filtros, tarjetas, quién va, encuestas, salas) con las piezas de
   la casa, según la maqueta M8EventosDesk (Guille 12/11/2026, aprobada): UNA lista
   ordenada por fecha en rejilla (tres columnas, dos en pantallas medianas, una en el
   móvil) y SIN encabezados de día: cada tarjeta lleva el suyo en una etiqueta. Dentro
   de la tarjeta: «Evento» + idioma + día, el día y la hora grandes, el título, «Con
   [anfitrión]», la descripción y el botón con su ancho normal y el nivel y la duración al
   lado. La foto grande ya no va en la lista (un botón la abre entera). «Proponer un
   evento» arriba a la derecha en el ordenador y, en el móvil, al final (nunca lo
   primero). Nunca la columna del móvil estirada. */
.pbc-du .pbc-meventos-page { background: hsl(var(--pbc-surface)); font-family: var(--pbc-font); }
.pbc-du .pbc-meventos-title {
  font-size: var(--pbc-size-title-xl);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du .pbc-meventos-subtitle { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-regular); }

/* 5.1 · Cabecera: título a la izquierda y «Proponer» a la derecha (solo en el ordenador). */
.pbc-du .du-ev-head { display: flex; flex-direction: column; gap: 14px; }
.pbc-du .du-ev-head-text { min-width: 0; flex: 1 1 auto; }
.pbc-du .du-ev-propose-top { display: none; }
.pbc-du .du-ev-propose-end { margin-top: 24px; }
.pbc-du .pbc-meventos-propose {
  border: 0;
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-page));
  box-shadow: none;
}
.pbc-du .pbc-meventos-propose-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-meventos-propose-text { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-meventos-propose .pbc-meventos-button-blue {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .du-ev-propose-top .pbc-meventos-propose {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  background: none;
}
.pbc-du .du-ev-propose-top .pbc-meventos-propose-text-box { display: flex; align-items: center; gap: 14px; }
.pbc-du .du-ev-propose-top .pbc-meventos-propose-title {
  margin: 0;
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
}
.pbc-du .du-ev-propose-top .pbc-meventos-propose-text { display: none; }
.pbc-du .du-ev-propose-top .pbc-meventos-button {
  width: auto;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--pbc-radius-field);
  font-size: var(--pbc-size-label);
  white-space: nowrap;
}

/* 5.2 · Filtro de idiomas: en fila, con todas las banderas (píldoras de la casa). */
.pbc-du .pbc-meventos-filters { gap: 10px; }
.pbc-du .pbc-meventos-chip {
  min-height: 46px;
  padding-inline: 16px;
  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-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-meventos-chip.is-on {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
}

/* 5.3 · La rejilla: los días y las semanas se deshacen en una sola lista por fecha. */
.pbc-du .du-ev-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; }
.pbc-du .du-ev-grid .pbc-meventos-group { display: contents; }
.pbc-du .du-ev-grid .pbc-meventos-group[hidden] { display: none; }
.pbc-du .du-ev-grid .pbc-meventos-next:not([hidden]) { display: contents; }
.pbc-du .du-ev-grid .pbc-meventos-next[hidden] { display: none; }
.pbc-du .du-ev-grid .pbc-meventos-day { display: none; }
.pbc-du .du-ev-grid .pbc-meventos-week-break { grid-column: 1 / -1; }

/* 5.4 · La tarjeta: las piezas de siempre, en el orden de la maqueta. */
.pbc-du .pbc-meventos-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 20px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-meventos-card[hidden] { display: none; }
.pbc-du .pbc-meventos-card-live { border-left: 5px solid hsl(var(--pbc-green)); }
.pbc-du .pbc-meventos-card > * { order: 20; margin: 0; }
.pbc-du .pbc-meventos-card > .pbc-meventos-card-top { order: 1; }
.pbc-du .pbc-meventos-card > .pbc-meventos-when { order: 2; }
.pbc-du .pbc-meventos-card > .pbc-meventos-topic { order: 3; }
.pbc-du .pbc-meventos-card > .pbc-meventos-host { order: 4; }
.pbc-du .pbc-meventos-card > .pbc-meventos-note-box,
.pbc-du .pbc-meventos-card > .pbc-meventos-note { order: 5; }
.pbc-du .pbc-meventos-card > .du-ev-foot { order: 30; margin-top: auto; }

/* Arriba: «Evento» + idioma a la izquierda y el día a la derecha. */
.pbc-du .pbc-meventos-card-top { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; }
.pbc-du .pbc-meventos-card-tags { display: flex; align-items: center; flex: 1 1 0; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pbc-du .pbc-meventos-language {
  border: 0;
  border-radius: 10px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-meventos-teacher-badge {
  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 .du-ev-day {
  flex: none;
  margin-inline-start: auto;
  padding: 4px 10px;
  border-radius: 10px;
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
  white-space: nowrap;
}
.pbc-du .du-ev-day--today { background: hsl(var(--pbc-green-soft)); color: hsl(var(--pbc-green)); }
.pbc-du .pbc-meventos-live-label {
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}

/* El día y la hora, grandes y en azul, con la zona de quien mira. */
.pbc-du .pbc-meventos-when {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
  line-height: 1.35;
}
.pbc-du .pbc-meventos-clock { flex: none; width: 20px; height: 20px; margin-top: 3px; }
.pbc-du .pbc-meventos-time { flex: 1 1 auto; min-width: 0; color: inherit; font-weight: var(--pbc-weight-bold); }
.pbc-du .du-ev-nw { white-space: nowrap; }
/* Copiar enlace, compartir y calendario: una fila pequeña, aparte de la hora. */
.pbc-du .du-ev-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pbc-du .du-ev-tools .pbc-meventos-cal { margin: 0; }

/* El título, la descripción (resumen, nunca «…» ni «Leer más») y el anfitrión. */
.pbc-du .pbc-meventos-topic {
  padding: 0;
  border: 0;
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
  line-height: 1.2;
  text-transform: none;
  overflow-wrap: anywhere;
}
.pbc-du .du-ev-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
}
.pbc-du .du-ev-open:hover,
.pbc-du .du-ev-open:focus-visible { text-decoration: underline; text-decoration-color: hsl(var(--pbc-gold)); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.pbc-du .pbc-meventos-note {
  display: block;
  overflow: visible;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  line-height: 1.45;
  -webkit-line-clamp: unset;
}
.pbc-du .pbc-meventos-note-more { display: none; }
.pbc-du .pbc-meventos-host { display: flex; align-items: center; gap: 10px; padding-top: 0; border-top: 0; }
.pbc-du .pbc-meventos-host-avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 50%;
  background: hsl(var(--pbc-cyan-soft));
  color: hsl(var(--pbc-cyan-ink));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-meventos-host-photo { width: 100%; height: 100%; object-fit: cover; }
.pbc-du .pbc-meventos-host-copy {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-label);
}
.pbc-du .pbc-meventos-host-label {
  color: inherit;
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-regular);
  letter-spacing: 0;
  text-transform: none;
}
.pbc-du .pbc-meventos-host-name { color: hsl(var(--pbc-ink)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }

/* El pie: el botón con su ancho normal y, al lado, el nivel y la duración. */
.pbc-du .du-ev-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding-top: 6px; }
.pbc-du .du-ev-foot [hidden] { display: none; }
.pbc-du .du-ev-foot .pbc-meventos-actions { display: flex; flex: 0 0 auto; width: auto; margin: 0; gap: 8px; }
.pbc-du .du-ev-foot .pbc-meventos-link-row { flex: 1 0 100%; margin: 0; }
.pbc-du .du-ev-foot .we-breakout { flex: 1 0 100%; }
.pbc-du .du-ev-meta { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .du-ev-photo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-inline-start: auto;
  padding: 0;
  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-blue-dark));
  cursor: pointer;
}

/* Botones: Unirme azul (antes amarillo: amarillo es pagar), Entrar verde en cuanto abre
   la puerta, gris de «aún no» mientras tanto. En la lista, con su ancho normal. */
.pbc-du .pbc-meventos-button {
  min-height: 46px;
  border-radius: var(--pbc-radius-field);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-ev-foot .pbc-meventos-button { width: auto; padding: 0 22px; }
.pbc-du .pbc-meventos-button-yellow {
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .pbc-meventos-enter.pbc-meventos-button-blue,
.pbc-du .pbc-meventos-joinmeet.pbc-meventos-button-blue {
  background: hsl(var(--pbc-green));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 3px 0 hsl(var(--pbc-green-dark));
}
.pbc-du .pbc-meventos-button-muted {
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
}
.pbc-du .pbc-meventos-button:active { transform: translateY(3px); }

/* 5.5 · La ficha: la descripción ENTERA de un evento cuyo resumen sale en la tarjeta. */
.pbc-du .du-ev-ficha {
  width: min(560px, calc(100% - 32px));
  max-height: calc(100% - 48px);
  padding: 22px 22px 26px;
  border: 0;
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 18px 48px hsl(var(--pbc-shadow) / .28);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du .du-ev-ficha::backdrop { background: hsl(var(--pbc-ink) / .45); }
.pbc-du .du-ev-ficha-head { display: flex; align-items: flex-start; gap: 12px; }
.pbc-du .du-ev-ficha-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--pbc-size-title-s);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.4px;
  line-height: 1.2;
}
.pbc-du .du-ev-ficha-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: hsl(var(--pbc-ink-soft));
  cursor: pointer;
}
.pbc-du .du-ev-ficha-when {
  margin: 10px 0 0;
  color: hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-ev-ficha-text {
  margin: 12px 0 0;
  color: hsl(var(--pbc-ink-soft));
  font-size: var(--pbc-size-body);
  line-height: 1.5;
  white-space: pre-line;
}

/* 5.6 · Medianas: dos columnas. Grandes: tres, y «Proponer» arriba a la derecha. */
@media (min-width: 768px) {
  .pbc-du .du-ev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
  .pbc-du .pbc-meventos-app { max-width: none; }
  .pbc-du .pbc-meventos-main {
    width: min(1360px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 30px 40px 48px;
  }
  .pbc-du .du-ev-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  .pbc-du .du-ev-propose-top { display: block; flex: none; }
  .pbc-du .du-ev-propose-end { display: none; }
}
@media (min-width: 1200px) {
  .pbc-du .du-ev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ── 6 · PROPONER UN EVENTO (propose_event.html y propose_event_sent.html) ─ */
/* El formulario de siempre (mismos campos, mismas reglas: nativo, temática,
   aprobación), con los campos de la casa (maqueta P3Form): etiqueta en negrita,
   campo de 52 px con borde de 2 px y radio 14, halo azul al enfocar y el botón
   azul que se hunde. Muchas piezas llevan el estilo escrito en la etiqueta: por
   eso aquí hace falta !important. */
.pbc-du.du-pe-page .container { font-family: var(--pbc-font); color: hsl(var(--pbc-ink)); }
.pbc-du.du-pe-page .container > h1 {
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-title-l) !important;
  font-weight: var(--pbc-weight-bold) !important;
  letter-spacing: -.5px;
}
.pbc-du .pe-label {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pe-help { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); line-height: 1.4; }
.pbc-du .pe-input {
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 14px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background-color: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
}
.pbc-du textarea.pe-input { padding: 12px 14px; }
.pbc-du input[type="file"].pe-input { padding: 12px 14px; }
.pbc-du .pe-input:focus {
  border-color: hsl(var(--pbc-blue));
  box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft));
  outline: 0;
}
.pbc-du .pe-input:user-invalid { border-color: hsl(var(--pbc-red)); background-color: hsl(var(--pbc-red-soft)); }
/* Opciones (tipo de evento, sí/no): el círculo azul de la casa. */
.pbc-du #pe-form input[type="radio"],
.pbc-du #pe-form input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: hsl(var(--pbc-blue));
}
.pbc-du #pe-form label[style*="border:1px solid"] {
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-field) !important;
}
.pbc-du #pe-form label[style*="border:1px solid"]:has(input:checked) {
  border-color: hsl(var(--pbc-blue)) !important;
  background: hsl(var(--pbc-blue-soft));
}
/* Enviar: el azul que se hunde, grande. */
.pbc-du #pe-submit {
  min-height: 56px;
  padding: 0 28px !important;
  border-radius: var(--pbc-radius-button) !important;
  background: hsl(var(--pbc-blue)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body) !important;
  font-weight: var(--pbc-weight-bold) !important;
}
.pbc-du #pe-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
@media (max-width: 767.98px) {
  .pbc-du #pe-submit { width: 100%; }
  .pbc-du #pe-submit + a { display: block; margin: 14px 0 0 !important; text-align: center; }
}
/* Tus eventos (debajo del formulario): botones de la casa, cancelar en rojo oscuro. */
.pbc-du .pe-edit,
.pbc-du .pe-offer {
  min-height: 40px;
  border: 2px solid hsl(var(--pbc-line)) !important;
  border-radius: var(--pbc-radius-field) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  font-size: var(--pbc-size-small) !important;
}
.pbc-du .pe-cancel {
  min-height: 40px;
  border: 2px solid hsl(var(--pbc-red) / .3) !important;
  border-radius: var(--pbc-radius-field) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-red-dark)) !important;
  font-size: var(--pbc-size-small) !important;
}
/* «Evento enviado»: botones de la casa. */
.pbc-du .pes-btn {
  min-height: 52px;
  padding: 14px 22px;
  border-radius: var(--pbc-radius-button);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
/* Ver el evento / Ver todos: azul. «Proponer otro»: secundario. */
.pbc-du .pes-btn {
  background: hsl(var(--pbc-blue)) !important;
  color: hsl(var(--pbc-on-color)) !important;
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du .pes-btn[href*="propo"] {
  border: 2px solid hsl(var(--pbc-line)) !important;
  background: hsl(var(--pbc-surface)) !important;
  color: hsl(var(--pbc-ink)) !important;
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .pes-btn:active { transform: translateY(3px); }


/* ── 7 · DESPUÉS DEL INTERCAMBIO (tandem-feedback.html) ──────────────────── */
/* Maqueta P07 de la auditoría (fase 5): «¡Intercambio hecho!» con los minutos y
   su nombre, insignia verde (nunca mascota), valorar con estrellas a cada uno
   («solo lo ve el equipo»), y al dar las gracias «Repetir con…» azul, «Añadir
   como amigo» y que el intercambio suma puntos. Mismo formulario y mismas
   reglas de siempre (repetir solo con 4-5 estrellas). */
.pbc-du.du-fb-page .tfb-wrap { color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du .tfb-badge.du-fb-ok,
.pbc-du .tfb-badge.du-fb-wait {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  box-shadow: none;
}
.pbc-du .tfb-badge.du-fb-wait { background: hsl(var(--pbc-page)); color: hsl(var(--pbc-muted)); }
.pbc-du .tfb-badge svg { width: 38px; height: 38px; }
.pbc-du .tfb-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du .tfb-sub { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
.pbc-du .tfb-private {
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-muted));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .tfb-card,
.pbc-du .tfb-wrap .fc10 {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .tfb-card.tfb-invalid { border-color: hsl(var(--pbc-red)); }
.pbc-du .tfb-person { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .tfb-q { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .tfb-star { color: hsl(var(--pbc-line)); font-size: var(--pbc-size-title-xl); }
.pbc-du .tfb-star.on { color: hsl(var(--pbc-gold)); }
.pbc-du .tfb-chip {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .tfb-chip.on {
  border-color: hsl(var(--pbc-red) / .3);
  background: hsl(var(--pbc-red-soft));
  color: hsl(var(--pbc-red-dark));
}
.pbc-du .tfb-need { color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); }
.pbc-du .tfb-comment {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
}
.pbc-du .tfb-comment:focus { border-color: hsl(var(--pbc-blue)); box-shadow: 0 0 0 4px hsl(var(--pbc-blue-soft)); }
/* Enviar y «Repetir con…»: el azul que se hunde. */
.pbc-du .tfb-submit {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .tfb-submit:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .tfb-skip { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }
.pbc-du .tfb-wrap .fc10-title { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .tfb-wrap .fc10-text { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-label); }
.pbc-du .tfb-wrap .fc10-later {
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
/* «Este intercambio suma puntos a tu perfil»: la nota verde de la maqueta. */
.pbc-du .du-fb-points {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .du-fb-points svg { width: 22px; height: 22px; flex: 0 0 auto; color: hsl(var(--pbc-green)); }


/* ── 8 · CREAR UN INTERCAMBIO EN EL MÓVIL (exchanges/create.html) ────────── */
/* Los mismos pasos de siempre (idiomas, día, hora, repetir, repaso); solo las
   piezas de la casa, como el asistente de reservar clase: fichas gordas que se
   pulsan (la elegida en azul suave con borde azul, nunca amarillo: amarillo es
   pagar), tarjetas de línea fina, la letra de la casa y el botón azul abajo. */
.pbc-du .pbc-mcrear-title {
  color: hsl(var(--pbc-ink));
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mcrear-card {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-mcrear-card-title { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mcrear-stepno { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-mcrear-pick-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
/* Fichas: idiomas, chips, momentos del día y horas. */
.pbc-du .pbc-mcrear-lang-tile,
.pbc-du .pbc-mcrear-chip,
.pbc-du .pbc-mcrear-pair-chip,
.pbc-du .pbc-mcrear-daypart,
.pbc-du .pbc-mcrear-slot {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mcrear-lang-tile:active,
.pbc-du .pbc-mcrear-chip:active,
.pbc-du .pbc-mcrear-pair-chip:active,
.pbc-du .pbc-mcrear-daypart:active,
.pbc-du .pbc-mcrear-slot:active { transform: translateY(2px); box-shadow: 0 1px 0 hsl(var(--pbc-line)); }
.pbc-du .pbc-mcrear-lang-tile-selected,
.pbc-du .pbc-mcrear-chip-selected,
.pbc-du .pbc-mcrear-pair-chip-selected,
.pbc-du .pbc-mcrear-daypart-selected,
.pbc-du .pbc-mcrear-slot-selected {
  border-color: hsl(var(--pbc-blue));
  background: hsl(var(--pbc-blue-soft));
  color: hsl(var(--pbc-blue-dark));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue));
}
.pbc-du .pbc-mcrear-chip[disabled],
.pbc-du .pbc-mcrear-chip-disabled,
.pbc-du .pbc-mcrear-daypart[disabled],
.pbc-du .pbc-mcrear-slot[disabled] {
  border-color: hsl(var(--pbc-line-soft));
  background: hsl(var(--pbc-page));
  color: hsl(var(--pbc-subtle));
  box-shadow: none;
}
.pbc-du .pbc-mcrear-search-input { color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); font-size: var(--pbc-size-body); }
.pbc-du .pbc-mcrear-results-title { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
/* Abajo: el azul que se hunde para seguir/publicar; el secundario, blanco. */
.pbc-du .pbc-mcrear-action-bar { background: hsl(var(--pbc-surface) / .96); }
.pbc-du .pbc-mcrear-primary {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-mcrear-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .pbc-mcrear-primary[disabled] {
  background: hsl(var(--pbc-line-soft));
  color: hsl(var(--pbc-ink-soft));
  box-shadow: none;
}
.pbc-du .pbc-mcrear-secondary {
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du .pbc-mcrear-error-cta {
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-red-dark));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}


/* ── 9 · CREAR UN INTERCAMBIO EN EL ORDENADOR (asistente tandem-wizard) ──── */
/* El asistente por pasos del calendario (#tandemProposeModal con .tw-on): los
   mismos pasos y botones. Sus colores salen de sus variables; con el diseño
   único apuntan a la paleta de la casa: lo elegido en azul (no turquesa), los
   fondos suaves en azul suave y la letra de la casa. */
.pbc-du .tandem-modal-dialog.tw-on {
  --tw-teal: hsl(var(--pbc-blue));
  --tw-dark: hsl(var(--pbc-blue-dark));
  --tw-blue: hsl(var(--pbc-blue));
  --tw-yellow: hsl(var(--pbc-gold));
  --tw-fill-teal: hsl(var(--pbc-blue-soft));
  --tw-fill-blue: hsl(var(--pbc-blue-soft));
  --tw-ink: hsl(var(--pbc-ink));
  --tw-muted: hsl(var(--pbc-muted));
  --tw-line: hsl(var(--pbc-line));
  font-family: var(--pbc-font);
}
@media (min-width: 640px) {
  .pbc-du .tandem-modal-dialog.tw-on {
    border-radius: 24px;
    box-shadow: 0 30px 60px hsl(var(--pbc-ink) / .35);
  }
}
.pbc-du .tandem-modal-dialog.tw-on::backdrop {
  background: hsl(var(--pbc-ink) / .4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
/* El botón de seguir: azul que se hunde con el canto oscuro de la casa. */
.pbc-du .tandem-modal-dialog.tw-on .tw-cta {
  border-radius: var(--pbc-radius-button);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}


/* ── 10 · REPETIR CON TU PAREJA / AÑADIR COMO AMIGO (repeat-partner.html) ── */
/* El destino de «Repetir con…» y «Añadir como amigo» de la pantalla de después:
   lo mismo de siempre (se enseña lo que va a pasar y solo el botón lo hace), con
   la letra de la casa, sin emojis y el botón azul que se hunde. */
.pbc-du.du-rp-page main { color: hsl(var(--pbc-ink)); font-family: var(--pbc-font); }
.pbc-du.du-rp-page main h1 {
  font-size: var(--pbc-size-title-l);
  font-weight: var(--pbc-weight-bold);
  letter-spacing: -.5px;
}
.pbc-du.du-rp-page main p { color: hsl(var(--pbc-ink-soft)); font-size: var(--pbc-size-body); }
.pbc-du.du-rp-page main button[type="submit"] {
  min-height: 56px;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-rp-page main button[type="submit"]:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du.du-rp-page main a { color: hsl(var(--pbc-blue)); font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }


/* ── 12 · FOTOS DE LA COMUNIDAD (community_photos/all.html y share.html) ─── */
/* Las fotos que sube la gente de sus intercambios y eventos. Regla de Guille:
   fotos reales SIEMPRE enteras (ancho fijo, alto natural; nunca recortadas). Por
   eso la rejilla pasa a columnas: cada foto con su alto natural, sin cuadrado
   que la corte. Subir es una acción (azul), no pagar (amarillo). */
.pbc-du .pbc-cphoto-grid {
  display: block;
  columns: 2;
  column-gap: 10px;
}
@media (min-width: 768px) {
  .pbc-du .pbc-cphoto-grid { columns: 4; }
}
.pbc-du .pbc-cphoto-tile {
  break-inside: avoid;
  margin: 0 0 10px;
  aspect-ratio: auto;
  border-radius: var(--pbc-radius-field);
  background: hsl(var(--pbc-page));
}
.pbc-du .pbc-cphoto-tile img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.pbc-du .pbc-cphoto-cap {
  background: hsl(var(--pbc-ink) / .78);
  color: hsl(var(--pbc-on-color));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-cphoto-card {
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  box-shadow: 0 4px 14px hsl(var(--pbc-shadow) / .06);
}
.pbc-du .pbc-cphoto-title { font-size: var(--pbc-size-title-s); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-cphoto-text,
.pbc-du .pbc-cphoto-note,
.pbc-du .pbc-cphoto-empty { font-size: var(--pbc-size-label); }
.pbc-du .pbc-cphoto-btn {
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du .pbc-cphoto-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du .pbc-cphoto-input {
  min-height: 52px;
  border: 2px solid hsl(var(--pbc-line));
  border-radius: var(--pbc-radius-field);
  font-size: var(--pbc-size-body);
}
.pbc-du .pbc-cphoto-label { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du .pbc-cphoto-chip { border-radius: var(--pbc-radius-field); font-size: var(--pbc-size-label); }
.pbc-du .pbc-cphoto-chip:has(input:checked) { border-color: hsl(var(--pbc-blue)); }
.pbc-du .pbc-cphoto-errors { background: hsl(var(--pbc-red-soft)); color: hsl(var(--pbc-red-dark)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-cphoto-flash { background: hsl(var(--pbc-green-soft)); font-size: var(--pbc-size-label); }
.pbc-du .pbc-cphoto-status { font-size: var(--pbc-size-small); }
.pbc-du .pbc-cphoto-nudge {
  border: 1px solid hsl(var(--pbc-gold) / .6);
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-gold-soft));
}


/* ── 13 · «QUEDAN N PLAZAS» EN LOS SUGERIDOS (Conecta y ordenador) ───────── */
/* Fase 4 de la auditoría (Guille 09/11/2026): cada sugerido dice cuántas plazas
   quedan, en el turquesa de los intercambios. */
.pbc-du .du-x-free {
  display: inline-block;
  color: hsl(var(--pbc-cyan-ink));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  /* Nunca en vertical («1 / seat / left»): una sola línea (Guille 12/11/2026). */
  white-space: nowrap;
}
.pbc-du .pbc-minter-suggest-card .du-x-free { margin: 0 10px 0 0; align-self: center; }
/* En Conecta va debajo de la fecha, dentro de la info, para no quitar ancho al botón. */
.pbc-du .pbc-minter-suggest-card .pbc-minter-suggest-info .du-x-free { display: block; margin: 4px 0 0; align-self: auto; }


/* ── 14 · LA SALA DE CHAT DE LA COMUNIDAD (community_chat.html) ──────────── */
/* La conversación de siempre (mismas piezas, mismo JS), encima de sus pieles
   (cchat-room, «WhatsApp» y la del móvil): la letra de la casa con solo 400 y
   700, el botón de enviar azul que se hunde (no azul marino ni amarillo),
   «Unirme» azul y sin emojis en el «aún no hay mensajes». La lista de chats
   (community_wa) es de la zona de inicio y chat (du-inicio.css). */
.pbc-du.du-chat-room,
.pbc-du.du-chat-room .cchat-page { font-family: var(--pbc-font); }
.pbc-du.du-chat-room .cchat-head .tname {
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-body);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-chat-room .cchat-head .tname small { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-regular); }
.pbc-du.du-chat-room .cchat-msg .txt { font-weight: var(--pbc-weight-regular); }
.pbc-du.du-chat-room .cchat-msg .txt strong,
.pbc-du.du-chat-room .cchat-msg .who { font-weight: var(--pbc-weight-bold); }
.pbc-du.du-chat-room .cchat-msg .when { font-weight: var(--pbc-weight-regular); }
/* Enviar: el azul que se hunde. */
.pbc-du.du-chat-room .cchat-form > button,
.pbc-du.du-chat-room #cchatCompose {
  border: 0;
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du.du-chat-room .cchat-form > button:active,
.pbc-du.du-chat-room #cchatCompose:active { transform: translateY(3px); box-shadow: 0 1px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du.du-chat-room .cchat-form textarea:focus { border-color: hsl(var(--pbc-blue)); }
/* Unirme a la sala y el aviso para quien mira sin cuenta. */
.pbc-du.du-chat-room .cchat-joinbtn,
.pbc-du.du-chat-room .cchat-guestbar .go {
  border: 0;
  border-radius: var(--pbc-radius-button);
  background: hsl(var(--pbc-blue));
  color: hsl(var(--pbc-on-color));
  box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark));
  font-family: var(--pbc-font);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-chat-room .cchat-guestbar { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-ink)); }
/* «Aún no hay mensajes»: sin el emoji grande. */
.pbc-du.du-chat-room .cchat-empty .big { display: none; }
.pbc-du.du-chat-room .cchat-empty { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-label); }


/* ── 15 · LA SALA DE UN EVENTO (event_room.html) ─────────────────────────── */
/* La llamada de siempre (vídeo, salas pequeñas, cajón del anfitrión); solo la
   barra de arriba, los avisos y los botones con las piezas de la casa: la letra
   de la casa, botones que se hunden (azul el activo y «Dejar entrar»), y el
   secundario blanco con borde en «Ahora no». */
.pbc-du.du-er-page { font-family: var(--pbc-font); }
.pbc-du.du-er-page .er-title { font-size: var(--pbc-size-body); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-er-page .er-where { font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-er-page .er-btn {
  min-height: 40px;
  border-radius: var(--pbc-radius-field);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  box-shadow: 0 3px 0 hsl(var(--pbc-ink) / .5);
}
.pbc-du.du-er-page .er-btn.is-on {
  background: hsl(var(--pbc-blue));
  box-shadow: 0 3px 0 hsl(var(--pbc-blue-dark));
}
.pbc-du.du-er-page .er-btn:active { transform: translateY(2px); box-shadow: none; }
.pbc-du.du-er-page .er-lang {
  border-radius: 999px;
  background: hsl(var(--pbc-green-soft));
  color: hsl(var(--pbc-green));
  font-size: var(--pbc-size-small);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-er-page .er-notice,
.pbc-du.du-er-page .er-ask {
  border-radius: var(--pbc-radius-button);
  color: hsl(var(--pbc-ink));
  font-family: var(--pbc-font);
}
.pbc-du.du-er-page .er-notice { font-size: var(--pbc-size-label); font-weight: var(--pbc-weight-bold); }
.pbc-du.du-er-page .er-notice.is-warn { background: hsl(var(--pbc-blue-soft)); color: hsl(var(--pbc-blue-dark)); }
.pbc-du.du-er-page .er-ask-name { font-weight: var(--pbc-weight-bold); }
.pbc-du.du-er-page .er-ask-btns button {
  min-height: 48px;
  border-radius: var(--pbc-radius-button);
  font-family: var(--pbc-font);
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
}
.pbc-du.du-er-page .er-ask-yes { background: hsl(var(--pbc-blue)); box-shadow: 0 4px 0 hsl(var(--pbc-blue-dark)); }
.pbc-du.du-er-page .er-ask-no {
  border: 2px solid hsl(var(--pbc-line));
  background: hsl(var(--pbc-surface));
  color: hsl(var(--pbc-ink));
  box-shadow: 0 3px 0 hsl(var(--pbc-line));
}
.pbc-du.du-er-page .er-ask-btns button:active { transform: translateY(3px); box-shadow: none; }
.pbc-du.du-er-page .er-drawer { font-family: var(--pbc-font); }
.pbc-du.du-er-page .er-drawer-head { font-weight: var(--pbc-weight-bold); }

/* ── CONECTA con el diseño único (Guille 12/11/2026) ─────────────────────────────
   Un solo título («Meet new people and practise …»), la tarjeta de TUS IDIOMAS con banderas
   como lo central de la pantalla, sugeridos de esa combinación, crear 3 de un toque, eventos
   de sus idiomas, reseñas de Google y «Hablar ahora» abajo del todo. */
.pbc-du .du-cn-title {
  font-size: var(--pbc-size-title-m);
  line-height: 1.15;
  letter-spacing: -.4px;
  overflow-wrap: anywhere;
}
.pbc-du .du-cn-langs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid hsl(var(--pbc-line-soft));
  border-radius: var(--pbc-radius-card);
  background: hsl(var(--pbc-surface));
}
.pbc-du .du-cn-row { display: flex; flex-direction: column; gap: 6px; }
.pbc-du .du-cn-lbl { color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); font-weight: var(--pbc-weight-bold); }
.pbc-du .du-cn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pbc-du .du-cn-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  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 .du-cn-chip--learn { background: hsl(var(--pbc-gold-soft)); color: hsl(var(--pbc-ink)); }
.pbc-du .du-cn-chip .fi { width: 24px; height: 18px; border-radius: 3px; flex: 0 0 auto; }
.pbc-du .du-cn-edit {
  align-self: flex-start;
  color: hsl(var(--pbc-blue));
  font-size: var(--pbc-size-label);
  font-weight: var(--pbc-weight-bold);
  text-decoration: underline;
}
.pbc-du .du-cn-langs .pbc-langpick { margin: 0; }
.pbc-du .du-cn-three { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; background: none; }
.pbc-du .du-cn-three-t { margin: 0; color: hsl(var(--pbc-muted)); font-size: var(--pbc-size-small); text-align: center; }
/* «Crear 3 intercambios ya»: el + a la DERECHA del texto, en una sola línea (Guille 12/11/2026). */
.pbc-du .du-cn-three .pbc-minter-button {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}