/* Estilos generales   (cortesía de @AaronCC) */

* {
   font-family: Arial;
}
body {
   margin: 0;
   padding: 15px;

}
select, input, button, textarea {
   font-size: 0.9em;
}

h1 {
   padding-top: 1%;
   padding-bottom: 1%;
   width: 100%;
   font-family: Arial;
   color: white;
   text-align: center;
   background-color: #b72223;
}
h1 > a {
   background-color: #b72223;
   text-decoration: none;
   color: white;
}
h2 {
   text-align: center;
}

.login {
   display: flex;
}
.login h3 {
   margin-right: 20px;
}

.menu {
   display: flex;
   justify-content: center;
   padding: 0;
   flex-direction: row;
   flex-wrap: wrap;
}
.menu > li {
   display: flex;
   width: calc(24% - 6px);
   margin: 3px;
   list-style: none;
}
.menu > li > a {
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   background-color: #b72223;
   border: solid 1px white;
   width: 100%;
   padding: 2% 0;
   text-decoration: none;
   color: white;
}
.menu > li > a:hover {
   background-color: #cf4330;
   color: #fdffc5;
}
@media (max-width: 720px) {
   .menu > li {
      width: calc(49% - 6px);
   }
}

.buscar {
   margin-left: 10px;
}

#tabla {
   width: 100%; border-collapse:collapse;
}

#tabla tr:nth-of-type(even) {
   background-color: #f2f2f2;
}

#tabla tr#header th {
   vertical-align: bottom;
}

#tabla tr#header th.rotar {
   writing-mode: tb-rl;
   text-align: right;
   vertical-align: center;
}

#tabla tr#orden {
   background-color: #dadada; 
}

#tabla tr#orden [data-orden] {
   cursor: pointer;
   background-color: #dadada; 
   
}
#tabla tr#orden [data-orden]:hover {
   box-shadow: 2px 2px #888888;
}

#tabla tr#orden [data-orden] span {
   display: inline-block;
   border: 0px solid black;
   padding: 3px;
   margin: 5px;
}

#tabla tr#orden [data-orden="ascendente"] span {
   border-width: 0px 3px 3px 0px;
   transform: rotate(45deg);
}
#tabla tr#orden [data-orden="descendente"] span {
   border-width: 0px 3px 3px 0px;
   transform: rotate(-135deg);
}

#tabla th, td {
   padding: 5px;
}

/* Estilos de funcionalidad */

body:not(.autenticado) .visible_autenticado, 
body:not(.admin) .visible_admin,
body:not(.visitante) .visible_visitante, 
body.autenticado .visible_no_autenticado {
   display: none;
}

body.ajax {
   cursor: progress;
}
body.ajax form, body.ajax input, body.ajax button {
   pointer-events: none;
   opacity: 0.5;
}