/* CONTENEDOR GENERAL */
.mpv-login-page{
    display:flex;
    min-height:100vh;
    font-family:"Roboto",sans-serif;
    background:#f4f6f9;
}

/* IZQUIERDA */
.mpv-login-left{
    flex:1;
    background:#0066cc;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}

.mpv-login-banner img{
    max-width:80%;
    margin-bottom:20px;
    border-radius:15px;

    border:3px solid transparent;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.7),
        0 0 20px rgba(255,255,255,.8),
        0 8px 25px rgba(0,0,0,.15);
}
/* Hover: un pequeño efecto de elevación */
.mpv-login-banner img:hover {
    transform: translateY(-4px) scale(1.02);
    border:6px solid transparent;

    box-shadow:
        0 0 0 3px rgba(255,255,255,.7),
        0 0 30px rgba(255,255,255,.8),
        0 15px 35px rgba(0,0,0,.15);
}

.mpv-caption-title{
    font-size:24px;
    font-weight:700;
	color: #fff;
}

.mpv-caption-text{
    font-size:14px;
    line-height:1.6;
    margin-top:10px;
}

/* DERECHA */
.mpv-login-right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px;
}

/* TARJETA FORMULARIO */
.mpv-login-card{
    background:#fff;
    padding:20px;
    border-radius:20px;
    width:100%;
    max-width:460px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

.mpv-register-card{
    background:#fff;
    padding:20px;
    border-radius:20px;
    width:100%;
    max-width:600px;
    box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* HEADER */
.mpv-login-header h2{
    font-size:26px;
    font-weight:700;
    color:#003b70;
    margin-bottom:5px;
}

.mpv-login-header span{
    color:#666;
    font-size:14px;
}

/* INPUTS */
.mpv-input-group{
    margin-bottom:10px;
}

.mpv-input-group i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#0066cc;
}
.mpv-input-wrapper{
    position:relative;
}

.mpv-input-wrapper i{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:#0066cc;
}

.mpv-input-wrapper input{
    width:100%;
    padding:10px 45px 10px 35px;
    border-radius:10px;
    border:1px solid #ccc;
    font-size:15px;
    box-sizing:border-box;
}

.mpv-toggle-password{
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    padding:0;
    margin:0;
    color:#0066cc;
    cursor:pointer;
    z-index:10;
}

/* BOTONES */
.mpv-btn-login{
    width:100%;
    background:linear-gradient(135deg,#0066cc,#004b99);
    color:#fff;
    border:none;
    border-radius:50px;
    padding:12px;
    font-weight:600;
    transition:.3s;
}

.mpv-btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,91,150,.25);
}

.mpv-btn-back{
    display:block;
    width:100%;
    background:#dc3545;
    color:#fff;
    border-radius:50px;
    padding:12px;
    text-align:center;
    font-weight:600;
    transition:.3s;
    text-decoration:none;
}

.mpv-btn-back:hover{
    background:#a71d2a;
	color:#fff;
}

/* FOOTER */
.mpv-login-footer{
    margin-top:8px;
    border-top:1px solid #eee;
    padding-top:10px;
}

.mpv-login-footer a{
    display:inline-block;
    color:#005baa;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}


.mpv-footer-links{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    flex-wrap:wrap;
    gap:10px;
}

.mpv-footer-card{
    flex:1;
    background:#f4f6f9;
    border-radius:12px;
    text-align:center;
    padding:10px;
    text-decoration:none;
    color:#003b70;
    transition:.3s;
}

.mpv-footer-card i{
    font-size:24px;
    color:#0066cc;
}

.mpv-footer-card h5{
    margin-top:10px;
    font-size:16px;
    font-weight:700;
}

.mpv-footer-card span{
    font-size:10px;
    color:#555;
}

.mpv-footer-card:hover{
    background:#eef5ff;
    transform:translateY(-2px);
}

/* COPYRIGHT */
.mpv-copy{
    font-size:12px;
    color:#aaa;
    margin-top:15px;
}
@media (max-width:768px){

    .mpv-login-actions{
        display:flex;
        gap:10px;
    }

    .mpv-login-actions .col-md-6{
        width:50%;
        padding:0;
    }

}
/* Aviso de actualización */

.mpv-login-update{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:8px;
    padding:8px;
    border-radius:16px;
    background:#E7C4FF;
    border:1px solid #dbeafe;
}

.mpv-login-update-icon{
    width:48px;
    height:48px;
    min-width:48px;
    border-radius:50%;
    background:#e8f1ff;
    color:#005baa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.mpv-login-update-content h5{
    margin:0 0 2px;
    font-size:15px;
    font-weight:700;
    color:#003b70;
}

.mpv-login-update-content p{
    margin:0;
    color:#666;
    font-size:13px;
    line-height:1.5;
}

.mpv-login-update-content a{
    display:inline-block;
    margin-top:8px;
    color:#005baa;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.mpv-login-update-content a:hover{
    color:#003b70;
    text-decoration:underline;
}
/* boton sweetalert2 */
.mpv-swal-login {
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
    border-top: 5px solid #dc2626;
}

.mpv-swal-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

.mpv-swal-btn{
    min-width: 160px !important;
    height: 48px !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all .25s ease !important;
}
.mpv-swal-btn:hover{
    transform: translateY(-2px);
}
.mpv-swal-success {
    border-radius: 18px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    border-top: 5px solid #2563eb;
}

.mpv-swal-success .swal2-icon.swal2-success {
    border-color: #22c55e !important;
    color: #22c55e !important;
}

.mpv-swal-btn-success{
    min-width: 160px !important;
    height: 48px !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all .25s ease !important;
	background-color: #2563eb !important;
}
.mpv-swal-btn-success:hover{
    transform: translateY(-2px);
}

.mpv-btn-login:disabled{
    opacity:.7;
    cursor:not-allowed;
    pointer-events:none;
}
.rc-card{
    max-width:600px;
    margin:15px auto;
    padding:20px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
    font-family:"Roboto", sans-serif;
}

.rc-card2{
    max-width:600px;
    margin:15px auto;
    padding:10px;
    border-radius:20px;
    background:#fff;
    box-shadow:0 7px 10px rgba(0,0,0,0.1);
    font-family:"Roboto", sans-serif;
}

/* FILAS Y COLUMNAS */
.rc-row{
    display:flex;
    gap:15px;
    margin-bottom:15px;
}
.rc-col{
    flex:1;
}

/* INPUTS CON ICONO */
/* Contenedor relativo para input + iconos */
.rc-input-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Icono izquierdo */
.rc-input-wrapper i.fa-lock,
.rc-input-wrapper i.fa-user,
.rc-input-wrapper i.fa-id-card,
.rc-input-wrapper i.bi-calendar3,
.rc-input-wrapper i.bi-phone-fill,
.rc-input-wrapper i.bi-geo-alt-fill,
.rc-input-wrapper i.fa-envelope {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #0066cc;
    font-size: 16px;
}

/* Input con padding extra a la derecha para toggle */
.rc-input-wrapper input {
    width: 100%;
    padding: 10px 40px 10px 35px; /* padding-right = 40px para botón toggle */
    border-radius: 12px;
    border: 1px solid #ccc;
    font-size: 15px;
    box-sizing: border-box;
}

/* Botón toggle de password */
.rc-toggle-pass {
    position: absolute;
    right: 10px; /* dentro del input */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #0066cc;
    font-size: 16px;
    padding: 0;
}

/* Hover */
.rc-toggle-pass:hover {
    color: #004b99;
}

/* Deshabilitado */
.rc-toggle-pass:disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.6;
	color: #999;
}

/* Botón toggle de password */
.rc-toggle-pass-log {
    position: absolute;
    right: 10px;       /* dentro del input */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #0066cc;
    font-size: 16px;
    padding: 0;
}

.rc-toggle-pass-log:hover {
    color: #004b99;
}

.rc-input{
    width: 100%;
    padding: 8px 8px 8px 35px;
    border-radius: 12px;
    border: 1px solid #000;
    font-size: 15px;
    transition: .3s;
    font-weight: 400; /* normal por defecto */
    color: #000; /* color del texto */
}
.rc-codigo{
    width: 100%;
	height:48px;
    padding: 2px 2px 2px 2px;
    border-radius: 12px;
    border: 2px solid #170FF0;
    border: 2px solid #170FF0;
    font-size: 24px;
    transition: .3s;
    font-weight: 400; /* normal por defecto */
    color: #000; /* color del texto */
	text-align:center;
}

/* Focus del input */
.rc-input:focus{
    border-color: #0066cc;
    box-shadow: 0 0 10px rgba(0,102,204,0.2);
    outline: none;
}

/* Focus del input */
.rc-codigo:focus{
    border-color: #0066cc;
    box-shadow: 0 0 10px rgba(0,102,204,0.2);
    outline: none;
}
/* Disabled */
.rc-input:disabled{
    background: #f4f4f4;
    color: #999;
}
.rc-input[readonly]{
    background-color: #f5f5f5 !important;
    color: #6c757d !important;
    border-color: #d6d6d6 !important;
    cursor: not-allowed;
    opacity: 1; /* evita que se vea demasiado transparente */
}

/* Placeholder gris claro */
.rc-input::placeholder {
    color: #999;
    font-weight: 400;
}

/* Cuando el input tiene contenido (no muestra placeholder) */
.rc-input:not(:placeholder-shown) {
    font-weight: 500; /* negrita al escribir */
}
/* BOTON */
.rc-btn{
    width:100%;
    background:linear-gradient(135deg,#0066cc,#004b99);
    color:#fff;
    border:none;
    border-radius:50px;
    padding:14px;
    font-size:16px;
    font-weight:600;
    cursor:not-allowed;
    transition:.3s;
}
.rc-btn:enabled{
    cursor:pointer;
}
/* Desactivar hover cuando el botón está deshabilitado */
.rc-btn:disabled {
    cursor: not-allowed;
    background: #9E9B9B;
}
.rc-btn:hover:enabled{
    transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(0,91,150,.25);
}

/* BOTÓN VOLVER - RC */
.rc-btn-back{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex:1; /* igual ancho que rc-btn si están en la misma fila */
    background:#dc3545; /* rojo profesional */
    color:#fff;
    border:none;
    border-radius:50px;
    padding:12px;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    text-align:center;
    cursor:pointer;
    transition: all 0.3s ease;
}

/* Hover */
.rc-btn-back:hover{
    background:#a71d2a;
    transform: translateY(-2px);
    box-shadow:0 6px 18px rgba(0,0,0,0.15);
    color:#fff;
}

/* Iconos dentro del botón */
.rc-btn-back i{
    font-size:16px;
    line-height:1;
}

/* Contenedor de botones en línea */
.rc-btn-row{
    display:flex;
    gap:15px;           /* espacio entre botones */
    margin-top:20px;
    justify-content: center; /* centra los botones horizontalmente */
    flex-wrap: wrap;     /* en móviles los botones pueden ir a la siguiente línea */
}

/* Ajuste de ancho de los botones para que tengan proporción */
.rc-btn-row .rc-btn,
.rc-btn-row .rc-btn-back{
    flex:1;             /* ambos botones ocupan la misma proporción */
    text-align:center;
    white-space: nowrap;
}

/* Opcional: ajustar responsive para móviles */
@media(max-width:500px){
    .rc-btn-row{
        flex-direction: column;
        gap:10px;
    }
}

/* Subtítulo moderno y atractivo */
.rc-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #004b99; /* azul profesional */
    background: linear-gradient(90deg, #e0f0ff, #ffffff);
    padding: 8px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    text-align: center;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.rc-subtitle i {
    font-size: 18px;
    color: #0066cc;
}

.rc-details {
    margin-top: 8px;
    padding: 8px 8px;
	border: 1px solid #004b99;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,.06);
    color: #334155;
    font-size: 11px;
    line-height: 1.2;
}

.rc-details h5 {
    margin: 0 0 5px;
    color: #005ea8;
    font-size: 14px;
    font-weight: 700;
}

.rc-details p {
    margin: 0;
    text-align: justify;
}

.rc-details strong {
    color: #005ea8;
    font-weight: 700;
}

.rc-details .rc-mail {
    display: inline-block;
    background: #e8f3ff;
    color: #005ea8;
    padding: 2px 2px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin: 2px;
}

.rc-details .rc-note {
    margin-top: 12px;
    padding: 5px 5px;
    background: #fff8e6;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    font-size: 10px;
	text-align:justify;
}

/* Ajuste botón Validar inline */
.rc-col-validate {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto; /* tamaño fijo para el botón */
}

.rc-btn-validate{
    background:#6D048C;
    color:#fff;
    border:none;
    border-radius:50px;
    padding:10px 16px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
    display:flex;
    align-items:center;
    gap:5px;
}
.rc-btn-validate:hover{
    background:#942EB3;
    transform:translateY(-2px);
    box-shadow:0 6px 12px rgba(0,0,0,0.15);
}

/* RESPONSIVE */
@media(max-width:500px){
    .rc-row{
        flex-direction:column;
    }
}
/* Desactivar hover cuando el botón está deshabilitado */
.rc-btn-validate:disabled,
.rc-btn-validate[disabled] {
    cursor: not-allowed;
    background: #0066cc; /* o el color que quieras mantener */
    transform: none;
    box-shadow: none;
    opacity: 0.7; /* opcional para indicar deshabilitado */
    pointer-events: none; /* desactiva cualquier interacción */
}

/* Asegurarse de que no se aplique hover al botón deshabilitado */
.rc-btn-validate:disabled:hover {
    background: #0066cc;
    transform: none;
    box-shadow: none;
}

.rc-input-dni {
    max-width: 150px; /* ancho fijo adecuado para 8 dígitos */
}
.rc-input-mail {
    min-width: 300px; /* más ancho que el DNI */
}
@media (max-width: 768px) {
    .rc-input-dni {
        max-width: 100%;
    }
}
		/* Caja de términos */
.hgdv-terminos-box{
    margin-top:0px;
    padding:7px 12px;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:12px;
}

/* Label */
.hgdv-terminos-label{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:0;
    cursor:pointer;
    font-size:14px;
    line-height:1.6;
    color:#64748b;
    font-weight:400;
}

/* Checkbox */
.hgdv-terminos-label input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:2px;
    flex-shrink:0;
    cursor:pointer;
}

/* Enlaces */
.hgdv-terminos-label a{
    color:#0f766e;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
}

.hgdv-terminos-label a:hover{
    color:#0d9488;
    text-decoration:underline;
}

.rc-divider{
    position:relative;
    margin:5px 0 4px;
    text-align:center;
}

.rc-divider::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    height:1px;
    background:#dbe4ee;
}

.rc-divider span{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:0 15px;

    background:#fff;

    color:#004b99;
    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;
}

.rc-divider i{
    color:#0066cc;
}