diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.module.css index 44d167b..e7d8fee 100644 --- 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) --- */ diff --git a/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx b/Elecciones-Web/frontend/src/features/legislativas/nacionales/CongresoNacionalWidget.tsx index ef51168..27e27db 100644 --- 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) => {
-
- - +
+

{datosCamaraActual.camaraNombre}

+
+ + +
-

{datosCamaraActual.camaraNombre}

Total de Bancas {datosCamaraActual.totalBancas} @@ -134,7 +136,7 @@ const WidgetContent = ({ eleccionId }: CongresoNacionalWidgetProps) => { .filter(p => p.bancasTotales > 0) .map((partido: PartidoComposicionNacional) => (
  • - + {partido.nombreCorto || partido.nombre}
    - {/* ... (Contenido de CircularProgressbar sin cambios) ... */}