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

body{

    font-family:'Inter',sans-serif;

    height:100vh;

    overflow:hidden;

    background:
        linear-gradient(
            rgba(0,0,0,.30),
            rgba(0,0,0,.30)
        ),
        url('img/fondo.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;

    color:#fff;

    position:relative;
}

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

body::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at 15% 20%, rgba(31,206,165,.12), transparent 30%),
        radial-gradient(circle at 85% 30%, rgba(255,255,255,.05), transparent 25%),
        radial-gradient(circle at 70% 85%, rgba(31,206,165,.10), transparent 30%);

    pointer-events:none;
}

/* =====================================
   GLOW
===================================== */

.glow{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.22;

    pointer-events:none;
}

.glow1{

    width:320px;
    height:320px;

    background:#1fcea5;

    top:-120px;
    left:-120px;
}

.glow2{

    width:260px;
    height:260px;

    background:#1fcea5;

    bottom:-90px;
    right:-90px;
}

/* =====================================
   LEFT
===================================== */

.left-side{

    width:58%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:70px;
}

/* =====================================
   BRAND BOX
===================================== */

.brand-box{

    width:100%;

    max-width:650px;

    background:rgba(255,255,255,.06);

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

    backdrop-filter:blur(14px);

    border-radius:42px;

    padding:65px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

    position:relative;
}

/* INNER BORDER */

.brand-box::before{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:30px;

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

    pointer-events:none;
}

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

.brand-logo{

    width:520px;

    margin-bottom:35px;

    opacity:.98;
}

/* =====================================
   TEXT
===================================== */

.brand-text{

    font-size:21px;

    line-height:1.9;

    color:rgba(255,255,255,.88);

    font-weight:300;

    max-width:500px;
}

/* =====================================
   RIGHT
===================================== */

.right-side{

    width:42%;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;
}

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

.login-card{

    width:450px;

    background:rgba(255,255,255,.97);

    border-radius:36px;

    padding:42px;

    position:relative;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);

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

    backdrop-filter:blur(18px);
}

/* =====================================
   INNER BORDER
===================================== */

.login-card::before{

    content:"";

    position:absolute;

    inset:10px;

    border-radius:26px;

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

    pointer-events:none;
}

/* =====================================
   TOP
===================================== */

.top-bar{

    display:flex;

    justify-content:center;

    margin-bottom:28px;
}

.top-logo{

    width:255px;
}

/* =====================================
   TITLE
===================================== */

.title{

    font-size:16px;

    color:#5b6472;

    margin-bottom:28px;

    line-height:1.5;

    font-weight:400;

    letter-spacing:.2px;
}

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

.input-group{

    margin-bottom:22px;
}

/* =====================================
   LABEL
===================================== */

.input-group label{

    display:block;

    margin-bottom:10px;

    color:#1fcea5;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;
}

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

.input-wrapper{

    position:relative;
}

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

.form-control{

    width:100%;

    height:64px;

    border:1px solid #dde3ea;

    border-radius:22px;

    padding:0 22px;

    font-size:14px;

    font-weight:400;

    background:#fff;

    color:#374151;

    transition:.3s;
}

.form-control::placeholder{

    color:#9aa3af;
}

.form-control:focus{

    outline:none;

    border-color:#1fcea5;

    box-shadow:
        0 0 0 5px rgba(31,206,165,.12);
}

/* =====================================
   SELECT
===================================== */

select.form-control{

    appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%231fcea5' viewBox='0 0 16 16'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 .086 1.056l-7 8a.75.75 0 0 1-1.08.02l-3-3a.75.75 0 1 1 1.06-1.06l2.434 2.433 6.47-7.394a.75.75 0 0 1 1.03-.055z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 22px center;

    background-size:18px;
}

/* =====================================
   BUTTON
===================================== */

.login-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:22px;

    background:#1fcea5;

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    margin-top:8px;

    box-shadow:
        0 12px 25px rgba(31,206,165,.25);
}

.login-btn:hover{

    background:#18b592;

    transform:translateY(-2px);
}

/* =====================================
   LINKS
===================================== */

.bottom-links{

    margin-top:26px;

    text-align:center;
}

.bottom-links a{

    text-decoration:none;

    color:#1fcea5;

    font-size:14px;

    font-weight:500;

    display:inline-flex;

    align-items:center;

    gap:8px;
}

/* =====================================
   LOCATION DOT
===================================== */

.location-dot{

    width:8px;
    height:8px;

    background:#1fcea5;

    border-radius:50%;

    box-shadow:
        0 0 10px rgba(31,206,165,.50);
}

/* =====================================
   SECURITY
===================================== */

.security{

    margin-top:32px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;
}

.security img{

    width:130px;
}

.security span{

    font-size:13px;

    color:#6b7280;
}

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

@media(max-width:1200px){

    .left-side{

        width:52%;
    }

    .right-side{

        width:48%;
    }

    .brand-logo{

        width:380px;
    }
}

@media(max-width:950px){

    .left-side{
        display:none;
    }

    .right-side{

        width:100%;
    }

    .login-card{

        width:100%;

        max-width:430px;
    }
}

@media(max-width:600px){

    body{
        overflow:auto;
    }

    .right-side{

        padding:20px;
    }

    .login-card{

        padding:30px;
    }

    .top-logo{

        width:210px;
    }

    .title{

        font-size:15px;
    }
}

/* =====================================
   CARRUSEL PARA VERIFICAR.PHP
   (AGREGADO - MANTIENE TU ESTILO)
===================================== */

.carousel-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 20px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.carousel-slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    z-index: 10;
}

.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.carousel-btn.prev {
    left: 8px;
}

.carousel-btn.next {
    right: 8px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active {
    background: #1fcea5;
    width: 20px;
    border-radius: 4px;
}

.image-caption {
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 20px;
}

.document-ref {
    text-align: center;
    font-size: 12px;
    color: #5b6472;
    margin-bottom: 20px;
    padding: 8px;
    background: #f8fafc;
    border-radius: 12px;
}

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

@media (max-width: 600px) {
    .carousel-container {
        width: 140px;
        height: 140px;
    }
    
    .carousel-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
    
    .dot {
        width: 6px;
        height: 6px;
    }
    
    .dot.active {
        width: 16px;
    }
    
    .document-ref {
        font-size: 11px;
        padding: 6px;
    }
}

/* =====================================
   FORMULARIO ACTUALIZAR (mantiene tu estilo)
===================================== */

.fake-captcha {
    border: 1px solid #dde3ea;
    border-radius: 22px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    background: #fff;
}

.check-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.check-area input {
    width: 20px;
    height: 20px;
    accent-color: #1fcea5;
    cursor: pointer;
}

.check-area span {
    color: #374151;
    font-size: 14px;
}

.captcha-box {
    text-align: center;
}

.captcha-box img {
    width: 36px;
    margin-bottom: 4px;
}

.captcha-box div {
    font-size: 10px;
    color: #6b7280;
}

/* =====================================
   RESPONSIVE PARA ACTUALIZAR
===================================== */

@media (max-width: 600px) {
    .fake-captcha {
        padding: 12px 16px;
    }
    
    .check-area span {
        font-size: 13px;
    }
    
    .check-area input {
        width: 18px;
        height: 18px;
    }
    
    .captcha-box img {
        width: 30px;
    }
}