Feat Widgets Carousel Selector de Porv. Fix Tablas Movil

Elecciones-Web/frontend/src/features/legislativas/nacionales/TablaResultadosWidget.module.css

@@ -73,4 +73,104 @@
   font-weight: 400;
   color: #6c757d;
   padding-right: 0.5rem;
+}
+
+/* --- INICIO DE ESTILOS PARA MÓVILES --- */
+@media (max-width: 768px) {
+  .widgetContainer {
+    padding: 0.5rem;
+  }
+
+  .resultsTable thead {
+    display: none;
+  }
+
+  .resultsTable,
+  .resultsTable tbody {
+    display: block;
+    width: 100%;
+  }
+
+  /* 1. Cada TR es una grilla */
+  .resultsTable tr {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    /* Columna para nombres, columna para % */
+    grid-template-rows: auto auto auto;
+    /* Fila para distrito, 1ra fuerza, 2da fuerza */
+    gap: 4px 1rem;
+    margin-bottom: 1rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #e0e0e0;
+  }
+
+  .resultsTable tr:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+
+  .resultsTable td {
+    padding: 0;
+    border-bottom: none;
+    text-align: left;
+  }
+
+  /* 2. Posicionamos cada celda en la grilla */
+  .distritoCell {
+    grid-column: 1 / -1;
+    /* Ocupa toda la primera fila */
+    font-size: 1.1rem;
+    font-weight: 700;
+  }
+
+  .fuerzaCell:nth-of-type(2) {
+    grid-row: 2;
+    grid-column: 1;
+  }
+
+  .porcentajeCell:nth-of-type(3) {
+    grid-row: 2;
+    grid-column: 2;
+  }
+
+  .fuerzaCell:nth-of-type(4) {
+    grid-row: 3;
+    grid-column: 1;
+  }
+
+  .porcentajeCell:nth-of-type(5) {
+    grid-row: 3;
+    grid-column: 2;
+  }
+
+  /* 3. Añadimos los labels "1ra:" y "2da:" con pseudo-elementos */
+  .fuerzaCell::before {
+    font-weight: 500;
+    color: #6c757d;
+    margin-right: 0.5rem;
+  }
+
+  .fuerzaCell:nth-of-type(2)::before {
+    content: '1ra:';
+  }
+
+  .fuerzaCell:nth-of-type(4)::before {
+    content: '2da:';
+  }
+
+  /* Ajustes de alineación */
+  .fuerzaCell {
+    display: inline-flex;
+    align-items: baseline;
+    font-size: 0.9rem;
+  }
+
+  .porcentajeCell {
+    font-size: 0.95rem;
+  }
+
+  .seccionHeader td {
+    display: block;
+    grid-column: 1 / -1;
+  }
 }