/* =====================================================
   REGISTRO - CHAMOY SPORT
   Estilos aislados para registro.php
===================================================== */

.auth-register-page{
    display:grid;
    place-items:center;
    min-height:calc(100vh - 78px);
    width:min(1580px,calc(100% - 40px));
    margin:0 auto;
    padding:42px 0 56px;
}

.register-shell{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);
    width:min(1120px,100%);
    overflow:hidden;
    border:1px solid var(--theme-border);
    border-radius:22px;
    background:var(--theme-card);
    box-shadow:0 26px 70px rgba(0,0,0,.16);
}

/* =====================================================
   PANEL IZQUIERDO
===================================================== */

.register-showcase{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:680px;
    padding:38px;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 80% 18%,rgba(167,139,250,.34),transparent 18rem),
        radial-gradient(circle at 4% 94%,rgba(34,211,238,.14),transparent 18rem),
        linear-gradient(145deg,#24104f 0%,#321273 50%,#1c123f 100%);
}

.register-showcase::after{
    content:"";
    position:absolute;
    right:-95px;
    bottom:-105px;
    width:300px;
    height:300px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    box-shadow:
        0 0 0 34px rgba(255,255,255,.025),
        0 0 0 70px rgba(255,255,255,.018);
}

.register-showcase-brand,
.register-showcase-copy,
.register-benefits,
.register-showcase-note{
    position:relative;
    z-index:1;
}

.register-showcase-brand{
    display:flex;
    align-items:center;
    gap:11px;
}

.register-showcase-brand>span{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;
    background:rgba(255,255,255,.10);
    font-weight:900;
    backdrop-filter:blur(10px);
}

.register-showcase-brand div{
    display:grid;
    gap:2px;
}

.register-showcase-brand strong{
    font-size:.95rem;
}

.register-showcase-brand small{
    color:rgba(255,255,255,.62);
    font-size:.7rem;
}

.register-showcase-copy{
    margin-top:62px;
}

.register-showcase-copy .eyebrow{
    color:#67e8f9;
}

.register-showcase-copy h2{
    max-width:470px;
    margin:5px 0 14px;
    color:#fff;
    font-size:clamp(2rem,3vw,2.8rem);
    line-height:1.04;
}

.register-showcase-copy>p:last-child{
    max-width:450px;
    margin:0;
    color:rgba(255,255,255,.70);
    line-height:1.65;
}

.register-benefits{
    display:grid;
    gap:10px;
    margin-top:28px;
}

.register-benefits>div{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    align-items:center;
    padding:10px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(10px);
}

.register-benefits>div>span{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:10px;
    color:#ddd6fe;
    background:rgba(255,255,255,.08);
}

.register-benefits svg{
    width:19px;
    height:19px;
}

.register-benefits strong,
.register-benefits small{
    display:block;
}

.register-benefits strong{
    color:#fff;
    font-size:.82rem;
}

.register-benefits small{
    margin-top:2px;
    color:rgba(255,255,255,.58);
    font-size:.7rem;
}

.register-showcase-note{
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:auto;
    color:rgba(255,255,255,.62);
    font-size:.72rem;
}

.register-showcase-note svg{
    width:16px;
    height:16px;
    color:#86efac;
}

/* =====================================================
   PANEL DERECHO
===================================================== */

.register-panel{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:38px 42px;
    background:var(--theme-card);
}

.register-panel-heading{
    margin-bottom:22px;
}

.register-panel-heading h1{
    margin:4px 0 8px;
    color:var(--theme-text);
    font-size:clamp(2rem,4vw,2.65rem);
    line-height:1.05;
}

.register-panel-heading>p:not(.eyebrow){
    margin:0;
    color:var(--theme-text-soft);
    font-size:.86rem;
    line-height:1.55;
}

/* ERRORES */
.register-errors{
    display:grid;
    gap:5px;
    margin-bottom:18px;
    padding:13px;
    border:1px solid rgba(239,68,68,.28);
    border-radius:11px;
    background:rgba(239,68,68,.07);
}

.register-errors>div{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fca5a5;
}

.register-errors svg{
    width:17px;
    height:17px;
}

.register-errors p{
    margin:0;
    color:var(--theme-text-soft);
    font-size:.78rem;
}

/* FORM */
.register-form{
    display:grid;
    gap:14px;
}

.register-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.register-field{
    display:grid;
    gap:7px;
}

.register-field>span{
    color:var(--theme-text);
    font-size:.82rem;
    font-weight:800;
}

.register-field>span small{
    color:var(--theme-text-muted);
    font-size:.66rem;
    font-weight:600;
}

.register-input-wrap{
    position:relative;
}

.register-input-wrap>svg{
    position:absolute;
    top:50%;
    left:13px;
    z-index:1;
    width:17px;
    height:17px;
    transform:translateY(-50%);
    color:#a78bfa;
    pointer-events:none;
}

.register-input-wrap input{
    width:100%;
    min-height:48px;
    padding:10px 44px 10px 42px;
    outline:0;
    border:1px solid var(--theme-border);
    border-radius:11px;
    color:var(--theme-text);
    background:var(--theme-input);
    font:inherit;
    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.register-input-wrap input::placeholder{
    color:var(--theme-text-muted);
}

.register-input-wrap input:focus{
    border-color:rgba(139,92,246,.70);
    box-shadow:0 0 0 3px rgba(139,92,246,.12);
}

/* PASSWORD */
.register-eye{
    position:absolute;
    top:50%;
    right:8px;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    padding:0;
    transform:translateY(-50%);
    border:0;
    border-radius:8px;
    color:var(--theme-text-soft);
    background:transparent;
    cursor:pointer;
}

.register-eye:hover{
    color:#a78bfa;
    background:var(--theme-hover);
}

.register-eye svg{
    width:17px;
    height:17px;
}

/* REQUISITOS */
.register-requirements{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 13px;
    padding:11px 12px;
    border:1px solid var(--theme-border);
    border-radius:10px;
    background:var(--theme-card-soft);
}

.register-requirements span{
    display:inline-flex;
    align-items:center;
    gap:5px;
    color:var(--theme-text-soft);
    font-size:.69rem;
    font-weight:700;
}

.register-requirements svg{
    width:13px;
    height:13px;
    color:#a78bfa;
}

.register-submit{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:48px;
    margin-top:1px;
}

.register-submit svg{
    width:17px;
    height:17px;
}

/* LOGIN */
.register-divider{
    position:relative;
    display:flex;
    justify-content:center;
    margin:22px 0 16px;
}

.register-divider::before{
    content:"";
    position:absolute;
    top:50%;
    right:0;
    left:0;
    height:1px;
    background:var(--theme-border);
}

.register-divider span{
    position:relative;
    z-index:1;
    padding:0 10px;
    color:var(--theme-text-muted);
    background:var(--theme-card);
    font-size:.7rem;
    font-weight:800;
}

.register-login-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:44px;
}

.register-login-link svg{
    width:16px;
    height:16px;
}

/* =====================================================
   LIGHT
===================================================== */

html[data-theme="light"] .register-shell{
    box-shadow:0 24px 65px rgba(15,23,42,.12);
}

html[data-theme="light"] .register-panel{
    background:#fff;
}

html[data-theme="light"] .register-divider span{
    background:#fff;
}

html[data-theme="light"] .register-errors>div{
    color:#b91c1c;
}

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

@media(max-width:980px){
    .auth-register-page{
        width:min(100% - 24px,1580px);
        padding-top:28px;
    }

    .register-shell{
        grid-template-columns:1fr;
        width:min(680px,100%);
    }

    .register-showcase{
        min-height:auto;
        padding:28px;
    }

    .register-showcase-copy{
        margin-top:32px;
    }

    .register-benefits{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .register-benefits>div{
        grid-template-columns:1fr;
        align-items:start;
    }

    .register-showcase-note{
        margin-top:22px;
    }
}

@media(max-width:680px){
    .register-showcase{
        display:none;
    }

    .register-panel{
        padding:28px;
    }
}

@media(max-width:560px){
    .register-form-grid{
        grid-template-columns:1fr;
    }

    .register-requirements{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media(max-width:420px){
    .auth-register-page{
        width:min(100% - 20px,1580px);
        padding:20px 0 34px;
    }

    .register-panel{
        padding:22px;
    }

    .register-panel-heading h1{
        font-size:2rem;
    }
}