:root{
/* Generales*/
  --fuente-principal: 'Trueno Regular';/*Tipo de fuente que se utiliza para todo el contenido del sitio*/
  --fuente-secundaria: 'Trueno Semibold';/*Tipo de fuente opcional para algunas secciones del sitio*/
  --encabezado-color1: #02477B;/*Color para los elemento de tipo encabezado*/
  --encabezado-color2: #000000;/*Color alternativo para los elemento de tipo encabezado*/
  --enlace-color: #0071B3;/*Color base para los elementos de tipo enlace*/
  --enlace-color-hover:  #02477B;/*Color para los elementos de tipo enlace cuando recibe el foco del teclado o se posiciona el puntero sobre este*/
  --botón-color-fondo: #0071B3;/*Color de fondo para los elementos tipo botón*/
  --boton-color-texto: #ffffff;/*Color del texto del botón*/
  --botón-color-hover: #035484;/*Color de fondo para los elementos tipo botón cuando recibe el foco del teclado o se posiciona el puntero sobre este*/
  --pie-pagina-fondo-logos: #204C6F;/*Color de fondo para el bloque de logos de la página principal*/
  --aviso-principal-fondo: #005485; /*Color de fondo para el bloque del aviso principal*/
  --aviso-principal-texto: #ffffff; /*Color de fuente para el bloque del aviso principal*/
  --negro1: #000000;
}

/****************************************************************/
/*   ORGANIGRAMA                                                */
/****************************************************************/

.container.organigrama {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 750px;
}

.nivel-0, .nivel-1, .nivel-2, .nivel-3, .nivel-4 {
    display: flex;
    justify-content: center;
}

.area-org:hover,
.area-org:focus {
    background: var(--enlace-color-hover);
    color:var(--boton-color-texto)
}

.area-org {
    width: 100%;
    padding: 10px 5px;
    text-align: center;
}

.enlace-area {
    line-height: 30px;
    width: 25%;
    padding-left: 0;
}

.nivel-1 .enlace-area {
    width: 90%;
    margin: auto;
}

.nivel-2 .enlace-area,
.nivel-4 .enlace-area {
    width: 90%;
}

.nivel-3 .enlace-area {
    width: 90%;
}

.org-bloque {
    padding: 0;
    margin: 0;
}

.org-bloque p{
    color: #e3e3e3;
    padding:0;
}

.enlace-area-1 {
    padding: 0;
}

.nivel-3 .col-derecha-0 {
    flex-direction: column;
}

/* Construcción de líneas */

.col-izquierda-0 {
    height: 60px;
    border-right: 1px solid var(--negro1);
}

.col-izquierda-1 {
    height: 30px;
    border-right: 1px solid var(--negro1);
}

.col-izquierda-2 {
    border-right: 1px solid var(--negro1);
    padding: 0 5px 40px 0;
}

.col-izquierda-4 {
    padding: 0;
}

.col-centro-0 {
    padding: 0;
    height: 60px;
}

.col-derecha-0 {
    padding: 8px 0 0 0;
    height: 60px;
    display: flex;
}

.col-izq-vacia {
    border-right: 1px solid var(--negro1);
}

.col-vacia-1,
.col-vacia-2,
.col-vacia-3,
.col-vacia-4,
.col-vacia-5,
.col-vacia-6 {
    height: 40px;
    border-top: 1px solid var(--negro1);
}

.col-vacia-1,
.col-vacia-4 {
    border-left: 1px solid var(--negro1);
    border-right: 1px solid var(--negro1);
}

.bordes-nivel-3 .col-vacia-1,
.bordes-nivel-3 .col-vacia-2,
.bordes-nivel-3 .col-vacia-3,
.bordes-nivel-3 .col-vacia-4,
.bordes-nivel-3 .col-vacia-5,
.bordes-nivel-3 .col-vacia-6 {
    border-top: none;
}

.col-vacia-5 {
    border-left: 1px solid var(--negro1);
}

.col-vacia-6 {
    border-right: 1px solid var(--negro1);
}


.row-vacia {
    display: flex;
    justify-content: center;
 }
 
 .row-medio-izq {
     display: flex;
     justify-content: end;
 }
 
 .row-medio-der {
     display: flex;
     justify-content: start;
 }

 .row-vacia .col-izquierda-2,
 .row-vacia .col-derecha-2 {
    padding: 0;
 }

.row-nulo-0 {
    height: 30px;
    border-bottom: 1px solid var(--negro1);
}

.row-nulo-1 {
    height: 30px;
}

.row-vacia {
    display: flex;
    justify-content: center;
}


@media (max-width: 768px) { 
    .area-org,
    .area-nulo {
        font-size: 0.5rem;
    }

    .org-bloque p {
        font-size: 0.5rem;
        padding-top: 10px;
    }

    .area-org {
        padding: 0;
        height: 40px;
        display: table-cell;
        vertical-align: middle;
    }

    .nivel-0 .enlace-area,
    .nivel-1 .enlace-area {
        width: 30%;
    } 

    .nivel-3 .enlace-area {
        width: 30%;
    }

    .area-org {
        width: 100%;
    }

    .area-0,
    .area-1 {
        padding: 0 30px;
    }

    .enlace-area {
        line-height: 20px;
        padding: 3px;
    }

    .col-derecha-0 {
        padding: 10px 0 0 0;
        display: block;
    }

    .col-izquierda-1,
    .col-izquierda-2,
    .col-izquierda-3,
    .col-izquierda-4,
    .col-derecha-1,
    .col-derecha-2 {
        padding: 0;
    }

    .row-vacia .col-izquierda-2,
    .row-vacia .col-izquierda-4, 
    .row-vacia .col-derecha-2 {
        padding: 0;
        height: 1rem;
    }
}

/**** Region de modal ****/

button.ui-dialog-titlebar-close:before {
    content: "X";
    display: flex;
    justify-self: center;
    margin-top: -2px;
}