/* Ticket de login y registro (pantalla "pbc-mlogin", maqueta GPT aprobada 13/08/2026).
   Solo se carga con el flag MLOGIN_ENABLED encendido; con el flag apagado el ticket
   sigue con su estilo de siempre y esta hoja no se pide.

   Los `!important` de ancho/alto no son cosmeticos: `static/viewport-fix.css` declara
   `* { max-width: 100% !important }` para toda la web, y el CSS de movil de la casa
   infla los botones sociales dentro del ticket. */

/* Centrado: el ticket lleva dos muescas que sobresalen 13 px por cada lado. En un
   móvil estrecho eso empujaba la página a lo ancho y el ticket salía ladeado hasta
   que se hacía zoom (lo vio Guille, 13/08/2026). Ahora el hueco de los lados es
   siempre mayor que las muescas, el scroll a lo ancho queda cortado aquí, y el que
   sube y baja lo lleva esta capa (no el ticket), para que las muescas se vean
   enteras y el ticket quede centrado desde el primer momento. */
.pbc-gate.pbc-mlogin {
  padding: 18px 26px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* La maqueta cuenta el relleno DENTRO del ancho. Sin esto, los 22 px de relleno se
   suman al 100 % del ancho y el ticket se sale del móvil por la derecha: eso es lo
   que se veía ladeado. La web no lo declara para todo, así que se declara aquí. */
.pbc-gate.pbc-mlogin,
.pbc-mlogin .pbc-mlogin-ticket,
.pbc-mlogin .pbc-mlogin-ticket *,
.pbc-mlogin .pbc-mlogin-ticket *::before,
.pbc-mlogin .pbc-mlogin-ticket *::after {
  box-sizing: border-box;
}

.pbc-mlogin .pbc-mlogin-shade {
  position: absolute;
  inset: 0;
  background: rgba(13, 30, 51, .58);
  backdrop-filter: blur(2px);
}

.pbc-mlogin .pbc-mlogin-ticket {
  position: relative;
  width: 100%;
  max-width: 354px !important;
  margin: auto;
  overflow: hidden;
  padding: 19px 22px 22px;
  /* Las dos muescas del billete van PINTADAS en el propio ticket, no colgando por
     fuera: colgando ensanchaban la caja y descentraban la pantalla en móviles
     estrechos. */
  background:
    radial-gradient(circle 12px at 0 171px, #536171 97%, rgba(255, 253, 247, 0) 100%),
    radial-gradient(circle 12px at 100% 171px, #536171 97%, rgba(255, 253, 247, 0) 100%),
    #fffdf7;
  border: 1px solid rgba(21, 38, 59, .08);
  border-radius: 30px;
  box-shadow: 0 24px 70px rgba(4, 20, 43, .34);
  color: #15263b;
}

.pbc-mlogin .pbc-mlogin-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 8;
  display: grid;
  width: 38px !important;
  height: 38px !important;
  padding: 0;
  color: #15263b;
  background: #eef3f8;
  border: 0;
  border-radius: 50%;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.pbc-mlogin .pbc-mlogin-close:hover { background: #e2e9f2; }

.pbc-mlogin .pbc-mlogin-alert {
  position: relative;
  z-index: 6;
  display: block;
  width: calc(100% - 42px);
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  color: #075fcf;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.22;
  text-align: left;
  background: #e9f4ff;
  border: 1px solid #c8e3ff;
  border-radius: 18px;
}

.pbc-mlogin .pbc-mlogin-alert[hidden] { display: none; }

/* Franja del ajolote, cerrada por la linea de puntos del billete. */
.pbc-mlogin .pbc-mlogin-hero {
  position: relative;
  height: 106px;
  margin: 0 -22px 15px;
  border-bottom: 2px dashed #c8d3df;
}

.pbc-mlogin .pbc-mlogin-mascot {
  position: absolute;
  right: 5px;
  bottom: -2px;
  width: 142px !important;
  height: 122px;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

.pbc-mlogin .pbc-mlogin-body {
  position: relative;
  z-index: 5;
}

.pbc-mlogin .pbc-mlogin-title {
  max-width: 285px;
  margin: 0 0 16px;
  color: #15263b;
  font-size: 27px;
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.7px;
}

.pbc-mlogin .pbc-mlogin-continue {
  width: 100%;
  min-height: 50px !important;
  height: 50px !important;
  color: #15263b;
  font-size: 16px;
  font-weight: 900;
  background: #ffd51f;
  border: 0;
  border-radius: 17px;
  box-shadow: 0 4px 0 #d9ad00;
  cursor: pointer;
}

.pbc-mlogin .pbc-mlogin-continue:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #d9ad00;
}

.pbc-mlogin .pbc-mlogin-continue[hidden] { display: none; }

.pbc-mlogin .pbc-mlogin-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 13px;
  color: #7c8999;
  font-size: 12px;
  font-weight: 700;
}

.pbc-mlogin .pbc-mlogin-divider::before,
.pbc-mlogin .pbc-mlogin-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: #d8e1ea;
}

.pbc-mlogin .pbc-mlogin-divider[hidden] { display: none; }

/* Los botones sociales son el include compartido con la pagina de alta: aqui se les
   fija altura y forma para que no crezcan y el ticket quepa en una pantalla. */
.pbc-mlogin .pbc-mlogin-socials a,
.pbc-mlogin .pbc-mlogin-socials button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 50px !important;
  height: 50px !important;
  margin: 0 0 10px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  color: #15263b !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  background: #fff !important;
  border: 2px solid #d8e1ec !important;
  border-radius: 17px !important;
}

.pbc-mlogin .pbc-mlogin-socials .my-5 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pbc-mlogin .pbc-mlogin-frame {
  width: 100%;
  min-height: 320px;
  border: 0;
}

.pbc-mlogin .pbc-mlogin-frame[hidden] { display: none; }

.pbc-mlogin .pbc-mlogin-foot {
  margin: 14px 0 0;
  color: #7c8999;
  font-size: 13px;
  text-align: center;
}

.pbc-mlogin .pbc-mlogin-foot a {
  color: #075fcf;
  font-weight: 800;
}

.pbc-mlogin .pbc-mlogin-close:focus-visible,
.pbc-mlogin .pbc-mlogin-continue:focus-visible,
.pbc-mlogin .pbc-mlogin-socials a:focus-visible,
.pbc-mlogin .pbc-mlogin-socials button:focus-visible {
  outline: 3px solid #126ef8;
  outline-offset: 3px;
}

/* Movil bajito: el ticket se aprieta antes de sacar barra de scroll. */
@media (max-height: 700px) {
  .pbc-mlogin .pbc-mlogin-ticket {
    padding-top: 15px;
    padding-bottom: 17px;
  }

  .pbc-mlogin .pbc-mlogin-alert {
    min-height: 46px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .pbc-mlogin .pbc-mlogin-hero {
    height: 82px;
    margin-bottom: 11px;
  }

  .pbc-mlogin .pbc-mlogin-mascot {
    width: 116px !important;
    height: 102px;
  }

  .pbc-mlogin .pbc-mlogin-title {
    margin-bottom: 12px;
    font-size: 24px;
  }

  .pbc-mlogin .pbc-mlogin-continue,
  .pbc-mlogin .pbc-mlogin-socials a,
  .pbc-mlogin .pbc-mlogin-socials button {
    min-height: 46px !important;
    height: 46px !important;
  }

  .pbc-mlogin .pbc-mlogin-divider { margin: 13px 0 10px; }

  /* Las muescas suben con la línea de puntos. */
  .pbc-mlogin .pbc-mlogin-ticket {
    background:
      radial-gradient(circle 12px at 0 143px, #536171 97%, rgba(255, 253, 247, 0) 100%),
      radial-gradient(circle 12px at 100% 143px, #536171 97%, rgba(255, 253, 247, 0) 100%),
      #fffdf7;
  }
}