:root {
 /* Escala base responsiva */
 font-size: clamp(12px, 1.5vw, 16px);
 /* Tamaños escalables */
 --dunamis-font-size-xs: 0.625rem;
 /* 10px */
 --dunamis-font-size-sm: 0.75rem;
 /* 12px */
 --dunamis-font-size-base: 1rem;
 /* 16px */
 --dunamis-font-size-lg: 1.25rem;
 /* 20px */
 --dunamis-font-size-xl: 1.5rem;
 /* 24px */
 --dunamis-font-size-xxl: 2rem;
 /* 32px */
 --dunamis-primary-color: #6fb0ab;
 --dunamis-primary-color2: #A4D3CF;
 --dunamis-secondary-color: #edb202;
 --dunamis-color-bg: #4C8D8C;
 --dunamis--bg-navbar: #E9ECEF;
 --dunamis--bg-sliderBar: #E9ECEF;
 --dunamis-color-hover: #3b6f6e;
 --dunamis-color-focus: #edb202;
 --dunamis-color-text-bg: #ffffff;
 --dunamis-color-text: #333;
 --dunamis-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 --dunamis-bg-readonly: #FCEBEB;
 
 --heading-color: #02112a;
 --border-radius: 10px;
 --border-radius-full: 35px;
 --border-color: #ddd;
 --border-color-light: #ddd;
 --nav-color: #02112a;
 --dropdown-color: #fff;
 --iframe-filter: grayscale(0%);
 --bg-light: #f5f6f9;
 --layer: rgb(0 0 0 /30%);
 --layer-1: rgb(0 0 0 / 75%);
 --bg-grey: #f5f6f9;
 --footer-bg: #010208;
 --card-bg: #fff;
 --photoboxPlaceholderRatio: 66.56%;
 --photoboxOverlayBackgroundColor: rgb(11 61 145 / 70%);

}

.ds-text1-logo {
 color: var(--dunamis-color-hover);
}

.ds-text2-logo {
 color: var(--dunamis-color-focus);
}

/* Estilos para el asterisco */
.required-asterisk {
 color: var(--dunamis-color-hover);
 /* Rojo */
 font-weight: bold;
 margin-left: 5px;
}

/* Texto del navbar */
.navbar a,
.navbar button {
 color: var(--dunamis-color-bg) !important;
}

.app-header {
 border-bottom: none;
 /*1px solid var(--bs-border-color); */
}

/* diseño del siderbar, menu lateral */
.menuLateral {
 background-color: var(--dunamis--bg-sliderBar) !important;
}

/* Diseño de los ítems del sidebar (menú lateral) */
.nav-item.menu-lateral {
 display: flex;
 /* Diseño flexbox para alinear elementos */
 justify-content: space-between;
 /*Separar los elementos al máximo */
 align-items: center;
 /*Centrar verticalmente */
}

.nav-item.menu-lateral a {
 text-decoration: none;
 /* Eliminar subrayado de los enlaces */
 /*color: #333;  Color del texto */
 color: var(--dunamis-color-text) !important;
 font-size: 14px;
 /* Tamaño de la fuente */
 display: flex;
 /* Alinear íconos y texto */
 align-items: center;
 /* Centrar íconos verticalmente */
}

.nav-item.menu-lateral a:hover {
 color: var(--dunamis-color-textr)
   /*var(--dunamis-primary-color);  Cambiar color al pasar el cursor */
}

/* Estilos para el ícono */
.nav-item.menu-lateral .nav-icon {
 margin-right: 8px;
 /* Espacio entre ícono y texto */
}

.sidebar-menu .nav-link {
 color: #010208d2;
 /*var(--dunamis-color-text-bg) !important; color del texto*/
}

/* color del icono principal */
.icon-main {
 color: var(--dunamis-primary-color) !important;
}

/* color del texto */
.sidebar-wrapper .nav-treeview > .nav-item > .nav-link {
 color: #010208d2 !important;
 /* color: var(--lte-sidebar-submenu-color); */
}


.nav-item.menu-lateral .nav-link:first-child {
 flex-grow: 1;
 /* Ocupa todo el espacio disponible */
 white-space: nowrap;
 /* Evita que el texto se divida */
 overflow: hidden;
 /* Asegura que el texto largo no desborde */
 text-overflow: ellipsis;
 /* Agrega puntos suspensivos si el texto es muy largo */

}

/* Estilos para el estado activo y hover
 del ítem del menú lateral */
*/ .sidebar-wrapper .sidebar-menu>.nav-item>.nav-link:active,
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link:focus {
 color: #010208d2 !important;
 /* var(--lte-sidebar-color); */
}

/* Estilos para el estado activo y hover
 del ítem del menú lateral */
.sidebar-wrapper .sidebar-menu>.nav-item.menu-open>.nav-link,
.sidebar-wrapper .sidebar-menu>.nav-item:hover>.nav-link,
.sidebar-wrapper .sidebar-menu>.nav-item>.nav-link:focus {
 color: #010208d2 !important;
 /* var(--lte-sidebar-hover-color); */
 background-color: none !important;
 /* var(--lte-sidebar-hover-bg); */

}

/*
 ESTILO PARA EL BOTON NUEVO DEL MENU LATERAL
*/
.nav-item.menu-lateral .nav-link.btn-new:last-child {
 color: var(--dunamis-secondary-color) !important;
 /* Color del enlace "Registrar Cliente" */
 font-weight: bold;
 /* Resaltar visualmente */
 margin-left: 0px;
 /* Espaciado del primer enlace */
 padding-left: 0px;
 padding-right: 0px;
 margin-right: 0px;
 flex-shrink: 0;
 /* Evita que el botón se reduzca */
}

.nav-item.menu-lateral .nav-link.btn-new:last-child:hover {
 color: var(--dunamis-color-text);
 /* Color al pasar el cursor */
}


.dropdown-toggle::after {
  display: none !important;
}

ul, ol{
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.top-bar {
  font-size: 14px;
 /* background-color: Fondo tomado de dataBase en el template.php */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030; /* Asegura que esté por encima del contenido */
  font-size: 14px;  
  /* color: color tomado de dataBase en el template.php */
}

.top-bar .contact-info i,
.top-bar .social-links a {
  color: #ffffff; /* Color de iconos */
}

.top-bar .social-links a:hover {
  color: #f1c40f; /* Efecto hover */
}


a:link, a:visited,  a:hover, a:active{
    text-decoration: none !important;
    color: inherit !important;
}

.main-footer{
  border-top: 0 !important;
}

.text-facebook{

  color: #3b5999;
}

.text-instagram{

  color: #e4405f;
}

.text-twitter{

  color: #55acee;
}

.text-linkedin{

  color: #0077B5;
}

.text-youtube{

  color: #dd4b39;
}

.text-twitch{

  color: #A142F7;
}

[class*=sidebar-dark-] .sidebar a {
    color: #c2c7d0 !important;
}

[class*=sidebar-dark] .brand-link, [class*=sidebar-dark] .brand-link .pushmenu {
    color: rgba(255,255,255,.8) !important;
}

.page-error{
  height: 50vh !important;
}

.page-item.active .page-link{

  color: #fff !important;
}

.facebook{
  color:white;
  background:#46639f;
}

.google{
  color:white;
  background:#d6513e;
}

 /* Estilos personalizados ideas chat */
.hero-section {
  background: url('https://source.unsplash.com/1600x900/?technology,software') no-repeat center center/cover;
  color: white;
  padding: 100px 0;
  text-align: center;
}
.hero-section h1 {
  font-size: 3rem;
  margin-bottom: 20px;
}
.cta-btn {
  padding: 10px 20px;
  font-size: 1.2rem;
  background-color: #ff5733;
  border: none;
  border-radius: 5px;
  color: white;
  text-transform: uppercase;
}
 /*.features-section {
  padding-top: 3rem;  o 50px si lo prefieres equivale a py-5
  padding-bottom: 3rem; o 50px si lo prefieres */
/*} */
.features-section h2, .testimonials-section h2, .cta-section h2 {
  text-align: center;
  margin-bottom: 30px;
}
.feature-icon {
  font-size: 2rem;
  margin-bottom: 20px;
}
.cta-section {
  background-color: #f8f9fa;
  text-align: center;
}
.cta-section .cta-btn {
  background-color: #007bff;
  font-size: 1.5rem;
}
footer {
  background-color: #343a40;
  color: white;
  padding: 30px 0;
  text-align: center;
}
.feature-image, .testimonials-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

p{
  text-align: justify !important;
}

.boton-empieza {
  background: linear-gradient(45deg, #ff6f61, #ff9966);
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  border: none;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.4s ease;
  box-shadow: 0 5px 5px rgb(237 178 2);
  position: relative;
  overflow: hidden;
}

.boton-empieza:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-45deg);
  transition: 0.7s ease;
}

.boton-empieza:hover:before {
  left: 100%;
}

.boton-empieza:hover {
  background: linear-gradient(45deg, #ff9966, #ff6f61);
  box-shadow: 0 5px 5px rgb(237 178 2);
}

.boton-empieza:active {
  transform: scale(0.98);
  box-shadow: 0 5px 5px rgb(237 178 2);
}

.separador-seccion {
  width: 100px;
  height: 4px;
  background-color: #ff6f61;
  margin: 40px auto;
}

.suggestion-list {
  display: none; /* Oculto por defecto */
  max-height: 200px !important; /* Limita el tamaño máximo */
  overflow-y: auto !important; /* Permite desplazamiento si excede el tamaño máximo */
  width: 100%;       /* Ajusta el ancho a la entrada */
  border: 1px solid #ddd; /* Opcional: agregar borde para mayor visibilidad */
  position: absolute !important; /* Para mantener las sugerencias alineadas con la caja de búsqueda */
  z-index: 1000 !important; /* Asegura que las sugerencias se muestren por encima de otros elementos */
}

.list-group-item {
  cursor: pointer !important;
}

.list-group-item:hover {
  background-color: #f1f1f1 !important;
}