/* =========================================================
   UFY PHONE — ESCANEO: MÓVIL Y PASE DE VISITANTE
   Parte 4 de scan.css (se carga justo después de la
   parte anterior, en el mismo orden). Adaptación móvil del pase
   y el pase de visitante (con su propia adaptación a pantallas chicas).
   ========================================================= */

/* =========================================================
   ADAPTACIÓN MÓVIL
   ========================================================= */

@media (
  max-width: 620px
) {
  .ufy-scan-pass-overlay {
    place-items:
      start center;

    padding:
      max(
        14px,
        env(safe-area-inset-top)
      )
      12px
      max(
        18px,
        env(safe-area-inset-bottom)
      );
  }


  .ufy-scan-pass {
    border-radius:
      30px;
  }


  .ufy-scan-pass-header {
    padding:
      30px
      18px
      20px;
  }


  .ufy-scan-pass-kicker {
    font-size:
      11px;

    letter-spacing:
      2.5px;
  }


  .ufy-scan-pass-header h1 {
    margin-top:
      18px;

    font-size:
      clamp(
        25px,
        8vw,
        34px
      );
  }


  .ufy-scan-credential {
    width:
      calc(100% - 28px);

    min-height:
      100px;

    margin-bottom:
      25px;

    padding:
      12px
      13px;

    grid-template-columns:
      minmax(0, 1.35fr)
      58px
      minmax(80px, 0.8fr);

    gap:
      8px;

    border-radius:
      21px;
  }


  .ufy-scan-person {
    gap:
      8px;
  }


  .ufy-scan-avatar {
    width:
      49px;

    height:
      49px;
  }


  .ufy-scan-avatar-fallback {
    font-size:
      20px;
  }


  .ufy-scan-person-name {
    font-size:
      14px;
  }


  .ufy-scan-person-username {
    font-size:
      12px;
  }


  .ufy-scan-signed-mark {
    width:
      56px;

    height:
      56px;

    border-radius:
      16px;
  }


  .ufy-scan-mark-corner {
    width:
      12px;

    height:
      12px;
  }


  .ufy-scan-mark-corner.is-top-left,
  .ufy-scan-mark-corner.is-top-right {
    top:
      7px;
  }


  .ufy-scan-mark-corner.is-bottom-left,
  .ufy-scan-mark-corner.is-bottom-right {
    bottom:
      7px;
  }


  .ufy-scan-mark-corner.is-top-left,
  .ufy-scan-mark-corner.is-bottom-left {
    left:
      7px;
  }


  .ufy-scan-mark-corner.is-top-right,
  .ufy-scan-mark-corner.is-bottom-right {
    right:
      7px;
  }


  .ufy-scan-mark-shield {
    width:
      22px;

    height:
      25px;

    border-width:
      2px;

    font-size:
      13px;
  }


  .ufy-scan-shirt {
    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap:
      4px;
  }


  .ufy-scan-shirt img {
    width:
      42px;

    height:
      48px;
  }


  .ufy-scan-shirt-code {
    font-size:
      10px;
  }


  .ufy-scan-ticket-divider {
    margin-bottom:
      23px;
  }


  .ufy-scan-choice-form {
    padding:
      0
      22px
      29px;
  }


  .ufy-scan-choice-form legend {
    margin-bottom:
      17px;

    font-size:
      21px;
  }


  .ufy-scan-choice {
    min-height:
      84px;

    padding:
      14px
      14px;

    grid-template-columns:
      24px
      42px
      minmax(0, 1fr);

    gap:
      10px;
  }


  .ufy-scan-choice-radio {
    width:
      21px;

    height:
      21px;
  }


  .ufy-scan-choice.is-selected
  .ufy-scan-choice-radio::after {
    width:
      10px;

    height:
      10px;
  }


  .ufy-scan-choice-icon {
    width:
      39px;

    height:
      25px;

    border-width:
      2px;
  }


  .ufy-scan-choice-icon::before {
    width:
      11px;

    height:
      11px;

    border-width:
      2px;
  }


  .ufy-scan-choice-icon.is-hidden::after {
    width:
      49px;

    height:
      2px;
  }


  .ufy-scan-choice-copy strong {
    font-size:
      17px;
  }


  .ufy-scan-choice-copy span {
    font-size:
      13px;
  }


  .ufy-scan-confirm {
    min-width:
      210px;

    min-height:
      51px;

    margin-top:
      23px;

    font-size:
      17px;
  }


  .ufy-scan-preference {
    margin-top:
      24px;

    gap:
      11px;

    font-size:
      15px;
  }


  .ufy-scan-preference-switch {
    width:
      57px;

    height:
      32px;
  }


  .ufy-scan-preference-switch::after {
    width:
      24px;

    height:
      24px;
  }


  .ufy-scan-preference-input:checked
  +
  .ufy-scan-preference-switch::after {
    transform:
      translateX(25px);
  }
}


@media (
  max-width: 390px
) {
  .ufy-scan-pass-overlay {
    padding-left:
      8px;

    padding-right:
      8px;
  }


  .ufy-scan-pass-header h1 {
    font-size:
      25px;
  }


  .ufy-scan-credential {
    grid-template-columns:
      minmax(0, 1.2fr)
      52px
      76px;
  }


  .ufy-scan-person-name {
    font-size:
      13px;
  }


  .ufy-scan-person-username {
    font-size:
      11px;
  }


  .ufy-scan-shirt-code {
    font-size:
      9px;
  }


  .ufy-scan-choice-form {
    padding-left:
      15px;

    padding-right:
      15px;
  }
}



/* =========================================================
   PASE DE VISITANTE
   ========================================================= */

.ufy-scan-visitor-overlay {
  place-items:
    center;
}


.ufy-scan-visitor-overlay
.ufy-scan-pass-stage {
  margin:
    auto;
}


.ufy-scan-visitor-avatar {
  position:
    relative;

  overflow:
    hidden;

  background:
    linear-gradient(
      145deg,
      #f1edff,
      #d9cefa
    );
}


.ufy-scan-visitor-head {
  position:
    absolute;

  top:
    13px;

  left:
    50%;

  width:
    24px;

  height:
    24px;

  border-radius:
    50%;

  background:
    linear-gradient(
      145deg,
      #b59af7,
      #8365e3
    );

  transform:
    translateX(-50%);
}


.ufy-scan-visitor-body {
  position:
    absolute;

  left:
    50%;

  bottom:
    -7px;

  width:
    52px;

  height:
    39px;

  border-radius:
    50%
    50%
    18px
    18px;

  background:
    linear-gradient(
      145deg,
      #b59af7,
      #8365e3
    );

  transform:
    translateX(-50%);
}


.ufy-scan-visitor-form
fieldset {
  display:
    flex;

  flex-direction:
    column;
}


.ufy-scan-visitor-form
legend {
  margin-bottom:
    7px;
}


.ufy-scan-visitor-intro {
  margin:
    0
    0
    22px;

  color:
    #4f4667;

  font-size:
    17px;

  line-height:
    1.35;

  text-align:
    center;
}


.ufy-scan-visitor-form
.ufy-scan-confirm {
  min-width:
    290px;
}


.ufy-scan-continue-visitor {
  margin:
    40px
    0
    0;

  padding:
    2px
    0
    5px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(223, 202, 255, 0.9);

  color:
    #dfcaff;

  font:
    inherit;

  font-size:
    18px;

  font-weight:
    570;

  line-height:
    1.2;

  cursor:
    pointer;

  background:
    transparent;

  text-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.38);
}


.ufy-scan-continue-visitor:active {
  opacity:
    0.72;
}


.ufy-scan-visitor-note {
  margin:
    26px
    0
    0;

  color:
    rgba(226, 211, 255, 0.9);

  font-size:
    15px;

  font-weight:
    520;

  text-align:
    center;

  text-shadow:
    0 2px 10px
    rgba(0, 0, 0, 0.38);
}


@media (
  max-width: 620px
) {
  .ufy-scan-visitor-overlay {
    place-items:
      center;

    padding-top:
      max(
        14px,
        env(safe-area-inset-top)
      );
  }


  .ufy-scan-visitor-head {
    top:
      9px;

    width:
      17px;

    height:
      17px;
  }


  .ufy-scan-visitor-body {
    bottom:
      -5px;

    width:
      37px;

    height:
      28px;
  }


  .ufy-scan-visitor-intro {
    margin-bottom:
      17px;

    font-size:
      14px;
  }


  .ufy-scan-visitor-form
  .ufy-scan-confirm {
    min-width:
      230px;
  }


  .ufy-scan-continue-visitor {
    margin-top:
      27px;

    font-size:
      16px;
  }


  .ufy-scan-visitor-note {
    margin-top:
      20px;

    font-size:
      13px;
  }
}


@media (
  max-height: 760px
) {
  .ufy-scan-visitor-overlay {
    place-items:
      start center;
  }
}