/* ==========================================================================
   SAM - Pantalla de acceso
   Edificaciones Avanzadas

   Fondo a pantalla completa + tarjeta de acceso centrada.

   PARA PONER LA FOTO DE OBRA:
   dejar el archivo en  img/fondo-login.jpg  y listo. Mientras no exista,
   se ve el degradado con retícula de plano que queda debajo.

   Paleta: azul #2c3e50 / naranja #f0932b (la misma de los reportes PDF)
   Depende de: bootstrap 3.3.7 + font-awesome 4.7
   ========================================================================== */

html,
body {
    height: 100%;
}

body.sam-login {
    margin: 0;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #34495e;
    background-color: #22303d;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Fondo
   -------------------------------------------------------------------------- */

/* Capa 1: degradado base (se ve si no hay foto) */
.sam-login__bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background-color: #2c3e50;
    background-image: linear-gradient(135deg, #34495e 0%, #2c3e50 55%, #1e2b38 100%);
}

/* Capa 2: la foto de obra. Si el archivo no existe, no pinta nada. */
.sam-login__photo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-image: url("../../img/fondo-login.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Capa 3: retícula de papel de plano (trama fina + módulo mayor) */
.sam-login__grid {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* Capa 4: velo que oscurece para que la tarjeta y el pie se lean siempre */
.sam-login__veil {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    background: radial-gradient(ellipse at 50% 45%, rgba(15, 23, 31, .42) 0%, rgba(15, 23, 31, .78) 100%);
}

/* --------------------------------------------------------------------------
   Centrado
   -------------------------------------------------------------------------- */

.sam-login__wrap {
    position: relative;
    z-index: 4;
    display: table;
    width: 100%;
    height: 100%;
}

.sam-login__cell {
    display: table-cell;
    vertical-align: middle;
    padding: 40px 20px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Tarjeta de acceso
   -------------------------------------------------------------------------- */

.sam-login__card {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: 38px 38px 34px;
    text-align: left;
    vertical-align: middle;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .46), 0 2px 6px rgba(0, 0, 0, .24);
}

/* Franja de marca en el borde superior */
.sam-login__card:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background-image: linear-gradient(90deg, #f0932b 0%, #e8861a 100%);
    border-radius: 10px 10px 0 0;
}

/*
   Marcas de esquina. En un plano arquitectonico el detalle ampliado se
   encierra con marcas en las esquinas, no con un marco cerrado. Es lo que
   amarra la tarjeta con el papel milimetrado del fondo.
*/
.sam-login__marks {
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    pointer-events: none;
    background-image:
        linear-gradient(#f0932b, #f0932b), linear-gradient(#f0932b, #f0932b),
        linear-gradient(#f0932b, #f0932b), linear-gradient(#f0932b, #f0932b),
        linear-gradient(#f0932b, #f0932b), linear-gradient(#f0932b, #f0932b),
        linear-gradient(#f0932b, #f0932b), linear-gradient(#f0932b, #f0932b);
    background-size:
        20px 1px, 1px 20px,
        20px 1px, 1px 20px,
        20px 1px, 1px 20px,
        20px 1px, 1px 20px;
    background-position:
        left top, left top,
        right top, right top,
        left bottom, left bottom,
        right bottom, right bottom;
    background-repeat: no-repeat;
    opacity: .75;
}

.sam-login__logo {
    display: block;
    max-width: 168px;
    max-height: 90px;
    margin: 6px auto 20px;
}

.sam-login__title {
    margin: 0 0 4px;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
    color: #2c3e50;
}

.sam-login__subtitle {
    margin: 0 0 26px;
    font-size: 12.5px;
    text-align: center;
    letter-spacing: .3px;
    color: #93a2b0;
}

/* --------------------------------------------------------------------------
   Campos
   -------------------------------------------------------------------------- */

.sam-login__label {
    display: block;
    margin-bottom: 7px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #7b8a99;
}

.sam-login__field {
    position: relative;
    margin-bottom: 18px;
}

.sam-login__field > i.sam-login__icon {
    position: absolute;
    top: 34px;
    left: 15px;
    z-index: 2;
    font-size: 14px;
    color: #b3c0cc;
    -webkit-transition: color .18s ease;
    transition: color .18s ease;
}

.sam-login__input {
    display: block;
    width: 100%;
    height: 46px;
    padding: 10px 15px 10px 40px;
    font-size: 15px;
    color: #2c3e50;
    background-color: #f7f9fb;
    border: 1px solid #dfe6ec;
    border-radius: 6px;
    outline: 0;
    -webkit-appearance: none;
    -webkit-transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.sam-login__input:focus {
    background-color: #ffffff;
    border-color: #f0932b;
    box-shadow: 0 0 0 3px rgba(240, 147, 43, .16);
}

.sam-login__field.is-focused > i.sam-login__icon {
    color: #f0932b;
}

.sam-login__input::-ms-reveal,
.sam-login__input::-ms-clear {
    display: none;
}

.sam-login__input::-webkit-input-placeholder { color: #b8c4cf; }
.sam-login__input::-moz-placeholder { color: #b8c4cf; opacity: 1; }
.sam-login__input:-ms-input-placeholder { color: #b8c4cf; }

/*
   Chrome pinta de azul los campos autocompletados. Van las dos versiones del
   selector en reglas SEPARADAS a proposito: si se agruparan, el navegador que
   no entienda :autofill tiraria la regla completa.
*/
.sam-login__input:-webkit-autofill,
.sam-login__input:-webkit-autofill:hover,
.sam-login__input:-webkit-autofill:active {
    -webkit-text-fill-color: #2c3e50 !important;
    -webkit-box-shadow: 0 0 0 1000px #f7f9fb inset !important;
    box-shadow: 0 0 0 1000px #f7f9fb inset !important;
    caret-color: #2c3e50;
    -webkit-transition: background-color 9999s ease-in-out 0s;
    transition: background-color 9999s ease-in-out 0s;
}

.sam-login__input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(240, 147, 43, .16) !important;
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(240, 147, 43, .16) !important;
}

.sam-login__input:autofill {
    -webkit-text-fill-color: #2c3e50 !important;
    box-shadow: 0 0 0 1000px #f7f9fb inset !important;
    caret-color: #2c3e50;
}

.sam-login__input:autofill:focus {
    box-shadow: 0 0 0 1000px #ffffff inset, 0 0 0 3px rgba(240, 147, 43, .16) !important;
}

/* Campo con error */
.sam-login__field.has-error .sam-login__input {
    background-color: #fdf5f5;
    border-color: #e08585;
}

.sam-login__field.has-error .sam-login__input:focus {
    box-shadow: 0 0 0 3px rgba(224, 133, 133, .18);
}

/* Ojo de mostrar/ocultar contrasena */
.sam-login__toggle {
    position: absolute;
    top: 27px;
    right: 3px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    color: #b3c0cc;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    outline: 0;
}

.sam-login__toggle:hover,
.sam-login__toggle:focus {
    color: #2c3e50;
}

/* --------------------------------------------------------------------------
   Aviso de error
   -------------------------------------------------------------------------- */

.sam-login__alert {
    position: relative;
    padding: 11px 13px 11px 40px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #a24242;
    background-color: #fdeeee;
    border: 1px solid #f3cfcf;
    border-left: 4px solid #d9534f;
    border-radius: 5px;
}

.sam-login__alert i {
    position: absolute;
    top: 13px;
    left: 15px;
    font-size: 15px;
    color: #d9534f;
}

/* --------------------------------------------------------------------------
   Boton
   -------------------------------------------------------------------------- */

.sam-login__btn {
    display: block;
    width: 100%;
    height: 46px;
    margin-top: 24px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #f0932b;
    background-image: linear-gradient(135deg, #f5a742 0%, #e8861a 100%);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    outline: 0;
    box-shadow: 0 4px 12px rgba(240, 147, 43, .30);
    -webkit-transition: box-shadow .18s ease, -webkit-transform .18s ease;
    transition: box-shadow .18s ease, transform .18s ease;
}

.sam-login__btn:hover,
.sam-login__btn:focus {
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(240, 147, 43, .40);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.sam-login__btn:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    box-shadow: 0 3px 8px rgba(240, 147, 43, .30);
}

/* Estado mientras se envia. No se usa [disabled]: un boton deshabilitado no
   manda su name y ASP.NET se quedaria sin el evento del click. */
.sam-login__btn.is-busy,
.sam-login__btn.is-busy:hover,
.sam-login__btn.is-busy:focus {
    cursor: default;
    opacity: .72;
    box-shadow: none;
    -webkit-transform: none;
    transform: none;
}

/* --------------------------------------------------------------------------
   Pie, fuera de la tarjeta
   -------------------------------------------------------------------------- */

.sam-login__foot {
    max-width: 400px;
    margin: 22px auto 0;
    font-size: 12.5px;
    text-align: center;
    color: rgba(255, 255, 255, .62);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.sam-login__foot strong {
    display: block;
    margin-bottom: 2px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .4px;
    color: rgba(255, 255, 255, .9);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .sam-login__cell { padding: 28px 16px; }

    .sam-login__card {
        max-width: none;
        padding: 30px 24px 28px;
    }

    .sam-login__logo {
        max-width: 140px;
        max-height: 76px;
        margin-bottom: 18px;
    }
}

/* Pantallas bajas: que la tarjeta no quede recortada */
@media (max-height: 620px) {
    .sam-login__cell { padding-top: 24px; padding-bottom: 24px; }
    .sam-login__card { padding-top: 28px; padding-bottom: 26px; }
    .sam-login__logo { max-height: 66px; margin-bottom: 16px; }
    .sam-login__subtitle { margin-bottom: 20px; }
}