* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}
/*
.color_primary_0 { color: #5B8CC3 }
.color-primary-1 { color: #ECF2F9 } color de base
.color-primary-2 { color: #82ACDB }
.color-primary-3 { color: #3C6FA9 }
.color-primary-4 { color: #225A98 }


IMPORTANTE
NO ES NECESARIO HACER VARIBLES PARA MODIFICAR LOS ESTILOS, PORQUE CADA VARIABLE ES UN ESTILO
POR EJEMPLO NO PUEDES APLICAR UN BACKGRAOUND PARA UN BACKGROUND
CUANDO MODIFICAS EL BACK GROUND DEL BODY SOLO AFECTARA AL BODY Y ASI EN CUALQUIER CASO
*/

body {
  font: 100%/1.3 TrebuchetMS, Arial, sans-serif;
  text-align: left;
  background: #ecf2f9;
  padding-bottom: 20px;
  color: #1d428a;
} /* fondo de Toda la Pagina	.color-primary-0  */
a {
  color: #0066b3;
  background: inherit;
  text-decoration: none;
}
h1 {
  font: bold 2.1em Arial, Arial, Sans-Serif;
  color: #036da7;
}
h2 {
  font: bold 1.1em Arial, Arial, Sans-Serif;
  padding: 0;
  margin: 0;
}

/*
Color de barra superior
*/
/*div#header{width:100%;overflow:hidden;background: #7E2217; }*/
div#header {
  width: 100%;
  background: #ecf2f9;
  padding: 15px;
  box-sizing: border-box;
}

#header-start {
  width: 15%;
  padding-right: 20px;
}

#header-left {
  width: 65%;
  padding-right: 20px;
}

#header-right {
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#header h1 {
  margin: 0 0 10px 0;
  color: #336699;
}

#header-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

#header-nav li {
  margin: 0;
  width: 127px;
  text-align: center;
  display: flex;
  align-items: flex-start;
}

#header-nav a {
  display: inline-block;
  padding: 5px 10px;
  color: #336699;
  text-decoration: none;
  background: #ecf2f9;
  /* background: red; */
  transition: all 0.3s ease;
  width: 127px;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;
  height: auto;
  min-height: 2.5em;
  text-align: center;
  border-radius: 5px;
}

#header-nav a:hover {
  background: #336699;
  color: #ecf2f9;
}

/* Estilos originales de las secciones */
div#header h1,
div#menu {
  width: 100%;
}

div#header h1 {
  padding: 20px 0 10px;
  color: #336699;
}

ul#nav,
ul#nav li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#nav {
  float: right;
  font-size: 100%;
}

ul#nav li {
  float: left;
  margin: 0 3px 3px 3px;
  text-align: center;
  max-width: 125px;
  font-size: 16px;
}

ul#nav a {
  float: left;
  width: 122px;
  padding: 2px 0;
  background: #ecf2f9;
  text-decoration: none;
  color: #336699;
  border-top: 0px solid #fff;
  border-left: 0px solid #fff;
  border-right: 0px solid #fff;
}

ul#nav a:hover {
  background: #336699;
  color: #eee;
}

ul#nav li.activelink a,
ul#nav li.activelink a:hover {
  background: #d9ff00;
  color: #d9ff00;
}

#content {
  padding: 15px;
  background: #ecf2f9;
  min-height: calc(100vh - 200px);
  display: flex;
  width: 100%;
}

#left {
  padding: 1em;
  background: #a1b6c9;
  text-align: justify;
  flex: 0 0 85%;
  width: 85%;
}

#right {
  text-align: center;
  flex: 0 0 15%;
  width: 15%;
  min-width: 15%;
  max-width: 15%;
  padding: 0 1em 1em 1em;
  box-sizing: border-box;
}

#right #nav {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

#right #nav li {
  /* margin-bottom: 15px; */
  width: 100%;
  min-width: 100%;
  box-sizing: border-box;
}

#right #nav li#menu-padre {
  width: 100%;
  min-width: 100%;
  padding: 3px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

#right #nav li#menu-padre strong {
  display: block;
  margin-bottom: 10px;
  color: #225A98;
  font-size: 1.1em;
  text-align: center;
}

#right #nav li#menu-padre ul {
  width: 100%;
  min-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

#right #nav li#menu-hijo {
  width: 100%;
  min-width: 100%;
  margin-bottom: 1px;
  box-sizing: border-box;
  border: none;
}

#right #nav li#menu-hijo a {
  display: block;
  width: 100%;
  min-width: 100%;
  padding: 3px;
  color: #225A98;
  text-decoration: none;
  background: #ecf2f9;
  transition: all 0.3s ease;
  box-sizing: border-box;
  border: none;
  outline: none;
}

#right #nav li#menu-hijo a:hover {
  background: #225A98;
  color: #ecf2f9;
  border: none;
  outline: none;
}

#right #nav li a {
  display: block;
  padding: 8px;
  color: #225A98;
  text-decoration: none;
  border: 1px solid #225A98;
  border-radius: 5px;
  background: #ecf2f9;
  transition: all 0.3s ease;
}

#right #nav li a:hover {
  background: #225A98;
  color: #ecf2f9;
}

#right #nav li strong {
  display: block;
  margin-bottom: 10px;
  color: #225A98;
  font-size: 1.1em;
  /* background: red; */
}

#right #nav li ul li {
  margin-bottom: 5px;
}

#right #nav li ul li a {
  font-size: 0.9em;
  padding: 5px;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style-type: none;
}

.tabla_texto_medio {
  background-color: #eee;
  border-collapse: collapse;
} /*cambia el color de la tabla de detalles (texto reducido)*/ /*#d9ff00*/ /*#eee*/
.tabla_texto_medio th {
  background-color: #000;
  color: white;
  width: 50%;
} /*no utilizado (aun)*/
.tabla_texto_medio td,
.tabla_texto_medio th {
  padding: 4px;
  font-size: 13px;
} /*ancho de la tabla de detalles*/ /*100px*/ /*4px*/

.tabla_texto_reducido {
  background-color: #eee;
  border-collapse: collapse;
  margin: 0 auto;
  display: table;
} /*cambia el color de la tabla de detalles (texto reducido)*/ /*#d9ff00*/ /*#eee*/
.tabla_texto_reducido th {
  background-color: #000;
  color: white;
  width: 50%;
} /*no utilizado (aun)*/
.tabla_texto_reducido td,
.tabla_texto_reducido th {
  padding: 4px;
  font-size: 11px;
} /*ancho de la tabla de detalles*/ /*100px*/ /*4px*/

.tabla_texto_muy_reducido {
  background-color: #eee;
  border-collapse: collapse;
} /*no hace nada*/
.tabla_texto_muy_reducido th {
  background-color: #000;
  color: white;
  width: 50%;
} /*no utilizado (aun)*/
.tabla_texto_muy_reducido td,
.tabla_texto_muy_reducido th {
  padding: 4px;
  font-size: 9px;
} /*#d9ff00*/ /*#fff*/

.tabla_texto_muy_muy_reducido {
  background-color: #eee;
  border-collapse: collapse;
} /*no hace nada*/
.tabla_texto_muy_muy_reducido th {
  background-color: #000;
  color: white;
  width: 50%;
} /*no utilizado (aun)*/
.tabla_texto_muy_muy_reducido td,
.tabla_texto_muy_reducido th {
  padding: 2px;
  font-size: 7px;
} /*#d9ff00*/ /*#fff*/

#button1 {
  /*no tiene funcion*/
  color: #1d428a;
}

.hoverable-row:hover {
  background-color: #fff;
} /*cambia el color de la fila al pasar el mouse*/

.bgcolor-change {
  background-color: #b1b1b1;
}

.credit-contaier {
  background-color: #f1f1f1;
  padding: 30px;
  margin: 10px 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-form {
  display: flex;
  justify-content: center;
  width: 100%;
}

.login-form table {
  margin: 0 auto;
}

.login-table {
  margin: 0 auto;
}