* {
  /* outline: 1px solid red; */
  font-family: Comfortaa, Verdana;
}

.tarj_crear_receta {
  max-width: 830px;
  padding: 14px;
  border-radius: 01rem;
  overflow: visible;
  background: var(--backg-gradient-crearec);
  position: relative;
  z-index: 1;
  margin-left: 100px;
  margin-top: 10px;
}

.form-receta {
  max-width: 800px;
  width: 100%;
  background-color: #f6fffe;
  border-radius: 20px;
  padding: 10px 30px 30px; /* top right bottom left */
  justify-content: center;
  margin: 0 auto;
}

.form-receta {
  box-shadow: 0 0 20px 1px #ffbb763f;
  border: 1px solid #ffffff74;
}

.section {
  display: none;
}

.section.active {
  display: block;
}

/********************************************* SECCIÓN 1: CREAR RECETA ********************************************************/
.main-title {
  background-color: #007848;
  color: #f6fffe;
  font-family: Gloock, serif;
  font-size: 24px;
  text-align: center;
  padding: 8px 20px 12px; /* top right bottom left */
  border-radius: 20px;
  margin: 0 auto 15px;
  width: fit-content;
  position: relative;
}

.title-decoration {
  height: 2px;
  background-color: #f6fffe;
  border-radius: 20px;
  width: 222px;
  margin: 8px auto 15px;
  font-family: Gloock;
  margin-top: -26px;
  position: relative;
  margin-left: 304px;
}

.section-title {
  background-color: #007848;
  color: #f6fffe;
  font-size: 18px;
  padding: 8px 15px;
  border-radius: 0 15px 15px 0; /* top right bottom left */
  display: inline-block;
  margin-left: -30px;
}

.section-divider {
  height: 3px;
  background-color: #f6fffe;
  border-radius: 3px;
  width: 120px;
  margin-bottom: 15px;
}

.form-group {
  margin-bottom: 15px;
}

/* Textos del formulario */
.form-group label {
  font-size: 14.5px;
}

.form-group input,
.form-group textarea,
.form-group select {
  font-size: 13.5px;
  color: #1a1c1c;
}

.input-border {
  border: 1.9px solid #007848 !important;
  margin: 10px auto !important;
  padding: 8px !important;
  border-radius: 10px !important;
}

.input-border:focus {
  border-color: #007848 !important;
  box-shadow: 0 0 0 0.2rem rgb(0 120 72 / 25%) !important;
}

.textarea-fija {
  resize: vertical;
  height: 115px;
  max-height: 115px; /* Establece la altura máxima */
  min-height: min-content; /* Establece la altura mínima */
}

/* -------------------------- ZONA IZQUIERDA------------------------------ */

.zona-principal {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
  margin-top: -20px;
}

.zona-izquierda {
  flex: 1;
  margin-left: 1rem;
}

/* --------------------------   ZONA IZQUIERDA  ------------------------------ */

/* zona de imagen receta */
.zona-derecha {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #007848;
  border-radius: 14px;
  padding: 1rem;
  height: auto;
}

.zona_tarjeta_calif {
  margin-right: 20px;
  margin-top: -2.7rem;
}

/* IMAGEN DE LA RECETA */
.lbl-seleccionar-imagen {
  color: #f6fffe;
}

/* Imagen de receta */
.img-container {
  position: relative;
  width: 100%; /* limites */
  max-width: 300px; /* ancho máximo */
  min-width: 200px; /* ancho mínimo */
  height: 300px;
  max-height: 400px; /* altura máxima */
  min-height: 200px; /* altura mínima */
  border: 2px dashed #007848;
  background-color: #f2fef9;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  overflow: hidden;
}

.icono-placeholder {
  font-size: 48px;
  color: #007848;
}

.img-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

/* Estilo para el contenedor de Cropper */
.img-container .cropper-container {
  width: 100% !important;
  height: 100% !important;
  border-radius: 12px; /* Mantiene el borde cuadrado del contenedor */
}

/* -----------------------------CALIFICACION DE ESTRELLAS ----------------------------- */

/* Calificacion de estrellas */
.rating {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.5rem;

  --stroke: #fffbfb;
  --fill: #ffc73a;
}

.rating input {
  appearance: unset;
}

.rating label {
  cursor: pointer;
}

.rating svg {
  width: 2rem;
  height: 2rem;
  overflow: visible;
  fill: transparent;
  stroke: var(--stroke);
  stroke-linejoin: bevel;
  stroke-dasharray: 12;
  animation: idle 4s linear infinite;
  transition:
    stroke 0.2s,
    fill 0.5s;
}

@keyframes idle {
  from {
    stroke-dashoffset: 24;
  }
}

.rating label:hover svg {
  stroke: var(--fill);
}

.rating input:checked ~ label svg {
  transition: 0s;
  animation:
    idle 4s linear infinite,
    yippee 0.75s backwards;
  fill: var(--fill);
  stroke: var(--fill);
  stroke-opacity: 0;
  stroke-dasharray: 0;
  stroke-linejoin: miter;
  stroke-width: 8px;
}

@keyframes yippee {
  0% {
    transform: scale(1);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30% {
    transform: scale(0);
    fill: var(--fill);
    fill-opacity: 0;
    stroke-opacity: 1;
    stroke: var(--stroke);
    stroke-dasharray: 10;
    stroke-width: 1px;
    stroke-linejoin: bevel;
  }

  30.1% {
    stroke: var(--fill);
    stroke-dasharray: 0;
    stroke-linejoin: miter;
    stroke-width: 8px;
  }

  60% {
    transform: scale(1.2);
    fill: var(--fill);
  }
}

.rating label svg {
  transform: rotate(45deg);
}

/***************** SECCIÓN 2: CARACTERÍSTICAS Y INGREDIENTES *******************/
.tiempo-dificultad {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 1rem;
  position: relative;
  gap: 1rem;
}

.tiempo,
.valor_nutric,
.dificultad {
  display: flex;
  align-items: center;
  position: relative;
  flex-direction: column;
}

.tiempo {
  margin-left: 20px;
}

/* minuto/hora */
#unidad-tiempo {
  max-width: 6rem;
  font-size: 14px;
}

/* tiempo de preparacion */
#time-receta {
  max-width: 7rem;
  font-size: 14px;
}

/* Ajuste del ancho del select de dificultad */
#select-dificultad {
  max-width: 12rem;
  margin-left: 0;
  font-size: 14px;
}

.select_dif {
  font-size: 14px;
}

.separador-vertical {
  width: 1px;
  background-color: #007848;
  height: 50px;
}

.dificultad-con-icono {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tiempo-inputs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tiempo-inputs input,
.tiempo-inputs select {
  flex: 1;
}

.select-categoria {
  width: 100%;
  font-size: 14px;
  margin-top: 0.5rem;
  color: #1a1c1c;
}

.categoria label {
  color: #1a1c1c;
  font-size: 14px;
  margin-top: 1rem;
}

/* Contenedor para poner categoría y tipo de receta lado a lado */
.fila-categoria-tipo {
  display: flex;
  gap: 10px; /* espacio entre los select */
  align-items: flex-end;
}

/* Ajustes para que ambos selects tengan el mismo estilo */
.fila-categoria-tipo .categoria,
.fila-categoria-tipo .tipo-receta {
  flex: 1; /* ambos ocupan el mismo ancho */
}

.fila-categoria-tipo label {
  color: #1a1c1c;
  font-size: 14px;
  margin-bottom: 0.3rem;
  display: block;
}

/*      INGREDIENTES    */
.zona-ingredientes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 80%;
  position: relative;
  justify-content: center;
  margin: 0 auto;
}

.ingrediente-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.ingrediente-item input {
  flex: 1;
}

.ingrediente-item.sin-boton::after {
  content: ""; /* espacio fantasma igual al botón para alinear */
  width: 32px;
  display: inline-block;
}

/* -------------------------- SECCION 3: ZONA PASOS ------------------------------ */
.zona-pasos {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  position: relative;
  justify-content: center;
  margin: auto;
  margin-left: 1rem;
  margin-right: 1rem;
}

.lista-dinamica {
  width: 100%;
}

.paso-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.paso-item.sin-boton::after {
  content: ""; /* espacio fantasma igual al botón para alinear */
  width: 32px;
  display: inline-block;
}

.paso-imagen-small {
  width: 120px;
  height: 100px;
  border: 2px dashed #007848;
  border-radius: 12px;
  background-color: #f2fef9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.paso-input {
  flex: 1;
}

.btn-eliminar {
  margin-left: 0;
  background-color: transparent;
  border: none;
  color: red;
  font-size: 1rem;
  cursor: pointer;
  width: 32px;
}

/********************  BOTONES FORMULARIO  *******************/
.buttons-container {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.form-button {
  border: none;
  border-radius: 12px;
  padding: 10px 25px;
  font-family: Comfortaa;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 120px;
  justify-content: center;
}

.prev-button {
  background-color: #f6fffe;
  color: #007848;
  border: 2px solid #007848;
  font-size: 14px;
}

.next-button {
  background-color: #154734;
  color: #f6fffe;
  font-family: Comfortaa;
  font-size: 14px;
}

/* Centra SOLO el botón de la sección 1 */
#section1 .center-button {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  margin-top: 25px;
  font-family: Comfortaa;
}

.btn-agregar {
  margin-top: 0.5rem;
  color: #1a1c1c;
  font-family: Comfortaa, Verdana;
  font-size: 14px;
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-agregar-ingrediente {
  background-color: #e99a3c;
}

.btn-agregar-paso {
  background-color: #e99a3c;
  position: relative;
  align-self: flex-end;
}

/* BOTON GUARDAR RECETA */
.boton-crear-receta {
  display: block;
  margin: 20px auto;
  text-align: center;
}

.btn-crear-receta {
  color: #1a1c1c;
  font-weight: 500;
  background-image:
    linear-gradient(325deg, #e99a3c 0%, #f8c78c 55%, #e99a3c 90%),
    linear-gradient(45deg, #e99a3c, #fff);
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow:
    0 0 20px #e99a3c80,
    0 5px 5px -1px #c8782840,
    inset 4px 4px 8px #ffd2aa80,
    inset -4px -4px 8px #b4641459;
  font-size: 1rem;
  cursor: pointer;
  font-family: Comfortaa, Verdana;
}

.btn-crear-receta:hover {
  box-shadow:
    0 0 20px #e99a3c80,
    0 20px 30px -6px rgb(233 154 60 / 50%),
    inset 4px 4px 8px #ffd2aa80,
    inset -4px -4px 8px #b4641459;
}

/* -------------------------- ZONA BARRA PROGRESO ------------------------------ */
.progress-container,
.progress-container2,
.progress-container3 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;
}

.progress-line,
.progress-line2,
.progress-line3 {
  height: 2px;
  background-color: #007848;
  flex-grow: 1;
  max-width: 50px;
}

.progress-step,
.progress-step2,
.progress-step3 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #154734;
  position: relative;
}

.progress-step.active,
.progress-step2.active,
.progress-step3.active {
  background: linear-gradient(#007848, #154734);
}

.progress-step.inactive,
.progress-step2.inactive,
.progress-step3.inactive {
  background-color: #f6fffe;
}

@media (width <= 600px) {
  .form-receta {
    padding: 20px;
  }

  .main-title {
    font-size: 22px;
    padding: 10px 15px;
  }

  .columns-container {
    flex-direction: column;
    gap: 10px;
  }

  .column {
    min-width: 100%;
  }

  .half-width,
  .select-container {
    max-width: 100%;
  }
}