/* --- Estilos Globales y Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f7f9;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* --- Estructura Principal --- */
header, main {
    width: 100%;
    max-width: 600px; 
    text-align: center;
}

header h1 {
    color: #007BFF;
    margin-bottom: 5px;
}

header p {
    color: #666;
    margin-bottom: 30px;
}

/* --- Área de Inputs (el formulario) --- */
.ingredient-input-area {
    display: flex;
    flex-direction: column;
    gap: 15px; 
    margin-bottom: 30px;
}

.ingredient-input-area label {
    font-weight: bold;
    color: #495057;
    text-align: left;
    margin-bottom: -10px; 
}

#ingredients, #country-select {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: white;
}

#country-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%208l5%205%205-5z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 1em;
    cursor: pointer;
}

#generate-recipe-btn, #download-pdf-btn {
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #007BFF;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 5px; 
}

#generate-recipe-btn:hover, #download-pdf-btn:hover {
    background-color: #0056b3;
}

#download-pdf-btn {
    background-color: #28a745; /* Verde */
}
#download-pdf-btn:hover {
    background-color: #1e7e34;
}

/* --- Área de Resultados y Estilos de Receta --- */
#recipe-result-area {
    width: 100%;
    background-color: #fff;
    padding: 0; 
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    min-height: 100px;
    text-align: left;
    margin-top: 20px;
}

.recipe-card { 
    padding: 25px;
}

.recipe-card h3 { 
    color: #007BFF;
    text-align: center;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
}

.recipe-description, .suggestion-text { 
    color: #555;
    text-align: center;
    margin-bottom: 25px;
    font-style: italic;
}
.suggestion-text strong {
    font-style: normal; 
}

/* Estilo para ingredientes clicables en la sugerencia */
.clickable-ingredient {
    color: #007BFF; /* Azul, como un enlace */
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold; /* Para que destaque un poco más */
}
.clickable-ingredient:hover {
    color: #0056b3; /* Azul más oscuro al pasar el ratón */
}


.recipe-section h4 { 
    color: #333;
    font-size: 1.3em;
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid #007BFF;
}

.ingredients-section ul,
.preparation-section ol {
    list-style-position: inside;
    padding-left: 0; 
}

.ingredients-section ul li,
.preparation-section ol li {
    margin-bottom: 8px;
    line-height: 1.5;
    color: #444;
}

.preparation-section ol li::marker { 
    font-weight: bold;
    color: #007BFF;
}

.try-suggestion-button {
    display: block; 
    width: fit-content; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px !important; 
    padding: 12px 20px !important;
    background-color: #17a2b8 !important; 
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 1em !important;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.try-suggestion-button:hover {
    background-color: #138496 !important;
}

.suggestion-card h3 { /* Para el mensaje de "imposibilidad" */
    color: #dc3545; /* Un color rojo/alerta */
    font-size: 1.5em; /* Ligeramente más pequeño que el título de receta */
}