/**
 * Estilos "Mágicos" y Profesionales para la Calculadora de Velas
 * Version: 1.3.2
 * Descripción: Rediseño visual con optimización completa para móviles.
 */

/* --- Contenedor Principal y Fondo "Cosmos Púrpura" --- */
.calculadora-velas-container {
    font-family: 'Inter', sans-serif;
    color: #e5e7eb; /* Gris muy claro - text-gray-200 */
    background: linear-gradient(170deg, #3b0764, #1e1b4b); /* Gradiente Púrpura a Índigo */
    padding: 2rem 1rem; /* Más espacio vertical */
    border-radius: 1.5rem; /* Bordes más redondeados */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* --- Títulos y Tipografía --- */
.calculadora-velas-container .font-serif {
    font-family: 'Playfair Display', serif;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.calculadora-velas-container h1.font-serif {
    color: #ffffff;
}

.calculadora-velas-container h2.font-bold {
    color: #e5e7eb;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(192, 132, 252, 0.3);
    margin-bottom: 1.5rem !important;
}


/* --- Tarjeta Principal de la Calculadora con Efecto Cristal --- */
#calculator {
    background-color: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}


/* --- Corrección y Mejora de Formularios --- */
.calculadora-velas-container input[type="number"],
.calculadora-velas-container select {
    background-color: #374151;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    padding: 0 1rem;
    color: #f9fafb;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.calculadora-velas-container input[type="number"]:focus,
.calculadora-velas-container select:focus {
    outline: none;
    border-color: #c084fc;
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.4);
}

.calculadora-velas-container label span {
    color: #f9fafb;
    font-weight: 500;
}

/* --- Estilos de Componentes Específicos --- */
.calculadora-velas-container .input-group { 
    position: relative; 
}
.calculadora-velas-container .input-unit { 
    position: absolute; right: 1rem; top: 0;
    height: 100%; display: flex;
    align-items: center; color: #9ca3af; 
    pointer-events: none;
}
.calculadora-velas-container .slider-thumb {
    -webkit-appearance: none; appearance: none;
    background-color: #4b5563; height: 0.5rem;
    border-radius: 9999px;
}
.calculadora-velas-container .slider-thumb::-webkit-slider-thumb { 
    -webkit-appearance: none; appearance: none; 
    width: 24px; height: 24px; 
    background-color: #c084fc;
    cursor: pointer; border-radius: 9999px; 
    border: 3px solid #f9fafb; 
    box-shadow: 0 4px 10px rgba(192, 132, 252, 0.4);
}
.calculadora-velas-container .slider-thumb::-moz-range-thumb { 
    width: 24px; height: 24px; 
    background-color: #c084fc;
    cursor: pointer; border-radius: 9999px;
    border: 3px solid #f9fafb;
    box-shadow: 0 4px 10px rgba(192, 132, 252, 0.4);
}
.calculadora-velas-container .btn-toggle,
.calculadora-velas-container .btn-color {
    transition: all 0.2s ease-in-out;
}
.calculadora-velas-container .btn-toggle.active,
.calculadora-velas-container .btn-color.active { 
    background-color: #a855f7;
    color: white; border-color: #a855f7; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* --- Ventana Modal y Ocultación --- */
#safety-modal {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.calculadora-velas-container .modal-bg { 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
}
.hidden-section {
    display: none !important;
}
#error-message svg, #generate-btn svg {
    height: 1.5rem; width: 1.5rem; flex-shrink: 0;
}
#recipe-output {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/*
* ===============================================
* NUEVO: BLOQUE DE DISEÑO RESPONSIVO PARA MÓVILES
* ===============================================
*/
@media (max-width: 420px) {
    .calculadora-velas-container {
        padding: 1rem 0.5rem; /* Menos padding general */
    }

    /* Títulos más pequeños para que no dominen la pantalla */
    .calculadora-velas-container h1.font-serif {
        font-size: 2rem; /* 32px */
        line-height: 2.25rem;
    }
    .calculadora-velas-container h2.font-bold {
        font-size: 1.125rem; /* 18px */
    }
    .calculadora-velas-container h3.font-serif {
        font-size: 1.5rem; /* 24px */
    }

    /* **CORRECCIÓN CLAVE: FICHA TÉCNICA** */
    /* Reduce el tamaño del texto dentro de la ficha para evitar que se rompa */
    #recipe-output dt {
        font-size: 0.7rem; /* 11px */
        letter-spacing: -0.025em; /* Ligeramente más juntas las letras */
    }
    #recipe-output dd {
        font-size: 0.8rem; /* 13px */
        word-break: break-word; /* Rompe palabras largas si es necesario */
    }

    /* Reduce el padding de las tarjetas principales para ganar espacio */
    #calculator, #recipe-output .bg-gray-800\/80 {
        padding: 1.25rem;
    }
}