From 90b492886fbb2f5f8224e703a52e01a73ef789c3 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 10 Nov 2025 22:31:50 -0600
Subject: [PATCH] =?UTF-8?q?fix(admin):=20Apilar=20toggles=20verticalmente?=
 =?UTF-8?q?=20en=20secci=C3=B3n=20Activaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Eliminar row g-4 y col-md-4 que causaban layout horizontal
- Cambiar a divs con mb-4 para espaciado vertical consistente
- Último elemento con mb-0 para evitar espacio extra
- Los 3 toggles ahora se apilan verticalmente como cards

Issue: #144

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 admin-panel/admin/pages/main.php | 121 ++++++++++++++-----------------
 1 file changed, 56 insertions(+), 65 deletions(-)

diff --git a/admin-panel/admin/pages/main.php b/admin-panel/admin/pages/main.php
index 03f3d52f..85ca6461 100644
--- a/admin-panel/admin/pages/main.php
+++ b/admin-panel/admin/pages/main.php
@@ -65,81 +65,72 @@ if (!defined('ABSPATH')) {
 						Activación y Visibilidad
 					</h4>
 
-					<div class="row g-4">
-						<!-- Enabled -->
-						<div class="col-md-4">
-							<div class="form-group">
-								<label class="form-label text-neutral-700 fw-medium mb-3">
-									<i class="bi bi-power text-orange-primary me-1"></i>
-									Estado del Componente
+					<!-- Enabled -->
+					<div class="mb-4">
+						<label class="form-label text-neutral-700 fw-medium mb-3">
+							<i class="bi bi-power text-orange-primary me-1"></i>
+							Estado del Componente
+						</label>
+						<div class="toggle-container">
+							<div class="form-check form-switch form-switch-lg">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarEnabled"
+									   role="switch"
+									   checked>
+								<label class="form-check-label" for="topBarEnabled">
+									Activar Top Bar
 								</label>
-								<div class="toggle-container">
-									<div class="form-check form-switch form-switch-lg">
-										<input class="form-check-input"
-											   type="checkbox"
-											   id="topBarEnabled"
-											   role="switch"
-											   checked>
-										<label class="form-check-label" for="topBarEnabled">
-											<span class="switch-label-on">Activado</span>
-											<span class="switch-label-off">Desactivado</span>
-										</label>
-									</div>
-									<small class="form-text text-neutral-700 d-block mt-2">
-										Activa o desactiva el Top Bar en todo el sitio
-									</small>
-								</div>
 							</div>
+							<small class="form-text text-neutral-700 d-block mt-2">
+								Activa o desactiva el Top Bar en todo el sitio
+							</small>
 						</div>
+					</div>
 
-						<!-- Show on Mobile -->
-						<div class="col-md-4">
-							<div class="form-group">
-								<label class="form-label text-neutral-700 fw-medium mb-3">
-									<i class="bi bi-phone text-orange-primary me-1"></i>
-									Visibilidad Mobile
+					<!-- Show on Mobile -->
+					<div class="mb-4">
+						<label class="form-label text-neutral-700 fw-medium mb-3">
+							<i class="bi bi-phone text-orange-primary me-1"></i>
+							Visibilidad Mobile
+						</label>
+						<div class="toggle-container">
+							<div class="form-check form-switch form-switch-lg">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowOnMobile"
+									   role="switch"
+									   checked>
+								<label class="form-check-label" for="topBarShowOnMobile">
+									Mostrar en dispositivos móviles
 								</label>
-								<div class="toggle-container">
-									<div class="form-check form-switch form-switch-lg">
-										<input class="form-check-input"
-											   type="checkbox"
-											   id="topBarShowOnMobile"
-											   role="switch"
-											   checked>
-										<label class="form-check-label" for="topBarShowOnMobile">
-											Mostrar en dispositivos móviles
-										</label>
-									</div>
-									<small class="form-text text-neutral-700 d-block mt-2">
-										Pantallas menores a 768px
-									</small>
-								</div>
 							</div>
+							<small class="form-text text-neutral-700 d-block mt-2">
+								Pantallas menores a 768px
+							</small>
 						</div>
+					</div>
 
-						<!-- Show on Desktop -->
-						<div class="col-md-4">
-							<div class="form-group">
-								<label class="form-label text-neutral-700 fw-medium mb-3">
-									<i class="bi bi-display text-orange-primary me-1"></i>
-									Visibilidad Desktop
+					<!-- Show on Desktop -->
+					<div class="mb-0">
+						<label class="form-label text-neutral-700 fw-medium mb-3">
+							<i class="bi bi-display text-orange-primary me-1"></i>
+							Visibilidad Desktop
+						</label>
+						<div class="toggle-container">
+							<div class="form-check form-switch form-switch-lg">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowOnDesktop"
+									   role="switch"
+									   checked>
+								<label class="form-check-label" for="topBarShowOnDesktop">
+									Mostrar en desktop
 								</label>
-								<div class="toggle-container">
-									<div class="form-check form-switch form-switch-lg">
-										<input class="form-check-input"
-											   type="checkbox"
-											   id="topBarShowOnDesktop"
-											   role="switch"
-											   checked>
-										<label class="form-check-label" for="topBarShowOnDesktop">
-											Mostrar en desktop
-										</label>
-									</div>
-									<small class="form-text text-neutral-700 d-block mt-2">
-										Pantallas de 768px en adelante
-									</small>
-								</div>
 							</div>
+							<small class="form-text text-neutral-700 d-block mt-2">
+								Pantallas de 768px en adelante
+							</small>
 						</div>
 					</div>
 				</div>