/* ===== Editor de pedidos Platanadas ===== */

.arma-editor-cta {
  text-align: center;
  margin-top: 1.5rem;
}

.pedido-editor.collapsed {
  display: none;
}

.pedido-editor {
  margin-top: 2.5rem;
}

.pedido-editor-card {
  background: var(--cream);
  border-radius: 18px;
  border: 2px solid var(--verde-pinton);
  box-shadow: 0 10px 25px rgba(42, 76, 55, 0.12);
  padding: 1.5rem;
}

/* Barra superior */

.pe-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(
    120deg,
    var(--banana),
    var(--amarillo-maduro),
    var(--verde-pinton)
  );
  border-radius: 14px;
  padding: 0.75rem 1rem;
  border: 2px solid var(--stroke);
}

.pe-top-title {
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
  color: var(--salsa);
}

.pe-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pe-tab {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.pe-tab.active {
  background: var(--guava-coral);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

/* Layout principal */

.pe-body {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 70px;
  gap: 1rem;
}

/* Fases (izquierda) */

.pe-fases {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pe-fase-btn {
  border: 2px solid var(--stroke);
  border-radius: 999px;
  padding: 0.4rem 0.6rem;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.pe-fase-btn.active {
  background: var(--verde-pinton);
  color: #fff;
  transform: translateX(2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

/* Panel central */

.pe-center {
  border-radius: 14px;
  border: 2px solid var(--verde-pinton);
  padding: 0.9rem;
  background: var(--cream-alt);
}

.pe-center-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.pe-fase-titulo {
  font-family: "Fredoka", sans-serif;
  font-size: 1.1rem;
}

.pe-nav-fase {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* Grid de ingredientes */

.pe-ingred-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* móvil: 3 columnas, desktop: hasta 5 */

@media (min-width: 960px) {
  .pe-ingred-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-content: center;
    justify-items: center;
  }
}

.pe-ingred-card {
  background: #fff;
  border-radius: 16px;
  border: 2px solid var(--verde-pinton);
  padding: 0.5rem 0.5rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: background-color 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.pe-ingred-card.has-qty {
  background: rgba(76, 175, 80, 0.12);
  border-color: var(--verde-pinton);
  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.2);
}

.pe-ingred-nombre {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--salsa-brown);
  min-height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pe-ingred-card img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-inline: auto;
}

/* Cantidad */

.pe-cantidad-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.1rem;
}

.pe-cantidad-controls button {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--banana);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}
.pe-cantidad-controls button.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pe-cantidad-controls button.disabled:hover {
  transform: none;
}
.pe-cantidad-label {
  min-width: 1.8rem;
  text-align: center;
  font-weight: 700;
}

/* Acciones derecha */

.pe-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.pe-action-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 2px solid var(--stroke);
  background: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* Botón verde FINAL (✓) */
#pe-btn-summary {
  background: var(--verde-pinton) !important;
  color: #fff !important;
}

/* Botón rojo RESET (x) */
#pe-btn-reset {
  background: var(--guava-coral) !important;
  color: #fff !important;
  border-color: var(--salsa);
}

.pe-hint {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
  color: var(--salsa-brown);
}

/* Popup */

.pe-popup.pe-hidden {
  display: none;
}

.pe-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
}

.pe-popup-content {
  background: var(--cream);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  max-width: 320px;
  text-align: center;
  border: 2px solid var(--verde-pinton);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.pe-popup-content h3 {
  margin-bottom: 0.75rem;
}

.pe-popup-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.button.button-secondary {
  background: #fff;
  color: var(--salsa);
  border: 2px solid var(--verde-pinton);
}

/* Responsive editor */

@media (max-width: 768px) {
  .pe-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .pe-fases {
    flex-direction: row;
    justify-content: center;
  }

  .pe-actions {
    flex-direction: row;
    justify-content: center;
  }
}
/* Transición suave del alto del contenedor */
#pe-ingredientes-grid {
  transition: height 0.35s ease, opacity 0.35s ease;
  position: relative;
}

/* Animación izquierda */
.slide-left {
  animation: slideLeft 0.35s ease;
}
@keyframes slideLeft {
  0% { opacity: 0; transform: translateX(25px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Animación derecha */
.slide-right {
  animation: slideRight 0.35s ease;
}
@keyframes slideRight {
  0% { opacity: 0; transform: translateX(-25px); }
  100% { opacity: 1; transform: translateX(0); }
}

#pe-ingredientes-wrapper {
  overflow: hidden;
  transition: max-height 0.35s ease;
}