@charset "utf-8";

*{
    padding: 0px;
    margin: 0px;
    font-family: "Times New Roman', Times, serif"; 
    box-sizing: border-box;
}


@font-face{
  font-family: 'diogenes';
  src: url(../TIPOGRAFIAS/DIOGENES.ttf);
  font-weight: normal;
  font-style: normal;
}


body {
    max-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    
}

.fondo {
    background-color: rgba(0, 0, 0, 1);
    color: #FFF;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100%;
    padding: 0px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

/* Header */

header {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 10px;
}
header img {
    filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 1));
    width: 20vw;
    margin-right: 20px;
}

.calendario {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.horario-general article {
    display: flex;
    flex-direction: row;
    justify-content: stretch;
    align-items: center;
    margin: 5px 0px;
}

.horario-general article p {
    font-size: 20px;
}


.color-rojo{
    width: 3vw;
    height: 1.5vh;
    min-width: 12px;
    min-height: 12px;
    background-color: red;
    border: groove 2px rgba(245, 245, 245, 1);
    margin-right: 5px;
}

.color-gold{
  width: 3vw;
  height: 1.5vh;
  min-width: 12px;
  min-height: 12px;
  background-color: goldenrod;
  border: groove 2px rgba(245, 245, 245, 1);
  margin-right: 5px;
}

.color-grey{
  width: 3vw;
  height: 1.5vh;
  min-width: 12px;
  min-height: 12px;
  background-color: rgba(245, 245, 245, 0.5);
  border: groove 2px rgba(245, 245, 245, 1);
  margin-right: 5px;
}


@media screen and (max-width: 450px){
    .horario-general .row p {
        font-size: 9px;
    }
    
}

/* Mes */
.mes{
    text-align: center;
    border: groove white;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 5px rgba(245, 245, 245, 0.5);
    background-color: rgba(50, 50, 50, 1);
    width: 95vw;
}

@media screen and (max-width: 480px) {
    .mes {
        width: 80vw;
        min-width: 220px;
        transition: 2s;
    }

    .desplegable p {
       font-size: 0.7rem;
    }
    .desplegable h3 {
        font-size: 0.9rem;
    }

    .horario-general article p {
      font-size: 10px;
    }
}

.mes h1 {
    padding: 0.5%;
    font-size: 1.5rem;
    text-align: center;
}

ol {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    list-style: none;
    padding: 0px;
    width: 100%;
  }

  ol li {
    padding: 10%;
    display: flex;
    justify-content: center;
    cursor: pointer;
    
  }

  #Agosto .day, .first-day-Agosto{
    color: red;
  }

  /* Desplegable */
  .desplegable {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    visibility: hidden;
    width: 40vw;
    height: 10vh;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   border-radius: 10px;
   color: #FFF;
  }

  /* li:hover {
    color: goldenrod;
  } */

  .dia-semana:hover {
    color: #FFF;
  }

 /* No funciona con Safari => se pasa a hacer con js */
  /* li:hover > .desplegable {
    visibility: visible;
    margin-top: 1rem;
  }
   */

  /* First days */

  .first-day-Enero {
    grid-column-start: 3;
    font-family: 'diogenes';
  }

  .first-day-Febrero {
    grid-column-start: 6;
    font-family: 'diogenes';
  }

  .first-day-Marzo {
    grid-column-start: 6;
    font-family: 'diogenes';
  }

  .first-day-Abril {
    grid-column-start: 2;
    font-family: 'diogenes';
  }

  .first-day-Mayo {
    grid-column-start: 4;
    font-family: 'diogenes';
  }

  .first-day-Junio {
    grid-column-start: 7;
    font-family: 'diogenes';
  }

  .first-day-Julio {
    grid-column-start: 2;
    font-family: 'diogenes';
  }

  .first-day-Agosto {
    grid-column-start: 5;
    font-family: 'diogenes';
  }

  .first-day-Septiembre {
    grid-column-start: 1;
    font-family: 'diogenes';
  }

  .first-day-Octubre {
    grid-column-start: 3;
    font-family: 'diogenes';
  }

  .first-day-Noviembre {
    grid-column-start: 5;
    font-family: 'diogenes';
  }

  .first-day-Diciembre {
    grid-column-start: 1;
    font-family: 'diogenes';
  }


  /* dia semana */

  .dia-semana {
    background-color: rgba(40, 40, 40, 1);
    
  }

  /* dia numeros */
  .day {
    font-family: 'diogenes';
  }

  .volver {
    color: black;
    text-decoration: none;
    background-color: rgba(245, 245, 245, 1);
    border: black 5px;
    border-radius: 10%;
    width: 60px;
    height: 30px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: sticky;
    bottom: 20px;
    left: calc(100vw - 20px);
  }

  .volver:hover {
    background-color: rgba(215, 215, 215, 1);
    width: 63px;
    height: 33px;
    transition: 0.5s;
  }