:root{
  /* ESTILOS DE LOS COLORES */
  --verde-principal: #13BA41 ;
  --verde-light: #5FE07E ;
  --verde-dark: #079128 ;
  --verde-contenedor-dark: #006633 ;
  --verde-contenedor-light: #D7FFDF ;

  --naranja-principal: #F9A028 ;
  --naranja-light: #FFC37B ;
  --naranja-dark: #D67B0F ;
  --naranja-contenedor-dark: #AD680A ;
  --naranja-contenedor-light: #FFDFB8 ;

  --violeta-principal: #760FF9 ;
  --violeta-light: #A166FF ;
  --violeta-ultra-light: #f2eaff ;
  --violeta-dark: #5713AC ;
  --violeta-contenedor-dark: #3A0C82 ;
  --violeta-contenedor-light: #E2CFFF ;

  --gris-oscuro: #333333;
  --gris-claro: #F4F4F4;
  --gris-form: #AFB1B6;

  --negro: #0D0D0D;
  /* ----------------------------------------------------*/

  /* ESTILOS DE LOS TEXTOS */
  --H-1: 3.5rem;
  --H-2: 24px;
  --p: 16px;
  --p-small: 14px;
  --botones-chicos: 11px;
  --p-aclaraciones: 12px;
  /* ----------------------------------------------------*/

}

body {
  font-family: 'Montserrat', sans-serif;
}

::selection {
  /*background-color: #f2eaff;*/
  background-color: var(--naranja-principal);
}
.color-naranja{
  color: var(--naranja-principal);
}
.h-100px {
  height: 100px;
}

.w-100{
  width: 100%;
}

.w-75{
  width: 75%;
}

h2.titulo{
  font-size: var(--H-2);
}

.p-small{
  font-size: var(--p-small)
}
.bg-verde-principal{
  background-color: var(--verde-principal) !important;
}

.bg-rojo {
  background-color: #933838;
}

.btn-rojo-hover:hover {
  background-color: #7d2d2d;
}

.bg-violeta-principal{
  background-color: var(--violeta-principal);
}

.bg-violeta-dark{
  background-color: var(--violeta-dark);
}

a.bg-verde-principal:hover {
  background-color: var(--verde-dark);
}

.btn-verde-hover:hover {
  background-color: var(--verde-dark)!important;
}

.btn-naranja-hover:hover {
  background-color: var(--naranja-dark);
}

a.bg-violeta-principal:hover, button.bg-violeta-principal:hover {
  background-color: var(--violeta-dark);
}

.bg-violeta-ultra-light {
  background-color: var(--violeta-ultra-light);
}

.btn-violeta-active:active, .btn-violeta-active:focus, .btn-violeta-active:focus-visible {
  background-color: var(--violeta-light)!important;
}

.bg-naranja-principal{
  background-color: var(--naranja-principal);
}

.bg-naranja-dark{
  background-color: var(--naranja-dark);
}

.bg-gris-form{
  background-color: var(--gris-form) !important;
}

.bg-gris-claro{
  background-color: var(--gris-claro) !important;
}

.bg-blanco{
  background-color: #fff;
}

.redondeo-superior-login{
  border-top-left-radius: 29px !important;
  border-top-right-radius: 29px !important;
}

.bg-conf-icono{
  background-repeat: no-repeat;
  background-size: 23px;
  background-position-y: 9px;
  background-position-x: 15px;
}

.bg-movimiento{
  width: 32px;
  background-image: url('../img/enfasis.png');
  background-repeat: no-repeat;
  background-size: 30px;
  background-position-y: 9px;
}

.bg-location-w{
  width: 32px;
  background-image: url('../img/location.png');
}

.bg-acompaniante{
  background-image: url('../img/acompaniante.png');
}

.bg-andador{
  background-image: url('../img/andador.png');
}

.bg-camina_dificultad{
  background-image: url('../img/camina_dificultad.png');
}

.bg-bastones{
  background-image: url('../img/bastones.png');
}

.bg-muletas{
  background-image: url('../img/muletas.png');
}

.bg-scooter{
  background-image: url('../img/scooter.png');
  background-size: 30px !important;
}

.bg-silla_ruedas_electrica{
  background-image: url('../img/silla_ruedas_electrica.png');
}

.bg-silla_ruedas_manual{
  background-image: url('../img/silla_ruedas_manual.png');
  background-position-y: 12px !important;
}

.bg-login {
  background-image: url('../img/bg-login.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
  margin-top: -1080px;
  z-index: -1;
}

.bg-white-vertical {
  background-color: #fff;
}

.strong-without-style{
  font-weight: 400;
}

.btn-form-w{
  width: 135px;
  height: 52px;
  text-align: right;
  font-size: var(--botones-chicos);
  display: flex;
  align-items: center;
  justify-content: end;
  /* border: none !important; */
}

.btn-form-w-center{
  width: 135px;
  height: 52px;
  text-align: right;
  font-size: var(--botones-chicos);
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: none !important; */
}


.p-btn-chicos {
  font-size: var(--p-small);
}

.btn-check:checked+.btn{
  background-color: var(--violeta-contenedor-light) !important;
}


/* CHECKBOX*/
.form-check-input:checked{
  background-color: var(--naranja-principal);
  border-color: var(--naranja-light);
}

/* INPUT FOCUS*/
.form-check-input:focus, .form-control:focus, .form-select:focus {
  border-color: var(--naranja-light);
  box-shadow: 0 0 0 0.25rem rgba(255,195,123,.25);
}


.w-standard{
  width: 150px;
}

.buscador-principal{
  height: 52px;
}

/* NAVBAR SUPERIOR*/

.margin-navs {
  margin-top: 90px;
  margin-bottom: 90px;
}
.nav-superior{
  width: 100%;
  height: 63px;
}

.navbar-toggler:focus, .navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
}

.footer-nav nav{
  z-index: 10000;
  width: 100%;
  height: 63px;
  background-color: var(--gris-claro);
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-nav nav{
  display: flex;
  width: 100%;
}

.footer-nav nav a {
  position: relative;
  list-style: none;
  width: 70px;
  height: 60px;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.footer-nav nav a .icon{
  position: relative;
  display: block;
  line-height: 65px;
  font-size: 1.5rem;
  text-align: center;
  color: var(--gris-oscuro);
}

.footer-nav nav a .text{
  display: none;
  position: absolute;
  color: #fff;
  padding: 2px 7px;
  border-radius: 12px;
  font-weight: 400;
  font-size: 0.75em;
  letter-spacing: 0.005em;
}

/* NAVBAR LANDING*/

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/****/

.p-links {
  color: var(--violeta-contenedor-dark) !important;
  text-decoration: underline !important;
  font-weight: 500;
}

.link-offcanvas {
  position: relative;
  color: #fff;
  text-decoration: none;
}

.link-offcanvas::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--naranja-principal);
  transform: scaleX(0);
  transform-origin: left; /* Cambia el punto de origen de la transformación */
  transition: transform 0.3s ease;
}

.link-offcanvas-hover:hover::before {
  color: var(--violeta-dark) !important;
  transform: scaleX(1);
  transform-origin: right; /* Cambia el punto de origen de la transformación al lado derecho */
}

ion-icon.icon-hover:hover {
  color: var(--naranja-principal) !important;
}

.shadow-top {
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
}

.acerca-de-mi li {
  list-style: none;
}

.acerca-de-mi-descript{
  margin-top: 11px;
  margin-bottom: 0px;
}

.bg-bastones {
  height: 42px;
  background-image: url(../img/bastones.png);
  background-repeat: no-repeat;


}

.bg-muletas {
  height: 42px;
  background-image: url(../img/muletas.png);
  background-repeat: no-repeat;


}

.bg-andador {
  height: 42px;
  background-image: url(../img/andador.png);
  background-repeat: no-repeat;


}

.bg-dificultad {
  height: 42px;
  background-image: url(../img/camina_dificultad.png);
  background-repeat: no-repeat;


}

.bg-silla-maual {
  height: 42px;
  background-image: url(../img/silla_ruedas_manual.png);
  background-repeat: no-repeat;


}

.bg-silla-electrica {
  height: 42px;
  background-image: url(../img/silla_ruedas_electrica.png);
  background-repeat: no-repeat;


}

.bg-scooter {
  height: 42px;
  background-image: url(../img/scooter.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position-y: 5px;

}
input:-internal-autofill-selected {
    background-color: var(--naranja-principal) !important;
}

.footer-nav nav .new_place .text {
  color:#fff;
}

#gmp-map {
  height: 300px;
}

table {
  width: 100%;
}

.stablished-height {
  height: 130px;
}

.card {
  width: 300px; /* Ancho de la tarjeta */
  margin: auto; /* Centrar horizontalmente */
}

.underlined-hover50 {
  position: relative;
  text-decoration: none;
}

.underlined-hover50::after {
  content: '';
  position: absolute;
  right: 0; /* Inicia en la derecha */
  bottom: 0;
  width: 50%; /* Ocupa el 50% del ancho total */
  height: 2px;
  background-color: var(--naranja-principal); /* Color del subrayado */
  transform: translateX(100%) scaleX(0); /* Inicialmente no visible */
  transition: transform 0.3s ease; /* Transición suave */
}

.underlined-hover50:hover::after {
  transform: translateX(0) scaleX(1); /* Subrayado completo al hacer hover */
}

/* Agregando un retraso al subrayado */
.underlined-hover50:hover::after {
  transition-delay: 0.1s; /* Retraso de 0.1 segundos */
}

.underlined-hover100 {
  position: relative;
  text-decoration: none;
}

.underlined-hover100::after {
  content: '';
  position: absolute;
  right: 0; /* Inicia en la derecha */
  bottom: 0;
  width: 100%; /* Ocupa el 50% del ancho total */
  height: 2px;
  background-color: var(--naranja-principal); /* Color del subrayado */
  transform: translateX(100%) scaleX(0); /* Inicialmente no visible */
  transition: transform 0.3s ease; /* Transición suave */
}

.underlined-hover100:hover::after {
  transform: translateX(0) scaleX(1); /* Subrayado completo al hacer hover */
}

/* Agregando un retraso al subrayado */
.underlined-hover100:hover::after {
  transition-delay: 0.1s; /* Retraso de 0.1 segundos */
}

/* MEDIA QUERIES */

/* SCROLL HORIZONTAL EN ÚLTIMAS NOTICIAS (articuloCompleto.blade.php)*/
/*
.newsContainer{
  flex-direction: row;
  display: flex;
  overflow-x: scroll;
  padding: 24px;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-padding: 24px;
  border-radius: 8px;
  gap: 12px;
}
*/

/* Estilos para las imágenes redondas */
.rounded-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}
.mensaje-extracto{
  width: 300px; /* Ancho del contenedor */
}
.mensaje-extracto-contenedor{
  /* width: 300px; */
  overflow: hidden; /* Ocultar texto que exceda el ancho */
  white-space: nowrap; /* Impide que el texto se divida en varias líneas */
  text-overflow: ellipsis;
  font-size: 12px;
}

/* Estilos para los mensajes */
.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  max-width: 70%; /* Anchura máxima de los mensajes */
}
.sent-message {
  background-color: var(--verde-light);
  color: #000;
  margin-left: auto; /* Alinear mensajes enviados a la derecha */
}
.received-message {
  background-color: var(--violeta-ultra-light);
  color: #000;
}

/* Ajustar el margen izquierdo del contenedor principal */
.custom-container {

  height: calc(102vh - 82px - 63px); /* Establecemos altura del 100% de la ventana del navegador */
  /*overflow-y: auto;*/ /* Habilitamos el desplazamiento vertical si el contenido excede la altura */
}

.conversation{
  /* height: calc(86vh - 82px - 63px); */
  padding: 1rem;
  height: calc(80vh - 82px - 63px);
  overflow-y: auto;
  background-color: #f0f0f01c; /* Color de fondo */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* Estilo para el borde derecho */
.conversations-border {
  border-right: 1px solid #ccc; /* Borde derecho gris */
  height: 100%; /* Establecemos altura del 100% de la ventana del navegador */
  position: relative; /* Establecemos el posicionamiento relativo para el contenedor */
  overflow-y:auto
}

.selected-chat {
  background-color: #f0f0f01c; /* Color de fondo para el chat seleccionado */
  border-left: 5px solid var(--naranja-principal);
  padding-left: 1rem;/* Indicador visual para el chat seleccionado */
  transition: background-color 0.3s ease, padding-left 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}


/* Estilo para fijar el campo de entrada y el botón al fondo */

/* Paginación */
/* Estilos personalizados para la paginación */
.custom-pagination .page-link {
  background-color: #fff; /* Color de fondo */
  border: 1px solid #5813ac5d; /* Borde */
  color: #000; /* Color del texto */
}

/* Estilo para el enlace activo */
.custom-pagination .page-item.active .page-link {
  background-color: var(--violeta-dark); /* Color de fondo */
  color: #fff; /* Color del texto */
}

.custom-pagination .page-link:hover {
  background-color: #e9ecef; /* Color de fondo al pasar el ratón */
  color: var(--violeta-principal); /* Color del texto al pasar el ratón */
}

/* Estilo para botón deshabilitado*/
.custom-pagination .page-item.disabled .page-link {
  color: #6c757d; /* Color del texto */
  pointer-events: none; /* Deshabilitar eventos de puntero */
  background-color: rgb(235, 235, 235);
}

.bg-dark-opacity {
  background-color: rgba(0, 0, 0, 0.75); /* Color negro con 75% de opacidad */
}

.bg-trama {
  background-image: url('./../img/trama.png');
  background-repeat: repeat-x;
}

.p-t-b-80px {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 20px;
}

h2.titulo-h1-mb {
  font-size: 2rem;
}

.no_maring-right{
  margin-right: 0px !important;
}
/* BRILLO EN HOVER DE IMÁGENES*/
.image-hover-bright {
  transition: filter 0.3s ease;
}

.image-hover-bright:hover {
  filter: brightness(1.1);
}
/* END BRILLO EN HOVER DE IMÁGENES*/

/* ALTO FIJO EN REVIEWS */
.review-container {
  display: flex;
  flex-wrap: wrap;
}

.review-item {
  display: flex;
}

.review-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
/* END ALTO FIJO EN REVIEWS */

/* ALTO FIJO EN CARDS DE LUGARES */
/* Que todas las cards tengan el mismo alto */
.place-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.place-card .place-image-wrapper {
  flex: 1 0 auto;
  overflow: hidden;
  height: 0;
  padding-top: 100%; /* Mantener proporción cuadrada */
  position: relative;
}

.place-card .place-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-card .card-body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.place-card .place-name {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Número de líneas que queremos mostrar */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 3em; /* Aproximadamente la altura de dos líneas de texto */
}

/* END ALTO FIJO EN CARDS DE LUGARES */

.link-active {
  color: var(--naranja-principal) !important;
}

/* ESTILOS TABS*/

.nav-tabs .nav-link {
  color: #000!important; /* Cambia este valor por el color que prefieras */
}

.nav-tabs .nav-link.active {
  color: #5713AC!important;
  font-weight: 500; /* Cambia este valor por el color que prefieras */
}

/* FIN ESTILOS TABS */

/*************** MEDIA QUERIES ****************/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
  h2.titulo-h1{
    font-size: var(--H-1);
  }

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
  .bg-home {
    background-image: url('./../img/bg-home.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .p-100px {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 80px;
    padding-right: 50px;
  }

  .p-t-b-200px {
    padding-top: 200px;
    padding-bottom: 200px;
  }
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
  .stablished-height {
    height: 150px;
  }
}