/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24-nov-2016, 10:01:11
    Author     : abracho
*/


a:hover, a:focus {
    color: #154380;
    text-decoration: none;
}

body{
    /* background: #EFEFEF; */
    /*background-image: url(../neuboard/img/colombia-2.jpg);*/
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%; 
}

.footer-auth{
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    height: 110px;
    /* line-height: 60px; */
    background: #34495E;
}

.footer-content{
    margin-top: 15px;
}

.footer-text{
    color: #ffffff;
    font-size: 11px;
}

/* --- Login (auth.login_wrapper): sin scroll interno; si el bloque supera la ventana, scroll del documento --- */
.auth-login-viewport,
.auth-login-viewport * {
    box-sizing: border-box;
}

.auth-login-viewport {
    position: relative;
    overflow: visible;
    background: #f0f3f3;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 8px 16px;
}

.auth-login-viewport .auth-login-inner {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.auth-login-viewport .vcenter {
    transform: none;
    margin: 0;
}

.auth-login-viewport .container {
    width: 100%;
    border: 0;
    padding-left: 8px;
    padding-right: 8px;
}

.auth-login-viewport #div_login.panel {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
}

.auth-login-viewport #div_login > .panel-body {
    flex: 0 1 auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
}

.auth-login-viewport #div_login > .panel-footer {
    flex: 0 0 auto;
    height: auto;
    padding: 8px 10px;
}

.auth-login-viewport #div_login > .panel-footer p {
    margin: 0;
    font-size: 10px;
    line-height: 1.35;
}

.auth-login-viewport .auth-login-row {
    display: flex;
    margin-left: -8px;
    margin-right: -8px;
    overflow: visible;
}

.auth-login-viewport .auth-login-row > .col-md-6 {
    float: none;
    padding-left: 8px;
    padding-right: 8px;
}

.auth-login-viewport #div_form {
    overflow: visible;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.auth-login-viewport #div_form > form {
    margin-top: 8px;
}

.auth-login-viewport .auth-login-form .form-group {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.auth-login-viewport .auth-login-form .form-control {
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Contenedor solo del input + iconos: el % ya no incluye label ni mensaje de error */
.auth-login-viewport .auth-login-field-wrap {
    position: relative;
    display: block;
}

/* Solo la fila input+iconos: el icono usa top:50% de esta caja, no del wrap si hay mensajes debajo (p. ej. password/email) */
.auth-login-viewport .auth-login-field-input-row {
    position: relative;
    display: block;
}

.auth-login-viewport .auth-login-field-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #777;
    font-size: 14px;
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

.auth-login-viewport .auth-login-field-icon--left {
    left: 12px;
}

.auth-login-viewport .auth-login-field-icon--right {
    left: auto;
    right: 12px;
    pointer-events: auto;
    z-index: 3;
}

.auth-login-viewport .auth-login-field-wrap label.error {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    display: block !important;
    z-index: 5;
    white-space: normal;
    max-width: 100%;
}

.auth-login-viewport .auth-login-form label.control-label {
    font-size: 14px !important;
    line-height: 1.42857143 !important;
}

/* jQuery Validate: en main.css label.error es blanco y position:absolute (otras pantallas); aquí fondo claro.
   No aplicar a .control-label (título del campo): a veces comparte contexto y no debe verse a 12px. */
.auth-login-viewport .auth-login-form label.error:not(.control-label) {
    color: #a94442 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    max-width: 100%;
}

/* Errores de validate fuera del wrap (p. ej. otros campos): flujo normal */
.auth-login-viewport .auth-login-form .form-group > label.error:not(.control-label) {
    position: static !important;
    display: block !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.auth-login-viewport .auth-login-form label.valid {
    position: static !important;
    color: #3c763d !important;
    font-size: 12px !important;
    font-weight: normal !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 4px !important;
}

.auth-login-viewport .auth-login-form .form-group div.error {
    color: #a94442;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 2px;
}

/* Fila producto: oculta visualmente pero mantiene altura (evita salto del panel al cargar /checkrole) */
.auth-login-form .auth-login-portal-slot {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.auth-login-form .auth-login-portal-slot.auth-login-portal-slot--visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Carrusel: recorte del slide sin barra de scroll (overflow hidden solo en la zona del carrusel) */
.auth-login-viewport #logo .div-vcenter {
    position: relative;
    overflow: hidden;
}

.auth-login-viewport #logo .carousel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.auth-login-viewport #logo .carousel-inner {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    margin-left: 0 !important;
    height: 100% !important;
}

.auth-login-viewport #logo .carousel .item {
    height: 100%;
}

.auth-login-viewport #logo .carousel .item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.auth-login-viewport #logo .carousel .item img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    margin: 0 auto;
}

.auth-login-viewport #logo .carousel-control {
    width: 36px;
    background-image: none;
    opacity: 1;
    color: transparent;
}

.auth-login-viewport #logo .carousel-control:hover {
    opacity: 1;
    color: transparent;
}

/* Flechas: semitransparentes; estilo “hover” solo con puntero encima (:hover), no al quedar :focus por clic */
.auth-login-viewport #logo .carousel-control .glyphicon-chevron-left,
.auth-login-viewport #logo .carousel-control .glyphicon-chevron-right {
    color: rgba(255, 255, 255, 0.42);
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.45));
}

.auth-login-viewport #logo .carousel-control:hover .glyphicon-chevron-left,
.auth-login-viewport #logo .carousel-control:hover .glyphicon-chevron-right,
.auth-login-viewport #logo .carousel-control:focus-visible .glyphicon-chevron-left,
.auth-login-viewport #logo .carousel-control:focus-visible .glyphicon-chevron-right {
    color: #fff;
    filter: none;
    text-shadow:
        -1px 0 0 #286090,
        1px 0 0 #286090,
        0 -1px 0 #286090,
        0 1px 0 #286090,
        -1px -1px 0 #286090,
        1px -1px 0 #286090,
        -1px 1px 0 #286090,
        1px 1px 0 #286090;
}

.auth-login-viewport #logo .carousel-indicators {
    bottom: 6px;
    margin-bottom: 0;
}

/* Puntos: borde azul login (contraste en fondos claros); activo blanco con mismo borde */
.auth-login-viewport #logo .carousel-indicators li {
    border: 1px solid #286090;
    background-color: transparent;
}

.auth-login-viewport #logo .carousel-indicators li.active {
    background-color: #fff;
    border-color: #286090;
}

.auth-login-viewport #logo .panel-primary {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.auth-login-viewport #logo .panel-body {
    position: relative;
    min-height: 200px;
}

@media (min-width: 992px) {
    .auth-login-viewport .auth-login-row {
        flex-direction: row;
        align-items: stretch;
    }

    .auth-login-viewport .auth-login-row > .col-md-6 {
        width: 50%;
        flex: 0 0 50%;
        display: flex;
        flex-direction: column;
    }

    .auth-login-viewport .auth-login-row > .col-md-6 > .panel-primary {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

    .auth-login-viewport #logo .panel-body {
        flex: 1 1 auto;
        min-height: 280px;
        display: flex;
        flex-direction: column;
    }

    .auth-login-viewport #logo .div-vcenter {
        flex: 1 1 auto;
        min-height: 260px;
        width: 100%;
    }

    .auth-login-viewport #div_form {
        flex: 1 1 auto;
        overflow: visible;
    }

    /* MFA: misma escala visual aproximada que el login (formulario + captcha) */
    .auth-login-viewport #div_login.auth-login-mfa-active .auth-login-row {
        min-height: clamp(500px, 60vh, 720px);
    }

    .auth-login-viewport #div_login.auth-login-mfa-active > .panel-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    .auth-login-viewport #div_login.auth-login-mfa-active #div_form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        padding-top: 12px !important;
        padding-bottom: 20px !important;
    }

    .auth-login-viewport #div_login.auth-login-mfa-active #mfa_inline_wrap {
        width: 100%;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 991px) {
    .auth-login-viewport {
        padding: 8px 6px 12px;
    }

    /* Misma caja útil en ambas mitades: los inline padding-left/right 0 rompen el alineado al apilar */
    .auth-login-viewport .auth-login-row {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

    .auth-login-viewport .auth-login-row > .col-md-6 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .auth-login-viewport .auth-login-row > #logo {
        width: 100%;
    }

    .auth-login-viewport #logo .panel-body {
        min-height: 200px;
        height: 38vh;
        max-height: 360px;
        display: flex;
        flex-direction: column;
    }

    .auth-login-viewport #logo .div-vcenter {
        flex: 1 1 auto;
        height: 100%;
        min-height: 160px;
    }

    .auth-login-viewport .auth-login-row > .col-md-6:last-child {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .auth-login-viewport .auth-login-row > .col-md-6:last-child > .panel-primary {
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .auth-login-viewport #div_login > .panel-footer p {
        font-size: 9px;
    }

    .auth-login-viewport #div_login.auth-login-mfa-active #div_form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 46vh;
        padding-top: 20px !important;
        padding-bottom: 28px !important;
    }
}

/* Restablecer contraseña (password/reset/{token}) — popover y mensajes de error */
.auth-login-viewport.auth-password-reset #logo .div-vcenter.auth-password-reset-welcome {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-login-viewport.auth-password-reset #logo .div-vcenter.auth-password-reset-welcome img {
    position: static;
    transform: none;
    width: auto;
    max-width: 78%;
    height: auto;
    padding: 12px;
    opacity: 1;
}

.auth-login-viewport.auth-password-reset .popover {
    width: 350px !important;
    max-width: 90vw !important;
    margin-top: -10px;
}

/* Solo errores de servidor (div / flash); no aplicar a label.error de jQuery Validate */
.auth-login-viewport.auth-password-reset #div_form .form-group > div.error {
    color: #a94442 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

/* Flash session() en fila propia (no confundir con label.error del wrap) */
.auth-login-viewport.auth-password-reset #div_form .form-group > label.error {
    color: #a94442 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-email-field {
    /* Hueco para label.error absoluto (1–2 líneas) + separación respecto al bloque captcha (ritmo ~2 filas del login) */
    padding-bottom: 40px !important;
    margin-bottom: 12px !important;
}

/* password/email: label estable; mensaje Laravel bajo el input (dentro del wrap) para no solaparse con label.error de Validate */
.auth-login-viewport.auth-password-reset #form_email_pw .auth-login-reset-email-field.has-error > label.control-label {
    color: #333 !important;
}

.auth-login-viewport.auth-password-reset #form_email_pw .auth-login-field-wrap .auth-reset-email-server-msg {
    display: block;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 0;
    color: #a94442 !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.35 !important;
    clear: both;
    position: relative;
    z-index: 4;
    max-width: 100%;
}

/* Más reserva si hay mensaje servidor + cliente (dos líneas) */
.auth-login-viewport.auth-password-reset #form_email_pw .form-group.auth-login-reset-email-field {
    padding-bottom: 52px !important;
    margin-bottom: 12px !important;
}

/* Espacio captcha ↔ botones: NO usar padding:0 25px en línea en el Blade (anula padding vertical). */
.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-captcha-row {
    padding-top: 12px !important;
    padding-bottom: 24px !important;
}

.auth-login-viewport.auth-password-reset #div_form .auth-login-reset-captcha-inner {
    text-align: center;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-captcha-row #cloudflare-container,
.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-captcha-row #recaptcha-container {
    display: block;
    margin-bottom: 4px;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-captcha-row .cf-turnstile {
    display: block !important;
    margin-bottom: 20px !important;
}

/* Separación física captcha → botones (evita solape si el iframe Turnstile “desborda” el contenedor) */
.auth-login-viewport.auth-password-reset #div_form .auth-login-reset-captcha-actions-gap {
    display: block;
    height: 22px;
    min-height: 22px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    clear: both;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-actions-row {
    padding-top: 14px !important;
}

/* Token reset: botones al ancho del contenido (misma sangría que columnas Bootstrap del formulario) */
.auth-login-viewport.auth-password-reset #form_change_pw .form-group.auth-login-reset-actions-row {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-actions-row > hr {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
    height: 0;
    border: 0;
    border-top: 1px solid #e5e5e5;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-actions-row > .btn.btn-block:first-of-type {
    margin-bottom: 4px !important;
}

.auth-login-viewport.auth-password-reset #div_form .form-group.auth-login-reset-actions-row > .btn + a.btn {
    margin-top: 10px !important;
    display: block;
}

/*
 * changePw.js añade class "error" al .col-* padre (highlight). base.css define .error { color: #AA4F4F }
 * y ese color se hereda en el label del campo. Igual que login/recuperar: label estable; rojo solo en mensajes.
 */
.auth-login-viewport.auth-password-reset #form_change_pw .col-xs-12.error,
.auth-login-viewport.auth-password-reset #form_change_pw .col-sm-12.error,
.auth-login-viewport.auth-password-reset #form_change_pw .col-md-12.error {
    color: inherit;
}

.auth-login-viewport.auth-password-reset #form_change_pw .form-group .col-xs-12.error > label.control-label:not(.text-danger),
.auth-login-viewport.auth-password-reset #form_change_pw .form-group .col-sm-12.error > label.control-label:not(.text-danger),
.auth-login-viewport.auth-password-reset #form_change_pw .form-group .col-md-12.error > label.control-label:not(.text-danger) {
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
}

.auth-login-viewport.auth-password-reset #form_change_pw label.error:not(.control-label),
.auth-login-viewport.auth-password-reset #form_change_pw .form-group div.error {
    color: #a94442 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-xs-12 > label.control-label:not(.text-danger),
.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-sm-12 > label.control-label:not(.text-danger),
.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-md-12 > label.control-label:not(.text-danger) {
    color: #333 !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
}

.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-xs-12 > label.control-label.text-danger,
.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-sm-12 > label.control-label.text-danger,
.auth-login-viewport.auth-password-reset #form_change_pw .form-group.has-error > .col-md-12 > label.control-label.text-danger {
    color: #a94442 !important;
    font-size: 14px !important;
    line-height: 1.42857143 !important;
}

@media (max-width: 767px) {
    .auth-login-viewport.auth-password-reset .popover {
        width: 280px !important;
        max-width: 85vw !important;
        font-size: 12px;
    }

    .auth-login-viewport.auth-password-reset #div_form .form-group > div.error {
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .auth-login-viewport.auth-password-reset .popover {
        width: 250px !important;
        max-width: 90vw !important;
    }
}

/* Demo: marcos y separación panel-primary al gris #909aa0 (cabeceras theme-grey-full), mismo criterio que login */
.auth-login-viewport.auth-ambiente-demo #div_login .panel.panel-primary {
    border-color: #909aa0 !important;
}

.auth-login-viewport.auth-ambiente-demo #div_login .panel-primary > .panel-heading {
    border-color: #909aa0 !important;
}

.auth-login-viewport.auth-ambiente-demo #div_login .panel-primary > .panel-heading + .panel-body {
    border-top-color: #909aa0 !important;
}