/* =========================================
   1. Estilos Base y Animaciones
   ========================================= */
body {
    font-family: 'Manrope', sans-serif;
    background-color: #012A36;
}

body.loading { visibility: hidden; opacity: 0; }
body.loaded { visibility: visible; opacity: 1; transition: opacity 0.4s ease-in; }

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }

/* =========================================
   2. Componentes (Cards)
   ========================================= */
.service-card, .tool-card { transition: all 0.3s ease; }
.service-card:hover, .tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(30, 228, 148, 0.1);
}

/* =========================================
   3. Modal & Etiquetas Globales
   ========================================= */
.modal-overlay { transition: opacity 0.3s ease; }
.modal-content { transition: transform 0.3s ease; }

.tag {
    font-size: 0.75rem; padding: 0.25rem 0.75rem;
    border-radius: 9999px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.tag-user { background-color: #3b82f6; color: white; } 
.tag-sme { background-color: #a855f7; color: white; } 
.tag-corp { background-color: #f59e0b; color: black; }

/* =========================================
   5. Calculadora de Consumo (NUEVO)
   ========================================= */
.suggestions-list {
    position: absolute; top: 100%; left: 0; right: 0;
    background-color: #012A36; border: 1px solid #016064;
    border-radius: 0 0 0.375rem 0.375rem; max-height: 200px;
    overflow-y: auto; z-index: 50; display: none;
}
.suggestions-list li {
    padding: 0.5rem 0.75rem; cursor: pointer; color: #f1f5f9;
    transition: background-color 0.2s; border-bottom: 1px solid rgba(1, 96, 100, 0.3);
}
.suggestions-list li:hover { background-color: #016064; color: #1EE494; }

/* Scrollbar de la lista */
.suggestions-list::-webkit-scrollbar { width: 8px; }
.suggestions-list::-webkit-scrollbar-track { background: #012A36; }
.suggestions-list::-webkit-scrollbar-thumb { background: #016064; border-radius: 4px; }

.form-section {
    background-color: rgba(1, 42, 54, 0.5); border: 1px solid rgba(1, 96, 100, 0.5);
    padding: 1.5rem; border-radius: 0.5rem; margin-bottom: 1.5rem;
}
.form-section h3 { 
    color: #1EE494; font-weight: 700; margin-bottom: 1rem; 
    display: flex; align-items: center; gap: 0.5rem; 
}