/*
Theme Name: dap_theme
Author: IRTIC
Text Domain: dap_theme
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 5.6
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments

Based on Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

*{
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
    box-sizing: border-box;
}

html {
    margin-top: 0px !important;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

/*a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: dashed;
}

a:active {
	text-decoration: none;
}*/

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}

/** CUSTOM CODE **/

h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

h2, h3 {   
    font-family: 'Poppins Light', sans-serif;
}

.content-container {
  flex-grow: 1; /* Allow the content container to grow and take up remaining vertical space */
  display: flex;
  align-items: stretch;
  min-height: 44.6rem;
}

.content-others {
  flex-grow: 1; /* Allow the content to grow and take up remaining vertical space */
  overflow-y: auto; /* Enable scrolling if the content exceeds the container height */
    
  padding-bottom: 3rem;
}

/*Contenedor grande con toda la página*/
.contenedor{
    width: 100%;
}

/*Contenedor con el Header y los botones de inicio*/
.header{
    width: 100%;
    background-color: aliceblue;
    height: 3.2rem;  
}

/*Flecha superior izquierda*/
.flecha {
    float: left;
}
.flecha img{
    float: left;
    height:2.5rem;
    width:2.5rem;
    position: absolute;
    margin-top: 0.3rem;
    margin-left: 0.3rem;
}

/*Texto al lado de la flecha (volver) */
#textovolver {
    float: right;
    font-size: 1.6rem;
    color: #002445 ;
    position: absolute;
    margin-left: 3.4rem;
    margin-top: 0.3rem;
}

#textouser {
    float: left;
    font-size: 1.6rem;
    color: #002445 ;
    position: absolute;
    margin-left: 92%;
    text-align: right;
    /*margin-right: 0.4rem;*/
    margin-top: 0.3rem;
}

/*Foto casa*/
.home-logo img{ 
    float: left;
    height:2.5rem;
    width: 3rem;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    margin-top: 0.4rem;
}

/*Líneas en la parte superior derecha*/
.barritas {
    float: right;
    height:1.5rem;
    width: 1.5rem;
    position: absolute;
    right: 0.3rem;
    margin-top: 0.9rem;
    cursor: pointer;
}

/*Texto al lado de las líneas (Usuario)*/
#usu{
    right: 1.4rem;
    position: absolute;
    margin-top: 0.3rem;
    float: right;
    font-size: 1.6rem;
    color: #002445 ;
    margin-right: 1rem;
    cursor: pointer; /* Cambiamos el cursor al pasar por encima */
}

/*Estilo del menú desplegable del header*/
.dropdown-menu {
    display: none;
    position: absolute;
    top: 3.4rem; /* Mostrar el menú debajo del elemento "usuario" */
    right: 0; /* Alinear el menú a la derecha */
    background-color: #7892ab; 
    min-width: 10rem;
    z-index: 1;
}

/*Los elementos se muestren en bloques*/
.dropdown-menu li {
    display: block;
}

/*Al pasar el ratón por encima de los bloques*/
.dropdown-menu li div:hover{
    background-color: #1a495d;
}

/*De que manera hacer que se muestren los bloques*/
.show {
    display: block;
}

/*Linea entre los dos divs*/
.linea {
    border-bottom: 0.1rem solid black;
}

/*Estilos del texto de "Mi cuenta"*/
#cuentatexto{
        text-align: center;
        font-size: large;
        color: white;
        display: block;
        padding: 0.7rem;
}

/*Estilos del texto de "Cerrar Sesión"*/
#sesiontexto{
    text-align: center;
    font-size: large;
    color: white;
    display: block;
    padding: 0.7rem;
}

/*Hacer que los enlaces no estén subrayados*/
a{
    text-decoration: none;
}

/* Contenedor donde está el título de la página*/
.title{
    width: 100%;
    background-color: #1a495D;
    justify-content: center;
    align-items: center;
    padding: 1.2rem;
    display: flex;
    min-height: 10rem;
} 

/*Título de la página*/
.title h1{
    color: #ffffff;
    font-size: 2.75rem;
    margin: 0;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

/*Migas de pan*/
.breadcrumb {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    background-color: #7892ab; 
    height: 1.5rem;
    padding-left: 0.5rem;
}

/*Color de los nombres de las migas de pan*/
.breadcrumb a {
    text-decoration: none;
    color: #ffffff;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
}  

/*Color de los nombres al pasar por encima*/
.breadcrumb a:hover {
    color: lightskyblue;
}

/*Color de las barritas entre los nombres*/
.breadcrumb span {
    margin: 0 0.2rem;
    color: #ffffff;
}

/*Bloque del medio con la información*/                
.contenido{
    width: 100%;
    height: auto;
    background-color: white;
    padding-bottom: 12rem;
}

/*Footer de todas las páginas*/
.footer{
    /*width: 100%;
    height: 12rem;
    background-color: #1a495D;
    margin-top: 0.5rem;*/
    
    align-items: center;
    text-align: center;
    height: 12rem;
    background-color: #1a495D;
}

/*Logo Catedra en el footer*/
.logofoot1{
    position: absolute;
    height: 5rem;
    width: 5rem;
    float: left;
    left: 14%;
}
.logofoot1 img{
height: 5rem;
width: auto;
margin-top: 3em;
}

/*Logo DAP360*/
.logo{
  position: absolute;
  height: 9rem ;
  width: 9rem;
  left: 50%;
transform: translateX(-50%);
}
.logo img{
    height: 9rem;
    width: auto;
    margin-top: 1.2em;
}

/*Logo UV en el footer*/
.logofoot2{
  position: absolute;
  height: 5rem;
  width: 17rem;
  right: 8%;
}
.logofoot2 img{
    height: 5rem;
    width: auto;
    float: right;
    margin-top: 3em;
}


/*TABLA EN LISTADO DE NIÑOS, NIÑAS Y ADOLESCENTES*/
#myTable {
    position: relative;
    left: 13%;
    border-collapse: collapse;
    width: 75%;
    margin-top: 7em;
    float: left;
  }
  /*Celdas de la tabla*/
  #myTable th,
  #myTable td {
    border: 0.1rem solid black;
    padding: 1rem;
    text-align: center;
  }
  
  /*Primera fila de la tabla*/
  thead{
    background-color: #b5d9fd;
    font-size: large;
  }

  /*Id*/
  .idtabla{
    max-width: 8rem;
  }
  
  /*Apellidos, Nombre*/
  .apellidos{
    max-width: 12rem;
  }
  
  /*Fecha de creación*/
  .fechacreacion{
    max-width: 5rem ;
  
    /*Fecha de última modificación*/
  }
  .ultimamod{
    max-width: 5rem;
  }

  /*Barra de búsqueda*/
input[type="text"], input[type="password"] {
    border: 0.1rem solid black;
    border-radius: 2rem; /* Hace que la barra de búsqueda tenga bordes redondeados */
    background-size: 1.9rem;
    
  }

.buscador-nna {
    position: absolute;
    width: 33%;
    left: 33%;
    margin-top: 2rem;
    padding: 0.8rem 6rem 0.8rem 0.8rem;
    background-image: url("img/lupa.png"); /* Ruta de la imagen personalizada */
    background-repeat: no-repeat; /* Hace que la imagen no se repita */
    background-position:  96% ; /* Posición de la imagen */
}

.nombre-doc {
    padding: 0.8rem 6rem 0.8rem 0.8rem;
    width: 80%;
}

td {
    padding: 8px;  
    font-size: 18.5px; 
    height: 40px;
    text-align: center;   
    background: #fff;     
    border-bottom: 1px solid rgb(54,95,145);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent;
}

tr.col-submen td{   
    background: rgb(238, 236, 236); 
}

  
th {
    font-size: 18px; 
    text-align: center;    
    font-weight: bold;     
    padding: 6px;     
    background: #e0edf9; /*#b8cce4;*/
    border-top: 1px solid rgb(54,95,145); 
    border-bottom: 1px solid rgb(54,95,145); 
    color: rgb(0, 0, 0);
}

.container-botones {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
}

.container-datos {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    margin-bottom: 1rem;
    background-color: aliceblue;
}

.container-datos p {
    margin-left: 3rem;
    margin-right: 3rem;
    font-weight: 600;
}

.button-1 {
    border-radius: 10px;
    padding: 1rem 2rem;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    background-color: #632523;
    color: white;
    word-wrap: break-word;
    white-space: normal;
    width: 90%;
    text-transform: uppercase;
}
.button-1 p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.button-2 {
    border-radius: 10px;
    padding: 1rem 2rem;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    background-color: #1a3d6f;
    color: white;
    white-space: normal;
    word-wrap: break-word;
    width: 90%;
    text-transform: uppercase;
}
.button-2 p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.button-3 {
    border-radius: 10px;
    padding: 1rem 2rem;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    background-color: rgb(107 63 98);
    color: white;
    white-space: normal;
    word-wrap: break-word;
    width: 90%;
    text-transform: uppercase;
}
.button-3 p {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.ficha-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    align-items: flex-start;
    margin-top: 2.5rem;
    margin-right: 10%;
    margin-left: 10%;
}

.ficha-content-single {
    display: flex;
    flex-direction: column; /* Align items vertically */
    justify-content: flex-start;
    width: 100%;
    height: auto;
}

.ficha-content-single table{
    font-size: 16px;    
    border-collapse: collapse;
    border-radius: 1em;
    overflow: hidden;
    border: 1px solid;
    box-shadow: 0px 0px 8px #AAD;
    width: 100%;
}

.doc-relevante,
.exp-vinc
{
    border-radius: 10px;
    padding: 1rem 2rem;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    background-color: #e0edf9;
    color: black;
    white-space: normal;
    word-wrap: break-word;
}

.title-exp-vinc {
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    display: flex;
    min-height: 6rem;
}

.title-exp-vinc h2{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    color: #1a495D;
    font-size: 2.2rem;;
}

.td-listado {    
    padding: 6px;  
    font-size: 18px; 
    text-align: center;   
    background: #fff;     
    border-bottom: 1px solid rgb(0, 0, 0);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent; 
}


.botones-graficos{
    display: flex;
    justify-content: center;
    align-items: center;  
    gap: 2rem;
}

.sortable, .tabla-informes {
    border-collapse: collapse;
    border-radius: 0.5em;
    overflow: hidden;
    border: 1px solid;
    padding: 10px;
    box-shadow: 0px 0px 8px #AAC;
    height: auto;
}

.tabla-informes td {
    text-align: left;
}

.td-listado-informe {
    text-align: center !important;
}

.caja-tabla-informes {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;  
    flex-direction: column;
}

.button-6 {
    padding: 15px 10px;
    border-radius: 6px;
    outline: none;
    width: 230px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: rgb(37,64,97);
    color: white;
}

.button-7 {
    padding: 15px 10px;
    border-radius: 2rem;
    outline: none;
    width: 150px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: rgb(37,64,97);
    color: white;
}

.container-selector {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}

.selector-eval {
    width: 60%;
    display: flex;
    gap: 10%;
    flex-direction: row;
    justify-content: center;
}

.selector-eval select {
    font-size: 16px;
    padding: 0.75rem;
    text-align: center;
    background-color: aliceblue;
    width: 100%;
    border-radius: 2rem;
    margin-top: 4px;
}

.selector-eval option {
    font-size: 16px;
    text-align: center;
    background-color: rgb(235, 240, 245);
}

.login-div {
    padding-top: 5.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#custom_loginform {
    border-collapse: collapse;
    border-radius: 0.75em;
    overflow: hidden;
    border: 1px solid;
    padding: 3rem;
    box-shadow: 0px 0px 8px #AAC;
    height: auto;
    background-color: aliceblue;
    justify-content: center;
    align-items: center;
}

.login-username, .login-password, .login-submit {
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 2rem;
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.login-username input, .login-password input {
    width: 100%;
    padding: 0.8rem 6rem 0.8rem 0.8rem;
}

.login-submit {
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    border-radius: 10px;
    padding: 1rem 2rem;
    margin-top: 1rem;
    border: none;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    background-color: #1a3d6f;
    color: white;
    white-space: normal;
    word-wrap: break-word;
    width: 60%;
    text-align: center;
}

.botones-eval {
    text-align: center;
    margin: 2%;
    padding: 1px 10px;
    width: 40%;
}

.seccion-I, .seccion-II, .seccion-III {
    width: 80%;
    margin-right: 10%;
    margin-left: 10%;
    padding: 2rem;
    background-color: aliceblue;
    align-content: center;
    align-items: center;
    border-radius: 10px;
}

.seccion-II {
    background-color: #fbefff;
}

.seccion-III {
    background-color: #f0efff;
    align-content: center;
    align-items: center;
}

.seccion-III-textarea{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; 
}

.seccion-III-textarea textarea{
    width: 80%;
    border-radius: 10px;
    padding: 1rem;
}

.seccion-I-title, .seccion-II-title{
    text-align: center;  
    font-size: 20px;
    padding-bottom: 1rem;
}

.grid-container, .grid-container-II, .grid-container-III {
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    padding: 10px;
    gap: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.grid-container-II {
    grid-template-columns: 25% 25% 25%;
    gap: 5%;
    margin-left: 15%;
}

.grid-container-III {
    grid-template-columns: 75%;
    gap: 5%;
    margin-left: 20%;
}

.grid-container button, .grid-container-II button, .grid-container-III button{
    border-radius: 10px;
    padding: 1rem 2rem;
    border: none;
    text-align: center;
    font-size: 18px;
    background-color: #1a3d6f;
    color: white;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    cursor: pointer;
}

.grid-container button:disabled, .grid-container-II button:disabled{
    border-radius: 10px;
    padding: 1rem 2rem;
    border: 1px solid #1a3d6f;
    text-align: center;
    font-size: 18px;
    background-color: aliceblue;
    color: black;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    cursor: default;
}

.button-top {
  background-color: #1a3d6f;
  color: white;
  padding: 0.5rem 1rem; /* Adjust top part padding */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.button-bottom {
  background-color: aliceblue;
  color: black;
  padding: 0.5rem 1rem; /* Adjust bottom part padding */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 18px;
  text-align: center;
}

.but-edit {
   position: -webkit-sticky; /* Safari */
   position: sticky;
   float: right;
   right: 40px; bottom: 50%;
   width: 100px; 
}

.but-edit button{
   width:80px; 
   background-color: #4CAF50; /* Green */
   border: none;
   color: white;
   padding: 15px 15px;
   text-align: center;
   text-decoration: none;
   /* display: inline-block; */
   font-size: 16px;
}

.but-edit button:disabled {
   width:80px; 
   background-color: darkgrey; /* Green */
   border: none;
   color: dimgrey;
   padding: 15px 15px;
   text-align: center;
   text-decoration: none;
   /* display: inline-block; */
   font-size: 16px;
}

.titulo-bloque {
    background-color: #1a495D !important;
    color: white;
    padding-left: 1rem;
}

/*Botones evaluación*/
.botonesevaluar {
    position: fixed;
    display: flex;
    padding: 1rem 0;
    gap: 2rem;
    top: 50%; /* Stick to the right */
    right: 5px;
    transform: translateY(-50%);
    flex-direction: column; /* Stack the buttons vertically */
}

.botonesver {
    position: fixed;
    display: flex;
    padding: 1rem 0;
    gap: 0rem;
    top: 50%; /* Stick to the right */
    right: 5px;
    transform: translateY(-50%);
    flex-direction: column; /* Stack the buttons vertically */
}

.b-eval1, .b-eval2, .b-eval3, .b-eval4, .b-index, .b-sig, .b-ant {
    background-color: #1a495D;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border: none;
    color: white;
    border-radius: 10px;
    background-image: url(./assets/images/back.png);
    background-repeat: no-repeat;
    background-size: 2.5rem;
    background-position: 50%;
    cursor: pointer;
}

.b-eval1:disabled, .b-eval2:disabled, .b-eval3:disabled, .b-eval4:disabled, .b-index:disabled, .b-sig:disabled, .b-ant:disabled{
    background-color: #777;
    cursor: default;
}

.b-eval2, .b-eval2:disabled{
    background-image: url(./assets/images/edit.png);
}

.b-eval3, .b-eval3:disabled {
    background-image: url(./assets/images/save.png);
}

.b-eval4, .b-eval4:disabled {
    background-image: url(./assets/images/cancel.png);
}

.b-sig, .b-sig:disabled {
    background-image: url(./assets/images/next_w.png);
}

.b-ant, .b-ant:disabled {
    background-image: url(./assets/images/prev.png);
}

.eval-ind-div {
    width: 80%;
    margin-left: 10%;
}

.eval-view-table {
    width: 80%;
}

.opciones-check {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 1024px) {
    .ficha-content {
        grid-template-columns: 1fr;
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .ficha-content-single {
        width: 100%;
    }
    .ficha-content-single table{   
        padding-bottom: 1.2rem;
        width: 100%;
    }
    .tabla-izq,
    .tabla-der {
        float: none;
    }
    .container-datos {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .botones-graficos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        grid-row-gap: 0.1rem;
        align-items: center;
        width: 99%;
    }
    .breadcrumb {
        font-size: 1rem;
    }
    .button-6 {
        width: 100%;
    }
    .button-1, .button-2, .button-3 {
        font-size: 14px;
        text-transform: uppercase;
    }
    .selector-eval {
        width: 80%;
    }
    .seccion-I, .seccion-II {
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
    }
    .grid-container, .grid-container-II {
        display: grid;
        grid-template-columns: 30% 30% 30%;
        padding: 10px;
        gap: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .container-datos {
        flex-direction: column;
    }
    .botonesevaluar {
        top: unset;
        bottom: 0; /* Stick to the bottom */
        left: 0;
        right: 0;
        justify-content: center; /* Center the buttons */
        flex-direction: row;
        gap: 2rem;
        transform: none;
    }
    .b-eval1, .b-eval2, .b-eval3, .b-eval4 {
        margin: 0.5rem;
    }
}

@media (max-width: 768px){
    .seccion-I, .seccion-II {
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
    }       
    .grid-container {
        display: grid;
        grid-template-columns: auto;
        padding: 10px;
        gap: 1rem;
        margin-left: 2rem;
        margin-right: 2rem;
    }
    .botones-eval {
        width: 100%;
    }
    .button {
        width: 90%;
    }
}


/* menu */

#menu ul {
    list-style:none;
    right: 0;
    position: absolute;
    margin-top: 0.2rem;
    float: right;
    font-size: 1.6rem;
    color: #002445 ;
    margin-right: 0.2rem;
    cursor: pointer;
    height: 1.6rem;
}

/* items del menu */

#menu ul li {
    background-color: aliceblue;
    
}

/* enlaces del menu */

#menu ul a {
    display: block;
    color: #1a495D;
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    padding: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* items del menu */

#menu ul li {
    position:relative;
    float:right;
    margin:0;
    padding:0;
}

/* efecto al pasar el ratón por los items del menu 

#menu ul li:hover {
    background: #1a495D;
    color: aliceblue;
}

/* menu desplegable */

#menu ul ul {
    display:none;
    position:absolute;
    top:100%;
    background: aliceblue;
    padding:0;
    margin-top: 1.8rem;
    float: right;
    margin-right: 0px;
    
    font-weight: 600;
}

/* items del menu desplegable */

#menu ul ul li {
    float:none;
    width:150px;
}

/* enlaces de los items del menu desplegable */

#menu ul ul a {
    line-height:120%;
    padding:10px 15px;
}

/* items del menu desplegable al pasar el ratón */

#menu ul li:hover > ul {
    display:block;
}

#menu ul ul li:hover {
    display:block;
}

/********************************* Versión anterior *******************/

#list-post-panel ul { width : 100%; list-style:none; }
#list-post-panel li{ 
 width: 90%;
 margin: 1%;
 padding: 1%;
 float: center;
 background: #eee;
 list-style: none;
 text-align: center;
 border: 1px solid #cfcfcf; 
}

/*
.button1 {
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    
    cursor: pointer;
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}
*/
/*
*{
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

*::before{
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

*::after{
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}*/

body{
    margin: 0;
    color: black;
}

.topbar-container{
    margin: auto;
    padding: 20px;
    /*background-color: #b8cce4;*/
    
    background: rgb(0,98,147);
    background: radial-gradient(circle, rgba(0,98,147,0.6307277628032345) 0%, rgba(237,237,237,1) 39%, rgba(237,237,237,1) 55%, rgba(215,15,47,0.7789757412398922) 100%);
    
    margin: 0;
    text-align: center;
}

.texto-titulo{
    color: rgb(0, 0, 0);
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 2em;
    font-weight: bold;
}

.topnav {
  overflow: hidden;
}

.topnav button {
  float: right;
  color: black;
  text-align: center;
  padding: 11px 22px;
  font-size: 17px;
  background: none;
  border: none;
  cursor:pointer;
}

/* Para que no se rompa con la nueva versión
.footer {
    margin-top: 6%;
    margin-bottom: 5%;
    text-align: center;
} */

.footer2 {
    margin-top: 5%;
    margin-bottom: 1%;
    text-align: center;
}

.caja-tabla-menor{
    margin: auto;
    padding-top: 1%;
    padding-left: 15%;
    padding-right: 15%;
}

/* Para que no se rompa con la nueva versión
table {      
    font-family: 'Roboto', sans-serif;  
    margin: auto;     
    width:100%; 
    text-align: left;    
    border-collapse: collapse; 
    border: 1px solid rgb(54,95,145); 
}*/

/* Para que no se rompa con la nueva versión
.contenido {    
    padding: 8px;  
    font-size: 18.5px;    
    color: rgb(0, 0, 0);
    border-bottom: 1px solid black;
    text-align: right;
}*/

.dato{
    padding: 8px;  
    font-size: 18.5px;
    font-weight: bold;    
    color: rgb(0, 0, 0); 
    border-bottom: 1px solid black; 
}

hr{
    height: 4px;
    background-color: black;
    margin: auto;
}

.linea-nombre{
    height: 2px;
    background-color: black;
    margin: auto;
    width: 50%;
}

.nombre{
    margin: auto;
    text-align: center;
}

.nombre-menor{
    padding-top: 4%;
    color: rgb(0, 0, 0);
    margin: 0;
    font-weight: 400;
    font-size: 33px;
}

/*
.button {
    border-radius: 10px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}*/

/*

.button-3 {
    border-radius: 10px;
    padding: 10px 22px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: rgb(54,95,145);
    color: white;
}
*/
.button-4 {
    border-radius: 10px;
    padding: 10px 22px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: rgb(37,64,97);
    color: white;
}

.button-5 {
    border-radius: 10px;
    padding: 10px 22px;
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    background-color: rgb(77,66,90);
    color: white;
}

.boton-nuevaEval{
    margin: auto;
    float: center;
}

.boton-historial{
    margin: auto;
    float: center;
}

.boton-docum{
    margin: auto;
    float: center;
}

.boton-registrareval {
    margin: auto;
    float: center;
}

.botones{
    margin: auto;
    padding-top: 4%;
    float: left;
}

.confirmation-dialog {
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.confirmation-dialog p {
    font-size: 18px;
    margin: 0;
    padding: 10px;
}

.button-container {
    margin-top: 20px;
}

.button-confirm {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    background-color: #1a495D;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.button-cancel {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    background-color: #922;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

/* Para que no se rompa con la nueva versión
a{
 text-decoration: none;
 color: rgb(0, 0, 0);
}

.container{
    display: flex;
    justify-content: center;
    padding-top: 2%;
}*/

/* Para que no se rompa con la nueva versión
.caja-tabla{
    margin: auto;
    padding-top: 3%;
    padding-left:3% ;
    padding-right:3% ;
}

.caja-tabla-2{
    margin: auto;
    padding-top: 3%;
    padding-left:6% ;
    padding-right:6% ;
}*/

.intro-texts{
    margin: auto;
    padding-left:10% ;
    padding-right:10% ;
}

.intro-texts p{
    color: black;
    font-weight: bold;
}

.historial-eval {    
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 19px;    
    margin: auto;     
    width:100%; 
    text-align: left;    
    border-collapse: collapse; 
    border: 1px solid rgb(54,95,145); 
}

.table-2 {    
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;*/
    font-size: 16px;    
    margin: auto;     
    width:100%; 
    text-align: left;    
    border-collapse: collapse;
    border-radius: 1em;
    overflow: hidden;
    border: 1px solid;
    padding: 10px;
    box-shadow: 0px 0px 8px #AAD;
}

.dato-1 {    
    padding: 8px;  
    font-size: 19px; 
    text-align: left;   
    background: #ffff;     
    border-bottom: 1px solid rgb(54,95,145);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent; 
/*    font-family: 'Roboto', sans-serif; */
}

.dato-2 {    
    padding: 8px;  
    font-size: 19px; 
    text-align: left;   
    background: #ffff;     
    border-bottom: 1px solid rgb(54,95,145);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent; 
    width: 50%;
/*    font-family: 'Roboto', sans-serif; */
}

.dato-3 {    
    padding: 8px;  
    font-size: 19px; 
    text-align: left;   
    background: #ffff;     
    border-bottom: 1px solid rgb(54,95,145);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent; 
    width: 33%;
/*    font-family: 'Roboto', sans-serif;  */
}

.contenido-2 {    
    padding: 8px;
    text-align: right;
    background: #e4e4e4;     
    border-bottom: 1px solid rgb(54,95,145);
    color: rgb(0, 0, 0);    
    border-top: 1px solid transparent; 
/*    font-family: 'Roboto', sans-serif; */
}

.seccion {     
    font-size: 18px; 
    text-align: center;    
    font-weight: bold;   
    font-family: 'Roboto', sans-serif; 
    padding: 6px;     
    background: #b8cce4;
    color: black;
    border-top: 1px solid rgb(54,95,145); 
    border-bottom: 1px solid rgb(54,95,145); ; 
}

.resultado{
    font-size: 18px; 
    text-align: left;    
    font-weight: bold;     
    padding: 6px;     
    background: #479289;
    border-top: 1px solid #000000; 
    border-right: 2px solid #000000; 
    border-bottom: 1px solid #000000; 
    color: rgb(0, 0, 0); 
}

.linea-nombre-tabla{
    height: 4px;
    background-color: black;
    margin: auto;
    width: 50%;
}

.titulo-tabla{
    margin: auto;
    text-align: center;
    padding-top: 5%;
}

.nombre-tabla{
    padding-top: 4%;
    color: rgb(0, 0, 0);
    margin: 0;
    font-size: 33px;
}

.circulo-verde {
    width: 40px;
    height: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5cb85c;
}

.circulo-amarillo {
    width: 40px;
    height: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #f5f243;
}

.circulo-rojo {
    width: 40px;
    height: 40px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #ac4343;
}

.espacio{
    font-size: 18px; 
    text-align: left;    
    font-weight: bold;     
    padding: 6px;     
    color: rgb(0, 0, 0); 
}

/*table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid rgb(0, 0, 0);
}*/

tr.border_bottom td{
    border-bottom: 1px solid rgb(217,217,217);
}

tr.border_bottom_index_table td{
    border-bottom: 1px solid rgb(54,95,145);
}


    
tr:nth-child(even) {
    background-color: #cacaca;
}

.sortable tr:hover {
    background-color: aliceblue;
}

.sortable tr:hover td {
    background-color: transparent; /* or #000 */
}

hr{
    height: 4px;
    background-color: black;
    margin: auto;
}

.search-container {
    float: left;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

/*
input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 19px;
    border: 2px solid #000000; 
    width: 100%;
}
*/

.botonespaginas {
    text-align: center;
    
}

.next,
.previous,
.indice,
.botgraf{
padding: 15px 10px;
border-radius: 6px;
background: #b8cce4;
color: black;
border:0;
outline: none;
cursor: pointer;
width: 200px;
}

.next.disable,
.previous.disable{
  cursor: auto;
  opacity: .5;
}

/* Para que no se rompa con la nueva versión
h3{
    color: black;
    font-size: 26px;
    font-family: 'Roboto', sans-serif;
}*/

.test{
    margin: auto;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 4.5%;
}

.botones {
text-align: center;
}

/* Para que no se rompa con la nueva versión
input[type=radio] {
    border: 0px;
    width: 100%;
    height: 1.2em;
}*/
label {
    margin: -25px 0 0 0;
    height: 25px;
    width: 25px;
}
label input {
    visibility: hidden;
}
label img {
    display: inline-block;
    padding: 0px;
    height:25px;
    width:25px;
    background: white;
}
label input:checked +img {  
    /*background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);*/
    background: url(./assets/images/check_black.png);
    background-repeat: no-repeat;
    background-position:center center;
    background-size:25px 25px;
    background-color: white;
}


.caja-tabla-listado{
    padding: 4%;
}

.table-listado {    
    /*font-family: 'Poppins', sans-serif;*/
    margin: auto;     
    width:100%; 
    text-align: left;    
    border-collapse: collapse; 
}

.th-listado {     
    font-size: 23px; 
    text-align: center;    
    font-weight: bold;     
    padding: 6px;     
    background: #53aaa0;
    border-top: 1px solid #000000; 
    border-left: 2px solid #000000; 
    border-right: 2px solid #000000; 
    border-bottom: 1px solid #000000; 
    color: rgb(255, 255, 255); 
}



.hr-listado{
    height: 4px;
    background-color: black;
    margin: auto;
}

.icon-wrp {
  position: relative;
  display: inline-block;
  width: 40px;
  vertical-align: top;
}

.section {
display: none;
}

.section.active{
display: contents;
}

.invisible {
    display: none;
}

.index-table {
    border-collapse: collapse;
    border-radius: 0.7em;
    overflow: hidden;
    border: 1px solid;
    padding: 10px;
    box-shadow: 5px 7px 18px #888888;
}

.index-table td{
    text-align: left;
    padding-left: 25px;
}

.index-table th{
    text-align: left;
    padding-left: 15px;
}


.ev-table {
    border-collapse: collapse;
    border-radius: 0.7em;
    overflow: hidden;
}

.ev-table td{
    text-align: left;
    font-size: 17px;
}

.ev-table th{
    text-align: left;
    background-color: rgb(217,217,217);
}

/*
.ev-table tr:nth-child(even) {
    background-color: #f2f2f2; 
}

.ev-table tr:nth-child(odd) {
    background-color: #fff; 
}*/

.leyenda {
    font-size: 10px;
    font-weight: normal;
    text-align: center !important;
}

.leyenda2 {
    font-size: 16px;
    text-align: center !important;
}

.idcol-ev {
    width: 3%;
}

.col1-ev {
    background-color: rgb(212,234,243)!important;
    text-align: center !important;
}

.col2-ev {
    background-color: rgb(198,228,190) !important;
    text-align: center !important;
}

.col3-ev {
    background-color: rgb(255,217,55) !important;
    text-align: center !important;
}

.col4-ev {
    background-color: rgb(192,0,0) !important;
    text-align: center !important;
    color: white;
}

.obj_obs {
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}

.obj_obs textarea{
    padding: 0.75rem;
    border-radius: 10px;ç
}

button.btn.back::before {
  font-family: fontAwesome;
  content: "\f053\00a0";
}

button.btn.user::before {
  font-family: fontAwesome;
  content: "\f007\00a0";
}

button.btn.exit::before {
  font-family: fontAwesome;
  content: "\f08b\00a0";
}

#headerimg {
    display: none !important;
}

/** SELECT TAG **/

.custom-select {
  position: relative;
}

/*
.custom-select select {
  /*display: none; /*hide original SELECT element:
} */

.select-selected {
  background-color: rgb(54,95,145);
  border-radius: 6px;
}

/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 20px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent; 
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 14px;
}

/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}

/*style items (options):*/
.select-items {
  position: absolute;
  background-color: rgb(54,95,145);
  color: white;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.2);
}

@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}