/*===========================================================================*/
/*
  Hoja de estilo

    Conitene los estilos para tema light y drak

    versión 1.0
    25 de octubre de 2024
*/


/*===========================================================================*/
/* Tema general y light */

/*


  color fondo página:       #ffffff;
  color letras h1 h2 h3 p:  #666666;
  color cabecera:           #cccccc

  color link:               #4f81c5;
  color link active:        #94bfac;
  color lilnk acive menu:   white;

  color verde:              #017f4d;
  color rojo:               #d83a2d;



*/
/*===========================================================================*/
/* TYPE SELECTOR */

body {
  background-color: #ffffff;
  font-size: 12pt;
  font-family: Ubuntu-L,Arial,verdana;
  width: 900px;
  margin: 20px auto;
}

h1, h2, h3, p {
  color: #666666;
}
h1 {
  margin: 0;
  padding: 0;
  font-size: 2.3em;
}
h2 {
  border-bottom: 1px solid #666666;
  font-size: 1.8em;
  margin-left: 10px;
  margin-bottom: 15px;
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 5px;
}
h3 {
  border-bottom: 1px dotted #666666;
  font-size: 1.3em;
  margin-left: 20px;
  margin-bottom: 15px;
  padding-left: 20px;
  padding-top: 25px;
  padding-bottom: 5px;
}
p {
  padding-bottom: 5px;
}
a {
  color: #4f81c5;
}
a:link, a:visited {
  text-decoration: none;
}
a:hover, a:focus {
  border-bottom: 1px solid;
}
a:active {
  color: #94bfac;
}

/*===========================================================================*/
/* ID & CLASS SELECTORS */

/*---------------------------------------------------------------------------*/
/* Contenedores de h  */
.div_h3{
  padding-left: 25px;
}


/*---------------------------------------------------------------------------*/
/* Cabecera */
#cabecera {
  padding: 30px;
  background-color: #cccccc;
  border-bottom: 1px dotted #666666;
}


/*---------------------------------------------------------------------------*/
/* Cuerpo (no se usa) */
#cuerpo {
  padding: 0;
  display: block;
}

/*---------------------------------------------------------------------------*/
/* Menú superior */
#minitabs {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  padding-bottom: 1px;
  padding-top: 1px;
  background-color: #cccccc;
  border-bottom: 1px dotted #666666;  /* borde inferior de menu */
}
#minitabs ul {
  margin: 0;
  padding: 7px 0;
  text-align: left;
  white-space: nowrap;
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  font-weight: normal;
}
#minitabs li {
  margin: 0 3px;
  display: inline;
}
#minitabs a {
  /*border-bottom: 4px solid #cccccc;*/
  padding: 0 0 3px;
  color: #666666;
  text-decoration: none;
}
#minitabs a.current, #minitabs a:hover{
  border-bottom: 4px solid #666666;
  color: #666666;
}
#minitabs a:active {
  color: white;
  border-bottom: 4px solid  white;
}

/*---------------------------------------------------------------------------*/
/* Contenido */
#contenido {
  padding-left: 30px;
  padding-right: 20px;
  padding-top: 40px;
  padding-bottom: 20px;
  line-height: 1.2em;
}
#contenido ul li {
  list-style-type: circle;
}
#contenido ol li {
  list-style-type:decimal;
}
#contenido ul, #contenido ul li, #contenido ol, #contenido ol li {
  margin: 4px 0px 4px 30px;
  padding-top: 1px;
  padding-bottom: 1px;
  color: #666666;
}

/*---------------------------------------------------------------------------*/
/* pie */
#pie {
  /* border: 0px solid black; */
  padding: 15px 5px;
  background-color:#cccccc;
  text-align: center;
  font-size: 0.8em;
}

  /*---------------------------------------------------------------------------*/
  /* Colores */
  .color_verde {
    color: #72BF78;
  }
  .color_rojo {
    color: #cd392a;
  }
  .color_running {
    color: #191818;
  }
  .color_aviso {
    color: #f77605;
  }
  .color_old {
    color: #191818;
  }

/*===========================================================================*/
/* Tema oscuro */

@media (prefers-color-scheme: dark) {
  /*
    color fondo página:       #1e1e1e;
    color letras h1 h2 h3 p:  #f3f3f3;
    color cabecera:           #312f2f

    color link:               #5082b6

    color link:               #5082b6
    color link active:        #7db7c7
    color lilnk acive menu:   #b7c8db

    color verde:              #72BF78;
    color rojo:               #cd392a;
  */

  /*=========================================================================*/
  /* TYPE SELECTOR */

  body {
    background-color: #1e1e1e;
  }

  h1, h2, h3, p {
    color: #f3f3f3;
  }
  h2 {
    border-bottom: 1px solid #f3f3f3;
  }
  h3 {
    border-bottom: 1px dotted #f3f3f3;
  }

  a {
    color: #5082b6;
  }

  a:active {
    color: #7db7c7;
  }
  /*=========================================================================*/
  /* ID & CLASS SELECTORS */


  /*---------------------------------------------------------------------------*/
  /* Cabecera */
  #cabecera {
    background-color: #312f2f;
    border-bottom: 1px dotted #f3f3f3;  /* borde superior de menu */
  }

  /*---------------------------------------------------------------------------*/
  /* Menú superior */
  #minitabs {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
    padding-bottom: 1px;
    padding-top: 1px;
    background-color: #312f2f;
    border-bottom: 1px dotted #f3f3f3;  /* borde inferior de menu */
  }
  #minitabs a {
    color: #f3f3f3;
  }
  #minitabs a.current, #minitabs a:hover{
    border-bottom: 4px solid #f3f3f3;
    color: #f3f3f3;
  }
  #minitabs a:active {
    color: #b7c8db;
    border-bottom: 4px solid  #b7c8db;
  }

  /*---------------------------------------------------------------------------*/
  /* Contenido */
  #contenido ul, #contenido ul li, #contenido ol, #contenido ol li {
    color: #f3f3f3;
  }

  /*---------------------------------------------------------------------------*/
  /* pie */
  #pie {
    background-color:#312f2f;
  }

  /*---------------------------------------------------------------------------*/
  /* Colores */
  .color_verde {
    color: #72BF78;
  }
  .color_rojo {
    color: #cd392a;
  }
  .color_running {
    color: #cdd8d8;
  }
  .color_aviso {
    color: #f77605;
  }
  .color_old {
    color: #cdd8d8;
  }
}