/* «Análisis de la segunda vuelta», la solapa del equipo (segunda-vuelta.html). */
.segunda-titulo { font-family: var(--titulos); font-weight: 800; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; margin: 10px 0 6px; }
main.segunda #exterior { margin-top: 22px; }

/* lo que llegó: una barra con los dos, el número adentro de cada parte */
.ext-duelo { max-width: 760px; }
.ext-barra { display: flex; height: 34px; margin-top: 4px; border-radius: 4px; overflow: hidden; background: var(--pista); }
.ext-seg { display: flex; align-items: center; min-width: 0; padding: 0 10px; color: #fff; font-size: 15px; font-weight: 600;
           white-space: nowrap; overflow: hidden; }
.ext-seg.lula { background: var(--lula); }
.ext-seg.flavio { background: var(--flavio); justify-content: flex-end; }
.ext-datos { margin: 10px 0 0; font-size: 15px; color: var(--tinta-2); max-width: 70ch; }

.ext-sub { font-family: var(--titulos); font-weight: 700; font-size: 18px; line-height: 1.25; margin: 36px 0 0; }

/* las ciudades donde más se votó, con el total del exterior arriba: por ciudad, dos barras apiladas de los votos válidos
   (primera y segunda vuelta) y, a la derecha, la participación de cada una; cada parte lleva su número adentro */
main.segunda { --otros-1v: #b9b4b3; }
.leyenda .cuadro { width: 14px; height: 14px; border-radius: 3px; background: var(--c); }
.ext-barras { display: grid; grid-template-columns: minmax(180px, 250px) 112px 1fr minmax(150px, 210px); column-gap: 14px;
              margin-top: 14px; max-width: 1100px; }
.ext-titcol { font-size: 14px; font-weight: 600; color: var(--gris); padding-bottom: 6px; border-bottom: 1px solid var(--tinta); }
.ext-ciudad { grid-row: span 2; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ext-ciudad .bandera { width: 26px; height: 19px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--linea); }
.ext-ciudad b { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; }
.ext-ciudad small { display: block; font-size: 13.5px; color: var(--gris); margin-top: 1px; }
.ext-ciudad.total b { font-weight: 700; }
.ext-vuelta { display: flex; align-items: center; height: 26px; margin-top: 6px; font-size: 14px; color: var(--gris); }
.ext-vuelta .part-texto { display: none; }
.ext-apilada, .ext-part { height: 26px; margin-top: 6px; border-radius: 3px; background: var(--pista); }
.ext-apilada { display: flex; overflow: hidden; }
.ext-apilada > span { display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; white-space: nowrap;
                    color: #fff; font-size: 14px; font-weight: 600; }
.ext-apilada .otros { color: var(--tinta); }
.ext-apilada .chico .signo { display: none; }
.ext-apilada .mini { font-size: 11px; }
.ext-part div { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: 7px; border-radius: 3px;
                background: var(--tinta); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ext-part.v1 div { background: #cfcbca; color: var(--tinta); }
.ext-barras .segunda-fila { margin-bottom: 6px; }
.ext-fin { grid-column: 1 / -1; border-bottom: 1px solid var(--linea); }
.ext-fin.total { border-bottom-color: var(--tinta-2); }

/* las ciudades completas contra la primera vuelta: por fila, el nombre, la elección y su barra */
.ext-comp { display: grid; grid-template-columns: max-content max-content 1fr; gap: 6px 12px; align-items: center; margin-top: 14px; max-width: 760px; }
.ext-comp .fila-nombre { grid-row: span 2; font-size: 15px; font-weight: 600; padding-right: 6px; }
.ext-comp .fila-vuelta { font-size: 14px; color: var(--gris); }
.ext-comp .pista { position: relative; height: 24px; background: var(--pista); border-radius: 3px; }
.ext-comp .relleno { display: flex; align-items: center; justify-content: flex-end; height: 100%; padding-right: 8px; border-radius: 3px;
                     background: var(--c); color: #fff; font-size: 14px; white-space: nowrap; }
.ext-comp .relleno.claro { background: color-mix(in srgb, var(--c) 35%, #fff); color: var(--tinta); }
.ext-comp .fuera { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-size: 14px; color: var(--tinta); }

/* el mapa */
.ext-leyenda { margin-top: 12px; }
.punto { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.punto.vacio { background: none; border: 1.5px solid var(--gris-claro); }
.ext-mapa { margin-top: 4px; }
.ext-mapa svg { display: block; width: 100%; height: auto; }
.ext-mapa .pais { fill: var(--pista); stroke: #fff; stroke-width: .6; }
.ext-mapa .ciudad { fill-opacity: .82; stroke: #fff; stroke-width: 1; cursor: default; }
.ext-mapa .ciudad.vacia { fill: none; stroke: var(--gris-claro); stroke-width: 1.2; }
.ext-mapa .rotulo { font-size: 12px; fill: var(--tinta); paint-order: stroke; stroke: #fff; stroke-width: 3px; pointer-events: none; }

@media (max-width: 640px) {
  /* en el teléfono: el nombre arriba; por vuelta, el nombre de la vuelta y su participación en un renglón y la barra
     debajo, a todo el ancho */
  .ext-barras { grid-template-columns: 1fr; }
  .ext-barras .solo-ancho, .ext-part { display: none; }
  .ext-ciudad { grid-row: auto; padding-top: 10px; }
  .ext-vuelta { justify-content: space-between; height: auto; margin-top: 8px; font-size: 13px; }
  .ext-vuelta .part-texto { display: inline; color: var(--tinta-2); }
  .ext-apilada { margin-top: 3px; }
  .ext-apilada > span { font-size: 12.5px; }
  .ext-barras .segunda-fila.ext-apilada { margin-bottom: 10px; }
  .ext-barras .segunda-fila.ext-vuelta { margin-bottom: 0; }
  .ext-comp { grid-template-columns: max-content 1fr; }
  .ext-comp .fila-nombre { grid-row: auto; grid-column: 1 / -1; margin-top: 6px; }
  .ext-mapa .rotulo { font-size: 10px; }
}

/* el balotaje contra la primera vuelta, zona por zona (comparacion.js): un tablero de una pantalla en la computadora; en
   el teléfono las piezas se apilan en el mismo orden */
main.segunda #comparacion { margin-top: 48px; }
.cmp-tablero { display: grid; gap: 14px; margin-top: 14px; max-width: 1100px; }
.cmp-tablero[hidden] { display: none; }
.cmp-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; }
.cmp-caja { background: var(--pista); border-radius: 6px; padding: 14px 16px; min-width: 0; }
.cmp-titulo { font-family: var(--titulos); font-weight: 700; font-size: 16px; line-height: 1.25; margin: 0 0 10px; }
.cmp-segundo { margin-top: 22px; }
.cmp-nota { margin: 8px 0 0; font-size: 14px; color: var(--gris); max-width: 70ch; }

.cmp-avance-texto { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 15px; font-weight: 600; }
.cmp-avance-texto span + span { font-weight: 400; color: var(--tinta-2); }
.cmp-avance-pista { height: 8px; margin-top: 8px; background: #fff; border-radius: 4px; overflow: hidden; }
#cmp-avance-barra { height: 100%; background: var(--tinta-2); border-radius: 4px; transition: width .4s; }

/* la grilla: el número en el centro de la celda, una barra hacia la izquierda si bajó y hacia la derecha si subió */
.cmp-grilla { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: 4px 6px; align-items: center; font-size: 15px; }
.cmp-col { font-size: 14px; color: var(--gris); text-align: center; }
.cmp-fila.fuerte { font-weight: 600; }
.cmp-celda { position: relative; height: 26px; background: #fff; border-radius: 3px; font-variant-numeric: tabular-nums; }
.cmp-celda i { position: absolute; top: 4px; bottom: 4px; background: var(--gris-claro); opacity: .45; border-radius: 2px; }
.cmp-celda b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 400; }
.cmp-celda.fuerte b { font-weight: 600; }
.cmp-celda.vacia { display: flex; align-items: center; justify-content: center; color: var(--gris); }

/* saldo de los terceros: una barra apilada con el número adentro; si alguna cuenta bajó, una fila por cuenta */
.cmp-saldo { display: flex; gap: 2px; height: 32px; border-radius: 4px; overflow: hidden; }
.cmp-saldo > span { display: flex; align-items: center; justify-content: center; min-width: 0; color: #fff; font-size: 15px; font-weight: 600; }
.cmp-saldo > span.claro { color: var(--tinta); }
.cmp-saldo.filas, .cmp-relacion { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 3.2em; gap: 6px 10px; align-items: center; height: auto; overflow: visible; font-size: 15px; }
.cmp-saldo.filas > span { color: var(--tinta); font-weight: 400; justify-content: flex-start; }
.cmp-saldo.filas b, .cmp-relacion b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cmp-pista { position: relative; height: 18px; }
.cmp-pista i { position: absolute; }
.cmp-saldo.filas .cmp-pista i { top: 2px; bottom: 2px; border-radius: 2px; }
.cmp-relacion .cero { top: 0; bottom: 0; border-left: 1px dashed var(--gris-claro); }
.cmp-relacion .ic { top: 8px; height: 2px; opacity: .55; }
.cmp-relacion .punto-rel { top: 4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-shadow: 0 0 0 2px var(--pista); }
.cmp-leyenda { margin-top: 8px; }

.cmp-serie { margin-top: 4px; }
.cmp-serie svg { display: block; width: 100%; height: auto; }
.cmp-serie .eje text { font-size: 13px; fill: var(--gris); }
.cmp-serie .eje path, .cmp-serie .eje line { stroke: var(--linea); }
.cmp-serie .cero { stroke: var(--gris-claro); stroke-dasharray: 3 3; }
.cmp-serie .rotulo-linea { font-size: 14px; font-weight: 600; paint-order: stroke; stroke: var(--pista); stroke-width: 3px; }

.cmp-metodo { max-width: 76ch; font-size: 15px; }
.cmp-metodo summary { cursor: pointer; font-weight: 600; }
.cmp-metodo p { color: var(--tinta-2); }

.cmp-demo { max-width: 1100px; margin: 12px 0 4px; padding: 12px 14px; border-left: 4px solid #ff6633; background: var(--pista); font-size: 15px; }
.cmp-demo p { margin: 0 0 8px; }
.cmp-demo label { display: grid; gap: 6px; }
.cmp-demo input { width: 100%; accent-color: var(--tinta); }

@media (max-width: 640px) {
  .cmp-caja { padding: 12px; }
  .cmp-grilla { grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr)); font-size: 14px; gap: 4px; }
  .cmp-col { font-size: 12.5px; hyphens: auto; }
  .cmp-saldo.filas, .cmp-relacion { grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 3em; font-size: 14px; }
}

/* El resultado del balotaje, municipio por municipio (#resultado, de Scripts/80_bloque_segunda_vuelta.py): texto en
   una columna de lectura, gráficos y tablas al ancho de la columna o un poco más, mapas de a dos */
/* las dos partes de la página, como los ejes de Datos clave: tocar lleva a cada una */
main.segunda .ejes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 32px; }
main.segunda .ejes a { font-family: var(--titulos); font-weight: 700; font-size: 15px; color: var(--tinta); text-decoration: none; }
main.segunda .ejes a:hover { text-decoration: underline; text-decoration-color: var(--naranja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main.segunda #resultado, main.segunda #exterior { scroll-margin-top: 16px; }
main.segunda .ejes + #resultado { margin-top: 30px; }
.res-texto { max-width: 720px; }
.res-texto p { margin: 14px 0 0; color: var(--tinta-2); }
.res-texto strong { color: var(--tinta); font-weight: 600; }
.res-sub { font-family: var(--titulos); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 44px 0 0; }
.res-sub4 { font-size: 16px; font-weight: 600; line-height: 1.3; margin: 28px 0 0; }
.res-leyenda { margin: 16px 0 0; }
.res-nota-graf { margin: 10px 0 0; font-size: 14px; color: var(--gris); }
.res-graf { display: block; width: 100%; max-width: 760px; height: auto; margin-top: 12px; font-family: var(--texto); font-size: 13px; }
.res-graf.chico { max-width: 560px; }
.res-graf text { fill: var(--gris); }
.res-graf .grilla { stroke: var(--linea); }
.res-graf .cero { stroke: var(--tinta); stroke-width: 1; }
.res-graf .banda { fill: var(--lula); opacity: .14; }
.res-graf .proy { fill: none; stroke: var(--lula); stroke-width: 2.5; stroke-dasharray: 5 4; }
.res-graf .conteo { fill: none; stroke: var(--tinta); stroke-width: 2.5; }
.res-graf .final { stroke: var(--gris); stroke-dasharray: 2 3; }
.res-graf .rot { fill: var(--tinta); font-weight: 600; }
.res-graf .rot.lula { fill: var(--lula); }
.res-graf .tit { fill: var(--tinta); font-weight: 600; font-size: 14px; }
.res-graf .v { fill: var(--tinta); font-weight: 600; font-size: 12px; }
.res-graf .b-lula { fill: var(--lula); }
.res-graf .b-flavio { fill: var(--flavio); }
.res-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px 40px; max-width: 1100px; }
.res-par > * { min-width: 0; }
.res-tabla { overflow-x: auto; margin-top: 14px; max-width: 980px; }
.res-tabla table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.res-tabla th { text-align: right; font-weight: 600; color: var(--gris); font-size: 13.5px; padding: 6px 10px 8px; border-bottom: 1px solid var(--tinta);
                vertical-align: bottom; }
.res-tabla td { text-align: right; padding: 6px 10px; border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-tabla th:first-child, .res-tabla td:first-child { text-align: left; padding-left: 0; }
.res-tabla .t { text-align: left; }
.res-mapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 40px; margin-top: 18px; max-width: 1100px; }
.res-mapas.uno { grid-template-columns: minmax(0, 620px); }
.res-mapas figure { margin: 0; min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }   /* título, leyenda y mapa parejos en el par */
.res-mapas figcaption { font-size: 15px; font-weight: 600; line-height: 1.3; }
.res-mapas .res-leyenda { margin: 10px 0 8px; align-content: start; }
.res-mapas img { width: 100%; height: auto; }