/*==================================================
REGISTRO - ContactosW
Tema: negro + rojo (BestFans style)
==================================================*/

html,
body{
    margin:0;
    padding:0;

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

    min-height:100vh;

    /* FONDO DE IMAGEN */
    background-image: url('../img/fondo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    background-color: #000000;

    box-sizing:border-box;
}

/* Capa oscura para que resalte la tarjeta y el texto sea legible */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 70% de oscuridad */
    z-index: -1;
}

/*==================================================
WRAPPER
==================================================*/

.registro-wrapper{
    min-height:100vh;

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

    padding:40px 16px;

    box-sizing:border-box;

    background: transparent;
}

/*==================================================
CARD
==================================================*/

.registro-card{
    width:100%;
    max-width:520px;

    /* Tarjeta semitransparente con desenfoque */
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border:2px solid #dc2626;

    border-radius:20px;

    padding:40px 32px;

    box-shadow:
        0 0 0 1px rgba(220,38,38,.2),
        0 0 40px rgba(220,38,38,.25),
        0 20px 60px rgba(0,0,0,.8);

    animation:fadeInRegistro .5s ease;

    box-sizing:border-box;

    position:relative;
}

@keyframes fadeInRegistro{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

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

.registro-logo{
    text-align:center;

    margin-bottom:22px;
}

.registro-logo img{
    height:64px;
    width:auto;
    object-fit:contain;

    display:inline-block;
}

/*==================================================
TÍTULOS
==================================================*/

.registro-titulo{
    text-align:center;

    font-size:26px;
    font-weight:800;

    color:#ffffff;

    margin:0 0 6px;

    letter-spacing:-.4px;
}

.registro-subtitulo{
    text-align:center;

    font-size:14px;

    color:#a1a1aa;

    font-weight:500;

    margin:0 0 30px;
}

/*==================================================
CAMPOS
==================================================*/

.registro-field{
    margin-bottom:18px;
}

.registro-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.registro-row .registro-field{
    margin-bottom:0;
}

.registro-label{
    display:block;

    font-size:13.5px;
    font-weight:600;

    color:#e4e4e7;

    margin-bottom:8px;

    letter-spacing:.1px;
}

.registro-hint{
    font-size:12px;

    color:#71717a;

    margin-bottom:6px;

    line-height:1.4;
}

.registro-input{
    width:100%;

    padding:13px 16px;

    background:#1a1a1a;

    border:1px solid #2a2a2a;
    border-radius:12px;

    font-size:15px;
    color:#ffffff;

    font-family:inherit;

    outline:none;

    transition:.2s;

    box-sizing:border-box;
}

.registro-input::placeholder{
    color:#71717a;
}

.registro-input:hover{
    background:#1f1f1f;
    border-color:#3a3a3a;
}

.registro-input:focus{
    background:#1a1a1a;
    border-color:#dc2626;
    box-shadow:0 0 0 4px rgba(220,38,38,.15);
}

.registro-input.input-error{
    border-color:#dc2626;
    box-shadow:0 0 0 4px rgba(220,38,38,.18);
    background:#1f1414;
}

.registro-input.input-ok{
    border-color:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12);
}

.registro-select{
    appearance:none;
    -webkit-appearance:none;

    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 16px center;

    padding-right:40px;

    cursor:pointer;
}

.registro-select option{
    background:#1a1a1a;
    color:#ffffff;
}

.registro-textarea{
    resize:vertical;
    min-height:80px;
    line-height:1.5;
}

.registro-file{
    padding:10px 14px;
    cursor:pointer;
    font-size:14px;
}

.registro-file::file-selector-button{
    background:#dc2626;
    color:#ffffff;
    border:none;
    padding:6px 14px;
    border-radius:8px;
    font-weight:600;
    font-size:13px;
    cursor:pointer;
    margin-right:10px;
    transition:.2s;
}

.registro-file::file-selector-button:hover{
    background:#ef4444;
}

/*==================================================
CAMPO PASSWORD CON OJO
==================================================*/

.campo-password{
    position:relative;
}

.campo-password .registro-input{
    padding-right:48px;
}

.btn-ojito{
    position:absolute;

    top:50%;
    right:8px;

    transform:translateY(-50%);

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    background:transparent;
    color:#71717a;

    font-size:16px;

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

    cursor:pointer;

    transition:.2s;

    padding:0;
}

.btn-ojito:hover{
    background:rgba(255,255,255,.08);
    color:#ffffff;
}

.btn-ojito.activo{
    color:#dc2626;
    background:rgba(220,38,38,.1);
}

/*==================================================
BARRA DE FUERZA
==================================================*/

.barra-fuerza{
    display:flex;
    gap:4px;
    margin-top:8px;
}

.barra-fuerza .segmento{
    flex:1;
    height:4px;
    background:#27272a;
    border-radius:4px;
    transition:.3s;
}

.barra-fuerza.debil .segmento:nth-child(1){
    background:#ef4444;
}

.barra-fuerza.media .segmento:nth-child(1),
.barra-fuerza.media .segmento:nth-child(2){
    background:#f59e0b;
}

.barra-fuerza.fuerte .segmento:nth-child(1),
.barra-fuerza.fuerte .segmento:nth-child(2),
.barra-fuerza.fuerte .segmento:nth-child(3){
    background:#22c55e;
}

.barra-fuerza.muy-fuerte .segmento{
    background:#16a34a;
}

/*==================================================
MENSAJES DE VALIDACIÓN
==================================================*/

.mensaje-password,
.mensaje-campo{
    font-size:12px;
    margin-top:6px;
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:500;
    min-height:16px;
}

.mensaje-password.ok,
.mensaje-campo.ok{ color:#4ade80; }

.mensaje-password.error,
.mensaje-campo.error{ color:#ef4444; }

.mensaje-password.info,
.mensaje-campo.info{ color:#71717a; }

/*==================================================
CONTADOR DE NOMBRE
==================================================*/

.contador-nombre{
    font-size:11.5px;
    color:#71717a;
    text-align:right;
    margin-top:4px;
    font-weight:500;
    transition:.2s;
}

.contador-nombre.limite{
    color:#ef4444;
    font-weight:700;
}

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

.registro-btn{
    width:100%;

    padding:14px 20px;

    background:#dc2626;
    color:#ffffff;

    border:none;
    border-radius:12px;

    font-size:15.5px;
    font-weight:700;

    letter-spacing:.2px;

    cursor:pointer;

    box-shadow:0 8px 20px rgba(220,38,38,.35);

    transition:.25s;

    font-family:inherit;

    margin-top:6px;
}

.registro-btn:hover:not(:disabled){
    background:#ef4444;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(220,38,38,.5);
}

.registro-btn:active:not(:disabled){
    transform:translateY(0);
}

.registro-btn:disabled{
    opacity:1;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
    background:#27272a;
    color:#71717a;
}

/*==================================================
DIVISOR "o"
==================================================*/

.registro-divisor{
    display:flex;
    align-items:center;

    margin:26px 0 20px;

    gap:12px;
}

.registro-divisor::before,
.registro-divisor::after{
    content:'';
    flex:1;
    height:1px;
    background:#27272a;
}

.registro-divisor span{
    font-size:12.5px;
    color:#71717a;
    font-weight:500;
}

/*==================================================
LOGIN
==================================================*/

.registro-login{
    text-align:center;

    font-size:14px;
    color:#a1a1aa;

    margin:0;
}

.registro-login a{
    color:#dc2626;

    font-weight:700;

    text-decoration:none;

    transition:.15s;
}

.registro-login a:hover{
    color:#ef4444;
    text-decoration:underline;
}

/*==================================================
CASCADA PAÍS → DEPARTAMENTO → CIUDAD
==================================================*/

#grupoDepartamento,
#grupoCiudad{
    animation:cascadaAparecer .45s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes cascadaAparecer{
    0%{ opacity:0; transform:translateY(-14px) scale(.96); }
    60%{ opacity:1; transform:translateY(2px) scale(1.01); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
}

#grupoDepartamento.recien-abierto .registro-select,
#grupoCiudad.recien-abierto .registro-select{
    animation:pulsoBordeCascada 1.2s ease;
}

@keyframes pulsoBordeCascada{
    0%, 100%{ box-shadow:0 0 0 0 rgba(220,38,38,0); }
    40%{ box-shadow:0 0 0 6px rgba(220,38,38,.15); }
}

.registro-field-completo .registro-label::after{
    content:'✓';
    display:inline-block;
    margin-left:8px;
    color:#4ade80;
    font-weight:800;
    font-size:13px;
    animation:checkAparece .4s ease;
}

@keyframes checkAparece{
    0%{ opacity:0; transform:scale(.4) rotate(-20deg); }
    60%{ transform:scale(1.2) rotate(5deg); }
    100%{ opacity:1; transform:scale(1) rotate(0); }
}

.registro-select-wrap{
    position:relative;
}

.registro-select-spinner{
    position:absolute;
    right:44px;
    top:50%;
    transform:translateY(-50%);
    width:16px;
    height:16px;
    border:2px solid #27272a;
    border-top-color:#dc2626;
    border-radius:50%;
    animation:girarSpinnerCascada .8s linear infinite;
    pointer-events:none;
    display:none;
}

.registro-select-wrap.cargando .registro-select-spinner{
    display:block;
}

.registro-select-wrap.cargando .registro-select{
    padding-right:70px;
    background-image:none;
    color:#71717a;
}

@keyframes girarSpinnerCascada{
    to{ transform:translateY(-50%) rotate(360deg); }
}

.registro-select:focus{
    animation:focusSuaveCascada .3s ease;
}

@keyframes focusSuaveCascada{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.008); }
    100%{ transform:scale(1); }
}

/*==================================================
MÓVIL: FULL-SCREEN
==================================================*/

@media(max-width:600px){

    .registro-wrapper{
        padding:0;
        align-items:stretch;
    }

    .registro-card{
        max-width:100%;
        border-radius:0;
        border:none;
        min-height:100vh;
        padding:40px 24px;
        box-shadow:none;
        background: rgba(10, 10, 10, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        animation:none;
    }

    .registro-row{
        grid-template-columns:1fr;
        gap:0;
    }

    .registro-row .registro-field{
        margin-bottom:18px;
    }

    .registro-logo img{ height:56px; }
    .registro-titulo{ font-size:24px; }
    .registro-subtitulo{ font-size:13.5px; margin-bottom:24px; }
    .registro-input{ font-size:16px; padding:14px 16px; }
    .registro-btn{ font-size:16px; padding:15px 20px; }

}

/*==================================================
SWAL REGISTRO EXITOSO
==================================================*/

.swal-registro-popup{
    border-radius:20px !important;
    padding:36px 28px 28px !important;
    max-width:420px !important;
    background:#0a0a0a !important;
    border:2px solid #dc2626 !important;
    box-shadow:
        0 0 0 1px rgba(220,38,38,.2),
        0 0 40px rgba(220,38,38,.3),
        0 20px 60px rgba(0,0,0,.8) !important;
}

.swal-registro{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    font-family:'Segoe UI', Arial, sans-serif;
}

.swal-registro-icono{
    width:96px;
    height:96px;
    border-radius:50%;
    background:linear-gradient(135deg, #dc2626, #ef4444);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
    box-shadow:
        0 0 0 4px rgba(220,38,38,.15),
        0 12px 32px rgba(220,38,38,.4);
    animation:swalRegistroCheckIn .6s cubic-bezier(.34, 1.56, .64, 1);
    position:relative;
}

.swal-registro-icono::before{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:50%;
    border:2px solid rgba(220,38,38,.3);
    animation:swalRegistroHalo 2s ease-in-out infinite;
}

@keyframes swalRegistroCheckIn{
    0%{ transform:scale(0) rotate(-180deg); opacity:0; }
    60%{ transform:scale(1.15) rotate(10deg); }
    100%{ transform:scale(1) rotate(0); opacity:1; }
}

@keyframes swalRegistroHalo{
    0%, 100%{ transform:scale(1); opacity:.5; }
    50%{ transform:scale(1.15); opacity:.2; }
}

.swal-registro-check{
    font-size:52px;
    color:#ffffff;
    font-weight:800;
    line-height:1;
    animation:swalRegistroCheckPulse 1.5s ease-in-out infinite;
}

@keyframes swalRegistroCheckPulse{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.12); }
}

.swal-registro-titulo{
    font-size:22px;
    font-weight:800;
    color:#ffffff;
    margin:0 0 12px;
    letter-spacing:-.3px;
    line-height:1.3;
    animation:swalRegistroTextoIn .5s ease .2s both;
}

@keyframes swalRegistroTextoIn{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

.swal-registro-texto{
    font-size:14.5px;
    color:#a1a1aa;
    line-height:1.55;
    margin:0 0 24px;
    max-width:320px;
    animation:swalRegistroTextoIn .5s ease .3s both;
}

.swal-registro-loader{
    width:100%;
    max-width:240px;
    height:4px;
    background:#1a1a1a;
    border-radius:4px;
    overflow:hidden;
    margin-bottom:12px;
    animation:swalRegistroTextoIn .5s ease .4s both;
}

.swal-registro-barra{
    width:0%;
    height:100%;
    background:linear-gradient(90deg, #dc2626, #ef4444);
    border-radius:4px;
    transition:width 2.2s ease;
    position:relative;
    overflow:hidden;
}

.swal-registro-barra::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:60px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
    animation:swalRegistroBrillo 1.2s linear infinite;
}

@keyframes swalRegistroBrillo{
    from{ transform:translateX(-100%); }
    to{ transform:translateX(400px); }
}

.swal-registro-estado{
    font-size:12.5px;
    color:#71717a;
    font-weight:600;
    letter-spacing:.2px;
    animation:swalRegistroTextoIn .5s ease .5s both;
}

@media(max-width:480px){
    .swal-registro-popup{
        padding:28px 20px 22px !important;
        border-radius:16px !important;
        max-width:calc(100vw - 32px) !important;
    }
    .swal-registro-icono{
        width:84px;
        height:84px;
        margin-bottom:18px;
    }
    .swal-registro-check{ font-size:44px; }
    .swal-registro-titulo{ font-size:19px; }
    .swal-registro-texto{ font-size:13.5px; margin-bottom:18px; }
    .swal-registro-barra{ transition:width 2s ease; }
}

/*==================================================
MÓVIL: QUITAR IMAGEN DE FONDO
==================================================*/
@media (max-width: 600px) {
    html, body {
        background-image: none !important;
        background-color: #0a0a0a !important;
    }
    
    body::before {
        display: none;
    }
    
    .registro-card {
        background: #0a0a0a !important;
    }
}