/*
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: 0.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 0.5s ease;
  transition: all 0.5s ease;
  display: none;
  z-index: 1000;
}

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

.select2-container--open .select2-dropdown--below,
.flatpickr-innerContainer {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.411) !important;
}

form .form-control,
form .form-select {
  border: 1px solid var(--puno-blue-darker) !important;
}

.select2-container .select2-selection--single {
  border: 1px solid var(--puno-blue-darker) !important;
}

form .form-control:focus,
form .form-select:focus {
  border: 1px solid var(--puno-turquesa-light) !important;
}

.select2-container .select2-selection--single:focus {
  border: 1px solid var(--puno-turquesa-light) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--puno-turquesa-light) !important;
}

form hr {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  opacity: 0.6 !important;
  border-color: var(--puno-blue-darker) !important;
}

.row>.col-md-12>h6 {
  color: var(--puno-blue-marine);
  font-weight: 600;
  margin-bottom: 5px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
  font-size: 0;
  height: 100%;
  margin-right: 30px;
  position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__clear::after {
  content: "\eb96";
  font-family: "remixicon" !important;
  font-size: 18px;
  color: #dc3545;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover::after {
  color: #a71d2a;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 5px;
  position: absolute;
  width: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "\ea4e";
  font-family: "remixicon" !important;
  font-size: 18px;
  color: #6c757d;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease-in-out;
}

.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

.form-label,
label {
  margin-bottom: 3px;
  font-weight: var(--vz-font-weight-semibold) !important;
}

.text-red {
  color: rgb(255, 0, 0) !important;
}

.text-green {
  color: rgb(0, 128, 0) !important;
}

.text-yellow {
  color: rgb(185, 145, 0) !important;
}

.text-orange {
  color: rgb(255, 123, 0) !important;
}

.text-green:hover {
  color: rgb(0, 255, 0) !important;
}

.text-yellow:hover {
  color: rgb(255, 200, 0) !important;
}

.text-orange:hover {
  color: rgb(255, 123, 0) !important;
}

.text-blue {
  color: #0d6efd !important;
}

.text-turquesa {
  color: #049ebd !important;
}

.text-purple {
  color: #6f42c1 !important;
}

/* Forzamos el centrado absoluto y evitamos scroll */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  overflow: hidden;
}

.preloader-logo-anim {
  animation: pulse-logo 2s infinite ease-in-out;
  /* Mejora el renderizado en móviles */
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

@keyframes pulse-logo {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* Clase para desaparecer suavemente */
.loader-fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.5s ease-out, visibility 0.5s;
}

.card-header.bg-primary.text-white>h5,
.card-header.bg-success.text-white>h5,
.card-header.bg-info.text-white>h5,
.card-header.bg-warning.text-white>h5,
.card-header.bg-danger.text-white>h5,
.card-header.bg-secondary.text-white>h5,
.card-header.bg-dark.text-white>h5 {
  color: #fff !important;
}

/* Mostrar siempre controles del año */
.flatpickr-current-month .numInputWrapper {
  opacity: 1 !important;
  visibility: visible !important;
  margin-left: 8px;
  /* separación del año */
}

/* Flechas */
.flatpickr-current-month .numInputWrapper span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
  padding: 0 0 0 3px !important;
}

/* Separación vertical */
.flatpickr-current-month .arrowUp {
  margin-bottom: 2px;
}

.flatpickr-current-month .arrowDown {
  margin-top: 2px;
}

/* Hover */
.flatpickr-current-month .numInputWrapper span:hover {
  background-color: #ced4da2c;
}

/* Eliminar ícono original de flatpickr */
.flatpickr-current-month .numInputWrapper span::after {
  display: none;
}

/* Font Awesome */
.arrowUp::before {
  content: "\ea78";
  font-family: "remixicon";
  font-weight: 900;
  font-size: 10px;
}

.arrowDown::before {
  content: "\ea4e";
  font-family: "remixicon";
  font-weight: 900;
  font-size: 10px;
}

.flatpickr-current-month input.cur-year {
  padding: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  margin: 0px !important;
  padding: 0 6px 0 0 !important;
}

.select2-container .select2-selection--single {
  height: calc(1.5em + 1rem + calc(var(--vz-border-width) * 2)) !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 36px !important;
}

:root {
  --puno-turquesa: #0280bb;
  --puno-turquesa-light: #2ebaed;
  --puno-blue: #0274b0;
  --puno-blue-marine: #0d2246;
  --puno-blue-light: #0274b0;
  --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-dark: #b98d08;
  --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), 0.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;
}