/* =========================================
   C2D Login Widget v2.1.3 - Pixel Perfect
   ========================================= */

.c2d-wrap { 
    max-width: 450px; 
    margin: 20px auto; 
    padding: 0 10px; 
    font-family: inherit;
    font-size: var(--c2d-font-size, 16px);
}

.c2d-card { 
    border: 0 !important; 
    border-radius: 20px !important; 
    box-shadow: 0 10px 30px rgba(0,0,0,.08) !important; 
    background: #ffffff;
}
.c2d-body { padding: 40px 30px !important; }

/* LOGO CORREGIDO */
.c2d-logo-wrap { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 20px; 
    width: 100%;
}

.c2d-logo { 
    /* LÓGICA INVERTIDA: */
    /* 1. Tu ancho es EXCTAMENTE lo que diga la variable (ej. 100px) */
    width: var(--c2d-logo-w); 
    
    /* 2. Pero nunca seas más ancho que tu contenedor (Responsivo en móviles) */
    max-width: 100%; 
    
    height: auto; 
    display: block; /* Asegura que no tenga comportamientos extraños de inline */
}
/* INPUTS */
.c2d-wrap .input-group-lg {
    border-radius: 50px;
    overflow: hidden;
    margin-bottom: 20px !important;
    background-color: var(--c2d-input-bg) !important;
    max-width: var(--c2d-input-w);
    margin-left: auto; margin-right: auto; /* Centrado si el ancho es menor */
}

.c2d-wrap .form-control {
    background-color: transparent !important;
    border: 0 !important;
    height: 50px !important;
    font-size: inherit !important;
}

/* Iconos Específicos */
.c2d-email-group .input-group-text {
    background-color: var(--c2d-icon-email-bg) !important;
    border-color: var(--c2d-icon-email-br) !important;
    color: var(--c2d-icon-email-cl) !important;
    border: 1px solid;
    width: 50px; justify-content:center;
}
.c2d-pass-group .input-group-text, .c2d-otp-box .input-group-text {
    background-color: var(--c2d-icon-pass-bg) !important;
    border-color: var(--c2d-icon-pass-br) !important;
    color: var(--c2d-icon-pass-cl) !important;
    border: 1px solid;
    width: 50px; justify-content:center;
}

/* Toggle Pass Button */
#c2d-toggle-pass { border:0; background:transparent; color:#888; }

/* BOTÓN 1 (Login) */
.c2d-btn-1 {
    color: var(--c2d-b1-txt-cl) !important;
    font-size: var(--c2d-b1-txt-sz) !important;
    background: var(--c2d-b1-bg) !important;
    border: 1px solid var(--c2d-b1-br) !important;
    max-width: var(--c2d-b1-w) !important;
    width: 100%; display:block; margin:0 auto;
    border-radius: 50px; padding: 12px; font-weight:700; transition:0.3s;
}
.c2d-btn-1:hover { background: var(--c2d-b1-hover) !important; opacity:0.9; }
.c2d-btn-1:disabled { opacity:0.7; cursor:not-allowed; }

/* BOTÓN 2 (Registro / Cancelar) */
.c2d-btn-2 {
    display: inline-block;
    color: var(--c2d-b2-txt-cl) !important;
    font-size: var(--c2d-b2-txt-sz) !important;
    background: var(--c2d-b2-bg) !important;
    border: 1px solid var(--c2d-b2-br) !important;
    max-width: var(--c2d-b2-w) !important;
    width: 100%; margin:0 auto;
    border-radius: 50px; padding: 10px; font-weight:700; text-decoration:none; transition:0.3s;
}
.c2d-btn-2:hover { 
    background: var(--c2d-b2-hover) !important; 
    color: #fff !important; 
}

/* Extras */
.c2d-link { color: var(--c2d-icon-email-bg); display:block; text-align:center; text-decoration:none; margin-top:10px; }
.c2d-otp-box { display:none; background:rgba(0,0,0,0.03); padding:20px; border-radius:15px; margin-top:20px; }
.c2d-otp-box.active { display:block; }
.c2d-actions-row { display:flex; gap:10px; margin-top:15px; }
.c2d-recaptcha { display:flex; justify-content:center; margin-top:15px; }

/* Responsive */
@media(max-width:480px){
    .c2d-wrap .input-group-lg { max-width: 100% !important; }
    .c2d-btn-1, .c2d-btn-2 { max-width: 100% !important; }
}