/* Variáveis de tema claro e escuro */
body {
    --gradient-primary: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
    --status-baixo-bg: rgba(220, 53, 69, 0.1);
    --status-alto-bg: rgba(255, 193, 7, 0.1);
    --status-ideal-bg: rgba(25, 135, 84, 0.1);
    --status-baixo-border: #dc3545;
    --status-alto-border: #ffc107;
    --status-ideal-border: #198754;
    --card-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    --input-highlight: #0072ff;
    --theme-btn-bg: rgba(255, 255, 255, 0.15);
    --theme-btn-hover-bg: rgba(255, 255, 255, 0.25);
    --theme-btn-color: #ffffff;
    
    background: var(--gradient-primary);
    min-height: 100vh;
    transition: background 0.3s ease;
}

[data-bs-theme="dark"] body {
    --gradient-primary: linear-gradient(135deg, #004a8c 0%, #001f3f 100%);
    --status-baixo-bg: rgba(220, 53, 69, 0.15);
    --status-alto-bg: rgba(255, 193, 7, 0.15);
    --status-ideal-bg: rgba(25, 135, 84, 0.15);
    --status-baixo-border: #e05c6e;
    --status-alto-border: #ffda6a;
    --status-ideal-border: #28a745;
    --card-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
    --input-highlight: #00a8ff;
    --theme-btn-bg: rgba(0, 0, 0, 0.2);
    --theme-btn-hover-bg: rgba(0, 0, 0, 0.3);
    --theme-btn-color: #ffffff;
}

/* Menu de navegação fixo */
.top-menu {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 4rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

[data-bs-theme="dark"] .top-menu {
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Botão de alternância de tema */
.theme-switch {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: var(--theme-btn-bg);
    color: var(--theme-btn-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.theme-switch:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.theme-switch i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.theme-switch:active i {
    transform: rotate(180deg);
}

/* Estilos base */
.calculator-card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-radius: 1rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease-in-out;
}

[data-bs-theme="dark"] .calculator-card {
    background: rgba(33, 37, 41, 0.98);
}

/* Animações */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Inputs e Formulários */
.input-highlight {
    border: 2px solid var(--input-highlight) !important;
    transition: all 0.3s ease;
    box-shadow: 0 0 5px rgba(0, 114, 255, 0.2);
}

.input-group-text {
    background: transparent;
    border-right: none;
}

.form-control {
    border-left: none;
}

.input-group:focus-within .input-group-text {
    border-color: var(--input-highlight);
    color: var(--input-highlight);
}

.input-group:focus-within .form-control {
    border-color: var(--input-highlight);
}

/* Resultados */
.result-item {
    border-left: 4px solid;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
}

.result-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.status-baixo { 
    border-color: var(--status-baixo-border);
    background-color: var(--status-baixo-bg);
}

.status-alto {
    border-color: var(--status-alto-border);
    background-color: var(--status-alto-bg);
}

.status-ideal {
    border-color: var(--status-ideal-border);
    background-color: var(--status-ideal-bg);
}

/* FAQ */
.faq-section {
    margin-top: 3rem;
}

.faq-item {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    overflow: hidden;
}

.faq-question {
    cursor: pointer;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 255, 255, 0.1);
}

.faq-answer {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
}

/* Dicas de Manutenção */
.maintenance-tips {
    margin-top: 3rem;
}

.tip-card {
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.tip-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow);
}

/* Calculadora de Custos */
.cost-calculator {
    margin-top: 3rem;
}

.cost-result {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

/* Botões de Exportação */
.export-buttons {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.export-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Botões de Exportação */
.export-buttons {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.export-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.export-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}