Feat Tabla

- Selector de Columnas
- Control de Ancho de Columnas
- Botón Volver Arriba
- Refinamiento de Modo Oscuro

frontend/src/components/SimpleTable.module.css

@@ -1,8 +1,20 @@
+/* frontend/src/components/SimpleTable.module.css */
+
 /* Estilos para el contenedor principal y controles */
+.header {
+  margin-bottom: 0.75rem;
+}
+
+.header h2 {
+  margin-top: 5px;
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+}
+
 .controlsContainer {
   display: flex;
   gap: 20px;
-  margin-bottom: 10px;
+  margin-bottom: 0.5rem;
   align-items: center;
 }
 
@@ -15,14 +27,37 @@
   color: var(--color-text-primary);
 }
 
+.paginationControls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0;
+}
+
+.tableContainer {
+  overflow: auto; /* Cambiado a 'auto' para ambos scrolls */
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  position: relative; /* Necesario para posicionar el botón de scroll */
+}
+
+.tableContainer::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+  background-color: var(--scrollbar-bg);
+}
+
+.tableContainer::-webkit-scrollbar-thumb {
+  background-color: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
 .table {
   border-collapse: collapse;
   font-family: system-ui, -apple-system, sans-serif;
   font-size: 0.875rem;
   box-shadow: 0 1px 3px rgba(0,0,0,0.08);
-  width: 100%;
-  min-width: 1200px;
-  table-layout: fixed;
+  min-width: 100%;
 }
 
 .th {
@@ -31,17 +66,45 @@
   padding: 0.75rem 1rem;
   border-bottom: 2px solid var(--color-border);
   text-align: left;
-  cursor: pointer;
   user-select: none;
   white-space: nowrap;
-  position: sticky;
-  top: 0;
-  z-index: 2;
   background-color: var(--color-background);
   overflow: hidden;
   text-overflow: ellipsis;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
 
+.headerContent {
+  cursor: pointer;
+}
+
+.resizer {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 5px;
+  background: var(--scrollbar-thumb);
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  opacity: 0.25;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 3; /* Asegura que el resizer esté sobre el contenido de la cabecera */
+}
+
+.th:hover .resizer {
+  opacity: 1;
+}
+
+.isResizing {
+  background: var(--color-text-muted);
+  opacity: 1;
+}
+
+
 .sortIndicator {
   margin-left: 0.5rem;
   font-size: 1.2em;
@@ -69,30 +132,10 @@
   color: var(--color-text-secondary);
   background-color: var(--color-surface);
   word-break: break-word;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-/* NUEVA SECCIÓN PARA ANCHOS DE COLUMNA */
-
-/* Columna numérica (Nº de Equipos) */
-.thNumeric,
-.tdNumeric {
-  width: 150px;
-  text-align: left;
-}
-
-.thActions,
-.tdActions {
-  width: 220px;
-  white-space: nowrap;
-}
-
-/* NUEVO: Columnas de Tabla Principal (SimpleTable) */
-.thIp, .tdIp { width: 90px; }
-.thRam, .tdRam { width: 40px; text-align: center; }
-.thArch, .tdArch { width: 80px; }
-.thUsers, .tdUsers { width: 230px; }
-.thSector, .tdSector { width: 170px; }
-
 /* Estilos de botones dentro de la tabla */
 .hostnameButton {
   background: none;
@@ -163,32 +206,49 @@
 
 /* Estilo para el botón de scroll-to-top */
 .scrollToTop {
-  position: fixed;
-  bottom: 60px;
-  right: 20px;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background-color: var(--color-primary);
-  color: white;
-  border: none;
-  cursor: pointer;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-  font-size: 20px;
+  position: absolute;
+  top: 6px;
+  right: 20px; /* Suficiente espacio para no quedar debajo de la scrollbar */
+  z-index: 30; /* Un valor alto para asegurar que esté por encima de la tabla y su cabecera (z-index: 2) */
+  width: 36px;
+  height: 36px;
+  background-color: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 8%;
+  
+  /* Contenido y transiciones */
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: opacity 0.3s, transform 0.3s, background-color 0.3s;
-  z-index: 1002;
+  cursor: pointer;
+  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background-color 0.2s, color 0.2s;
+  
+  /* Animación de entrada/salida */
+  animation: pop-in 0.3s ease-out forwards;
 }
 
 .scrollToTop:hover {
-  transform: translateY(-3px);
-  background-color: var(--color-primary-hover);
+  background-color: var(--color-primary);
+  color: white;
+  transform: scale(1.1);
 }
 
+
 /* ===== INICIO DE CAMBIOS PARA MODALES Y ANIMACIONES ===== */
 
+/* Keyframes para la animación de entrada */
+@keyframes pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -315,7 +375,7 @@
   background-color: var(--color-text-secondary);
 }
 
-/* ===== NUEVOS ESTILOS PARA EL MODAL DE DETALLES ===== */
+/* ===== ESTILOS PARA EL MODAL DE DETALLES ===== */
 
 .modalLarge {
   position: fixed;
@@ -486,6 +546,10 @@
   justify-content: center;
 }
 
+.powerButton {
+  color: var(--color-text-secondary);
+}
+
 .powerButton:hover {
   border-color: var(--color-primary);
   background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
@@ -646,4 +710,41 @@
   cursor: not-allowed;
   opacity: 0.5;
   background-color: #6c757d;
+}
+
+.columnToggleContainer {
+  position: relative;
+}
+
+.columnToggleDropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.5rem;
+  z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  min-width: 200px;
+}
+
+.columnToggleItem {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.columnToggleItem:hover {
+  background-color: var(--color-surface-hover);
+}
+
+.columnToggleItem input {
+  margin-right: 0.5rem;
+}
+
+.columnToggleItem label {
+  white-space: nowrap;
 }