Move checkbox text before input

src/index.css

@@ -616,6 +616,17 @@ th {
   width: 100%;
 }
 
+/* Alinhamento de texto e checkbox */
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.checkbox-label input[type="checkbox"] {
+  margin: 0;
+}
+
 .button-grid {
   margin-top: 10px;
   display: flex;

src/pages/Connectivity.jsx

@@ -112,13 +112,13 @@ const Connectivity = () => {
           {mqttMsg && <div className="message">{mqttMsg}</div>}
           <form className="form" onSubmit={e => { e.preventDefault(); saveMqtt(); }}>
             <div className="form-group">
-              <label>
+              <label className="checkbox-label">
+                Ativar MQTT
                 <input
                   type="checkbox"
                   checked={mqttConfig.enabled}
                   onChange={e => setMqttConfig({ ...mqttConfig, enabled: e.target.checked })}
                 />
-                Ativar MQTT
               </label>
             </div>
 

src/pages/ElectricalNetwork.jsx

@@ -78,47 +78,47 @@ export default function ElectricalNetwork() {
             />
           </div>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Alertas de Falha na Rede
               <input
                 type="checkbox"
                 checked={alerts}
                 onChange={e => setAlerts(e.target.checked)}
               />
-              Alertas de Falha na Rede
             </label>
           </div>
 
           <h2>Proteção de Segurança Elétrica</h2>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Detecção de Falha de Aterramento
               <input
                 type="checkbox"
                 checked={security.earthFault}
                 onChange={e => setSecurity({ ...security, earthFault: e.target.checked })}
               />
-              Detecção de Falha de Aterramento
             </label>
           </div>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Proteção RCM
               <input
                 type="checkbox"
                 checked={security.rcm}
                 onChange={e => setSecurity({ ...security, rcm: e.target.checked })}
               />
-              Proteção RCM
             </label>
           </div>
 
           <h2>Balanceamento de Carga</h2>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Habilitar Balanceamento de Carga
               <input
                 type="checkbox"
                 checked={loadBalancing.enabled}
                 onChange={e => setLoadBalancing({ ...loadBalancing, enabled: e.target.checked })}
               />
-              Habilitar Balanceamento de Carga
             </label>
           </div>
           <div className="form-group">
@@ -142,23 +142,23 @@ export default function ElectricalNetwork() {
             />
           </div>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Direcionar Energia Solar para o EVSE
               <input
                 type="checkbox"
                 checked={solar.useSolar}
                 onChange={e => setSolar({ ...solar, useSolar: e.target.checked })}
               />
-              Direcionar Energia Solar para o EVSE
             </label>
           </div>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Gerenciamento de Excesso de Energia Solar
               <input
                 type="checkbox"
                 checked={solar.handleExcess}
                 onChange={e => setSolar({ ...solar, handleExcess: e.target.checked })}
               />
-              Gerenciamento de Excesso de Energia Solar
             </label>
           </div>
 

src/pages/LoadBalancing.jsx

@@ -74,13 +74,13 @@ export default function LoadBalancing() {
       <form className="form" onSubmit={saveConfig}>
         {/* Controle de Ativação/Desativação */}
         <div className="form-group">
-          <label>
+          <label className="checkbox-label">
+            Ativar Load Balancing
             <input
               type="checkbox"
               checked={enabled}
               onChange={toggleLoadBalancing}
             />
-            Ativar Load Balancing
           </label>
         </div>
 
@@ -104,14 +104,14 @@ export default function LoadBalancing() {
           <label>Dispositivos a Balancear:</label>
           {devices.map((device) => (
             <div key={device.id}>
-              <label>
+              <label className="checkbox-label">
+                {device.name}
                 <input
                   type="checkbox"
                   value={device.id}
                   checked={selectedDevices.includes(device.id)}
                   onChange={handleDeviceChange}
                 />
-                {device.name}
               </label>
             </div>
           ))}

src/pages/Mqtt.jsx

@@ -44,13 +44,13 @@ export default function Mqtt() {
       ) : (
         <form className="form" onSubmit={e => { e.preventDefault(); save(); }}>
           <div className="form-group">
-            <label>
+            <label className="checkbox-label">
+              Ativar MQTT
               <input
                 type="checkbox"
                 checked={config.enabled}
                 onChange={e => setConfig({ ...config, enabled: e.target.checked })}
               />
-              Ativar MQTT
             </label>
           </div>
 

src/pages/Security.jsx

@@ -38,29 +38,29 @@ const Security = () => {
       <div className="security-item">
         <h2>Métodos de Autorização</h2>
         <div className="auth-methods">
-          <label>
+          <label className="checkbox-label">
+            RFID
             <input
               type="checkbox"
               checked={authMethods.RFID}
               onChange={() => handleAuthMethodChange('RFID')}
             />
-            RFID
           </label>
-          <label>
+          <label className="checkbox-label">
+            Aplicativo
             <input
               type="checkbox"
               checked={authMethods.App}
               onChange={() => handleAuthMethodChange('App')}
             />
-            Aplicativo
           </label>
-          <label>
+          <label className="checkbox-label">
+            Senha
             <input
               type="checkbox"
               checked={authMethods.Password}
               onChange={() => handleAuthMethodChange('Password')}
             />
-            Senha
           </label>
         </div>
       </div>