body {
    background-color: #ffffff; /* Colocamos un fondo blanco para la web */
    font-family: 'Roboto', sans-serif; /* Definimos el tipo de letra de Google para el cuerpo */
    color:black; /* Definimos el color de la letra, que es negro */
}
header {
  
  /*max-height: 50px;*/
  padding-top: 0;
}

footer {
    margin-bottom: 0;
}

h1, h2, h3, .fs-4 {
  /* Establecemos el tipo de letra para las cabeceras usadas */
  font-family: "Saira Extra Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /*font-size: 7em !important;*/
  font-style: normal;
  font-weight: 400;
}

li.nav-item a, header a, footer a, .nav-link {
    color:white !important; /* El color de la letra de los enlaces del menú superior es blanco */   
}
li.nav-item a:hover, li.nav-item a:active, .nav-pills>li>a.active {
  color: #fff; /* El color de la letra de los enlaces del menú superior, al pasar el ratón por encima */
  text-decoration: underline  !important;
  font-weight: bold;
}

a.dropdown-item {
  color: black !important;
}

h1 {
    color: rgb(107, 107, 107);
}
h2 {
  color: #0d6efd;
}


.form-group {
	margin-top: 1em; /* Ponemos un margen superior a cada grupo del formulario */
}

#logo {
  margin-right: 1em; /* Ponemos un margen derecho al logotipo */
}

#introduccion,.cuerpo {
    padding: 1em;  /* Ponemos un padding al bloque de introducción */
}

#catalogo {
    min-height: 250px; /* Establecemos una altura mínima del bloque catálogo */
}

.bd-placeholder-img {
    text-anchor: middle; /* Establecemos la alineación del texto, que es central */
}

/* Estilo específico del Carousel */
.carousel {
    margin-bottom: 1rem; /* Dejamos un espacio debajo del carousel. */
    text-shadow: 2px 2px 5px black;  /* Colocamos una sombra al texto para mejorar la legibilidad sobre una imagen */
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }
  
  .carousel-item {
    height: 32rem;  /* Definimos la altura de las imágenes del carousel */
  }
/* --------------------------------------------------------- */
.carousel-img {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  height: auto;
  width: 100%;
  display: flex;
  position: absolute;   
  top: 50%;
  transform: translateY(-50%);
}

.card {
  position: relative;  /* Establecemos una posición relativa para las "tarjetas" (card) */
}

 /* Establecemos las cartacteríosticas de las imágenes dentro de enlaces dentro de las "tarjetas" */
.card a img {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  height: auto;
  width: 100%;
  display: flex;
}

 /* Definimos las características de alineación, tamaño y color del texto con clase "centrado" */
.centrado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  color: #ffffff;
}

section, #myCarousel, #formulario_login, .formulario_login, div.paddingtop {
  padding-top: 100px; /* Compensa la altura del navbar fijo */
}
.separacionVertical {
  margin-top: 1.5em;; /* Margen superior */
}
.btn {
  margin-inline-start: 1em; /* Margen de los botones para que no estén pegados */
}

/* Código de https://www.lawebdelprogramador.com/codigo/CSS/5294-Grafico-de-barras-utilizando-unicamente-HTML-y-CSS.html modificado */
.chart-wrap {
  --chart-width:420px;
  --grid-color:#aaa;
  --bar-color:#F16335;
  --bar-thickness:40px;
  --bar-rounded: 3px;
  --bar-spacing:10px;

  font-family:sans-serif;
  width:var(--chart-width);
}

.chart-wrap .title{
  font-weight:bold;
  padding:1.8em 0;
  text-align:center;
  white-space:nowrap;
}

/* cuando definimos el gráfico en horizontal, lo giramos 90 grados */
.chart-wrap.horizontal .grid{
  transform:rotate(-90deg);
}

.chart-wrap.horizontal .bar::after{
  /* giramos las letras para horizontal*/
  /*transform: rotate(90deg);*/
  padding-top:0px;
  display: block;
}

.chart-wrap .grid{
  margin-left:50px;
  position:relative;
  padding:5px 0 5px 0;
  height:100%;
  width:100%;
  border-left:2px solid var(--grid-color);
}

/* posicionamos el % del gráfico*/
.chart-wrap .grid::before{
  font-size:0.8em;
  font-weight:bold;
  content:'0%';
  position:absolute;
  left:-0.5em;
  top:-1.5em;
}

.chart-wrap .grid::after{
  font-size:0.8em;
  font-weight:bold;
  content:'100%';
  position:absolute;
  right:-1.5em;
  top:-1.5em;
}

/* giramos las valores de 0% y 100% para horizontal */
.chart-wrap.horizontal .grid::before, .chart-wrap.horizontal .grid::after {
  transform: rotate(90deg);
}

.chart-wrap .bar {
  width: var(--bar-value);
  height:var(--bar-thickness);
  margin:var(--bar-spacing) 0;
  background-color:var(--bar-color);
  border-radius:0 var(--bar-rounded) var(--bar-rounded) 0;
}

.chart-wrap .bar:hover{
  opacity:0.7;
}

.chart-wrap .bar::after{
  content:attr(data-name);
  margin-left:100%;
  padding:10px;
  display:inline-block;
  white-space:nowrap;
}
/* Fin del código (modificado) de https://www.lawebdelprogramador.com/codigo/CSS/5294-Grafico-de-barras-utilizando-unicamente-HTML-y-CSS.html modificado*/