/* =========================================================
   VIVA SPACES - BASE
   Variables, tipografía, colores, layout general y compatibilidad.
   ========================================================= */

/* =========================================================
   Variables
   ========================================================= */
:root {
    --colorPrincipal: #527f43;
    --colorPrincipalLight: #64a83f;
    --colorSecundario: #64a83f;
    --colorSecundarioLight: #78b85a;
    --colorGris: #f4f1ec;
    --colorGrisFormularios: #f7f6f2;
    --colorGrisOscuro: #2d3a3f;
    --colorBlue: #527f43;
    --colorRojo: #e72d37;
    --btn-px-lg: 2.95rem;
    --btn-px: 2.5rem;
    --btn-py: .3rem;
}

/* =========================================================
   HTML / Body / Tipografía
   ========================================================= */
html,
body {
    width: 100%;
    min-height: 100%;
    height: auto;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

::placeholder {
    color: #707070;
    font-style: normal;
    opacity: .65;
}

p {
    font-size: 14px;
}

.h1,
h1 {
    font-size: 3rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.h2,
h2 {
    font-size: 2rem;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.h3,
h3 {
    font-size: 1.4rem;
    font-family: "Poppins", sans-serif;
}

.h4,
h4 {
    font-size: 1.2rem;
    font-family: "Poppins", sans-serif;
}

.h5,
h5 {
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}

/* =========================================================
   Colores / fondos
   ========================================================= */
.colorPrincipal {
    color: var(--colorPrincipal) !important;
}

.colorSecundario {
    color: var(--colorSecundario) !important;
}

.colorRojo {
    color: var(--colorRojo) !important;
}

.txtcolor-primario {
    color: var(--colorPrincipal) !important;
}

.txtcolor-naranja {
    color: var(--colorSecundario) !important;
}

.bg-gris {
    background-color: var(--colorGris) !important;
}

.background-color-blanco {
    background-color: #fff !important;
}

/* =========================================================
   Layout general
   ========================================================= */
.img-login {
    background: url("../../images/fondologin.jpg") center center no-repeat;
    background-size: cover;
}

.masthead {
    min-height: 1px;
}

.img-header-background {
    background-color: var(--colorPrincipal);
}

.img-circle-userprofile {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--colorPrincipal);
}

/* =========================================================
   Enlaces
   ========================================================= */
a {
    color: var(--colorBlue) !important;
    background-color: transparent;
    transition: color .3s ease;
    text-decoration: underline !important;
}

    a:hover {
        opacity: .6;
        color: var(--colorBlue) !important;
    }

    a.btn,
    a.btn:hover {
        text-decoration: none !important;
    }

/* =========================================================
   Utilidades propias usadas por vistas actuales
   ========================================================= */
.cursor-hand {
    cursor: pointer !important;
}

.cursor-text {
    cursor: text !important;
}

.text-right {
    text-align: right !important;
}

/* =========================================================
   Compatibilidad Bootstrap 4 usada todavía en vistas
   ========================================================= */
.pr-0 {
    padding-right: 0 !important;
}

.ml-2 {
    margin-left: .5rem !important;
}

.ml-md-auto {
    margin-left: auto !important;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.rounded-lg {
    border-radius: .5rem !important;
}

@media (min-width: 768px) {
    .pr-md-2 {
        padding-right: .5rem !important;
    }
}

@media (min-width: 992px) {
    .pr-lg-0 {
        padding-right: 0 !important;
    }
}
