/* Lista de espera: la página que abre cada persona al escanear el QR.
   En celular el chat ocupa toda la pantalla y la página hace scroll (así se porta mejor con el teclado).
   En computador (pantalla grande y con mouse) el mismo chat va dentro de un iPhone, como en la demo. */
body.lista {
  min-height: 100vh;
  min-height: 100dvh;
}
.resplandor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 40% at 50% 0%, rgba(255, 107, 61, 0.14), transparent 70%);
}

/* Celular: el marco del iPhone no existe (sus cajas desaparecen y el contenido queda directo en la página) */
.lista .iphone,
.lista .pantalla,
.lista .desliza { display: contents; }
.lista .iphone .btn,
.lista .barra-estado,
.lista .isla,
.lista .indicador-inicio,
.lista .reflejo { display: none; }
/* display: contents no apaga los pseudo-elementos: el canto metálico del iPhone se dibujaría alrededor de la página */
.lista .iphone::before { content: none; }

.lista .cabecera-chat {
  position: sticky;
  top: 0;
  padding: calc(env(safe-area-inset-top) + 10px) max(16px, calc((100% - 520px) / 2 + 16px)) 10px;
}
.lista .chat-lista {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 12px calc(env(safe-area-inset-bottom) + 32px);
}
.lista.sin-ingreso .cabecera-chat,
.lista.sin-ingreso .chat-lista { display: none; }

/* Computador: el chat dentro del iPhone 18 Pro Max, escalado para que quepa en la ventana */
@media (min-width: 900px) and (min-height: 620px) and (hover: hover) {
  body.lista { overflow: hidden; }
  .resplandor { background: radial-gradient(38% 52% at 50% 54%, rgba(255, 107, 61, 0.16), transparent 72%), #000; }
  .lista .iphone {
    display: block;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--k, 1));
  }
  .lista .iphone::before { content: ""; }
  .lista .pantalla { display: block; }
  .lista .iphone .btn,
  .lista .isla,
  .lista .indicador-inicio,
  .lista .reflejo { display: block; }
  .lista .barra-estado { display: flex; }
  .lista .desliza {
    display: block;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .lista .desliza::-webkit-scrollbar { display: none; }
  .lista .cabecera-chat {
    height: 124px;
    padding: 57px 18px 0;
  }
  .lista .chat-lista {
    max-width: none;
    min-height: calc(100% - 124px);
    padding: 14px 14px 40px;
  }
}

/* ---------- Pantalla de entrada (registro) ---------- */
.ingreso {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + 32px);
  overflow: hidden;
}
.ing-brillo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 34% at 50% 18%, rgba(255, 107, 61, 0.24), transparent 72%);
}
.ing-contenido {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  text-align: center;
}
.ing-logo {
  width: 84px;
  height: 84px;
  margin: 0 auto;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: #111113;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 18px 50px rgba(255, 107, 61, 0.3);
}
.ing-logo svg { width: 50px; height: 50px; }
.ingreso h1 {
  margin-top: 22px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.ing-sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--texto-2);
}
.ing-botones { margin-top: 30px; }
.ing-google {
  width: 100%;
  height: 52px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
  background: #fff;
  transition: transform 0.15s, opacity 0.2s, filter 0.2s;
}
.ing-google svg { width: 20px; height: 20px; }
.ing-google:active { transform: scale(0.97); }
.ing-nota-app {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-2);
}
.ing-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 4px;
  font-size: 13px;
  color: var(--texto-3);
}
.ing-o::before,
.ing-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.ing-correo input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: 26px;
  outline: 0;
  font-size: 16px;
  text-align: center;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  transition: box-shadow 0.2s;
}
.ing-correo input::placeholder { color: var(--texto-3); }
.ing-correo input:focus { box-shadow: inset 0 0 0 1.5px var(--naranja); }
.ing-correo.error input { box-shadow: inset 0 0 0 1.5px #ff453a; }
.ing-correo .boton { height: 52px; border-radius: 26px; }
.ing-acepto {
  margin: 22px 2px 0;
  text-align: left;
}
.ing-acepto.aviso .caja { animation: sacudir 0.4s; box-shadow: inset 0 0 0 1.5px var(--naranja); }
@keyframes sacudir {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
/* Sin la casilla marcada los botones se ven apagados (siguen respondiendo para avisar por qué) */
.ingreso:not(.aceptado) .ing-google,
.ingreso:not(.aceptado) .ing-correo .boton { opacity: 0.45; filter: grayscale(0.4); }
.ing-error {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.4;
  color: #ff8a80;
}
.ingreso.cargando { pointer-events: none; }
.ingreso.cargando .ing-contenido { opacity: 0.6; transition: opacity 0.2s; }

@media (min-width: 900px) and (min-height: 620px) and (hover: hover) {
  .ingreso {
    min-height: 100%;
    height: 100%;
    padding: 70px 26px 36px;
  }
}

/* Formulario que se ve como un mensaje de la persona (.msg.formulario para ganarle a .msg.out) */
.msg.formulario {
  position: relative;
  width: 88%;
  max-width: 400px;
  padding: 14px;
  overflow: hidden;
  border-radius: 22px;
  border-bottom-right-radius: 7px;
  background: #17171a;
  box-shadow: inset 0 0 0 1px rgba(255, 107, 61, 0.45);
  font-weight: 400;
}
.formulario::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.formulario > * {
  position: relative;
  transition: opacity 0.2s ease;
}
.formulario.contrayendo > * { opacity: 0; }
.formulario.contrayendo::before { opacity: 1; }
.f-titulo {
  margin: 0 2px 10px;
  font-size: 15px;
  font-weight: 600;
}
.campo {
  display: block;
  margin-bottom: 9px;
}
.campo > span {
  display: block;
  margin: 0 0 5px 4px;
  font-size: 12px;
  color: var(--texto-2);
}
.campo input,
.campo select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 0;
  border-radius: 13px;
  outline: 0;
  font-size: 16px;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.2s;
}
.campo input::placeholder { color: var(--texto-3); }
.campo input:focus,
.campo select:focus { box-shadow: inset 0 0 0 1.5px var(--naranja); }
.campo.error input { box-shadow: inset 0 0 0 1.5px #ff453a; }
.tel {
  display: flex;
  gap: 6px;
}
.tel select {
  width: 98px;
  flex: none;
  padding: 0 26px 0 11px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.acepto {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 2px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #aeaeb2;
  cursor: pointer;
}
.acepto input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.acepto .caja {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
  transition: background 0.2s, box-shadow 0.2s;
}
.acepto .caja svg {
  opacity: 0;
  transition: opacity 0.15s;
}
.acepto input:checked + .caja {
  background: var(--grad);
  box-shadow: none;
}
.acepto input:checked + .caja svg { opacity: 1; }
.acepto input:focus-visible + .caja {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}
.acepto a {
  color: var(--texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.formulario .boton { margin-top: 14px; }
.formulario .boton:disabled {
  cursor: not-allowed;
  filter: grayscale(0.7) brightness(0.55);
}

/* Botones Sí / No del lado de la persona */
.si-no {
  align-self: flex-end;
  display: flex;
  gap: 8px;
}
.si-no button {
  height: 46px;
  padding: 0 28px;
  border-radius: 23px;
  font-size: 16.5px;
  font-weight: 600;
  transition: transform 0.15s;
}
.si-no button:active { transform: scale(0.95); }
.si-no .si { background: var(--grad); }
.si-no .no {
  background: var(--sup-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Pago */
.pago .fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pago .fila b { font-size: 16px; }
.pago .fila span {
  font-size: 21px;
  font-weight: 700;
}
.pago p {
  margin-top: 4px;
  font-size: 14px;
  color: var(--texto-2);
}
.pago .barra {
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.pago .barra i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--grad);
}
.pago a.boton { text-decoration: none; }
.pago p .giro {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: var(--naranja-2);
}
.pago.pagado p { color: var(--verde); }
.pago.pagado p svg { vertical-align: -2px; }

/* Cuenta regresiva */
.cuenta .cuando {
  display: block;
  font-size: 17px;
}
.cuenta .zona {
  display: block;
  font-size: 13px;
  color: var(--texto-2);
}
.cuenta .faltan {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.cuenta .reloj {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.cuenta .reloj div {
  padding: 10px 0 8px;
  border-radius: 14px;
  text-align: center;
  background: rgba(255, 255, 255, 0.05);
}
.cuenta .reloj b {
  display: block;
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cuenta .reloj span {
  font-size: 11px;
  color: var(--texto-2);
}