/* =========================================================
   KRAFEX — PERFIL
   SISTEMA NEÓN COMPLETO
   Compatible con perfil.html
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {
    --k-black: #050507;
    --k-black-2: #09090d;
    --k-panel: #0d0d13;
    --k-panel-2: #111118;

    --k-white: #f5f1e8;
    --k-gray: #9b9ba5;
    --k-gray-2: #555562;

    /* NEÓN PRINCIPAL */
    --neon-red: #ff1744;
    --neon-blue: #2979ff;
    --neon-cyan: #00e5ff;
    --neon-green: #00ff66;
    --neon-purple: #d500f9;
    --neon-pink: #ff2bd6;
    --neon-yellow: #ffe600;

    --gold: #d6c3a3;

    --glow-red:
        0 0 5px rgba(255,23,68,.8),
        0 0 15px rgba(255,23,68,.55),
        0 0 35px rgba(255,23,68,.25);

    --glow-blue:
        0 0 5px rgba(41,121,255,.8),
        0 0 15px rgba(41,121,255,.55),
        0 0 35px rgba(41,121,255,.25);

    --glow-green:
        0 0 5px rgba(0,255,102,.8),
        0 0 15px rgba(0,255,102,.55),
        0 0 35px rgba(0,255,102,.25);

    --glow-purple:
        0 0 5px rgba(213,0,249,.8),
        0 0 15px rgba(213,0,249,.55),
        0 0 35px rgba(213,0,249,.25);

    --glow-cyan:
        0 0 5px rgba(0,229,255,.8),
        0 0 15px rgba(0,229,255,.55),
        0 0 35px rgba(0,229,255,.25);
}


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(41,121,255,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(213,0,249,.06),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(0,255,102,.04),
            transparent 35%
        ),
        var(--k-black);

    color: var(--k-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


/* =========================================================
   CONTENEDOR PRINCIPAL
   ========================================================= */

.content {
    min-height: 100vh;
    margin-left: 70px;
    padding-top: 70px;
}


/* =========================================================
   PERFIL
   ========================================================= */

.profile-page {
    width: 100%;
    max-width: 1450px;

    margin: 0 auto;

    padding:
        45px
        45px
        70px;
}


/* =========================================================
   HERO
   ========================================================= */

.profile-hero {
    position: relative;

    margin-bottom: 35px;

    padding: 38px 42px;

    overflow: hidden;

    border: 1px solid rgba(41,121,255,.45);

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,23,68,.06),
            rgba(41,121,255,.07),
            rgba(213,0,249,.06)
        ),
        rgba(10,10,15,.9);

    box-shadow:
        0 0 10px rgba(41,121,255,.18),
        0 0 35px rgba(213,0,249,.08);

    isolation: isolate;
}


/* línea superior */

.profile-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            var(--neon-red),
            var(--neon-blue),
            var(--neon-cyan),
            var(--neon-green),
            var(--neon-purple)
        );

    box-shadow:
        0 0 8px var(--neon-blue),
        0 0 20px var(--neon-purple);

    z-index: 2;
}


/* brillo */

.profile-hero::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background: var(--neon-purple);

    opacity: .08;

    filter: blur(35px);

    z-index: -1;
}


.profile-hero p {
    margin: 0 0 8px;

    color: var(--neon-cyan);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 5px;

    text-shadow:
        0 0 6px var(--neon-cyan),
        0 0 15px rgba(0,229,255,.6);
}


.profile-hero h1 {
    margin: 0;

    font-size: clamp(36px, 5vw, 62px);

    font-weight: 900;

    letter-spacing: -2px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #f5f1e8,
            #2979ff,
            #d500f9
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.profile-hero span {
    display: block;

    margin-top: 12px;

    color: #aaaab4;

    font-size: 15px;
}


/* =========================================================
   MENSAJES
   ========================================================= */

.profile-message {
    display: none;

    margin-bottom: 25px;

    padding: 15px 18px;

    border-radius: 12px;

    font-size: 14px;

    font-weight: 700;

    background: #0d0d13;
}

.profile-message:not(:empty) {
    display: block;
}

.profile-message.success {
    color: var(--neon-green);

    border: 1px solid var(--neon-green);

    box-shadow: var(--glow-green);

    background:
        rgba(0,255,102,.05);
}

.profile-message.error {
    color: var(--neon-red);

    border: 1px solid var(--neon-red);

    box-shadow: var(--glow-red);

    background:
        rgba(255,23,68,.05);
}


/* =========================================================
   GRID
   ========================================================= */

.profile-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;
}


/* =========================================================
   TARJETAS
   ========================================================= */

.profile-card {
    position: relative;

    padding: 30px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.012)
        ),
        var(--k-panel);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    isolation: isolate;
}


/* línea multicolor */

.profile-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--neon-red),
            var(--neon-blue),
            var(--neon-purple)
        );

    opacity: .8;
}


/* glow interno */

.profile-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -100px;
    bottom: -100px;

    border-radius: 50%;

    background: var(--neon-blue);

    opacity: .035;

    filter: blur(30px);

    z-index: -1;
}


.profile-card:hover {
    transform: translateY(-5px);

    border-color: rgba(41,121,255,.65);

    box-shadow:
        0 0 8px rgba(41,121,255,.35),
        0 0 25px rgba(41,121,255,.15),
        inset 0 0 25px rgba(41,121,255,.025);
}


/* =========================================================
   TÍTULO DE TARJETA
   ========================================================= */

.profile-card-title {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 27px;
}


.profile-card-title > i {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    flex-shrink: 0;

    border: 1px solid var(--neon-blue);

    border-radius: 15px;

    color: var(--neon-blue);

    font-size: 28px;

    box-shadow:
        0 0 7px rgba(41,121,255,.65),
        0 0 18px rgba(41,121,255,.25);

    text-shadow:
        0 0 8px var(--neon-blue);
}


.profile-card-title h2 {
    margin: 0 0 5px;

    font-size: 22px;

    color: #fff;
}


.profile-card-title p {
    margin: 0;

    color: var(--k-gray);

    font-size: 13px;
}


/* =========================================================
   FORMULARIOS
   ========================================================= */

#login-form,
#register-form {
    display: flex;

    flex-direction: column;

    gap: 19px;
}


#login-form label,
#register-form label {
    display: flex;

    flex-direction: column;

    gap: 8px;

    color: #dedee5;

    font-size: 13px;

    font-weight: 700;
}


/* =========================================================
   INPUTS
   ========================================================= */

#login-form input,
#register-form input {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid #30303a;

    border-radius: 11px;

    outline: none;

    background:
        linear-gradient(
            145deg,
            #0a0a0f,
            #101017
        );

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


#login-form input::placeholder,
#register-form input::placeholder {
    color: #555560;
}


#login-form input:hover,
#register-form input:hover {
    border-color: #555565;
}


#login-form input:focus {
    border-color: var(--neon-red);

    background: #0d0d13;

    box-shadow:
        0 0 5px rgba(255,23,68,.7),
        0 0 15px rgba(255,23,68,.3),
        inset 0 0 10px rgba(255,23,68,.04);
}


#register-form input:focus {
    border-color: var(--neon-green);

    background: #0d0d13;

    box-shadow:
        0 0 5px rgba(0,255,102,.7),
        0 0 15px rgba(0,255,102,.3),
        inset 0 0 10px rgba(0,255,102,.04);
}


/* =========================================================
   BOTÓN PRINCIPAL
   ========================================================= */

.primary-button {
    position: relative;

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 7px;

    padding: 13px 20px;

    border: 1px solid var(--neon-blue);

    border-radius: 11px;

    background: transparent;

    color: #fff;

    font-family: inherit;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .2s ease,
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.primary-button::before {
    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    transition: left .45s ease;
}


.primary-button:hover::before {
    left: 100%;
}


.primary-button:hover {
    transform: translateY(-2px);

    color: #fff;

    background: rgba(41,121,255,.12);

    box-shadow: var(--glow-blue);
}


.primary-button:active {
    transform: translateY(0) scale(.98);
}


/* LOGIN ROJO */

#login-form .primary-button {
    border-color: var(--neon-red);

    color: var(--neon-red);
}


#login-form .primary-button:hover {
    color: #fff;

    background: rgba(255,23,68,.16);

    box-shadow: var(--glow-red);
}


/* REGISTRO VERDE */

#register-form .primary-button {
    border-color: var(--neon-green);

    color: var(--neon-green);
}


#register-form .primary-button:hover {
    color: #fff;

    background: rgba(0,255,102,.14);

    box-shadow: var(--glow-green);
}


/* =========================================================
   CUENTA ACTIVA
   ========================================================= */

.profile-main-card {
    grid-column: 1 / -1;

    display: flex;

    align-items: center;

    gap: 22px;

    padding: 30px;
}


.profile-main-card::before {
    background:
        linear-gradient(
            90deg,
            var(--neon-red),
            var(--neon-blue),
            var(--neon-green),
            var(--neon-purple)
        );

    box-shadow:
        0 0 10px var(--neon-blue),
        0 0 20px var(--neon-purple);
}


.profile-avatar {
    position: relative;

    width: 90px;
    height: 90px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 2px solid var(--neon-purple);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(213,0,249,.12),
            transparent 70%
        );

    color: var(--neon-purple);

    box-shadow:
        0 0 8px rgba(213,0,249,.7),
        0 0 20px rgba(213,0,249,.35),
        inset 0 0 20px rgba(213,0,249,.08);

    animation:
        profilePulse 3s ease-in-out infinite;
}


.profile-avatar i {
    font-size: 43px;

    text-shadow:
        0 0 8px var(--neon-purple),
        0 0 20px var(--neon-purple);
}


@keyframes profilePulse {

    0%,
    100% {
        box-shadow:
            0 0 8px rgba(213,0,249,.7),
            0 0 20px rgba(213,0,249,.35);
    }

    50% {
        box-shadow:
            0 0 12px rgba(213,0,249,.9),
            0 0 30px rgba(213,0,249,.5);
    }
}


/* =========================================================
   TEXTO CUENTA
   ========================================================= */

.profile-main-card > div:nth-child(2) {
    flex: 1;
}


.profile-main-card > div:nth-child(2) p {
    margin: 0 0 7px;

    color: var(--neon-cyan);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 3px;

    text-shadow:
        0 0 7px var(--neon-cyan);
}


.profile-main-card h2 {
    margin: 0;

    font-size: 28px;

    color: #fff;
}


.profile-main-card > div:nth-child(2) span {
    display: block;

    margin-top: 6px;

    color: #9999a5;

    font-size: 14px;
}


/* =========================================================
   ACCIONES DE CUENTA
   ========================================================= */

.profile-actions {
    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 10px;
}


/* =========================================================
   BOTONES SECUNDARIOS
   ========================================================= */

.secondary-button,
.danger-button {
    min-height: 45px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 11px 15px;

    border-radius: 10px;

    text-decoration: none;

    font-family: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;
}


.secondary-button {
    border: 1px solid var(--neon-blue);

    background: transparent;

    color: var(--neon-blue);

    box-shadow:
        0 0 5px rgba(41,121,255,.2);
}


.secondary-button:hover {
    transform: translateY(-2px);

    color: #fff;

    background: rgba(41,121,255,.15);

    box-shadow: var(--glow-blue);
}


/* =========================================================
   BOTÓN CERRAR SESIÓN
   ========================================================= */

.danger-button {
    border: 1px solid var(--neon-red);

    background: transparent;

    color: var(--neon-red);

    box-shadow:
        0 0 5px rgba(255,23,68,.18);
}


.danger-button:hover {
    transform: translateY(-2px);

    color: #fff;

    background: rgba(255,23,68,.15);

    box-shadow: var(--glow-red);
}


.danger-button:active,
.secondary-button:active,
.primary-button:active {
    transform: scale(.97);
}


/* =========================================================
   INFORMACIÓN DE CUENTA
   ========================================================= */

.account-info {
    position: relative;

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 18px;

    margin-bottom: 14px;

    border: 1px solid rgba(41,121,255,.25);

    border-radius: 14px;

    background:
        rgba(41,121,255,.025);

    transition: .25s ease;
}


.account-info:hover {
    border-color: var(--neon-blue);

    box-shadow:
        0 0 12px rgba(41,121,255,.18);
}


.account-info span {
    color: #70707c;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


.account-info strong {
    color: #fff;

    font-size: 15px;

    word-break: break-word;
}


/* =========================================================
   ICONOS MATERIAL
   ========================================================= */

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}


/* =========================================================
   TOPBAR — EFECTO NEÓN
   ========================================================= */

.topbar {
    background: rgba(5,5,7,.96) !important;

    border-bottom:
        1px solid rgba(41,121,255,.45) !important;

    box-shadow:
        0 1px 8px rgba(41,121,255,.2),
        0 0 20px rgba(213,0,249,.06) !important;

    backdrop-filter: blur(12px);
}


.topbar-logo img {
    border-radius: 10px;

    transition: .25s ease;

    box-shadow:
        0 0 0 transparent;
}


.topbar-logo:hover img {
    box-shadow:
        0 0 8px var(--neon-blue),
        0 0 18px rgba(41,121,255,.45);
}


.topbar-item {
    transition: .25s ease !important;
}


.topbar-item:hover {
    color: #fff !important;

    text-shadow:
        0 0 6px var(--neon-cyan),
        0 0 15px var(--neon-cyan);
}


/* =========================================================
   CONTADOR BOLSA
   ========================================================= */

.cart-counter {
    background: var(--neon-red) !important;

    color: #fff !important;

    border: 1px solid var(--neon-red);

    box-shadow:
        0 0 5px var(--neon-red),
        0 0 12px rgba(255,23,68,.55);

    text-shadow:
        0 0 4px #fff;
}


/* =========================================================
   SIDEBAR — NEÓN
   ========================================================= */

.sidebar {
    background:
        linear-gradient(
            180deg,
            #050507,
            #08080c
        ) !important;

    border-right:
        1px solid rgba(41,121,255,.45) !important;

    box-shadow:
        1px 0 8px rgba(41,121,255,.2),
        0 0 20px rgba(213,0,249,.05) !important;
}


.sidebar a {
    transition:
        color .2s ease,
        text-shadow .2s ease,
        background .2s ease !important;
}


.sidebar a:hover {
    color: #fff !important;

    text-shadow:
        0 0 6px var(--neon-cyan),
        0 0 14px var(--neon-cyan);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
}


::-webkit-scrollbar-track {
    background: #050507;
}


::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            var(--neon-blue),
            var(--neon-purple)
        );

    border-radius: 20px;

    box-shadow:
        0 0 8px var(--neon-blue);
}


::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--neon-cyan),
            var(--neon-pink)
        );
}


/* =========================================================
   SELECCIÓN DE TEXTO
   ========================================================= */

::selection {
    background: var(--neon-purple);

    color: #fff;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .profile-main-card {
        flex-wrap: wrap;
    }

    .profile-actions {
        width: 100%;

        justify-content: flex-start;
    }
}


@media (max-width: 850px) {

    .content {
        margin-left: 60px;
    }

    .profile-page {
        padding: 30px 25px 60px;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-main-card {
        grid-column: auto;
    }
}


@media (max-width: 650px) {

    .content {
        margin-left: 0;
    }

    .profile-page {
        padding:
            25px
            15px
            50px;
    }

    .profile-hero {
        padding: 28px 24px;
    }

    .profile-hero h1 {
        font-size: 38px;
    }

    .profile-card {
        padding: 23px 19px;
    }

    .profile-main-card {
        flex-direction: column;

        align-items: flex-start;
    }

    .profile-actions {
        width: 100%;

        flex-direction: column;
    }

    .secondary-button,
    .danger-button {
        width: 100%;
    }
}


@media (max-width: 430px) {

    .profile-hero h1 {
        font-size: 32px;
    }

    .profile-card-title {
        align-items: flex-start;
    }

    .profile-card-title > i {
        width: 48px;
        height: 48px;

        font-size: 24px;
    }

    .profile-avatar {
        width: 75px;
        height: 75px;
    }
}