/* Adaptado del ejemplo Animated Login Form - CSS, Vincent Van Goggles, licencia MIT. */
:root { --login-violet: #6d5dfc; --login-lime: #b7f34a; --login-pink: #ff4d78; --login-yellow: #ffd86d; }
* { box-sizing: border-box; }
body.talvia-ring-page { align-items: center; background: #111; display: flex; font-family: "Trebuchet MS", Arial, sans-serif; justify-content: center; margin: 0; min-height: 100vh; overflow: hidden; padding: 1rem; }
.talvia-ring { align-items: center; display: flex; height: 500px; justify-content: center; position: relative; width: 500px; }
.talvia-ring > i { border: 2px solid #fff; inset: 0; position: absolute; transition: .5s; }
.talvia-ring > i:nth-child(1) { animation: talvia-ring-spin 6s linear infinite; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; }
.talvia-ring > i:nth-child(2) { animation: talvia-ring-spin-reverse 4s linear infinite; border-radius: 41% 44% 56% 59% / 38% 62% 63% 37%; }
.talvia-ring > i:nth-child(3) { animation: talvia-ring-spin-reverse 10s linear infinite; border-radius: 47% 53% 44% 56% / 55% 40% 60% 45%; }
.talvia-ring:hover > i { border-color: var(--ring-color); border-width: 5px; filter: drop-shadow(0 0 18px var(--ring-color)); }
.talvia-login-form { align-items: center; display: flex; flex-direction: column; gap: 14px; position: absolute; width: 310px; z-index: 1; }
.talvia-login-brand { align-items: center; color: #fff; display: flex; font-size: 1.35rem; font-weight: 800; gap: .5rem; letter-spacing: -.04em; }.talvia-login-brand > span { align-items: center; background: var(--login-violet); border-radius: 50%; display: inline-flex; font-size: .78rem; height: 31px; justify-content: center; width: 31px; }.talvia-login-brand > span span { color: var(--login-lime); margin: .42rem 0 0 .03rem; }
.talvia-login-caption { color: var(--login-lime); font-size: .7rem; font-weight: 800; letter-spacing: .1em; margin: 0; text-transform: uppercase; }.talvia-login-form h1 { color: #fff; font-size: 2rem; font-weight: 500; letter-spacing: -.04em; margin: .3rem 0 0; }.talvia-login-subtitle { color: rgba(255,255,255,.68); font-size: .87rem; margin: 0 0 .3rem; }
.talvia-input { margin-top: 11px; width: 100%; }.talvia-input input, .talvia-input button { background: transparent; border: 2px solid #fff; border-radius: 40px; color: #fff; font-size: 1rem; outline: none; padding: 13px 20px; transition: border-color .2s, box-shadow .2s, transform .2s; width: 100%; }.talvia-input input::placeholder { color: rgba(255,255,255,.68); }.talvia-input input:focus { border-color: var(--login-lime); box-shadow: 0 0 0 4px rgba(183,243,74,.13); }.talvia-input button { background: linear-gradient(45deg, var(--login-pink), var(--login-yellow)); border: 0; cursor: pointer; font-weight: 700; }.talvia-input button:hover { box-shadow: 0 0 20px rgba(255,117,138,.48); transform: translateY(-1px); }
.talvia-login-links { color: rgba(255,255,255,.65); font-size: .78rem; margin: 7px 0 0; }.talvia-login-links a { color: var(--login-lime); font-weight: 700; text-decoration: none; }.talvia-login-form .alert-danger { background: rgba(176,44,69,.3); border: 1px solid rgba(255,135,154,.4); border-radius: 14px; color: #ffd7de; font-size: .78rem; padding: .7rem; }
@keyframes talvia-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes talvia-ring-spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@media (max-width: 575.98px) { .talvia-ring { height: 390px; width: 390px; }.talvia-ring > i { inset: 8px; }.talvia-login-form { width: 270px; }.talvia-login-form h1 { font-size: 1.7rem; } } @media (prefers-reduced-motion: reduce) { .talvia-ring > i { animation: none; } }