/* Reset */
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf format') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter/Inter-Italic-VariableFont_opsz\,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #bebdbdab;/* Color neutro */
    color: #070707;
    line-height: 1.6;
}
h1 {
    font-weight: 700;  /* Bold */
}
em, .italic-text {
    font-style: italic;  /* Usará el archivo italic automáticamente */
}

/* Encabezado */
header {
    background-color: #dddcdc; /* Fondo blanco */
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    border-bottom: 2px solid #dddcdc;
}

/* Contenedor superior: idiomas, logo, buscador */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}

/* Selector de idioma */
.language-selector {
    font-weight: bold;
    color: #363434;
}

.language-selector span {
    cursor: pointer;
}

.language-selector span:hover {
    color: #ff7b00; /* Rojo en hover */
}

/* Logotipo */
.logo img {
    width: 350px;
    height: auto;
}

/* Barra de búsqueda */
.search-bar {
    display: flex;
    align-items: center;
}

.search-bar input[type="text"] {
    padding: 5px;
    border: 1px solid #797877;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-bar button {
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-left: none;
    background-color: #c4c2bb;
    color: #474747;
    cursor: pointer;
    border-radius: 0 4px 4px 0;
}

.search-bar button:hover {
    background-color: #fc5000;
}

/* Menú de Navegación */
.nav-bar {
    text-align: center;
    padding-top: 10px;
    border-top: 2px solid #a0a0a0;
    position: relative; /* Para permitir la posición del menú */
}

.nav-bar ul {
    list-style-type: none;
    display: inline-flex; /* Mostrar elementos en línea para escritorio */
    padding: 0;
}

.nav-bar ul li {
    margin: 0 20px;
}

.nav-bar ul li a {
    color: #131313;
    text-decoration: none;
    font-weight: bold;
}

.nav-bar ul li a:hover {
    color: #ff7300; /* Rojo en hover */
    text-decoration: underline;
}

/* Estilos para el botón del menú móvil */
.menu-toggle {
    display: none; /* Ocultar por defecto */
    flex-direction: column;
    cursor: pointer;
    margin-left: 15px; /* Espacio a la izquierda */
}

.bar {
    height: 4px;
    width: 40px;
    background-color: #ff6600; /* Color de las barras */
    margin: 5px 0;
}


/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .top-header {
        flex-direction: column; /* Cambia a columna en móvil */
        align-items: center;
    }

    .language-selector {
        order: 1;
        margin-bottom: 10px;
    }

    .logo {
        order: 2;
        margin-bottom: 10px;
    }

    .search-bar {
        order: 3;
        width: 100%;
        display: flex; /* Cambiar a flex */
        justify-content: center; /* Centrar contenido */
        align-items: center; /* Alinear verticalmente */
    }

    .search-bar input[type="text"] {
        width: 60%; /* Ajuste para el campo de búsqueda */
    }

    .nav-bar ul {
        display: none; /* Oculta el menú en dispositivos móviles por defecto */
        flex-direction: column; /* Cambia a columna */
        width: 100%; /* Ancho fijo del menú desplegable */
        background-color: #d6d8d7; /* Fondo del menú */
        position: absolute; /* Posiciona el menú */
        top: 0px; /* Ajustar según la altura de la barra de navegación */
        transition: left 0.5s ease;/* Transición para el movimiento */
    }

    .nav-bar ul.active {
        display: flex; /* Mostrar el menú cuando está activo */
    }

    .menu-toggle {
        display: flex; /* Muestra el botón de menú */
    }
}

/* Ajustes adicionales para pantallas menores a 480px */
@media (max-width: 480px) {
    .logo img {
        width: 280px; /* Reducir tamaño del logo para pantallas pequeñas */
    }

    .search-bar input[type="text"] {
        width: 60%; /* Ajuste para el campo de búsqueda */
    }
    
}

/* Contenido principal */
main {
    flex: 1;
}

.content-wrapper {
    display: flex;
    flex-wrap: wrap;
}
/*Carouse*/
.carousel-image {
    filter: brightness(50%); /* Reduce el brillo para oscurecer */
    height: 500px; /* Ajusta según tu diseño */
    object-fit: cover; /* Asegura que las imágenes se vean bien */
}

/* Personaliza el texto del carrusel */
.custom-caption {
    left: 10%; /* Alinea el texto a la izquierda */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%);
    text-align: left;
    max-width: 600px; /* Controla el ancho del contenido */
}

/* Títulos grandes */
.custom-caption h1 {
    font-size: 3rem; /* Tamaño del título */
    font-weight: bold;
    line-height: 1.2;
}

/* Descripción */
.custom-caption p {
    font-size: 1.5rem; /* Tamaño de la descripción */
    margin-top: 10px;
    color: #f1f1f1;
}

/* Botón translúcido */
.custom-button {
    background-color: rgba(255, 255, 255, 0.2); /* Fondo translúcido */
    border: 2px solid #fff;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover del botón */
.custom-button:hover {
    background-color: rgba(255, 115, 0, 0.856); /* Fondo más sólido al pasar el mouse */
    color: #000; /* Texto negro para contraste */
}
/*seccion bio*/
.bio-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    min-height: 100vh;
    margin-bottom: 30px;
}
.bio-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
}
.image-frame {
    background-color: #cccccc18;
    width: 300px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #888;
    margin-right: 20px;
    margin-bottom: 20px;
}
.image-frame img {
    max-width: 90%;
    max-height: 90%;
}
.bio-description {
    flex: 1;
    min-width: 200px;
}
.details-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    flex-wrap: wrap;
}
.detail-box {
    flex: 1;
    border: 2px solid #888;
    margin: 5px;
    padding: 10px;
    background-color: transparent;
    text-align: center;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.detail-box i {
    font-size: 30px;
    margin-bottom: 10px;
    color: #333;
}
@media (max-width: 768px) {
    .bio-container {
        flex-direction: column;
        text-align: center;
    }
    .image-frame {
        margin-right: 0;
    }
    .details-container {
        flex-direction: column;
    }
    .detail-box {
        margin: 10px 0;
    }
    .bio-section {
        margin-bottom: 50px;
    }
}
/*CONTADOR VISITAS*/

  /* Sección general */
.our-services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 50px;
  }
  
  /* Estilo de la columna izquierda */
/* Estilos generales */
.left-column {
    width: 30%;
  }
  
  .what-we-do {
    background-color: transparent; /* Fondo transparente */
    padding: 20px;
    border-radius: 4px;
    border-color: #000;
    border: 2px solid #ccc;
  }
  
  .small-text {
    font-size: 14px;
    color: rgb(66, 64, 64);
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
  }
  
  .main-text {
    font-size: 28px;
    font-weight: bold;
    color: rgb(31, 30, 30);
    text-align: center;
    margin-bottom: 15px;
  }
  
  .description {
    font-size: 16px;
    color: rgb(61, 59, 59);
    text-align: center;
    margin-bottom: 20px;
  }
  
  .cta-button {
    display: block;
    width: 100%;
    background-color: #5f5f5e; /* Naranja más oscuro */
    color: white;
    border: none;
    padding: 10px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;
  }
  
  .cta-button:hover {
    background-color: #e65c00; /* Naranja más oscuro */
  }
  
  /* Estilo de las columnas de la derecha */
  .right-column {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .service-box {
    width: 48%;
    background-color: transparent;
    border: 2px solid #ccc; /* Cuadros grises */
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .icon-title {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .icon {
    font-size: 40px;
    margin-right: 15px;
    color: #007bff; /* Color del icono */
  }
  .icon-bar {
    display: flex;
    justify-content: center;
    background-color: #eeecec00; /* Color de fondo de la barra */
    padding: 20px 0;
}
.icon-bar a {
    color: rgb(59, 59, 59); /* Color del ícono */
    text-decoration: none;
    font-size: 28px; /* Tamaño del ícono */
    margin: 0 15px; /* Espaciado entre íconos */
    transition: color 0.3s;
}
.icon-bar a:hover {
    color: #ff5e00; /* Cambia el color al pasar el mouse */
}
  
  .service-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  .service-description {
    font-size: 16px;
    color: #555;
    margin-bottom: 15px;
  }
  
  .read-more {
    color: #FFA500; /* Naranja */
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
  }
  
  .read-more i {
    margin-left: 5px;
    font-size: 18px;
  }
  
  .read-more:hover {
    color: #e65c00; /* Naranja más oscuro */
  }
  
  /* Media Queries para Responsividad */
  
  /* Para pantallas pequeñas (móviles) */
  @media (max-width: 768px) {
    .left-column {
      width: 100%;  /* La columna izquierda ocupa todo el ancho */
      margin-bottom: 20px;  /* Espacio inferior entre la columna izquierda y la derecha */
    }
  
    .right-column {
      width: 100%; /* La columna derecha ocupa todo el ancho */
      display: block; /* Para que los cuadros no estén en línea, sino uno debajo del otro */
    }
  
    .service-box {
      width: 100%; /* Los cuadros de servicio ocupan todo el ancho */
      margin-bottom: 20px; /* Espacio entre los cuadros */
    }
  
    .icon-title {
      flex-direction: column; /* Coloca el icono arriba del título en lugar de lado a lado */
      align-items: center; /* Centra el icono y el título */
    }
  
    .icon {
      font-size: 30px; /* Reduce el tamaño del icono para dispositivos móviles */
      margin-bottom: 10px; /* Añade margen debajo del icono */
    }
  
    .service-title {
      font-size: 18px; /* Tamaño de fuente reducido para pantallas pequeñas */
    }
  
    .service-description {
      font-size: 14px; /* Reducir tamaño de fuente */
    }
  
    .cta-button {
      font-size: 14px; /* Tamaño de fuente más pequeño para el botón */
      padding: 8px; /* Reducir el padding para que el botón se vea adecuado */
    }
  }
  
  /* Para pantallas muy pequeñas (móviles muy pequeños) */
  @media (max-width: 480px) {
    .main-text {
      font-size: 24px; /* Reduce el tamaño del título en pantallas muy pequeñas */
    }
  
    .description {
      font-size: 14px; /* Reduce el tamaño del texto de descripción */
    }
  
    .cta-button {
      font-size: 12px; /* Fuente del botón aún más pequeña */
      padding: 8px 10px; /* Ajuste del padding */
    }
  }
  
  /* Estilo para un cuadro más atractivo en caso de cambios */
  #views {
    background-color: #d4f7d4;  /* Fondo verde claro para vistas */
    border-color: #28a745;      /* Borde verde */
  }
  
  #subscribers {
    background-color: #e1f4ff;  /* Fondo azul claro para suscriptores */
    border-color: #17a2b8;      /* Borde azul */
  }
/* Columna de Temas */
.sidebar {
    flex: 1;
    max-width: 250px;
    background-color: #585752; /* Fondo amarillo */
    padding: 20px;
    margin-right: 20px;
}

.sidebar h2 {
    margin-bottom: 10px;
    color: #000; /* Títulos en negro */
}

.sidebar ul {
    list-style-type: none;
    padding: 8px; /* Elimina el padding del UL */
}

.sidebar ul li {
    margin-bottom: 10px;
    padding-left: 10px; 
    
}

.sidebar ul li a {
    text-decoration: none;
    color: #000; /* Enlaces en negro */
    font-weight: bold;
}

.sidebar ul li a:hover {
    color: #1d00be; /* En rojo al pasar */
    text-decoration: underline;
}
/* Estilo para el tema activo */
.sidebar ul li a.active {
    color: #009e42; /* Color azul para el tema activo */
    font-weight: bold;
    text-decoration: underline;
}

/* Estilo para el subtema activo */
.sidebar ul li ul li a.active {
    color: #2f00ff; /* Color diferente para el subtema activo */
    font-weight: bold;
    text-decoration: underline;
}


/* Media Query para pantallas medianas y pequeñas */
@media (max-width: 768px) {
    .sidebar {
        max-width: 100%; /* Ancho completo en pantallas medianas */
        margin: 0 0 20px 0; /* Márgenes superiores e inferiores */
        padding: 10px; /* Reduce el padding en móviles */
    }

    .sidebar h2 {
        text-align: center; /* Centrar título en dispositivos móviles */
        font-size: 28px; /* Ajustar tamaño de fuente */
    }

    .sidebar ul li {
        margin-bottom: 8px; /* Menos espacio entre elementos en móvil */
    }

    .sidebar ul li a {
        font-size: 16px; /* Ajustar tamaño de fuente */
    }
}

/* Media Query para pantallas pequeñas */
@media (max-width: 480px) {
    .sidebar h2 {
        font-size: 22px; /* Tamaño de fuente aún menor para pantallas pequeñas */
    }

    .sidebar ul li a {
        font-size: 15px; /* Ajustar tamaño de fuente */
    }
}

/* Columna de Entradas */
.blog-entries {
    flex: 1;
}

.blog-entries article {
    margin-bottom: 20px;
    background-color: #f4f4f4ab;
    padding: 20px;
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
}
.blog-entries h1 {
    font-size: 38px; /* Mejor utilizar el mismo color que en el resto de h2 */
}

.blog-entries article h2 {
    font-size: 36px;
    margin-bottom: 26px; /* Mejor utilizar el mismo color que en el resto de h2 */
    text-align: center; /* Centrar el título */
}
.blog-entries article h3 {
    font-size: 26px;
    margin-bottom: 12px; /* Mejor utilizar el mismo color que en el resto de h2 */
    text-align: left; /* Centrar el título */
}
.blog-entries article h4 {
    font-size: 24px;
    margin-bottom: 12px; /* Mejor utilizar el mismo color que en el resto de h2 */
    text-align: left; /* Centrar el título */
}

.blog-entries article ul {
    font-size: 18px;
    list-style-type: disc; 
    padding-left: 28px;
    text-align: justify; /* Justificar el texto */
    color: #030303; 
}
.blog-entries article ol {
    font-size: 18px; /* Igual al tamaño de fuente de las listas ul */
    list-style-type: decimal; /* Numeración decimal (1, 2, 3, ...) */
    padding-left: 28px;
    text-align: justify; /* Justificar el texto */
    color: #030303;
}

.entry-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    display: block;
    overflow: hidden; /* Asegura que los elementos flotantes no colapsen el contenedor */
}

.entry-content img {
    height: auto;
    border-radius: 8px; /* Bordes redondeados para la imagen */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.entry-content p {
    font-size: 18px;
    line-height: 1.6;
    text-align: justify; /* Justificar el texto */
    color: #030303;
    margin-bottom: 1em;
}



/* Estilo adicional para las citas o fragmentos destacados (opcional) */
.entry-content blockquote {
    padding: 15px 25px;
    background-color: #eeeeee; /* Fondo oscuro para resaltar el "anuncio" */
    color: #1a1512; /* Texto claro para contraste */
    font-style: italic;
    text-align: justify;
    border-radius: 15px; /* Bordes redondeados */
    position: relative;
    border: 5px solid transparent; /* Borde principal, transparente inicialmente */
    background-clip: padding-box;
    /* Borde externo con efecto "luminoso" */
}

/* Borde de gradiente simulado alrededor */
.entry-content blockquote::before {
    content: "";
    position: absolute;
    top: -5px; left: -5px;
    right: -5px; bottom: -5px;
    border-radius: 15px;
    background: linear-gradient(90deg, #ff9900, #00e1ff, #2cff02, #00ff88, #ff9900);
    z-index: -1;
}

/* imagen de entradas*/


.entry-image {
    float: right; /* La imagen se alineará a la derecha */
    margin-left: 20px; /* Espacio entre el texto y la imagen */
    max-width: 480px; /* Controla el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.entry-imagesmall {
    float: Justify; /* La imagen se alineará a la derecha */
    margin-left: 40px; /* Espacio entre el texto y la imagen */
    max-width: 300px; /* Controla el tamaño máximo de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    border-radius: 5px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/*Formato Tablas*/

.audio-icon {
    cursor: pointer;
    color: #5a5eae;
    font-size: 1.2em;
    margin-left: 5px;
}
.highlight {
    background-color: #cefda8;
}
.highlight-green {
    background-color: #5cb85c; /* Color verde para resaltar */
    font-weight: bold;
}
.highlight-blue {
    background-color: #57bfdf80; /* Color azul para resaltar */
    font-weight: bold;
}
.dialogue {
    margin: 10px 0;
}
.german {
    color: #0073e6;
    font-weight: bold;
}
.spanish {
    color: #302f2f;
}
/* Estilos para el ícono de traducción */
.translation-icon {
    cursor: pointer;
    font-size: 20px;
    margin-left: 5px;
    vertical-align: middle;
}

/* Estilos para el cuadro emergente de traducción */
.translation {
    display: none;
    position: absolute;
    font-size: 15px;
    background-color: #e3e7e9;
    border: 1.5px solid #808181;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(25, 196, 167, 0.1);
    z-index: 10;
    color: rgb(26, 22, 22); 
}

/* Estilo cuando la traducción es visible (solo en escritorio) */
.translation.show {
    display: block;
}

/* Para mejorar la visibilidad en pantallas pequeñas, puedes usar esta regla */
@media (max-width: 768px) {
    .translation {
        display: none; /* Para móviles, la traducción se mostrará solo con click */
    }
}
/* Definir el estilo para el h2 con gradiente de colores */
.color-transition {
    font-weight: bold; /* Hacer que el texto sea negrita */
    background: linear-gradient(100deg, #1b3cf5,#02dabd, #00db21); /* De azul a rosa */
    background-clip: text; /* Hace que el gradiente se aplique solo al texto */
    color: transparent; /* Hace que el color de fondo sea visible en el texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores webkit */
    animation: colorShift 3s linear infinite; /* Animación */
  }
  .titulo-principal {
    background: linear-gradient(90deg, #312f2f, #4b4848); /* De azul a rosa */
    background-clip: text; /* Hace que el gradiente se aplique solo al texto */
    color: transparent; /* Hace que el color de fondo sea visible en el texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores webkit */
    animation: colorShift 5s linear infinite; /* Animación */
  }
  .subtitulo-principal {
    background: linear-gradient(90deg, #01754e,#0c00ad,#0c7e01,#038bad, #01583b); /* De azul a rosa */
    background-clip: text; /* Hace que el gradiente se aplique solo al texto */
    color: transparent; /* Hace que el color de fondo sea visible en el texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores webkit */
    animation: colorShift 5s linear infinite; /* Animación */
  }
  .titulo-tablas {
    background: linear-gradient(90deg, #312f2f, #4b4848); /* De azul a rosa */
    background-clip: text; /* Hace que el gradiente se aplique solo al texto */
    color: transparent; /* Hace que el color de fondo sea visible en el texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores webkit */
    animation: colorShift 5s linear infinite; /* Animación */
  }
  .Bold-colorA {
    background: linear-gradient(90deg, #ff0202,#0400ff, #155801); /* De azul a rosa */
    background-clip: text; /* Hace que el gradiente se aplique solo al texto */
    color: transparent; /* Hace que el color de fondo sea visible en el texto */
    -webkit-background-clip: text; /* Para compatibilidad con navegadores webkit */
    animation: colorShift 5s linear infinite; /* Animación */
  }

/* Ajustes Responsivos */
@media (max-width: 768px) {
        .entry-content {
            display: flex;
            flex-direction: column; /* Columnas en pantallas pequeñas */
            text-align: center;
        }
    
        .entry-content img {
            margin: 0 auto 0px;
        }
    
    
        .entry-content p {
            text-align: justify;
        }
    
        .entry-image {
            float: none; /* Quita float en pantallas pequeñas */
            display: block;
            margin: 0 auto 20px;
            max-width: 350px;
        }
}
    
@media (max-width: 480px) {
        .blog-entries article h2 {
            font-size: 22px; /* Reduce tamaño de fuente */
        }

}


/* Pie de página */
footer {
    background-color: #dddcdc;
    color: rgb(31, 30, 30);
    padding: 20px 0;
    text-align: center;
    width: 100%;
}

/* Contenido del pie de página */

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


.footer-left {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos verticalmente */
    width: 50%; /* Ocupa el 50% del espacio disponible */
}

.logo-footer {
    text-align: center;
    margin-bottom: 20px; /* Espacio opcional debajo del logotipo */
}

.logo-footer img {
    width: 250px;
    height: auto;
}

.footer-right {
    display: flex;
    justify-content: space-between;
    width: 50%; /* Ocupa el 50% del espacio disponible */
}

.footer-links-column {
    flex: 1;
    margin: 0 10px;
    align-items: center;
}

.footer-links-column ul {
    list-style-type: none;
    padding: 0;
}

.footer-links-column ul li {
    margin-bottom: 10px;
}

.footer-links-column ul li a {
    color: rgb(46, 45, 45);
    text-decoration: none;
}

.footer-links-column ul li a:hover {
    text-decoration: underline;
}

/* Derechos de autor */
.copyright {
    background-color: #ff5e00;
    padding: 10px 0;
    font-size: 14px;
    margin-top: 20px;
}

/* Responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    .footer-left {
        width: 100%;
        margin-top: 5px;
        flex-direction: column;
    }

    .footer-right {
        width: 100%;
        margin-top: 15px;
        flex-direction: column;
    }

    .footer-links-column {
        margin: 10px 0;
        flex-direction: column;
        align-items: center;
    }
}

/* Ocultar las sublistas de subtemas por defecto */
.subtemas {
    display: none;
    padding-left: 20px;
}

/* Subtemas visibles cuando se seleccionan */
.subtemas.active {
    display: block;
}
/* Estilos del buscador */
.search-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.search-bar input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px 0 0 8px;
    width: 60%;
}

.search-bar button {
    padding: 10px 20px;
    background-color: #000;
    color: white;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
}

.search-bar button:hover {
    background-color: #ffcc00; /* Amarillo de la bandera */
}

/* Resultados de la búsqueda */
#searchResults {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Estilo de las tablas */
table {
    width: 100%; /* Ancho completo de la tabla */
    border-collapse: collapse; /* Eliminar espacios entre las celdas */
    margin-top: 10px; /* Espacio entre el párrafo anterior y la tabla */
}

th, td {
    border: 1px solid #ddd; /* Borde de las celdas */
    padding: 10px; /* Espaciado dentro de las celdas */
    text-align: left; /* Alinear el texto a la izquierda */
    max-width: 10%; 
    word-wrap: break-word; /* Ajusta palabras largas */
}

th {
    background-color: #4431ee; /* Color de fondo de la cabecera */
    color: #ececec; /* Color del texto en la cabecera */
}
small{
    color:#494646e0;
}

tbody tr:hover {
    background-color: #f1f1f1; /* Color de fondo al pasar el mouse sobre las filas */
}
.verbo-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.verbo-table th, .verbo-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}

.verbo-table th {
    background-color: #2e4bf1;
    font-weight: bold;
}

.verbo-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.verbo-table tr:hover {
    background-color: #f1f1f1;
}
/* Estilos generales para la ventana emergente de cookies */
.cookie-modal {
    position: fixed;
    bottom: 0; /* Posicionar en la parte inferior */
    left: 0;
    width: 100%;
    background: rgba(156, 241, 116, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: none; /* Oculto por defecto */
    padding: 15px 0; /* Espacio adicional en los bordes */
}

.cookie-modal-content {
    background: rgb(245, 247, 245);
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.cookie-columns {
    display: flex;
    justify-content: space-between;
}

.cookie-column {
    flex: 1;
    padding: 10px;
    font-size: 11px; /* Reducir el tamaño del texto */
    max-height: 300px; /* Limitar la altura de la columna */
    overflow-y: auto;  /* Hacer que el contenido se desplace si es necesario */
}

.cookie-column p, .cookie-column ul {
    margin-bottom: 10px;
}

.cookie-column p {
    font-size: 11px;
    color: #333;
}

.cookie-column ul {
    list-style-type: none;
    padding: 0;
}

.cookie-column ul li {
    margin-bottom: 10px;
}

.cookie-column ul li a {
    color: blue;
    text-decoration: underline;
    font-size: 10px;
}

.cookie-column button {
    margin: 10px 0;
    padding: 10px 20px;
    background-color: #ffcc00;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.cookie-column button:hover {
    background-color: #e0b800;
}

/* Para ocultar y mostrar la ventana */
.show {
    display: flex;
}

/* Estilos específicos para la ventana de administración de cookies */
#manageCookieModal {
    position: fixed;
    top: 50%; /* Posiciona en el centro verticalmente */
    left: 50%; /* Posiciona en el centro horizontalmente */
    transform: translate(-50%, -50%); /* Ajuste para centrar correctamente */
    width: 80%; /* Ancho de la ventana modal */
    max-width: 600px; /* Máximo ancho de la ventana modal */
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: none; /* Oculto por defecto */
}

/* Aseguramos el centrado vertical y horizontal */
#manageCookieModal.show {
    display: block;
}

/* Estilos adicionales para la ventana de administración */
#manageCookieModal h2 {
    text-align: center;
    margin-bottom: 20px;
}

#manageCookieModal .cookie-columns {
    flex-direction: column;
    align-items: center;
}

#manageCookieModal .cookie-column {
    margin-bottom: 10px;
}

#manageCookieModal button {
    display: block;
    margin: 0 auto;
}


/* Hipervinculos */
.cookie-links-inline {
    list-style: none;  /* Eliminar el estilo de lista */
    padding: 0;
    margin: 0;
}

.cookie-links-inline li {
    display: inline-block; /* Mostrar los <li> en línea */
    margin-right: 20px; /* Separación entre enlaces */
}

.cookie-links-inline li a {
    text-decoration: none; /* Quitar el subrayado */
    color: #000; /* Color de los enlaces */
}

.cookie-links-inline li:last-child {
    margin-right: 0; /* Eliminar el margen derecho del último enlace */
}

/* Fin ventana de cookies*/
.color-box {
    display: inline-block;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    margin-right: 10px;
}