/* Estilos específicos para la versión 2025 de las recetas */

    html {
        display: table;
        margin: 0 auto;
        height: 100%; 
        box-sizing: border-box;
        width: 95%;
        max-width: 900px;
    }
    body { 
        display: table-cell;
        vertical-align: middle; 

        border: 1px solid #426BB5;
        border-right-width: 2px;
        border-bottom-width: 2px;
        min-width: 250px;
        border-radius: 5px;
    }    

    html, body {
        /*max-width: 900px;*/
        margin: 5px auto;
        padding: 0;
    }

    main {
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        text-align: left;

    }

    .receta_contenido {
        flex: 2; /* Main content takes more space */
        padding-right: 20px;
    }

    .receta_descripcion {
        /*font-style: italic;*/
        background-color:rgb(245, 239, 153);
        padding: 10px;
        margin: 15px 0;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .receta_imagenes {
        flex: 1; /* Image section takes less space */
        width: 40%;
        /*text-align: center;*/
        float: right; 
        margin: 5px;
    }

    .receta_imagenes img {
        max-width: 100%;
        /*width: 250px;  Fixed width for images */
        height: auto; /* Maintain aspect ratio */
        border-radius: 5px;
        /* Sombra fuerte a los bordes */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }

    aside {
        background-color: #f1f1f1;
        padding: 15px;
        /*width: 300px;  Fixed width for the aside */
    }

    .div_imagenes_pie {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-between;*/
        justify-content: space-around;
    }

    .div_imagenes_pie figure {
        margin: 10px;
        text-align: center;
    }

    .div_imagenes_pie img {
        max-width: 250px;
        height: auto;
        border: 2px solid #ccc;
        border-radius: 5px;
    }

    /* Para destacar un elemento de la lista con clase "destacar" */
    .destacar li {
        cursor: pointer;
        padding: 4px; /* 8px */
        border: 1px solid transparent;
        border-radius: 3px;
    }
    .destacar li:hover {
        background-color: #f0f0f0;
    }
    .destacar li.destacado {
        background-color: #007bff;
        color: white;
        border: 1px solid #0056b3;
    }

    /* Para las recetas relacionadas */
    aside.recetas_relacionadas {
        /*margin-top: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        */
        border-radius: 5px;
    }
    .recetas_relacionadas-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        text-align: center;
    }
    .receta_relacionada {
        width: calc(33.333% - 20px);
        margin-bottom: 20px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .receta_relacionada img {
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 100%;
        height: auto;
        /*
        max-width: 200px;
        max-height: 200px;
        */
        width: 200px;
        height: 200px;
        object-fit: cover; /* Asegura que la imagen sea cuadrada */
        transition: transform 0.3s ease-in-out;
    }
    .receta_relacionada:hover img {
        transform: scale(1.1); /* Efecto de zoom al hacer hover */
    }
    .receta_relacionada h3 {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
        transition: color 0.3s ease-in-out;
    }
    .receta_relacionada:hover h3 {
        color: #e74c3c; /* Cambia el color del título al hacer hover */
    }
    .receta_relacionada a {
        text-decoration: none;
        color: inherit; /* Hereda el color del texto */
    }


    /* Para pantallas más pequeñas ponemos receta_imagenes en bloque */
    @media (max-width: 720px) {
        .receta_imagenes {
            float: none; /* Elimina el float */
            width: 100%; /* Ocupa todo el ancho */
            /*margin: 0 auto;*/
        }
        .receta_imagenes img {
            width: 100%; /* Imágenes ocupan todo el ancho */
        }
        .div_imagenes_pie img {
            max-width: 100%; /* Imágenes en pie ocupan todo el ancho */
        }        
        .receta_relacionada {
            width: calc(50% - 20px);
        }
    }
	@media (max-width: 480px) {
		main {
			flex-direction: column; /* Cambia a columna en pantallas muy pequeñas */
		}
		.receta_contenido, .receta_imagenes {
			width: 100%; /* Ambos ocupan todo el ancho */
			padding-right: 0; /* Elimina el padding derecho */
		}
        .receta_relacionada {
            width: calc(100% - 20px);
        }
	}