body {
            background-color: #b5d6d6; /* Lavanda claro */
        }

        header {
    /* 1. Centra el texto dentro del header */
    text-align: center;
    padding: 20px 0; /* Añade un poco de espacio arriba y abajo */
}

h3 {
    /* Opcional: Centrarlo directamente (si el header no es el contenedor) */
    /* text-align: center; */
    
    /* Define un tamaño grande para que el efecto 3D se vea mejor */
    font-size: 2.5em; 
}

/* Estilos para el botón */
.btn-inicio {
    background-color: #ff6347; /* Color de fondo llamativo (rojo tomate) */
    color: white; /* Color del texto */
    padding: 15px 30px; /* Relleno interno para hacerlo más grande */
    border: none; /* Quita el borde predeterminado */
    border-radius: 8px; /* Esquinas redondeadas */
    font-size: 1.2em; /* Tamaño de fuente más grande */
    cursor: pointer; /* Cambia el cursor a una mano (indica que es cliqueable) */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efecto al pasar el mouse por encima (hover) */
.btn-inicio:hover {
    background-color: #e5533d; /* Un tono un poco más oscuro al pasar el mouse */
}

.btn-inicio {
    /* 1. Establece el posicionamiento */
    position: fixed; /* Mantiene el botón visible incluso al hacer scroll */
    /*position: absolute; /* Úsalo si quieres que se mueva con el scroll del contenido */

    /* 2. Define la ubicación */
    top: 20px;   /* Distancia desde el borde superior */
    left: 20px;  /* Distancia desde el borde izquierdo */

    /* Resto de estilos para el diseño del botón (color, padding, etc.) */
    background-color: #ff6347; 
    color: white; 
    padding: 15px 30px; 
    border-radius: 8px; 
    font-size: 1.2em;
    text-decoration: none; /* Quita el subrayado del enlace */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.btn-sig {
    /* 1. Establece el posicionamiento */
    position: fixed; /* Mantiene el botón visible incluso al hacer scroll */
    /*position: absolute; /* Úsalo si quieres que se mueva con el scroll del contenido */

    /* 2. Define la ubicación */
    top: 75px;   /* Distancia desde el borde superior */
    left: 20px;  /* Distancia desde el borde izquierdo */
    background-color: #ff6347; /* Color de fondo llamativo (rojo tomate) */
    color: white; /* Color del texto */
    padding: 15px 30px; /* Relleno interno para hacerlo más grande */
    border: none; /* Quita el borde predeterminado */
    border-radius: 8px; /* Esquinas redondeadas */
    font-size: 1.2em; /* Tamaño de fuente más grande */
    cursor: pointer; /* Cambia el cursor a una mano (indica que es cliqueable) */
    transition: background-color 0.3s ease; /* Transición suave para el efecto hover */
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Efecto al pasar el mouse por encima (hover) */
.btn-sig:hover {
    background-color: #e5533d; /* Un tono un poco más oscuro al pasar el mouse */
}

/* Estilos generales para el contenedor de la sección */
#gestion-recetas {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 350px; /* Ancho máximo similar al de la imagen */
    margin: 50px auto; /* Centrar la sección en la página */
}

#gestion-recetas h2 {
    font-size: 1.8em;
    color: #333;
    display: flex; /* Para alinear el icono con el texto */
    align-items: center;
    margin-bottom: 30px;
}

.icono-titulo {
    width: 45px; /* Ajusta el tamaño del icono */
    height: 45px;
    margin-right: 10px;
}

/* Estilos para cada grupo de campo (label + input/select) */
.campo-receta {
    display: flex; /* Alinea label e input en la misma fila */
    align-items: center;
    justify-content: space-between; /* Espacia label y input */
    margin-bottom: 15px; /* Espacio entre campos */
}

.campo-receta label {
    flex-basis: 40%; /* Ancho para la etiqueta */
    font-weight: bold;
    color: #555;
    text-align: left;
}

.campo-receta input,
.campo-receta select {
    flex-basis: 55%; /* Ancho para el input/select */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

/* Estilo para la línea divisoria */
.separador-campos {
    border: none;
    border-top: 1px solid #eee;
    margin: 25px 0;
}

/* Estilo para el botón "Guardar Receta" */
#btn-guardar-receta {
    background-color: #66bbbb; /* Color similar al de la imagen */
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 30px;
    width: 100%; /* El botón ocupa todo el ancho */
    transition: background-color 0.3s ease;
}

#btn-guardar-receta:hover {
    background-color: #5aa0a0;
}

/* ========================================= */
/* ESTILOS DEL ANUNCIO (TOAST) */
/* ========================================= */

.anuncio {
    /* Posicionamiento en el centro */
    position: fixed;
    top: 50%; /* 50% desde arriba */
    left: 50%; /* 50% desde la izquierda */
    transform: translate(-50%, -50%); /* Ajuste para centrarlo perfectamente */
    
    /* Diseño */
    background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro semi-transparente */
    color: white;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    z-index: 9999; /* Asegura que esté por encima de todo */
    
    /* Estado Inicial (Oculto) */
    opacity: 0; /* Totalmente transparente */
    visibility: hidden; /* No ocupa espacio y no es interactivo */
    transition: opacity 0.5s, visibility 0.5s; /* Transición suave */
}

/* Clase para mostrar el anuncio */
.anuncio.mostrar {
    opacity: 1; /* Totalmente visible */
    visibility: visible;
}