:root {
    --primary-purple: #8f8aff; /* Tu color base */
    --light-purple: #e8e8ff;   /* Púrpura muy claro, casi blanco */
    --dark-purple: #6a6ad0;    /* Un púrpura más oscuro para sombras o bordes */
    --white: #ffffff;
}

.blur-barky{
    filter: blur(25px);
    opacity: 0.5;
    backdrop-filter: blur(25px);
}

.footer-social img{
    width: 24px;
}


/* BREAKPOINTS ESTÁNDARES DE BOOTSTRAP */
/* sm (small) >= 576px */
/* md (medium) >= 768px */
/* lg (large) >= 992px */
/* xl (extra-large) >= 1200px */

/* -------------------------------------- */
/* CLASES PARA OCULTAR O MOSTRAR ELEMENTOS */
/* -------------------------------------- */

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

/* Ocultar elementos en pantallas sm y mayores */
.d-sm-none {
  display: none !important;
}

/* Ocultar elementos en pantallas md y mayores */
.d-md-none {
  display: none !important;
}

/* Ocultar elementos en pantallas lg y mayores */
.d-lg-none {
  display: none !important;
}

/* Ocultar elementos en pantallas xl y mayores */
.d-xl-none {
  display: none !important;
}

/* -------------------------------------- */
/* CLASES RESPONSIVAS CON MEDIA QUERIES */
/* -------------------------------------- */

/* Estilos a partir de pantallas sm (576px) */
@media (min-width: 576px) {
  .d-sm-block {
    display: block !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  /* Mostrar en sm pero ocultar en pantallas menores a sm */
  .d-none.d-sm-block,
  .d-none.d-sm-inline,
  .d-none.d-sm-inline-block,
  .d-none.d-sm-flex,
  .d-none.d-sm-inline-flex {
    display: initial !important; /* Vuelve al valor inicial */
  }
}

/* Estilos a partir de pantallas md (768px) */
@media (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  /* Ocultar en md y mayores */
  .d-sm-none.d-md-block,
  .d-sm-none.d-md-inline,
  .d-sm-none.d-md-inline-block,
  .d-sm-none.d-md-flex,
  .d-sm-none.d-md-inline-flex {
    display: none !important; /* Oculta en md y mayores */
  }
}

/* Estilos a partir de pantallas lg (992px) */
@media (min-width: 992px) {
  .d-lg-block {
    display: block !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
}

/* Estilos a partir de pantallas xl (1200px) */
@media (min-width: 1200px) {
  .d-xl-block {
    display: block !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
}

#video-popup {
  display: none; /* Ahora sí, oculto por defecto */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

#video-popup .popup-content {
  position: relative;
  width: 90vw;
  height: 90vh;
  max-width: 800px;
  max-height: 800px;
  display: flex; /* Añadimos flexbox para centrar el video */
  justify-content: center;
  align-items: center;
}

#video-popup .close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

#video-popup #video-player {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Esto sigue siendo clave para que el video se adapte */
}

#notifications.notif-stack{position:fixed;z-index:1080;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
#notifications .alert{pointer-events:auto;border-radius:.5rem;box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08)}
#notifications.top{top:16px;left:50%;transform:translateX(-50%);width:min(560px,92vw)}
#notifications.bottom{bottom:16px;left:50%;transform:translateX(-50%);width:min(560px,92vw)}
#notifications.top-right{top:16px;right:16px;width:360px}
#notifications.bottom-right{bottom:16px;right:16px;width:360px}


/* Contenedor principal del ícono: Define la posición final */
.chat-notification-container {
	display: none;
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1000;
	width: 60px;
    height: 60px;
}

.chat-icon-wrapper {
	z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: var(--primary-purple);
    border-radius: 50%;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    color: var(--white);
    font-size: 28px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones para hover */

    /* Estado inicial para la animación de aparición: Totalmente oculto y listo */
    opacity: 0;
    transform: scale(0) translateY(-50%); /* Combinado para el estado de reposo */
    pointer-events: none; /* No interactuable mientras está oculto */
}

/* Esta clase asegura que el elemento esté completamente oculto al cargar la página */
.chat-icon-wrapper.hidden-initial {
    opacity: 0;
    transform: scale(0) translateY(-50%); /* Mantiene el transform original del parent */
    pointer-events: none;
}

.chat-icon-wrapper:hover {
    background-color: var(--dark-purple);
    transform: translateY(-55%) scale(1.05); /* Ligeramente más grande y levantado en hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.chat-icon-wrapper:active {
    transform: translateY(-50%) scale(0.98); /* Vuelve a su posición, ligeramente presionado */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/*
   *** ANIMACIONES POTENCIADAS Y DE MOVIMIENTO ***
*/

/* Animación de aparición dramática: Desde el centro y grande, se mueve y encoge */
@keyframes dramaticEntrance {
    0% {
        opacity: 0;
        /* Empieza en el centro de la ventana, muy grande */
        top: 50%; 
        left: 50%;
        transform: translate(-50%, -50%) scale(3); /* Grande y centrado */
    }
    60% {
        opacity: 1;
        /* Se mueve hacia la posición final, con un pequeño rebote */
        top: 50%; 
        left: calc(100% - 20px - 30px); /* Aproximación a la posición final horizontalmente */
        transform: translate(-50%, -50%) scale(1.2); /* Un poco más grande de lo final */
    }
    80% {
        transform: translate(-50%, -50%) scale(0.9); /* Pequeño retroceso */
    }
    100% {
        opacity: 1;
        /* Posición final. NOTA: el transform principal del wrapper se encargará del translateY(-50%) final */
        top: 50%; 
        right: 20px; /* Esto es para la animación */
        left: auto; /* Deshabilita left para que right tome control */
        transform: translate(0, -50%) scale(1); /* Vuelve a su tamaño y se alinea con el translateY del contenedor */
    }
}


/* Animación de pulsación con ondas MÁS grandes y pronunciadas */
@keyframes strongPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(143, 138, 255, 0.7);
    }
    40% {
        box-shadow: 0 0 0 40px rgba(143, 138, 255, 0); /* Onda aún más grande */
    }
    70% {
        box-shadow: 0 0 0 0 rgba(143, 138, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(143, 138, 255, 0);
    }
}


.chat-icon-wrapper.show-and-animate {
    /* Para la animación de entrada, necesitamos anular la posición 'fixed' temporalmente
       o manejar el movimiento dentro de la animación para mayor control.
       Vamos a mover el `fixed` a `.chat-icon-wrapper` durante la animación.
    */
    position: fixed; /* Mover fixed aquí para que la animación pueda controlar el top/left */
    
    /* La animación de aparición es ahora 'dramaticEntrance' */
    animation: dramaticEntrance 1s ease-out forwards, /* Entrada más larga y elaborada */
               strongPulse 2s ease-in-out infinite 1.1s; /* Pulso después de aparecer (delay ajustado) */
    pointer-events: auto; /* Habilitar clics */
}

/*
   *** RESPONSIVE DESIGN para móviles ***
*/
@media (max-width: 768px) {
    .chat-notification-container {
        /* En móviles, quizás mejor abajo a la derecha, menos invasivo que en el medio vertical */
        top: auto; 
        bottom: 20px;
        right: 15px;
        transform: none; /* Eliminar translateY para alineación normal */
    }

    .chat-icon-wrapper {
        width: 50px; /* Un poco más pequeño en móviles */
        height: 50px;
        font-size: 24px; /* Ícono más pequeño */
    }
    
    .chat-icon-wrapper.show-and-animate {
        /* Para que la animación de entrada en móvil se adapte, 
           podríamos necesitar redefinir dramaticEntrance aquí si el punto de entrada es diferente.
           Por simplicidad, mantendrá el mismo inicio, pero el final será la posición móvil.
           Si se necesita un inicio diferente en móvil, se crea una nueva keyframe.
        */
        animation: dramaticEntrance 1s ease-out forwards, 
                   strongPulse 2s ease-in-out infinite 1.1s; 
    }
    
    /* Pequeño ajuste para el hover en móvil si se usa */
    .chat-icon-wrapper:hover {
        transform: translateY(-3px) scale(1.05); /* Ajustar hover para móvil */
    }
}

/* Asegurarse de que el estado final de la animación coincida con el CSS base */
.chat-icon-wrapper.animation-completed {
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) scale(1);
    opacity: 1;
    pointer-events: auto;
    /* Quitar la animación de pulso si se desea que solo pulse al aparecer */
    /* animation: none; */ 
}

small{
	font-size: 0.6rem !important;
}
/* Ejemplo de cómo usarla: */
.contenedor-del-mas { /* Reemplaza con la clase o ID real de tu contenedor */
  position: relative; /* Necesario para que la flecha se posicione correctamente */
}

.nice-select.open li[data-value=""]:first-child {
	display: none !important;
}

.custom-time-range {
  padding: 10px 15px;
  border-top: 1px solid #e5e5e5;
  background: #f9f9f9;
}

.custom-time-range label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.custom-time-range select {
  width: 100%;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
}

.facilities-list li {
	width:24px;
	height:24px;
	padding-right: 4px;
}
.facilities-list li img{
	width: 100%;
}

.custom-checkbox ul.no-list-style {
    list-style: none; /* Asegurarse de que no haya estilos de lista */
    padding: 0;
    margin: 0;
}

.custom-checkbox ul.no-list-style li {
    display: flex; /* Usamos flexbox para alinear los elementos dentro del li */
    align-items: center; /* Centra verticalmente los elementos (input y label) */
    justify-content: flex-end; /* Alinea los elementos al final (derecha) del li */
    margin-bottom: 10px; /* O el espaciado vertical que desees entre los items */
}

.custom-checkbox ul.no-list-style li label {
    margin-left: 10px; /* Espacio entre el checkbox y el label */
    text-align: left; /* Asegura que el texto del label esté alineado a la izquierda dentro de su propio espacio */
}
.custom-checkbox ul.no-list-style li p {
    text-align: right; /* Alinea el texto informativo a la derecha también */
    margin-top: 0;
    margin-bottom: 10px; /* Espacio entre el párrafo y el siguiente item */
}

.custom-checkbox input {
    /* Mantén tus estilos existentes */
    position: relative;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 2px;
    color: #fff;
    background: #fff;
    -webkit-appearance: none;
    margin-left: auto; /* Empuja el checkbox lo más a la derecha posible dentro del flex container */
}

.custom-checkbox input:checked:after {
    /* Mantén tus estilos existentes */
    font-family: "Font Awesome 6 Free";
    content: "\f00c";
    font-size: 12px;
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 20;
    font-weight: 900;
	color: #8f8aff;
}
/* LOADING CON BARRA */
/* Estilos para el overlay oscuro */
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(143, 138, 255, 0.9); /* #8f8aff un poco más opaco */
	z-index: 9999;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.loading-spinner {
	width: 300px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 95%;
	padding: 40px 60px; /* Aumenté el padding para destacar el contenido */
	border-radius: 12px; /* Bordes más redondeados para suavidad */
	background-color: rgba(245, 245, 245, 0.8); /* Blanco humo (casi blanco con ligera transparencia) */
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}

#loading-message {
	color: #333;
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: 0.03em;
	padding: 15px 0;
}

/* Estilos para la barra de carga */
.loading-bar {
  width: 100%;
  height: 12px; /* Barra un poco más gruesa */
  background-color: rgba(220, 220, 220, 0.8); /* Fondo de la barra gris claro */
  border-radius: 6px;
  overflow: hidden; /* Limita la visibilidad de lo que está dentro */
  position: relative; /* Necesario para posicionar el progreso */
}

.loading-progress {
  width: 0%;
  height: 100%;
  background-color: #8f8aff; /* Tu color base como acento */
  border-radius: 6px;
  position: absolute; /* Para que esté encima del background del bar */
  top: 0;
  left: 0;
  overflow: hidden; /* Asegura que el "brillo" no se salga de su ancho */
	transition: width 0.3s ease-in-out;
}

.loading-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%; /* Inicia el "brillo" un poco antes del inicio */
  height: 100%;
  width: 30%; /* Ancho del "brillo" */
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: progress-shimmer 1.5s linear infinite;
}

@keyframes progress-shimmer {
  100% {
    left: 100%; /* Termina el "brillo" al final del progreso */
  }
}

/* Opcional: Estilos para la imagen del logo */
.loading-spinner img {
	width: 100px;
	height: auto;
}

.main-search-input-tabs li {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    margin-right: 10px;
    transition: background-color 0.3s ease-in-out;
}

.main-search-input-tabs li.current {
    background-color: rgba(255, 255, 255, 1); /* Blanco completamente opaco */
}
.main-search-input-tabs li:not(.current) a{
	color: #333 !important;
}

.main-search-input-tabs li a img { /* Ajusta el selector según tu necesidad */
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

.main-search-input-tabs li a { /* Ajusta el selector según tu necesidad */
	display: inline-block;
	line-height: 1.5em;
}

@media (max-width: 520px) {
	/*.main-search-input-tabs li {
		background-color: transparent;
		border-radius: 0;
		margin-right: 0;
	}

	.main-search-input-tabs li.current {
		background-color: transparent;
	}
	.main-search-input-tabs li:not(.current) a{
		color: #FFF !important;
	}*/

	.main-search-input-tabs li a img { /* Ajusta el selector según tu necesidad */
		display: none;
	}

	.main-search-input-tabs li a { /* Ajusta el selector según tu necesidad */
		display: inline-block;
		line-height: 1.5em;
	}
}


.dropzone {
  border: 2px dashed #ccc !important;
  border-radius: 5px;
  background-color: #f8f8f8;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 150px;
}

.dropzone:hover {
  border-color: #007bff;
  background-color: #e9ecef;
}

.dropzone.dz-drag-hover {
  border-color: #28a745;
  background-color: #d4edda;
}

.dropzone-icon {
  font-size: 3em;
  color: #777;
  margin-bottom: 10px;
  pointer-events: none; /* Evita que el icono capture el clic */
}

.dropzone-message {
  color: #555;
  font-size: 1.1em;
  pointer-events: none; /* Evita que el texto capture el clic */
}

.dz-default.dz-message {
  display: none;
}

.dropzone-previews .dz-preview .dz-upload {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #007bff; /* Color de la barra de carga */
	width: 0%;
	height: 4px; /* Altura de la barra de carga */
	border-radius: 2px;
	z-index: 10; /* Asegura que esté por encima de la imagen */
	opacity: 1;
	transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

/* Estilos opcionales para la previsualización (sin cambios) */
.dropzone-previews .dz-preview {
	display: inline-block;
	margin: 10px;
	border: 1px solid #ddd;
	padding: 5px;
	border-radius: 3px;
	background-color: white;
}

.dropzone-previews .dz-image {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border-radius: 3px;
}

.dropzone-previews .dz-image img {
	width: 100%;
	height: auto;
	display: block;
}

.dropzone-previews .dz-details {
	text-align: center;
	font-size: 0.8em;
	padding: 5px;
}

.dropzone-previews .dz-error-message {
	color: #dc3545;
	font-size: 0.9em;
	margin-top: 5px;
}

.dropzone-constraints {
	font-size: 0.8em;
	color: #777;
	margin-top: 5px;
}

.wizard-box .tab-pane{
	background-color: #FFF;
	padding: 18px 24px;
}

.wizard-box{
	background-color: #FFF;
}

.sw .toolbar{
	background-color: #FFF;
}

.terms-and-conditions-modern {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    font-size: 0.95em;
    color: #555;
    line-height: 1.6;
    text-align: left;
}

.checkbox-container-custom {
    display: flex;
    justify-content: center; /* Centrar el contenedor si es necesario */
    width: 100%; /* O el ancho que necesites */
}

.custom-checkbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-checkbox-item {
    display: flex; /* Para alinear input y label */
    align-items: center;
    margin-bottom: 15px; /* Espacio entre los items */
    justify-content: flex-end; /* Alinea el input a la derecha */
}

.custom-checkbox-item input {
    float: none; /* Asegurarse de que no flote */
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 0;
    width: 20px; /* Tamaño del checkbox */
    height: 20px; /* Tamaño del checkbox */
    position: relative;
    border-radius: 2px;
    color: #fff;
    background: #fff;
    -webkit-appearance: none;
    margin-left: 10px; /* Espacio entre label e input */
}

.custom-checkbox-item input:checked:after {
    font-family: var(--fa-style-family,"Font Awesome 6 Free");
    content: "\f00c";
    font-size: 12px;
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 20;
    font-weight: 900;
}

.custom-checkbox-item label {
    float: none; /* Asegurarse de que no flote */
    padding: 0 10px 0 0; /* Espacio a la izquierda del texto */
    position: relative;
    top: auto;
    color: #888DA0;
    font-weight: 600;
    width: auto;
    font-size: 11px; /* Tamaño de la letra */
    text-align: right; /* Alinear el texto a la derecha */
}
.filter-tags input:checked:after, .custom-form  .filter-tags input:checked:after {
    font-family: "Font Awesome 6 Free"; /* Reemplaza la variable */
    content: "\f00c";
    font-size: 12px;
    position: absolute;
    top: 2px;
    left: 3px;
    z-index: 20;
    font-weight: 900;
}





.dashboard-title-custom{
	margin-bottom: 30px;
}
.dashboard-title-custom h3{
    text-align: left;
    font-weight: 600;
    font-size: 21px;
    color: #566985;
}

.wizard-secuidador {
    padding: 30px;
    background-color: #f8f9fa; /* Un gris claro de fondo */
    border-radius: 8px; /* Bordes redondeados suaves */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sutil sombra para elevación */
    margin-bottom: 20px; /* Espacio inferior si hay más contenido abajo */
}

.wizard-secuidador h2 {
    color: #343a40; /* Título más oscuro */
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}


.wizard-secuidador .dropzone {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    border: 2px dashed #ced4da; /* Línea punteada para indicar área de arrastre */
    border-radius: 6px;
    background-color: #fff; /* Fondo blanco para el área de arrastre */
    color: #6c757d;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.wizard-secuidador .dropzone:hover {
    border-color: #007bff;
    background-color: #e9ecef;
}

.wizard-secuidador .dropzone-icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.wizard-secuidador .dropzone-message {
    font-size: 1rem;
    text-align: center; /* Centrar el mensaje si ocupa varias líneas */
}

.wizard-secuidador .dropzone-constraints {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 5px;
    text-align: center;
}
.wizard-secuidador .dropzone.uploaded {
    background-color: #d4edda; /* Fondo verde claro */
    border-color: #c3e6cb;
    color: #155724; /* Texto verde oscuro */
    cursor: default; /* Cambiar el cursor para indicar que no es interactivo */
}


.wizard-secuidador .dropzone.uploaded .dropzone-message {
    color: #155724;
    font-weight: bold; /* Hacer el mensaje más visible */
    font-style: italic; /* Darle un toque adicional */
}

.wizard-secuidador .dropzone-constraints.uploaded-message {
    display: block !important; /* Asegurar que el mensaje se muestre */
    font-weight: bold;
    margin-top: 10px; /* Espacio del dropzone */
    text-align: center;
}

.wizard-secuidador .dropzone-constraints:not(.uploaded-message) {
    display: block; /* Asegurar que el mensaje de las restricciones se muestre cuando no está subido */
}

.wizard-secuidador .dropzone.uploaded:hover {
    background-color: #d4edda; /* Mantener el color al pasar el ratón */
    border-color: #c3e6cb;
}

.wizard-secuidador .pb-3 {
    padding-bottom: 1.5rem !important;
}

.wizard-secuidador .pl-0 {
    padding-left: 0 !important;
}

.wizard-secuidador .pr-2 {
    padding-right: 0.5rem !important;
}

.wizard-secuidador .pl-2 {
    padding-left: 0.5rem !important;
}

.wizard-secuidador .pr-0 {
    padding-right: 0 !important;
}

.wizard-secuidador .red-bg_color {
    color: #fff;
    background-color: #dc3545; /* Un rojo llamativo */
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.wizard-secuidador .red-bg_color:hover {
    background-color: #c82333;
}

.wizard-secuidador .btn {
    cursor: pointer;
}



/*flatpickr*/
.flatpickr-time-of-day {
	padding: 8px;
	text-align: center;
}

.flatpickr-time-of-day-select {
	width: 100%;
	padding: 8px;
	margin-top: 8px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
}


.nice-select {
	max-width: 100%
}
.nice-select:not(.has-multiple) .current {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
}

.listsearch-input-item-bold .current, .listsearch-input-item-bold input, .listsearch-input-item-bold .multiple-options{
	font-weight: bold;
}



/* busqueda flotatnte como airbnb */
.floating-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e0e0e0;
}

.floating-option:last-child {
    border-bottom: none;
}

.floating-details {
	padding-right: 15px;
    flex-grow: 1;
}

.floating-type {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.floating-minidetail {
    font-size: 14px;
    color: #777;
    margin-top: 4px;
}

.floating-age a {
    color: #1a73e8;
    text-decoration: none;
}

.floating-age a:hover {
    text-decoration: underline;
}

.floating-counter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.floating-counter button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #c4c4c4;
    background-color: #fff;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, border-color 0.2s;
}

.floating-counter button:hover:not(:disabled) {
    border-color: #888;
}

.floating-counter button:active:not(:disabled) {
    background-color: #f0f0f0;
}

.floating-counter button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background-color: #f7f7f7;
}

.floating-counter .count {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    min-width: 20px;
    text-align: center;
}

/* Estilos para el selector de servicios */
.service-selector {
    display: flex;
    flex-direction: column; /* Apila las opciones verticalmente */
    gap: 8px; /* Espacio entre las opciones */
    padding: 10px; /* Padding interno del selector */
    /* Asegúrate de que este padding se sume al padding del floating-window si no lo quieres doble */
}

.service-selector .service-option {
    align-items: center;
    padding: 14px 18px; /* Padding para cada opción, hazlo más grande para un "aspecto grande" */
    background-color: #f7f7f7; /* Fondo suave por defecto */
    border-radius: 12px; /* Bordes redondeados */
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e0e0e0; /* Borde suave */
}

 .service-selector .service-option:hover,  .service-selector .service-option.active {
    background-color: #e8f0fe; /* Fondo al pasar el ratón */
    border-color: #a8d0f8; /* Borde al pasar el ratón */
    transform: translateY(-2px); /* Pequeño levantamiento */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra sutil al levantar */
}

.service-selector .service-option.selected {
    
    background-color: #e0f2fe; /* Fondo cuando está seleccionado */
    border-color: #2196f3; /* Borde más pronunciado cuando está seleccionado */
    box-shadow: 0 2px 10px rgba(33, 150, 243, 0.2); /* Sombra de selección */
    transform: none; /* Asegura que no se "levante" más si ya está seleccionado */
}

.service-selector .service-option.selected .icon-placeholder {
    color: #2196f3; /* Color del icono al seleccionar */
}

.service-selector .icon-placeholder {
    font-size: 28px;
    margin-right: 15px;
    line-height: 1;
    color: #888;
    transition: color 0.2s ease;
}

.service-selector .service-name {
    font-size: 14px;
    font-weight: 600;
    color: #697891;
}



.onlycoupon td {
    color: #d9534f; /* rojo suave tipo bootstrap danger */
    font-weight: 500;
}

.onlycoupon td:first-child {
    font-weight: bold;
}

.discountCoupon {
    text-align: left;
}

.onlycoupon {
    background-color: #fff5f5; /* fondo muy suave para diferenciar */
}


.whatsapp-button {
	position: fixed;
    right: 42px;
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
    z-index: 9999;
    bottom: 20px;
    background-color: #25D366;
    border-radius: 50%;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    opacity: 1;
}
@media (max-width: 720px){
  .whatsapp-button{
    opacity: .5;
    right: 2px;
  }
}


.whatsapp-button img {
    width: 40px;
    height: 40px;
    display: block; /* Eliminar espacio extra debajo de la imagen */
}
.whatsapp-button:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el mouse */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada */
}





.wizard-modal {
    position: fixed; /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Para centrar el contenido */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    z-index: 1000; /* Asegura que esté por encima de todo */
    visibility: hidden; /* Oculto por defecto */
    opacity: 0; /* Transición de opacidad */
    transition: visibility 0.3s ease, opacity 0.3s ease; /* Transición suave */
    /* Para prevenir el scroll del fondo cuando el modal esté abierto */
    overflow: hidden;
}

/* Estado activo del modal (cuando está visible) */
.wizard-modal.is-active {
    visibility: visible;
    opacity: 1;
}

/* Overlay (fondo oscuro semi-transparente) */
.wizard-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Color oscuro semi-transparente */
    backdrop-filter: blur(5px); /* Efecto de desenfoque moderno */
    transition: opacity 0.3s ease;
}

/* Contenido del modal */
.wizard-modal-content {
    position: relative; /* Para el z-index y el botón de cerrar */
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Esquinas redondeadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* Sombra más pronunciada para un look moderno */
    max-width: 800px; /* Ancho máximo para pantallas grandes */
    width: 90%; /* Ancho responsivo */
    max-height: 90%; /* Altura máxima */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Asegura que el contenido interno no se desborde */
    transform: translateY(20px); /* Para la animación de entrada */
    opacity: 0; /* Para la animación de entrada */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* Animación de entrada del contenido del modal */
.wizard-modal.is-active .wizard-modal-content {
    transform: translateY(0);
    opacity: 1;
}

/* Header del modal */
.wizard-modal-header {
    padding: 20px 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9f9f9; /* Ligeramente gris para el header */
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.wizard-modal-header h2 {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
    font-weight: 600;
}

/* Botón de cerrar (X) */
.wizard-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #888;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex; /* Para centrar el icono */
    align-items: center;
    justify-content: center;
}

.wizard-modal-close-btn:hover {
    color: #555;
    transform: rotate(90deg); /* Pequeña animación al pasar el ratón */
}

/* Cuerpo del modal */
.wizard-modal-body {
    padding: 30px;
    flex-grow: 1; /* Permite que el cuerpo ocupe el espacio disponible */
    overflow-y: auto; /* Habilita el scroll si el contenido es largo */
    color: #555;
    line-height: 1.6;
}

/* Footer del modal */
.wizard-modal-footer {
    padding: 20px 30px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end; /* Alinea los botones a la derecha */
    background-color: #f9f9f9; /* Mismo fondo que el header */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Estilos básicos para los botones */
.wizard-modal .btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px; /* Bordes redondeados */
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wizard-modal .btn-secondary {
    background-color: #e0e0e0;
    color: #555;
}

.wizard-modal .btn-secondary:hover {
    background-color: #d0d0d0;
}

.wizard-modal .btn-primary {
    background-color: #007bff; /* Color azul, puedes usar tu color de marca */
    color: #fff;
    margin-left: 10px; /* Separación del botón Anterior */
}

.wizard-modal .btn-primary:hover {
    background-color: #0056b3;
}

.wizard-modal .btn-success {
    background-color: #28a745; /* Color verde para "Reservar" */
    color: #fff;
    margin-left: 10px;
}

.wizard-modal .btn-success:hover {
    background-color: #218838;
}


/* Nuevas reglas CSS para los pasos del wizard */

/* Oculta todos los pasos por defecto */
.wizard-step {
    display: none;
    opacity: 0;
    transform: translateX(20px); /* Para la animación de deslizamiento */
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Muestra el paso activo */
.wizard-step.active-step {
    display: block; /* O flex si el contenido lo requiere */
    opacity: 1;
    transform: translateX(0);
}

/* Estilos básicos para grupos de formulario (si no los tienes) */
.wizard-modal .form-group {
    margin-bottom: 20px;
}

.wizard-modal .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444;
}

.wizard-modal .form-control {
    width: calc(100% - 20px); /* Ajuste para padding */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wizard-modal .form-control:focus {
    border-color: #66afe9; /* Color al enfocar */
    outline: none;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

.wizard-modal textarea.form-control {
    resize: vertical; /* Permite redimensionar verticalmente */
    min-height: 80px;
}

/* Estilos para el texto informativo de la nueva mascota */
.new-pet-info-text {
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
    border-left: 3px solid #007bff;
    padding-left: 10px;
    background-color: #eaf6ff;
    padding: 10px;
    border-radius: 5px;
}

/* Estilos para campos readonly/disabled (opcional) */
.wizard-modal .form-control[readonly],
.wizard-modal .form-control[disabled] {
    background-color: #e9ecef;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .wizard-modal-content {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
        border-radius: 0; /* En móviles a menudo se prefiere sin bordes redondeados */
    }
    .wizard-modal-header,
    .wizard-modal-body,
    .wizard-modal-footer {
        padding: 15px 20px; /* Menos padding en pantallas pequeñas */
    }
    .wizard-modal-header h2 {
        font-size: 1.5rem;
    }
    .wizard-modal-close-btn {
        font-size: 1.5rem;
    }
}


.wizard-modal .btn-outline-dark {
    background-color: transparent;
    color: #6c757d; /* Color del texto y borde */
    border: 1px solid #6c757d; /* Borde del mismo color */
}
.wizard-modal .btn-outline-dark:hover {
    background-color: #6c757d;
    color: #fff;
}

.wizard-modal .terms-checkbox-group {
    margin-top: 30px;
}

/* Oculta el checkbox nativo */
.wizard-modal .custom-checkbox {
    /* position: absolute; */ /* Puedes usar position absolute si necesitas más control */
    /* opacity: 0; */ /* Oculta completamente */
    /* width: 0; */
    /* height: 0; */
    /* overflow: hidden; */
    /* pointer-events: none; */ /* Evita que el ratón interactúe */
    display: none; /* La forma más sencilla de ocultarlo para este caso */
}

/* Estilos para la etiqueta (el contenedor visual del checkbox) */
.wizard-modal .custom-checkbox-label {
    display: inline-flex; /* Permite alinear el icono y el texto */
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    color: #555;
    user-select: none; /* Evita que el texto sea seleccionado al hacer clic */
    line-height: 1.4; /* Espaciado entre líneas para legibilidad */
}

/* Estilos para los iconos de Font Awesome */
.wizard-modal .custom-checkbox-label .checkbox-icon-unchecked,
.wizard-modal .custom-checkbox-label .checkbox-icon-checked {
    font-size: 1.5rem; /* Tamaño del icono */
    margin-right: 10px; /* Espacio entre el icono y el texto */
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Icono de checkbox sin marcar (visible por defecto) */
.wizard-modal .custom-checkbox-label .checkbox-icon-unchecked {
    color: #999; /* Color gris para el icono sin marcar */
}

/* Icono de checkbox marcado (oculto por defecto) */
.wizard-modal .custom-checkbox-label .checkbox-icon-checked {
    color: #28a745; /* Color verde para el icono marcado */
    display: none; /* Oculto inicialmente */
    transform: scale(0.8); /* Para una pequeña animación al aparecer */
}

/* Cuando el checkbox está marcado: */
.wizard-modal .custom-checkbox:checked + .custom-checkbox-label .checkbox-icon-unchecked {
    display: none; /* Oculta el icono sin marcar */
}

.wizard-modal .custom-checkbox:checked + .custom-checkbox-label .checkbox-icon-checked {
    display: inline-block; /* Muestra el icono marcado */
    transform: scale(1); /* Vuelve al tamaño normal con animación */
}

/* Estilos para el enlace de Términos y Condiciones */
.wizard-modal .terms-link {
    color: #007bff; /* Color azul, como tus botones primarios */
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
}

.wizard-modal .terms-link:hover {
    text-decoration: underline;
    color: #0056b3;
}