176 lines
3.0 KiB
CSS
176 lines
3.0 KiB
CSS
/* src/features/legislativas/nacionales/TablaResultadosWidget.module.css */
|
|
.widgetContainer {
|
|
font-family: 'Roboto', sans-serif;
|
|
max-width: 900px;
|
|
margin: 2rem auto;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
|
|
.header h3 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.categoriaSelector {
|
|
min-width: 250px;
|
|
}
|
|
|
|
.resultsTable {
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.resultsTable th,
|
|
.resultsTable td {
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
}
|
|
|
|
.resultsTable th {
|
|
font-weight: 700;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.distritoCell {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.fuerzaCell {
|
|
color: #212529;
|
|
}
|
|
|
|
.porcentajeCell {
|
|
font-weight: 700;
|
|
text-align: right;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.seccionHeader td {
|
|
background-color: #f8f9fa;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
color: #007bff;
|
|
border-top: 2px solid #007bff;
|
|
border-bottom: 2px solid #007bff;
|
|
}
|
|
|
|
.distritoIndex {
|
|
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;
|
|
}
|
|
} |