/* Lucian UX/UI Prompt #036 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#036 */
/* Campo de senha nova com medidor de força. Tokens --ux-* apontam para as variáveis de tema do Ervo. */

.u036 {
  --ux-surface: var(--cartao);
  --ux-surface-2: var(--cartao-2);
  --ux-surface-3: var(--borda-suave);
  --ux-ink: var(--texto);
  --ux-ink-2: var(--suave);
  --ux-ink-3: var(--suave);
  --ux-line-2: var(--borda);
  --ux-accent: var(--primaria);
  --ux-accent-ink: #ffffff;
  --ux-mint: var(--st-ideal);
  --ux-ease: cubic-bezier(.2, .8, .2, 1);
  --ux-spring: cubic-bezier(.34, 1.45, .64, 1);
  --lv: var(--ux-line-2);
}
:root[data-tema="escuro"] .u036 { --ux-accent-ink: #0c110e; }

.u036, .u036 *, .u036 *::before, .u036 *::after { box-sizing: border-box; }
.u036 { -webkit-font-smoothing: antialiased; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; color: var(--ux-ink); }
:where(.u036) :is(button, input) { font: inherit; color: inherit; }
:where(.u036) button { cursor: pointer; }

.u036 { position: relative; width: 100%; display: flex; flex-direction: column; }
.u036-lab { display: block; margin: 0 4px 8px; font-size: 13px; font-weight: 700; color: var(--ux-ink-3); }
.u036-box { position: relative; display: flex; align-items: center; height: 60px; padding: 0 8px 0 18px; border-radius: 18px; background: var(--ux-surface); box-shadow: 0 0 0 1.5px var(--ux-line-2); transition: box-shadow .25s; }
.u036-box:focus-within { box-shadow: 0 0 0 2px var(--lv), 0 0 0 6px color-mix(in srgb, var(--lv) 18%, transparent); }
.u036 .u036-in { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; border: 0; border-radius: 0; outline: 0; padding: 0; background: none; box-shadow: none; font-size: 18px; font-weight: 650; letter-spacing: .04em; color: var(--ux-ink); }
.u036-in:focus-visible { outline: none; }
.u036-in:disabled { opacity: .55; }
.u036-eye { width: 44px; height: 44px; flex: none; border: 0; padding: 0; border-radius: 13px; background: none; color: var(--ux-ink-2); display: grid; place-items: center; transition: background-color .2s; }
.u036-eye:hover { background: var(--ux-surface-2); }
.u036-eye:focus-visible { outline: 2px solid var(--ux-accent); outline-offset: 1px; }
.u036-eye svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.u036-lid { transform-origin: 12px 12px; transition: transform .4s var(--ux-spring); }
.u036-pupil { transform-origin: 12px 12px; transition: transform .35s var(--ux-spring) .05s; }
.u036-slash { stroke-dasharray: 24; stroke-dashoffset: 0; transition: stroke-dashoffset .35s var(--ux-ease); }
.u036.is-show .u036-slash { stroke-dashoffset: 24; }
.u036:not(.is-show) .u036-pupil { transform: scale(0); }
.u036:not(.is-show) .u036-lid { transform: scaleY(.15); }
.u036-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 16px 4px 0; }
.u036-meter i { height: 7px; border-radius: 4px; background: var(--ux-surface-3); overflow: hidden; position: relative; }
.u036-meter i::after { content: ""; position: absolute; inset: 0; background: var(--lv); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ux-ease), background-color .4s; }
.u036-meter i.on::after { transform: none; }
.u036-meter i:nth-child(2)::after { transition-delay: .05s; }
.u036-meter i:nth-child(3)::after { transition-delay: .1s; }
.u036-meter i:nth-child(4)::after { transition-delay: .15s; }
.u036-lv { display: flex; justify-content: space-between; margin: 9px 4px 0; font-size: 13px; font-weight: 650; color: var(--ux-ink-3); }
.u036-lv b { color: var(--lv); transition: color .4s; }
.u036-rules { margin: 18px 0 0; padding: 16px; list-style: none; border-radius: 18px; background: var(--ux-surface-2); display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.u036-r { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ux-ink-3); transition: color .3s; }
.u036-r i { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.8px var(--ux-line-2); transition: box-shadow .3s, background-color .3s; }
.u036-r svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ux-accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.u036-r path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset .3s var(--ux-ease) .1s; }
.u036-r.ok { color: var(--ux-ink); }
.u036-r.ok i { background: var(--ux-mint); box-shadow: none; animation: u036-pop .4s var(--ux-spring); }
.u036-r.ok path { stroke-dashoffset: 0; }
@keyframes u036-pop { from { transform: scale(.4); } }

@media (max-width: 380px) { .u036-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .u036, .u036 *, .u036 *::before, .u036 *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}