/* =========================================================
   UFY PHONE — ACCESO: TARJETA, PESTAÑAS Y CAMPOS
   Parte 2 de auth-app.css (se carga justo después de la
   parte anterior, en el mismo orden). Tarjeta de Entrar/Registrarse,
   aviso opcional, pestañas, formulario, campos de texto, fecha y
   selector, botón del ojo y estados del nombre de usuario.
   ========================================================= */

.ufy-auth-card {
  position: relative;

  min-width: 0;

  padding:
    18px
    15px
    16px;

  border:
    1px solid
    rgba(
      232,
      217,
      250,
      0.34
    );

  border-radius: 27px;

  box-sizing: border-box;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(26, 18, 43, 0.26),
      rgba(5, 4, 12, 0.18)
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(var(--ufy-rgb-255,255,255,255),0.09),

    0
    18px
    36px
    rgba(var(--ufy-rgb-0,0,0,0),0.24);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}

/* Aviso opcional encima de las pestañas (mount({ notice })),
   por ejemplo al escanear una camisa sin dueño. */
.ufy-auth-notice {
  margin:
    0
    0
    14px;

  padding:
    11px
    13px;

  border:
    1px solid
    var(--ufy-auth-line);

  border-radius: 16px;

  color:
    var(--ufy-auth-purple-light);

  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;

  background:
    rgba(170, 92, 255, 0.12);
}

.ufy-auth-notice[hidden] {
  display: none;
}

.ufy-auth-tabs {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  margin-bottom: 19px;
}

.ufy-auth-tab {
  appearance: none;

  position: relative;

  min-height: 51px;

  padding:
    6px
    4px
    14px;

  border: 0;

  border-bottom:
    3px solid
    rgba(226, 207, 244, 0.10);

  background: transparent;

  color:
    rgba(
      230,
      216,
      243,
      0.55
    );

  font: inherit;

  font-size:calc(16px * var(--ufy-font-scale,1));
  font-weight: 610;

  cursor: pointer;
}

.ufy-auth-tab.is-active {
  border-bottom-color:
    #bd71ff;

  color:
    #c987ff;

  text-shadow:
    0
    0
    15px
    rgba(187, 105, 255, 0.32);
}

.ufy-auth-form {
  display: grid;

  gap: 12px;
}

.ufy-auth-field {
  position: relative;

  min-width: 0;
}

.ufy-auth-input-row {
  position: relative;

  min-height: 67px;

  padding:
    0
    48px
    0
    50px;

  border:
    1px solid
    var(--ufy-auth-line);

  border-radius: 17px;

  box-sizing: border-box;

  display: flex;
  align-items: center;

  background:
    rgba(20, 16, 32, 0.36);

  transition:
    border-color
    180ms
    ease,

    box-shadow
    180ms
    ease,

    background
    180ms
    ease;
}

.ufy-auth-input-row:focus-within {
  border-color:
    rgba(197, 126, 255, 0.78);

  box-shadow:
    0
    0
    0
    3px
    rgba(166, 77, 255, 0.10);

  background:
    rgba(24, 17, 40, 0.50);
}

.ufy-auth-field-icon {
  position: absolute;

  left: 17px;
  top: 50%;

  width: 23px;
  height: 23px;

  transform:
    translateY(-50%);

  color: #bd83ef;

  pointer-events: none;
}

.ufy-auth-field-icon svg {
  display: block;

  width: 100%;
  height: 100%;
}

.ufy-auth-input {
  width: 100%;
  min-width: 0;

  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: var(--ufy-tone-255,#ffffff);

  font: inherit;

  font-size:calc(15px * var(--ufy-font-scale,1));

  line-height: 1.2;
}

.ufy-auth-input::placeholder {
  color:
    rgba(
      226,
      213,
      239,
      0.48
    );

  opacity: 1;
}


.ufy-auth-date-input,
.ufy-auth-select {
  color-scheme: dark;
}


.ufy-auth-date-input {
  min-height: 44px;

  cursor: pointer;
}


.ufy-auth-date-input:invalid {
  color:
    rgba(
      226,
      213,
      239,
      0.48
    );
}


.ufy-auth-date-input:valid {
  color: var(--ufy-tone-255,#ffffff);
}


.ufy-auth-date-input[
  type="date"
]::-webkit-calendar-picker-indicator {
  opacity: 0.72;

  cursor: pointer;
}


.ufy-auth-select {
  cursor: pointer;
}


.ufy-auth-select:has(
  option[value=""]:checked
) {
  color:
    rgba(
      226,
      213,
      239,
      0.48
    );
}


.ufy-auth-select option {
  color: var(--ufy-tone-255,#ffffff);

  background:
    #171020;
}


.ufy-auth-field-action {
  appearance: none;

  position: absolute;

  right: 14px;
  top: 50%;

  width: 29px;
  height: 29px;

  padding: 3px;

  border: 0;

  transform:
    translateY(-50%);

  background: transparent;

  color: #be8de9;

  cursor: pointer;
}

.ufy-auth-field-action svg {
  width: 100%;
  height: 100%;
}

.ufy-auth-username-state {
  display: none;

  margin:
    6px
    0
    0;

  color:
    var(
      --ufy-auth-muted
    );

  font-size:calc(12px * var(--ufy-font-scale,1));

  line-height: 1.25;
}

.ufy-auth-field[
  data-username-state="checking"
] .ufy-auth-username-state,
.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-username-state,
.ufy-auth-field[
  data-username-state="unavailable"
] .ufy-auth-username-state,
.ufy-auth-field[
  data-username-state="invalid"
] .ufy-auth-username-state {
  display: block;
}

.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-input-row {
  border-color:
    var(
      --ufy-auth-lime
    );

  box-shadow:
    0
    0
    8px
    rgba(114, 245, 111, 0.26),

    inset
    0
    15px
    rgba(114, 245, 111, 0.045);
}

.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-field-icon,
.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-username-state,
.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-username-check {
  color:
    var(
      --ufy-auth-lime
    );
}

.ufy-auth-field[
  data-username-state="unavailable"
] .ufy-auth-input-row,
.ufy-auth-field[
  data-username-state="invalid"
] .ufy-auth-input-row {
  border-color: #ff6f91;

  box-shadow:
    0
    0
    8px
    rgba(255, 92, 132, 0.20);
}

.ufy-auth-field[
  data-username-state="unavailable"
] .ufy-auth-username-state,
.ufy-auth-field[
  data-username-state="invalid"
] .ufy-auth-username-state {
  color: #ff8da8;
}

.ufy-auth-username-check {
  position: absolute;

  right: 17px;
  top: 24px;

  display: none;

  width: 23px;
  height: 23px;

  color:
    var(
      --ufy-auth-muted
    );
}

.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-username-check {
  display: block;

  filter:
    drop-shadow(
      0
      0
      5px
      rgba(114, 245, 111, 0.50)
    );
}

.ufy-auth-field[
  data-username-state="available"
] .ufy-auth-input-row {
  padding-right: 50px;
}