Fix Estilos Componentes

2025-10-17 13:23:47 -03:00
parent 903c2b6a94
commit 45421f5c5f
11 changed files with 82 additions and 32 deletions
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css
@@ -21,7 +21,6 @@
  container-type: inline-size; container-name: congreso-widget;
 }

-/* ... (El resto de los estilos base permanece sin cambios) ... */
 .congresoGrafico { flex: 2; min-width: 300px; display: flex; flex-direction: column; }
 .congresoHemicicloWrapper { flex-grow: 1; display: flex; align-items: center; justify-content: center; width: 100%; }
 .congresoHemicicloWrapper.isHovering :global(.party-block:not(:hover)) { opacity: 0.3; }
@@ -34,20 +33,45 @@
 .legendIconRing { background-color: rgba(136, 136, 136, 0.3); border: 1px solid #888; }
 .footerTimestamp { font-weight: 500; font-size: 0.75em; text-align: right; }
 .congresoSummary { flex: 1; border-left: 1px solid #e0e0e0; padding-left: 1.25rem; display: flex; flex-direction: column; justify-content: flex-start; }
-.congresoSummary h3 { text-align: center; margin-top: 0.25rem; margin-bottom: 0.75rem; font-size: 1.4em; font-weight: 700; color: #212529; }
-.chamberTabs { display: flex; margin-bottom: 1rem; border: 1px solid #dee2e6; border-radius: 6px; overflow: hidden; }
+
+.summaryHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;  /* Centra el título y la barra de pestañas */
+  gap: 0.75rem;         /* Espacio vertical entre el título y las pestañas */
+  margin-bottom: 1rem;  /* Espacio entre la cabecera y el resto del contenido */
+  width: 100%;
+}
+
+.congresoSummary h3 {
+  text-align: center;
+  margin: 0; /* Quitamos el margen para que el 'gap' del header lo controle */
+  font-size: 1.4em;
+  font-weight: 700;
+  color: #212529;
+}
+
+.chamberTabs {
+  display: flex;
+  margin-bottom: 0; /* Quitamos el margen para que el 'gap' del header lo controle */
+  border: 1px solid #dee2e6;
+  border-radius: 6px;
+  overflow: hidden;
+  width: 100%; /* Hacemos que la barra de pestañas ocupe todo el ancho del header */
+}
+
 .chamberTabs button { flex: 1; padding: 0.5rem; border: none; background-color: #f8f9fa; color: #6c757d; font-family: inherit; font-size: 1em; font-weight: 500; cursor: pointer; transition: all 0.2s ease-in-out; text-align: center; }
 .chamberTabs button:first-child { border-right: 1px solid #dee2e6; }
 .chamberTabs button:hover { background-color: #e9ecef; }
 .chamberTabs button.active { background-color: var(--primary-accent-color); color: #ffffff; }
-.summaryMetric { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.25rem; font-size: 1.1em; }
-.summaryMetric strong { font-size: 1.5em; font-weight: 700; color: var(--primary-accent-color); }
+.summaryMetric { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.25rem; margin-bottom: 0.25rem; font-size: 1.1em; }
+.summaryMetric strong { font-size: 1.25em; font-weight: 700; color: var(--primary-accent-color); }
 .congresoSummary hr { border: none; border-top: 1px solid #e0e0e0; margin: 1rem 0; }
-.partidoListaContainer { flex-grow: 1; overflow-y: auto; min-height: 0; padding-right: 8px; }
-.partidoLista { list-style: none; padding: 0; margin: 0; }
+.partidoListaContainer { flex-grow: 1; overflow-y: auto; min-height: 0; }
+.partidoLista { list-style: none; padding: 0; margin: 0; padding-right: 8px; }
 .partidoLista li { display: flex; align-items: center; margin-bottom: 0.85rem; }
 .partidoColorBox { width: 16px; height: 16px; border-radius: 4px; margin-right: 12px; flex-shrink: 0; }
-.partidoNombre { flex-grow: 1; }
+.partidoNombre { flex-grow: 1; font-size: 1em; }
 .partidoBancas { font-weight: 700; font-size: 1.1em; }


@@ -61,9 +85,6 @@
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
-
-    /* --- ¡LA CLAVE! --- */
-    /* Traemos la regla de la versión anterior para forzar el layout vertical */
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
@@ -88,11 +109,31 @@
  .congresoFooter { flex-direction: column; align-items: center; gap: 0.75rem; padding: 0.75rem 0rem; }
 }

-.partidoListaContainer { scrollbar-width: thin; scrollbar-color: #c1c1c1 #f1f1c1; }
-.partidoListaContainer::-webkit-scrollbar { width: 8px; }
-.partidoListaContainer::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
-.partidoListaContainer::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 10px; border: 2px solid #f1f1f1; }
-.partidoListaContainer::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
+.partidoListaContainer {
+  scrollbar-width: thin; /* Hace el scrollbar más delgado */
+  scrollbar-color: #c1c1c1 #f1f1f1; /* Color del thumb y del track */
+}
+.partidoListaContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Estilo del "track" o canal por donde se mueve el scrollbar */
+.partidoListaContainer::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+/* Estilo del "thumb" o la barra que se arrastra */
+.partidoListaContainer::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 10px;
+  border: 2px solid #f1f1f1;
+}
+
+/* Estilo del "thumb" al pasar el mouse por encima */
+.partidoListaContainer::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}

 /* --- A. Tooltip de FOTO DE LEGISLADOR (seat-tooltip) --- */

--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx
@@ -110,15 +110,17 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
        </div>
      </div>
      <div className={styles.congresoSummary}>
-        <div className={styles.chamberTabs}>
-          <button className={camaraActiva === 'diputados' ? styles.active : ''} onClick={() => setCamaraActiva('diputados')}>
-            Diputados
-          </button>
-          <button className={camaraActiva === 'senadores' ? styles.active : ''} onClick={() => setCamaraActiva('senadores')}>
-            Senadores
-          </button>
+        <div className={styles.summaryHeader}>
+          <h3>{datosCamaraActual.camaraNombre}</h3>
+          <div className={styles.chamberTabs}>
+            <button className={camaraActiva === 'diputados' ? styles.active : ''} onClick={() => setCamaraActiva('diputados')}>
+              Diputados
+            </button>
+            <button className={camaraActiva === 'senadores' ? styles.active : ''} onClick={() => setCamaraActiva('senadores')}>
+              Senadores
+            </button>
+          </div>
        </div>
-        <h3>{datosCamaraActual.camaraNombre}</h3>
        <div className={styles.summaryMetric}>
          <span>Total de Bancas</span>
          <strong>{datosCamaraActual.totalBancas}</strong>
@@ -134,7 +136,7 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => {
              .filter(p => p.bancasTotales > 0)
              .map((partido: PartidoComposicionNacional) => (
                <li key={partido.id}>
-                  <span className={styles.partidoColorBox} style={{ backgroundColor: partido.color || '#808080' }}></span>
+                  <span className={styles.partidoColorBox} style={{ 'marginRight': '0.25rem', backgroundColor: partido.color || '#808080' }}></span>
                  <span className={styles.partidoNombre}>{partido.nombreCorto || partido.nombre}</span>
                  <strong
                    className={styles.partidoBancas}
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.module.css
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/PanelNacional.module.css
@@ -412,6 +412,10 @@
  stroke-width: 0.055px;
  filter: brightness(1.25);
 }
+:global(.caba-comuna-geography.selected) {
+  stroke: #000000;
+  stroke-width: 0.075px;
+}

 .transitionSpinner {
  position: absolute;
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/MapaProvincial.tsx
@@ -49,7 +49,11 @@ export const MapaProvincial = ({ eleccionId, categoriaId, distritoId, nombreProv
      if (municipioGeo) {
        const municipioFeature = feature(geoData, municipioGeo);
        const centroid = geoCentroid(municipioFeature);
+        if(nombreProvincia.toUpperCase() === 'CAPITAL FEDERAL'){
+          onCalculatedCenter(centroid as PointTuple, 180);
+        } else {
        onCalculatedCenter(centroid as PointTuple, 40);
+        }
      }
    }
  }, [nivel, nombreMunicipioSeleccionado, geoData, onCalculatedCenter]);
--- a/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
+++ b/Elecciones-Web/frontend/src/features/legislativas/nacionales/components/PanelResultados.tsx
@@ -35,7 +35,6 @@ export const PanelResultados = ({ resultados, estadoRecuento }: PanelResultadosP
    <div className={styles.panelResultados}>
      <SvgDefs />
      <div className={styles.panelEstadoRecuento}>
-        {/* ... (Contenido de CircularProgressbar sin cambios) ... */}
        <div className={styles.estadoItem}>
          <CircularProgressbar
            value={estadoRecuento.participacionPorcentaje}