estilo.css

@charset "UTF-8";
/*>>>>>>>COMENTARIOS SOBRE LAS VARIBLES<<<<<<<<<*/
/*Colores en gral*/
/*para el fondo  del sitio*/
/*Header y footer de todo el sitio*/
/*Para el título de las recetas en el index*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/* Para el estilo del formulario de ingreso a receta y contacto*/
/*Utilizado para el fondo del modal en las recetas*/
/*Color complementario al del header y footer*/
/*Color análogo al del header y footer*/
/*Color análogo al del header y footer*/
/*Parte del color complementario*/
/*Color triádico*/
/*Color triádico*/
/*Color tetaédrico*/
/*Color botón grid*/
/*Sombras*/
/* Esta es la sombra utilizada para el header*/
/*Bordes*/
/* Este borde se utiliza en todos los elementos del sitio: fotos, modales, bordes del formulario, etc.*/
/*Logo de la página*/
/*Imágenes del index. Las imágenes del index tienen las siguientes características:*/
/*Títulos que acompañan las fotos en el index*/
/*Márgenes, padding y tamaño de letra para uso gral.*/
/* Se usa para los márgenes del formulario de ingreso de receta*/
/*Se usa en los formularios y para las descargas de "mi semana"*/
/*Se utiliza en los formularios y en el header*/
/*Se utiliza en el header*/
/*Botones*/
/*botón1*/
/*botón2*/
/*Acordion*/
/*footer*/
/*Grid (pertenece a "Mi semana"*/
/*Página 404*/
/*>>>>>>>FIN DE COMENTARIOS SOBRE LAS VARIBLES<<<<<<<<<*/
* {
  margin: 0;
  padding: 0;
}

.body__fondo2 {
  background-color: #fff8dc;
  /*Afecta al resto de las págs. del sitio*/
}

/*Navegador*/
header {
  -webkit-box-shadow: 0px 3px 10px -2px rgba(176, 131, 54, 0.85);
          box-shadow: 0px 3px 10px -2px rgba(176, 131, 54, 0.85);
}

main {
  margin: 10px;
  padding-bottom: 2rem;
}

nav .boton, .modal__boton, .acordion .acordion__boton1, .acordion .acordion__boton4, .acordion .acordion__boton7, .acordion .acordion__boton10, .acordion .acordion__boton13, .acordion .acordion__boton2, .acordion .acordion__boton5, .acordion .acordion__boton8, .acordion .acordion__boton11, .acordion .acordion__boton3, .acordion .acordion__boton6, .acordion .acordion__boton9, .acordion .acordion__boton12, .contacto__boton, .formulario .formulario__boton2, .descarga .descarga__boton {
  background-color: lightpink;
  border-radius: 5px;
  border: whitesmoke solid 2px;
  padding: 0.5rem;
}

nav {
  background-color: #e6b464;
}

.icono {
  width: 5.5rem;
}

.icono img {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
}

/*Botones en gral. de todo el sitio*/
nav .boton, .modal__boton, .acordion .acordion__boton1, .acordion .acordion__boton4, .acordion .acordion__boton7, .acordion .acordion__boton10, .acordion .acordion__boton13, .acordion .acordion__boton2, .acordion .acordion__boton5, .acordion .acordion__boton8, .acordion .acordion__boton11, .acordion .acordion__boton3, .acordion .acordion__boton6, .acordion .acordion__boton9, .acordion .acordion__boton12, .contacto__boton, .formulario .formulario__boton2, .descarga .descarga__boton {
  background-color: lightpink;
  border-radius: 5px;
  border: whitesmoke solid 2px;
  padding: 0.5rem;
}

/*INDEX del sitio.*/
.galeria {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.galeria .galeria__Recetas {
  width: 300px;
  height: 200px;
}

.galeria .galeria__Recetas .galeria__img {
  border-radius: 5px;
  width: 300px;
  height: 200px;
  padding: 2px;
}

.galeria .galeria__Recetas .galeria__img:hover {
  opacity: 0.7;
}

.galeria .galeria__Recetas .galeria__link {
  text-decoration: none;
  color: black;
  position: initial;
  -webkit-transform: translate(1%, -300%);
          transform: translate(1%, -300%);
}

.galeria .galeria__Recetas .galeria__link .galeria__nombre {
  font-family: "Roboto", sans-serif;
  text-align: center;
  font-size: 1.6rem;
  color: whitesmoke;
  font-weight: 700;
  position: initial;
  -webkit-transform: translate(1%, -300%);
          transform: translate(1%, -300%);
  opacity: 0;
}

.galeria .galeria__Recetas .galeria__link .galeria__nombre:hover {
  opacity: 1;
  text-shadow: 2px 0 0 grey, -2px 0 0 grey, 0 2px 0 grey, 0 -2px 0 grey, 1px 1px grey, -1px -1px 0 grey, 1px -1px 0 grey, -1px 1px 0 grey;
}

h3 {
  text-align: center;
  padding: 3rem;
}

/*INDEX CELULAR* - Se modifica opacidad de título para celular porque no hay hover*/
@media only screen and (max-width: 400px) {
  .galeria {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .galeria .galeria__Recetas {
    width: 300px;
    height: 200px;
  }
  .galeria .galeria__Recetas .galeria__img {
    border-radius: 5px;
    width: 300px;
    height: 200px;
    opacity: 0.8;
  }
  .galeria .galeria__Recetas .galeria__link {
    text-decoration: none;
    color: black;
    position: initial;
    -webkit-transform: translate(1%, -300%);
            transform: translate(1%, -300%);
  }
  .galeria .galeria__Recetas .galeria__link .galeria__nombre {
    font-family: "Roboto", sans-serif;
    text-align: center;
    font-size: 1.6rem;
    color: whitesmoke;
    font-weight: 500;
    position: initial;
    -webkit-transform: translate(1%, -300%);
            transform: translate(1%, -300%);
    opacity: 1;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
  }
}

/*INDEX TABLET* - Se modifica opacidad de título para TABLET porque no hay hover*/
@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  .galeria {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .galeria .galeria__Recetas {
    width: 300px;
    height: 200px;
  }
  .galeria .galeria__Recetas .galeria__img {
    border-radius: 5px;
    width: 300px;
    height: 200px;
    opacity: 0.8;
  }
  .galeria .galeria__Recetas .galeria__link {
    text-decoration: none;
    color: black;
    position: initial;
    -webkit-transform: translate(1%, -300%);
            transform: translate(1%, -300%);
  }
  .galeria .galeria__Recetas .galeria__link .galeria__nombre {
    font-family: "Roboto", sans-serif;
    text-align: center;
    font-size: 1.6rem;
    color: whitesmoke;
    font-weight: 500;
    position: initial;
    -webkit-transform: translate(1%, -300%);
            transform: translate(1%, -300%);
    opacity: 1;
    text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
  }
}

/*Modal para recetas*/
.modal-fade {
  border-radius: 5px;
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #e6b464;
}

.modal-title {
  font-family: "Roboto", sans-serif;
  font-size: 200%;
  font-weight: 800;
  color: whitesmoke;
  word-spacing: 5%;
}

.modal__img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.modal__ul, .modal__ol {
  padding-top: 1rem;
}

.modal__li {
  padding: 0.5rem;
}

.modal-footer {
  background-color: #e6b464;
}

.modal-body {
  background-color: cornsilk;
}

.modal__link {
  text-decoration: none;
  color: black;
}

.modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

/*Modal de recetas para celular. Lo que hace es acomodar los botones del footer en modo responsive*/
@media only screen and (max-width: 400px) {
  /*celular*/
  .modal-title {
    font-size: 200%;
    text-align: center;
  }
  .modal-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/*PÁG. 'Tips Rápidos' El acordión afecta a la pag. de info gral*/
.acordion {
  border: 5px;
  border-radius: 5px;
  width: 60%;
  margin: auto;
}

.acordion .acordion__titulo {
  padding: 0.1rem;
}

.acordion .acordion__boton1, .acordion .acordion__boton4, .acordion .acordion__boton7, .acordion .acordion__boton10, .acordion .acordion__boton13 {
  background-color: #e66496;
  width: 99.9%;
  height: 5rem;
}

.acordion .acordion__boton1:hover, .acordion .acordion__boton4:hover, .acordion .acordion__boton7:hover, .acordion .acordion__boton10:hover, .acordion .acordion__boton13:hover {
  background-color: grey;
}

.acordion .acordion__boton2, .acordion .acordion__boton5, .acordion .acordion__boton8, .acordion .acordion__boton11 {
  background-color: #64d7e6;
  width: 99.9%;
  height: 5rem;
}

.acordion .acordion__boton2:hover, .acordion .acordion__boton5:hover, .acordion .acordion__boton8:hover, .acordion .acordion__boton11:hover {
  background-color: grey;
}

.acordion .acordion__boton3, .acordion .acordion__boton6, .acordion .acordion__boton9, .acordion .acordion__boton12 {
  background-color: #64e6b4;
  width: 99.9%;
  height: 5rem;
}

.acordion .acordion__boton3:hover, .acordion .acordion__boton6:hover, .acordion .acordion__boton9:hover, .acordion .acordion__boton12:hover {
  background-color: grey;
}

.acordion .acordion__p {
  text-align: center;
  font-size: 150%;
  margin: 0.1rem;
}

@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  .acordion {
    width: 100%;
  }
}

@media only screen and (max-width: 400px) {
  /*celular*/
  .acordion {
    width: 100%;
  }
}

/*Para poágina 404*/
.body__error {
  background-color: #111010;
}

.error {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.error__titulo {
  color: #9b9494;
  font-size: 300%;
  padding: 5rem;
  margin: auto;
  text-align: center;
}

.error__icono {
  width: 50%;
  height: 50%;
  padding: 2px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: center;
      justify-self: center;
  -ms-flex-line-pack: space-evenly;
      align-content: space-evenly;
}

.error__icono img {
  width: 60%;
  height: 60%;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  -ms-grid-column-align: center;
      justify-self: center;
  -ms-flex-line-pack: center;
      align-content: center;
  margin-left: 20%;
  margin-right: 20%;
}

@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  .error__titulo {
    font-size: 100%;
  }
}

@media only screen and (max-width: 400px) {
  /*celular*/
  .error__titulo {
    font-size: 80%;
  }
}

/*Para la pág. de contacto*/
.formulario-contacto {
  background-color: #74BABC;
  width: 80%;
  margin: 5% 10% 10%;
  padding: 2REM;
  border-radius: 5px;
}

.contacto__boton {
  background-color: #949c9c;
}

/*Celular pág. de contacto*/
@media only screen and (max-width: 400px) {
  .formulario-contacto {
    width: 100%;
    margin: 2% 1% 1%;
    padding: 1.5rem;
  }
}

/*formulario: afecta al ingreso de receta*/
h1, h2 {
  text-align: center;
  padding: 3rem;
  margin: auto;
}

.formulario {
  background-color: #ffdbe2;
  border-radius: 5px;
  margin: auto;
  padding: 4.5rem;
  width: 60%;
}

.formulario .formulario__margen {
  margin-bottom: 2rem;
}

.formulario .formulario__foto {
  background-color: #bbded6;
  border-radius: 5px;
  border: 1px solid #61c0bf;
  padding: 0.5rem;
  font-family: "Roboto", sans-serif;
  color: #4b4747;
  width: 100%;
}

.formulario .formulario__img {
  margin-top: 0.8rem;
  width: 2rem;
  height: 2rem;
}

.formulario .formulario__img:hover {
  background-color: #dcf5ff;
}

.formulario .formulario__agregar {
  /*Se refiere a agregar un ingrediente o un paso*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}

.formulario .formulario__agregar strong {
  padding-left: 2rem;
  padding-top: 1rem;
}

.formulario select {
  background-color: #bbded6;
  border-radius: 5px;
  border: 1px solid #61c0bf;
  padding: 0.5rem;
  font-family: "Roboto", sans-serif;
  color: #4b4747;
}

.formulario .formulario__boton2 {
  background-color: #f1e9ea;
  float: right;
}

.formulario .boton_enviarBorrar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  margin: auto;
}

.formulario .formulario__checkbox {
  width: 60%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-line-pack: start;
      align-content: flex-start;
}

/*Este estilo afecta al ingreso de recetas para responsive*/
@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  .formulario {
    width: 85%;
  }
  select {
    width: 95%;
  }
}

@media only screen and (max-width: 400px) {
  /*celular*/
  .formulario {
    width: 100%;
    margin: 2% 1% 1%;
    padding: 1.5rem;
  }
  .formulario label, .formulario strong {
    text-align: center;
  }
  .formulario .formulario__label {
    padding: 1%;
    font-size: 110%;
    margin: 1%;
    width: 100%;
    text-align: center;
  }
}

/*El grid es para "Mi semana" . La versión PC tiene 7 columnas y tres filas. Para responsive, se usa una única columna*/
.semana {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (14.27%)[7];
      grid-template-columns: repeat(7, 14.27%);
  -ms-grid-rows: 10% 10% 35% 10% 35%;
      grid-template-rows: 10% 10% 35% 10% 35%;
  grid-column-gap: 2px;
  grid-row-gap: 1px;
      grid-template-areas: "encabezado-domingo encabezado-lunes encabezado-martes encabezado-miércoles encabezado-jueves encabezado-viernes encabezado-sábado"
 "almuerzo-domingo almuerzo-lunes almuerzo-martes almuerzo-miércoles almuerzo-jueves almuerzo-viernes almuerzo-sábado"
 "menú-alumerzo-domingo menú-alumerzo-lunes menú-alumerzo-martes menú-alumerzo-miércoles menú-alumerzo-jueves menú-alumerzo-viernes menú-alumerzo-sábado"
 "cena-domingo cena-lunes cena-martes cena-miércoles cena-jueves cena-viernes cena-sábado"
 "menú-cena-domingo menú-cena-lunes menú-cena-martes menú-cena-miércoles menú-cena-jueves menú-cena-viernes menú-cena-sábado";
  padding: 8px;
  width: 99.9%;
  background-color: #ffdce3;
  margin: auto;
  border-radius: 5px;
  border: 1px solid #181300;
}

.encabezado-domingo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: encabezado-domingo;
}

.encabezado-lunes {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: encabezado-lunes;
}

.encabezado-martes {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: encabezado-martes;
}

.encabezado-miércoles {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: encabezado-miércoles;
}

.encabezado-jueves {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: encabezado-jueves;
}

.encabezado-viernes {
  -ms-grid-row: 1;
  -ms-grid-column: 6;
  grid-area: encabezado-viernes;
}

.encabezado-sábado {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
  grid-area: encabezado-sábado;
}

.almuerzo-domingo {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: almuerzo-domingo;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-lunes {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: almuerzo-lunes;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-martes {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: almuerzo-martes;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-miércoles {
  -ms-grid-row: 2;
  -ms-grid-column: 4;
  grid-area: almuerzo-miércoles;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-jueves {
  -ms-grid-row: 2;
  -ms-grid-column: 5;
  grid-area: almuerzo-jueves;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-viernes {
  -ms-grid-row: 2;
  -ms-grid-column: 6;
  grid-area: almuerzo-viernes;
  text-align: center;
  margin: 0.2rem;
}

.almuerzo-sábado {
  -ms-grid-row: 2;
  -ms-grid-column: 7;
  grid-area: almuerzo-sábado;
  text-align: center;
  margin: 0.2rem;
}

.cena-domingo {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  grid-area: cena-domingo;
  text-align: center;
  margin: 0.2rem;
}

.cena-lunes {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
  grid-area: cena-lunes;
  text-align: center;
  margin: 0.2rem;
}

.cena-martes {
  -ms-grid-row: 4;
  -ms-grid-column: 3;
  grid-area: cena-martes;
  text-align: center;
  margin: 0.2rem;
}

.cena-miércoles {
  -ms-grid-row: 4;
  -ms-grid-column: 4;
  grid-area: cena-miércoles;
  text-align: center;
  margin: 0.2rem;
}

.cena-jueves {
  -ms-grid-row: 4;
  -ms-grid-column: 5;
  grid-area: cena-jueves;
  text-align: center;
  margin: 0.2rem;
}

.cena-viernes {
  -ms-grid-row: 4;
  -ms-grid-column: 6;
  grid-area: cena-viernes;
  text-align: center;
  margin: 0.2rem;
}

.cena-sábado {
  -ms-grid-row: 4;
  -ms-grid-column: 7;
  grid-area: cena-sábado;
  text-align: center;
  margin: 0.2rem;
}

.encabezado-domingo, .encabezado-lunes, .encabezado-martes, .encabezado-miércoles, .encabezado-jueves, .encabezado-viernes, .encabezado-sábado, .completar {
  padding: 0.5rem;
  margin: 1rem;
  text-align: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: bold;
}

.menú-alumerzo-domingo {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: menú-alumerzo-domingo;
}

.menú-alumerzo-lunes {
  -ms-grid-row: 3;
  -ms-grid-column: 2;
  grid-area: menú-alumerzo-lunes;
}

.menú-alumerzo-martes {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
  grid-area: menú-alumerzo-martes;
}

.menú-alumerzo-miércoles {
  -ms-grid-row: 3;
  -ms-grid-column: 4;
  grid-area: menú-alumerzo-miércoles;
}

.menú-alumerzo-jueves {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  grid-area: menú-alumerzo-jueves;
}

.menú-alumerzo-viernes {
  -ms-grid-row: 3;
  -ms-grid-column: 6;
  grid-area: menú-alumerzo-viernes;
}

.menú-alumerzo-sábado {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
  grid-area: menú-alumerzo-sábado;
}

.menú-cena-domingo {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  grid-area: menú-cena-domingo;
}

.menú-cena-lunes {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
  grid-area: menú-cena-lunes;
}

.menú-cena-martes {
  -ms-grid-row: 5;
  -ms-grid-column: 3;
  grid-area: menú-cena-martes;
}

.menú-cena-miércoles {
  -ms-grid-row: 5;
  -ms-grid-column: 4;
  grid-area: menú-cena-miércoles;
}

.menú-cena-jueves {
  -ms-grid-row: 5;
  -ms-grid-column: 5;
  grid-area: menú-cena-jueves;
}

.menú-cena-viernes {
  -ms-grid-row: 5;
  -ms-grid-column: 6;
  grid-area: menú-cena-viernes;
}

.menú-cena-sábado {
  -ms-grid-row: 5;
  -ms-grid-column: 7;
  grid-area: menú-cena-sábado;
}

.completar {
  background-color: white;
  border-radius: 5px;
  border: white solid 2px;
  padding: 0.5rem;
}

@media only screen and (max-width: 400px) {
  /*celular*/
  .semana {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: (1fr)[21];
        grid-template-rows: repeat(21, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 1px;
        grid-template-areas: "encabezado-domingo"
 "almuerzo-domingo"
 "menú-alumerzo-domingo"
 "cena-domingo"
 "menú-cena-domingo" 
 "encabezado-lunes"
 "almuerzo-lunes"
 "menú-alumerzo-lunes"
 "cena-lunes"
 "menú-cena-lunes" 
 "encabezado-martes"
 "almuerzo-martes"
 "menú-alumerzo-martes"
 "cena-martes"
 "menú-cena-martes"    
 "encabezado-miércoles"
 "almuerzo-miércoles"
 "menú-alumerzo-miércoles"
 "cena-miércoles"
 "menú-cena-miércoles"    
 "encabezado-jueves"
 "almuerzo-jueves" 
 "menú-alumerzo-jueves"
 "cena-jueves"
 "menú-cena-jueves"
 "encabezado-viernes"
 "almuerzo-viernes"
 "menú-alumerzo-viernes"
 "cena-viernes"
 "menú-cena-viernes"    
 "encabezado-sábado"
 "almuerzo-sábado" 
 "menú-alumerzo-sábado"
 "cena-sábado"
 "menú-cena-sábado";
  }
}

@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  .semana {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: (1fr)[21];
        grid-template-rows: repeat(21, 1fr);
    grid-column-gap: 2px;
    grid-row-gap: 1px;
        grid-template-areas: "encabezado-domingo"
 "almuerzo-domingo"
 "menú-alumerzo-domingo"
 "cena-domingo"
 "menú-cena-domingo" 
 "encabezado-lunes"
 "almuerzo-lunes"
 "menú-alumerzo-lunes"
 "cena-lunes"
 "menú-cena-lunes" 
 "encabezado-martes"
 "almuerzo-martes"
 "menú-alumerzo-martes"
 "cena-martes"
 "menú-cena-martes"    
 "encabezado-miércoles"
 "almuerzo-miércoles"
 "menú-alumerzo-miércoles"
 "cena-miércoles"
 "menú-cena-miércoles"    
 "encabezado-jueves"
 "almuerzo-jueves" 
 "menú-alumerzo-jueves"
 "cena-jueves"
 "menú-cena-jueves"
 "encabezado-viernes"
 "almuerzo-viernes"
 "menú-alumerzo-viernes"
 "cena-viernes"
 "menú-cena-viernes"    
 "encabezado-sábado"
 "almuerzo-sábado" 
 "menú-alumerzo-sábado"
 "cena-sábado"
 "menú-cena-sábado";
  }
}

/*Botón de descarga de "Mi semana"*/
.descarga {
  width: 99.5%;
  padding: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.descarga .descarga__boton:hover {
  background-color: gray;
}

/*Estilo de botón de descarga de "Mi semana" para responsive*/
@media only screen and (max-width: 400px) {
  /*celular*/
  .descarga {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

/*Estilo del footer*/
footer {
  background-color: #e6b464;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer .footer__p {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 1.1rem;
  color: black;
  padding: 0.1rem;
  margin: auto;
  font-weight: 800;
}

footer .socialMedia {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

footer .socialMedia img {
  width: 2rem;
  height: 2rem;
  padding: 0.1rem;
  margin: 0.5rem;
}

footer .mapa-de-sitio__titulo {
  font-family: "Noto Sans HK", sans-serif;
  font-size: 1.1rem;
  color: black;
  text-align: center;
  font-weight: 200;
  margin: 1rem;
}

footer .mapa-de-sitio__link {
  text-decoration: none;
  color: #181300;
}

footer .mapa-de-sitio__encabezado {
  list-style: none;
  text-align: left;
  color: black;
}

footer .mapa-de-sitio__encabezado--enlace {
  list-style: none;
  text-align: left;
  color: black;
}

footer .mapa-de-sitio__encabezado--enlace:hover {
  background-color: #fff6db;
  cursor: pointer;
}

footer .mapa-de-sitio__submenu {
  list-style: none;
  text-align: left;
  margin-left: 1rem;
  color: black;
}

footer .mapa-de-sitio__submenu:hover {
  background-color: #949c9c;
  cursor: pointer;
}

@media only screen and (max-width: 400px) {
  /*celular*/
  footer {
    background-color: #e6b464;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  footer p {
    font-size: 1rem;
  }
  footer img {
    width: 0.7rem;
    height: 0.7rem;
  }
}

@media only screen and (min-width: 401px) and (max-width: 960px) {
  /*tablet*/
  footer {
    background-color: #e6b464;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  footer p {
    font-size: 1rem;
  }
  footer img {
    width: 1rem;
    height: 1rem;
  }
}
/*# sourceMappingURL=estilo.css.map */