/* Variáveis específicas do conversor de unidades */
:root{
--conversor-resultado-error-alt:#c82333;
}
[data-theme="dark"]{
--conversor-resultado-error-alt:#a01d2a;
}
/* Estilização específica para o conversor de unidades */
.conversor-unidades-container{background:var(--white);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow);padding:var(--spacing-lg);margin:var(--spacing-lg) auto;max-width:600px;transition:all var(--transition-normal);overflow:hidden;position:relative;}
.conversor-unidades-container:hover{box-shadow:0 8px 25px rgba(0,0,0,0.1);}
[data-theme="dark"] .conversor-unidades-container{background:var(--white);}
[data-theme="dark"] .conversor-unidades-container:hover{box-shadow:0 8px 25px rgba(0,0,0,0.3);}
.conversor-unidades-form{display:flex;flex-direction:column;}
.form-section{background:var(--off-white);padding:var(--spacing-lg);border-radius:var(--border-radius-md);border:2px solid transparent;transition:all var(--transition-fast);}
.form-section:hover{border-color:var(--primary-green);background:var(--white);}
[data-theme="dark"] .form-section{background:var(--off-white);}
[data-theme="dark"] .form-section:hover{background:var(--white);}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);}
.form-group{margin-bottom:0;}
.form-label{display:block;margin-bottom:var(--spacing-xs);font-weight:500;color:var(--dark-gray);font-size:0.9rem;}
[data-theme="dark"] .form-label{color:var(--dark-gray);}
.conversor-unidades-form select,.conversor-unidades-form input{width:100%;padding:var(--spacing-md);font-size:1rem;border:2px solid var(--light-gray);border-radius:var(--border-radius-sm);background-color:var(--white);color:var(--dark-gray);transition:all var(--transition-fast);font-family:var(--font-primary);box-sizing:border-box;}
[data-theme="dark"] .conversor-unidades-form select,[data-theme="dark"] .conversor-unidades-form input{background-color:var(--white);color:var(--dark-gray);border-color:var(--light-gray);}
.conversor-unidades-form select:focus,.conversor-unidades-form input:focus{outline:none;border-color:var(--primary-green);box-shadow:0 0 0 3px rgba(0,166,81,0.1);transform:translateY(-1px);}
[data-theme="dark"] .conversor-unidades-form select:focus,[data-theme="dark"] .conversor-unidades-form input:focus{box-shadow:0 0 0 3px rgba(0,166,81,0.2);}
.conversor-unidades-form input:hover,.conversor-unidades-form select:hover{border-color:var(--primary-blue);}
.conversion-section{display:flex;flex-direction:column;}
.conversion-row{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--spacing-md);align-items:end;}
.conversion-arrow{display:flex;align-items:center;justify-content:center;padding:var(--spacing-sm);color:var(--primary-green);font-size:1.5rem;font-weight:bold;background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));-webkit-background-clip:text;background-clip:text;color:transparent;height:50px;margin-bottom:2px;}
.conversor-unidades-resultado{background:linear-gradient(135deg,var(--primary-green),var(--primary-blue));color:var(--white);padding:var(--spacing-lg);border-radius:var(--border-radius-md);margin-top:var(--spacing-md);text-align:center;font-size:1.1rem;font-weight:600;box-shadow:var(--box-shadow);opacity:0;transform:translateY(20px);transition:all var(--transition-normal);min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-xs);}
.conversor-unidades-resultado.show{opacity:1;transform:translateY(0);}
.conversor-unidades-resultado.error{background:linear-gradient(135deg,var(--danger),var(--conversor-resultado-error-alt));}
/* Responsividade */
@media (max-width:768px){
.conversor-unidades-container{margin:var(--spacing-md);padding:var(--spacing-md);max-width:none;}
.input-row{grid-template-columns:1fr;gap:var(--spacing-md);}
.conversion-row{grid-template-columns:1fr;gap:var(--spacing-md);}
.conversion-arrow{transform:rotate(90deg);font-size:1.2rem;height:auto;padding:var(--spacing-xs);margin:var(--spacing-xs) auto;}
.form-section{padding:var(--spacing-md);}
.form-section h3{font-size:1.1rem;margin-bottom:var(--spacing-md);}
.conversor-unidades-form select,.conversor-unidades-form input{padding:var(--spacing-sm) var(--spacing-md);font-size:0.95rem;}
}
@media (max-width:480px){
.conversor-unidades-container{margin:var(--spacing-sm);padding:var(--spacing-sm);}
.form-section{padding:var(--spacing-sm);}
.form-section h3{font-size:1rem;margin-bottom:var(--spacing-sm);}
}
/* Animações para melhor UX */
.conversor-unidades-form>*{animation:slideInFromLeft 0.5s ease-out;}
@keyframes slideInFromLeft{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}
/* Indicador visual de campos obrigatórios */
.form-group.required .form-label::after{content:' *';color:var(--danger);font-weight:bold;}
/* Estado de validação */
.conversor-unidades-form input.valid,.conversor-unidades-form select.valid{border-color:var(--success);}
.conversor-unidades-form input.invalid,.conversor-unidades-form select.invalid{border-color:var(--danger);}