/*
    Theme Name: Proyecto Fusión
    Theme URI:
    Author: [Tu Nombre o Empresa]
    Author URI:
    Description: Un tema que combina la funcionalidad de Ceamib Base con el diseño del proyecto original.
    Version: 1.0.0
*/

/*custom properties*/
:root {
    /* Fuentes */
    --fuente-principal:"Raleway", sans-serif;
    --fuente-headings:"Staatliches", sans-serif;

    /* Colores*/
    --instrucciones:#a83e3e;
    --usuario: #258666;
    --investigador: #45bb94;
    --personal: #8b7dbb;
    --laboral:#53a35b;
    --economico:#25aab0;
    --titulacion:#f7bf45;
    --mypi-claro: #454491;
    --mypi-oscuro: #19104d;
    --gris-claro: #c9c4c4;
    --blanco: #fff;
    --negro: #000;
    --color-pregunta:#111111;
    --color-respuesta:#4b4b4b;
}

/* Base y Normalización */
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
*, *:before, *:after {
    box-sizing: inherit;
}
body {
    font-family: var(--fuente-principal);
    font-size: 1.8rem;
    line-height: 2;
}

/* Headings */
h1, h2, h3, h4 {
    font-family: var(--fuente-headings);
    margin: 0 0 5rem 0;
    line-height: 1.2;
}
h1 { font-size: 6rem; }
h2 { font-size: 4.8rem; }
h3 { font-size: 3.6rem; }
h4 { font-size: 2.4rem; }

/* Globales y Elementos Comunes */
.text-justify {
    text-align: justify;
}
p {
   margin: 0;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
hr {
    border: 1px solid var(--gris-claro);
}
.imagen-destacada {
    margin-bottom: 3rem;
}

/* Layout */
.contenedor {
    width: min(95%, 120rem);
    margin: 0 auto;
}
.contenido-centrado {
    width: min(95%, 80rem);
}

/* Utilidades */
.text-center {
    text-align: center;
}
.text-primary {
    color: var(--mypi-claro);
}
.text-blanco {
    color: var(--blanco);
}
.seccion {
    padding: 5rem 0;
}

/* BREADCRUMBS (Migas de Pan) */
.ceamib-breadcrumbs {
    padding: 15px 0;
    font-size: 1.4rem; /* Tamaño de letra más pequeño y discreto */
    color: #555;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
}

.ceamib-breadcrumbs ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* La regla clave para alinear horizontalmente */
    flex-wrap: wrap; /* Permite que pase a la siguiente línea en pantallas muy pequeñas */
    align-items: center;
}

.ceamib-breadcrumbs li {
    display: flex; /* Ayuda a alinear el separador */
    align-items: center;
}

.ceamib-breadcrumbs li a {
    color: var(--mypi-claro); /* Usamos el color principal de tu tema */
    text-decoration: none;
}

.ceamib-breadcrumbs li a:hover {
    text-decoration: underline;
}

.ceamib-breadcrumbs .breadcrumb-separator {
    margin: 0 8px;
    color: #777;
}

/* Estilo para el último elemento, que es la página actual y no suele ser un enlace */
.ceamib-breadcrumbs li:last-child {
    color: #333;
    font-weight: bold;
}



/* HEADER */
.header {
    background-color: var(--mypi-oscuro);
    padding: 2rem;
}
.header img { /* Estilo para el logo */
    max-width: 10rem;
}
.barra-navegacion {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hamb-menu {
    color: var(--blanco);
}
.hamb-menu:hover {
    cursor: pointer;
    color: var(--gris-claro);
}
.hamb-menu h2 {
    margin: 10px 5px;
    font-size: 25px;
    font-weight: 400;
}

/* Lógica del menú móvil */
.contenedor-menu {
    pointer-events: none;
    cursor: default;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.5s ease, max-height 0.5s ease;
}
.mostrar {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
    max-height: 35rem; /* Altura suficiente para el menú */
}

/* Estilos del Menú Principal */
.menu-principal a {
    font-family: var(--fuente-headings);
    display: block;
    text-align: center;
    color: var(--blanco);
    font-size: 2.2rem;
    padding: .5rem 2rem;
    position: relative;
    z-index: 1;
}
.menu-principal .current_page_item > a { /* Selector corregido para el item activo */
    border-bottom: 3px solid var(--mypi-claro);
}
.menu-principal a::before,
.menu-principal a::after {
    position: absolute;
    left: 0;
    content: '';
    display: block;
    width: 100%;
    height: 50%;
    background-color: var(--mypi-claro);
    z-index: -1;
    transform: scaleX(0);
    transition: transform .6s;
}
.menu-principal a::before {
    top: 0;
    transform-origin: left;
}
.menu-principal a::after {
    top:50%;
    transform-origin: right;
}
.menu-principal a:hover::before {
    transform: scaleX(1);
}
.menu-principal a:hover::after {
    transform: scaleX(1);
}

/* Media Queries para Header */
@media (min-width: 769px) {
    .barra-navegacion {
        flex-direction: row;
        justify-content: space-between;
    }
    .menu-principal {
        display: block;
    }
    .menu-principal .menu {
        display: flex;
    }
    .hamb-menu {
        display: none;
    }
    .contenedor-menu {
        all: unset; /* Resetea los estilos de ocultar en escritorio */
    }
}
@media (min-width: 768px) and (max-width: 900px) {
    .menu-principal a {
        font-size: 1.8rem;
    }
}

/* Footer */
.footer { /* Añadido selector .footer para ser más específico */
    padding-bottom: 2rem;
}
.contenido-footer {
    padding: 3rem 0;
}
.footer .menu-principal a {
    color: var(--negro);
    text-align: center;
    font-size: 2.4rem;
    padding: 0 1rem;
}
.footer .menu-principal a::before,
.footer .menu-principal a::after {
    display: none;
}
.copyright {
    text-align: center;
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    margin: 2rem 0 0 0;
}
@media (min-width: 768px){
    .contenido-footer {
        display: flex;
        justify-content: space-between;
    }
    .copyright {
        font-size: 2.4rem;
        margin: 0;
    }
}

/* BOTONES GLOBALES */
button,
.btn-busqueda,
.btn-enviar,
.boton-correo {
    padding: 10px 20px;
    background-color: var(--mypi-claro);
    color: white;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease;
}
button:hover,
.btn-busqueda:hover,
.btn-enviar:hover,
.boton-correo:hover {
    background-color: var(--mypi-oscuro);
}

/* MENSAJES GLOBALES */
.mi-mensaje-agradecimiento,
.mi-mensaje-exito,
.mi-mensaje-error {
    padding: 20px;
    margin: 30px auto;
    max-width: 600px;
    border-radius: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mi-mensaje-exito {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #c3e6cb;
}
.mi-mensaje-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #f5c6cb;
}
.mi-mensaje-agradecimiento:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* PAGINACION GLOBAL */
.paginacion {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 10px;
}
.pagina-enlace,
.pagina-link,
.pagina-actual {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    text-decoration: none;
    border-radius: 4px;
    color: #333;
    background-color: #f2f2f2;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.pagina-enlace:hover,
.pagina-link:hover {
    background-color: var(--mypi-oscuro);
    color: #fff;
}
.pagina-actual,
.pagina-link.active {
    background-color: var(--mypi-claro);
    color: #fff;
    font-weight: bold;
    cursor: default;
}

/*
--- FIN DE LOS ESTILOS GLOBALES ---
A continuación, se conservan los estilos específicos de plugins o páginas que
serán clasificados y movidos a archivos de carga condicional más adelante.
*/

/* --- INICIO DE ESTILOS NO CLASIFICADOS --- */

.galeria-imagenes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    justify-items: center;
    align-items: center;
    margin-top: 10px;
}

.galeria-imagenes img {
    width: 100%;
    max-width: 600px; /* Tamaño máximo para pantallas grandes */
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.galeria-imagenes a:hover img {
    transform: scale(1.05);
}

/* Diseño responsivo para pantallas pequeñas */
@media (max-width: 768px) {
    .galeria-imagenes {
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
        justify-items: center; /* Centra las imágenes horizontalmente */
        align-items: center;
    }

    .galeria-imagenes img {
        max-width: 95%; /* Las imágenes ocuparán todo el ancho del contenedor */
        height: auto; /* Mantiene la relación de aspecto */
    }
}

.content-background {
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    padding: 20px;
    margin: 0 auto;
    max-width: 800px;
}

.content-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(235, 223, 223, 0.5); /* Ajusta el color y la opacidad aquí */
    z-index: 0;
}

.content-background * {
    position: relative;
    z-index: 1;
}








/* Cards */
.listado-grid {
    margin-top: 4rem;
    display: grid;
    gap: 2rem;
}
@media (min-width:991px) {
    .listado-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.card {
    background-image: linear-gradient(to bottom, transparent 0, rgb(0 0 0 / .7));
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}
.card:hover {
    transform: scale(1.05);
}
.card img {
    display: block;
    position: relative;
    z-index: -1;
    height: 40rem;
    object-fit: cover;
    transition: transform 500ms ease;
}
.card .contenido {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2rem;
}

.card p,
.card .contenido .meta a {
    color: var(--blanco);
    text-align: justify;
}

.card h3 {
    color: var(--blanco); /* Color del texto (opcional) */
    font-size: 2.6rem;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 0;
    text-shadow:
      -1px -1px 0 black,  /* Sombra superior izquierda */
      1px -1px 0 black,   /* Sombra superior derecha */
      -1px 1px 0 black,   /* Sombra inferior izquierda */
      1px 1px 0 black;    /* Sombra inferior derecha */
  }
.card .meta {
    font-size: 1.4rem;
    font-weight: 700;
    background-color: #25aab0;
    border-radius: 5px;
    width: 50%;
    padding-left: 2%;
}
.card .meta span {
    color: var(--mypi-claro);
}
/* Categorias en cards */
.card .post-categories {
    position: absolute;
    top: 2rem;
    left: 2rem;
    display: flex;
    gap: 2rem;
}
.card .post-categories li {
    background-color: var(--mypi-claro);
    padding: .5rem 1rem;
    border-radius: .5rem;
}
.card .post-categories a{
    color: var(--blanco);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.4rem;
}
@media (max-width: 479px) {
    .card .post-categories {
        position: absolute;
        top: 2rem;
        left: 2rem;
        display: flex;
        gap: 2rem;
    }
    .card .post-categories li {
        background-color: var(--mypi-claro);
        padding: .5rem 1rem;
        border-radius: .5rem;
    }
    .card .post-categories a{
        font-size: 1rem;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .card .post-categories {
        position: absolute;
        top: 2rem;
        left: 2rem;
        display: flex;
        gap: 2rem;
    }
    .card .post-categories li {
        background-color: var(--mypi-claro);
        padding: .5rem 1rem;
        border-radius: .5rem;
    }
    .card .post-categories a{
        font-size: 1.3rem;
    }
}

/* Información meta */
@media (min-width: 768px) {
    .meta-info{
        display: flex;
        justify-content: space-between;
    }
}
.post-categories {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

@media (max-width: 767px) {
    .meta-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .post-categories {
        font-size: 1.3rem;
    }

}

.post-categories {

}



.meta-info,
.meta-info-categoria {
    background-color: var(--gris-claro);
    border-radius: 5px;
    padding: 2rem;

}
.meta-info p,
.meta-info a,
.meta-info-categoria p,
.meta-info-categoria a {
    font-size: 1.6rem;
    font-weight: 700;
}
.meta-info span,
.meta-info-categoria span {
    color: var(--mypi-claro);
}

.compartir-redes-sociales {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

.compartir-redes-sociales h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.compartir-redes-sociales a {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    text-decoration: none;
    color: #333;
}

.compartir-redes-sociales a:hover {
    background-color: #e0e0e0;
}

.compartir-redes-sociales a .dashicons {
    margin-right: 5px; /* Espacio entre el icono y el texto */
    vertical-align: middle; /* Alinea verticalmente el icono con el texto */
}

/**Post*/
.imagen-destacada-post {
    display: block; /* Para que margin: 0 auto funcione */
    margin: 3rem auto;  /* Centra horizontalmente */
    width: 50%;      /* Establece el ancho al 60% del contenedor */
    height: auto;     /* Mantiene las proporciones */
    object-fit: cover; /* Cubre el área manteniendo la proporción y recortando si es necesario */
    object-position: center center; /* Centra la imagen dentro de su contenedor */

  }

  .aligncenter{
    display: block; /* Para que margin: 0 auto funcione */
    margin: 0 auto;  /* Centra horizontalmente */
    width: 80%;      /* Establece el ancho al 60% del contenedor */
    height: auto;     /* Mantiene las proporciones */
    object-fit: cover; /* Cubre el área manteniendo la proporción y recortando si es necesario */
  }
  .alignright {
    float: right; /* Alinea el elemento a la derecha */
    margin: 0 0 1em 1em; /* Espacio alrededor del elemento (opcional) */
  }

  .alignleft {
    float: left; /* Alinea el elemento a la derecha */
    margin: 0 0 1em 1em; /* Espacio alrededor del elemento (opcional) */
  }

  .text-post {
    font-size: 5rem;
  }
  /* .contenido-post p{
    text-align: justify !important;
  } */







/* Contenedor principal */
.container {
    display: flex;
    justify-content: center;
}

.detalles-fila {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Distribución de las columnas en la primera fila */
    grid-template-rows: 2fr 1fr;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Estilos responsivos */
.detalles-usuario,
.detalles-fecha,
.detalles-experiencia,
.detalles-sin-datos {
    padding: 5px;
}

.detalles-experiencia {
    grid-column: span 3;
    width: 95%;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow-wrap: break-word; /* Asegura que el texto se ajuste dentro del contenedor */
}

@media (max-width: 768px) {
    .detalles-fila {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dos columnas en pantallas pequeñas */
        grid-template-rows: auto auto auto; /* Ajuste automático de filas */
    }

    .detalles-usuario {
        grid-column: 1 / 3; /* Ocupa ambas columnas */
    }

    .detalles-fecha {
        grid-column: 1 / 3; /* Ocupa ambas columnas */
        margin-bottom: 10px; /* Añade un margen inferior para separarlo de la experiencia */
    }

    .detalles-experiencia {
        grid-column: 1 / 3; /* Ocupa ambas columnas */
        width: 95%;
    }

    .detalles-resultado-item,
    .validar-similitud-container {
        grid-column: 1 / 3;
        width: 60%;
    }
    .validar-similitud-container {
        width: 100%;
    }
}

/* Estilos para las secciones sin datos */
.detalles-sin-datos {
    background-color: #ffcdd2;
    color: #b71c1c;
    border-radius: 3px;
    padding: 10px;
    font-style: italic;
}

.validar-similitud-container {
    grid-column: 1 / 4;
    width: 100%;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.similitud-porcentaje {
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    color: white;
}

.similitud-verde {
    background-color: green;
}

.similitud-amarillo {
    background-color: yellow;
    color: black;
}

.similitud-rojo {
    background-color: red;
}

/* Estilos para las secciones sin datos */
.detalles-sin-datos {
    background-color: #ffcdd2;
    color: #b71c1c;
    border-radius: 3px;
    padding: 10px;
    font-style: italic;
}




/*/mostrar nombre*/

/* Contenedor de búsqueda */
.contenedor-busqueda {
    display: flex;
    justify-content: center; /* Centra todo el contenido dentro del contenedor */
    align-items: center;
    gap: 100px; /* Añade espacio entre el formulario y el botón de enlace */
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; /* Centra el contenedor en la página */
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-direction: column; /* Para diseño responsivo inicial */
}

.form-busqueda {
    display: flex;
    align-items: center;
    gap: 5px; /* Mantiene juntos los elementos dentro del formulario */
    flex-direction: column; /* Para diseño responsivo inicial */
    width: 100%; /* Ajusta el ancho del formulario */
}

.label-busqueda {
    margin-right: 5px;
    font-weight: bold;
    margin-bottom: 5px;
}

.input-busqueda {
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%; /* Ajusta el ancho del input */
    margin-bottom: 10px; /* Espacio inferior entre los elementos */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

.btn-busqueda {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.btn-busqueda:hover {
    background-color: #0056b3;
}

/* Estilos para el contenedor principal de la página */
.contenedor-padre {
    display: flex;
    justify-content: center; /* Centra el contenedor hijo horizontalmente */
    width: 100%; /* Ocupa todo el ancho de la página */
}

/* Estilos para el contenedor principal */
.contenedor-principal {
    display: flex;
    justify-content: center;
    width: 80%; /* O el ancho que prefieras */
    max-width: 1200px; /* Un ancho máximo opcional */
    padding: 5px; /* Espaciado alrededor */
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
}

/* Contenedor del ranking */
.ranking-container {
    background-color: #8f8c8c77; /* Fondo gris para el contenedor */
    border-radius: 15px;
    width: 100%;
    padding: 10px 0;
}

.ranking-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center; /* Centra verticalmente los elementos */
    background-color: #b0bdf3;
    border: 3px solid #ddd; /* Borde opcional */
    margin: 1px;
    padding: 5px;
    border-radius: 5px;
    gap: 10px;
    width: 800px;
}

.ranking-promedio {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #000;
    color: yellow;
    padding: 5px;
    border-radius: 5px;
    width: 150px;
}

.ranking-promedio img {
    width: 100px; /* Ajusta el ancho de la imagen */
    height: auto; /* Mantiene la proporción original de la imagen */
}

.ranking-posicion {
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
}

.ranking-posicion h3 {
    background-color: #19104d;
    color: #ddd;
    font-size: 14px;
    border-radius: 15px;
    padding: 5px;
    margin: 0%;
}

.ranking-posicion,
.ranking-promedio,
.botones-ranking,
.ranking-nombre {
    display: flex;
    align-items: center;
}

.ranking-nombre {
    width: 420px;
    gap: 5px;
}

.boton_prom {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    font-size: 14px;
    color: #fff;
    background-color: var(--mypi-claro);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.boton_prom:hover {
    background-color: var(--mypi-oscuro);
}

@media (max-width: 900px) {
    .contenedor-busqueda {
        flex-direction: column;
        justify-content: center;
        width: 95%;
    }

    .form-busqueda {
        flex-direction: column;
        gap: 15px; /* Ajusta el espacio entre los elementos */
        width: 100%; /* Asegura que el formulario ocupe todo el ancho disponible */
    }

    .ranking-item {
        width: 100%;
    }

    .ranking-posicion {
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    .ranking-nombre {
        width: auto;
    }
}

.btn-toggle {
    padding: 10px 20px;
    background-color: var(--mypi-claro);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}

.btn-toggle:hover {
    background-color: var(--mypi-oscuro);
}


/*  TABLA RANKING */




/* function mostrar_detalles_nombre() */
.detalles-contenedor-principal {
    display: grid;
    grid-template-columns: 1fr; /* Una columna para la información principal */
    gap: 20px; /* Espacio entre elementos */
    padding: 20px;
    background-color: #f4f4f4;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.detalles-informacion {
    display: flex;
    flex-direction: row; /* Distribuye los elementos en fila */
    align-items: center; /* Alinea verticalmente los elementos al centro */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    text-align: center; /* Alinea el texto al centro */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px; /* Espacio entre elementos */
}

.detalles-informacion h2 {
    margin: 0;
}

.detalles-informacion p {
    font-weight: bold;
}

.detalles-resultado-item {
    display: flex;
    flex-direction: column; /* Distribuye los elementos en fila */
    align-items: center; /* Alinea verticalmente los elementos al centro */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    text-align: center; /* Alinea el texto al centro */
    padding: 5px; /* Reduce el padding */
    border: 1px solid #ddd;
    border-radius: 10px; /* Reduce el radio de los bordes */
    background-color: var(--negro);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Reduce la sombra */
    margin-bottom: 10px; /* Reduce el espacio entre elementos */
    max-width: 500px; /* Define un ancho máximo */
    margin-left: auto;
    margin-right: auto; /* Centra horizontalmente */
    color: var(--blanco);
    font-size: 18px; /* Reduce el tamaño de la fuente */
    font-weight: bold ;
}

.global {
    display: flex;
    flex-direction: row;
    width: 300px;
    gap: 15px;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    margin: 0;
}


.resultados-abajo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Ajusta el número de columnas según el tamaño del contenedor */
    gap: 15px;
}
@media (max-width: 768px){
    .resultados-abajo {
        display: grid;
        grid-template-columns: repeat(2,1fr); /* Ajusta el número de columnas según el tamaño del contenedor */
        gap: 15px;
    }
}
.resultado-personal,
.resultado-laboral,
.resultado-economico,
.resultado-titulacion {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; /* Ajusta esto según el ancho que desees */
    max-width: 300px; /* Establece un ancho máximo opcional */
    margin: 0 auto; /* Centra los elementos */
}

.resultado-personal {
    background-color: var(--personal);
}
.resultado-laboral {
    background-color: var(--laboral);
}
.resultado-economico {
    background-color: var(--economico);
}
.resultado-titulacion {
    background-color: var(--titulacion);
}

.resultado-imagen {
    width: auto; /* Tamaño de la imagen */
    height: auto; /* Tamaño de la imagen */
    object-fit: contain; /* Mantiene la proporción de la imagen */
}

.resultado-texto {
    margin-top: 5px; /* Espacio entre la imagen y el texto */
    text-align: center;
    font-size: 18px; /* Tamaño del texto */
    font-weight: bold;
    color: var(--negro); /* Color del texto */
}

.resultado-promedio {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}


.titulo-informacion {
    justify-content: center;
    font-size: 30px;
}

.informacion-detalle {
    display: grid;
    grid-template-columns: 1fr; 
    text-align: center;/* Dos columnas con la segunda el doble de ancho que la primera */
    gap: 10px; /* Espacio entre columnas */
    padding: 10px;
    background-color: #f9f9f9; /* Color de fondo */
    border: 1px solid #ddd; /* Borde */
    border-radius: 8px; /* Bordes redondeados */
    max-width: 800px; /* Máximo ancho del contenedor */
    margin: 0 auto; /* Centra el contenedor horizontalmente */
}

.detalle-item {
    margin: 0; /* Quita margen predeterminado */
    padding: 5px; /* Espacio interno alrededor del texto */
    font-size: 16px; /* Tamaño del texto */
    color: var(--negro); /* Color del texto */
    font-weight: bold;
    text-align: center;
}

.detalles-de {
    display: flex;
    justify-content: right;
    font-size: 20px;
    font-weight: bold;
    color: var(--mypi-claro);
    margin-top: 40px;
    margin-right: 70px;
}
/* /function mostrar_detalles_nombre() */





/* FORMULARIOS */


.seccion-instrucciones {
    background-color: var(--instrucciones);
}
.instrucciones {
    color: #007bff;
}

.seccion-usuario {
    background-color: var(--usuario);
}
.seccion-investigador {
    background-color: var(--investigador);
}
.seccion-personal {
    background-color: var(--personal);
}
.seccion-laboral { 
    background-color: var(--laboral);
}
.seccion-economico { 
    background-color: var(--economico);
}
.seccion-titulacion{ 
    background-color: var(--titulacion);
}
.seccion-instrucciones,
.seccion-usuario,
.seccion-investigador,
.seccion-personal,
.seccion-laboral,
.seccion-economico,
.seccion-titulacion{ 
    padding: 50px;
    border-radius: 10px;
}
@media (max-width: 768px){
    .seccion-usuario,
    .seccion-investigador,
    .seccion-personal,
    .seccion-laboral,
    .seccion-economico,
    .seccion-titulacion{ 
        padding: 20px;
        border-radius: 10px;
    }

}

/* Estilo general para pantallas grandes */
#experiencia_personal {
    width: 100%;
    max-width: 600px;
    padding: 10px;
    border-radius: 5px;
}

/* Estilo para pantallas pequeñas (teléfonos) */
@media screen and (max-width: 480px) {
    #experiencia_personal {
        width: 90%; /* Ocupa el 90% del ancho disponible */
        max-width: 300px; /* Máximo de 300px para teléfonos */
    }
}


/* Contenedor para el título */
.contenedor-titulo {
    text-align: center;
    margin-bottom: 20px;
}

/* Título con estilo destacado */
.seccion-titulo {
    color: #fff;
    font-size: 36px;
    font-weight: 400;
}

/* Contenedor para las preguntas */
.contenedor-preguntas {
    background-color: var(--blanco);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Estilo para las etiquetas de las preguntas */
.seccion-pregunta {
    color: var(--negro);
    font-size: 18px;
    margin-bottom: 10px;
    display: block;
}
.pregunta {
    color: var(--color-pregunta);
    font-weight: bold;
}
.respuesta {
    color: var(--color-respuesta);
    font-weight: bold;
}
input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    transition: border-color 0.3s;
}

input:focus,
select:focus {
    border-color: #007bff;
    outline: none;
}

/* Contador de caracteres */
#caracteres_restantes {
    font-size: 0.9em;
    color: #888;
    display: block;
    margin-top: 5px;
}
label.required:before {
    content: ' *';
    color: red;
    font-weight: bold;
    font-size: 22px;
}

.resaltar-opcion {
    font-weight: bold;
    color: #0c3313; 
    background-color: #94f387; 
}

/* Lista de opciones */
ul {
    list-style: none;
    padding-left: 0;
}

ul li {
    margin: 5px 0;
}

ul li label {
    margin-left: 5px;
}
/* FORMULARIOS */


/* BOTONES */
button,
.btn-busqueda,
.btn-enviar,
.boton-correo {
    padding: 10px 20px;
    background-color: var(--mypi-claro);
    color: white;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.btn-busqueda:hover {
    background-color: var(--mypi-oscuro);
}
button:hover,
.btn-enviar:hover,
.boton-correo:hover,
.btn-busqueda:hover {
    background-color: var(--mypi-oscuro);
}
/* Estilos para el botón */
.boton-correo {
    display: inline-block;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.mensaje-problema{
    display: none;
}

@media screen and (min-width: 1000px){
.mensaje-problema {
    display: block;
    margin-top: 15px;
    font-size: 0.9rem;
    color: #555;
}

.correo-copiable {
    display: inline-block;
    padding: 5px;
    background-color: #f0f0f0;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    user-select: all;
}
}
/* Efecto al pasar el ratón */
.boton-correo:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
/* BOTONES */






.paginacion {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.pagina-link {
    display: inline-block;
    padding: 10px 15px;
    background-color: #f0f0f0; /* Fondo claro */
    color: #333;
    text-decoration: none;
    border-radius: 5px; /* Bordes redondeados */
    font-weight: 500;
    transition: background-color 0.3s, color 0.3s;
}

.pagina-link:hover {
    background-color: var(--mypi-oscuro); /* Color de fondo al pasar el cursor */
    color: #fff;
}

.pagina-link.active {
    background-color: var(--mypi-claro); /* Color de fondo para el enlace activo */
    color: #fff;
    font-weight: bold;
}


/* Estilos para el contenedor */
.contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 50vh;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

/* Texto de acompañamiento */
.contacto p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 20px;
    text-align: center;
}




/* Estilos generales para el contenedor del mensaje */
/* Estilos base para mensajes de agradecimiento */
.mi-mensaje-agradecimiento {
    padding: 20px;
    margin: 30px auto;
    max-width: 600px;
    border-radius: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Estilos para mensaje de éxito */
.mi-mensaje-exito {
    background-color: #d4edda; /* Verde claro */
    color: #155724; /* Verde oscuro */
    border: 2px solid #c3e6cb;
    /* Hereda el resto de estilos base */
}

/* Estilos para mensaje de error */
.mi-mensaje-error {
    background-color: #f8d7da; /* Rojo claro */
    color: #721c24; /* Rojo oscuro */
    border: 2px solid #f5c6cb;
    /* Hereda el resto de estilos base */
}

/* Efecto al pasar el mouse */
.mi-mensaje-agradecimiento:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}



/*Paginacion*/
/* Estilos para la paginación */
.paginacion {
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center;
    margin: 20px 0;
}

.pagina-enlace,
.pagina-actual {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    text-decoration: none;
    border-radius: 4px;
    color: #333;
    background-color: #f2f2f2; /* Fondo gris claro */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.pagina-enlace:hover {
    background-color: #ddd; /* Gris un poco más oscuro al pasar el mouse */
    color: #333;
}

.pagina-actual {
    background-color: #562090; /* Fondo morado para la página actual */
    color: #fff;
    cursor: default; /* Cursor normal para indicar que no es un enlace */
}

@media (max-width: 768px) {
    .paginacion {
        justify-content: space-around;
        flex-wrap: wrap; /* Permitir que los elementos pasen a la siguiente línea en pantallas pequeñas */
        gap: 5px; /* Espaciado para cuando pasan a la siguiente línea */
    }

    .pagina-enlace,
    .pagina-actual {
       font-size: 1.1rem; /* Tamaño de letra más pequeño en pantallas pequeñas */
       padding: 6px 10px;
    }
}







/*MODIFICAR DATOS*/
.mypi-promedios-container {
    margin: 20px auto;
    max-width: 95%;
    font-family: Arial, sans-serif;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.mypi-promedios-container h3 {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.mypi-promedios-container ul {
    list-style: none;
    padding: 0;
}

.mypi-promedios-container li {
    margin-bottom: 5px;
    display: grid;
    /* MODIFICADO: Aumenta el ancho de las columnas del nombre y el correo */
    grid-template-columns: 1fr 3fr 2fr 2fr; /* Define las columnas */
    align-items: center;
    font-size: 16px;
    gap: 10px;
}

.mypi-promedios-container .id {
    font-weight: bold;
    color: #333;
    grid-column: 1;
    text-align: right;
}

.mypi-promedios-container .nombre {
    color: #555;
    grid-column: 2;
    word-break: break-word;
}

.mypi-promedios-container .email {
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mypi-promedios-container .botones-container {
    grid-column: 4;
    display: flex;
    justify-content: flex-end;
    gap: 5px;
}

.mypi-promedios-container .ver-comentarios-button,
.mypi-promedios-container .validar-ingreso-button {
    padding: 5px 10px;
    background-color: var(--mypi-claro);
    color: white;
    font-weight: bold;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.3s ease;
}

.mypi-promedios-container .ver-comentarios-button:hover,
.mypi-promedios-container .validar-ingreso-button:hover {
    background-color: var(--mypi-oscuro);
}

/*MODIFICAR DATOS*/



/*Tabla de validación*/

/* Estilos para el formulario de validación */

/* Contenedor principal para los filtros */
.validation-filter-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem; /* Espacio entre los elementos de filtro */
    margin-bottom: 20px;
}

.validation-filter-container h2{
  font-size: 1.8rem;
  margin: 0;
}

/* Contenedor para el input de filtro por ID */
#filter-input-container {
    display: none; /* Oculto por defecto */
    margin-left: 10px;
}

#filter-input-container input[type="number"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Estilos para los botones de filtro */
.validation-filter-container .button {
    padding: 10px 15px;
    border: none;
    background-color: #007bff; /* Color azul */
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}
 .validation-filter-container .button:hover {
    background-color: #0056b3; /* Color azul más oscuro */
}


/* Contenedor para la lista de validaciones */
#validation-list-container {
   margin-top: 20px;
}


/* Estilos para la tabla */
.ranking-container{
   overflow-x: auto; /* Para que la tabla sea responsive en pantallas pequeñas */
    margin-bottom: 20px;
}

.wp-list-table {
    width: 100%;
    border-collapse: collapse;
}

.wp-list-table th,
.wp-list-table td {
    padding: 10px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.wp-list-table th {
   background-color: #f2f2f2;
    font-weight: bold;
}

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

/* Estilos para los select */
.wp-list-table select {
   padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100px;
}

/* Contenedor para botones */
.container {
    text-align: center;
}

.button-primary {
    padding: 12px 20px;
    background-color: #28a745; /* Color verde */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
     transition: background-color 0.3s;
    margin-top: 10px;
}
 .button-primary:hover {
    background-color: #1e7e34; /* Color verde más oscuro */
}

/* Estilos para los mensajes de error y éxito */
p[style*="color: red;"] {
    color: #dc3545; /* Rojo para errores */
    font-weight: bold;
    margin-bottom: 10px;
}
p[style*="color: green;"] {
    color: #28a745;  /* Verde para éxito */
    font-weight: bold;
     margin-bottom: 10px;
}

/* Estilos para mejor legibilidad en dispositivos pequeños */
@media (max-width: 768px) {
   .validation-filter-container {
        flex-wrap: wrap;
    }
    .validation-filter-container button {
      margin-bottom: 0.5rem;
    }
    .wp-list-table th,
   .wp-list-table td{
    font-size: 0.9rem;
    padding:8px;
   }

   .wp-list-table select {
     width: 80px;
   }
    .validation-filter-container h2 {
        font-size: 1.5rem;
    }
}






/*administracion*/

/* Estilos para la página de administración */
.admin-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 20px; /* Añadido padding para mejor espacio */
    box-sizing: border-box; /* Incluir padding en el ancho */
}

.admin-content {
    text-align: center;
    max-width: 800px; /* Limitar el ancho para mejor legibilidad */
    width: 100%; /* Asegurarse de que el contenido ocupe el ancho */
    padding: 20px; /* Añadido padding al contenedor */
    border: 1px solid #ddd; /* Agregado un borde sutil */
    border-radius: 8px; /* Añadido un borde redondeado */
    background-color: #fff; /* Fondo blanco para mejor contraste */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-left: auto;
    margin-right: auto;
}


.admin-content .welcome-message {
  font-size: 2em; /* Aumentar el tamaño de la fuente */
  font-weight: 600; /* Texto en negrita */
  color:#333; /* Color más oscuro para mayor contraste */
  margin-bottom: 1.5em;
  line-height: 1.4;
  letter-spacing: 0.5px; /* Añadido espaciado entre letras */
}

.admin-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2em 0; /* Espacio vertical para separación */
}

.admin-buttons a.button {
    display: inline-block;
    padding: 12px 25px; /* Aumentar padding */
    border-radius: 8px; /* Bordes redondeados */
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem; /* Aumentar el tamaño de la fuente */
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 500; /* Peso de la fuente un poco más fuerte */
    background-color: var(--mypi-claro);
}


.admin-buttons a.button:hover {
    opacity:0.8;
}

/* Mensaje para usuarios no conectados */
.admin-content > p {
    font-size: 1.1rem;
    color: #777; /* Color más sutil para un mensaje secundario */
    line-height: 1.6;
}


/* Estilos adicionales para mejor legibilidad en dispositivos pequeños */

@media (max-width: 768px) {
  .admin-content {
        padding: 15px;
    }
    .welcome-message {
        font-size: 1.6em;
    }
    .admin-buttons a.button {
        font-size: 1rem;
         padding: 10px 20px;
    }

    .admin-buttons{
       flex-direction: column; /* Apilar los botones verticalmente en pantallas pequeñas */
       align-items: center;
       gap:0.5rem;
    }
}