/* =========================================================
   UFY PHONE — ESCANEO: CREDENCIAL DEL PASE
   Parte 2 de scan.css (se carga justo después de la
   parte anterior, en el mismo orden). Usuario, avatar, marca de firma,
   camisa escaneada y la división del pase.
   ========================================================= */

/* =========================================================
   CREDENCIAL: USUARIO + FIRMA + CAMISA
   ========================================================= */

.ufy-scan-credential {
  width:
    calc(100% - 78px);

  min-height:
    122px;

  margin:
    0
    auto
    33px;

  padding:
    17px
    22px;

  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    84px
    minmax(112px, 1fr);

  align-items:
    center;

  gap:
    16px;

  border:
    1px solid
    rgba(255, 255, 255, 0.84);

  border-radius:
    27px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.42),
      rgba(236, 226, 255, 0.28)
    );

  box-shadow:
    inset 0 0 0 2px
    rgba(150, 106, 225, 0.13),
    0 8px 30px
    rgba(77, 50, 120, 0.08);
}


.ufy-scan-person {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;
}


.ufy-scan-avatar {
  flex:
    0 0 auto;

  width:
    72px;

  height:
    72px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    rgba(255, 255, 255, 0.84);

  border-radius:
    50%;

  color:
    #fff;

  background:
    linear-gradient(
      145deg,
      #b897f4,
      #7350d5
    );

  box-shadow:
    0 7px 18px
    rgba(73, 44, 124, 0.2);
}


.ufy-scan-avatar-image {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;
}


.ufy-scan-avatar-fallback {
  font-size:
    27px;

  font-weight:
    760;
}


.ufy-scan-person-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;
}


.ufy-scan-person-name,
.ufy-scan-person-username {
  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.ufy-scan-person-name {
  color:
    #1b1534;

  font-size:
    20px;

  font-weight:
    750;
}


.ufy-scan-person-username {
  color:
    #7450e5;

  font-size:
    16px;

  font-weight:
    650;
}


.ufy-scan-signed-mark {
  position:
    relative;

  width:
    78px;

  height:
    78px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    21px;

  color:
    #7647ec;

  background:
    rgba(255, 255, 255, 0.36);

  box-shadow:
    0 10px 22px
    rgba(93, 55, 157, 0.12);
}


.ufy-scan-mark-corner {
  position:
    absolute;

  width:
    16px;

  height:
    16px;

  box-sizing:
    border-box;
}


.ufy-scan-mark-corner.is-top-left {
  top:
    11px;

  left:
    11px;

  border-top:
    3px solid
    currentColor;

  border-left:
    3px solid
    currentColor;

  border-radius:
    5px 0 0 0;
}


.ufy-scan-mark-corner.is-top-right {
  top:
    11px;

  right:
    11px;

  border-top:
    3px solid
    currentColor;

  border-right:
    3px solid
    currentColor;

  border-radius:
    0 5px 0 0;
}


.ufy-scan-mark-corner.is-bottom-left {
  bottom:
    11px;

  left:
    11px;

  border-bottom:
    3px solid
    currentColor;

  border-left:
    3px solid
    currentColor;

  border-radius:
    0 0 0 5px;
}


.ufy-scan-mark-corner.is-bottom-right {
  right:
    11px;

  bottom:
    11px;

  border-right:
    3px solid
    currentColor;

  border-bottom:
    3px solid
    currentColor;

  border-radius:
    0 0 5px 0;
}


.ufy-scan-mark-shield {
  width:
    31px;

  height:
    35px;

  display:
    grid;

  place-items:
    center;

  border:
    3px solid
    currentColor;

  border-radius:
    14px 14px 17px 17px;

  font-size:
    18px;

  font-weight:
    800;

  transform:
    rotate(0deg);
}


.ufy-scan-shirt {
  min-width:
    0;

  display:
    grid;

  grid-template-columns:
    60px
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    8px;
}


.ufy-scan-shirt img {
  width:
    60px;

  height:
    65px;

  display:
    block;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 7px 8px
      rgba(41, 25, 65, 0.2)
    );
}


.ufy-scan-shirt-code {
  overflow:
    hidden;

  color:
    #7048dd;

  font-size:
    14px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   DIVISIÓN DEL PASE
   ========================================================= */

.ufy-scan-ticket-divider {
  position:
    relative;

  width:
    100%;

  height:
    1px;

  margin:
    0
    0
    30px;

  border-top:
    2px dashed
    rgba(76, 57, 127, 0.56);
}


.ufy-scan-ticket-divider::before,
.ufy-scan-ticket-divider::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  width:
    24px;

  height:
    24px;

  border-radius:
    50%;

  background:
    rgba(22, 16, 49, 0.96);

  transform:
    translateY(-50%);
}


.ufy-scan-ticket-divider::before {
  left:
    -12px;
}


.ufy-scan-ticket-divider::after {
  right:
    -12px;
}


