body{ 
    background-color: #ecf0f5;
    padding: 0;
    margin: 0;
}

.imgArt{
    height: 200px;
    max-width: 100%;
}
h6{
    height: 35px;
}

.caja-informe{
    background: white;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 10px;
    border: 1px solid #CCCCCC;
}
.caja-categoria{
    background: white;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 5px;
} 
.container{
    width: 100%;
    
}
.col-3{
    width: 32%;
    display: inline-block;
}
.col-12{
    width: 99%;
}

#contenedor {
    text-align: left;
    width: 100%;
    margin: auto;
}

#lateral {
    width: 20%;  /* Este será el ancho que tendrá tu columna */
    float:left; /* Aquí determinas de lado quieres quede esta "columna" */
    margin-bottom: 20px;
    position: fixed;
    background-color: var(--principal-gray);
    max-height: 97%;
    height: auto;
    overflow-y: auto;
}

#principal {
    width: 75%;
    float: right;
    background-color: #FFFFFF;
}


#auto{
	padding: 10px;
	background: orange;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0px 0px 1px #000;
	display: inline-block;
	position: fixed;
	z-index: 1000;
    top: 50px;
    right: 20px;
}
#ocultar{
	background: #94b5f0;
	cursor: pointer;
	display: inline-block;
	position:  absolute;
	z-index: 1000;
    right: 0;
    margin-right: 10px;
    padding: 0px 20px 5px 20px;
}

#auto:hover{
	opacity: .8;
}

#auto:hover{
	opacity: .8;
}
#div-mostrar{
    position: fixed; /* Fija el elemento en la ventana gráfica */
      top: 0;         /* Lo ubica en la parte superior */
      left: 0;       /* Lo ubica en la parte derecha */
      background-color: #5E7AAA;
      padding: 10px;
      z-index: 999;
      overflow: scroll;
      height: calc(var(--viewport-height));
}
#auto:hover + #div-mostrar{
	height: 100px;
}

.mi-div{
 margin-bottom: 20px;   
 background-color: #5E7AAA;
}
.mi-div.fijo {
    position: fixed;
    top: 0; /* Se fija en la parte superior */
    left: 0;
    width: 100%;
    z-index: 999;
    display: block;
}
.mi-div a {
    color: white;
}		
.mi-div ul li {
    background-color: #7691BF;
}
ul {
    list-style: none; /* Removes default bullet points */
    padding: 0;
    margin: 0;
}

ul li {
    display: inline-block;
    margin-right: 10px; /* Adjust spacing between items */
    padding: 10px;
    cursor: pointer;
}
ul li a, a:hover {
    text-decoration: none;
}
ul li:hover {
    text-decoration: none;
    background-color: darkgrey;
}