/* =========================================================
   REGISTRO.CSS - Registro Proyectos Mat Constructora
   ========================================================= */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --azul-oscuro: #0b2d3a;
    --azul: #0c5670;
    --azul-claro: #1e8593;
    --naranja: #f39c12;
    --blanco: #ffffff;
    --gris: #f4f7fa;
    --gris-texto: #6b7280;
    --texto: #263238;
}

body{
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
        linear-gradient(135deg, rgba(11,45,58,.94), rgba(12,86,112,.78)),
        url('../img/portadaformulario.jpg');
    background-size: cover;
    background-position: center;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.registro-page{
    width: min(1180px, 100%);
    min-height: 680px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0,0,0,.38);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
}

/* ================= LADO CONSTRUCTORA ================= */

.registro-info{
    position: relative;
    background:
        linear-gradient(135deg, rgba(11,45,58,.70), rgba(243,156,18,.24)),
        url('../img/portadaformulario.jpg');
    background-size: cover;
    background-position: center;
    color: var(--blanco);
    padding: 55px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.registro-info::before{
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(243,156,18,.28);
    left: -100px;
    top: -90px;
}

.registro-info::after{
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border: 4px solid rgba(255,255,255,.18);
    right: -45px;
    bottom: 55px;
    transform: rotate(18deg);
}

.overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11,45,58,.94), rgba(11,45,58,.18));
}

.info-content{
    position: relative;
    z-index: 2;
}

.tag{
    display: inline-block;
    background: var(--naranja);
    color: var(--blanco);
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.info-content h1{
    font-size: 58px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 18px;
    text-shadow: 0 5px 18px rgba(0,0,0,.35);
}

.info-content p{
    font-size: 17px;
    color: #e8f4f7;
    line-height: 1.7;
    margin-bottom: 28px;
}

.info-boxes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.info-boxes div{
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    padding: 16px;
    border-radius: 16px;
}

.info-boxes strong{
    display: block;
    color: var(--naranja);
    font-size: 23px;
    margin-bottom: 5px;
}

.info-boxes span{
    font-size: 12px;
    color: #edf7f9;
}

/* ================= FORMULARIO ================= */

.registro-card{
    background: var(--blanco);
    padding: 45px;
    display: flex;
    align-items: center;
}

.form{
    width: 100%;
}

.logo-box{
    text-align: center;
    margin-bottom: 10px;
}

.logo-box img{
    max-width: 220px;
    height: auto;
}

.form h2{
    color: var(--azul);
    font-size: 34px;
    text-align: center;
    margin-bottom: 6px;
}

.subtitle{
    text-align: center;
    color: var(--gris-texto);
    margin-bottom: 28px;
}

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

.form-group.full{
    grid-column: 1 / -1;
}

.form-group label{
    display: block;
    color: var(--texto);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 7px;
}

.form-input{
    width: 100%;
    border: 1px solid #d1d5db;
    outline: none;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f9fafb;
    color: var(--texto);
    font-size: 15px;
    transition: .25s ease;
}

.form-input:focus{
    border-color: var(--azul-claro);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(30,133,147,.13);
}

/* ================= OJO CONTRASEÑA ================= */

.password-container{
    position: relative;
    width: 100%;
}

.password-container .form-input{
    padding-right: 58px;
}

.toggle-password{
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s ease;
}

.toggle-password svg{
    width: 24px;
    height: 24px;
    fill: none;
}

.toggle-password svg path,
.toggle-password svg circle{
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.toggle-password:hover,
.toggle-password.active{
    color: var(--azul);
    background: rgba(30,133,147,.12);
}

/* ================= BOTON ================= */

.btn-submit{
    width: 100%;
    margin-top: 24px;
    border: none;
    outline: none;
    background: var(--azul);
    color: var(--blanco);
    padding: 15px;
    border-radius: 15px;
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    transition: .3s ease;
}

.btn-submit:hover{
    background: var(--naranja);
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(243,156,18,.35);
}

.login-link{
    text-align: center;
    color: var(--gris-texto);
    margin-top: 18px;
    font-size: 15px;
}

.login-link a{
    color: var(--azul);
    font-weight: 900;
    text-decoration: none;
}

.login-link a:hover{
    color: var(--naranja);
}

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

@media(max-width: 950px){
    .registro-page{
        grid-template-columns: 1fr;
    }

    .registro-info{
        min-height: 360px;
        padding: 40px;
    }
}

@media(max-width: 620px){
    body{
        padding: 15px;
    }

    .registro-card{
        padding: 30px 22px;
    }

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

    .info-content h1{
        font-size: 38px;
    }

    .info-boxes{
        grid-template-columns: 1fr;
    }

    .logo-box img{
        max-width: 180px;
    }
}


/* =========================================================
   IDENTIDAD GRUPO IDA - REGISTRO
   ========================================================= */

.registro-colibri{
    display:block;
    width:250px;
    height:270px;
    object-fit:contain;
    margin:0 auto 18px;
    filter:drop-shadow(0 16px 26px rgba(0,0,0,.28));
}

.info-content h1{
    letter-spacing:1px;
}

/* Se eliminó el logotipo anterior del panel blanco. */
.logo-box{
    display:none !important;
}

.info-content{
    text-align:center;
}

@media(max-width:950px){
    .registro-colibri{
        width:220px;
        height:240px;
        margin:0 auto 16px;
    }
}

@media(max-width:620px){
    .registro-colibri{
        width:180px;
        height:200px;
        margin:0 auto 14px;
    }

    .info-content{
        text-align:center;
    }
}


/* =========================================================
   REGISTRO COMPACTO EN COMPUTADORA — SIN SCROLL
   ========================================================= */

.btn-regresar{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin-top:12px;
    border:2px solid var(--azul);
    border-radius:15px;
    color:var(--azul);
    background:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:900;
    transition:.25s ease;
}

.btn-regresar:hover{
    color:#fff;
    background:var(--azul);
    transform:translateY(-2px);
}

@media (min-width:951px){
    html,
    body{
        width:100%;
        height:100%;
        min-height:100%;
        overflow:hidden;
    }

    body{
        padding:clamp(14px,2vh,24px) clamp(24px,3vw,46px);
    }

    .registro-page{
        width:min(1120px,92vw);
        height:min(760px,calc(100vh - 32px));
        min-height:0;
        grid-template-columns:.9fr 1.1fr;
        margin:auto;
        border-radius:24px;
    }

    .registro-info{
        padding:28px 34px;
        align-items:center;
    }

    .info-content{
        width:100%;
    }

    .registro-colibri{
        width:clamp(150px,16vh,205px);
        height:clamp(165px,18vh,225px);
        margin:0 auto 8px;
    }

    .tag{
        padding:7px 17px;
        margin-bottom:10px;
        font-size:11px;
    }

    .info-content h1{
        font-size:clamp(38px,5.2vh,52px);
        margin-bottom:10px;
    }

    .info-content p{
        max-width:520px;
        margin:0 auto 18px;
        font-size:clamp(13px,1.75vh,16px);
        line-height:1.5;
    }

    .info-boxes{
        gap:10px;
    }

    .info-boxes div{
        padding:12px;
        border-radius:14px;
    }

    .info-boxes strong{
        font-size:clamp(17px,2.2vh,21px);
        margin-bottom:3px;
    }

    .info-boxes span{
        font-size:clamp(10px,1.4vh,12px);
        line-height:1.35;
    }

    .registro-card{
        padding:clamp(24px,3.7vh,36px) 38px;
        overflow:hidden;
    }

    .form h2{
        font-size:clamp(28px,4vh,34px);
        margin-bottom:3px;
    }

    .subtitle{
        margin-bottom:18px;
        font-size:14px;
    }

    .form-grid{
        gap:12px 16px;
    }

    .form-group label{
        font-size:12px;
        margin-bottom:5px;
    }

    .form-input{
        padding:11px 14px;
        min-height:44px;
        border-radius:12px;
        font-size:14px;
    }

    .password-container .form-input{
        padding-right:52px;
    }

    .toggle-password{
        width:34px;
        height:34px;
        right:10px;
    }

    .toggle-password svg{
        width:21px;
        height:21px;
    }

    .btn-submit{
        min-height:45px;
        margin-top:16px;
        padding:11px;
        border-radius:13px;
        font-size:15px;
    }

    .login-link{
        margin-top:10px;
        font-size:13px;
    }

    .btn-regresar{
        min-height:42px;
        margin-top:9px;
        font-size:14px;
        border-radius:13px;
    }
}

/* Pantallas de computadora con poca altura. */
@media (min-width:951px) and (max-height:760px){
    .registro-page{
        height:calc(100vh - 22px);
    }

    body{
        padding:11px 28px;
    }

    .registro-info{
        padding:20px 28px;
    }

    .registro-colibri{
        width:145px;
        height:158px;
        margin-bottom:4px;
    }

    .info-content h1{
        font-size:38px;
        margin-bottom:7px;
    }

    .info-content p{
        font-size:13px;
        margin-bottom:12px;
    }

    .info-boxes div{
        padding:9px;
    }

    .registro-card{
        padding:18px 32px;
    }

    .form h2{
        font-size:27px;
    }

    .subtitle{
        margin-bottom:12px;
        font-size:13px;
    }

    .form-grid{
        gap:9px 14px;
    }

    .form-input{
        min-height:40px;
        padding:9px 12px;
    }

    .btn-submit{
        min-height:40px;
        margin-top:11px;
        padding:9px;
    }

    .login-link{
        margin-top:7px;
    }

    .btn-regresar{
        min-height:38px;
        margin-top:6px;
    }
}


/* BOTONES REGISTRAR Y REGRESAR EN DOS COLUMNAS */
.acciones-registro{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-top:16px;
}

.acciones-registro .btn-submit,
.acciones-registro .btn-regresar{
    width:100%;
    min-height:45px;
    margin-top:0;
}

@media(max-width:620px){
    .acciones-registro{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .acciones-registro .btn-submit,
    .acciones-registro .btn-regresar{
        font-size:14px;
        min-height:44px;
    }
}