/* ==========================================================================
   Vistas de alta de cuenta: registro, confirmación y activación.
   Se carga sólo en esas tres, por eso puede ocultar el sidebar sin acotar.
   OJO: va después de check_pass.css para poder reescribir #message, .valid
   y .invalid sin subir especificidad. No define display en #message: eso lo
   controla registrer.js con estilo en línea.
   ========================================================================== */

/* Sin navegación de catálogo: es una pantalla de alta, no de exploración */
#sidebar{display: none;}
.start_topbox .start_topbox_right{width: 100% !important; float: none !important;}
/* .cp-page-bg trae min-height:100% y se estira al alto del viewport. En páginas
   largas no se nota, pero aquí dejaba ~256px vacíos antes del footer. */
.cp-page-bg{min-height: 0;}

/* Tarjeta centrada -------------------------------------------------------- */
.auth-wrap{display: flex; justify-content: center; padding: 6px 16px 30px;}
.auth-card{width: 100%; max-width: 430px; box-sizing: border-box; padding: 32px 30px;
    background: white; border: 1px #f3f3f3 solid; border-radius: 13px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10); font-family: Galano, sans-serif;}
.auth-card.auth-card-msj{max-width: 480px; text-align: center;}

.auth-head{margin-bottom: 20px;}
.auth-head h1{margin: 0 0 4px; font-size: 24px; font-weight: bold; color: #1a1a1a;}
.auth-head p{margin: 0; font-size: 13.5px; color: #8a8a8a;}

/* Campos ------------------------------------------------------------------ */
.auth-field{margin-bottom: 14px;}
.auth-field > label{display: block; margin-bottom: 6px; font-size: 13px; font-weight: bold; color: #333;}
.auth-input{position: relative; display: flex; align-items: center;}
.auth-icon{position: absolute; left: 14px; font-size: 14px; color: #9a9a9a; pointer-events: none; z-index: 1;}
.form_registrer .form-control{width: 100%; height: 46px; margin: 0; padding: 0 16px 0 40px;
    border: 1px solid #e6e7ea; border-radius: 9px; background: #f3f4f6; box-shadow: none;
    font-family: Galano, sans-serif; font-size: 14px; color: #333; box-sizing: border-box;}
.form_registrer .form-control::placeholder{color: #9a9a9a;}
.form_registrer .form-control:focus{background: white; border-color: #c00000; outline: 0;
    box-shadow: 0 0 0 3px rgba(192,0,0,0.08);}

/* Mensajes de jQuery Validate: texto plano, no bloque rojo */
.form_registrer label.error,.form_registrer label.warning{display: block; margin: 6px 0 0 2px; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    font-size: 12px; font-weight: normal; color: #c00000;}
.form_registrer input.error{border-color: #c00000;}
.form_registrer input.warning{border-color: #FFC107;}

/* Botón ------------------------------------------------------------------- */
.auth-btn{display: block; width: 100%; height: 46px; margin-top: 6px; border: 0; border-radius: 9px;
    background: #c00000; color: white; font-family: Galano, sans-serif; font-size: 15px;
    font-weight: bold; cursor: pointer; transition: background .15s;}
.auth-btn:hover{background: #a00000;}

/* Enlace a iniciar sesión (abre el dropdown del header) ------------------- */
.auth-alt{margin: 16px 0 0; text-align: center; font-size: 13.5px; color: #8a8a8a;}
.auth-alt a{color: #c00000; font-weight: bold; text-decoration: none;}
.auth-alt a:hover{text-decoration: underline; color: #c00000;}

/* Requisitos de contraseña (lo muestra/oculta registrer.js) ---------------- */
#message{background: #fafbfc; border: 1px solid #ececec; border-radius: 9px;
    padding: 12px 14px; margin-top: 8px; color: #333;}
#message h4{margin: 0 0 8px; font-size: 12px; font-weight: bold; color: #333;}
/* display:block porque la clase .fas de FontAwesome los vuelve inline-block
   (en el markup original los <br> eran los que forzaban el salto de línea) */
#message p{display: block; position: relative; margin: 0 0 5px; padding: 0 0 0 20px; font-size: 12px;}
#message p:last-child{margin-bottom: 0;}
#message p span{font-size: 12px; font-family: Galano, sans-serif; font-weight: normal;}
#message .valid:before,
#message .invalid:before{position: absolute; left: 0; top: 0;}
#message .valid{color: #1f9d55;}
#message .invalid{color: #c00000;}

/* Confirmación y activación ----------------------------------------------- */
.auth-icono{display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%; font-size: 26px;}
.auth-icono.ok{background: #eaf7ef; color: #1f9d55;}
.auth-icono.error{background: #fdf2f2; color: #c00000;}
.auth-icono.aviso{background: #fdf2f2; color: #c00000;}
.auth-icono.warning{background: #f7f0db; color: #FFC107;}
.auth-card-msj h1{margin: 0 0 10px; font-size: 22px; font-weight: bold; color: #1a1a1a;}
.auth-card-msj p{margin: 0 0 8px; font-size: 14px; line-height: 1.55; color: #555;}
.auth-card-msj .auth-correo{font-weight: bold; color: #1a1a1a;}
.auth-card-msj .auth-nota{font-size: 13px; color: #8a8a8a;}
.auth-volver{display: inline-block; margin-top: 18px; padding: 12px 26px; border-radius: 9px;
    background: #c00000; color: white; font-size: 14px; font-weight: bold; text-decoration: none;
    transition: background .15s;}
.auth-volver:hover{background: #a00000; color: white;}

@media (max-width: 600px){
    .auth-card{padding: 26px 20px;}
    .auth-wrap{padding: 6px 12px 60px;}
}