/* ============================================================
   Recipe View — PandyPan v2
   ============================================================ */

/* Fondo general */
body {
  background-color: #fffbe9;
  font-family: 'Inter', sans-serif;
  color: #5a3e1b;
}

/* Contenedor principal */
.recipe-view {
  @apply max-w-[1500px] mx-auto px-10 py-6 bg-transparent space-y-8;
}

/* ====== TÍTULO DE LA RECETA ====== */
.recipe-header {
  @apply bg-white rounded-2xl shadow-sm p-6 border border-yellow-100;
}

.recipe-title {
  @apply text-3xl font-bold text-[#5a3e1b] mb-3;
}

/* ====== METADATOS (tiempos, porciones, costo) ====== */
.recipe-meta {
  @apply flex flex-wrap gap-4 text-sm text-[#5a3e1b];
}

.recipe-meta-item {
  @apply flex items-center gap-2 bg-[#fff7e6] px-3 py-2 rounded-xl shadow-sm;
}

.recipe-meta-item img {
  @apply w-5 h-5;
}

/* ====== COSTO ====== */
.recipe-cost-summary {
  @apply bg-white rounded-2xl shadow-sm border border-yellow-100 p-4 flex justify-between items-center;
}

.recipe-cost-summary .label {
  @apply text-[#8b5e34] font-medium;
}

.recipe-cost-summary .value {
  @apply text-lg font-bold text-[#b45309];
}

/* ============================================================
   GRID RESPONSIVE — Ingredientes / Etapas
   ============================================================ */

.recipe-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 2rem !important;
}

/* Para pantallas pequeñas (mobile <768px), forzamos 1 columna */
@media (max-width: 768px) {
  .recipe-sections {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Aumenta un poco el padding interno para legibilidad */
  .recipe-card {
    padding: 1.25rem !important;
  }
}


/* ============================================================
   EXPANSIÓN REAL DEL ANCHO — Evita margen central forzado
   ============================================================ */

body {
  background-color: #fffbe9 !important;
}

/* Quita limitación heredada de Bootstrap o layout general */
main, .content, .page, .page-wrapper {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Fuerza la vista a ocupar ancho completo */
.recipe-view {
  max-width: 1600px !important; /* Ajusta a 1600 o 1700 según prefieras */
  width: 95% !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Hace que las secciones ocupen mejor el espacio */
.recipe-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 2rem !important;
}

/* ============================================================
   ESPACIADO VERTICAL UNIFORME ENTRE SECCIONES
   ============================================================ */

/* Reduce el gap vertical general */
.recipe-view {
  gap: 1.5rem !important;
}

/* Quita márgenes extra en los bloques principales */
.recipe-view > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Ajusta espaciado interno de cards */
.recipe-card,
.recipe-cost-summary,
.recipe-steps,
.recipe-header {
  margin-bottom: 1.25rem !important;
}

/* En mobile, ligeramente más compacto */
@media (max-width: 768px) {
  .recipe-view {
    gap: 1rem !important;
  }
  .recipe-card,
  .recipe-cost-summary,
  .recipe-steps,
  .recipe-header {
    margin-bottom: 1rem !important;
  }
}