* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --spacing-1: 1rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.25rem;

  --radius-1: 1.5rem;
  --radius-2: 1rem;
  --radius-3: 0.5rem;

  --timing-1: 200ms;
  /* Dark Theme Body */
  --black: #000000;
  --night: #2b2724;
  --smoke: #eeeeee;

  /* White Foreground (Contrast Colors) */
  --uva-a7: #f6f5fd;
  --uva-a6: #edeafb;
  --uva-a5: #dfd9f9;
  --uva-a4: #ccc4f6;
  --uva-a3: #b2aaf3;
  --uva-a2: #9a90f0;
  --uva-a1: #857aea;
  --uva-a0: #7367e0;
  --uva-base: #6555e7;
  --uva-b0: #5a48e4;
  --uva-b1: #4537c8;
  --uva-b2: #362c9c;
  --uva-b3: #2b2673;
  --uva-b4: #231f59;
  --uva-b5: #1d1a47;
  --uva-b6: #17153a;
  --uva-b7: #131230;

  --cherry-a7: #fcf5f7;
  --cherry-a6: #f9e9ee;
  --cherry-a5: #f4d8e0;
  --cherry-a4: #efc1cf;
  --cherry-a3: #e5a4b9;
  --cherry-a2: #db88a6;
  --cherry-a1: #cd6c91;
  --cherry-a0: #bd537d;
  --cherry-base: #b23a6d;
  --cherry-b0: #a13065;
  --cherry-b1: #872b54;
  --cherry-b2: #6e2445;
  --cherry-b3: #561d37;
  --cherry-b4: #44172c;
  --cherry-b5: #361322;
  --cherry-b6: #2b101b;
  --cherry-b7: #240d16;

  --hielo-a7: #f5fafa;
  --hielo-a6: #eaf3f3;
  --hielo-a5: #dceaea;
  --hielo-a4: #c6dddd;
  --hielo-a3: #afd0d0;
  --hielo-a2: #98c2c2;
  --hielo-a1: #80b3b3;
  --hielo-a0: #67a3a3;
  --hielo-base: #529393;
  --hielo-b0: #418585;
  --hielo-b1: #356e6e;
  --hielo-b2: #2b5959;
  --hielo-b3: #234646;
  --hielo-b4: #1d3737;
  --hielo-b5: #172c2c;
  --hielo-b6: #132424;
  --hielo-b7: #101d1d;

  /* Black Foreground (Bright Colors) */
  --naranja-a7: #fef7f3;
  --naranja-a6: #fcefe6;
  --naranja-a5: #f9e5d4;
  --naranja-a4: #f6d8be;
  --naranja-a3: #f1caa5;
  --naranja-a2: #ecbb8b;
  --naranja-a1: #e7ab72;
  --naranja-a0: #e19959;
  --naranja-base: #db8741;
  --naranja-b0: #c97634;
  --naranja-b1: #9f5f2b;
  --naranja-b2: #794b23;
  --naranja-b3: #5a3a1c;
  --naranja-b4: #452d16;
  --naranja-b5: #372312;
  --naranja-b6: #2b1c0e;
  --naranja-b7: #22170b;

  --banana-a7: #fefbef;
  --banana-a6: #fef8dc;
  --banana-a5: #fdf3c4;
  --banana-a4: #fceda4;
  --banana-a3: #fae582;
  --banana-a2: #f8dd61;
  --banana-a1: #f6d43f;
  --banana-a0: #f3ca1e;
  --banana-base: #e5bc12;
  --banana-b0: #c89e0c;
  --banana-b1: #9e7b0a;
  --banana-b2: #795d09;
  --banana-b3: #5a4607;
  --banana-b4: #453605;
  --banana-b5: #372c04;
  --banana-b6: #2b2303;
  --banana-b7: #221c02;

  --lechuga-a7: #f3fcf6;
  --lechuga-a6: #e7f9ec;
  --lechuga-a5: #d6f5df;
  --lechuga-a4: #bff0ce;
  --lechuga-a3: #a5eab9;
  --lechuga-a2: #8ae4a4;
  --lechuga-a1: #6edc8d;
  --lechuga-a0: #4fd372;
  --lechuga-base: #35c85a;
  --lechuga-b0: #2ba74b;
  --lechuga-b1: #24843d;
  --lechuga-b2: #1d6631;
  --lechuga-b3: #184e27;
  --lechuga-b4: #143d1f;
  --lechuga-b5: #112f19;
  --lechuga-b6: #0e2614;
  --lechuga-b7: #0c2010;

  /* Neutral */
  --neutral-a7: #f7f7f7;
  --neutral-a6: #efefef;
  --neutral-a5: #e7e7e7;
  --neutral-a4: #dcdcdc;
  --neutral-a3: #cfcfcf;
  --neutral-a2: #c1c1c1;
  --neutral-a1: #b1b1b1;
  --neutral-a0: #a0a0a0;
  --neutral-base: #8e8e8e;
  --neutral-b0: #7c7c7c;
  --neutral-b1: #676767;
  --neutral-b2: #525252;
  --neutral-b3: #414141;
  --neutral-b4: #343434;
  --neutral-b5: #2a2a2a;
  --neutral-b6: #222222;
  --neutral-b7: #1c1c1c;

  /* LIGHT MODE */
  --checkbox-normal-stroke-lm: 1px solid var(--naranja-a4);
  --checkbox-normal-bg-lm: var(--naranja-a6);

  --checkbox-hover-stroke-lm: 1px solid var(--naranja-a5);
  --checkbox-hover-bg-lm: var(--naranja-a7);

  --checkbox-selected-stroke-lm: 1px solid var(--lechuga-base);
  --checkbox-selected-bg-lm: var(--lechuga-a1);

  /* DARK MODE */
  --checkbox-normal-stroke-dm: 1px solid var(--naranja-b3);
  --checkbox-normal-bg-dm: var(--naranja-b4);

  --checkbox-hover-stroke-dm: 1px solid var(--naranja-b2);
  --checkbox-hover-bg-dm: var(--naranja-b3);

  --checkbox-selected-stroke-dm: 1px solid var(--lechuga-b1);
  --checkbox-selected-bg-dm: var(--lechuga-b2);
}

body {
  display: grid;
  min-height: 100dvh;
  grid-template-rows: auto 1fr auto;
}

:root[data-theme="light"] {

  body {
    background-color: var(--naranja-a7);
  }

  p,
  input,
  option,
  select,
  header,
  label,
  summary,
  .label-grande {
    color: var(--naranja-b5);
  }

  select {
    background-color: var(--naranja-a5);
  }

  .container-a {
    background-color: var(--naranja-a5);
    border: 1px solid var(--naranja-a3);
  }

  .grupo-ingredientes:open>summary:hover {
    background-color: var(--naranja-a1);
  }

  .grupo-ingredientes summary {
    background-color: var(--naranja-a3);
    color: var(--naranja-b6);
  }

  .grupo-ingredientes summary:hover {
    background-color: var(--naranja-a1);
  }

  .subgrupo-ingredientes {
    background-color: var(--naranja-a4);
  }

  .subgrupo-ingredientes summary {
    color: var(--naranja-b3);
    background-color: var(--naranja-a4);
    border-top: 1px solid var(--naranja-a3);

  }

  .subgrupo-ingredientes:open>summary {
    background-color: var(--naranja-a2);
  }

  .subgrupo-ingredientes:open>summary:hover {
    background-color: var(--naranja-a2);
  }

  .toggle-dark-mode {
    color: var(--naranja-a7);
    background-color: var(--naranja-b4);
  }

  .primary {
    background-color: var(--naranja-base);
    color: var(--naranja-a6);
  }

  .primary:hover {
    color: var(--naranja-b5);
    background-color: var(--naranja-a2);
  }

  .resultados-receta {
    background-color: var(--naranja-a4);
    border: 1px solid var(--naranja-a2);
  }

  .resultados-titulo-receta {
    color: var(--naranja-b5);
  }

  .resultados-label-tiempo {
    color: var(--naranja-base);
  }

  .resultados-detalles-summary,
  .resultados-detalles ul li {
    color: var(--naranja-b2);
  }

  .resultados-detalles li::marker {
    color: var(--naranja-base);
  }

  .resultados-detalles-summary:hover {
    color: var(--naranja-b5);
  }

  .cerrar-receta {
    color: var(--naranja-a7);
    background-color: var(--naranja-base);
  }

  .receta-completa {
    background-color: var(--neutral-a7);
  }

  .titulo-receta {
    color: var(--naranja-b0);
  }

  .duracion-receta {
    color: var(--neutral-base);
  }

  .ing-receta {
    border: 1px solid var(--hielo-a3);
    background-color: var(--hielo-a5);
  }

  .ing-receta:hover {
    border: 1px solid var(--neutral-a5);
    background-color: var(--neutral-a7);
  }

  .paso-descripcion,
  .ing-receta {
    color: var(--hielo-b4) !important;
  }

  .ing-receta-obli {
    border: 1px solid var(--cherry-a2);
    background-color: var(--cherry-a5);
    color: var(--cherry-b1) !important;
  }

  .ing-receta-obli:hover {
    background-color: var(--cherry-a6);
    color: var(--cherry-a3);
    cursor: pointer;
  }

  .ing-receta .cantidad,
  .ing-receta-obli .cantidad {
    border-left: 1px solid var(--neutral-b1);
  }

  .ing-receta-obli .cantidad {
    border-left: 1px solid var(--cherry-b1);
  }

  .paso {
    border: 1px solid var(--hielo-a3);
    background-color: var(--hielo-a5);
  }

  .paso:hover {
    border: 1px solid var(--hielo-a5);
    background-color: var(--hielo-a7);
  }

  .boton-social {
    background-color: var(--naranja-base);
  }

  .boton-social:hover {
    background-color: var(--naranja-a1);
  }

  .boton-pais,
  .boton-categoria,
  .ingrediente {
    background-color: var(--checkbox-normal-bg-lm);
    border: var(--checkbox-normal-stroke-lm);
  }

  @media (hover:hover) {

    .boton-pais:hover,
    .boton-categoria:hover,
    .ingrediente:hover {
      background-color: var(--checkbox-hover-bg-lm);
      border: var(--checkbox-hover-stroke-lm);
    }
  }

  .boton-pais:has(input[type="checkbox"]:checked),
  .boton-categoria:has(input[type="checkbox"]:checked),
  .ingrediente:has(input[type="checkbox"]:checked) {
    background-color: var(--checkbox-selected-bg-lm);
    border: var(--checkbox-selected-stroke-lm);
  }

  .popup-texto-copiado {
    background-color: var(--checkbox-selected-bg-lm);
  }

  .popup-texto-copiado:hover {
    background-color: var(--checkbox-selected-bg-lm);
  }

  .popup-texto-copiado:active {
    background-color: var(--checkbox-selected-bg-lm);
  }

  .seccion-receta {
    color: var(--hielo-base);
  }

  .ingredientes-receta h3,
  .procedimiento h3,
  .social h3 {
    color: var(--naranja-b0);
  }
}

:root[data-theme="dark"] {
  body {
    background-color: var(--naranja-b7);
  }

  p,
  input,
  option,
  select,
  header,
  label,
  summary,
  .label-grande {
    color: var(--naranja-a5);
  }

  select {
    background-color: var(--naranja-a5);
  }

  .container-a {
    background-color: var(--naranja-b5);
    border: 1px solid var(--naranja-b3);
  }

  .grupo-ingredientes:open>summary:hover {
    background-color: var(--naranja-b3);
  }

  .grupo-ingredientes summary {
    background-color: var(--naranja-b3);
    color: var(--naranja-a7);
  }

  .grupo-ingredientes summary:hover {
    background-color: var(--naranja-b2);
  }

  .subgrupo-ingredientes {
    background-color: var(--naranja-b4);
  }

  .subgrupo-ingredientes summary {
    color: var(--naranja-a5);
    background-color: var(--naranja-b4);
    border-top: 1px solid var(--naranja-b3);
  }

  .subgrupo-ingredientes:open>summary {
    background-color: var(--naranja-b2);
  }

  .subgrupo-ingredientes:open>summary:hover {
    background-color: var(--naranja-b2);
  }

  .toggle-dark-mode {
    color: var(--naranja-b7);
    background-color: var(--naranja-a4);
  }

  .primary {
    background-color: var(--banana-a0);
    color: var(--naranja-b5);
  }

  .primary:hover {
    color: var(--naranja-b5);
    background-color: var(--banana-a4);
  }

  .resultados-receta {
    background-color: var(--naranja-b4);
    border: 1px solid var(--naranja-b2);
  }

  .resultados-titulo-receta {
    color: var(--naranja-a5);
  }

  .resultados-label-tiempo {
    color: var(--naranja-base);
  }

  .resultados-detalles-summary,
  .resultados-detalles ul li {
    color: var(--naranja-a2);
  }

  .resultados-detalles li::marker {
    color: var(--naranja-base);
  }

  .resultados-detalles-summary:hover {
    color: var(--naranja-a5);
  }

  .cerrar-receta {
    color: var(--naranja-a7);
    background-color: var(--naranja-base);
  }

  .receta-completa {
    background-color: var(--hielo-b6);
  }

  .titulo-receta {
    color: var(--neutral-a7);
  }

  .duracion-receta {
    color: var(--neutral-base);
  }

  .ing-receta {
    border: 1px solid var(--hielo-b1);
    background-color: var(--hielo-b3);
  }

  .ing-receta:hover {
    border: 1px solid var(--hielo-a0);
    background-color: var(--hielo-b0);
  }

  .paso-descripcion,
  .ing-receta {
    color: var(--hielo-a4) !important;
  }

  .ing-receta-obli {
    border: 1px solid var(--cherry-b1);
    background-color: var(--cherry-b3);
    color: var(--cherry-a3) !important;
  }

  .ing-receta-obli:hover {
    border: 1px solid var(--cherry-b0);
    background-color: var(--cherry-b1);
    color: var(--cherry-b);
    cursor: pointer;
  }

  .ing-receta .cantidad,
  .ing-receta-obli .cantidad {
    border-left: 1px solid var(--neutral-a1);
  }

  .ing-receta-obli .cantidad {
    border-left: 1px solid var(--cherry-b1);
  }

  .paso {
    border: 1px solid var(--hielo-b1);
    background-color: var(--hielo-b3);
  }

  .paso:hover {
    border: 1px solid var(--hielo-base);
    background-color: var(--hielo-b1);
  }

  .boton-social {
    background-color: var(--naranja-b0);
  }

  .boton-social:hover {
    background-color: var(--naranja-b2);
  }

  .boton-pais,
  .boton-categoria,
  .ingrediente {
    background-color: var(--checkbox-normal-bg-dm);
    border: var(--checkbox-normal-stroke-dm);
  }

  @media (hover:hover) {

    .boton-pais:hover,
    .boton-categoria:hover,
    .ingrediente:hover {
      background-color: var(--checkbox-hover-bg-dm);
      border: var(--checkbox-hover-stroke-dm);
    }
  }

  .boton-pais:has(input[type="checkbox"]:checked),
  .boton-categoria:has(input[type="checkbox"]:checked),
  .ingrediente:has(input[type="checkbox"]:checked) {
    background-color: var(--checkbox-selected-bg-dm);
    border: var(--checkbox-selected-stroke-dm);
  }

  .popup-texto-copiado {
    background-color: var(--checkbox-selected-bg-dm);
  }

  .popup-texto-copiado:hover {
    background-color: var(--checkbox-selected-bg-dm);
  }

  .popup-texto-copiado:active {
    background-color: var(--checkbox-selected-bg-dm);
  }

  .seccion-receta {
    color: var(--hielo-a2);
  }

  .ingredientes-receta h3,
  .procedimiento h3,
  .social h3 {
    color: var(--naranja-a0);
  }
}

body {
  font-family: "DM Sans", system-ui;
}

.container {
  width: 100%;
  max-width: 1200px;
  min-width: 250px;
  margin: auto;
  padding: 0.5rem;
  position: relative;
}


header {
  width: 100%;
  text-align: center;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

h1 {
  line-height: 36px;
}

h2 {
  font-size: 36px;
  line-height: 36px;
}

.parametros-usuario {
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  margin-bottom: var(--espaciado-grande);
}

.col-multi {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

label,
summary {
  font-weight: 700;
  display: block;
}

.container-a {
  width: 100%;
  border-radius: var(--radius-1);
  padding: 1rem;
  text-align: center;
}

.label-grande {
  font-size: 16pt;
}

#all {
  margin-bottom: var(--spacing-1);
}

#display-ingredientes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.grupo-ingredientes {
  overflow: hidden;
  border-radius: var(--radius-1);
  height: fit-content;
}

.grupo-ingredientes summary {
  padding: 0.5rem;
  cursor: pointer;
}

.subgrupo-ingredientes summary {
  padding: 0.5rem;
  padding-bottom: 5px;
  cursor: pointer;
}


.contenedor-ingredientes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: var(--spacing-2);
  grid-row-gap: var(--spacing-2);
  padding: var(--spacing-2);
}

.ingrediente>input[type="checkbox"] {
  display: none;
}

.ingrediente {
  border-radius: var(--radius-3);
}

.input-ingrediente {
  display: flex;
  flex-direction: column;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  cursor: pointer;
  user-select: none;
  transition: 150ms;
}

.input-ingrediente img {
  width: 40px;
  height: 40px;
}

.input-ingrediente span {
  font-size: 0.8rem;
}

.primary {
  background-color: var(--primary);
  border: 0;
  border-radius: 1rem;
  padding: 0.5rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.25rem;
  transition: 200ms;
  color: var(--text);
  cursor: pointer;
}

.primary:hover {
  box-shadow: 0 10px 10px var(--primary-transparent);
  color: var(--background);
}

.primary:active {
  scale: 0.98 0.9;
}

#mostrar-recetas {
  width: 100%;
}

.resultados {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0.5rem 2rem 0.5rem;
}

@media (width <=350px) {
  .ingredientes-contenido {
    grid-template-columns: repeat(2, 1fr);
  }

  .resultados article img {
    display: none;
  }
}

@media (width < 550px) {
  .obligatorio {
    display: none;
  }
}

@media (width > 500px) {
  .ingredientes-contenido {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (width > 700px) {
  .ingredientes-contenido {
    grid-template-columns: repeat(5, 1fr);
  }

  .col-multi {
    flex-direction: row;
  }

  #display-ingredientes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--spacing-2);
    grid-row-gap: var(--spacing-2);
  }
}

@media (width > 950px) {
  .ingredientes-contenido {
    grid-template-columns: repeat(6, 1fr);
  }

  .resultados {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .container {
    padding: 2rem;
  }

  .resultados {
    margin: 0.5rem 1rem 2rem 1rem;

  }
}

@media (width >=1200px) {
  .ingredientes-contenido {
    grid-template-columns: repeat(7, 1fr);
  }

  .resultados {
    margin: 0.5rem 2rem 2rem 2rem;

  }
}

.resultados-receta {
  border-radius: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border-left: 0.25rem solid var(--accent);
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.05);
  transition: 200ms ease-in-out;
}

.resultados-detalles-img {
  border-radius: 0.5rem;
  max-width: 33%;
  min-width: 100px;
  height: auto;
  object-fit: cover;
  transition: var(--timing-1);
}

.resultados-detalles-img:hover {
  opacity: 0.8;
  cursor: pointer;
}

.resultados-titulo-receta {
  line-height: 16pt;
  margin-bottom: 3px;
}

.resultados-titulo-receta:hover {
  text-decoration: underline dotted var(--naranja-base);
  cursor: pointer;
}

.resultados-receta-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.resultados-label-tiempo {
  line-height: 12pt;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.resultados-detalles-summary {
  line-height: 12pt;
  display: flex;
  align-items: center;
  margin-left: -9px;
}

.resultados-detalles {
  transition: var(--timing-1);

}

.resultados-detalles:open .resultados-detalles-summary .material-symbols-outlined {
  rotate: 90deg;
  transition: var(--timing-1);
}

.resultados-detalles ul {
  padding-left: 1rem;
  list-style: disc;
  margin-top: 0.5rem;
}

.resultados-detalles-summary:hover {
  cursor: pointer;
}

.no-recetas-anuncio {
  color: var(--naranja-base);
  text-align: center;
  width: 100%;
  background-color: var(--white);
  padding: 1rem;
  border-radius: 1rem;
}

.toggle-dark-mode,
.cerrar-receta {
  position: fixed;
  top: 2rem;
  border-radius: 0 1rem 1rem 0;
  border: none;
  width: 3rem;
  height: 3rem;
  line-height: 0;
  cursor: pointer;
  transition: 200ms ease-in-out;
  text-align: right;
  padding-right: 0.5rem;
  z-index: 3;
}

.toggle-dark-mode:hover,
.cerrar-receta:hover {
  width: 4rem;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
}

header h1 {
  color: var(--primary);
}

header p {
  color: var(--caption)
}


.receta-completa {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 100vw;
  top: 0;
  padding: 1rem;
  padding-bottom: 4rem;
  overflow-y: scroll;
  transition: 1000ms;
}

.contenedor-receta {
  max-width: 800px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.img-receta {
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-3);
}

.titulo-receta {
  margin-bottom: 0.25rem;
}

.duracion-receta {
  display: flex;
  align-items: center;
  gap: 5px;
}

.duracion-receta .material-symbols-outlined {
  transform: translateY(-1px);
}

.ingredientes-receta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ing-receta,
.ing-receta-obli {
  width: 100%;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-2);
  display: flex;
  align-items: center;
  position: relative;
}

.ing-receta:hover {
  cursor: pointer;
}

.checkbox-receta {
  margin-right: 1rem;
}

.checkbox-receta,
.checkbox-paso {
  height: 1rem;
  width: 1rem;
}

.tipo-porcion {
  margin-left: 1ch;
}

.obligatorio {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(1rem + 5px);
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1pt;
}

.checkbox-receta:checked+.ingrediente-titulo,
.checkbox-receta:checked+.ingrediente-titulo+.cantidad,
.checkbox-receta:checked+.ingrediente-titulo+.cantidad+.tipo-porcion,
.checkbox-receta:checked+.ingrediente-titulo+.cantidad+.tipo-porcion+.obligatorio {
  text-decoration: line-through;
}

.ing-receta:has(.checkbox-receta:checked),
.ing-receta-obli:has(.checkbox-receta:checked) {
  opacity: 0.5;
}

.ing-receta .cantidad,
.ing-receta-obli .cantidad {
  margin-left: 2rem;
  padding-left: 1rem;
}



.paso,
.ing-receta,
.ing-receta-obli {
  transition: 300ms;
}

.procedimiento {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.seccion-receta {
  font-size: large;
}

.paso {
  display: flex;
  gap: 1rem;
  align-items: start;

  padding: 0.5rem 1rem;
  border-radius: var(--radius-2);
}

.checkbox-paso {
  transform: translateY(6px);
  min-width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.paso:has(.checkbox-paso:checked) {
  opacity: 0.25;
}

.paso-descripcion {
  font-weight: normal;
  cursor: pointer;
}

.boton-social {
  border-radius: var(--radius-1);
}

.cerrar-receta {
  right: 0;
  border-radius: 1rem 0 0 1rem;
  text-align: left;
  padding-right: 0;
  padding-left: 0.5rem;
}

.social {
  width: 100%;
}

.social-contenedor {
  width: 100%;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.boton-social {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem;
  width: 100%;
  transition: 250ms;
  position: relative;
}

.boton-social:hover {
  cursor: pointer;
}

.boton-social img {
  width: 35px;
  filter: invert(100%);
}

.boton-social span {
  line-height: 1;
  font-weight: 700;
  color: var(--naranja-a6);
  transition: 500ms;
}

.receta-completa {
  display: block;
}

footer {
  background-color: var(--naranja-b1);
  width: 100%;
  padding: 1rem;
  text-align: center;
}

footer h2,
footer p {
  color: var(--naranja-a7) !important;
}

.boton-pais input[type="checkbox"] {
  display: none;
}

.boton-pais {
  border-radius: var(--radius-3);
  padding: 0.5rem;
  min-width: 100%;
}

.label-boton-pais img {
  max-width: 35px;
}

.label-boton-pais span {
  font-size: 0.8rem;
}

.label-boton-pais {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  transition: 150ms;
  gap: 0.25rem;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  background-color: var(--naranja-base);
  height: 1rem;
  outline: none;
  border-radius: var(--radius-3);
  margin: 1rem 0;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 2rem;
  background: var(--banana-a0);
  cursor: pointer;
  border-radius: var(--radius-3);
  transition: ease-in-out 250ms;
}

.slider::-webkit-slider-thumb:hover {
  height: 2rem;
}

.slider::-moz-range-thumb {
  background: var(--banana-a3);
  cursor: pointer;
}

.contenedor-categorias {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.boton-categoria {
  width: 100%;
  padding: var(--spacing-2);
  border-radius: var(--radius-3);
  box-sizing: border-box;
}

.contenido-boton-categoria {
  display: flex;
  gap: var(--spacing-2);
  align-items: center;
  cursor: pointer;
}

.boton-categoria img {
  max-width: 45px;
}

.boton-categoria>input[type="checkbox"] {
  display: none;
}

.block-flex {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.ingredientes-receta h3,
.procedimiento h3,
.social h3 {
  font-size: x-large;
}

.seccion-titulo-receta {
  display: flex;
  justify-content: space-between;
}

.icono-favorito {
  font-size: 2rem !important;
  color: var(--banana-a0);
}