/* Custom styles for background slideshow */
#background-slideshow {
    position: fixed;
    width: 100vw; /* Cubrir todo el ancho de la ventana */
    height: 100vh; /* Cubrir toda la altura de la ventana */
    top: 0;
    left: 0;
    z-index: -1; /* Asegura que esté detrás de todo el contenido */
    overflow: hidden; /* Evita barras de scroll si algo se desborda ligeramente */
}

#background-slideshow div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Todas las imágenes empiezan ocultas */
    transition: opacity 1.5s ease-in-out; /* Duración y tipo de transición para el fundido */
    top: 0; /* Asegura que todas las imágenes se apilen en el mismo lugar */
    left: 0;
}

#background-slideshow div.active {
    opacity: 1; /* La imagen activa se hace visible */
}

/* Opcional: Si el body tiene un color de fondo por la clase .app-blank que interfiere */
body#kt_body.app-blank {
    background-color: transparent !important; /* Hace el fondo del body transparente */
}


/*Fuentes especiales */

@font-face {
	font-family: 'Graphik';
	src: url('fonts/Graphik-Regular.ttf') format('truetype'), url('fonts/Graphik-Regular.woff2') format('woff2'), url('fonts/Graphik-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Graphik-Thin';
	src: url('fonts/Graphik-Thin.ttf') format('truetype'), url('fonts/Graphik-Thin.woff2') format('woff2'), url('fonts/Graphik-Thin.woff') format('woff');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Graphik-Bold';
	src: url('fonts/GraphikSemibold.ttf') format('truetype'), url('fonts/GraphikSemibold.woff2') format('woff2'), url('fonts/GraphikSemibold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@media (min-width: 992px) {
    .pt-lg-20
 {
        padding-top: 20rem !important;
    }
}

body {
    --fc-event-border-color: #341C30 !important;
    --fc-event-bg-color: #341C30 !important;
    --fc-event-text-color: #FFFFFF;
	font-size: 13px;
	font-family: 'Graphik';
	background-color: transparent !important;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 14px !important;
    font-weight: 400;
    font-family: 'Graphik', Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*Menu Lateral*/

@media (min-width: 992px) {
    .aside {
        width: 275px;
        transition: width .3s ease;
    }
}

.aside-dark .hover-scroll-overlay-y {
    --scrollbar-space: 0.4rem;
    scrollbar-color: #d1d1df transparent !important;
}

.aside-dark .hover-scroll-overlay-y:hover {
    scrollbar-color: #d1d1df transparent;
}

.aside.aside-dark .aside-logo {
    background-color: #fff;
}

.aside.aside-dark {
    background-color: #fbfbfb;
}

.aside-dark .menu .menu-item .menu-link.active {
    transition: color .2s ease, background-color .2s ease;
    background-color: #ffffff;
    color: #000000;
}

.aside-dark .menu .menu-item:hover .menu-link:hover .menu-title:hover {
    transition: color .2s ease, background-color .2s ease;
    background-color: #ffffff !important;
    color: #341C30 !important;
}

.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active), .aside-dark .menu .menu-item.hover>.menu-link:not(.disabled):not(.active) {
    transition: color .2s ease, background-color .2s ease;
    background-color: #ffffff !important;
    color: #341C30 !important;
}

.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-title, .aside-dark .menu .menu-item.hover>.menu-link:not(.disabled):not(.active) .menu-title {
   color: #341C30 !important;
}

.aside-dark .menu .menu-item .menu-link.active .menu-title {
    color: #000 !important;
}


.aside-dark .menu .menu-item .menu-section {
    color: #9899ac !important;
}


.btn-check:active+.btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g), .btn-check:checked+.btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-color-primary.active .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-color-primary.show .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-color-primary:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .show>.btn.btn-active-color-primary .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #341C30;
}

/*Fin Menú lateral*/

.btn.btn-primary {
    color: #fff;
    border-color: #341C30;
    background-color: #341C30 !important;
}

.btn.btn-primary:hover {
    color: #fff;
    border-color: #341C30;
    background-color: #341C30 !important;
}

.btn.btn-primary:focus {
    color: #fff;
    border-color: #341C30;
    background-color: #341C30 !important;
}

.btn-primary {
    color: #fff;
    border-color: #341C30;
    background-color: #341C30 !important;
}

.link-primary:hover{
	color:#7D608B!important;
}

.link-primary{
	color:#341C30 !important;
}

.btn.btn-primary:hover:not(.btn-active){
	background-color:#7D608B!important;
}

.btn-group-lg>.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon), .btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon).btn-lg{
    background-color:#341C30 !important;
}


.text-muted:hover {
    color: #7D608B!important;
}

.swal2-confirm {
	background-color:#341C30 !important;
}
.swal2-cancel {
  color: #fff;
  background-color: #8B1E1E !important;
}
.swal2-loader {
 
    border-color: #341C30 transparent #341C30 transparent;
}

.btn:not(.btn-outline):not(.btn-dashed):not(.border-hover):not(.border-active):not(.btn-flush):not(.btn-icon) {
    background-color:#341C30 ;
}

.aside-dark .menu .menu-item .menu-link.active .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #341C30;
}

.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g), .aside-dark .menu .menu-item.hover>.menu-link:not(.disabled):not(.active) .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #341C30;
}


.stepper.stepper-pills .stepper-item.current .stepper-icon {
    transition: color .2s ease, background-color .2s ease;
    background-color: #341C30;
}

.stepper.stepper-pills .stepper-item .stepper-icon .stepper-number {
    font-weight: 600;
    color: #341C30 !important;
    font-size: 1.25rem;
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check, .stepper.stepper-pills .stepper-item.current:last-child .stepper-icon .stepper-check {
    color: #341C30 !important;
    display: inline-block;
}

.btn-check:active+.btn.btn-outline.btn-outline-dashed.btn-outline-default, .btn-check:checked+.btn.btn-outline.btn-outline-dashed.btn-outline-default, .btn.btn-outline.btn-outline-dashed.btn-outline-default.active, .btn.btn-outline.btn-outline-dashed.btn-outline-default.show, .btn.btn-outline.btn-outline-dashed.btn-outline-default:active:not(.btn-active), .btn.btn-outline.btn-outline-dashed.btn-outline-default:focus:not(.btn-active), .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active), .show>.btn.btn-outline.btn-outline-dashed.btn-outline-default {
    color: #341C30;
    border-color: #341C30;
    background-color: #f7fffe !important;
}

a {
    color: #341C30;
    text-decoration: none;
}

a:hover {
    color: #7D608B;
    text-decoration: none;
}


.btn-check:active+.btn.btn-outline.btn-outline-dashed.btn-outline-default .svg-icon svg [fill]:not(.permanent):not(g), .btn-check:checked+.btn.btn-outline.btn-outline-dashed.btn-outline-default .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-outline.btn-outline-dashed.btn-outline-default.active .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-outline.btn-outline-dashed.btn-outline-default.show .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-outline.btn-outline-dashed.btn-outline-default:active:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-outline.btn-outline-dashed.btn-outline-default:focus:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .btn.btn-outline.btn-outline-dashed.btn-outline-default:hover:not(.btn-active) .svg-icon svg [fill]:not(.permanent):not(g), .show>.btn.btn-outline.btn-outline-dashed.btn-outline-default .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #341C30;
}

.btn.btn-light-primary {
    color: #ffffff;
    border-color: #f1faff;
    background-color: #f1faff;
}

.btn.btn-light-primary .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #f1faff;
}

.btn.btn-light {
    color: #ffffff;
    border-color: #f5f8fa;
    background-color: #f5f8fa;
}

.swal2-confirm.btn.btn-light:hover {
    color: #ffffff !important;
    border-color: #f5f8fa;
    background-color: #f5f8fa;
}

.svg-icon.svg-icon-primary svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #341C30;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #341C30 !important;
}

.aside.aside-dark .btn-custom:hover:not(.btn-active) {
    color: #b5b5c3;
    background-color: #7D608B !important;
}

.aside-dark .menu .menu-item .menu-link:hover:not(.disabled):not(.active) .menu-icon i, .aside-dark .menu .menu-item.hover>.menu-link:not(.disabled):not(.active) .menu-icon i {
    color: #7D608B;
}

.aside-dark .menu .menu-item .menu-link.active .menu-icon i {
    color: #7D608B;
}

.btn-active-color-primary {
    color: #ffffff !important;
}

.btn.btn-color-gray-600 .svg-icon svg [fill]:not(.permanent):not(g) {
    transition: fill .3s ease;
    fill: #ffffff;
}

.nav-line-tabs .nav-item .nav-link.active, .nav-line-tabs .nav-item .nav-link:hover:not(.disabled), .nav-line-tabs .nav-item.show .nav-link {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #341C30;
    transition: color .2s ease, background-color .2s ease;
}

.text-active-primary.active {
    transition: color .2s ease, background-color .2s ease;
    color: #341C30 !important;
}

.badge-light-primary {
    color: #341C30;
    background-color: #e2f7e2;
}

.badge-primary {
    color: #fff;
    background-color: #341C30;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #341C30;
    border-color: transparent;
}

.text-primary {
    color: #341C30 !important;
}

.form-check-input:checked {
    background-color: #7D608B;
    border-color: #341C30;
}




/* Imagen de fondo */
/* Toolbar con imagen de fondo */
#kt_cabecera_pagina {
  background-image: url('../media/kronos/Fondo_cabeceras.webp'); /* Reemplaza con la ruta a tu imagen */
  background-size: cover; /* Asegura que la imagen cubra toda el área */
  background-position: center; /* Centra la imagen */
  height: 150px; /* Altura fija para el toolbar, la imagen ocupará estos 200px */
  padding-top: 2rem; /* Padding para el contenido DENTRO del toolbar */
  padding-bottom: 2rem; /* Padding para el contenido DENTRO del toolbar */
  /* position: relative; /* Necesario si decides usar un overlay con ::before */
}

#kt_cabecera_pagina .page-title .border-gray-200 {
  border-color: rgba(255, 255, 255, 0.4) !important; /* Color del separador más claro */
}

/* Opcional: Si quieres añadir un overlay semitransparente oscuro
   para mejorar la legibilidad del texto blanco sobre imágenes muy claras/coloridas.
   Si tu imagen ya es oscura, esto podría no ser necesario o incluso hacer el texto menos legible.
*/
/*
#kt_toolbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4); /* Overlay oscuro semitransparente 
  z-index: 0; /* Asegura que el overlay esté detrás del contenido del toolbar 
}

#kt_cabecera_pagina > #kt_toolbar_container {
  position: relative; /* Asegura que el contenido del toolbar esté sobre el overlay 
  z-index: 1; 
}
*/

@media (min-width: 992px) {
    .content {
        padding: 0px 0;
    }
}

/* Fichas Viviendas */

.vivcard {

    min-height: 500px !important;
    border-radius: .475rem;

}


.overlay-negro {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.35); /* ajusta la opacidad aquí */
  border-radius: .475rem;
  z-index: 1;
}

.card-con-overlay .card-header,
.card-con-overlay .card-body {
  position: relative;
  z-index: 2;
}

.card-label.promo {
    font-family: 'Graphik-Bold' !important;
    font-size: 2.5rem !important;
}

.fasecons.badge {
    display: inline-block;
    padding: .5em .85em;
    font-size: .90rem;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .475rem;
}


.btn.btn-primary.pastilla:hover{
    background-color: #7D608B !important;
}

.btn.btn-primary.pastilla:focus{
    background-color: #7D608B !important;
}

.symbol .symbol-label {

    background-color: #ffffff !important;

}

form-switch.form-check-solid .form-check-input {
    height: 1.75rem !important;
}

.form-check-input {
    height: 1.75rem !important;
    /*background-color: #7D608B;*/
}

.form-check.form-check-solid .form-check-input:checked {
    background-color: #7D608B;
}

#vincular .btn {
    font-size: 0.9rem !important;
}

.btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show>.btn.btn-primary {
    color: #fff;
    border-color: #7D608B;
    background-color: #7D608B !important;
}

/* DashBoard Promocion */

.infoactivos.card {
    position: relative;
    display: flex
;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #f7f7f8;
    background-clip: border-box;
    border: 1px solid #c9caca;
    border-radius: .475rem;
    box-shadow: 0 0 20px 0 rgba(76, 87, 125, .02);
}

/*Timeline*/
.timeline-label:before {
    content: "";
    position: absolute;
    left: 160px;
    width: 3px;
    top: 0;
    bottom: 0;
    background-color: #eff2f5;
}

.timeline-label .timeline-label {
    width: 160px;
    flex-shrink: 0;
    position: relative;
    color: #3f4254;
}

/*Videos Carrousel */

 .videos.card-body {
    padding: 1rem 1rem !important;
}

/*Boton Ticket*/

.ticket.btn.btn-primary {
    border-radius: 2.5rem !important;  
}