/* AUTH PREMIUM STYLES - REPLICA EXACTA CAPSOLVER */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* ... resto del root ... */

.brand-logo {
    position: absolute;
    top: 18px;
    left: 80px;
    font-family: 'Montserrat', sans-serif;
    /* Fuente original */
    font-size: 46px;
    /* Más grande */
    font-weight: 900;
    /* Extra Bold */
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
    /* Un poco más de espacio con el icono al ser mas grande */
    letter-spacing: -1px;
    /* Más pegadito */
    text-decoration: none;
}

:root {
    --bg-page: #050509;
    /* Fondo de la página (casi negro) */
    --card-bg: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    /* Fondo tarjeta gris oscuro corporativo */
    --card-border: #2a2a2a;
    /* Borde gris oscuro */

    --input-bg: #1a1a1a;
    /* Fondo de inputs gris oscuro liso */
    --input-border: #2a2a2a;
    /* Borde inputs gris oscuro */

    /* Gradiente del borde del botón: Verde (#4ade80) -> Azul (#3b82f6) */

    --text-main: #FFFFFF;
    --text-label: #A0ABC0;
    /* Texto gris azulado claro */
    --label-red: #f87171;
    /* Asterisco rojo */
}

body.auth-body {
    margin: 0;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    background-color: #070707;
    /* background-image: radial-gradient(circle at 66% 50%, #252525 0%, #121314 78%); */
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    min-height: 90vh;
    align-items: center;
    justify-content: center;
}


/* --- TARJETA LOGIN (Pixel Perfect) --- */

.form-side {
    flex: 1;
    display: flex;
    justify-content: center;
}

.auth-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 40px 50px;
    /* Mas padding lateral */
    width: 420px;
    max-width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 0 60px rgb(26 26 26);
}

/* Auth Header */
.auth-header h2 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 10px;
}

.auth-header p {
    color: #cbd5e1;
    font-size: 0.95rem;
    margin: 0 0 25px;
    font-weight: 500;
}

.auth-form {
    text-align: left;
}

/* Labels */
.input-label {
    color: var(--text-label);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 15px;
    display: block;
}

.input-label:first-letter {
    color: var(--label-red);
    /* Intento de asterisco "hack", mejor usar span en html si se pudiera, pero esto colorea la E de Email xD */
    /* Mejor: el asterisco está en el texto del HTML visualmente en la imagen, aquí lo simulamos con ::before en el label */
}

.input-label::before {
    content: "* ";
    color: var(--label-red);
}
.input-label.optional::before {
    content: "";
}

/* Inputs */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    /* Gris tono medio */
    font-size: 1rem;
    z-index: 2;
}


.input-group input {
    width: 100%;
    background: #101010;
    border: 1px solid #292929;
    border-radius: 8px;
    padding: 14px 14px 14px 45px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #525252;
    background: #2f2f2f;
}

.input-group input.valid {
    border-color: #22c55e;
}

.input-group input.invalid {
    border-color: #ef4444;
}

.validation-message {
    font-size: 0.75rem;
    color: #ef4444;
    margin-top: 4px;
    display: none;
}

.validation-message.show {
    display: block;
}

.toggle-password {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: color 0.2s;
    z-index: 2;
}

.toggle-password:hover {
    color: #fff;
}


/* Options */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0 25px;
    font-size: 0.85rem;
    color: var(--text-label);
    /* label color para el texto */
    font-weight: 600;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    color: #64748b;
    /* Mas oscuro check text */
}

.checkbox-container input {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    background: #1e293b;
    /* No funciona en checkbox nativo sin appearance: none */
}

.forgot-password {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    /* Subrayado sutil */
    padding-bottom: 1px;
}

.forgot-password:hover {
    color: white;
    border-color: white;
}

/* --- WRAPPER CON ESTRELLAS --- */
.btn-stars-wrapper {
    position: relative;
    padding: 35px 0 20px 0;
    /* Espacio para las estrellas (más arriba) */
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Estrellitas usando pseudo-elementos del wrapper */
/* Usamos caracteres unicode ✦ o ✨ posicionados */
.btn-stars-wrapper::before,
.btn-stars-wrapper::after {
    position: absolute;
    color: #94a3b8;
    /* Gris azulado brillo */
    font-size: 14px;
    opacity: 0.4;
    /* Menos opacidad en reposo */
    transition: all 0.3s;
    z-index: 1;
    /* Por encima del botón */
}

.btn-stars-wrapper:hover::before,
.btn-stars-wrapper:hover::after {
    opacity: 1;
    animation: twinkle 2s infinite ease-in-out alternate;
    /* Más lento y suave */
}

.btn-stars-wrapper::before {
    content: "✦";
    top: 5px;
    left: 20%;
    text-shadow: 20px 30px 0 #64748b;
    /* Segunda estrella "sombra" */
}

.btn-stars-wrapper::after {
    content: "✦";
    top: 0px;
    right: 20%;
    text-shadow: -15px 25px 0 #94a3b8;
}

@keyframes twinkle {
    0% {
        transform: scale(0.9) translateY(0);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.4) translateY(-5px);
        opacity: 1;
    }
}


/* --- BOTÓN LOCO --- */
.btn-glow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    /* Tamaño aumentado para mejor visibilidad */
    width: 100%;
    max-width: 320px;
    padding: 14px 24px;
    margin: 0 auto;
    /* ✨ Centrar el botón */

    /* El borde mágico degradado */
    background: linear-gradient(#1e293b, #1e293b) padding-box,
        linear-gradient(90deg, #bef264 0%, #22d3ee 100%) border-box;
    /* Lime to Cyan */
    border: 2px solid transparent;
    border-radius: 50px;

    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
    /* Cyan glow */
    transition: all 0.3s;
}

.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 30px rgb(238 34 228 / 31%);
}

.btn-glow:active {
    transform: translateY(2px) scale(0.96);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.1);
    transition: all 0.05s;
}

.icon-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 6px;
    /* Cuadrado redondeado */
    font-size: 0.7rem;
    font-weight: 900;
}

/* Footer text */
.auth-footer {
    color: #94a3b8;
    margin-top: 5px;
    font-weight: 500;
}

.auth-footer a {
    color: #fff;
    font-weight: 700;
}

/* User Info & Avatar */
/* User Info & Avatar */
.sidebar-footer {
    padding: 1rem;
    background: transparent;
    /* Sin fondo */
    border-top: none;
    /* Sin borde superior */
    margin-bottom: -40px;
}

.user-info-link {
    text-decoration: none !important;
    display: block;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0.5rem;
    padding: 8px 0;
    /* Un poco de aire para el clic */
    transition: all 0.2s ease;
}

.user-info:hover {
    opacity: 0.8;
}

.user-name {
    font-size: 11px;
    /* Un pelín más pequeño para que quepa mejor */
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    /* Evita que empuje el resto de elementos */
}

.user-avatar {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    flex: 0 0 42px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 1.2rem;
    background: #1f2937;
    border: 2px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    /* Para recortar la imagen */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    aspect-ratio: 1 / 1;
}
.user-details {
    min-width: 0; /* permite que ellipsis funcione en flex children */
    flex: 1 1 auto;
}

.user-credits {
    color: #ccff00;
    font-weight: 600;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(204, 255, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Plan Specific Glows */
/* Plan Specific Glows - NEUTRALIZADO (Minimalista) */
.user-avatar.plan-free,
.user-avatar.plan-pro,
.user-avatar.plan-premium {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

/* Opcional: Pequeño indicador de color al hacer hover */
.user-avatar.plan-free:hover {
    border-color: #10b981;
}

.user-avatar.plan-pro:hover {
    border-color: #3b82f6;
}

.user-avatar.plan-premium:hover {
    border-color: #8b5cf6;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Social Icons */
.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 28px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.social-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;

    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
    border: 1px solid #3a3a3a;
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;

    /* Glow effect circular abajo */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 20;
    transition: all 0.3s ease;
}

/* Google button - white bg for multicolor logo */
.social-circle.btn-google {
    background: linear-gradient(135deg, #fff, #f1f1f1) !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
}

.social-circle.btn-google:hover {
    background: linear-gradient(135deg, #f8f8f8, #e8e8e8) !important;
    border-color: #ccc !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25) !important;
}

.social-circle.btn-google:active {
    transform: translateY(3px) scale(0.92);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.05s;
}

.social-circle.btn-google::after {
    background: #ddd;
}

/* GitHub button - blue indigo */
.social-circle.btn-github {
    background: linear-gradient(135deg, #3f51b5, #5c6bc0) !important;
    border: 1px solid #7986cb !important;
    box-shadow: 0 5px 20px rgba(92, 107, 192, 0.35) !important;
}

.social-circle.btn-github:hover {
    background: linear-gradient(135deg, #5c6bc0, #7986cb) !important;
    border-color: #9fa8da !important;
    box-shadow: 0 5px 25px rgba(92, 107, 192, 0.5) !important;
}

.social-circle.btn-github:active {
    transform: translateY(3px) scale(0.92);
    box-shadow: 0 1px 5px rgba(92, 107, 192, 0.2) !important;
    transition: all 0.05s;
}

.social-circle.btn-github::after {
    background: #5c6bc0;
}

/* Divider */
.divider-line {
    display: flex;
    align-items: center;
    margin: 18px 0 10px;
    gap: 12px;
}

.divider-line::before,
.divider-line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #3a3a3a, transparent);
}

.divider-line span {
    color: #888;
    font-size: 0.78rem;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Beta Tester Register Button */
.btn-beta-register {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -31px;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 14px 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid #7c3aed;
    color: #c4b5fd;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='24' viewBox='0 0 22 24'><path d='M8 10 L8 3.5 C8 2.3 9 1.5 10 1.5 C11 1.5 12 2.3 12 3.5 L12 11 L12 8 C12 7 13 6.3 14 6.3 C15 6.3 16 7 16 8 L16 12 L16 9.5 C16 8.5 17 7.8 18 7.8 C19 7.8 20 8.5 20 9.5 L20 16 C20 20 17 22.5 13.5 22.5 L11 22.5 C8.5 22.5 6.5 20.8 5.5 18.5 L3 12.5 C2.5 11.3 3.3 10.3 4.3 10.3 C5 10.3 5.5 10.6 5.8 11.1 L8 14 Z' fill='%23a445ff' stroke='white' stroke-width='1.2' stroke-linejoin='round'/></svg>") 6 1, pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.15), inset 0 1px 0 rgba(255,255,255,0.05);
}

.btn-beta-register:hover {
    background: linear-gradient(135deg, #1e1e3a, #1a2744);
    border-color: #8b5cf6;
    color: #ddd6fe;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
    transform: translateY(-1px);
}

.btn-beta-register:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.1);
    transition: all 0.05s;
}

.btn-beta-register i {
    font-size: 1rem;
}

.beta-badge {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* El glow gris debajo del icono */
.social-circle::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 10%;
    width: 80%;
    height: 10px;
    background: #4a4a4a;
    filter: blur(10px);
    opacity: 0.4;
    z-index: -1;
    transition: opacity 0.3s;
}

.social-circle:hover::after {
    opacity: 0.8;
}

.social-circle:hover {
    transform: translateY(-2px);
    border-color: #5a5a5a;
}

/* --- MARKETING SIDE --- */
.marketing-side {
    flex: 1;
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
    background: rgb(0 0 0 / 35%);
    border-radius: 20px;
    height: 562px;
}

/* Marca "Finder" en azul neon */
.brand-logo span.text-purple {
    color: #bc09cc;
    /* Blue-500 similar a la referencia */
}

/* Divisor Social */
.social-divider {
    text-align: center;
    margin: 20px 0 10px;
    /* Separación ajustada */
    position: relative;
    z-index: 1;
}

.social-divider span {
    background: var(--bg-page);
    /* Fallback */
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
    /* Mismo que card bg para ocultar linea si la hubiera */
    padding: 0 10px;
    color: #64748b;
    font-size: 0.85rem;
}

/* Ajuste responsive para la tarjeta si es necesario */

.hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 25px;
    color: #fff;
    margin-top: 64px;
}

.text-gradient {
    background: linear-gradient(90deg, #a445ff 0%, #d4a0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    /* Estándar */
    -webkit-text-fill-color: transparent;
    display: block;
    /* En nueva linea para impacto */
}

.hero-subtitle {
    font-size: 1.15rem;
    color: #e5e5e5;
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 50px;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(100, 100, 100, 0.1);
    border: 1px solid rgba(100, 100, 100, 0.2);
    color: #4a5568;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-text h3 {
    margin: 0 0 5px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.feature-text p {
    margin: 0;
    font-size: 0.95rem;
    color: #cbd5e1;
}

/* Responsive */
@media (max-width: 1000px) {
    .marketing-side {
        display: none;
    }
}

@media (max-width: 600px) {
    body.auth-body {
        align-items: flex-start;
        padding: 12px;
        min-height: auto;
        height: auto;
        overflow-y: auto;
    }
    .main-container {
        min-height: auto;
        height: auto;
    }
    .auth-card {
        width: 100%;
        max-width: 100%;
        padding: 20px 18px;
        border-radius: 14px;
        box-shadow: none;
    }
    .auth-header h2 { font-size: 1.3rem; }
    .auth-header p { font-size: 0.8rem; margin-bottom: 12px; }
    .input-label { font-size: 0.78rem; margin-top: 8px; margin-bottom: 4px; }
    .input-group input { padding: 10px 12px 10px 38px; font-size: 0.88rem; }
    .input-icon { left: 12px; font-size: 0.8rem; }
    .btn-stars-wrapper { padding: 14px 0 8px; }
    .btn-glow { font-size: 0.9rem; padding: 12px; }
    .form-options { font-size: 0.75rem; margin: 10px 0 16px; }
    .auth-footer { margin-top: 12px; font-size: 0.8rem; }
    .brand-logo { display: none; }
}