/* CREAR UN INTERCAMBIO (móvil). CSS de la maqueta v2 que aprobó Guille el
   13/08/2026 (chat de ChatGPT "Diseño HTML PBC móvil"), con dos cambios
   obligados: las reglas globales del diseño suelto (`*`, `html, body`) se acotan
   a `.pbc-mcrear-app` para no pisar el resto de la web, y el logo dibujado a
   mano se sustituye por la marca real.

   De la maqueta NO se traen los bloques de "vista previa" (el fondo gris que
   enseñaba la hoja de la hora y la simulación del chat): eran para mirar. La
   hoja de la hora sí, porque es una pieza de verdad de esta pantalla. */

.pbc-mcrear-app {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  overflow: hidden;
  color: #15263b;
  background: #f2f6fb;
  font-family: Arial, Helvetica, sans-serif;
}

/* Tablets ya entran aquí (Guille, 20/08/2026), no solo teléfono. */
@media (min-width: 600px) {
  .pbc-mcrear-app { max-width: 480px; }
}

.pbc-mcrear-app * { box-sizing: border-box; }
.pbc-mcrear-app button,
.pbc-mcrear-app input,
.pbc-mcrear-app select { font: inherit; }
.pbc-mcrear-app button,
.pbc-mcrear-app select { cursor: pointer; }

.pbc-mcrear-header { position: relative; min-height: 178px; padding: max(18px,env(safe-area-inset-top)) 20px 42px; overflow: hidden; color: #fff; background: #126ef8; border-radius: 0 0 42% 11%; }
.pbc-mcrear-header::after { position: absolute; right: -38px; bottom: -60px; width: 190px; height: 105px; border: 2px solid rgba(255,255,255,.14); border-radius: 50%; content: ""; transform: rotate(-8deg); }
.pbc-mcrear-header-top { position: relative; z-index: 1; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; }
.pbc-mcrear-back { display: grid; width: 42px; height: 42px; padding: 0; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); border-radius: 15px; place-items: center; }
.pbc-mcrear-back svg { width: 21px; height: 21px; }
.pbc-mcrear-brand { display: flex; justify-content: center; }
.pbc-mcrear-brand img { display: block; width: auto; height: 32px; }
.pbc-mcrear-header-spacer { width: 42px; height: 42px; }
.pbc-mcrear-title { position: relative; z-index: 1; margin: 24px 0 0; font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -.7px; }
.pbc-mcrear-subtitle { position: relative; z-index: 1; max-width: 285px; margin: 7px 0 0; color: rgba(255,255,255,.86); font-size: 14px; font-weight: 600; line-height: 1.45; }

.pbc-mcrear-content { display: grid; gap: 15px; padding: 8px 16px 20px; }
.pbc-mcrear-card { padding: 20px; background: #fff; border: 1px solid rgba(73,103,136,.08); border-radius: 22px; box-shadow: 0 8px 24px rgba(45,73,103,.08); }
.pbc-mcrear-card-title { margin: 0 0 16px; font-size: 20px; font-weight: 800; line-height: 1.2; letter-spacing: -.3px; }

/* El select de verdad va escondido (solo guarda el valor); lo que se toca son
   las tarjetas, tipo quiz (Guille 18/08/2026, 2ª vuelta). */
.pbc-mcrear-hidden-select { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.pbc-mcrear-lang-tiles { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pbc-mcrear-lang-tile { display: flex; min-height: 54px; padding: 10px 12px; align-items: center; justify-content: flex-start; gap: 9px; text-align: left; color: #15263b; background: #f4f8fd; border: 2px solid rgba(73,103,136,.12); border-radius: 16px; }
.pbc-mcrear-lang-tile-selected { background: #eaf2ff; border-color: #126ef8; }
.pbc-mcrear-lang-flag { display: grid; width: 26px; height: 26px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background-size: cover; background-position: center; font-size: 16px; place-items: center; }
.pbc-mcrear-lang-name { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

/* Motivo por el que el servidor no ha dejado crear (suspensión, pausa...). Va en la barra
   de abajo, justo encima del botón, para que se lea sin desplazarse. */
.pbc-mcrear-create-error { margin: 0 0 10px; padding: 11px 13px; color: #8c1c30; background: #ffe9ed; border: 2px solid #ffc7d1; border-radius: 13px; font-size: 13px; font-weight: 800; line-height: 1.35; }
.pbc-mcrear-create-error[hidden] { display: none; }
/* Botón dentro del aviso rojo: enciende los avisos sin salir del asistente. */
.pbc-mcrear-error-cta { display: block; width: 100%; margin: 10px 0 0; padding: 11px 14px; border: 0; border-radius: 12px; background: #8c1c30; color: #fff; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pbc-mcrear-error-cta:disabled { opacity: .6; cursor: default; }
.pbc-mcrear-error-cta[hidden] { display: none; }
.pbc-mcrear-error-steps { margin: 10px 0 0; padding: 0 0 0 20px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.pbc-mcrear-error-steps li { margin: 0 0 4px; }
.pbc-mcrear-error-steps[hidden] { display: none; }

.pbc-mcrear-row-label { margin: 0 0 10px; color: #596c83; font-size: 13px; font-weight: 800; line-height: 1.2; }
.pbc-mcrear-row-label:not(:first-of-type) { margin-top: 17px; }
.pbc-mcrear-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pbc-mcrear-chip { display: inline-flex; min-height: 42px; padding: 0 15px; align-items: center; justify-content: center; gap: 7px; color: #42566f; background: #f4f7fb; border: 2px solid #e4ebf3; border-radius: 14px; font-size: 13px; font-weight: 800; }
.pbc-mcrear-chip svg { width: 17px; height: 17px; }
.pbc-mcrear-chip-selected { color: #15263b; background: #ffd51f; border-color: #ffd51f; box-shadow: 0 5px 12px rgba(255,213,31,.27); }
.pbc-mcrear-chip-disabled, .pbc-mcrear-chip[disabled] { color: #b6c1cf; background: #f4f7fb; border-color: #e4ebf3; pointer-events: none; }
/* Caso Celine (14/09/2026): el calendario estaba escondido en 1x1 px y se abria solo
   con showPicker(). En Safari viejo (y cuando el navegador lo bloquea) no se abria
   NADA, asi que "Otro dia" no hacia nada y la persona creia que solo podia hoy o
   manana. Ahora el campo es real: al tocar "Otro dia" aparece debajo de los chips y
   se puede escribir o abrir el calendario. 16px para que iPhone no haga zoom. */
.pbc-mcrear-day-input { display: none; flex: 1 1 100%; width: 100%; min-height: 42px; padding: 0 14px; color: #15263b; background: #fff; border: 2px solid #e4ebf3; border-radius: 14px; font-size: 16px; font-weight: 800; -webkit-appearance: none; appearance: none; }
.pbc-mcrear-day-input-open { display: block; }
.pbc-mcrear-day-input:focus { border-color: #126ef8; outline: none; }

.pbc-mcrear-pair-chips { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; }
.pbc-mcrear-pair-chip { display: flex; min-width: 0; height: 48px; padding: 0 7px; align-items: center; justify-content: center; color: #42566f; background: #f4f7fb; border: 2px solid #e4ebf3; border-radius: 14px; font-size: 13px; font-weight: 900; }
.pbc-mcrear-pair-chip-selected { color: #075ac9; background: #eaf4ff; border-color: #126ef8; }
.pbc-mcrear-pair-note { display: flex; margin: 12px 0 0; align-items: flex-start; gap: 7px; color: #66788d; font-size: 11px; font-weight: 700; line-height: 1.45; }
.pbc-mcrear-other-selector { display: flex; margin-top: 12px; padding: 11px 12px; align-items: center; justify-content: space-between; gap: 12px; background: #f4f8fc; border: 1px solid #e3eaf2; border-radius: 15px; }
.pbc-mcrear-other-copy, .pbc-mcrear-person-copy, .pbc-mcrear-invited-copy { min-width: 0; }
.pbc-mcrear-other-title { display: block; font-size: 12px; font-weight: 800; }
.pbc-mcrear-other-text { display: block; margin-top: 3px; color: #748398; font-size: 10px; font-weight: 700; }
.pbc-mcrear-stepper { display: flex; align-items: center; gap: 9px; }
.pbc-mcrear-stepper-button { display: grid; width: 30px; height: 30px; padding: 0; color: #126ef8; background: #fff; border: 1px solid #d9e5f2; border-radius: 10px; box-shadow: 0 2px 6px rgba(45,73,103,.08); place-items: center; font-size: 16px; font-weight: 900; }
.pbc-mcrear-stepper-value { min-width: 24px; font-size: 15px; font-weight: 900; text-align: center; }

.pbc-mcrear-invited-label { margin: 0 0 10px; color: #596c83; font-size: 13px; font-weight: 800; }
.pbc-mcrear-invited-list { display: grid; gap: 9px; margin-bottom: 16px; }
.pbc-mcrear-invited-pill { display: grid; grid-template-columns: 38px minmax(0,1fr) 32px; min-height: 58px; padding: 8px 8px 8px 10px; align-items: center; gap: 9px; background: #eaf8f4; border: 1px solid #c9eee3; border-radius: 18px; }
.pbc-mcrear-avatar { display: block; width: 42px; height: 42px; object-fit: cover; background: #dfeaf7; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 3px 9px rgba(21,38,59,.12); }

/* La cara SIEMPRE con su marco de rango (Guille 13/08/2026). Sin foto, el hueco
   lo llena el animal del rango, como en el resto de la app. */
.pbc-mcrear-face { position: relative; display: grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; }
.pbc-mcrear-face .pbc-mcrear-avatar { width: 36px; height: 36px; }
.pbc-mcrear-face-ring { position: absolute; inset: 0; border: 2px solid #FFD51F; border-radius: 50%; }
.pbc-mcrear-face-mascot { display: block; width: 36px; height: 36px; object-fit: contain; }
.pbc-mcrear-face-seal { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: contain; }
.pbc-mcrear-invited-pill .pbc-mcrear-avatar { width: 38px; height: 38px; }
.pbc-mcrear-person-name { display: block; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pbc-mcrear-person-name strong { font-weight: 900; }
.pbc-mcrear-invited-status { display: block; margin-top: 3px; color: #0f7a5a; font-size: 11px; font-weight: 800; line-height: 1.2; }
.pbc-mcrear-remove { display: grid; width: 30px; height: 30px; padding: 0; color: #57716b; background: rgba(255,255,255,.72); border: 0; border-radius: 10px; place-items: center; font-size: 16px; font-weight: 900; }

.pbc-mcrear-search { position: relative; display: flex; height: 54px; align-items: center; background: #f4f7fb; border: 2px solid #e1e9f2; border-radius: 17px; }
.pbc-mcrear-search:focus-within { background: #fff; border-color: #126ef8; box-shadow: 0 0 0 4px rgba(18,110,248,.08); }
.pbc-mcrear-search-icon { width: 20px; height: 20px; margin-left: 15px; flex: 0 0 auto; color: #126ef8; }
.pbc-mcrear-search-input { width: 100%; height: 100%; padding: 0 14px 0 10px; color: #15263b; background: transparent; border: 0; outline: 0; font-size: 15px; font-weight: 700; }
.pbc-mcrear-search-input::placeholder { color: #8493a5; opacity: 1; }
.pbc-mcrear-write-lang { margin-top: 12px; }
.pbc-mcrear-write-lang .pbc-mcrear-search-input { padding-left: 14px; }
.pbc-mcrear-search-help { margin: 9px 2px 0; color: #748398; font-size: 11px; font-weight: 600; line-height: 1.4; }
.pbc-mcrear-results-title { margin: 16px 0 6px; color: #738297; font-size: 11px; font-weight: 800; line-height: 1.2; letter-spacing: .8px; text-transform: uppercase; }
.pbc-mcrear-results { display: grid; }
.pbc-mcrear-person { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; min-height: 66px; padding: 11px 0; align-items: center; gap: 10px; border-bottom: 1px solid #e9eef4; }
.pbc-mcrear-person:last-child { border-bottom: 0; }
.pbc-mcrear-invite-button { min-width: 68px; min-height: 36px; padding: 0 10px; color: #075ac9; background: #e9f3ff; border: 0; border-radius: 12px; font-size: 12px; font-weight: 800; }
.pbc-mcrear-invite-button[disabled] { color: #0f7a5a; background: #eaf8f4; }
.pbc-mcrear-note { display: flex; margin: 13px 0 0; padding: 12px; align-items: flex-start; gap: 9px; color: #5f7187; background: #f4f8fc; border-radius: 14px; font-size: 12px; font-weight: 600; line-height: 1.45; }
.pbc-mcrear-note svg { width: 17px; height: 17px; margin-top: 1px; flex: 0 0 auto; color: #126ef8; }

.pbc-mcrear-action-bar { position: sticky; z-index: 20; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(242,246,251,.96); border-top: 1px solid rgba(97,119,145,.12); }
.pbc-mcrear-action-row { display: flex; gap: 10px; align-items: stretch; }
.pbc-mcrear-primary { display: flex; flex: 1 1 auto; min-height: 58px; padding: 0 20px; align-items: center; justify-content: center; gap: 9px; color: #15263b; background: #ffd51f; border: 0; border-radius: 18px; box-shadow: 0 8px 18px rgba(228,183,0,.3); font-size: 16px; font-weight: 900; }
.pbc-mcrear-primary svg { width: 20px; height: 20px; }
.pbc-mcrear-primary[disabled] { opacity: .6; }
/* Botón explícito de atrás, junto al de Continuar (Guille 18/08/2026, 3ª vuelta):
   la flechita de arriba sigue viva, pero no todo el mundo la ve. */
.pbc-mcrear-secondary { display: grid; flex: 0 0 auto; width: 58px; padding: 0; color: #42566f; background: #e7edf5; border: 0; border-radius: 18px; place-items: center; }
.pbc-mcrear-secondary[hidden] { display: none; }
.pbc-mcrear-secondary svg { width: 22px; height: 22px; }

/* HORA con tarjetas tocables (Guille 20/08/2026): la rueda tipo iPhone se
   quitó porque nunca fue bien con el dedo. Franja arriba (mañana / tarde /
   noche) y rejilla de horas debajo, en punto y media, mismo patrón de tocar
   tarjetas que el resto del asistente. */
/* Cuatro franjas desde 25/08/2026 (madrugada incluida): caben en el ancho del movil. */
.pbc-mcrear-daypart-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 14px; }
.pbc-mcrear-daypart { display: grid; padding: 10px 2px 8px; gap: 3px; hyphens: auto; overflow-wrap: anywhere; line-height: 1.15; color: #42566f; background: #f4f7fb; border: 2px solid #e4ebf3; border-radius: 14px; font-size: 11px; font-weight: 800; place-items: center; }
.pbc-mcrear-daypart svg { width: 20px; height: 20px; }
.pbc-mcrear-daypart-selected { color: #075ac9; background: #eaf4ff; border-color: #126ef8; }
.pbc-mcrear-daypart[disabled] { color: #b6c1cf; pointer-events: none; }
.pbc-mcrear-slot-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.pbc-mcrear-slot { display: flex; min-height: 48px; align-items: center; justify-content: center; color: #15263b; background: #f4f8fd; border: 2px solid rgba(73,103,136,.12); border-radius: 14px; font-size: 16px; font-weight: 800; }
.pbc-mcrear-slot-selected { color: #075ac9; background: #eaf4ff; border-color: #126ef8; }
.pbc-mcrear-slot[disabled] { color: #c3ccd8; background: #f6f8fb; border-color: #edf1f6; pointer-events: none; }

@media (max-width:350px) {
  .pbc-mcrear-lang-tiles { grid-template-columns: 1fr; }
  .pbc-mcrear-pair-chips { grid-template-columns: repeat(3,1fr); }
  .pbc-mcrear-card { padding: 17px; }
}

/* ── Asistente por pasos (Guille 18/08/2026) ──────────────────────────────
   Misma piel de siempre; solo se añade lo que el paso a paso necesita: la
   barra de avance, las tarjetas de "uno a uno / grupo", los niveles y el
   repaso final. Una tarjeta visible cada vez. */
.pbc-mcrear-step[hidden] { display: none; }
.pbc-mcrear-progress { position: relative; z-index: 1; width: 100%; height: 6px; margin-top: 14px; background: rgba(255,255,255,.24); border-radius: 999px; overflow: hidden; }
.pbc-mcrear-progress > i { display: block; width: 0; height: 100%; background: #ffd63d; border-radius: 999px; transition: width .18s ease; }
.pbc-mcrear-stepno { margin: 10px 0 0; color: #64809c; font-size: 12px; font-weight: 700; text-align: center; }

/* Niveles apilados, uno encima de otro (Guille 18/08/2026, 4ª vuelta: la
   escalera de barras no le gustaba). Misma tarjeta que "Type"/"How many". */
.pbc-mcrear-level-list { display: grid; gap: 10px; }
.pbc-mcrear-level-step { display: block; width: 100%; padding: 16px; text-align: left; color: #15263b; background: #f4f8fd; border: 2px solid rgba(73,103,136,.12); border-radius: 18px; font-size: 16px; font-weight: 800; }
.pbc-mcrear-level-step-selected { color: #0b3f8c; background: #eaf2ff; border-color: #126ef8; }

.pbc-mcrear-picks { display: grid; gap: 10px; }
.pbc-mcrear-pick { display: grid; gap: 3px; padding: 16px; text-align: left; background: #f4f8fd; border: 2px solid rgba(73,103,136,.12); border-radius: 18px; }
.pbc-mcrear-pick-selected { background: #eaf2ff; border-color: #126ef8; }
.pbc-mcrear-pick-title { color: #15263b; font-size: 16px; font-weight: 800; }
.pbc-mcrear-pick-text { color: #64809c; font-size: 13px; font-weight: 600; }

/* Repaso final: banderita/icono por línea, para que se lea de un vistazo
   (Guille 18/08/2026, 3ª vuelta). */
.pbc-mcrear-summary { display: grid; gap: 10px; }
.pbc-mcrear-summary-row { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 14px; background: #f4f8fd; border-radius: 16px; }
.pbc-mcrear-summary-icon { grid-column: 1; grid-row: 1 / span 2; display: grid; color: #126ef8; place-items: center; }
.pbc-mcrear-summary-icon svg { width: 20px; height: 20px; }
.pbc-mcrear-summary-label { grid-column: 2; color: #64809c; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pbc-mcrear-summary-value { grid-column: 2; display: flex; align-items: center; gap: 7px; color: #15263b; font-size: 15px; font-weight: 800; word-break: break-word; }
.pbc-mcrear-summary-edit { grid-column: 3; grid-row: 1 / span 2; padding: 8px 12px; color: #126ef8; font-size: 13px; font-weight: 800; background: #fff; border: 1px solid rgba(18,110,248,.28); border-radius: 12px; }
.pbc-mcrear-summary-flag { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background-size: cover; background-position: center; }

/* Invitar a alguien: discreto y opcional dentro del repaso, no un paso del
   quiz (Guille 18/08/2026, 3ª vuelta). */
.pbc-mcrear-invite-discreet { margin-top: 14px; }
.pbc-mcrear-invite-toggle { display: flex; width: 100%; padding: 12px 14px; align-items: center; gap: 9px; color: #126ef8; background: #eef6ff; border: 1.5px dashed rgba(18,110,248,.35); border-radius: 14px; font-size: 13px; font-weight: 800; text-align: left; }
.pbc-mcrear-invite-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pbc-mcrear-invite-box { margin-top: 12px; }