/* =========================================================
   UFY PHONE — ESCANEO: ELECCIÓN DE VISIBILIDAD
   Parte 3 de scan.css (se carga justo después de la
   parte anterior, en el mismo orden). Opciones de visibilidad,
   botón de confirmar, mensajes del formulario, interruptor de guardar
   preferencia y aviso de confirmación automática.
   ========================================================= */

/* =========================================================
   ELECCIÓN DE VISIBILIDAD
   ========================================================= */

.ufy-scan-choice-form {
  padding:
    0
    48px
    42px;
}


.ufy-scan-choice-form fieldset {
  min-width:
    0;

  margin:
    0;

  padding:
    0;

  border:
    0;
}


.ufy-scan-choice-form legend {
  width:
    100%;

  margin:
    0
    0
    22px;

  padding:
    0;

  color:
    #17112f;

  font-size:
    25px;

  font-weight:
    740;

  line-height:
    1.2;

  text-align:
    center;
}


.ufy-scan-choice {
  position:
    relative;

  min-height:
    103px;

  padding:
    18px
    20px;

  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    28px
    55px
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    15px;

  border:
    1px solid
    rgba(153, 121, 218, 0.38);

  color:
    #1a1431;

  background:
    rgba(255, 255, 255, 0.29);

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}


.ufy-scan-choice:first-of-type {
  border-radius:
    24px
    24px
    0
    0;
}


.ufy-scan-choice:last-of-type {
  margin-top:
    -1px;

  border-radius:
    0
    0
    24px
    24px;
}


.ufy-scan-choice.is-selected {
  z-index:
    1;

  border-color:
    rgba(117, 66, 237, 0.94);

  background:
    rgba(255, 255, 255, 0.46);

  box-shadow:
    0 0 0 1px
    rgba(117, 66, 237, 0.18),
    0 9px 24px
    rgba(83, 47, 147, 0.08);
}


.ufy-scan-choice input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;
}


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

  height:
    24px;

  box-sizing:
    border-box;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    rgba(116, 72, 220, 0.54);

  border-radius:
    50%;
}


.ufy-scan-choice.is-selected
.ufy-scan-choice-radio {
  border-color:
    #7442ed;
}


.ufy-scan-choice.is-selected
.ufy-scan-choice-radio::after {
  content:
    "";

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    #7442ed;

  box-shadow:
    0 0 9px
    rgba(116, 66, 237, 0.35);
}


.ufy-scan-choice-icon {
  position:
    relative;

  width:
    49px;

  height:
    31px;

  box-sizing:
    border-box;

  border:
    3px solid
    #7a4ceb;

  border-radius:
    52% 48%;
}


.ufy-scan-choice-icon::before {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    14px;

  height:
    14px;

  border:
    3px solid
    #7a4ceb;

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );
}


.ufy-scan-choice-icon.is-hidden::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    62px;

  height:
    3px;

  border-radius:
    999px;

  background:
    #7a4ceb;

  box-shadow:
    0 0 0 3px
    rgba(244, 238, 255, 0.88);

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(42deg);
}


.ufy-scan-choice-copy {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;
}


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

  font-weight:
    720;

  line-height:
    1.15;
}


.ufy-scan-choice-copy span {
  color:
    #665b7c;

  font-size:
    16px;

  line-height:
    1.25;
}


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

  min-height:
    58px;

  margin:
    30px
    auto
    0;

  padding:
    13px
    34px;

  display:
    block;

  border:
    0;

  border-radius:
    999px;

  color:
    #fff;

  font:
    inherit;

  font-size:
    19px;

  font-weight:
    680;

  cursor:
    pointer;

  background:
    linear-gradient(
      115deg,
      #7442ed,
      #6135df
    );

  box-shadow:
    0 13px 28px
    rgba(91, 49, 190, 0.3);

  transition:
    transform 140ms ease,
    opacity 140ms ease;
}


.ufy-scan-confirm:active {
  transform:
    scale(0.98);
}


.ufy-scan-confirm:disabled {
  opacity:
    0.68;

  cursor:
    default;
}


.ufy-scan-form-status {
  min-height:
    20px;

  margin:
    13px
    0
    -18px;

  color:
    #675b7d;

  font-size:
    13px;

  font-weight:
    580;

  text-align:
    center;
}


.ufy-scan-form-status.is-success {
  color:
    #267b40;
}


.ufy-scan-form-status.is-error {
  color:
    #a12f4b;
}


/* =========================================================
   GUARDAR PREFERENCIA
   ========================================================= */

.ufy-scan-preference {
  margin:
    42px
    0
    0;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  color:
    rgba(255, 255, 255, 0.96);

  font-size:
    18px;

  font-weight:
    580;

  cursor:
    pointer;

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


.ufy-scan-preference-input {
  position:
    absolute;

  width:
    1px;

  height:
    1px;

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;
}


.ufy-scan-preference-switch {
  position:
    relative;

  width:
    66px;

  height:
    36px;

  flex:
    0 0 auto;

  border:
    1px solid
    rgba(255, 255, 255, 0.34);

  border-radius:
    999px;

  background:
    rgba(255, 255, 255, 0.22);

  box-shadow:
    inset 0 2px 6px
    rgba(24, 15, 47, 0.2);

  transition:
    background 170ms ease,
    opacity 170ms ease;
}


.ufy-scan-preference-switch::after {
  content:
    "";

  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    28px;

  height:
    28px;

  border-radius:
    50%;

  background:
    #fff;

  box-shadow:
    0 4px 10px
    rgba(22, 13, 48, 0.28);

  transition:
    transform 170ms ease;
}


.ufy-scan-preference-input:checked
+
.ufy-scan-preference-switch {
  background:
    linear-gradient(
      110deg,
      #8b58f0,
      #6841df
    );
}


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


.ufy-scan-preference-input:disabled
+
.ufy-scan-preference-switch {
  opacity:
    0.38;
}


.ufy-scan-preference:has(
  .ufy-scan-preference-input:disabled
) {
  opacity:
    0.62;
}


/* =========================================================
   CONFIRMACIÓN AUTOMÁTICA
   ========================================================= */

.ufy-scan-auto-notice {
  position:
    fixed;

  top:
    max(
      24px,
      env(safe-area-inset-top)
    );

  left:
    50%;

  z-index:
    30000;

  max-width:
    calc(100% - 36px);

  padding:
    13px
    20px;

  box-sizing:
    border-box;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  border:
    1px solid
    rgba(220, 203, 255, 0.78);

  border-radius:
    999px;

  color:
    #22173a;

  font-size:
    14px;

  font-weight:
    680;

  white-space:
    nowrap;

  background:
    rgba(248, 244, 255, 0.9);

  box-shadow:
    0 14px 38px
    rgba(29, 18, 54, 0.3),
    0 0 20px
    rgba(126, 72, 221, 0.23);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);

  transform:
    translateX(-50%);
}


.ufy-scan-auto-check {
  width:
    24px;

  height:
    24px;

  display:
    grid;

  place-items:
    center;

  border:
    2px solid
    #7545e6;

  border-radius:
    50%;

  color:
    #7545e6;

  font-size:
    14px;

  font-weight:
    800;
}