/* Variables de color */
:root {
  --color-primario: #3498db;
  --color-secundario: #3b3b3b;
  --color-hoy: #3498db;
  --color-festivo: #e74c3c;
  --color-domingo: #eca457;
  --color-texto: #333;
  --color-fondo: #fff;
  --color-evento-especial: #FFA500;
}


*{
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: var(--color-primario);
  color: var(--color-texto);
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
}

body, .parent, .navbar, .days div {
  transition: background-color 1s ease, color 1s ease;
}

.citaTexto {
  transition: background-color .9S ease, color .9s ease;
}

.parent {
  background-color: var(--color-primario);
  width: 80%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 70px repeat(8, 1fr) 60px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
  border-collapse: collapse;
}

.div1 { grid-area: 1 / 1 / 2 / 8; }
.div2 { grid-area: 2 / 1 / 10 / 4; }
.div4 { grid-area: 2 / 4 / 3 / 8; } /* Fecha actual */
.div5 { grid-area: 3 / 4 / 4 / 8; } /* Cita especial */
.div3 { grid-area: 4 / 4 / 10 / 8; } /* Calendario y botones */
.div6 { grid-area: 10 / 1 / 11 / 8; }


.navbar {
  background-color: var(--color-primario);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.navbar h1 {
  color: white;
  font-size: 2.3em;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  font-family: DS-BebasNeueT;
  cursor: context-menu;
}
@font-face {
  font-family: 'DS-BebasNeueT';
  src: url('/assets/fonts/bebas_neue/BebasNeue-Regular.ttf') format('truetype');
}

.img-mounth{
  background-color: var(--color-secundario);
  contain: content;
  border-top-left-radius: 15px;
}

.img-mounth img {
  width: 100%;
  height: auto; /*Tamaño*/
}

.div3 {
  background-color: var(--color-fondo);
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.div4 {
  background-color: var(--color-fondo);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 15px;
  font-size: 1.2em;
  font-family: DS-BebasNeue;
  cursor: context-menu;
}
@font-face {
  font-family: 'DS-BebasNeue';
  src: url('/assets/fonts/bebas_neue/BebasNeue-Regular.eot') format('truetype');
}

.div4 p {
  color:#3b3b3b;
  font-size: 1.2em;
  font-weight: bold;
}

.citaTexto {
  background-color: var(--color-secundario);
  color: var(--color-fondo);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-style: italic;
  padding: 10px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  -webkit-box-shadow: inset 0px 0px 15px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 15px -3px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 15px -3px rgba(0,0,0,0.75);
}


.botones-interaccion {
  background-color: #e6e6e6;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0px 10px 0px;
}

.botones-interaccion div {
  display: flex;
  flex-direction: row;
  min-width: 200px;
}

.botones-interaccion div:nth-child(1) {
  margin-right: 5px;
}

.botones-interaccion select, .botones-interaccion button {
  padding: 5px 10px;
  font-size: 1em;
  cursor: pointer;
}

.botones-interaccion select {
  border-radius: 3px;
}

.continainerTypesDay {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 .2rem;
}

.continainerTypesDay div:nth-child(2) {
  margin: 0 30px;
}

.continainerTypesDay div {
  display: flex;
  text-align: center;
  align-items: center;
}

.continainerTypesDay .typesDay {
  background-color: #f0f0f0;
  width: 13px;
  height: 13px;
  margin: 0 5px;
}


.calendar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: .5rem 1rem;
}

.weekdays {
  background-color: var(--color-primario);
  color: var(--color-fondo);
  min-width: 300px;
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  padding: 10px 0 8px;
  border-radius: 3px;
  cursor: context-menu;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.days {
  min-width: 300px;
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 60px;
  grid-gap: 3px;
  margin-top: 6px;
}

.days div {
  text-align: center;
  line-height: 60px;
  border: 1px solid #ddd;
  background-color: var(--color-fondo);
  border-radius: 3px;
  transition: .3s;
}

.days div:hover {
  background-color: #00000017;
}

.days div.hoy, .continainerTypesDay div:nth-child(1) div.hoy {
  background-color: var(--color-hoy);
  color: var(--color-fondo);
  font-size: 1.3em;
  font-weight: 600;
  border: 3px solid black;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.continainerTypesDay div:nth-child(1) div.hoy {
  border: 2px solid black;
}

/* Estilos para eventos especiales */
.days div.evento-especial, .continainerTypesDay div:nth-child(3) div.evento-especial {
  border: 2px gray dashed;
  font-weight: bold;
}

.days div.festivo:not(.domingo), .continainerTypesDay div:nth-child(2) div.festivo {
  background-color: var(--color-festivo);
  color: var(--color-fondo);
  border: 2px var(--color-evento-especial) dashed;
  font-weight: bold;
}

.days div.festivo.domingo {
  background-color: var(--color-domingo);
  color: var(--color-fondo);
  font-weight: bold;
}

.days div.otro-mes {
  background-color: #dbdbdb;
  color: #afafaf;
}


.footer {
  background-color: var(--color-secundario);
  color: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer a {
  font-size: 1.2em;
  color: #f6f6f6;
  text-decoration: none;
  margin: 0 5px;
  padding: 5px 3px;
}

.footer a:hover {
  color: var(--color-festivo);
  text-decoration: underline;
}

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  .parent {
    width: 100%;
  }

  .navbar h1 {
    font-size: 2.2em;
  }

  .botones-interaccion {
    padding: 5px 0px 0 0px;
  }

  .botones-interaccion select, .botones-interaccion button {
    margin: 5px 0;
  }

  .footer a {
    font-size: 1.2em;
  }
}



@media (max-width: 600px) {

  body {
    background-color: var(--color-secundario);
  }

  .parent {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  
  .navbar {
    height: 40px;
  }

  .navbar h1 {
    font-size: 1em;
  }
  
  .img-mounth{
    border-top-left-radius: 0;
  }
  .div4 {
    border-top-right-radius: 0;
  }

  .div4 p {
    color:#3b3b3b;
    font-size: .8em;
    font-weight: bold;
    text-align: center;
  }
  


  .img-mounth{
    height: 200px;
  }
  
  .botones-interaccion {
    background-color: #e6e6e6;
    flex-direction: column;
    padding: 0;
  }

  .botones-interaccion div {
    display: flex;
    flex-direction: row;
  }

  .botones-interaccion select {
    margin-bottom: 1rem;
  }

  .days div {
      grid-auto-rows: 40px;
      line-height: 40px;
  }
  .botones-interaccion select, .botones-interaccion button {
      margin: 5px 0;
  }
  
  .footer a {
  font-size: 1em;
  }

}