/* Reset de márgenes y paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Banner */
.banner {
    display: flex;
    justify-content: center;  /* Centra el contenido horizontalmente */
    align-items: center;      /* Centra los elementos verticalmente */
    background-color: #5cb85c;
    color: white;
    padding: 30px;
    position: relative;       /* Asegura que se puedan posicionar elementos dentro de manera relativa */
}

/* Contenedor para el título y la descripción */
.banner-left {
    text-align: center;       /* Asegura que el contenido dentro de banner-left esté centrado */
    padding-right: 20px;      /* Espacio entre el texto y el borde derecho */
    flex-grow: 1;             /* Permite que el banner-left ocupe el máximo espacio posible */
}

.banner-left p {
    margin-top: 10px;
}

/* Alineación del contenedor a la derecha */
.header-right {
    position: absolute;        /* Posiciona este elemento de forma absoluta respecto al banner */
    right: 15px;               /* Lo mueve un poquito hacia la izquierda */
    top: 50%;                  /* Lo centra verticalmente en el banner */
    transform: translateY(-50%); /* Asegura que esté centrado verticalmente */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para el botón */
.boton-imagen {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.boton-imagen img {
    width: 30px;
    filter: invert(1);
    height: auto;
    margin-bottom: 10px;  /* Espacio entre la imagen y el texto */
}

.boton-imagen p {
    margin: 0;
    font-size: 1rem;
    color: white;
}

/* Contenedor de recetas */
.recetas-container {
    display: flex;
    justify-content: space-around;
    padding: 50px;
    max-width: 1200px; /* Ancho máximo para el contenedor de recetas */
    margin: 0 auto; /* Centrar el contenedor */
    flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan en pantallas pequeñas */
}

.receta {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 30%; /* Ancho de las tarjetas en pantallas grandes */
    margin: 10px;
    text-align: center;
    padding: 25px;
    transition: transform 0.3s ease;
    display: flex; /* Usar flexbox para alinear elementos */
    flex-direction: column; /* Colocar elementos en columna */
    justify-content: space-between; /* Espacio entre elementos */
    min-height: 350px; /* Altura mínima para las tarjetas */
}

.receta img {
    width: 100%; /* Ajustar a 100% para que ocupe el ancho del contenedor */
    border-radius: 8px;
    height: 200px; /* Altura fija para las imágenes */
    object-fit: cover; /* Mantener la proporción de la imagen */
}

.receta h2 {
    margin-top: 15px;
    font-size: 1rem;
    color: #333;
    flex-grow: 1; /* Permitir que el título ocupe el espacio disponible */
}

.receta button {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.receta button:hover {
    background-color: #4cae4c;
}

/* Hover para las recetas */
.receta:hover {
    transform: translateY(-10px);
}

.detalle-receta {
    display: flex;
    justify-content: space-between; /* Cambiar a space-between para distribuir el espacio */
    align-items: flex-start;
    background-color: #f8f8f8;
    padding: 35px;
    margin-top: 20px;
    max-width: 1200px; /* Ancho máximo para el detalle de la receta */
    margin: 20px auto; /* Centrar el detalle */
}

.detalle-receta-left {
    width: 40%; /* Ajustar el ancho para que no ocupe demasiado espacio */
    padding-right: 20px;
}

.detalle-receta-right {
    width: 55%; /* Ajustar el ancho para que no ocupe demasiado espacio */
}

.detalle-receta img {
    width: 100%;
    border-radius: 8px;
    height: auto; /* Mantener la proporción de la imagen */
    max-height: 500px; /* Limitar la altura máxima de la imagen */
}

.detalle-receta h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.detalle-receta p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 20px;
}

/* Espaciado entre ingredientes e instrucciones */
.ingredients-list, .instructions-list {
    margin-top: 10px; /* Añadir margen superior */
}

/* Estilos para los botones de Ingredientes e Instrucciones */
.tabs-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-button {
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    border-radius: 5px;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.tab-button:hover {
    background-color: #4cae4c;
}

/* Estilo para los contenidos de Ingredientes y Instrucciones */
.detalle-contenido {
    text-align: center;
}

.tab-content {
    background-color: #fff; /* Fondo blanco para las tarjetas */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    margin-top: 20px; /* Espacio entre el título y la tarjeta */
}

#ingredientes-container ul,
#instrucciones-container ol {
    list-style-position: inside;
    padding-left: 0;
    margin: 10px 0;
    font-size: 1rem;
    color: #666;
}

#ingredientes-container ul li,
#instrucciones-container ol li {
    margin-bottom: 10px;
    color: #333;
	text-align: justify;
}

.ingredients-list, .instructions-list {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding */
}

.ingredients-list li, .instructions-list li {
    background-color: #f9f9f9; /* Fondo claro */
    border: 1px solid #ddd; /* Borde gris */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    margin: 5px 0; /* Espaciado entre elementos */
    display: flex; /* Flex para alinear iconos */
    align-items: center; /* Centra verticalmente */
}

.ingredient-icon, .instruction-icon {
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

/* Estilos para las tarjetas de ingredientes e instrucciones */
.card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card:hover {
    transform: scale(1.05);
}

.card img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.card p {
    color: #333;
    font-size: 1rem;
    margin: 0;
}

/* Estilos para los íconos en ingredientes e instrucciones */
.card-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

/* Media Queries para pantallas pequeñas */
@media (max-width: 768px) {
    /* Banner */
    .banner {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        padding: 20px; /* Reduce el padding en pantallas más pequeñas */
    }

    .banner-left {
        text-align: center; /* Centrar el texto */
        padding-right: 0; /* Elimina el padding a la derecha */
        flex-grow: 0; /* Ya no necesita ocupar todo el espacio disponible */
        margin-bottom: 20px; /* Espacio entre el título y el botón */
    }

    .header-right {
        margin-top: 10px; /* Espacio superior */
        position: relative; /* Cambiar a posición relativa */
        text-align: center; /* Centrar el texto */
    }

    .header-right .boton-imagen img {
        width: 25px; /* Hacer la imagen más pequeña en móvil */
        margin-bottom: 2.5px; /* Reduce el margen entre la imagen y el texto */
    }

    .header-right .boton-imagen p {
        font-size: 0.9rem; /* Reducir el tamaño del texto */
    }

    /* Ajustar el contenedor de recetas para pantallas más pequeñas */
    .recetas-container {
        justify-content: center; /* Centrar las recetas */
    }

    .receta {
        width: 90%; /* Las recetas ocupan casi todo el ancho disponible */
        margin: 10px 0; /* Espacio entre las recetas */
    }

    .receta img {
        height: 150px; /* Ajustar la altura de las imágenes */
    }

    .receta h2 {
        font-size: 1.25rem; /* Reducir el tamaño de la fuente en pantallas pequeñas */
    }

    .receta button {
        font-size: 0.9rem; /* Ajustar el tamaño del botón */
    }

    /* Detalle de la receta */
    .detalle-receta {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
        align-items: center; /* Centrar los elementos */
    }

    .detalle-receta-left, .detalle-receta-right {
        width: 100%; /* Hacer que ambos ocupen el 100% en móviles */
        padding-right: 0; /* Eliminar padding derecho */
    }

    .detalle-receta img {
        height: auto; /* Mantener la proporción de la imagen */
        max-height: 300px; /* Limitar la altura máxima de la imagen */
    }

    .detalle-receta h2 {
        font-size: 1.8rem; /* Reducir el tamaño del título */
    }

    .detalle-receta p {
        font-size: 1rem; /* Reducir el tamaño del texto */
    }

    /* Ajustar los botones de ingredientes e instrucciones */
    .tabs-container {
        flex-direction: column; /* Cambiar a columna */
    }

    .tab-button {
        margin: 5px 0; /* Espacio entre los botones */
        width: 100%; /* Hacer que los botones ocupen todo el ancho */
    }

    /* Ajustar el tamaño de las listas */
    .ingredients-list li, .instructions-list li {
        font-size: 0.9rem; /* Reducir el tamaño de la fuente */
    }
}

@media (max-width: 480px) {
    /* En pantallas muy pequeñas, ajustamos aún más */
    .receta {
        width: 100%; /* Las recetas ocupan todo el ancho */
    }

    .banner-left h1 {
        font-size: 1.5rem; /* Reducir el tamaño del título */
    }

    .banner-left p {
        font-size: 0.8rem; /* Reducir el tamaño de la descripción */
    }

    .detalle-receta h2 {
        font-size: 1.5rem; /* Reducir el tamaño del título en detalle */
    }

    .detalle-receta p {
        font-size: 0.9rem; /* Reducir el tamaño del texto en detalle */
    }
}