/*
Template Name: Velzon - Admin & Dashboard Template
File: Custom Css File Mejorado para Puno
*/
.bg-pink {
    background-color: #f83898 !important;
    color: #ffffffff !important;
}

.bg-blue {
    background-color: #00AAE9 !important;
    color: #ffffffff !important;
}

.bg-primary {
    background-color: var(--puno-blue-darker-rgb) !important;
    color: #ffffffff !important;
}

.bg-pastel-pink {
    background-color: #FFD1DC !important;
    /* Pastel: Pink */
    color: #CC6983 !important;
    /* Texto: Tono oscuro del Pink */
}

.bg-pastel-red {
    background-color: #e6b9b9 !important;
    /* Pastel: Pink */
    color: #d14848 !important;
    /* Texto: Tono oscuro del Pink */
}

.bg-pastel-blue {
    background-color: #b5d4ee !important;
    /* Pastel: Blue */
    color: #4082ce !important;
    /* Texto: Tono oscuro del Blue */
}

.bg-pastel-mint {
    background-color: #B2FDFD !important;
    /* Pastel: Mint */
    color: #55B5B5 !important;
    /* Texto: Tono oscuro del Mint */
}

.bg-pastel-lavender {
    background-color: #E6E6FA !important;
    /* Pastel: Lavender */
    color: #7A7AC6 !important;
    /* Texto: Tono oscuro del Lavender */
}

.bg-pastel-peach {
    background-color: #FFDAB9 !important;
    /* Pastel: Peach */
    color: #CC8F58 !important;
    /* Texto: Tono oscuro del Peach */
}

.bg-pastel-coral {
    background-color: #F08080 !important;
    /* Pastel: Coral */
    color: #7D4040 !important;
    /* Texto: Tono oscuro del Coral */
}

.bg-pastel-yellow {
    background-color: #FFFFB5 !important;
    /* Pastel: Yellow */
    color: #80805B !important;
    /* Texto: Tono oscuro del Yellow */
}

.bg-pastel-periwinkle {
    background-color: #CCCCFF !important;
    /* Pastel: Periwinkle */
    color: #6666B2 !important;
    /* Texto: Tono oscuro del Periwinkle */
}

.bg-pastel-teal {
    background-color: #B2EBF2 !important;
    /* Pastel: Teal */
    color: #44929A !important;
    /* Texto: Tono oscuro del Teal */
}

.bg-pastel-sage {
    background-color: #C1E1C1 !important;
    /* Pastel: Sage */
    color: #588058 !important;
    /* Texto: Tono oscuro del Sage */
}

.bg-pastel-beige {
    background-color: #F5F5DC !important;
    /* Pastel: Beige */
    color: #7D7D6F !important;
    /* Texto: Tono oscuro del Beige */
}

.bg-pastel-lilac {
    background-color: #DCD0FF !important;
    /* Pastel: Lilac */
    color: #7B68A5 !important;
    /* Texto: Tono oscuro del Lilac */
}

.bg-pastel-grey {
    background-color: #CFD8DC !important;
    /* Pastel: Grey */
    color: #546C75 !important;
    /* Texto: Tono oscuro del Grey */
}

.bg-blue-marine {
    background-color: #0B446D !important;
    color: #ffffff !important;
}

.nav-item>.nav-link.menu-link.active {
    background-color: var(--puno-turquesa-light) !important;
}

.nav-item>.nav-link.menu-link:hover {
    background-color: var(--puno-blue) !important;
}

.collapse.menu-dropdown.show>ul>li>.nav-link.active {
    background-color: var(--puno-turquesa) !important;
}

.collapse.menu-dropdown.show>ul>li>.nav-link:hover {
    background-color: var(--puno-blue) !important;
}

.auth-page-wrapper>.bg-overlay {
    background: linear-gradient(to right, var(--puno-turquesa-light), var(--puno-blue-darkest)) !important;
    opacity: 0.9 !important;
}

.bg-overlay {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)) !important;
    opacity: 0.9 !important;
}

.bg-overlay2 {
    position: absolute;
    height: 100%;
    width: 100%;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    background-color: linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5)) !important;
    background-image: url(../images/landing/bg-pattern.png);
    background-position: center;
    background-size: cover;
    opacity: .2;
}

.hero-section {
    background: linear-gradient(to right, #0f61db, #3dbae4) !important;
}

.carousel-item {
    color: #fff !important;
}

.carousel-item.active {
    color: #fff !important;
}

.navbar-landing .navbar-nav .nav-item .nav-link.active,
.navbar-landing .navbar-nav .nav-item .nav-link:focus,
.navbar-landing .navbar-nav .nav-item .nav-link:hover {
    color: var(--puno-blue-marine) !important;
}

.navbar-landing .navbar-nav .nav-item .nav-link {
    color: var(--vz-gray-400) !important;
}

/* Estilos para el Footer Personalizado */
.custom-footer .footer-list li {
    padding: 5px 0;
}

.custom-footer .footer-list i {
    font-size: 16px;
    vertical-align: middle;
}

/* Contenedor del Mapa */
.map-container {
    overflow: hidden;
    /* Asegura que el iframe se ajuste al div */
    border: 1px solid var(--vz-gray-700);
}

/* Redes Sociales - Aseguramos que el ícono sea blanco sobre el fondo de color */
.custom-footer .footer-social-link .avatar-title {
    color: #FFF;
}

.navbar.navbar-expand-lg.navbar-landing.fixed-top {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

#back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    display: none;
    z-index: 1000;
}

#back-to-top:hover {
    opacity: 1;
}

:root {

    --puno-turquesa: #0280BB;
    --puno-turquesa-light: #2EBAED;
    --puno-blue: #0274B0;
    --puno-blue-marine: #0D2246;
    --puno-blue-rgb: rgb(2, 116, 176);
    --puno-blue-dark: #0487BD;
    --puno-blue-dark-rgb: rgb(0, 157, 225);
    --puno-blue-darker: #0B476C;
    --puno-blue-darker-rgb: rgb(11, 71, 108);
    --puno-blue-darkest: #055074;
    --puno-blue-darkest-rgb: rgb(5, 80, 116);
    --puno-red: #DB2129;
    --puno-red-rgb: rgb(219, 33, 41);
    --puno-yellow: #daae00;
    --puno-yellow-light: #e6ba0d;
    --puno-yellow-rgb: rgb(239, 202, 47);
    --puno-light-gray: #F0F0F0;
    --puno-light-gray-rgb: rgb(240, 240, 240);
    --puno-subtle-bg: #E6F7FF;
    --puno-subtle-bg-rgb: rgb(230, 247, 255);

    --vz-primary: var(--puno-blue-darker) !important;
    --vz-primary-rgb: var(--puno-blue-darker-rgb) !important;
    --vz-secondary: #044d7e;
    --vz-success: #0ab364;
    --vz-warning: var(--puno-yellow) !important;
    --vz-danger: var(--puno-red) !important;
    --vz-light: var(--puno-light-gray) !important;
    --vz-blue: var(--puno-blue) !important;
    --vz-red: var(--puno-red) !important;
    --vz-yellow: var(--puno-yellow-light) !important;
    --vz-gray-100: var(--puno-light-gray) !important;
    --vz-gray-200: #e9ebec;
    --vz-gray-300: #d6d6d6;
    --vz-gray-400: #b5b5b5;
    --vz-gray-500: #999999;
    --vz-gray-600: #666666;
    --vz-gray-700: #444444;
    --vz-gray-800: #222222;
    --vz-gray-900: #000000;
    --vz-light: var(--puno-light-gray) !important;
    --vz-topbar-user-bg: var(--puno-blue-dark) !important;
    --vz-btn-hover-border-color: var(--puno-blue-dark) !important;
    --vz-link-color: var(--puno-blue-dark) !important;
    --vz-link-bg-color: var(--puno-blue-darkest) !important;
    --vz-link-hover-color: var(--puno-red) !important;
    --vz-box-shadow-primary: 0 0 0 0.25rem rgba(var(--vz-primary-rgb), .25) !important;
    --vz-vertical-menu-title-color: var(--puno-yellow) !important;
    --vz-vertical-menu-item-color: var(--vz-gray-200) !important;
    --vz-vertical-menu-sub-item-color: var(--vz-gray-200) !important;
    --vz-primary-text-emphasis: var(--puno-blue-dark) !important;
    --vz-btn-hover-bg: var(--puno-blue-dark) !important;
    --vz-btn-hover-border-color: var(--puno-blue-dark) !important;

    --vz-vertical-menu-bg: var(--vz-primary) !important;
    --vz-vertical-menu-border: var(--vz-primary) !important;
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-item-hover-color: #fff;
    --vz-vertical-menu-item-active-color: #fff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-hover-color: #fff;
    --vz-vertical-menu-sub-item-active-color: #fff;
    --vz-twocolumn-menu-iconview-bg: var(--puno-blue-dark) !important;
    --vz-vertical-menu-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    --vz-vertical-menu-dropdown-box-shadow: 0 2px 4px rgba(15, 34, 58, 0.12);
    --vz-sidebar-user-bg: rgba(255, 255, 255, 0.08);
    --vz-sidebar-user-name-text: #fff;
    --vz-sidebar-user-name-sub-text: #bcc2d6;

    --vz-header-item-bg: var(--puno-blue-dark) !important;
    --vz-header-item-sub-color: #b0c4d9;
    --vz-topbar-user-bg: var(--puno-blue-dark) !important;
}