/* ═══════════════════════════════════════════════════════════
   🎨 AUTHENTICATION PAGES STYLESHEET (v2.0)
   ═══════════════════════════════════════════════════════════
   Consolidação centralizada de CSS para:
   • register.php
   • reset_password.php
   • confirm_registration.php
   • index.php (uses .register-card)
   
   Data: 21/Fev/2026 | Status: Ativo
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   �️ LOGIN BACKGROUND - Fundo elegante com branding
   ═══════════════════════════════════════════════════════════ */

.login-bg {
    background: 
        linear-gradient(135deg, 
            var(--primary-500) 0%, 
            var(--primary-600) 50%, 
            var(--primary-500) 100%
        ),
        var(--login-bg-image, none) center/cover no-repeat fixed;
    background-blend-mode: overlay;
    min-height: 100vh;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.login-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--primary-300) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.1;
    animation: particles 20s linear infinite;
}

@keyframes particles {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

@media (max-width: 768px) {
    .login-bg {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .login-bg {
        padding: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   �� CONTAINER CARDS - Base & Styling
   ═══════════════════════════════════════════════════════════ */

.register-card-out,
.register-container-out,
.auth-container-out,
.reset-container-out,
.confirm-container-out {  
    max-width: 420px;
    margin: 0 auto;
    padding: 15px;

background: -webkit-linear-gradient(90deg, var(--logar-1900), var(--logar-1700), var(--logar-1900));
background: linear-gradient(90deg, var(--logar-1900), var(--logar-1700), var(--logar-1900));

/* background: -webkit-linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994));
background: linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994)); */



    border-radius: 20px;
}

.register-card,
.register-container,
.auth-container,
.reset-container,
.confirm-container {

background: -webkit-linear-gradient(90deg, var(--logar-996), var(--logar-997), var(--logar-998), var(--logar-996));
background: linear-gradient(90deg, var(--logar-996), var(--logar-997), var(--logar-998), var(--logar-996));

    border-radius: 20px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(233, 223, 223, 0.2);
    backdrop-filter: blur(20px);
    border: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    animation: cardFadeIn 0.6s ease-out;
    position: relative;
    z-index: 1;
    padding: 15px;
}

.register-card {
    max-width: 420px;
    padding: 0;
}

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════
   👤 CARD HEADER - Elegante com Shimmer
   ═══════════════════════════════════════════════════════════ */

.card-header {

background: -webkit-linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994));
background: linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994));

    color: var(--white);
    border-radius: 15px 15px 0 0 !important;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.register-card .card-header {
    padding: 1.5rem 1rem;
}

.register-container .card-header {
    padding: 1.5rem 1.5rem;
}

.card-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { transform: translate(-20%, -20%); }
    50% { transform: translate(20%, 20%); }
}

.card-header h2 {
    margin: 0;
    font-weight: 700;
    font-size: 1.75rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════════════════════════
   📝 LABELS & FORM ELEMENTS
   ═══════════════════════════════════════════════════════════ */

.card-body {
    padding: 2rem 1.5rem;
}

.form-label {
    font-weight: 500;
    color: #fffbeb;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.form-label-small {
    font-weight: 400;
    color: #fffbeb;
    font-size: 0.75rem;
}

.form-control {
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--white);
    line-height: 1.0;
}

.form-control:focus {
    border-color: var(--primary-500);
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25);
    outline: none;
}

.form-control.is-invalid {
    border-color: var(--danger-500);
    animation: slideInError 0.3s ease;
}

.form-control.has-toggle {
    padding-right: 38px;
}

/* ═══════════════════════════════════════════════════════════
   🎯 BUTTONS - Modernos com Ripple
   ═══════════════════════════════════════════════════════════ */

.btn-primary-logar {
    /* background: linear-gradient(135deg, 
        var(--primary-500), 
        var(--primary-700)
    ); */
background: -webkit-linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994));
background: linear-gradient(90deg, var(--logar-993), var(--logar-990), var(--logar-994));

    border: none;
    font-weight: 600;
    padding: 0.875rem;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
    position: relative;
    overflow: hidden;
    width: 100%;
}

.btn-primary-logar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-primary-logar:hover::before {
    width: 300px;
    height: 300px;
}

.btn-primary-logar:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--primary-rgb), 0.5);
    background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
    filter: brightness(1.15);
    color: var(--white);
}

.btn-primary-logar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--primary-rgb), 0.4);
}

.btn-primary-logar:active {
    transform: translateY(0);
}

.btn-outline-secondary-logar {
    border: 2px solid var(--gray-300);
    color: var(--gray-100);
    font-weight: 500;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.btn-outline-secondary-logar:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
    transform: translateY(-1px);
    color: var(--gray-800) !important;
}

.btn-link {
    color: var(--primary-600);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-link:hover {
    color: var(--primary-800);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   ⚠️ ALERTS - Elegantes com Gradiente
   ═══════════════════════════════════════════════════════════ */

.alert {
    border-radius: 10px;
    border: none;
    font-size: 0.9rem;
}

.alert-danger {
    background: linear-gradient(135deg, var(--danger-50), var(--danger-100));
    color: var(--danger-700);
    padding: 10px;
}

.alert-success {
    background: linear-gradient(135deg, var(--success-50), var(--success-100));
    color: var(--success-700);
    padding: 10px;
}

.alert-warning {
    background: linear-gradient(135deg, var(--warning-50), var(--warning-100));
    color: var(--warning-700);
    padding: 10px;
}

/* ═══════════════════════════════════════════════════════════
   🔗 LINKS & TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

a.text-decoration-none {
    color: #5a6fd8;
    font-weight: 500;
    transition: color 0.3s ease;
}

a.text-decoration-none:hover {
    color: #9ca3af;
}


a.text-register-none {
    color: var(--info-50);
    font-weight: 500;
    font-size: 0.75rem;
    transition: color 0.3s ease;
}

a.text-register-none:hover {
    color: var(--info-100);
}

.bi {
    margin-right: 0.5rem;
}

.text-success { 
    color: #28a745; 
}

.text-danger { 
    color: #dc3545; 
}

/* ═══════════════════════════════════════════════════════════
   🖼️ HOME SLIDESHOW - AUTH CARD SHELL
   ═══════════════════════════════════════════════════════════ */

.auth-home-shell {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-width: 420px;
    width: 90%;
    top: 15px;
    animation: fadeIn 1s ease-in-out;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
}

.auth-home-shell .reset-container {
    position: relative;
    z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   ✨ ANIMATED BORDER EFFECTS - Multiple Styles
   ════════════════════════════════════════════════════════════ */

/* DEFAULT: Dashing Border (Laranja ↔ Roxo) - Atual */
.auth-home-shell::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 20px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23grad1)' stroke-width='15' stroke-dasharray='150 850' stroke-dashoffset='1000' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dashoffset' values='1000;0' dur='3s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff6b35'/%3E%3Cstop offset='100%25' style='stop-color:%23764ba2'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

.auth-home-shell::after {
    content: '';
    position: absolute;
    inset: 14px;
    border-radius: 18px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23grad2)' stroke-width='12' stroke-dasharray='150 850' stroke-dashoffset='0' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dashoffset' values='0;-1000' dur='6s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='grad2' x1='100%25' y1='100%25' x2='0%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%23764ba2'/%3E%3Cstop offset='100%25' style='stop-color:%23ff6b35'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}


/* NEON EFFECT: Brilho neon com movimento */
.auth-home-shell.neon-effect::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='%2300ffff' stroke-width='2' filter='url(%23blur)' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.8;1;0.8' dur='1.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    filter: drop-shadow(0 0 8px #00ffff) drop-shadow(0 0 16px #00ddeb);
}

.auth-home-shell.neon-effect::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='%23ff00ff' stroke-width='2' filter='url(%23blur2)' opacity='0.8'%3E%3Canimate attributeName='opacity' values='1;0.8;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3Cfilter id='blur2'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    filter: drop-shadow(0 0 8px #ff00ff) drop-shadow(0 0 16px #ff6b9d);
}

/* FLOWING LIGHT: Luz fluida que percorre o perímetro */
.auth-home-shell.flowing-light::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23flow1)' stroke-width='4' stroke-dasharray='300 600' stroke-dashoffset='600'%3E%3Canimate attributeName='stroke-dashoffset' values='600;0' dur='4s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='flow1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff0080;stop-opacity:0'/%3E%3Cstop offset='50%25' style='stop-color:%23ff0080;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%23ff0080;stop-opacity:0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.auth-home-shell.flowing-light::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23flow2)' stroke-width='4' stroke-dasharray='300 600' stroke-dashoffset='0'%3E%3Canimate attributeName='stroke-dashoffset' values='0;-600' dur='4s' repeatCount='indefinite'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='flow2' x1='100%25' y1='100%25' x2='0%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%2300ddeb;stop-opacity:0'/%3E%3Cstop offset='50%25' style='stop-color:%2300ddeb;stop-opacity:1'/%3E%3Cstop offset='100%25' style='stop-color:%2300ddeb;stop-opacity:0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}


/* RAINBOW SHIMMER: Arco-íris deslizante */
.auth-home-shell.rainbow-shimmer::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23rainbow)' stroke-width='3'%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='rainbow' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff0000'/%3E%3Cstop offset='16%25' style='stop-color:%23ff7f00'/%3E%3Cstop offset='33%25' style='stop-color:%23ffff00'/%3E%3Cstop offset='50%25' style='stop-color:%2300ff00'/%3E%3Cstop offset='66%25' style='stop-color:%230000ff'/%3E%3Cstop offset='83%25' style='stop-color:%234b0082'/%3E%3Cstop offset='100%25' style='stop-color:%239400d3'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    animation: shimmerRotate 6s linear infinite;
}

.auth-home-shell.rainbow-shimmer::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23rainbow2)' stroke-width='3'%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='rainbow2' x1='100%25' y1='100%25' x2='0%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%239400d3'/%3E%3Cstop offset='16%25' style='stop-color:%234b0082'/%3E%3Cstop offset='33%25' style='stop-color:%230000ff'/%3E%3Cstop offset='50%25' style='stop-color:%2300ff00'/%3E%3Cstop offset='66%25' style='stop-color:%23ffff00'/%3E%3Cstop offset='83%25' style='stop-color:%23ff7f00'/%3E%3Cstop offset='100%25' style='stop-color:%23ff0000'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    animation: shimmerRotate 6s linear infinite reverse;
}





@keyframes shimmerRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* SOLID COLOR: Borda fixa (sem animação) */
.auth-home-shell.solid-border::before,
.auth-home-shell.solid-border::after {
    background: none !important;
}

/* NO EFFECT: sem animação e sem borda decorativa */
.auth-home-shell.no-effect {
    animation: none;
    box-shadow: none;
}

.auth-home-shell.no-effect::before,
.auth-home-shell.no-effect::after {
    content: none;
    background: none !important;
}

.auth-home-shell.no-effect .reset-container {
    box-shadow: none;
}

.auth-home-shell.solid-border {
    box-shadow: 0 0 0 2px #ff6b35;
}

.auth-home-shell.solid-border .reset-container {
    box-shadow: inset 0 0 0 1px #764ba2;
}

.auth-home-logo,
.auth-home-body img,
.auth-home-header img {
    height: 90px;
    margin-bottom: 0;
    border-radius: 25%;
}

.auth-home-text {
    font-size: 1.1rem;
    color: #1d2b36ff;
    margin: 0;
}

.auth-home-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 0.5rem;
}

.auth-home-actions .btn-primary-logar i,
.auth-home-actions .btn-outline-primary i {
    margin-right: 0.5rem;
}

.auth-home-actions .bi {
    margin-right: 0.35rem;
}

.auth-home-actions .btn-primary-logar,
.auth-home-actions .btn-outline-primary {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: transform 0.2s;
    flex: 1;
    min-width: 120px;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.auth-home-actions .btn-primary-logar {
    background: linear-gradient(45deg, #6b48ff, #00ddeb);
    border: none;
    color: #fff;
}

.auth-home-actions .btn-primary-logar:hover,
.auth-home-actions .btn-outline-primary:hover {
    transform: scale(1.05);
}

.auth-home-actions .btn-outline-primary {
    color: var(--navbar-bg);
    border: 2px solid var(--navbar-bg);
}

.auth-home-actions .btn-outline-primary:hover {
    background-color: var(--navbar-bg);
    color: #fff;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

@media (max-width: 768px) {
    .auth-home-shell {
        width: 92%;
    }

    .auth-home-logo,
    .auth-home-body img,
    .auth-home-header img {
        height: 60px;
    }

    .auth-home-text {
        font-size: 1rem;
    }

    .auth-home-actions {
        gap: 0.4rem;
    }

    .auth-home-actions .btn-primary-logar,
    .auth-home-actions .btn-outline-primary {
        padding: 0.55rem 0.75rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 576px) {
    .auth-home-shell {
        width: 94%;
        top: 10px;
    }

    .auth-home-body img,
    .auth-home-header img {
        height: 60px;
    }

    .auth-home-text {
        font-size: 0.9rem;
    }

    .auth-home-actions {
        gap: 0.4rem;
    }

    .auth-home-actions .btn-primary-logar,
    .auth-home-actions .btn-outline-primary {
        padding: 0.6rem 0.75rem;
        font-size: 0.85rem;
    }

    .auth-home-actions .bi {
        margin-right: 0.2rem;
    }
}

@media (max-width: 400px) {
    .auth-home-shell {
        top: 8px;
    }

    .auth-home-logo,
    .auth-home-body img,
    .auth-home-header img {
        height: 60px;
    }

    .auth-home-text {
        font-size: 0.85rem;
    }

    .auth-home-actions {
        flex-direction: row;
        gap: 0.4rem;
    }

    .auth-home-actions .btn-primary-logar,
    .auth-home-actions .btn-outline-primary {
        width: 100%;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .auth-home-actions .bi {
        margin-right: 0.15rem;
    }
}

@media (max-width: 768px) and (max-height: 450px) {
    .auth-home-shell {
        top: 5px;
    }

    .auth-home-logo,
    .auth-home-body img,
    .auth-home-header img {
        height: 60px;
    }

    .auth-home-text {
        font-size: 0.8rem;
    }

    .auth-home-actions {
        margin-top: 0.3rem;
        gap: 0.3rem;
    }

    .auth-home-actions .btn-primary-logar,
    .auth-home-actions .btn-outline-primary {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   🔐 PASSWORD STRENGTH INDICATOR
   ═══════════════════════════════════════════════════════════ */

.password-strength-container {
    margin-top: 0.5rem;
    display: none;
}

.password-strength-bar {
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.password-strength-fill {
    height: 100%;
    width: 0%;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.password-strength-fill.weak { 
    background: #dc3545; 
    width: 33%; 
}

.password-strength-fill.medium { 
    background: #ffc107; 
    width: 66%; 
}

.password-strength-fill.strong { 
    background: #28a745; 
    width: 100%; 
}

.password-strength-text {
    font-size: 0.75rem;
    font-weight: 500;
}

.password-strength-text.weak { 
    color: #dc3545; 
}

.password-strength-text.medium { 
    color: #ffc107; 
}

.password-strength-text.strong { 
    color: #28a745; 
}

/* ═══════════════════════════════════════════════════════════
   👁️ PASSWORD TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════ */

.password-toggle {
    position: relative;
}

.password-toggle .toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    padding: 5px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    z-index: 10;
}

.password-toggle .toggle-btn:hover {
    color: var(--primary-500);
}

/* ═══════════════════════════════════════════════════════════
   ❌ VALIDATION & FEEDBACK
   ═══════════════════════════════════════════════════════════ */

.invalid-feedback {
    font-size: 0.75rem;
    color: var(--danger-500);
    display: block;
    margin-top: 0.25rem;
}

@keyframes slideInError {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   🏷️ LOGOS - Auth Pages
   ═══════════════════════════════════════════════════════════ */

.logo-confirm,
.logo-reset {
    max-width: 120px;
    margin: 0 auto 20px;
    border-radius: 25%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════
   📊 STEP INDICATORS - Reset Password
   ═══════════════════════════════════════════════════════════ */

.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 12px;
    gap: 10px;
}

.step {
    flex: 1;
    text-align: center;
    padding: 10px;
    background: #e0e0e0;
    position: relative;
    color: #999;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.step.active {
    background: linear-gradient(90deg, var(--primary-600), var(--primary-900));
    color: white;
}

.step.completed {
    background: #28a745;
    color: white;
}

.step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 10px solid #e0e0e0;
    z-index: 1;
    transition: border-left-color 0.3s ease;
}

.step.active:not(:last-child)::after {
    border-left-color: var(--primary-900);
}

.step.completed:not(:last-child)::after {
    border-left-color: #28a745;
}

/* ═══════════════════════════════════════════════════════════
   💻 CODE INPUT - Verification Codes
   ═══════════════════════════════════════════════════════════ */

.code-input {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.5rem;
    font-weight: bold;
    max-width: 200px;
    margin: 0 auto;
    display: block;
}

.code-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.code-input-wrapper .form-label {
    align-self: flex-start;
    width: 100%;
    margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   📱 RESPONSIVE DESIGN - Mobile First
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .register-card,
    .auth-container,
    .register-container,
    .reset-container,
    .confirm-container {
        max-width: 95%;
        padding: 20px;
        border-radius: 16px;
    }
    
    .password-strength-text,
    .form-label-small {
        font-size: 0.7rem;
    }
    
    .card-header {
        padding: 1.5rem 1rem;
    }
    
    .card-body {
        padding: 1.5rem 1rem;
    }
}

@media (max-width: 576px) {
    .register-card,
    .auth-container,
    .register-container,
    .reset-container,
    .confirm-container {
        max-width: calc(100% - 1rem);
        padding: 15px;
        border-radius: 12px;
    }
    
    .logo-confirm,
    .logo-reset {
        max-width: 80px;
    }
    
    .card-header h2 {
        font-size: 1.3rem;
    }
}

@media (max-width: 400px) {
    .register-card,
    .auth-container,
    .register-container,
    .reset-container,
    .confirm-container {
        max-width: calc(100% - 0.5rem);
        padding: 12px;
        border-radius: 10px;
    }
    
    .card-header h2 {
        font-size: 1.1rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   ✨ AVAILABILITY STATUS
   ═══════════════════════════════════════════════════════════ */

.availability-status {
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 NOVAS ANIMAÇÕES - VERSÃO 2.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* LIQUID METAL: Efeito morfing de metal líquido */
.auth-home-shell.liquid-metal::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23liquid1)' stroke-width='6' opacity='1'%3E%3Canimate attributeName='stroke-width' values='6;12;6' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='3s' repeatCount='indefinite'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='3'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='liquid1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff0080'/%3E%3Cstop offset='50%25' style='stop-color:%23ff6b35'/%3E%3Cstop offset='100%25' style='stop-color:%236b00ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    filter: blur(0.5px) saturate(1.2);
}

.auth-home-shell.liquid-metal::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='url(%23liquid2)' stroke-width='6' opacity='1'%3E%3Canimate attributeName='stroke-width' values='6;12;6' dur='3s' repeatCount='indefinite' begin='1.5s'/%3E%3Canimate attributeName='opacity' values='1;0.4;1' dur='3s' repeatCount='indefinite' begin='1.5s'/%3E%3C/rect%3E%3Cdefs%3E%3ClinearGradient id='liquid2' x1='100%25' y1='100%25' x2='0%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%236b00ff'/%3E%3Cstop offset='50%25' style='stop-color:%23ff6b35'/%3E%3Cstop offset='100%25' style='stop-color:%23ff0080'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    filter: blur(0.5px) saturate(1.2);
}

/* PARTICLE ORBIT: Partículas orbitando a borda */
.auth-home-shell.particle-orbit::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' fill='none' stroke='%23ff6b35' stroke-width='1' stroke-dasharray='141 141' opacity='0.3'/%3E%3Cg id='particles'%3E%3Ccircle cx='95' cy='50' r='2' fill='%2300ddeb' opacity='0.8'%3E%3CanimateMotion dur='8s' repeatCount='indefinite' path='M 95 50 A 45 45 0 0 1 50 95 A 45 45 0 0 1 5 50 A 45 45 0 0 1 50 5 A 45 45 0 0 1 95 50'/%3E%3C/circle%3E%3Ccircle cx='95' cy='50' r='1.5' fill='%23ff0080' opacity='0.6'%3E%3CanimateMotion dur='8s' repeatCount='indefinite' path='M 95 50 A 45 45 0 0 0 50 5 A 45 45 0 0 0 5 50 A 45 45 0 0 0 50 95 A 45 45 0 0 0 95 50' begin='2s'/%3E%3C/circle%3E%3Ccircle cx='95' cy='50' r='1' fill='%23764ba2' opacity='0.5'%3E%3CanimateMotion dur='8s' repeatCount='indefinite' path='M 95 50 A 45 45 0 0 1 50 5 A 45 45 0 0 1 5 50 A 45 45 0 0 1 50 95 A 45 45 0 0 1 95 50' begin='4s'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 0 15px rgba(0, 221, 235, 0.3) inset;
}

.auth-home-shell.particle-orbit::after {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 100'%3E%3Crect width='100%25' height='100%25' fill='none' rx='13' ry='13' stroke='%23764ba2' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.2) inset;
}