:root {
    --vc-navy: #1B1F3B;
    --vc-orange: #FF6B35;
    --vc-orange-dark: #E8500C;
    --vc-red: #E8231E; /* NUEVO: para ofertas/urgencia estilo Temu */
    --vc-teal: #2EC4B6;
    --vc-bg: #FFF8F3; /* fondo cálido, no blanco puro */
    --vc-surface: #FFFFFF;
    --vc-line: #F0E4DC;
    --vc-text-muted: #8B8478;
}

body {
    background: var(--vc-bg);
    font-family: 'Inter',sans-serif;
    color: var(--vc-navy);
    padding-bottom: 70px;
}

@media (min-width:768px) {
    body {
        padding-bottom: 0;
    }
}

h1, h2, h3, h4, .vc-brand, .vc-price {
    font-family: 'Poppins',sans-serif;
}

.vc-price {
    font-variant-numeric: tabular-nums;
}

/* ===== Sistema compartido de botones/inputs (Login, Registro, Cuenta, modales, etc.) =====
   Va en el tema global (no en un .razor.css aislado) porque Blazor no comparte CSS
   aislado entre componentes - esto se carga una sola vez y aplica a toda la app. */
.btn-primary-vc {
    background: var(--vc-orange);
    border: none;
    font-weight: 700;
    border-radius: .5rem;
    transition: background .15s ease, transform .1s ease;
}

    .btn-primary-vc:hover:not(:disabled) {
        background: var(--vc-orange-dark);
    }

    .btn-primary-vc:active:not(:disabled) {
        transform: scale(.98);
    }

    .btn-primary-vc:disabled {
        opacity: .6;
    }

.vc-input {
    border: 1.5px solid var(--vc-line);
    border-radius: .5rem;
    padding: .6rem .85rem;
    font-size: .88rem;
}

    .vc-input:focus {
        border-color: var(--vc-orange);
        box-shadow: 0 0 0 3px rgba(255,107,0,.12);
        outline: none;
    }

.vc-match-indicator {
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .1rem;
}

    .vc-match-indicator.ok {
        color: #1B8A7F;
    }

    .vc-match-indicator.bad {
        color: #B3261E;
    }

.vc-pw-hint {
    background: var(--vc-bg);
    border: 1px solid var(--vc-line);
    border-radius: .5rem;
    padding: .5rem .7rem;
    font-size: .72rem;
    color: var(--vc-text-muted);
    display: flex;
    align-items: flex-start;
    gap: .4rem;
}

    .vc-pw-hint i {
        color: var(--vc-orange);
        margin-top: .1rem;
    }

/* ===== Loading overlay (LoadingOverlay.razor y el estatico de Login.razor) ===== */
.vc-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(27, 31, 59, .45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vc-loading-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.vc-loading-logo {
    font-weight: 800;
    font-size: .95rem;
    color: var(--vc-navy);
}

    .vc-loading-logo span {
        color: var(--vc-orange);
    }

.vc-loading-spinner {
    display: flex;
    gap: .4rem;
    height: 1.5rem;
    align-items: flex-end;
}

    .vc-loading-spinner div {
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        animation: vc-bounce 1s infinite ease-in-out both;
    }

        .vc-loading-spinner div:nth-child(1) {
            animation-delay: -.32s;
            background: var(--vc-orange);
        }

        .vc-loading-spinner div:nth-child(2) {
            animation-delay: -.16s;
            background: var(--vc-teal);
        }

        .vc-loading-spinner div:nth-child(3) {
            animation-delay: 0s;
            background: var(--vc-navy);
        }

        .vc-loading-spinner div:nth-child(4) {
            animation-delay: -.24s;
            background: var(--vc-orange-dark);
        }

@keyframes vc-bounce {
    0%, 80%, 100% {
        transform: scale(.4);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}