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

:root{

    --primary:#0066ff;

    --primary-dark:#0044b3;

    --secondary:#00f2fe;

    --accent-green:#6dff3c;

    --accent-magenta:#ff2e88;

    --bg-dark:#0a0f1d;

    --bg-card:#111827;

    --text-main:#ffffff;

    --text-muted:#9ca3af;

    --border-color:#1f2937;

    --success:#10b981;

    --danger:#ef4444;
}


/* =========================================================
   RESET
========================================================= */

*{

    box-sizing:border-box;

    margin:0;

    padding:0;

    font-family:
        'Segoe UI',
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* =========================================================
   BODY
========================================================= */

body{

    background-color:var(--bg-dark);

    color:var(--text-main);

    min-height:100vh;

    position:relative;
}


/* =========================================================
   TEXTURA DE FONDO
========================================================= */

body::before{

    content:'';

    position:fixed;

    inset:0;

    background-image:

        repeating-linear-gradient(
            0deg,
            rgba(109,255,60,0.025) 0px,
            rgba(109,255,60,0.025) 1px,
            transparent 1px,
            transparent 3px
        );

    pointer-events:none;

    z-index:0;
}


/* =========================================================
   CAPAS
========================================================= */

#gate,
.section{

    position:relative;

    z-index:1;
}


/* =========================================================
   LOGO
========================================================= */

.brand-logo{

    display:block;

    margin:0 auto;

    filter:
        drop-shadow(
            0 0 18px
            rgba(109,255,60,0.25)
        )
        drop-shadow(
            0 0 30px
            rgba(255,46,136,0.12)
        );
}


/* =========================================================
   LOGO DEL LOGIN
========================================================= */

.gate-logo{

    width:200px;

    margin-bottom:10px;
}


/* =========================================================
   PANTALLA DE CÓDIGO
========================================================= */

#gate{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;
}


/* =========================================================
   CAJA DE ACCESO
========================================================= */

.gate-box{

    width:100%;

    max-width:420px;

    background:var(--bg-card);

    border:1px solid var(--border-color);

    border-radius:20px;

    padding:40px 32px;

    text-align:center;

    box-shadow:
        0 20px 40px
        rgba(0,0,0,0.5);
}


/* =========================================================
   ICONO
========================================================= */

.gate-icon{

    font-size:2.8rem;

    color:var(--primary);

    margin-bottom:18px;

    filter:
        drop-shadow(
            0 0 15px
            rgba(0,102,255,0.35)
        );
}


/* =========================================================
   TITULO
========================================================= */

.gate-box h1{

    font-size:1.4rem;

    margin-bottom:8px;
}


/* =========================================================
   DESCRIPCIÓN
========================================================= */

.gate-box p{

    color:var(--text-muted);

    font-size:0.95rem;

    margin-bottom:24px;
}


/* =========================================================
   INPUT
========================================================= */

#codeInput{

    width:100%;

    padding:14px 16px;

    border-radius:10px;

    border:1px solid var(--border-color);

    background:var(--bg-dark);

    color:var(--text-main);

    font-size:1rem;

    text-align:center;

    letter-spacing:2px;

    outline:none;

    margin-bottom:14px;

    transition:
        border-color .2s,
        box-shadow .2s;
}


#codeInput:focus{

    border-color:var(--accent-green);

    box-shadow:
        0 0 0 3px
        rgba(109,255,60,0.12);
}


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

#gateBtn{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:#fff;

    font-weight:600;

    font-size:1rem;

    cursor:pointer;

    transition:
        transform .15s,
        box-shadow .2s;
}


#gateBtn:hover{

    transform:scale(1.02);

    box-shadow:
        0 0 20px
        rgba(109,255,60,0.15);
}


/* =========================================================
   ERROR
========================================================= */

#gateError{

    color:var(--danger);

    font-size:0.9rem;

    margin-top:14px;

    min-height:18px;
}


/* =========================================================
   SECCIONES
========================================================= */

.section{

    display:none;

    min-height:100vh;
}


.section.active{

    display:block;
}


/* =========================================================
   BOTÓN VOLVER
========================================================= */

.back-link{

    position:fixed;

    top:18px;

    left:18px;

    color:var(--text-muted);

    text-decoration:none;

    font-size:0.9rem;

    display:flex;

    align-items:center;

    gap:6px;

    z-index:10;

    transition:color .2s;
}


.back-link:hover{

    color:var(--text-main);
}


/* =========================================================
   PORTAFOLIO
========================================================= */

.pf-section{

    padding:60px 20px 40px;
}


.pf-wrap{

    max-width:1100px;

    margin:0 auto;
}


/* =========================================================
   CABECERA
========================================================= */

.pf-header{

    margin-bottom:30px;

    display:flex;

    align-items:center;

    gap:32px;

    text-align:left;
}


.pf-header-logo{

    width:160px;

    flex-shrink:0;

    margin:0;
}


.pf-header-text{

    flex:1;

    min-width:0;
}


/* =========================================================
   TEXTO SUPERIOR
========================================================= */

.pf-eyebrow{

    color:var(--text-muted);

    font-size:0.95rem;

    margin-bottom:6px;

    letter-spacing:1px;

    text-transform:uppercase;
}


/* =========================================================
   TITULO
========================================================= */

.pf-title{

    font-size:2.2rem;
}


.pf-title span{

    background:
        linear-gradient(
            45deg,
            var(--text-main) 40%,
            var(--secondary) 75%,
            var(--accent-green) 100%
        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}


/* =========================================================
   SUBTITULO
========================================================= */

.pf-subtitle{

    color:var(--text-muted);

    margin-top:10px;

    max-width:640px;

    line-height:1.5;
}


/* =========================================================
   DIVISOR
========================================================= */

.pf-divider{

    width:120px;

    height:3px;

    margin:18px 0 0;

    border-radius:4px;

    background:
        linear-gradient(
            90deg,
            var(--accent-magenta),
            var(--primary),
            var(--accent-green)
        );

    opacity:0.55;
}


/* =========================================================
   BUSCADOR
========================================================= */

.pf-search{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--bg-card);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:12px 16px;

    margin:24px auto 30px;

    max-width:420px;

    transition:
        border-color .2s,
        box-shadow .2s;
}


.pf-search:focus-within{

    border-color:var(--accent-green);

    box-shadow:
        0 0 0 3px
        rgba(109,255,60,0.1);
}


.pf-search i{

    color:var(--text-muted);
}


.pf-search input{

    flex:1;

    background:none;

    border:none;

    outline:none;

    color:var(--text-main);

    font-size:0.95rem;
}


.pf-search input::placeholder{

    color:var(--text-muted);
}


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

.pf-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px,1fr)
        );

    gap:20px;
}


/* =========================================================
   TARJETA
========================================================= */

.pf-card{

    background:var(--bg-card);

    border:1px solid var(--border-color);

    border-radius:16px;

    padding:26px 22px;

    text-align:center;

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


.pf-card:hover{

    border-color:var(--accent-green);

    transform:translateY(-3px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,0.35),
        0 0 16px
        rgba(109,255,60,0.08);
}


/* =========================================================
   AVATAR
========================================================= */

.pf-avatar{

    width:70px;

    height:70px;

    border-radius:50%;

    border:2px solid var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 16px;

    font-weight:700;

    font-size:1.2rem;

    color:var(--text-main);

    background:var(--bg-dark);
}


/* =========================================================
   NOMBRE
========================================================= */

.pf-name{

    font-weight:600;

    margin-bottom:4px;
}


/* =========================================================
   ROL
========================================================= */

.pf-role{

    color:var(--secondary);

    font-size:0.9rem;

    margin-bottom:14px;
}


/* =========================================================
   ETIQUETAS
========================================================= */

.pf-tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    justify-content:center;

    margin-bottom:18px;
}


.pf-tag{

    background:var(--bg-dark);

    border:1px solid var(--border-color);

    color:var(--text-muted);

    font-size:0.78rem;

    padding:5px 10px;

    border-radius:20px;
}


/* =========================================================
   LINK
========================================================= */

.pf-link{

    display:inline-flex;

    align-items:center;

    gap:6px;

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

    font-size:0.92rem;

    border-top:1px solid var(--border-color);

    padding-top:14px;

    width:100%;

    justify-content:center;

    transition:color .2s;
}


.pf-link:hover{

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


/* =========================================================
   MENSAJE VACÍO
========================================================= */

.pf-empty-msg{

    color:var(--text-muted);

    grid-column:1/-1;

    text-align:center;

    padding:40px 0;
}


/* =========================================================
   RESPONSIVE - HEADER
========================================================= */

@media (max-width:640px){

    .pf-header{

        flex-direction:column;

        text-align:center;

        gap:16px;
    }


    .pf-header-logo{

        width:120px;
    }


    .pf-subtitle{

        max-width:100%;
    }


    .pf-divider{

        margin:18px auto 0;
    }

}


/* =========================================================
   RESPONSIVE - LOGIN
========================================================= */

@media (max-width:600px){

    .gate-box{

        padding:30px 22px;
    }


    .gate-logo{

        width:170px;
    }


    .pf-title{

        font-size:1.8rem;
    }


    .pf-section{

        padding:60px 15px 30px;
    }

}


/* =========================================================
   RESPONSIVE - TARJETAS
========================================================= */

@media (max-width:400px){

    .pf-grid{

        grid-template-columns:1fr;
    }


    .back-link{

        top:12px;

        left:12px;
    }

}