password-field {
  display: block;
  text-align: left;
}

field-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--on-surface) 6%, transparent);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 0.2s var(--emphasized), background 0.2s linear;
}

field-box:hover {
  background: color-mix(in srgb, var(--on-surface) 9%, transparent);
}

field-box:focus-within {
  box-shadow: inset 0 0 0 2px var(--primary);
}

field-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 18px 4px 0 16px;
  border: 0;
  background: transparent;
  color: var(--on-surface);
  font: inherit;
  font-size: 16px;
  letter-spacing: 0.5px;
  outline: none;
}

/* & Etiqueta flotante (M3 filled): centrada mientras el campo está vacío; chica y arriba, adentro, al enfocar o con texto. */
field-label {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--on-surface-variant);
  font-size: 16px;
  transform: translateY(-50%);
  transform-origin: left center;
  pointer-events: none;
  transition: transform 0.25s var(--emphasized), color 0.2s linear;
}

field-box input:focus + field-label,
field-box input:not(:placeholder-shown) + field-label {
  transform: translateY(calc(-50% - 12px)) scale(0.75);
}

field-box input:focus + field-label {
  color: var(--primary);
}

field-box button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--on-surface-variant);
  cursor: pointer;
}

field-box button:hover {
  background: color-mix(in srgb, var(--on-surface) 8%, transparent);
}

field-message {
  display: block;
  min-height: 0;
  padding: 0 16px;
  color: var(--error);
  font-size: 13px;
  line-height: 18px;
}

password-field[state="error"] field-message {
  padding-top: 6px;
}

password-field[state="error"] field-box {
  box-shadow: inset 0 0 0 2px var(--error);
}

password-field[state="error"] field-box input + field-label {
  color: var(--error);
}

@media (prefers-reduced-motion: no-preference) {
  password-field[state="error"] field-box {
    animation: shake 0.42s var(--emphasized);
  }
}

@keyframes shake {
  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}