/* ============================================================
   Shio Gourmet · detalle.html
   Durante la carga solo se ve el spinner (body.detalle-cargando
   oculta nav, banner, footer y "también podría interesarte").
   Botones teñidos con el color de la sal y altura fija para
   las fotos de las recetas.
   (El spinner de carga usa .cargando-recetas de animations.css,
   el mismo que recetas.html.)
   Variables que setea detalle.js sobre #detalle-contenido:
   --sal-color  → color de la sal (relleno)
   --sal-text   → #fff, o #283139 (negro de los textos) en las
                  sales claras (cebolla, limón, jengibre)
   --sal-edge   → color utilizable en bordes/textos (si el de
                  la sal es muy claro se oscurece)
   ============================================================ */

/* mientras carga: solo el spinner en pantalla */
body.detalle-cargando {
  margin-top: 0 !important;
}

body.detalle-cargando header,
body.detalle-cargando .banner-detalle,
body.detalle-cargando #seccion-relacionadas,
body.detalle-cargando footer {
  display: none !important;
}

/* botón principal: relleno con el color de la sal, sin borde */
.btn-sal {
  background-color: var(--sal-color, var(--bs-primary-1)) !important;
  border: 0 !important;
  color: var(--sal-text, var(--bs-white)) !important;
}

.btn-sal:hover,
.btn-sal:focus {
  filter: brightness(0.94);
}

/* botón terciario: solo texto con underline, sin contorno ni fondo */
.btn-terciario-sal {
  background: transparent !important;
  border: 0 !important;
  color: var(--sal-edge, var(--bs-primary-1)) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.btn-terciario-sal:hover,
.btn-terciario-sal:focus {
  filter: brightness(0.85);
}

/* cards de recetas: bordes redondeados arriba y abajo, sin
   sombra, texto a la izquierda y zoom de la foto al hover */
#recetas-desktop .card,
#recetas-mobile .card {
  box-shadow: none !important;
  text-align: left;
  border-radius: var(--radio-grande);
  overflow: hidden;
}

#recetas-desktop .card-image,
#recetas-mobile .card-image {
  overflow: hidden;
}

/* fotos de recetas: siempre la misma altura */
#recetas-desktop .card-image img,
#recetas-mobile .card-image img {
  width: 100% !important;
  height: 9rem;
  margin-bottom: 0 !important;
  object-fit: cover;
  transition: transform var(--transicion-media);
}

#recetas-desktop .card:hover .card-image img,
#recetas-mobile .card:hover .card-image img {
  transform: scale(1.1);
}