#cabeza {

    background-color: gray;

    height: 150px;

}



#logo_titulo {

    display: grid;

    grid-template-columns: 135px 1fr 135px;

    align-items: center;

    width: 100%;

    height: 100%;

}



.contenedor_logo {

    width: 120px;

    height: 120px;

    overflow: hidden;

    margin-left: 15px;

    margin-top: 15px;

    margin-right: 15px;

    margin-bottom: 15px;

    justify-self: start;

}



.contenedor_logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}



.texto-encabezado {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    width: 100%;

}







.texto-encabezado h1 {

    margin: 0;

    font-size: 4rem;

    color: #2c3e50;

    width: 100%;

    text-align: center;

}



.texto-encabezado .subtitulo {

    margin: 6px 0 0 0;

    font-size: 0.95rem;

    color: #e0e0e0;

    font-style: italic;

    display: block;

}



.espacio-equilibrador {

    width: 135px;

}



#cuerpo-principal {

    display: flex;

    gap: 20px;

    max-width: 1200px;

    margin: 20px auto;

    padding: 0 15px;

}



.columna-contenido {

    flex: 3;

    background-color: #f9f9f9;

    padding: 20px;

    border-radius: 8px;

}



.columna-menu {

    flex: 1;

    background-color: #eceff1;

    padding: 20px;

    border-radius: 8px;

    height: fit-content;

}



.columna-menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.columna-menu a {

    text-decoration: none;

    color: #0277bd;

    font-weight: bold;

    display: block;

    padding: 8px;

    border-radius: 4px;

}



.columna-menu a:hover {

    background-color: #b0bec5;

}



/* --- ADAPTACIÓN PARA MÓVILES (Pantallas de hasta 768px de ancho) --- */

@media (max-width: 768px) {



  /* 1. Ajustar el encabezado */

  #logo_titulo {

    /* Cambiamos el Grid de 3 columnas a 1 sola columna vertical */

    grid-template-columns: 1fr;

    height: auto;

    padding: 15px 0;

    gap: 10px;

  }



  .contenedor_logo {

    justify-self: center; /* Centramos el logo en móviles */

    margin: 0;

  }



  .espacio-equilibrador {

    display: none; /* Ocultamos el espacio invisible que usábamos en escritorio */

  }



  .texto-encabezado h1 {

    font-size: 1.6rem; /* Reducimos el tamaño del título en celulares */

  }



  /* 2. Ajustar el cuerpo principal a una sola columna */

  #cuerpo-principal {

    flex-direction: column-reverse; /* El menú queda arriba o abajo según prefieras (column pone el menú abajo, column-reverse lo pone arriba) */

    gap: 15px;

  }



.columna-contenido, 

.columna-menu {

    width: 100%; /* Hacemos que cada sección ocupe el 100% del ancho del celular */

  }

}



/* Asegura que el contenedor abarque todo el ancho disponible */

.contenedor-barra {

  width: 100% !important;

  box-sizing: border-box;

  margin: 20px 0;

}



.contenedor-barra label {

  display: block;

  text-align: center;

  margin-bottom: 8px;

  font-weight: bold;

}



/* La barra base */

.barra-custom {

  width: 100% !important; /* Ocupa todo el ancho de la columna */

  height: 25px;

  background-color: #dcdcdc;

  border-radius: 12px;

  overflow: hidden;

}



/* El relleno que se pinta solo */

.barra-custom .relleno {

  height: 100%;

  width: var(--porcentaje); /* Aquí lee el valor del HTML */

  background-color: #0277bd;

  border-radius: 12px;

}