@font-face {
    font-family: 'Ubuntu';
    src: url('../fonts/Ubuntu/Ubuntu-Light.woff2') format('woff2'),
         url('../fonts/Ubuntu/Ubuntu-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Verdana';
    src: url('../fonts/Verdana/Verdana.woff2') format('woff2'),
         url('../fonts/Verdana/Verdana.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
html{
  font-size:16px;
}
.responsive-table {
  text-align: center;
  overflow-x: auto; /* Permite el scroll horizontal en caso de desbordamiento */
}

table {
  width: 100%;
  border-collapse: collapse;
}
a {
  text-decoration: none;
}
label {
  font-family: 'Verdana';
  color: #eee;
  font-size: clamp(0.8rem, 0.5vw, 0.5rem);
}
b{
  color: #eee;
}
p{
  font-size: clamp(0.8rem, 2vw, 1rem);
}
h1{
  font-family: 'Verdana';
  color: #000;
  font-size: clamp(1rem, 2vw, 3rem);
}
h2 {
  font-family: 'Verdana';
  color: #AAAAAA;
  font-size: clamp(1rem, 2vw, 2rem);
}
h3 {
  font-family: 'Verdana';
  color: #eee;
  font-size: clamp(1rem, 2vw, 2rem);
}
h5 {
  font-family: 'Verdana';
  color: #eee;
  font-size: clamp(1rem, 1vw, 1rem);
}
.inputs{
  border: 2px solid #539bcd;
  border-radius: 5px;
  max-width: 60px;
  height: 30px;
  color: #000;
  
}
/* Placeholder para navegadores modernos (Chrome, Edge, Safari, Opera, Firefox) */
::placeholder {
  color: #404040; /* Un color gris oscuro */
  opacity: 1;  /* Asegura que el color no sea transparente */
}

/* Prefijos para compatibilidad con navegadores antiguos */
::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #404040;
}

::-moz-placeholder { /* Firefox 19+ */
  color: #404040;
  opacity: 1; /* Para corregir la opacidad por defecto de Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #404040;
}

:-moz-placeholder { /* Firefox 18- */
  color: #404040;
  opacity: 1;
}

body{
    font-family: 'Verdana';
    color: #AAAAAA ;
    /*width: 100%;*/
    /*text-align: center;*/
    background-image: url('/img/tienda.webp');
    background-size: 100% auto;
    background-attachment: fixed;
    /*Repite la imagen solo horizontalmente para el efecto de mosaico 
    background-repeat: repeat-x;
    */
}
.cuerpo {
text-align: center;
}
.tope { 
    color: #FFF;
    margin: 0px, 5px, 0px, 0px;
    justify-content: space-between;
    z-index: 1010;
    height: 24px;
    /*padding-left: 10px;
    padding-right: 10px;*/
    /*margin-left: 1%;
    margin-right: 2.3%;*/
}
.tope_1 {
  text-align: left;
}
.tope_2 {
  display:flex;
  justify-content: flex-end;
  position: relative; 
  top: -5px;
}
#user_log{
  font-size: 0.9rem;
  max-height: 40px;
  z-index: 1000;
  padding: 3px 7px 3px 7px;
  color: #fff;
  width: auto;
  top: 0px;
}
#cerrar{
  display: none;
}
#p_pagos{
  margin-top: 20px;
}
.top-head {
    font-family: 'Ubuntu';
    font-size: 60vw;
    color: #FFF;
}

.header-container {
    display: flex; /* Habilita el flexbox */
    align-items: center; /* Centra los elementos verticalmente */
    justify-content:center ; /* Distribuye el espacio entre los elementos */
    padding: 10px 0px; /* Añade un poco de espacio alrededor */
    margin-bottom: 0px;
}

.header-logo {
    max-width: 80px; /* Limita el tamaño del logo */
    margin-right: 2%;
    height: auto;
}

.header-title {
    margin: 0; /* Elimina el margen por defecto del h1 */
    text-align: right; /* Alinea el texto a la derecha */
    font-family: 'Ubuntu';
    font-size: 4vw;
    font-style:normal;
    color: #fff;
    text-align: center;
}

.content{
    background-color: rgba(0, 0, 0, 0.9);
    /*margin-left: 10px;
    margin-right: 10px;*/
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    height: auto;
}

.content-menu{
  width: 100%;
  display: flex; /* Esto hace que los elementos se coloquen en una fila */
  /* justify-content: right; Opcional: Centra el contenido horizontalmente */
  /*align-items: start;*/
  position: relative;
  overflow-x: auto; 
  border:none;
  /*margin-top: 10px;*/
  cursor: pointer;
}
.ventana{
  width: 33.33%;
  flex: 0 0 auto;
  margin-bottom: 30px;
}
.cubito{
justify-content:space-between;
padding: 3%;
}


.facebook { color: #1877F2; }
.instagram { color: #E4405F; }
.twitter { color: #000; }
.youtube { color: #FF0000; }
.pinterest { color: #E60023; }

.social-icon {
  height: auto;
  padding-right: 20px; 
  width: 50px;
}

/* STYLE CONTENEDOR IMAGENES */
#contenedorImagenes {
    position: relative;
    display: flex;
    overflow-x: auto; 
    border:none;
    margin-top: 10px;
}
.contenedor-imagen {
    flex: 0 0 auto;
    margin-right: 10px; 
}
.imagen-link {
    display: block;
    text-decoration: none !important;
}
.imagen-pie {
    position:relative;
    margin-top: 5px;
    font-size: 1rem;
    max-width: 100px;
    margin-bottom: 10px;
    color: #eee;
    font-family: 'Ubuntu';
    font-weight: bold;
}
.imagen-pie:hover {
    color:#E9456A;
}
.imagen-estilo {
    max-width: 102px;
    max-height: 102px;
    /*border: 1px solid #eee; */
    display: block;
}
.imagen-estilo:hover {
    border: 1px solid #E62B53;  
}
::-webkit-scrollbar {
    height: 17px;
}

::-webkit-scrollbar-thumb {
    background-color: #000;
    border-style: solid;
    border-width: 1px;
    border-color: #252525;
    border-radius: 5px;
}

.imgresp{
  max-width: 80px;
  width: 100%; 
  height: auto;
}
.img-venta{
  max-width: 200px;
  width: 100%; 
  height: auto; 
}
/* ------------------ Top y Formularios------------- */
#modal{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 255, 255, 0.9); 
 }

#modal_desc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.9);     /* Puedes mantener esto para centrar elementos dentro del formulario si lo necesitas */
/* margin: 0 auto; */   /* Ya no es necesario aquí */
 /* margin-left: auto;
  margin-right: auto; */
}
.modal_content{
  height: 200px;
  overflow-y: scroll; /* Añade una barra de desplazamiento vertical */
  border: 1px solid black;
}

 .form-login {
   display: block;        /* Puedes mantener esto para centrar elementos dentro del formulario si lo necesitas */
   flex-direction: column;
   align-items: center;   
   justify-content: center;
   padding: 2rem;
   border: 2px solid #539bcd;
   border-radius: 1rem;
   /* max-width: 35rem; */
   background-color: #000;
   /* margin: 0 auto; */   /* Ya no es necesario aquí */
   max-width: 500px;  /* Agrega esto para que ocupe todo el ancho */
   height: auto;
   margin-left: auto;
   margin-right: auto; /* Centra horizontalmente el elemento de bloque */
   border-radius: 5px;
 }

 .form-pasos {
  display: block;        /* Puedes mantener esto para centrar elementos dentro del formulario si lo necesitas */
  flex-direction: column;
  align-items: center;   
  justify-content: center;
  padding: 2rem;
  /* max-width: 35rem; */
  background-color: #000;
  /* margin: 0 auto; */   /* Ya no es necesario aquí */
  width: 100%;  /* Agrega esto para que ocupe todo el ancho */
  height: 100%; /* Centra horizontalmente el elemento de bloque */
}
 
 .text_title {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-size: clamp(0.9rem, 1vw, 0.5rem);
 }
 
 .text-form {
   background-color: #edfdfe;
   border: none;
   border-bottom: 1px solid #539bcd;
   font-size: clamp(1rem, 1vw, 1rem);
   color: #000;
   font-family: 'Roboto', sans-serif;
   margin-bottom: 0.5rem;
   width: 100%;
   border-radius: 3px;
   max-height: 30px;
   text-align: center;
 }
 .text-form:focus {
   outline: none;
   border-color: #772034;
 }
 .text-form::placeholder {
   color: #FFF;
   font-family: 'Roboto', sans-serif;
   font-size: 1.25rem;
 }

 .selet-form {
  background-color: #edfdfe;
  border: none;
  border-bottom: 1px solid #539bcd;
  font-size: clamp(1rem, 1vw, 1rem);
  color: #000;
  font-family: 'Roboto', sans-serif;
  /*margin-bottom: 0.1rem;*/
  width: 100%;
  border-radius: 3px;
  max-height: 22px;
  text-align: center;
}

 #login-div {
 display: none; 
 width: 100%; 
 position:fixed;
 z-index: 510;
 text-align: center;
 }

 #registro-div {
  display: none; 
  width: 100%; 
  position:fixed;
  z-index: 510;
  text-align: center;
  }
 
 .material-symbols-outlined {
   font-size: 1rem; 
   font-variation-settings:
   'FILL' 0,
   'wght' 100,
   'GRAD' 0,
   'opsz' 24
 }
 
 .contenedor-usr {
 position: absolute;
 z-index: 400;
 margin-top: -39px;
 width: 100%;
 /*border: 1px solid #ccc;  Solo para visualizar el contenedor */
 /* overflow: auto;  Para el clearfix */
 }
 
 .enlaces-derecha-usr {
 float: right;
 /*margin-right: 20%;*/
  display: flex; /* Convierte el contenedor en un contenedor flex */
  align-items: center; /* Alinea los elementos verticalmente al centro (si tienen diferentes alturas) */
  gap: 10px; 
 }
 
 .enlaces-derecha-usr a {
 font-family: 'Ubuntu';
 display: inline-block; /* Para que estén en línea */
 margin-left: 10px; /* Espacio entre los enlaces */
 text-decoration: none; /* Opcional: quitar subrayado */
 color: #fff;
 font-weight: bold;
 }
 
 .usuario-usr {
 /* Estilos opcionales para la div usuario */
 padding: 5px;
 }
 
 .buttontop {
 /*font-weight: bold;*/
 background-color: #E9456A;
 border:solid;
 border-width: 1px;
 border-color:#404040;
 border-radius: 5px;
 cursor: pointer; 
 /*box-shadow: 0px 0px 0px, #000;*/
 max-height: 40px;
 z-index: 1000;
 padding: 3px 7px 3px 7px;
 color: #eee;
 width: auto;
 top: 0px;
 font-size: 1rem;
 }

 .buttontop:hover {
  background-color: #000;
  color:#E62B53;
 }
/* SECCION DE COOKIES */
.button_info{
  background-color:#000;
  color:#aaaaaa;
  border-radius: 5px;
  cursor: pointer; 
  border:solid;
  border-width: 1px;
  border-color:#404040;
  /*box-shadow: 1px 1px 1px #a05656;*/
  max-height: 40px;
  z-index: 1000;
  padding: 3px 7px 3px 7px;
  width: auto;
  top: 0px;
  font-size: 1rem;
  margin-bottom: 5px;
}

.button_info:hover {
  background-color: #000;
  color:#E62B53;
 }
 .button_info img{
  /*margin-top: -3px;*/
  margin-bottom: -3px;

 }

 .btn-login {
  background-color: #E9456A;
  border: none;
  border-radius: 1rem;
  color: #FFF;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  font-size: clamp(1rem, 1vw, 1rem);
  /* ---- CLAVE PARA ALINEAR EL CONTENIDO DENTRO DEL BOTÓN ---- */
  display: flex; /* Convierte el botón en un contenedor flex */
  align-items: center; /* Alinea los ítems (texto e icono) verticalmente al centro */
  justify-content: center; /* Opcional: centra el contenido horizontalmente si hay espacio extra */
  height: 30px;
}

.btn-cerrar {
  background-color: #539bcd;
  border: none;
  border-radius: 1rem;
  color: #FFF;
  cursor: pointer;
  padding: 0 1.5rem 0 1.5rem;
  font-size: clamp(1rem, 1vw, 2rem);
  /* ---- CLAVE PARA ALINEAR EL CONTENIDO DENTRO DEL BOTÓN ---- */
  display: flex; /* Convierte el botón en un contenedor flex */
  align-items: center; /* Alinea los ítems (texto e icono) verticalmente al centro */
  justify-content: center; /* Opcional: centra el contenido horizontalmente si hay espacio extra */
  height: 30px;
}

.btn_susc{
 position: relative;
 top: -85px;
}
.btn_desc {
  /*padding: 3px 7px 3px 7px;
  max-height: 39px;
  */
  position: relative;
  margin: -1px;
  z-index: 1;
}

.button-group {
  display: flex;
  gap: 15px; 
  justify-content: center;
  margin-bottom: 5px;
}


#cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f0f0f0;
    color: #333;
    padding: 15px;
    text-align: center;
    z-index: 1000;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    display: none; /* Oculto por defecto */
}

#cookie-notice p {
    margin: 0 0 10px;
}

#accept-cookies {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#learn-more {
    color: #007bff;
    text-decoration: none;
    margin-left: 15px;
}

/* MENU TOP ------------------------*/

.main-nav {
    background-color: #292727;
    padding: 0px 0;
    font-size: 1rem;
}

.main-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
height: 30px;
font-size: 1rem;
}
  
.main-menu > li {
position: relative;
padding: 0 0px;
}

.main-menu a {
display: block;
padding: 5px 15px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s;
}

.main-menu a:hover {
background-color: #000;
color:#E62B53;
}

.main-menu a:focus {
    background-color: #000;
    color:#E62B53;
}

.submenu{
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 100%; /* Posiciona el submenú debajo del ítem padre */
left: 0;
background-color: #333;
min-width: 250px;
visibility: hidden; /* Oculta el submenú */
opacity: 0; /* Lo hace transparente */
transform: translateY(10px);
transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
z-index: 100;
font-size: 1rem;
}

/* Muestra los submenús al pasar el cursor */
.has-submenu:hover > .submenu,
.has-submenu:hover > .submenu-2 {
visibility: visible;
opacity: 1;
transform: translateY(0);
}

.submenu li a, .submenu-2 li a {
padding: 8px 20px;
border-bottom: 1px solid #555;
}

.submenu li:last-child a, .submenu-2 li:last-child a {
border-bottom: none;
}

/* Estilos para el segundo submenú (el de 'Collares' y 'Cuadros') */
.submenu-2 {
list-style: none;
margin: 0;
padding: 0; /* Posiciona el submenú debajo del ítem padre */
background-color: #333;
min-width: 230px;
visibility: hidden; /* Oculta el submenú */
opacity: 0; /* Lo hace transparente */
transform: translateY(10px);
transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
z-index: 100;
position: fixed;
left: 100%;
margin-top: -36px;
font-size: 1rem;
/* Posiciona el segundo submenú a la derecha del submenú principal */
}
#btn_menu{
  max-height: 40px;
  font-size: 1rem;
  padding: 0px 5px 0px 5px;
  z-index: 1005;
  /*width: 50px;
  left: 0px;*/
}

#btn_menu:hover {
  background-color: #000;
  color:#E62B53;
}
/*
 
.row{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.tfoot {
  max-width: 33.33%;
}
.footer-links{
  list-style: none;
}
.footer-links li a {
  font-family: 'Verdana';
  text-decoration: none;
  font-size: 1rem;;

}*/


/* Contenedor principal para la disposición horizontal */
.nav-footer ul {
  display: flex; /* Habilita Flexbox */
  flex-direction: row; /* Coloca los elementos en fila */
  justify-content: space-around; /* Distribuye el espacio entre los elementos */
  align-items: flex-start; /* Alinea los elementos al inicio del contenedor */
  list-style-type: none; /* Elimina los puntos de la lista */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
}

.nav-footer li {
  width: 30%; /* Establece un ancho para cada columna */
}

/* Estilos para los títulos y enlaces */
.footer-titulo {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.linkf {
  list-style-type: none;
  color: #7BAAF7;
}

.linkf:link {
  color: #E9456A;
}
.linkf:active {
  color: #E9456A;
}
.footer {
  width: 100%;
  text-align: center;
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* MODAL MSJ */
/* Estilos generales para el fondo del modal */
.custom-alert-box {
  display: none; /* Por defecto, está oculto */
  position: fixed;
  z-index: 1200;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

/* Contenido de la caja del mensaje */
.custom-alert-content {
  background-color: #ffffff;
  margin: 15% auto; /* Centrado en la pantalla */
  padding: 20px;
  border: 1px solid #888888;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Botón de cerrar */

.custom-alert-close:hover,
.custom-alert-close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

/* Estilo para el botón de OK */
.custom-alert-button {
  background-color: #E9456A;
  border: none;
  border-radius: 1rem;
  color: #FFF;
  cursor: pointer;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 5px;
  font-size: clamp(1rem, 1vw, 1rem);
  align-items: center; /* Alinea los ítems (texto e icono) verticalmente al centro */
  justify-content: center; /* Opcional: centra el contenido horizontalmente si hay espacio extra */
  vertical-align: center;
  height: 30px;
}

.custom-alert-button:hover {
  background-color: #000;
  color:#E62B53;
}

/* BOTONES REGISTRO*/


.social-login {
  display: flex;
  gap: 15px; 
  justify-content: center;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #000;
    border-radius: 1rem;
    padding: 0.4rem 1.5rem 0.4rem 1.5rem;
    min-width: 200px;
    border:solid;
    border-width: 1px;
    border-color:#404040;
    cursor: pointer; 
}

.social-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.google { 
    /*background-color: #db4437; */
}
.google:hover {
  background-color: #000;
  color:#E62B53;
}
.facebook { 
    /*background-color: #4267B2; */
}
.facebook:hover { 
  background-color: #000;
  color:#E62B53;
}
.microsoft {
    /*background-color: #0078d4; */
}
.microsoft:hover {
  background-color: #000;
  color:#E62B53;
}

/* BOTON DE AYUDA */
.help-container {
  position: relative;
  display: inline-block;
}

/* Estilos del botón */
.help-button {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #E9456A;
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.help-button:hover {
  background-color: #000;
  color:#E62B53;
}

/* Estilos de la ventana de ayuda */
.help-tooltip {
  position: absolute;
  top: 50px; /* Separación del botón */
  left: 50%;
  transform: translateX(-50%);
  min-width: 300px; /* Ancho fijo para el tooltip */
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.3s ease;

}

/* Estilos para ocultar la ventana de ayuda */
.help-tooltip.hidden {
  display: none;
}

/* Estilos para el texto dentro del tooltip */
.help-tooltip p {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}

#password-criteria{
  text-align: left;
}

.criteria-item{
  font-size: clamp(0.6rem, 1vw, 1rem);
}

.toggle-password {
  display: flex;
  /*position: absolute;*/
  right: 5px; /* Ajusta la posición del botón */
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  font-size: 1.2em; /* Tamaño del ícono */
  color: #555; /* Color del ícono */
  max-width: 35px;
  max-height: 30px;
}

.toggle-password:hover {
  color: #000;
}

.bordeazul{
  border-width: 1px;
  border-style: solid;
  border-color: #36516d;
  padding-bottom: 5px;
  border-radius: 3px;
}
#nicho{
  height: 30px;
}
.options-list {
  height: auto; /* Ajusta esta altura al valor que desees */
  overflow-y: auto;  /* Esto habilita el scroll vertical cuando el contenido excede la altura máxima */
  display: block;     /* Oculta la lista de opciones por defecto */
  position: absolute;
  /* otros estilos de posicionamiento y visuales */
}

/* Media Query para dispositivos móviles FOOTER
  Aplica estilos solo cuando el ancho de la pantalla es de 768px o menos
*/
@media (max-width: 768px) {
  .nav-footer ul {
    flex-direction: column; /* Apila los elementos en una columna */
    align-items: center; /* Centra los elementos horizontalmente */
  }

  .nav-footer li {
    width: 100%; /* Ocupa el 100% del ancho */
    margin-bottom: 20px; /* Añade espacio entre las secciones */
    text-align: center; /* Centra el texto */
  }

  .footer-links {
    text-align: center; /* Centra los enlaces */
  }
}

@media (min-width: 768px) {
  .col-md-6 {
      flex: 0 0 auto;
      width: 50%;
  }
}
/* MOVIL RESPONSIVE ----------------*/
/* HEAD */
@media (max-width: 600px) { /* Aplica estos estilos en pantallas de 600px o menos */
    .header-container {
      flex-direction: column; /* Apila el logo y el título */
      justify-content: center;
      text-align: center; /* Centra todo el texto */
    }
  
    .header-logo {
      margin-bottom: 10px; /* Añade un poco de espacio debajo del logo */
    }
  
    .header-title {
      text-align: center; /* Asegura que el título también esté centrado */
    }
}
/* MENU TOP*/
@media (max-width: 740px) {

  /* Estilos de la lista principal */
  
  #menu_top{
    display: none;
  }
 
  .main-menu {
    /*display: flex;  Usamos flexbox para controlar la dirección */
    flex-direction: column; /* Esto es lo que lo hace vertical */
    position: fixed;
    background-color: #333;
    height: auto;
    top: 32px;
    padding-top: 10px 0px 5x 5px;
    left: 0px;
    z-index: 1000;
    font-size: clamp(0.7rem, 2vw, 1rem);
  }

  .submenu{
    font-size: clamp(0.7rem, 2vw, 1rem);
    min-width: 190px;
    display: none;
  }

  .submenu-2{
    font-size: clamp(0.7rem, 2vw, 1rem);
    margin-top: -30px;
    display: none;
  }

  #btn_menu {
    background-color: #333;
    color: #FFF;
    margin-left: 10px;
  }
  .content {
    margin-top:32px; 
  }

  .tope {
    position:fixed;
  
    width: 100%;
    height: 35px;
    top: 0px;
    left: 0px;
    background-color: transparent; 
    transition: background-color 0.3s ease;
  }
  
  /* Clase que se agregará con JavaScript */
  .tope-scrolled {
    background: linear-gradient(to right, rgba(221, 91, 121, 0.5) 50%, rgba(83, 155, 205, 0.5) 50%);
    /*background-color: rgba(255, 255, 255, 0.9); Un color de fondo semitransparente o el color que desees
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); Sombra para dar un efecto de elevación */
    top:0;
    padding-top: 1px;
    max-height: 32px;
  }

  .tope_1 {
    position: relative;
    top: 4px;
    z-index: 1004;
    max-width: 40px; 
  }
  .tope_2 { 
    top: -18px;
    right: 16px;
    z-index: 1003;
  }
  /*.content-menu {
     flex-direction: column; Esto hace que los elementos se apilen verticalmente 
  }*/

  .cubito p, .cubito div {
    /* Limita el texto a 2 líneas */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Cantidad de líneas a mostrar */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* Añade puntos suspensivos (...) */
  }

  .help-tooltip {
 position:fixed;
    top: auto; /* Separación del botón */
    width: auto; /* Ancho fijo para el tooltip */
    padding: 15px;
  }

  /* TABLE RESPONSIVE */

  .responsive-table thead {
    display: none;
  }

  /* Convierte las filas en bloques */
  .responsive-table table, tbody, tr {
    display: block;
    width: 91%;

  }

  /* Agrega un borde para separar cada "fila-bloque" */
  .responsive-table tr {
    display: block;
  }
  
  /* Convierte las celdas en bloques y las hace visibles */
  .responsive-table td {
    display: block;
    text-align: center;
    border: none;
    position: relative;  
  }

  /* Crea una etiqueta para cada celda usando el pseudo-elemento ::before */
  .responsive-table td::before {
    /*  content: attr(data-label);  Usa el atributo 'data-label' 
    position: absolute;
  left: 10px;
    width: calc(50% - 20px);
    text-align: center;
    font-weight: bold;*/
  }


}

@media (min-width: 740px) {
  #btn_menu {
    display: none;
  }


}