/* Estilização moderna da calculadora de consumo de combustível */
:root{
--calc-combustivel-bg:#fff;
--calc-combustivel-text:#343a40;
--calc-combustivel-header-bg:linear-gradient(135deg,#f8f9fa,#e9ecef);
--calc-combustivel-label-bg:#fff;
--calc-combustivel-input-bg:#fff;
--calc-combustivel-input-border:#e9ecef;
--calc-combustivel-input-text:#343a40;
--calc-combustivel-input-placeholder:#6c757d;
--calc-combustivel-resultado-bg:linear-gradient(135deg,#f8f9fa,#e9ecef);
--calc-combustivel-resultado-text:#343a40;
--calc-combustivel-resultado-border:#00a651;
--calc-combustivel-consumo-bg:linear-gradient(135deg,#d4edda,#c3e6cb);
--calc-combustivel-consumo-text:#155724;
--calc-combustivel-viagem-bg:linear-gradient(135deg,#d1ecf1,#bee5eb);
--calc-combustivel-viagem-text:#0c5460;
--calc-combustivel-aviso-bg:linear-gradient(135deg,#fff3cd,#ffeaa7);
--calc-combustivel-aviso-text:#856404;
--calc-combustivel-aviso-border:#f39c12;
--calc-combustivel-copiado-bg:linear-gradient(135deg,#d4edda,#c3e6cb);
--calc-combustivel-copiado-text:#155724;
}
[data-theme="dark"]{
--calc-combustivel-bg:#2d2d2d;
--calc-combustivel-text:#e9ecef;
--calc-combustivel-header-bg:linear-gradient(135deg,#1a1a1a,#3a3a3a);
--calc-combustivel-label-bg:#3a3a3a;
--calc-combustivel-input-bg:#1a1a1a;
--calc-combustivel-input-border:#495057;
--calc-combustivel-input-text:#e9ecef;
--calc-combustivel-input-placeholder:#adb5bd;
--calc-combustivel-resultado-bg:linear-gradient(135deg,#3a3a3a,#2d2d2d);
--calc-combustivel-resultado-text:#e9ecef;
--calc-combustivel-resultado-border:#00a651;
--calc-combustivel-consumo-bg:linear-gradient(135deg,#1e5631,#2a7f3e);
--calc-combustivel-consumo-text:#c8e6c9;
--calc-combustivel-viagem-bg:linear-gradient(135deg,#004d7a,#008cb0);
--calc-combustivel-viagem-text:#b3e5fc;
--calc-combustivel-aviso-bg:linear-gradient(135deg,#5d4427,#7d5a3a);
--calc-combustivel-aviso-text:#ffe0b2;
--calc-combustivel-aviso-border:#ff8a50;
--calc-combustivel-copiado-bg:linear-gradient(135deg,#1e5631,#2a7f3e);
--calc-combustivel-copiado-text:#c8e6c9;
}
.calculadora-combustivel-container{background:var(--calc-combustivel-bg);border-radius:1rem;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15);padding:2rem;margin:1.5rem auto;max-width:600px;transition:all 0.3s ease;overflow:hidden;position:relative;border:2px solid transparent;}
.calculadora-combustivel-container:hover{box-shadow:0 8px 25px rgba(0,0,0,0.1);transform:translateY(-2px);}
.fuel-consumption-header{text-align:center;margin-bottom:2rem;padding:1rem;background:var(--calc-combustivel-header-bg);border-radius:0.5rem;}
.fuel-consumption-header h2{color:var(--calc-combustivel-text);font-size:1.5rem;margin-bottom:0.5rem;font-weight:600;}
.fuel-consumption-header p{color:var(--calc-combustivel-input-placeholder);font-size:0.9rem;margin:0;}
.calculadora-combustivel-modo{display:flex;gap:1.5rem;margin-bottom:2rem;justify-content:center;align-items:center;background:var(--calc-combustivel-header-bg);padding:1.5rem;border-radius:0.75rem;border:1px solid var(--calc-combustivel-input-border);}
.calculadora-combustivel-modo label{display:flex;align-items:center;gap:0.75rem;font-weight:600;color:var(--calc-combustivel-text);cursor:pointer;padding:0.75rem 1.25rem;border-radius:0.5rem;transition:all 0.3s ease;border:2px solid transparent;background:var(--calc-combustivel-label-bg);box-shadow:0 2px 8px rgba(0,0,0,0.1);position:relative;overflow:hidden;min-width:140px;justify-content:center;}
.calculadora-combustivel-modo label:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,0.15);background:var(--calc-combustivel-header-bg);}
.calculadora-combustivel-modo input[type="radio"]{accent-color:#00a651;width:18px;height:18px;margin:0;}
.calculadora-combustivel-modo input[type="radio"]:checked+span{color:#00a651;font-weight:700;}
.calculadora-combustivel-modo label:has(input:checked){border-color:#00a651;background:linear-gradient(135deg,#f0f8f5,#e8f5e8);box-shadow:0 4px 20px rgba(0,166,81,0.2);}
[data-theme="dark"] .calculadora-combustivel-modo label:has(input:checked){background:linear-gradient(135deg,#1e5631,#2a7f3e);box-shadow:0 4px 20px rgba(0,166,81,0.3);}
.calculadora-combustivel-form-group{margin-bottom:1.5rem;position:relative;}
.calculadora-combustivel-form-group label{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;font-weight:600;color:var(--calc-combustivel-text);font-size:0.95rem;}
.calculadora-combustivel-form-group input{width:100%;padding:1rem 1.25rem;font-size:1.1rem;border:2px solid var(--calc-combustivel-input-border);border-radius:0.5rem;background-color:var(--calc-combustivel-input-bg);color:var(--calc-combustivel-input-text);transition:all 0.3s ease;font-family:inherit;box-sizing:border-box;font-weight:500;}
.calculadora-combustivel-form-group input:focus{outline:none;border-color:#00a651;box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);background-color:var(--calc-combustivel-header-bg);}
.calculadora-combustivel-form-group input:hover{border-color:#0072bc;background-color:var(--calc-combustivel-header-bg);}
.calculadora-combustivel-form-group input::placeholder{color:var(--calc-combustivel-input-placeholder);font-weight:400;}
.calculadora-combustivel-form-group input.valid{border-color:#28a745;background-color:#f8fff9;}
[data-theme="dark"] .calculadora-combustivel-form-group input.valid{background-color:#1b4620;}
.calculadora-combustivel-form-group input.invalid{border-color:#dc3545;background-color:#fff8f8;}
[data-theme="dark"] .calculadora-combustivel-form-group input.invalid{background-color:#4a1f1f;}
.calculadora-combustivel-botao{border:none;border-radius:0.5rem;cursor:pointer;transition:all 0.3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-top:1rem;padding:1.25rem 2rem;font-size:1.1rem;font-weight:600;}
.calculadora-combustivel-botao.loading{pointer-events:none;opacity:0.7;}
.calculadora-combustivel-botao.loading svg{animation:spin 1s linear infinite;}
.calculadora-combustivel-resultado{background:var(--calc-combustivel-resultado-bg);padding:1.5rem;border-radius:0.75rem;margin-top:1.5rem;border-left:4px solid var(--calc-combustivel-resultado-border);font-size:1rem;line-height:1.6;color:var(--calc-combustivel-resultado-text);min-height:60px;opacity:0;transform:translateY(20px);transition:all 0.5s ease;display:none;position:relative;}
.calculadora-combustivel-resultado.show{opacity:1;transform:translateY(0);display:block;animation:resultFadeIn 0.6s ease-out;}
@keyframes resultFadeIn{from{opacity:0;transform:translateY(30px) scale(0.95);}to{opacity:1;transform:translateY(0) scale(1);}}
.calculadora-combustivel-resultado.consumo-calculado{background:var(--calc-combustivel-consumo-bg);border-left-color:#28a745;color:var(--calc-combustivel-consumo-text);}
.calculadora-combustivel-resultado.viagem-simulada{background:var(--calc-combustivel-viagem-bg);border-left-color:#17a2b8;color:var(--calc-combustivel-viagem-text);}
.resultado-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;font-weight:600;font-size:1.1rem;}
.resultado-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.3);}
.resultado-icon svg{width:18px;height:18px;}
.resultado-content{display:flex;flex-direction:column;gap:0.5rem;}
.resultado-line{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0;font-weight:500;}
.resultado-destaque{font-size:1.15rem;font-weight:700;color:#00a651;background:rgba(255,255,255,0.4);padding:0.75rem;border-radius:0.5rem;margin-top:0.5rem;}
[data-theme="dark"] .resultado-destaque{background:rgba(0,0,0,0.3);}
#formulario-consumo,#formulario-viagem{transition:all 0.4s ease;opacity:1;}
#formulario-viagem{display:none;}
#formulario-viagem.active{display:block;animation:formSlideIn 0.4s ease-out;}
#formulario-consumo.active{animation:formSlideIn 0.4s ease-out;}
@keyframes formSlideIn{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
@media (max-width:768px){
.calculadora-combustivel-container{margin:1rem;padding:1.5rem;max-width:none;}
.fuel-consumption-header h2{font-size:1.3rem;}
.calculadora-combustivel-modo{flex-direction:column;gap:1rem;padding:1.25rem;}
.calculadora-combustivel-modo label{width:100%;min-width:auto;padding:1rem;}
.calculadora-combustivel-form-group{margin-bottom:1.25rem;}
.calculadora-combustivel-form-group input{padding:0.875rem 1rem;font-size:1rem;}
.calculadora-combustivel-botao{padding:1rem 1.5rem;font-size:1rem;}
.botao-limpar-campos{padding:0.65rem 1.25rem;font-size:0.9rem;}
.calculadora-combustivel-resultado{padding:1.25rem;font-size:0.95rem;}
.resultado-destaque{font-size:1.05rem;}
.aviso-estimativa{padding:0.875rem;font-size:0.85rem;margin:0.75rem 0;}
}
@media (max-width:480px){
.calculadora-combustivel-container{margin:0.5rem;padding:1rem;}
.fuel-consumption-header{padding:0.75rem;margin-bottom:1.5rem;}
.fuel-consumption-header h2{font-size:1.2rem;}
.calculadora-combustivel-modo{gap:0.75rem;padding:1rem;}
.calculadora-combustivel-modo label{padding:0.875rem;font-size:0.9rem;}
.calculadora-combustivel-form-group{margin-bottom:1rem;}
.calculadora-combustivel-form-group input{padding:0.75rem;font-size:0.95rem;}
.calculadora-combustivel-botao{padding:0.875rem 1rem;font-size:0.95rem;}
.botao-limpar-campos{padding:0.6rem 1rem;font-size:0.85rem;}
.calculadora-combustivel-resultado{padding:1rem;font-size:0.9rem;}
.resultado-destaque{font-size:1.05rem;}
.aviso-estimativa{padding:0.875rem;font-size:0.85rem;margin:0.75rem 0;}
}
.calculadora-combustivel-container>*{animation:slideInFromBottom 0.5s ease-out;}
@keyframes slideInFromBottom{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){
.calculadora-combustivel-container,
.calculadora-combustivel-container>*,
.calculadora-combustivel-resultado,
#formulario-consumo,
#formulario-viagem,
.calculadora-combustivel-botao:hover,
.calculadora-combustivel-form-group input:focus{animation:none;transform:none;transition:none;}
}
.botoes-resultado{display:flex;justify-content:center;gap:1rem;margin-top:1rem;}
.botao-copiar{border:none;border-radius:0.5rem;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;padding:0.75rem 1.5rem;font-weight:600;}
.botao-copiar:active{transform:translateY(0);}
.copiado{text-align:center;margin-top:0.5rem;padding:0.5rem;border-radius:0.25rem;font-size:0.85rem;font-weight:500;opacity:0;transition:all 0.3s ease;background:var(--calc-combustivel-copiado-bg);color:var(--calc-combustivel-copiado-text);border:1px solid var(--calc-combustivel-copiado-bg);}
.copiado.ativo{opacity:1;animation:fadeInOut 3s ease;}
@keyframes fadeInOut{0%,100%{opacity:0;}20%,80%{opacity:1;}}
@media (max-width:768px){
.botao-copiar{padding:0.65rem 1.25rem;font-size:0.85rem;}
}
@media (max-width:480px){
.botoes-resultado{flex-direction:column;gap:0.75rem;}
.botao-copiar{padding:0.6rem 1rem;font-size:0.8rem;}
}
.botao-limpar-campos{border:none;border-radius:0.5rem;cursor:pointer;transition:all 0.3s ease;width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;margin-top:0.75rem;opacity:0;transform:translateY(-10px);animation:fadeInSlide 0.3s ease-out forwards;padding:0.75rem 1.5rem;font-size:0.95rem;font-weight:600;}
.botao-limpar-campos:active{transform:translateY(0);}
@keyframes fadeInSlide{to{opacity:1;transform:translateY(0);}}
.aviso-estimativa{background:var(--calc-combustivel-aviso-bg);border:1px solid var(--calc-combustivel-aviso-border);border-left:4px solid var(--calc-combustivel-aviso-border);border-radius:0.5rem;padding:1rem;margin:1rem 0;display:flex;align-items:flex-start;gap:0.75rem;font-size:0.9rem;line-height:1.5;color:var(--calc-combustivel-aviso-text);box-shadow:0 2px 8px rgba(243,156,18,0.1);}
.aviso-estimativa svg{flex-shrink:0;margin-top:0.1rem;stroke:var(--calc-combustivel-aviso-border);}
.aviso-texto{flex:1;}
.aviso-texto strong{color:var(--calc-combustivel-aviso-text);font-weight:600;}
.destaque-viagem{font-weight:600;color:var(--calc-combustivel-aviso-text);}
.aviso-resultado{background:rgba(255,243,205,0.5);border-radius:0.375rem;padding:0.75rem;margin-top:0.5rem;border-left:3px solid #f39c12;}
[data-theme="dark"] .aviso-resultado{background:rgba(255,152,0,0.2);border-left-color:#ff8a50;}
.aviso-resultado span{color:var(--calc-combustivel-aviso-text);font-size:0.85rem;}
.aviso-resultado strong{color:var(--calc-combustivel-aviso-text);}
.margem-seguranca{background:rgba(212,237,218,0.6);border-radius:0.375rem;padding:0.75rem;border-left:3px solid #28a745;}
[data-theme="dark"] .margem-seguranca{background:rgba(76,175,80,0.2);border-left-color:#66bb6a;}
.margem-seguranca span{color:#155724;font-weight:500;}
[data-theme="dark"] .margem-seguranca span{color:#c8e6c9;}
.margem-seguranca svg{stroke:#28a745;}
[data-theme="dark"] .margem-seguranca svg{stroke:#66bb6a;}
[data-theme="dark"] .calculadora-combustivel-modo input[type="radio"]:checked+span{color:var(--calc-combustivel-text);font-weight:700;}