/* Estilos compartidos: panel de escritorio + PWA de campo.
   Lenguaje visual "campaña": azul institucional + acento cian/verde, superficies
   elevadas con sombra suave, degradados en las zonas de marca (navbar, botones
   primarios, encabezados). Todo el HTML usa estas clases: el rediseño vive aquí. */
:root {
  /* Marca */
  --azul: #143a6b; --azul-claro: #2b6cb0; --azul-vivo: #3b82f6;
  --acento: #06b6d4;            /* cian de campaña */
  --acento-2: #14b8a6;
  --verde: #15803d; --amarillo: #d4a72c; --rojo: #dc2626;

  /* Neutros */
  --texto: #0f172a; --texto-2: #334155; --gris: #64748b;
  --fondo: #eef2f7; --blanco: #fff; --borde: #dbe3ec; --borde-2: #cbd5e1;

  /* Degradados de campaña */
  --grad-marca: linear-gradient(105deg, var(--azul) 0%, #1d4e8f 55%, #0e7490 100%);
  --grad-primario: linear-gradient(180deg, var(--azul-vivo) 0%, #1d4ed8 100%);
  --grad-acento: linear-gradient(135deg, var(--acento) 0%, var(--acento-2) 100%);
  /* Texto legible encima de la marca: lo recalcula app/core/marca.py según la
     luminancia del color del partido (blanco sobre oscuro, oscuro sobre claro). */
  --sobre-marca: #fff;

  /* Elevación y forma */
  --sombra-1: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .08);
  --sombra-2: 0 4px 6px -1px rgb(15 23 42 / .08), 0 10px 20px -6px rgb(15 23 42 / .14);
  --sombra-3: 0 18px 40px -12px rgb(15 23 42 / .3);
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px;
  --transicion: 150ms cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px; line-height: 1.5;
  background:
    radial-gradient(1100px 480px at 12% -8%, rgb(6 182 212 / .1), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgb(59 130 246 / .12), transparent 58%),
    var(--fondo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; }
h2 { font-size: 1.4rem; margin: 0 0 .25rem; }
h3 { font-size: 1.05rem; color: var(--texto-2); margin: 1.5rem 0 .5rem; }
a { color: var(--azul-claro); }
.muted { color: var(--gris); font-size: .875rem; }
.centrado { text-align: center; }
.espaciador { flex: 1; }

/* ── Login / tarjetas de acceso ── */
.login-body { display: flex; align-items: center; justify-content: center;
              min-height: 100vh; padding: 1.25rem; }
.login-card { position: relative; overflow: hidden; background: var(--blanco);
              padding: 2.25rem 2rem 1.75rem; border-radius: var(--r-xl);
              box-shadow: var(--sombra-3); width: min(94vw, 400px);
              animation: surge .45s cubic-bezier(.2, .8, .25, 1) both; }
/* Cinta de marca en el borde superior */
.login-card::before { content: ""; position: absolute; inset: 0 0 auto;
                      height: 5px; background: var(--grad-marca); }
.login-card h1 { margin: 0 0 .35rem; color: var(--azul); font-size: 1.5rem;
                 font-weight: 700; }
@keyframes surge { from { opacity: 0; transform: translateY(14px); } }

.alerta { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
          border-left: 4px solid var(--rojo); padding: .65rem .8rem;
          border-radius: var(--r-sm); margin: .75rem 0; font-size: .875rem; }
.aviso-ok { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0;
            border-left: 4px solid var(--verde); padding: .7rem .85rem;
            border-radius: var(--r-sm); margin: .75rem 0; font-size: .875rem; }
/* Contraseña temporal para dictar: grande y legible */
.password-dictar { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
                   font-size: 1.6rem; font-weight: 700; letter-spacing: .1em;
                   text-align: center; color: var(--azul);
                   background: linear-gradient(180deg, #fffbeb, #fef3c7);
                   border: 2px dashed var(--amarillo); border-radius: var(--r);
                   padding: .9rem .5rem; margin: .75rem 0;
                   -webkit-user-select: all; user-select: all; }

/* ── Formularios ── */
label { display: block; margin: .85rem 0; font-size: .875rem; font-weight: 500;
        color: var(--texto-2); }
input, select, textarea {
  width: 100%; padding: .65rem .75rem; margin-top: .3rem; font: inherit;
  color: var(--texto); background: var(--blanco);
  border: 1px solid var(--borde-2); border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:hover, select:hover { border-color: var(--gris); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-vivo);
  box-shadow: 0 0 0 3px rgb(59 130 246 / .18);
}
input::placeholder { color: #94a3b8; }
.fila { display: flex; gap: .75rem; }
.fila label { flex: 1; }
.check { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
/* `display:flex` GANA sobre el `display:none` que trae [hidden] por omisión:
   sin esta regla, ocultar la casilla desde el JS no la ocultaría. Misma trampa
   que ya había mordido con .tabs-pwa y .btn (ver sw.js / ESTADO.md). */
.check[hidden] { display: none; }
.check input { width: auto; margin-top: .2rem; accent-color: var(--azul-vivo); }
.consentimiento { background: #fffbeb; border: 1px solid #fde68a;
                  padding: .75rem; border-radius: var(--r-sm); font-size: .85rem; }
/* Consentimiento de contacto: verde para distinguirlo del de registro (ámbar).
   Son dos permisos distintos y el brigadista no debe confundirlos. */
.consentimiento-wa { background: #f0fdf4; border: 1px solid #bbf7d0;
                     padding: .7rem; border-radius: var(--r-sm); font-size: .82rem;
                     margin-top: .5rem; }
fieldset { border: 1px solid var(--borde); border-radius: var(--r);
           padding: .5rem .9rem 1rem; margin: 1rem 0; }
legend { padding: 0 .4rem; font-size: .8rem; font-weight: 600;
         text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }

/* ── Botones ── */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: .4rem; padding: .6rem 1.1rem; font: inherit; font-weight: 600;
       color: var(--texto-2); background: var(--blanco);
       border: 1px solid var(--borde-2); border-radius: var(--r-sm);
       cursor: pointer; box-shadow: var(--sombra-1);
       transition: transform var(--transicion), box-shadow var(--transicion),
                   background var(--transicion), border-color var(--transicion); }
.btn:hover { background: #f8fafc; border-color: var(--gris); box-shadow: var(--sombra-2); }
.btn:active { transform: translateY(1px); box-shadow: var(--sombra-1); }
.btn:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
a.btn { text-decoration: none; }
a.btn.grande { display: flex; }
.btn.primario { color: var(--sobre-marca); background: var(--grad-primario);
                border-color: transparent;
                box-shadow: 0 1px 2px rgb(15 23 42 / .2), 0 6px 16px -6px rgb(15 23 42 / .4); }
.btn.primario:hover { filter: brightness(1.07);
                      box-shadow: 0 2px 4px rgb(15 23 42 / .22), 0 10px 22px -8px rgb(15 23 42 / .45); }
.btn.grande { width: 100%; padding: .95rem 1rem; font-size: 1.05rem; margin: .45rem 0; }
.acciones { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; }
.acciones-grandes { margin: 1rem 0; }

/* ── Iconos ──
   SVG inline monocromático de trazo (estilo Lucide). Heredan currentColor, así
   que se adaptan solos al color del partido y al botón que los contiene.
   NADA de emojis: se ven infantiles y restan credibilidad institucional.
   Uso:  <svg class="ico" viewBox="0 0 24 24" aria-hidden="true">…</svg>      */
.ico { width: 1.15em; height: 1.15em; flex: 0 0 auto;
       fill: none; stroke: currentColor; stroke-width: 1.75;
       stroke-linecap: round; stroke-linejoin: round;
       vertical-align: -.18em; }
.ico.chico { width: .95em; height: .95em; stroke-width: 2; }
/* En un párrafo (no flex) el icono necesita su propia separación del texto */
p > .ico, li > .ico, td > .ico, span > .ico { margin-right: .35rem; }
/* Cuando el icono CIERRA (distintivo de líder tras el nombre, estado tras la
   sección), la separación va del otro lado. */
.ico.lider, .ico.ok, .ico.espera { margin-right: 0; margin-left: .3rem; }
/* Estados: el color comunica, el texto al lado lo explica */
.ico.ok    { color: var(--verde, #16a34a); }
.ico.espera{ color: var(--gris, #64748b); }
.ico.alerta{ color: var(--rojo, #dc2626); }
/* Distintivo de líder: relleno sólido para que se lea de un vistazo en lista.
   Usa --amarillo (fijo) y no --acento, que lo sobreescribe el color del
   partido: el distintivo debe verse igual en toda campaña. */
.ico.lider { fill: currentColor; stroke: none; color: var(--amarillo); }

/* Marcadores de puntos de referencia sobre el mapa.
   Un trazo fino sobre cartografía se pierde: va en una pastilla blanca con
   borde, que además da área de toque cómoda en teléfono. */
.punto-icono { display: grid; place-items: center;
               width: 22px; height: 22px;
               background: var(--blanco); color: var(--texto-2);
               border: 1px solid var(--borde-2); border-radius: 50%;
               box-shadow: 0 1px 3px rgb(15 23 42 / .28); }
.punto-icono .ico { width: 13px; height: 13px; stroke-width: 1.9; margin: 0; }

/* ── Navbar panel ── */
.navbar { display: flex; align-items: center; gap: .35rem; padding: .7rem 1.25rem;
          color: var(--sobre-marca); background: var(--grad-marca);
          box-shadow: var(--sombra-2); position: sticky; top: 0; z-index: 10; }
/* opacity en vez de color-mix: los teléfonos de gama baja traen Chrome < 111 */
.navbar a { color: var(--sobre-marca); opacity: .78;
            text-decoration: none; font-weight: 500;
            font-size: .9rem; padding: .4rem .75rem; border-radius: 999px;
            transition: opacity var(--transicion), background var(--transicion); }
.navbar a:hover { opacity: 1; background: rgb(127 127 127 / .18); }
.navbar a.activo { color: var(--azul); background: #fff; font-weight: 600;
                   opacity: 1; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.navbar .marca { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
                 margin-right: .85rem; padding-left: .55rem;
                 border-left: 3px solid var(--acento); }
.navbar .muted { color: var(--sobre-marca); opacity: .72; }
.contenido { padding: 1.75rem 2rem 3rem; max-width: 1360px; margin: 0 auto; width: 100%; }
.contenido .tabla { display: table; }
@media (max-width: 900px) { .contenido { padding: 1.1rem 1rem 2.5rem; } }

/* ── Tarjetas de indicadores ── */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1rem; margin: 1.25rem 0; }
.tarjeta { position: relative; overflow: hidden; background: var(--blanco);
           border: 1px solid var(--borde); border-left: 0;
           border-radius: var(--r); padding: 1.1rem 1.1rem 1.1rem 1.35rem;
           box-shadow: var(--sombra-1);
           transition: transform var(--transicion), box-shadow var(--transicion); }
.tarjeta::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
                   background: var(--grad-acento); }
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.tarjeta .num { display: block; font-size: 2rem; font-weight: 800;
                letter-spacing: -.03em; color: var(--azul); line-height: 1.1; }

/* ── Tablas ── */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0;
         background: var(--blanco); border: 1px solid var(--borde);
         border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra-1); }
.tabla th, .tabla td { padding: .7rem .85rem; text-align: left; font-size: .875rem;
                       border-bottom: 1px solid var(--borde); }
.tabla th { background: linear-gradient(180deg, #f8fafc, #eef2f7);
            font-size: .74rem; font-weight: 700; text-transform: uppercase;
            letter-spacing: .05em; color: var(--gris); white-space: nowrap;
            position: sticky; top: 0; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: #f6f9fd; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.filtros { display: flex; gap: .7rem; align-items: center; margin: 1rem 0;
           flex-wrap: wrap; padding: .85rem 1rem; background: var(--blanco);
           border: 1px solid var(--borde); border-radius: var(--r);
           box-shadow: var(--sombra-1); }
.filtros input, .filtros select { width: auto; margin-top: 0; }
.filtros label { margin: 0; }

/* ── PWA de campo ── */
.pwa-body { padding-bottom: 4.75rem; }
.vista { padding: 1rem; max-width: 520px; margin: 0 auto; }
.barra-pwa { display: flex; align-items: center; gap: .5rem; color: var(--sobre-marca);
             background: var(--grad-marca); padding: .7rem 1rem;
             padding-top: max(.7rem, env(safe-area-inset-top));
             position: sticky; top: 0; z-index: 5; font-weight: 600;
             box-shadow: var(--sombra-2); }
/* El nombre cede primero: se recorta con puntos suspensivos en vez de empujar
   el indicador de conexión, que siempre debe verse completo. */
#barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                min-width: 0; }
/* white-space:nowrap y flex-shrink:0 — sin ellos, en pantallas angostas el
   nombre largo del brigadista aprieta la pastilla y "en línea" se parte en dos
   renglones, que se ve descuidado. */
.pill { background: rgb(255 255 255 / .2); border-radius: 999px;
        padding: .15rem .65rem; font-size: .78rem; font-weight: 600;
        white-space: nowrap; flex: 0 0 auto; }
.pill.rojo { background: var(--rojo); }
.pill.verde-punto { color: #4ade80; }
.pill.gris-punto { color: #cbd5e1; }
/* `display:flex` gana sobre el `display:none` que trae [hidden] por omisión,
 * así que sin esta regla las tabs seguían pintándose aunque el JS las marcara
 * como ocultas — y tapaban los botones de la cámara. */
.tabs-pwa[hidden], .barra-pwa[hidden] { display: none; }
.tabs-pwa { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
            background: rgb(255 255 255 / .96);
            -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
            border-top: 1px solid var(--borde); z-index: 5;
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0 -4px 16px rgb(15 23 42 / .07); }
.tabs-pwa button { flex: 1; padding: .85rem .5rem; border: 0; background: none;
                   font: inherit; font-weight: 600; color: var(--gris);
                   cursor: pointer; position: relative;
                   transition: color var(--transicion); }
.tabs-pwa button.activo { color: var(--azul-vivo); }
.tabs-pwa button.activo::after { content: ""; position: absolute; top: 0;
                                 left: 22%; right: 22%; height: 3px;
                                 border-radius: 0 0 3px 3px;
                                 background: var(--grad-acento); }

/* Vista de cámara: se saca del flujo y ocupa la pantalla COMPLETA, por encima
 * de la barra superior y de las tabs inferiores.
 * Por qué fija y no `height:100dvh` dentro del flujo: la vista vive debajo de
 * la barra (sticky) y encima de las tabs (fixed), así que 100dvh arrancaba
 * DESPUÉS de la barra y el sobrante quedaba tapado por las tabs — los botones
 * terminaban fuera de la pantalla. Encuadrar es pantalla completa, sin cromo. */
#vista-camara:not([hidden]) { position: fixed; inset: 0; z-index: 20;
                              display: flex; flex-direction: column;
                              max-width: none; margin: 0;
                              background: #0f172a; color: #fff;
                              padding: max(.75rem, env(safe-area-inset-top)) .75rem
                                       max(.75rem, env(safe-area-inset-bottom));
                              gap: .6rem; overflow: hidden; }
#vista-camara .marco-camara { flex: 1; min-height: 0; }  /* min-height:0 = puede encoger */
#vista-camara .acciones { margin-top: 0; flex-shrink: 0; }
/* Los botones de cámara no compiten por el espacio: reparten el ancho */
#vista-camara .acciones .btn { flex: 1; padding: .9rem .5rem; }
/* …pero `display:flex` de .btn gana sobre [hidden]: sin esto, "Omitir" se veía
 * también en el paso 1, donde no aplica. */
#vista-camara .acciones .btn[hidden] { display: none; }
/* Sobre el fondo oscuro, los botones secundarios deben seguir siendo legibles */
#vista-camara .acciones .btn:not(.primario) {
  background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .35);
  color: #fff; }
#vista-camara .instruccion { color: #fff; font-size: 1.05rem; line-height: 1.25; }
#vista-camara .instruccion small { display: block; font-size: .72rem; font-weight: 600;
                                   text-transform: uppercase; letter-spacing: .06em;
                                   color: rgb(255 255 255 / .6); }
#vista-camara .instruccion small:first-child { margin-bottom: .1rem; }
#vista-camara .instruccion small:last-child { margin-top: .1rem;
                                              text-transform: none; letter-spacing: 0;
                                              font-weight: 400; font-size: .78rem; }

.marco-camara { position: relative; border-radius: var(--r);
                overflow: hidden; background: #000; box-shadow: var(--sombra-2); }
/* `contain` y no `cover`: con cover el teléfono recorta los lados del
 * fotograma, así que la credencial podía quedar fuera de lo que el OCR recibe
 * aunque en pantalla se viera dentro de la guía. */
.marco-camara video { width: 100%; height: 100%; display: block;
                      object-fit: contain; }
.guia-ine { position: absolute; inset: 8% 4%; border: 3px dashed rgb(255 255 255 / .85);
            border-radius: var(--r); aspect-ratio: 85.6 / 54; margin: auto;
            pointer-events: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .35); }
.instruccion { font-weight: 600; text-align: center; margin: 0; flex-shrink: 0; }

/* Aviso de lo que está haciendo el OCR. Se sobrepone al video (no ocupa una
 * fila propia) para no volver a empujar los botones fuera de la pantalla. */
#ocr-progreso { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
                background: rgb(15 23 42 / .82); color: #fff;
                -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
                padding: .7rem .9rem; font-size: .9rem; font-weight: 600;
                text-align: center; z-index: 2; }
#ocr-progreso[hidden] { display: none; }
.barra-ocr { display: block; height: 4px; margin-top: .5rem; border-radius: 999px;
             background: rgb(255 255 255 / .25); overflow: hidden; }
.barra-ocr i { display: block; height: 100%; border-radius: 999px;
               background: var(--grad-acento, #38bdf8);
               transition: width .25s ease; }

/* Confianza del OCR por campo */
.badge { display: inline-block; font-size: .68rem; font-weight: 700;
         border-radius: 999px; padding: .1rem .5rem; margin-left: .3rem;
         text-transform: uppercase; letter-spacing: .03em; }
.badge.ok { background: #dcfce7; color: #166534; }
.badge.dudoso { background: #fef3c7; color: #92400e; }
.badge.error { background: #fee2e2; color: #991b1b; }

.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.chips button { border: 2px solid var(--borde-2); background: var(--blanco);
                border-radius: 999px; padding: .45rem 1rem; font: inherit;
                font-size: .9rem; font-weight: 600; color: var(--texto-2);
                cursor: pointer; transition: all var(--transicion); }
.chips button:hover { border-color: var(--gris); }
.chips button.activo { border-color: currentColor; font-weight: 700;
                       box-shadow: 0 0 0 3px rgb(59 130 246 / .12); }

.lista-simple { list-style: none; padding: 0; margin: .5rem 0; }
.lista-simple li { background: var(--blanco); border: 1px solid var(--borde);
                   border-radius: var(--r-sm); padding: .75rem .85rem;
                   margin: .5rem 0; display: flex; gap: .6rem; align-items: center;
                   box-shadow: var(--sombra-1); }

/* ── SaaS: municipios y estrategia por sección ── */
.btn.mini { padding: .32rem .7rem; font-size: .78rem; text-decoration: none;
            border-radius: 6px; box-shadow: none; }
.btn.mini:hover { box-shadow: var(--sombra-1); }
.estado-chip { display: inline-block; font-size: .72rem; font-weight: 700;
               border-radius: 999px; padding: .18rem .65rem; white-space: nowrap; }
.estado-libre { background: #e2e8f0; color: #334155; }
.estado-campana { background: #dbeafe; color: #1e40af; }
.estado-candidato { background: #d1fae5; color: #065f46; }
.estado-inactiva { background: #fee2e2; color: #991b1b; }
/* Avisos en la tabla de equipo (pide contraseña / temporal sin cambiar) */
.chip-aviso { display: inline-block; background: #fef3c7; color: #92400e;
              border: 1px solid #fde68a; border-radius: 999px;
              padding: .1rem .55rem; font-size: .72rem; font-weight: 700;
              margin-left: .4rem; white-space: nowrap; vertical-align: middle; }

/* ── Selector de colores del partido ── */
.campo-color { display: flex; gap: .5rem; align-items: center; margin-top: .3rem; }
.campo-color input[type="color"] { width: 46px; height: 40px; padding: 2px;
                                   margin: 0; cursor: pointer;
                                   border-radius: var(--r-sm); flex: none; }
.campo-color input[type="text"] { margin: 0; font-family: ui-monospace, Consolas,
                                  monospace; text-transform: lowercase; }
/* Vista previa en vivo: usa sus propias variables para no repintar el panel
   real mientras el candidato experimenta con los colores. */
.previa-marca { border: 1px solid var(--borde); border-radius: var(--r);
                overflow: hidden; box-shadow: var(--sombra-1); margin-bottom: .5rem; }
.previa-barra { display: flex; align-items: baseline; gap: .6rem;
                padding: .6rem .85rem; font-size: .85rem;
                color: var(--previa-sobre, #fff);
                background: linear-gradient(105deg, var(--previa-oscuro, #0d2647) 0%,
                            var(--previa-primario, #143a6b) 55%,
                            var(--previa-acento-2, #0e7490) 100%); }
.previa-barra span { opacity: .78; font-size: .78rem; }
.previa-cuerpo { display: flex; gap: .75rem; align-items: center;
                 padding: .85rem; background: #f8fafc; }
.previa-tarjeta { position: relative; overflow: hidden; flex: 1;
                  background: #fff; border: 1px solid var(--borde);
                  border-radius: var(--r-sm); padding: .6rem .7rem .6rem .85rem;
                  font-size: .78rem; color: var(--gris); }
.previa-tarjeta::before { content: ""; position: absolute; inset: 0 auto 0 0;
                          width: 4px;
                          background: linear-gradient(135deg,
                                      var(--previa-acento, #06b6d4) 0%,
                                      var(--previa-acento-2, #0e7490) 100%); }
.previa-tarjeta .num { display: block; font-size: 1.4rem; font-weight: 800;
                       color: var(--previa-primario, #143a6b); line-height: 1.1; }
.previa-cuerpo .btn.primario { flex: none; font-size: .85rem; padding: .5rem .9rem;
                               color: var(--previa-sobre, #fff);
                               background: linear-gradient(180deg,
                                           var(--previa-vivo, #3b82f6) 0%,
                                           var(--previa-primario, #143a6b) 100%); }

dialog { border: 0; border-radius: var(--r-lg); padding: 1.5rem;
         width: min(94vw, 440px); box-shadow: var(--sombra-3);
         color: var(--texto); animation: surge .25s ease both; }
dialog::backdrop { background: rgb(15 23 42 / .5);
                   -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog h3 { margin: 0 0 .35rem; color: var(--azul); font-size: 1.2rem; }

/* App de campo › «¿Es la misma persona?»: cada registro parecido es un botón
   grande con lo que ayuda a reconocerlo (cargo, a quién responde, sección) */
.misma-lista { display: flex; flex-direction: column; gap: .55rem; margin-top: .9rem; }
.misma-opcion { display: block; width: 100%; padding: .75rem .9rem; text-align: left; font: inherit;
  color: var(--texto); background: var(--blanco); border: 1px solid var(--borde-2, var(--borde));
  border-radius: var(--r); cursor: pointer; }
.misma-opcion:hover, .misma-opcion:focus-visible { border-color: var(--azul); }
.misma-opcion .si { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--azul); }
.misma-opcion b { display: block; margin: .15rem 0; font-size: 1rem; }
.misma-opcion small { display: block; color: var(--gris); line-height: 1.35; }
#dlg-misma .acciones { flex-wrap: wrap; }

.tabla input.mini, .tabla select.mini { width: auto; padding: .3rem .45rem;
                                        font-size: .82rem; margin: 0; }
.tabla input.mini { max-width: 6rem; }
.tabla input.mini.ancha { max-width: 10rem; }

/* ── Difusión por WhatsApp ── */
.dlg-ancho { width: min(94vw, 820px); }

.aviso { background: #fffbeb; border: 1px solid #fde68a; color: #713f12;
         padding: .8rem 1rem; border-radius: var(--r-sm); margin: 1rem 0;
         font-size: .9rem; }

.tarjeta-difusion { background: var(--blanco); border: 1px solid var(--borde);
                    border-radius: var(--r); padding: 1.1rem 1.25rem;
                    margin-bottom: .9rem; box-shadow: var(--sombra-1); }
.tarjeta-difusion.inactiva { opacity: .62; }
.tarjeta-difusion header { display: flex; align-items: center; gap: .6rem; }
.tarjeta-difusion h3 { margin: 0; font-size: 1.05rem; color: var(--texto); }
.tarjeta-difusion .destino { font-size: .8rem; margin: .2rem 0 .9rem;
                             overflow: hidden; text-overflow: ellipsis;
                             white-space: nowrap; }
.etiqueta { font-size: .72rem; font-weight: 600; text-transform: uppercase;
            letter-spacing: .04em; color: var(--gris);
            border: 1px solid var(--borde-2); border-radius: 999px;
            padding: .1rem .55rem; }

/* Las cifras son el contenido principal de la tarjeta: número grande y
   etiqueta chica debajo, sin adornos. */
.cifras { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: .2rem 0 .5rem; }
.cifra { display: flex; flex-direction: column; line-height: 1.15; }
.cifra b { font-size: 1.5rem; font-weight: 650; color: var(--texto); }
.cifra span { font-size: .74rem; color: var(--gris);
              text-transform: uppercase; letter-spacing: .04em; }
.cifra.destacada b { color: var(--verde); }
.cifra.mala b { color: var(--rojo); }
.cifra.tasa b { color: var(--azul); }
/* "Cómo se calcula": toda cifra derivada debe poder explicarse. El detalle va
   en el title para no competir con el dato. */
.tarjeta-difusion .cs { font-size: .74rem; margin: 0 0 .8rem;
                        border-bottom: 1px dotted var(--borde-2);
                        display: inline-block; cursor: help; }
.acciones-tarjeta { display: flex; gap: .5rem; flex-wrap: wrap; }

.caja-alcance { background: #f8fafc; border: 1px solid var(--borde);
                border-radius: var(--r-sm); padding: .85rem 1rem;
                margin: .9rem 0; font-size: .9rem; }
.caja-alcance p { margin: .25rem 0; }
.mal { color: var(--rojo); }

/* Respeta a quien pide menos animación en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Estructura (organigrama) ── */
.piramide .tarjeta .num { font-size: 1.7rem; }
.nivel-chip { display: inline-block; border-radius: 999px; padding: .12rem .6rem;
              font-size: .72rem; font-weight: 700; background: #e2e8f0;
              color: var(--texto-2); white-space: nowrap; vertical-align: middle; }
.nivel-chip.nivel-candidato { background: var(--azul); color: #fff; }
.nivel-chip.nivel-director { background: #dbeafe; color: #1e3a8a; }
.nivel-chip.nivel-regional { background: #cffafe; color: #155e75; }
.nivel-chip.nivel-zona { background: #dcfce7; color: #14532d; }
.nivel-chip.nivel-auxiliar { background: #ccfbf1; color: #115e59; }
/* Un auxiliar no lleva zona propia (la suya es la que apoya); sí las secciones
   que atiende. `label { display:block }` le gana a «hidden»: se esconde aquí. */
#cargo-zona-campo[hidden], #cargo-comunidad-campo[hidden] { display: none; }
.nivel-chip.nivel-seccional { background: #ecfccb; color: #3f6212; }
.nivel-chip.nivel-manzana { background: #fef9c3; color: #854d0e; }
.nivel-chip.nivel-lider { background: #fef3c7; color: #92400e; }
.tabla.arbol td:first-child { white-space: normal; min-width: 15rem; }
.tabla.arbol td:last-child { white-space: nowrap; }
/* Formato para llenar: un renglón por distrito con su botón. El texto se parte
   y el botón no se encoge (en teléfono el nombre del regional ocupa dos renglones). */
#formato-lista { max-height: 55vh; overflow-y: auto; }
#formato-lista li > span:first-child { flex: 1; min-width: 0; line-height: 1.35; }
#formato-lista li .muted { font-size: .8rem; }
#formato-lista li .btn { flex-shrink: 0; white-space: nowrap; }
.tabla.arbol .rama { display: inline-block; width: calc(var(--prof, 0) * 1.4rem);
                     height: 1.1em; vertical-align: middle; margin-right: .5rem;
                     border-right: 2px solid var(--borde-2); border-bottom: 2px solid var(--borde-2);
                     border-radius: 0 0 0 6px; opacity: .9; }
.tabla.arbol tr.prof-0 .rama { display: none; }
.tabla.arbol tr.prof-0 td:first-child b { font-size: 1rem; color: var(--azul); }
.sugerencias li { display: flex; gap: .5rem; align-items: center; padding: .4rem .5rem;
                  border-radius: var(--r-sm); cursor: pointer; }
.sugerencias li:hover { background: #f1f5f9; }
#cargo-persona-bloque { border: 1px solid var(--borde); border-radius: var(--r);
                        padding: .25rem 1rem .75rem; margin: .5rem 0; }
#cargo-persona-bloque legend { font-size: .8rem; font-weight: 600; color: var(--gris);
                               padding: 0 .4rem; }
/* `label { display:block }` le gana al display:none de [hidden]: sin esto el
   teléfono de edición y el bloque de persona se pintan aunque el JS los oculte
   (misma trampa documentada en la PWA). */
#cargo-telefono-edicion[hidden], #cargo-persona-bloque[hidden],
#cargo-persona-nueva[hidden], #cargo-persona-existente[hidden] { display: none; }
#dlg-cargo { max-height: 92vh; overflow: auto; }

/* ── Posibles repetidos (Personas) ── */
.grupo-repetido { border: 1px solid var(--borde); border-radius: var(--r);
                  padding: .5rem .75rem .75rem; margin: .75rem 0; background: #fbfcfe; }
.grupo-repetido .tabla { box-shadow: none; }
.grupo-repetido .acciones { justify-content: flex-end; margin-top: .5rem; }
#btn-repetidos[hidden] { display: none; }

/* ── Equipo: los roles son la jerarquía de la estructura ── */
.nivel-chip.nivel-admin_campana { background: #ede9fe; color: #5b21b6; }
.nivel-chip.nivel-brigadista { background: #f1f5f9; color: #334155;
                               box-shadow: inset 0 0 0 1px var(--borde-2); }
/* Filtro de tres opciones (todos / con acceso / sin acceso) */
.segmento { display: inline-flex; border: 1px solid var(--borde-2); border-radius: 999px;
            overflow: hidden; background: var(--blanco); }
.segmento button { border: 0; background: none; padding: .4rem .85rem; font: inherit;
                   font-size: .82rem; color: var(--texto-2); cursor: pointer;
                   border-left: 1px solid var(--borde-2); }
.segmento button:first-child { border-left: 0; }
.segmento button b { font-weight: 700; color: var(--gris); margin-left: .2rem; }
.segmento button:hover { background: #f1f5f9; }
.segmento button.activo { background: var(--azul); color: var(--sobre-marca, #fff); }
.segmento button.activo b { color: inherit; opacity: .85; }
.segmento button:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: -2px; }
#tabla-equipo .login { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
                       font-size: .82rem; color: var(--texto-2); }
#tabla-equipo tr.sin-acceso td:first-child b { font-weight: 600; color: var(--texto-2); }
#tabla-equipo tr.suspendido td { color: var(--gris); }
#tabla-equipo tr.suspendido td:first-child b { font-weight: 500; }
#tabla-equipo tr.prof-suelto .rama { display: none; }
#tabla-equipo tr.separador td { background: #f8fafc; font-size: .74rem; font-weight: 700;
                                text-transform: uppercase; letter-spacing: .06em;
                                color: var(--gris); padding-top: .9rem; }
#tabla-equipo tr.separador td span { text-transform: none; letter-spacing: 0;
                                     font-weight: 400; margin-left: .5rem; }
#tabla-equipo .cuenta-aparte { display: block; font-size: .78rem; color: var(--gris); }
/* Rama y nombre lado a lado: un nombre largo se parte en su propia columna,
   no por debajo de la rama. La sangría es más corta que en Estructura porque
   aquí hay más columnas. */
#tabla-equipo .integrante { display: flex; align-items: flex-start; }
#tabla-equipo .integrante > div { min-width: 0; }
#tabla-equipo .integrante .rama { flex: none; width: calc(var(--prof, 0) * 1.05rem); }
#tabla-equipo td:first-child { min-width: 17rem; }
#tabla-equipo td:nth-child(2), #tabla-equipo td:nth-child(3),
#tabla-equipo td:nth-child(4), #tabla-equipo td:nth-child(8) { white-space: nowrap; }
#tabla-equipo td:nth-child(3) { color: var(--texto-2); font-size: .85rem; }
#buscar-equipo { min-width: 15rem; }
.ayuda-rol { margin: -.45rem 0 .2rem; min-height: 1.1em; }
.grupo-password { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
                  margin: .85rem 0 0; padding-top: .85rem; border-top: 1px solid var(--borde); }
.grupo-password .muted { margin-right: .25rem; }
/* El usuario que se dicta junto con la contraseña temporal */
.dato-dictar { display: flex; align-items: baseline; justify-content: center; gap: .6rem;
               margin-top: .75rem; }
.dato-dictar span { font-size: .78rem; color: var(--gris); text-transform: uppercase;
                    letter-spacing: .06em; }
.dato-dictar b { font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
                 font-size: 1.15rem; color: var(--azul); -webkit-user-select: all;
                 user-select: all; }
/* `label { display:block }` le gana a [hidden] (la misma trampa de siempre) */
#form-miembro label[hidden], #form-editar-miembro label[hidden] { display: none; }
#dlg-miembro, #dlg-editar-miembro { width: min(94vw, 520px); max-height: 92vh; overflow: auto; }

/* ── Tablas en pantallas angostas ──
   Una tabla más ancha que la pantalla empujaba TODA la página: el teléfono la
   encogía para que cupiera y todo se veía diminuto y con los márgenes rotos.
   Ahora cada tabla vive en su caja (.tabla-scroll) y se desliza dentro de ella;
   la página nunca se ensancha. Vale para cualquier ancho: en una laptop de
   1280 px Equipo, Estructura y Secciones también se salían. (El encabezado
   "sticky" de .tabla no llegaba a funcionar, así que la caja no le quita nada.) */
.tabla-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
                background: var(--blanco); border: 1px solid var(--borde);
                border-radius: var(--r); box-shadow: var(--sombra-1); }
/* overflow visible: con el `overflow: hidden` de .tabla, la tabla misma era la
   caja de referencia de lo "sticky" y la primera columna no se quedaba fija. */
.tabla-scroll > .tabla { border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.grupo-repetido .tabla-scroll { box-shadow: none; }
@media (max-width: 900px) {
  /* La primera columna (el nombre) se queda fija al deslizar: así no se pierde
     a quién pertenece cada dato. */
  .tabla-scroll > .tabla th:first-child,
  .tabla-scroll > .tabla td:first-child { position: sticky; left: 0; z-index: 1;
                                          background: var(--blanco);
                                          box-shadow: 1px 0 0 var(--borde); }
  .tabla-scroll > .tabla th:first-child { background: #f1f5f9; z-index: 2; }
  .filtros { padding: .7rem .75rem; gap: .5rem; }
  .filtros input:not([type="checkbox"]), .filtros select { flex: 1 1 9rem; min-width: 0; }
  h2 { font-size: 1.3rem; }
}

/* ── Teléfono: Equipo y Estructura como fichas ──
   Son listas con jerarquía y muchas columnas: deslizarlas de lado no sirve.
   Cada renglón se vuelve una ficha: el nombre arriba, lo demás en una línea
   que se acomoda sola, la sangría marca de quién depende y las celdas sin dato
   (.nada) no se pintan. Es el mismo HTML de la tabla. */
@media (max-width: 760px) {
  #tabla-equipo, #tabla-estructura,
  #tabla-equipo tbody, #tabla-estructura tbody { display: block; }
  #tabla-equipo thead, #tabla-estructura thead { display: none; }
  #tabla-equipo tr, #tabla-estructura tr {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem;
    padding: .7rem .85rem .7rem calc(.85rem + var(--sangria, 0rem));
    border-bottom: 1px solid var(--borde);
    /* guía vertical de la rama a la que pertenece */
    background-image: linear-gradient(var(--borde-2), var(--borde-2));
    background-repeat: no-repeat; background-size: 0 100%;
    background-position: calc(.3rem + var(--sangria, 0rem)) 0; }
  #tabla-equipo tr:not(.prof-0):not(.prof-suelto):not(.separador),
  #tabla-estructura tr:not(.prof-0) { background-size: 2px 100%; }
  #tabla-equipo tbody tr:last-child, #tabla-estructura tbody tr:last-child { border-bottom: 0; }
  #tabla-equipo td, #tabla-estructura td { display: block; padding: 0; border: 0; min-width: 0;
                                           font-size: .82rem; white-space: normal;
                                           position: static; box-shadow: none; background: none; }
  #tabla-equipo td:first-child, #tabla-estructura td:first-child { flex: 1 1 100%; font-size: .95rem; }
  #tabla-equipo td:last-child, #tabla-estructura td:nth-child(8) { margin-left: auto; white-space: nowrap; }
  /* La foto va primero, con el nombre a su lado; lo demás baja de renglón */
  #tabla-estructura td:nth-child(9) { order: -1; flex: none; }
  #tabla-estructura td:first-child { flex: 1 1 calc(100% - 3.6rem); }
  #tabla-equipo td.nada, #tabla-estructura td.nada { display: none; }
  #tabla-equipo .rama, #tabla-estructura .rama { display: none; }
  #tabla-equipo tr.prof-1, #tabla-estructura tr.prof-1 { --sangria: .8rem; }
  #tabla-equipo tr.prof-2, #tabla-estructura tr.prof-2 { --sangria: 1.6rem; }
  #tabla-equipo tr.prof-3, #tabla-estructura tr.prof-3 { --sangria: 2.4rem; }
  #tabla-equipo tr.prof-4, #tabla-estructura tr.prof-4 { --sangria: 3.2rem; }
  #tabla-equipo tr.prof-5, #tabla-estructura tr.prof-5 { --sangria: 4rem; }
  #tabla-equipo tr.prof-6, #tabla-estructura tr.prof-6 { --sangria: 4.8rem; }
  /* Equipo: capturas y último sync se consultan en pantalla grande */
  #tabla-equipo td:nth-child(7), #tabla-equipo td:nth-child(8) { display: none; }
  #tabla-equipo td:nth-child(3) { white-space: normal; font-size: .82rem; }
  #tabla-equipo td:nth-child(3)::before { content: "Depende de "; color: var(--gris); }
  #tabla-equipo td:nth-child(6)::before { content: "Secciones "; color: var(--gris); }
  #tabla-equipo tr.separador td { padding: .2rem 0; background: none; }
  #tabla-estructura td:nth-child(5)::before { content: "Acceso: "; color: var(--gris); }
  #tabla-estructura td:nth-child(6)::before { content: "Propias: "; color: var(--gris); }
  #tabla-estructura td:nth-child(7)::before { content: "Acumulado: "; color: var(--gris); }
  /* Filtro de Equipo: de dos en dos, para que el conteo no quede cortado */
  .segmento { display: flex; flex-wrap: wrap; width: 100%; border-radius: 12px;
              gap: 1px; background: var(--borde-2); }
  .segmento button { flex: 1 1 45%; border-left: 0; background: var(--blanco);
                     padding: .5rem .4rem; white-space: nowrap; }
  #buscar-equipo { min-width: 0; flex: 1 1 100%; }
  .filtros .espaciador { display: none; }
  /* Tarjetas de resumen: de dos en dos y más bajas; apiladas de una en una
     había que deslizar media pantalla para llegar a la lista */
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tarjetas .tarjeta { padding: .7rem .8rem; }
  .tarjetas .tarjeta .num, .piramide .tarjeta .num { font-size: 1.35rem; }
}

/* ── Posiciones vacantes de la estructura ── */
.chip-vacante { display: inline-block; margin-left: .4rem; padding: .08rem .5rem;
                border: 1px dashed #94a3b8; border-radius: 999px; background: #f8fafc;
                color: #475569; font-size: .72rem; font-weight: 700; white-space: nowrap;
                vertical-align: middle; }
.tabla tr.vacante td:first-child b { font-weight: 600; color: var(--texto-2); }
.tabla.arbol tr.vacante.prof-0 td:first-child b { color: var(--texto-2); }
#aviso-vacantes .btn { margin-left: .5rem; }
#ocupar-resultados { max-height: 46vh; overflow: auto; margin: .25rem 0 .75rem; }
#ocupar-resultados li { flex-wrap: wrap; row-gap: .15rem; }
#ocupar-nueva { border: 1px solid var(--borde); border-radius: var(--r); padding: .6rem .9rem; }
#ocupar-nueva summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--texto-2); }
#ocupar-nueva[open] summary { margin-bottom: .25rem; }
#dlg-ocupar { max-height: 92vh; overflow: auto; }
/* display propio le gana a [hidden] (la misma trampa de siempre) */
#form-cargo label[hidden], #btn-desocupar[hidden], #cargo-persona-vacante[hidden],
#aviso-vacantes[hidden] { display: none; }
#cargo-persona-bloque .fila { flex-wrap: wrap; }

/* ── App de campo: domicilio donde vive y vuelta al panel ── */
#dom-actual[hidden] { display: none; }
#wrap-otro-domicilio { margin-top: .25rem; }
.barra-pwa a.pill.enlace { color: inherit; text-decoration: none; font-weight: 600;
                           border: 1px solid currentColor; opacity: .92; }
.barra-pwa a.pill.enlace[hidden] { display: none; }

/* ── Personas: estatus y ficha ── */
.estatus-persona { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem;
                   font-weight: 600; color: var(--texto-2); white-space: nowrap; }
.estatus-persona::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%;
                           background: var(--c, #64748b); flex: none; }
.ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem;
         margin: .75rem 0 1rem; padding: .85rem 1rem; background: #f8fafc;
         border: 1px solid var(--borde); border-radius: var(--r); font-size: .875rem; }
.ficha dt { color: var(--gris); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
#persona-dom-actual[hidden] { display: none; }
#dlg-persona { max-height: 92vh; overflow: auto; }
@media (max-width: 600px) { .ficha { grid-template-columns: 1fr; gap: .1rem; }
                            .ficha dd { margin-bottom: .4rem; } }

/* ── Secciones: comunidades de cada sección ── */
.lista-comunidades { list-style: none; margin: .6rem 0 1rem; padding: 0; max-height: 44vh;
                     overflow: auto; border: 1px solid var(--borde); border-radius: var(--r); }
.lista-comunidades li { display: flex; align-items: center; gap: .5rem; padding: .45rem .75rem;
                        border-bottom: 1px solid var(--borde); font-size: .9rem; }
.lista-comunidades li:last-child { border-bottom: 0; }
.lista-comunidades li span:first-child { min-width: 0; overflow-wrap: anywhere; }
#comunidades-buscar { width: 100%; }
#dlg-comunidades { max-height: 92vh; overflow: auto; }
#dlg-comunidades textarea { width: 100%; }

/* ── Líderes que pide la meta (inicio, Estructura y Secciones) ── */
.chip-ok { display: inline-block; background: #dcfce7; color: #166534; border-radius: 999px;
           padding: .05rem .5rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.lideres-meta { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
                box-shadow: var(--sombra-1); padding: 1rem 1.15rem; margin: 1rem 0 1.25rem; }
.lideres-meta h3 { margin: 0 0 .7rem; font-size: 1rem; color: var(--texto); }
.lideres-meta p { margin: .7rem 0 0; font-size: .875rem; }
.lideres-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                  gap: .6rem; }
.lideres-cifras > div { background: #f8fafc; border: 1px solid var(--borde);
                        border-radius: var(--r-sm); padding: .6rem .75rem; min-width: 0; }
.lideres-cifras span { display: block; font-size: .75rem; color: var(--gris); }
.lideres-cifras b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.15;
                    letter-spacing: -.02em; color: var(--azul); }
.lideres-cifras .falta { background: #fffbeb; border-color: #fde68a; }
.lideres-cifras .falta b { color: #92400e; }
.lideres-cifras .cumple { background: #f0fdf4; border-color: #bbf7d0; }
.lideres-cifras .cumple b { color: #166534; }
.lideres-meta details { margin-top: .6rem; font-size: .85rem; }
.lideres-meta summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; }
.lideres-meta details p { margin: .4rem 0 0; color: var(--texto-2); }
.lideres-linea { font-size: .8rem; color: var(--texto-2); margin-top: .15rem; white-space: nowrap; }
/* El piso de arriba de los líderes: coordinadores de manzana o de comunidad */
.lideres-meta .lideres-sub { margin: 1rem 0 .55rem; padding-top: .85rem; border-top: 1px solid var(--borde);
                             font-size: .92rem; color: var(--texto); }
.lideres-meta details p + p { margin-top: .5rem; }
.lideres-cifras.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Secciones: bajo los líderes, los coordinadores de manzana que pide la sección */
.secc-coord { display: block; font-size: .72rem; color: var(--texto-2); margin-top: .15rem;
              line-height: 1.25; }
/* En la tabla ancha no se aprieta; en la ficha del teléfono su columna mide
   menos que eso y la empujaba fuera de la pantalla */
@media (min-width: 900px) { .secc-coord { min-width: 8.5rem; } }
@media (max-width: 760px) { .lideres-linea { white-space: normal; } }
/* Coordinadores de manzana de la rama: el nombre se parte, las cifras no (si no,
   la columna se ensancha hasta empujar la tabla) */
.lideres-linea.coord { white-space: normal; min-width: 12rem; max-width: 16rem; line-height: 1.3; }
.lideres-linea.coord .coord-cuenta { white-space: nowrap; }

/* ── Reporte de avance: la hoja «Estructura territorial» ──
   La hoja completa en pantallas anchas; en el teléfono, fichas por zona. No es
   una .tabla: lleva celdas que abarcan varios renglones y sus propias bandas. */
.hoja-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
               background: var(--blanco); border: 1px solid var(--borde-2);
               border-radius: var(--r); box-shadow: var(--sombra-1); }
.hoja-territorial { width: 100%; min-width: 60rem; border-collapse: collapse; font-size: .8rem; }
.hoja-territorial th { background: var(--azul); color: var(--sobre-marca); font-size: .68rem;
                       font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
                       padding: .55rem .4rem; border: 1px solid var(--borde-2); text-align: center; }
.hoja-territorial th.t-meta { background: var(--acento); color: var(--sobre-acento, #0f172a); }
.hoja-territorial td { padding: .3rem .45rem; border: 1px solid #9ca3af; text-align: center;
                       vertical-align: middle; color: var(--texto); }
.hoja-territorial td.b0 { background: #d9ead3; }
.hoja-territorial td.b1 { background: #e2e2e2; }
.hoja-territorial tr.ini-distrito > td { border-top: 2px solid #111827; }
.hoja-territorial td.c-distrito { font-size: 1.5rem; font-weight: 800; }
.hoja-territorial td.c-zona, .hoja-territorial td.c-sec { font-weight: 700; white-space: nowrap; }
.hoja-territorial td.c-coord small { display: block; font-size: .72rem; }
/* Auxiliares de zona, bajo quien la coordina */
.hoja-territorial td.c-coord small.av-aux { color: var(--texto-2); }
.av-auxiliares { margin: 0; padding: .1rem .75rem .5rem; border-bottom: 1px solid var(--borde); }
.av-zona .av-auxiliares small.av-aux { color: var(--texto-2); font-size: .76rem; }
.hoja-territorial td.num { text-align: right; white-space: nowrap; }
.hoja-territorial td.c-avance { white-space: nowrap; min-width: 3.4rem; }
.hoja-territorial .vacante { color: var(--gris); font-style: italic; }
.hoja-barra { display: block; height: 3px; margin-top: 2px; background: #fff; border-radius: 2px;
              overflow: hidden; }
.hoja-barra i { display: block; height: 100%; background: var(--azul); }
.hoja-territorial tfoot td { border: 0; padding: .45rem; }
.hoja-territorial tfoot td.total-rotulo { text-align: right; font-weight: 800;
                                          text-transform: uppercase; letter-spacing: .04em; }
.hoja-territorial tfoot td.total { background: #1f2937; color: #fff; font-weight: 700; }
.lideres-cifras b small { font-size: .8rem; font-weight: 600; color: var(--gris);
                          letter-spacing: 0; }
.como-se-calcula { margin: 1rem 0; font-size: .85rem; }
.como-se-calcula summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; }
.como-se-calcula p { margin: .4rem 0 0; color: var(--texto-2); }
.avance-fichas { display: none; }
.av-distrito { margin: 1rem 0; }
.av-distrito > header { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.av-distrito h3 { margin: 0; font-size: 1.05rem; color: var(--azul); }
.av-suma { margin: .15rem 0 .6rem; font-size: .8rem; color: var(--texto-2); }
.av-zona { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
           box-shadow: var(--sombra-1); margin-bottom: .7rem; overflow: hidden; }
.av-zona > header { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem;
                    background: #f1f5f9; border-bottom: 1px solid var(--borde); font-size: .875rem; }
.av-zona > header .muted { min-width: 0; overflow-wrap: anywhere; font-size: .8rem; }
.av-zona ul { list-style: none; margin: 0; padding: 0; }
.av-zona li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto 2.6rem;
              gap: .5rem; align-items: center; padding: .5rem .75rem;
              border-bottom: 1px solid var(--borde); font-size: .82rem; }
.av-zona li:last-child { border-bottom: 0; }
.av-zona small { display: block; font-size: .72rem; color: var(--gris); }
.av-cab { min-width: 0; overflow-wrap: anywhere; }
.av-num { text-align: right; white-space: nowrap; }
.av-pct { margin-left: auto; font-weight: 700; text-align: right; color: var(--azul); }
@media (max-width: 760px) {
  .hoja-scroll { display: none; }
  .avance-fichas { display: block; }
}

/* ── Personas: corregir y eliminar ── */
.btn.peligro { color: #b91c1c; border-color: #fecaca; background: #fff; }
.btn.peligro:hover { background: #fef2f2; border-color: #f87171; }
.btn.mini.peligro { padding-inline: .55rem; }
td.acciones-fila { white-space: nowrap; }
input.mayusculas { text-transform: uppercase; }
#dlg-persona .fila { flex-wrap: wrap; }
#dlg-persona .fila label { min-width: 8.5rem; }
#dlg-persona fieldset { margin: .9rem 0; }
#dlg-persona .acciones { align-items: center; }
.mas-datos { margin: .8rem 0 .2rem; font-size: .875rem; }
.mas-datos summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; }
/* Comunidades de la sección: la lista para elegir va encima del campo */
#persona-comunidades, #sel-comunidad { margin-bottom: .35rem; }
#persona-comunidades[hidden], #sel-comunidad[hidden] { display: none; }
/* «Responde a»: qué hace el cambio para quien ocupa un cargo */
#persona-responsable-nota { display: block; margin-top: .3rem; font-size: .78rem; font-weight: 400;
  line-height: 1.4; }
#persona-responsable-nota[hidden] { display: none; }
/* «¿La ocupa o le responde?»: dos opciones grandes, cada una dice lo que hace */
#dlg-que-lugar { width: min(94vw, 460px); }
#dlg-que-lugar > p { margin: 0; }
.opciones-lugar { display: grid; gap: .6rem; margin-top: .9rem; }
/* Una sola columna a todo lo ancho: sin esto el botón (que centra su contenido)
   dejaba el texto corto en medio y el largo a la izquierda */
.opciones-lugar .btn { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start;
  gap: .15rem; width: 100%; padding: .7rem .9rem; text-align: left; white-space: normal; }
.opciones-lugar .btn small { font-weight: 400; font-size: .8rem; line-height: 1.35; opacity: .9; }
/* El botón es grid: «hidden» solo no lo esconde */
.opciones-lugar .btn[hidden] { display: none; }
/* En el teléfono los tres botones no caben en un renglón: Eliminar baja a uno propio */
#dlg-persona .acciones { flex-wrap: wrap; }
@media (max-width: 520px) {
  #dlg-persona .acciones .espaciador { display: none; }
  #dlg-persona .acciones .btn { flex: 1; justify-content: center; }
  #btn-eliminar-persona { order: 2; flex-basis: 100%; }
  #btn-eliminar-persona[hidden] { display: none; }
}

/* ── Histórico electoral ── */
/* Las rejillas de abajo llevan display propio, que le gana a [hidden] */
.hist [hidden] { display: none !important; }
.hist-pestanas { display: inline-flex; gap: .25rem; padding: .25rem; margin: .7rem 0 .1rem;
  background: #e3e9f1; border-radius: 999px; max-width: 100%; }
.hist-pestana { border: 0; background: transparent; padding: .45rem 1.05rem; border-radius: 999px;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--texto-2); cursor: pointer;
  transition: background var(--transicion), color var(--transicion); }
.hist-pestana.activa { background: var(--blanco); color: var(--azul); box-shadow: var(--sombra-1); }
.hist-pestana:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px; }

/* Una candidatura: cuadro del color del partido que más le aportó y sus siglas */
.hist-chip { display: inline-flex; align-items: center; gap: .38rem; font-weight: 600;
  font-size: .85rem; line-height: 1.25; }
.hist-chip i { width: .7rem; height: .7rem; border-radius: 3px; flex: none; }
.hist-gano { margin: .9rem 0 0; }
.hist-barras { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .6rem; }
.hist-barra-cab { display: flex; justify-content: space-between; align-items: baseline;
  gap: .3rem .8rem; flex-wrap: wrap; }
.hist-barra-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-barra { height: 8px; margin-top: .25rem; background: #edf1f6; border-radius: 4px; overflow: hidden; }
.hist-barra i { display: block; height: 100%; border-radius: 4px; }
.hist-barras small { display: block; margin-top: .2rem; font-size: .75rem; }
.hist-fuente { margin-top: .9rem; }
.hist-fuente a { color: var(--azul-claro); }

/* Lista por sección: una rejilla por renglón; se abre para ver el detalle */
.hist-lista { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); overflow: hidden; }
.hist-cab, .hist-fila > summary { display: grid; align-items: center; gap: .75rem; padding: .6rem 1rem;
  grid-template-columns: 6.5rem 6.5rem 5.5rem 6.5rem minmax(0, 1.25fr) minmax(0, 1fr) 5.2rem; }
.hist-cab { background: #f8fafc; border-bottom: 1px solid var(--borde); color: var(--gris);
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hist-fila { border-bottom: 1px solid var(--borde); }
.hist-fila:last-child { border-bottom: 0; }
.hist-fila > summary { cursor: pointer; list-style: none; font-size: .9rem; }
.hist-fila > summary::-webkit-details-marker { display: none; }
.hist-fila > summary:hover { background: #f8fafc; }
.hist-fila > summary:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: -2px; }
.hist-fila[open] > summary { background: #f1f5f9; }
.h-sec { font-size: 1rem; color: var(--texto); }
.hist-nota { display: block; font-size: .68rem; font-weight: 600; color: #92400e; }
.h-dato { font-variant-numeric: tabular-nums; }
.h-uno, .h-dos { min-width: 0; }
.h-dos { color: var(--texto-2); }
.hist-detalle { padding: .1rem 1rem 1rem; background: #fbfcfe; border-top: 1px solid var(--borde); }
.hist-detalle .hist-barras { max-width: 36rem; }
.hist-detalle p { margin: .7rem 0 0; }

/* Comparar años: una columna por elección */
.hist-comp-fila { display: grid; align-items: start; gap: .75rem; padding: .65rem 1rem;
  grid-template-columns: 6.5rem repeat(var(--cols, 3), minmax(0, 1fr));
  border-bottom: 1px solid var(--borde); font-size: .9rem; }
.hist-comp-fila:last-child { border-bottom: 0; }
.hist-comp-fila.total { background: #f1f5f9; }
.hc-celda { display: grid; gap: .12rem; min-width: 0; }
.hc-celda small { font-size: .75rem; }
.hc-anio { display: none; }
.hc-gano { color: #166534; font-weight: 700; }

/* Con el menú al lado, las siete columnas no caben hasta que la pantalla es
   ancha; antes de eso cada sección es una ficha (también en el teléfono). */
@media (max-width: 1180px) {
  /* Solo el encabezado de la lista: el de comparar años sigue hasta el teléfono */
  .hist-cab:not(.hist-comp-fila) { display: none; }
  .hist-fila > summary { gap: .35rem .6rem; padding: .75rem .85rem; align-items: start;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "sec uno uno uno" "ln votos part vent" "dos dos dos dos"; }
  .hist-fila .h-sec { grid-area: sec; }
  .hist-fila .h-uno { grid-area: uno; text-align: right; }
  .hist-fila .h-dos { grid-area: dos; font-size: .82rem; }
  .hist-fila .h-dos:empty { display: none; }
  .hist-fila .h-ln { grid-area: ln; }
  .hist-fila .h-votos { grid-area: votos; }
  .hist-fila .h-part { grid-area: part; }
  .hist-fila .h-vent { grid-area: vent; }
  .hist-fila .h-dato::before { content: attr(data-t); display: block; font-size: .66rem;
    font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: .03em; }
  .hist-fila .h-dos::before { content: "2.º lugar: "; color: var(--gris); }
}
@media (max-width: 760px) {
  .hist-pestanas { display: flex; }
  .hist-pestana { flex: 1; padding-inline: .5rem; }
  .hist-comp-fila { grid-template-columns: minmax(0, 1fr); gap: .45rem; padding: .75rem .85rem; }
  .hist-comp-fila.hist-cab { display: none; }
  .hc-celda { grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: .5rem; }
  .hc-anio { display: block; grid-row: 1 / span 3; font-weight: 700; color: var(--gris);
    font-variant-numeric: tabular-nums; }
  .hc-celda > :not(.hc-anio) { grid-column: 2; }
  .hist .filtros select { flex: 1 1 100%; }
}

/* Comparar muchas elecciones (ayuntamientos: de 1995 a hoy): cada año conserva
   un ancho legible y la lista se desliza dentro de su caja */
#hist-sel-desde[hidden] { display: none; }
#hist-comparativo { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 761px) {
  #hist-comparativo .hist-comp-fila { min-width: calc(6.5rem + var(--cols, 3) * 8.6rem + (var(--cols, 3) * .75rem)); }
}

/* Quién encabezó la candidatura */
.hist-cand { font-size: .85rem; color: var(--texto-2); }
.hc-celda .hist-cand { font-size: .78rem; }

/* Casillas de una sección, dentro de su detalle */
.hist-cas-titulo { margin: 1.1rem 0 .45rem; font-size: .95rem; color: var(--texto); }
.hist-cas-titulo .muted { font-weight: 500; }
.hist-cas { border: 1px solid var(--borde); border-radius: var(--r-sm); background: var(--blanco);
  overflow: hidden; }
.hist-cas > p { margin: .6rem .8rem; }
.hist-cas-cab, .hist-cas-fila { display: grid; gap: .6rem; align-items: center; padding: .5rem .8rem;
  grid-template-columns: 11rem 6rem 4.5rem 6rem minmax(0, 1fr) 10rem; }
.hist-cas-cab { background: #f8fafc; border-bottom: 1px solid var(--borde); color: var(--gris);
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hist-cas-fila { border-bottom: 1px solid var(--borde); font-size: .875rem; }
.hist-cas-fila:last-of-type { border-bottom: 0; }
.hist-cas-fila.vacia { background: #fffbeb; }
.c-nom small.muted { font-weight: 500; }
.c-lug { display: flex; flex-wrap: wrap; gap: .2rem .9rem; min-width: 0; }
.c-lugar { white-space: nowrap; }
.c-acta { display: grid; gap: .1rem; font-size: .8rem; min-width: 0; }
.c-acta a { color: var(--azul-claro); font-weight: 600; }
@media (max-width: 1180px) {
  .hist-cas-cab { display: none; }
  .hist-cas-fila { gap: .3rem .6rem; align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "nom nom acta" "ln votos part" "lug lug lug"; }
  .hist-cas-fila .c-nom { grid-area: nom; }
  .hist-cas-fila .c-acta { grid-area: acta; text-align: right; }
  .hist-cas-fila .c-ln { grid-area: ln; }
  .hist-cas-fila .c-votos { grid-area: votos; }
  .hist-cas-fila .c-part { grid-area: part; }
  .hist-cas-fila .c-lug { grid-area: lug; }
  .hist-detalle { padding-inline: .7rem; }
}
/* Panel › Secciones: bajo el número van el tipo y la lista nominal; las
   casillas, con su desglose abreviado */
#tabla-estrategia td small { display: block; font-size: .72rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
#secciones-casillas-nota a { color: var(--azul-claro); }
/* Son doce columnas: se aprietan los márgenes para que en un monitor grande
   quepa sin deslizarse */
#tabla-estrategia th, #tabla-estrategia td { padding-inline: .6rem; }
#tabla-estrategia input.mini.ancha { max-width: 8.5rem; }
/* Meta de personas: el número y, debajo, de dónde salió (el sistema o a mano) */
#tabla-estrategia td.c-meta { min-width: 7.5rem; max-width: 11.5rem; }
#tabla-estrategia .meta-info small { white-space: normal; line-height: 1.3; margin-top: .15rem; }
#tabla-estrategia .meta-info .btn { margin-top: .3rem; white-space: nowrap; }
#tabla-estrategia .meta-num { font-size: 1rem; color: var(--azul); }
#tabla-estrategia small.meta-origen { font-weight: 600; }
#tabla-estrategia small.meta-origen.sistema { color: #166534; }
#tabla-estrategia small.meta-origen.mano { color: #92400e; }
/* La puso el sistema, pero hoy pediría otra: se pone con «Recalcular» */
#tabla-estrategia small.meta-vieja { color: #92400e; font-weight: 600; }
/* Guardar ocupa el ancho de su celda */
#tabla-estrategia td.c-acciones .btn { display: flex; width: 100%; justify-content: center;
  white-space: nowrap; }
#tabla-estrategia td.c-acciones .btn + .btn { margin-top: .3rem; }
#tabla-estrategia .btn .ico { width: 14px; height: 14px; }
/* El plano de la sección va junto a su número: al final del renglón no se veía */
#tabla-estrategia td.c-sec .plano-sec { display: inline-flex; margin-top: .35rem; white-space: nowrap; }
/* Resumen: personas registradas contra la meta de personas */
.meta-avance { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); padding: .85rem 1.15rem; margin: 1rem 0 0; }
.meta-avance p { margin: 0 0 .45rem; font-size: .95rem; }
.meta-avance p b { font-size: 1.15rem; color: var(--azul); }
.meta-avance .avance-barra { width: 100%; height: 8px; margin: 0; }
/* Avance de la sección: una barra delgada bajo el número */
.avance-barra { width: 4.5rem; height: 6px; border-radius: 999px; background: #e2e8f0;
  overflow: hidden; margin-bottom: .2rem; }
.avance-barra > div { height: 100%; border-radius: 999px; background: var(--azul-claro); }
.avance-num { font-size: .8rem; font-weight: 700; color: var(--texto-2); }
/* Arriba de la tabla: de dónde sale la meta de personas */
.metas-regla { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); padding: 1rem 1.15rem; margin: 1rem 0 1.25rem; }
.metas-regla h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--texto); }
.metas-regla p { margin: .45rem 0 0; font-size: .875rem; }
.metas-regla .metas-formula { font-size: .95rem; color: var(--texto); }
.metas-regla .metas-formula b { color: var(--azul); }
.metas-regla .aviso-ok { margin: .6rem 0 0; }
.metas-regla details { margin-top: .6rem; font-size: .85rem; }
.metas-regla summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; }
.metas-regla details p { color: var(--texto-2); }
.metas-regla a { color: var(--azul-claro); font-weight: 600; }
.metas-control { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: .7rem; }
.metas-control label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem;
  font-weight: 600; color: var(--texto-2); }
.metas-control input { width: 5.5rem; padding: .35rem .55rem; }
.metas-pendientes p { margin: 0 0 .5rem; }
.metas-cambios { list-style: none; margin: .2rem 0 .7rem; padding: 0; display: grid; gap: .25rem .9rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); font-size: .85rem; }
.metas-cambios li { display: flex; gap: .45rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.metas-confirmar p { margin: 0 0 .5rem; font-weight: 600; }
.metas-confirmar .btn + .btn { margin-left: .4rem; }
/* Cada sección es una tarjeta, en cualquier ancho: arriba el número; luego la
   meta, el avance, personas, líderes y casillas; luego comunidades, manzanas,
   viviendas, prioridad y notas; abajo Guardar (el plano va junto al número).
   Antes era tabla de doce columnas en pantallas anchas y se cortaba a la
   derecha (el usuario, 15-oct-2026: «salen cortadas… que no se vea como hojas
   de Excel»). El bloque del teléfono (abajo) la deja en tres por renglón. */
.tabla-scroll:has(> #tabla-estrategia) { container-type: inline-size; }
@media all {
  #tabla-estrategia, #tabla-estrategia tbody { display: block; }
  #tabla-estrategia thead { display: none; }
  #tabla-estrategia tr { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--borde); }
  #tabla-estrategia tbody tr:last-child { border-bottom: 0; }
  .tabla-scroll > #tabla-estrategia td,
  #tabla-estrategia td { display: block; padding: 0; border: 0; min-width: 0; max-width: none;
    position: static; box-shadow: none; background: none; white-space: normal; font-size: .85rem;
    order: 5; }
  #tabla-estrategia td[data-t]::before { content: attr(data-t); display: block; margin-bottom: .1rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
  #tabla-estrategia td.c-sec { grid-column: 1 / -1; order: 0; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: .2rem .6rem; font-size: 1.05rem; }
  #tabla-estrategia td.c-sec::before { display: none; }
  #tabla-estrategia td.c-sec small { display: inline; }
  #tabla-estrategia td.c-sec .plano-sec { margin: 0 0 0 auto; align-self: center; }
  #tabla-estrategia td.c-meta { grid-column: span 2; order: 1; }
  #tabla-estrategia td.c-avance { order: 2; }
  #tabla-estrategia td[data-t="Personas"] { order: 3; }
  #tabla-estrategia td[data-t="Líderes"] { order: 3; }
  #tabla-estrategia td[data-t="Casillas"] { order: 3; }
  #tabla-estrategia td[data-t="Prioridad"] { order: 6; }
  #tabla-estrategia td.c-notas { grid-column: span 2; order: 6; }
  #tabla-estrategia td.c-acciones { grid-column: 1 / -1; order: 7; display: flex; flex-wrap: wrap; gap: .4rem; }
  #tabla-estrategia td.c-acciones .btn { width: auto; }
  #tabla-estrategia td.c-acciones .btn + .btn { margin-top: 0; }
  #tabla-estrategia td.c-meta input { max-width: 8rem; }
  #tabla-estrategia td[data-t="Comunidades"] .btn { white-space: normal; text-align: left; }
  #tabla-estrategia select.mini { max-width: 100%; }
  #tabla-estrategia td small { white-space: normal; }
  #tabla-estrategia input.mini.ancha { max-width: none; width: 100%; }
  #tabla-estrategia .avance-barra { width: 100%; }
}
/* Teléfono: cada sección es una ficha (el mismo HTML de la tabla). Arriba el
   número; luego la meta y su avance, que es lo que se viene a ver; los demás
   datos de tres en tres, cada uno con su rótulo */
@media (max-width: 760px) {
  #tabla-estrategia, #tabla-estrategia tbody { display: block; }
  #tabla-estrategia thead { display: none; }
  #tabla-estrategia tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem .75rem; padding: .8rem .85rem; border-bottom: 1px solid var(--borde); }
  #tabla-estrategia tbody tr:last-child { border-bottom: 0; }
  .tabla-scroll > #tabla-estrategia td,
  #tabla-estrategia td { display: block; padding: 0; border: 0; min-width: 0; max-width: none;
    position: static; box-shadow: none; background: none; white-space: normal; font-size: .85rem;
    order: 5; }
  #tabla-estrategia td[data-t]::before { content: attr(data-t); display: block; margin-bottom: .1rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
  #tabla-estrategia td.c-sec { grid-column: 1 / -1; order: 0; display: flex; flex-wrap: wrap;
    align-items: baseline; gap: .2rem .6rem; font-size: 1.05rem; }
  #tabla-estrategia td.c-sec::before { display: none; }
  #tabla-estrategia td.c-sec small { display: inline; }
  #tabla-estrategia td.c-sec .plano-sec { margin: 0 0 0 auto; align-self: center; }
  #tabla-estrategia td.c-meta { grid-column: span 2; order: 1; }
  #tabla-estrategia td.c-avance { order: 2; }
  #tabla-estrategia td[data-t="Personas"] { order: 3; }
  #tabla-estrategia td[data-t="Líderes"] { order: 3; }
  #tabla-estrategia td[data-t="Casillas"] { order: 3; }
  #tabla-estrategia td[data-t="Prioridad"] { order: 6; }
  #tabla-estrategia td.c-notas { grid-column: span 2; order: 6; }
  #tabla-estrategia td.c-acciones { grid-column: 1 / -1; order: 7; display: flex; flex-wrap: wrap; gap: .4rem; }
  #tabla-estrategia td.c-acciones .btn { width: auto; }
  #tabla-estrategia td.c-acciones .btn + .btn { margin-top: 0; }
  #tabla-estrategia td.c-meta input { max-width: 8rem; }
  #tabla-estrategia td[data-t="Comunidades"] .btn { white-space: normal; text-align: left; }
  #tabla-estrategia select.mini { max-width: 100%; }
  #tabla-estrategia td small { white-space: normal; }
  #tabla-estrategia input.mini.ancha { max-width: none; width: 100%; }
  .avance-barra { width: 100%; }
  .metas-control label { width: 100%; }
}
.meta-casillas { list-style: none; margin: .6rem 0 0; padding: 0; border: 1px solid var(--borde);
  border-radius: var(--r-sm); overflow: hidden; }
.meta-casillas li { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .55rem .8rem; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.meta-casillas li:last-child { border-bottom: 0; }
.meta-casillas small { display: block; font-size: .75rem; }
.meta-casillas .mc-meta { text-align: right; white-space: nowrap; }
.meta-casillas .mc-meta b { color: var(--azul); font-size: 1.1rem; }
.meta-holgada { color: #166534; font-weight: 600; }
.meta-justa { color: #92400e; font-weight: 600; }
.meta-corta { color: #b91c1c; font-weight: 700; }

/* ── Escenarios y alianzas ── */
.esc [hidden] { display: none !important; }
.esc-barra select { flex: 1 1 16rem; max-width: 30rem; }
.esc-estado { font-size: .8rem; font-weight: 600; color: #166534; }
.esc-estado.pendiente { color: #92400e; }
.btn.apagado { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Resultado: titular, cifras y una barra por candidatura, partida por origen del voto */
.esc-resultado { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); padding: 1rem 1.15rem; margin: .4rem 0 1rem; }
.esc-resultado > p { margin: .8rem 0 0; }
.esc-resultado > p.esc-titular { margin: 0 0 .9rem; padding: .7rem .9rem; border-radius: var(--r-sm);
  font-size: 1rem; line-height: 1.4; border-left: 4px solid var(--gris); background: #f8fafc; }
.esc-resultado > p.esc-titular.gana { background: #f0fdf4; border-left-color: var(--verde); color: #14532d; }
.esc-resultado > p.esc-titular.pierde { background: #fffbeb; border-left-color: var(--amarillo); color: #713f12; }
.esc-titular .muted { color: inherit; opacity: .75; font-size: inherit; }
.esc-barras li.nuestra { margin-inline: -.5rem; padding: .45rem .5rem; border-radius: var(--r-sm);
  background: #f1f5f9; }
.esc-marca-nuestra { display: inline-block; padding: .02rem .45rem; border-radius: 999px;
  background: var(--azul); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; }
.esc-pila { display: flex; height: 12px; margin-top: .3rem; background: #edf1f6; border-radius: 4px;
  overflow: hidden; }
.esc-pila i, .esc-leyenda i { --c: #64748b; display: block; height: 100%; }
.p-marca { background: var(--c); }
.p-persona { background: color-mix(in srgb, var(--c) 55%, #fff); }
.p-sin_dueno { background: repeating-linear-gradient(135deg, var(--c) 0 3px,
  color-mix(in srgb, var(--c) 28%, #fff) 3px 6px); }
.p-estructura { background: #0f172a; }
.p-variables { background: #94a3b8; }
.esc-leyenda { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .75rem; color: var(--texto-2); }
.esc-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.esc-leyenda i { width: 1.1rem; height: .6rem; border-radius: 2px; }

/* Variables: grupos que se abren, y una ficha por candidatura o por persona */
.esc-grupo { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); margin: .8rem 0; }
.esc-grupo > summary { cursor: pointer; padding: .8rem 1.15rem; font-weight: 700; color: var(--texto);
  font-size: 1rem; }
.esc-grupo > summary:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: -2px;
  border-radius: var(--r); }
.esc-grupo > :not(summary) { margin-inline: 1.15rem; }
.esc-grupo > p { margin-top: 0; }
.esc-grupo > :last-child { margin-bottom: 1.1rem; }
.esc-lista { display: grid; gap: .7rem; }
.esc-ficha { border: 1px solid var(--borde); border-radius: var(--r-sm); padding: .8rem .9rem;
  background: #fbfcfe; min-width: 0; }
.esc-ficha.nuestra { border-color: var(--azul); box-shadow: inset 4px 0 0 var(--azul); }
.esc-ficha > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .4rem .8rem; }
.esc-ficha > header > div { min-width: 0; overflow-wrap: anywhere; }
.esc-votos { font-size: .85rem; color: var(--texto-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.esc-partidos { display: flex; flex-wrap: wrap; gap: .35rem; }
.esc-partido { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .55rem;
  border: 1.5px solid var(--c, var(--borde-2)); border-radius: 999px; background: var(--blanco);
  font-size: .8rem; font-weight: 700; color: var(--texto); }
.esc-partido::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--c, var(--gris)); }
.esc-quitar-partido { display: inline-flex; border: 0; background: transparent; padding: .1rem; margin: 0 -.2rem 0 0;
  color: var(--gris); cursor: pointer; border-radius: 50%; }
.esc-quitar-partido:hover { color: #b91c1c; background: #fef2f2; }
.esc-quitar-partido .ico { width: .8rem; height: .8rem; }
.esc-nuestra { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .85rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; }
.esc-nuestra input { width: auto; margin: 0; accent-color: var(--azul); }
.esc-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .7rem 1rem; margin-top: .7rem; align-items: start; }
.esc-campos label { margin: 0; min-width: 0; }
.esc-campos small { display: block; margin-top: .25rem; font-size: .75rem; line-height: 1.35; font-weight: 400; }
/* Quién encabeza la nuestra: sale de la ficha de la candidata; se ve, no se escribe */
.esc-campos input[readonly] { background: #f1f5f9; border-color: var(--borde); color: var(--texto); cursor: default; }
.esc-campos input[readonly]:hover { border-color: var(--borde); }
.esc-de-la-ficha a { color: var(--azul-claro); font-weight: 600; }
.esc-deslizador { display: flex; align-items: center; gap: .6rem; margin-top: .3rem; }
/* El deslizador se dibuja a mano: el del navegador cambia de color según la
   marca de la campaña y a veces sale con el riel oscuro */
.esc-deslizador input[type="range"] { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0;
  background: transparent; box-shadow: none; height: 2rem; cursor: pointer;
  -webkit-appearance: none; appearance: none; }
.esc-deslizador input[type="range"]:focus { box-shadow: none; }
.esc-deslizador input[type="range"]:focus-visible { outline: 2px solid var(--azul-vivo); outline-offset: 2px;
  border-radius: var(--r-sm); }
.esc-deslizador input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px;
  background: var(--borde-2); }
.esc-deslizador input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px;
  background: var(--borde-2); }
.esc-deslizador input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px;
  height: 22px; margin-top: -8px; border-radius: 50%; background: var(--azul); border: 3px solid #fff;
  box-shadow: 0 1px 3px rgb(15 23 42 / .35); }
.esc-deslizador input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%;
  background: var(--azul); border: 3px solid #fff; box-shadow: 0 1px 3px rgb(15 23 42 / .35); }
.esc-deslizador output { min-width: 3.6rem; text-align: right; font-weight: 700; color: var(--azul);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.esc-pistas { margin: .6rem 0 0; padding: .55rem .7rem .55rem 1.7rem; background: #f1f5f9;
  border-radius: var(--r-sm); font-size: .8rem; color: var(--texto-2); }
.esc-pistas li + li { margin-top: .3rem; }
.esc-enlace { border: 0; background: none; padding: 0; font: inherit; color: var(--azul-claro);
  text-decoration: underline; cursor: pointer; }
/* Aviso de que hay porcentajes puestos a mano y no por el sistema */
.esc-a-mano { margin: 0 0 .7rem; padding: .55rem .7rem; border: 1px solid #f5d9a8; border-left-width: 3px;
  border-radius: var(--r-sm); background: #fffaf0; font-size: .85rem; color: var(--texto-2);
  overflow-wrap: anywhere; }
.esc-a-mano[hidden] { display: none; }
.esc-a-mano .esc-enlace { font-weight: 600; white-space: nowrap; }
.esc-pie { display: flex; justify-content: flex-end; margin-top: .6rem; }
.esc-acciones { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; }
.esc-acciones select { width: auto; flex: 1 1 14rem; max-width: 24rem; margin: 0; }
.esc-chicos { border-top: 1px dashed var(--borde-2); padding-top: .6rem; }
.esc-chicos > summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; font-size: .875rem; }
.esc-chicos .esc-ficha { margin-top: .6rem; }
.esc-libre { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 8rem auto; gap: .6rem;
  align-items: end; padding: .7rem .8rem; border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: #fbfcfe; }
.esc-libre label { margin: 0; min-width: 0; }

/* Alianzas: un renglón por partido, por persona o por pareja de rivales */
.esc-alianzas { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); overflow: hidden; }
.esc-alianzas > p { margin: .8rem 1rem; }
.esc-alianza { display: grid; grid-template-columns: minmax(0, 15rem) 7.5rem minmax(0, 1fr) auto;
  gap: .4rem 1rem; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--borde);
  font-size: .9rem; }
.esc-alianza:last-child { border-bottom: 0; }
.esc-alianza.gana { box-shadow: inset 4px 0 0 var(--verde); }
.esc-alianza.amenaza { box-shadow: inset 4px 0 0 var(--amarillo); }
.esc-al-quien, .esc-al-aporta { display: grid; gap: .1rem; min-width: 0; }
.esc-al-quien small, .esc-al-aporta small { font-size: .75rem; }
.esc-al-aporta b { font-size: 1.15rem; color: var(--azul); font-variant-numeric: tabular-nums; }
.esc-al-queda { min-width: 0; color: var(--texto-2); }
/* Con una estructura supuesta, las alianzas van con lo registrado hoy (escenarios-6) */
.esc-al-base { margin: .2rem 0 .9rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: #f8fafc;
  border: 1px solid var(--borde); font-size: .875rem; line-height: 1.45; color: var(--texto-2); }
/* Su apoyo supone que su grupo político se parte: va al final, sin el verde de «ganaría» */
.esc-alianza.por-grupo { box-shadow: inset 4px 0 0 var(--gris); background: #fafbfc; }
.esc-alianza .esc-por-grupo { font-size: .85rem; line-height: 1.4; }
/* Debajo de la lista de escenarios, el nombre completo: solo en el teléfono,
   donde la lista lo corta */
.esc-elegido, .plan-elegido { margin: .3rem 0 .6rem; font-size: .85rem; line-height: 1.4; }
@media (min-width: 761px) { .esc-elegido, .plan-elegido { display: none; } }

/* Metas: lo que pide el escenario en todo el municipio, a dónde ir para verlo
   sección por sección y las dos descargas. La lista por sección se quitó
   (2026-10-14): vive en Estrategia para ganar y en Secciones › «Por casilla». */
.esc-metas { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); padding: 1rem 1.15rem 1.1rem; margin: .8rem 0; min-width: 0; }
.esc-metas h3 { margin: 0 0 .7rem; font-size: 1rem; color: var(--texto); }
.esc-metas p { margin: .7rem 0 0; max-width: 64rem; font-size: .875rem; line-height: 1.5; }
.esc-metas h3 + p { margin-top: 0; }
.esc-metas .lideres-cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  max-width: 38rem; }
.esc-metas .lideres-cifras b small { display: block; margin-top: .2rem; line-height: 1.3; }
.esc-metas .como-se-calcula { margin: .7rem 0 0; }
.esc-metas .esc-acciones { margin-top: .8rem; }
.esc-metas p:empty { display: none; }
.esc-metas-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  column-gap: .8rem; }
/* El escenario de trabajo y las metas de Secciones: qué cambió al guardarlo */
#esc-metas-aviso { flex-basis: 100%; margin: .4rem 0 0; }
.esc-titular .esc-supuesto { display: block; margin-top: .3rem; font-size: .85rem; font-weight: 600; }

/* El escenario de trabajo, los pasos y la explicación de cada persona */
.esc-trabajo { display: flex; align-items: flex-start; gap: .5rem; flex-basis: 100%; margin: .2rem 0 0;
  font-size: .85rem; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.esc-trabajo input { width: auto; margin: .2rem 0 0; accent-color: var(--azul); }
.esc-trabajo.apagado { color: var(--gris); cursor: default; }
.esc-pasos { margin: .9rem 0 .3rem; padding-left: 1.3rem; font-size: .9rem; color: var(--texto-2); }
.esc-pasos li + li { margin-top: .2rem; }
.esc-efecto { margin: .6rem 0 0; padding: .55rem .7rem; background: #f1f5f9; border-radius: var(--r-sm);
  font-size: .85rem; line-height: 1.45; color: var(--texto-2); }
/* Lo que hace su grupo político con su gente (regla escenarios-5): en su propio renglón */
.esc-por-grupo { display: block; margin-bottom: .3rem; color: var(--texto); }
.esc-ajuste { margin-top: .5rem; font-size: .875rem; }
.esc-ajuste > summary { cursor: pointer; color: var(--azul-claro); font-weight: 600; font-size: .82rem; }
.esc-ajuste .esc-pistas { background: transparent; padding-left: 1.2rem; padding-right: 0; }
.esc-tocado { display: inline-block; margin-left: .35rem; padding: .02rem .45rem; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: .68rem; font-weight: 700; }
.esc-resultado > p.esc-meta-nota { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: var(--r-sm);
  background: #f8fafc; border: 1px solid var(--borde); font-size: .875rem; color: var(--texto-2); }

/* Cómo queda la nuestra, fijo abajo mientras el resultado no está a la vista */
.esc { padding-bottom: 4.5rem; }
.esc-flotante { position: fixed; right: 1rem; bottom: .9rem; z-index: 30; display: grid; gap: .1rem;
  max-width: min(44rem, calc(100vw - 1.5rem)); padding: .55rem .95rem; border-radius: var(--r);
  background: #0f172a; color: #fff; box-shadow: var(--sombra-3); font-size: .85rem; line-height: 1.35; }
.esc-flotante small { color: #cbd5e1; font-size: .75rem; }

@media (max-width: 760px) {
  .esc .hist-pestanas { display: flex; }
  .esc-barra select { flex-basis: 100%; max-width: none; }
  .esc-barra .btn { flex: 1; white-space: nowrap; padding-inline: .5rem; }
  .esc-flotante { left: .75rem; right: .75rem; bottom: .6rem; max-width: none; }
  .esc-barra .espaciador { display: none; }
  .esc-estado { flex-basis: 100%; }
  .esc-grupo > summary { padding-inline: .85rem; }
  .esc-grupo > :not(summary) { margin-inline: .85rem; }
  .esc-libre { grid-template-columns: minmax(0, 1fr); }
  .esc-alianza { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "quien aporta" "queda queda" "accion accion"; align-items: start; }
  .esc-al-quien { grid-area: quien; }
  .esc-al-aporta { grid-area: aporta; text-align: right; }
  .esc-al-queda { grid-area: queda; }
  .esc-al-accion { grid-area: accion; }
  .esc-al-accion .btn { width: 100%; }
  .esc-acciones select, .esc-acciones .btn { flex: 1 1 100%; max-width: none; }
  .esc-metas { padding-inline: .85rem; }
}

/* ── Estrategia para ganar ──
   Un documento: bloques numerados, uno debajo del otro, pensados para leerse
   en el teléfono y para imprimirse. */
.plan [hidden] { display: none !important; }
.plan-intro { max-width: 54rem; }
.plan-barra { align-items: flex-end; }
.plan-barra label { display: grid; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--texto-2); }
.plan-barra #plan-escenario { min-width: 15rem; max-width: 26rem; }
.plan-bloque { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); padding: 1.1rem 1.25rem 1.25rem; margin: 1rem 0; }
.plan-bloque > h3 { margin: 0 0 .85rem; font-size: 1.08rem; color: var(--texto); }
.plan-bloque h4 { margin: 1.15rem 0 .5rem; font-size: .92rem; color: var(--texto); }
.plan-bloque p { margin: .8rem 0 0; font-size: .9rem; line-height: 1.55; }
.plan-bloque > h3 + p { margin-top: 0; }

/* La tesis: quién, y la estrategia en cinco líneas */
.plan-tesis { border-left: 4px solid var(--azul); }
.plan-bloque p.plan-ante { margin: 0 0 .7rem; display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .25rem .6rem; font-size: 1rem; }
.plan-lineas { list-style: none; counter-reset: linea; margin: 0; padding: 0; display: grid; gap: .7rem; }
.plan-lineas li { counter-increment: linea; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .75rem; align-items: start; font-size: .95rem; line-height: 1.5; color: var(--texto); }
.plan-lineas li::before { content: counter(linea); display: grid; place-items: center; width: 1.7rem;
  height: 1.7rem; border-radius: 50%; background: var(--azul); color: var(--sobre-marca);
  font-size: .8rem; font-weight: 700; }

/* La cuenta. Bajo cada cifra, su aclaración en renglón aparte: en el teléfono
   una frase al lado del número se partía a la mitad */
.plan .lideres-cifras b small { display: block; margin-top: .15rem; line-height: 1.3; }
.plan-rivales { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin-top: .8rem; }
.plan-rivales > span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .45rem;
  max-width: 100%; padding: .3rem .65rem; border: 1px solid var(--borde); border-radius: 999px;
  background: #f8fafc; font-size: .82rem; font-variant-numeric: tabular-nums; }
.plan-conv { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .5rem; }
.plan-conv > div { border: 1px solid var(--borde); border-radius: var(--r-sm); padding: .5rem .7rem;
  background: #f8fafc; min-width: 0; }
.plan-conv span { display: block; font-size: .72rem; color: var(--gris); }
.plan-conv b { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--texto);
  font-variant-numeric: tabular-nums; }
.plan-conv small { margin-left: .2rem; font-size: .72rem; }
.plan-conv .elegida { background: var(--blanco); border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); }
.plan-conv .elegida b { color: var(--azul); }

/* Las palancas: el número a la izquierda, lo que hay que hacer a la derecha */
.plan-palancas { display: grid; gap: .7rem; margin-top: .8rem; }
.plan-palanca { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1.1rem;
  padding: .9rem 1rem; border: 1px solid var(--borde); border-radius: var(--r-sm); background: #fbfcfe; }
.plan-num b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--azul); font-variant-numeric: tabular-nums; }
.plan-num small { display: block; margin-top: .25rem; font-size: .72rem; line-height: 1.35; color: var(--gris); }
.plan-palanca h4 { margin: 0 0 .3rem; font-size: .98rem; }
.plan-palanca p { margin: 0; }
.plan-palanca ul, .plan-tramo ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .875rem;
  line-height: 1.5; color: var(--texto-2); }
.plan-palanca li + li, .plan-tramo li + li { margin-top: .15rem; }

/* Dónde: un grupo por prioridad, y dentro una sección por renglón */
.plan-bloque p.plan-tipos { display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; font-size: .85rem;
  color: var(--texto-2); }
.plan-bloque p.plan-abrir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.plan-prioridad { margin-top: 1.15rem; }
.plan-prioridad > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .8rem;
  margin-bottom: .5rem; padding-left: .7rem; border-left: 4px solid #94a3b8; font-size: .85rem;
  line-height: 1.45; color: var(--texto-2); }
.plan-prioridad > header > b { font-size: .98rem; color: var(--texto); }
.plan-prioridad.p1 > header { border-left-color: #b91c1c; }
.plan-prioridad.p2 > header { border-left-color: var(--amarillo); }
.plan-cab, .plan-fila > summary {
  grid-template-columns: 5.5rem minmax(0, 1.25fr) minmax(0, 1.5fr) 6.5rem 7.5rem 4rem; }
.plan-fila .h-sec small, .plan-fila .h-dato small { display: block; font-size: .75rem; font-weight: 500; }
.plan-fila .h-dato > b { font-size: 1rem; }
.plan-fila .p-votos > b { font-size: 1.08rem; color: var(--azul); }
@media (max-width: 1180px) {
  .plan-fila > summary { grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "sec votos votos" "personas personas personas" "lideres sin cas"; }
  .plan-fila .p-votos { grid-area: votos; text-align: right; }
  .plan-fila .p-personas { grid-area: personas; }
  .plan-fila .p-lideres { grid-area: lideres; }
  .plan-fila .p-sin { grid-area: sin; }
  .plan-fila .p-cas { grid-area: cas; }
}

/* Estructura, calendario, jornada, alertas y avance */
.plan-mandos { list-style: none; margin: .85rem 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: .3rem 1.5rem; font-size: .9rem; }
.plan-tramos { list-style: none; margin: 0; padding: 0; }
.plan-tramo { position: relative; margin-left: .45rem; padding: 0 0 1.15rem 1.5rem;
  border-left: 2px solid var(--borde-2); }
.plan-tramo:last-child { padding-bottom: 0; border-left-color: transparent; }
.plan-tramo::before { content: ""; position: absolute; left: calc(-.4rem - 1px); top: .22rem;
  box-sizing: border-box; width: .8rem; height: .8rem; border-radius: 50%; background: var(--blanco);
  border: 2px solid var(--azul); }
.plan-tramo.jornada::before { background: var(--azul); }
.plan-fechas { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; }
.plan-fechas b { font-size: .98rem; color: var(--texto); }
.plan-tramo p { margin: .3rem 0 0; }
.plan-sin-acta { list-style: none; margin: .5rem 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .3rem 1rem; font-size: .875rem; }
.plan-alertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .7rem; }
.plan-alerta { min-width: 0; padding: .8rem .95rem; border: 1px solid #fde68a;
  border-left: 4px solid var(--amarillo); border-radius: var(--r-sm); background: #fffdf5; }
.plan-alerta h4 { margin: 0 0 .3rem; font-size: .95rem; color: #713f12; }
.plan-alerta p { margin: .35rem 0 0; font-size: .875rem; }
.plan-casos { list-style: none; margin: .35rem 0 0; padding: 0; font-size: .85rem; }
.plan-casos li { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  padding: .25rem 0; border-top: 1px solid #fde68a; }
.plan-casos li > span { min-width: 0; overflow-wrap: anywhere; }
.plan-casos .pc-num { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.plan-casos .pc-num small { display: block; font-size: .72rem; }
.plan-avance { display: grid; gap: .45rem; font-size: .9rem; }
.plan-progreso { height: 10px; background: #edf1f6; border-radius: 999px; overflow: hidden; }
.plan-progreso i { display: block; height: 100%; background: var(--azul); border-radius: 999px; }

/* La historia: quién ha ganado, a quién sigue la gente y qué conserva cada partido */
.plan-lecturas { margin: 0; padding-left: 1.1rem; display: grid; gap: .45rem; font-size: .92rem; line-height: 1.5; }
.plan-ganadores, .plan-veces { list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde);
  border-radius: var(--r-sm); overflow: hidden; }
.plan-ganadores li, .plan-veces li { display: grid; align-items: baseline; gap: .15rem .8rem;
  padding: .45rem .8rem; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.plan-ganadores li:last-child, .plan-veces li:last-child { border-bottom: 0; }
.plan-ganadores li { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
.plan-ganadores li:nth-child(even) { background: #fbfcfe; }
.pg-anio, .pv-anio { font-variant-numeric: tabular-nums; color: var(--texto); }
.pg-quien { min-width: 0; overflow-wrap: anywhere; }
.pg-votos, .pv-votos { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-figuras { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: .8rem; margin-top: .6rem; }
.plan-figura { min-width: 0; padding: .85rem .95rem; border: 1px solid var(--borde); border-radius: var(--r-sm);
  background: #fbfcfe; }
.plan-figura > header { display: grid; gap: .1rem; margin-bottom: .55rem; }
.plan-figura > header > b { font-size: 1rem; color: var(--texto); }
.plan-figura p { margin: .55rem 0 0; font-size: .875rem; }
.plan-notas { margin: 0 0 .6rem; padding: .5rem .7rem .5rem 1.7rem; font-size: .85rem; line-height: 1.5;
  background: #fffdf5; border: 1px solid #fde68a; border-radius: var(--r-sm); }
.plan-notas small { display: block; font-size: .74rem; }
.plan-veces { background: var(--blanco); }
.plan-veces li { grid-template-columns: 3rem minmax(0, 1fr) auto; grid-template-areas: "anio partido votos" "zonas zonas zonas"; }
.plan-veces li.gano { box-shadow: inset 3px 0 0 var(--verde); }
.pv-anio { grid-area: anio; }
.pv-partido { grid-area: partido; min-width: 0; overflow-wrap: anywhere; }
.pv-votos { grid-area: votos; }
.pv-zonas { grid-area: zonas; font-size: .74rem; line-height: 1.35; }
.plan-cambios { margin: .55rem 0 0; padding-left: 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--texto-2); }
.plan-bloque p.plan-suyo { padding: .5rem .7rem; border-left: 3px solid var(--azul); background: var(--blanco);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.plan-conserva { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: .4rem 1.4rem; }
.plan-conserva .plan-casos li, .plan-ajuste .plan-casos li { border-top-color: var(--borde); }
.plan-ajuste { margin-top: .5rem; }

@media (max-width: 760px) {
  .plan-bloque { padding: .95rem .9rem 1.05rem; }
  .plan-barra label { flex: 1 1 100%; }
  .plan-barra select, .plan-barra #plan-escenario { width: 100%; min-width: 0; max-width: none; }
  .plan-barra .btn { flex: 1 1 100%; }
  .plan-palanca { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .plan-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem; }
  .plan-num small { margin-top: 0; }
  .plan-lineas li { font-size: .92rem; }
  .plan-figuras, .plan-conserva { grid-template-columns: minmax(0, 1fr); }
  .plan-ganadores li { grid-template-columns: 3rem minmax(0, 1fr); }
  .plan-ganadores .pg-votos { grid-column: 2; text-align: left; white-space: normal; }
  /* Cada candidatura de una figura: el partido y quién, en su renglón; los votos, debajo.
     Con todo en una fila el partido se quedaba sin ancho y se partía letra por letra. */
  .plan-veces li { grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "anio partido" ". votos" "zonas zonas"; }
  .plan-veces .pv-votos { text-align: left; white-space: normal; }
  .plan-veces .pv-partido { overflow-wrap: break-word; }
  /* «Qué cambia en la cuenta»: el rótulo es largo; en el teléfono la cifra va debajo */
  .plan-ajuste .plan-casos li { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .plan-ajuste .plan-casos .pc-num { text-align: left; }
}

/* En papel: sin menú ni controles, con los colores, y sin partir una ficha en dos hojas */
@media print {
  body { background: #fff; }
  .contenido { padding: 0; max-width: none; }
  .plan { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan-barra, .plan-intro, .plan-abrir { display: none !important; }
  .plan-bloque, .plan .hist-lista { box-shadow: none; }
  /* La hoja es angosta, pero ahí las secciones van en tabla, un renglón cada
     una: como fichas se llevaban seis hojas */
  .plan .hist-cab:not(.hist-comp-fila) { display: grid; }
  .plan-cab, .plan-fila > summary { grid-template-areas: none; gap: .5rem; padding: .3rem .6rem;
    align-items: center; font-size: .78rem;
    grid-template-columns: 3.6rem minmax(0, 1.1fr) minmax(0, 1.45fr) 4.4rem 5.2rem 4.2rem; }
  .plan-cab { font-size: .66rem; letter-spacing: .02em; }
  .plan-fila .h-sec, .plan-fila .p-votos, .plan-fila .p-personas, .plan-fila .p-lideres,
  .plan-fila .p-sin, .plan-fila .p-cas { grid-area: auto; text-align: left; }
  .plan-fila .h-dato::before { content: none; }
  .plan-fila .h-sec { font-size: .9rem; }
  .plan-fila .h-dato > b, .plan-fila .p-votos > b { font-size: .9rem; }
  .plan-fila .h-sec small, .plan-fila .h-dato small { font-size: .68rem; }
  .plan-bloque { border: 0; border-radius: 0; padding: 0; margin: 0 0 1.4rem; }
  .plan-tesis { padding-left: .9rem; border-left: 4px solid var(--azul); }
  .plan-bloque > h3 { break-after: avoid; }
  .plan-figura, .plan-ganadores li, .plan-ajuste,
  .plan-palanca, .plan-alerta, .plan-tramo, .plan-fila, .plan-prioridad > header,
  .plan .lideres-cifras > div, .plan-conv > div { break-inside: avoid; }
  .plan .como-se-calcula summary { color: var(--texto); }
}

/* ── Estructura, Secciones y Personas como tarjetas, en cualquier ancho ──
   Pedido del usuario (15-oct-2026): «salen cortadas… que no se vea como hojas
   de Excel, haz las personas como cards». Es el mismo HTML de la tabla: cada
   renglón se vuelve una tarjeta (así no cambian los botones ni sus acciones) y
   la caja de la tabla deja de ser caja: las tarjetas van sobre el fondo. */
.tabla-scroll:has(> #tabla-estructura), .tabla-scroll:has(> #tabla-personas),
.tabla-scroll:has(> #tabla-estrategia), .tabla-scroll:has(> #tabla-equipo) {
  background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
#tabla-estructura, #tabla-estructura tbody, #tabla-personas, #tabla-personas tbody,
#tabla-equipo, #tabla-equipo tbody { display: block; }
#tabla-estructura thead, #tabla-personas thead, #tabla-equipo thead { display: none; }
#tabla-estructura td, #tabla-personas td, #tabla-estrategia td, #tabla-equipo td {
  border: 0; background: none; box-shadow: none; position: static; }
#tabla-estructura tbody tr:hover, #tabla-personas tbody tr:hover, #tabla-estrategia tbody tr:hover,
#tabla-equipo tbody tr:hover { background: var(--blanco); box-shadow: var(--sombra-2); }

/* Las tarjetas */
#tabla-estructura tbody, #tabla-estrategia tbody, #tabla-equipo tbody {
  display: flex; flex-direction: column; gap: .55rem; }
#tabla-estructura tbody tr, #tabla-personas tbody tr, #tabla-estrategia tbody tr, #tabla-equipo tbody tr {
  background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--r);
  box-shadow: var(--sombra-1); }
#tabla-estrategia tbody tr, #tabla-estrategia tbody tr:last-child,
#tabla-estructura tbody tr:last-child, #tabla-equipo tbody tr:last-child { border-bottom: 1px solid var(--borde); }
#tabla-estructura tbody tr.vacante, #tabla-equipo tbody tr.vacante {
  border-style: dashed; border-color: #b6c2d2; background: #fbfcfe; }
/* El separador de Equipo («Sin lugar en la estructura») no es una tarjeta */
#tabla-equipo tbody tr.separador, #tabla-equipo tbody tr.separador:hover {
  background: none; border: 0; box-shadow: none; border-radius: 0; margin-left: 0; }
#tabla-equipo tr.separador td { background: none; padding: .5rem 0 0; }

/* Estructura en pantalla mediana y grande: cada cargo en una tarjeta de dos
   renglones; la sangría dice de quién depende (la cascada) */
@media (min-width: 761px) {
  #tabla-estructura tbody tr {
    display: grid; align-items: start; gap: .3rem 1.1rem; padding: .7rem 1rem;
    /* Sin mínimos fijos: con el menú al lado y la sangría, a 1024 px las
       columnas ya no cabían y las cifras salían de la tarjeta */
    grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr)
                           minmax(0, 1.3fr) auto;
    grid-template-areas: "foto cargo terr acceso acum acc"
                         "foto nivel tel propias acum acc";
    margin-left: calc(var(--sangria, 0rem) * 1.6);
    border-left: 3px solid var(--borde-2); }
  #tabla-estructura tbody tr.prof-0 { border-left-color: var(--azul); }
  #tabla-estructura tr.prof-1 { --sangria: .8rem; }
  #tabla-estructura tr.prof-2 { --sangria: 1.6rem; }
  #tabla-estructura tr.prof-3 { --sangria: 2.4rem; }
  #tabla-estructura tr.prof-4 { --sangria: 3.2rem; }
  #tabla-estructura tr.prof-5 { --sangria: 4rem; }
  #tabla-estructura tr.prof-6 { --sangria: 4.8rem; }
  #tabla-estructura td { display: block; padding: 0; min-width: 0; font-size: .84rem;
                         white-space: normal; }
  #tabla-estructura td[colspan] { grid-column: 1 / -1; }
  #tabla-estructura .rama { display: none; }
  #tabla-estructura td:nth-child(1) { grid-area: cargo; font-size: .98rem; min-width: 0; }
  #tabla-estructura td:nth-child(2) { grid-area: nivel; }
  #tabla-estructura td:nth-child(3) { grid-area: terr; }
  #tabla-estructura td:nth-child(4) { grid-area: tel; }
  #tabla-estructura td:nth-child(5) { grid-area: acceso; }
  #tabla-estructura td:nth-child(6) { grid-area: propias; }
  #tabla-estructura td:nth-child(7) { grid-area: acum; }
  #tabla-estructura td:nth-child(8) { grid-area: acc; display: flex; flex-wrap: wrap; gap: .35rem;
                                      justify-content: flex-end; align-content: flex-start;
                                      white-space: nowrap; max-width: 15rem; }
  #tabla-estructura td:nth-child(9) { grid-area: foto; }
  #tabla-estructura td:nth-child(5) .btn { display: inline-flex; margin-top: .3rem; }
  /* Una celda sin dato no deja hueco en la tarjeta */
  #tabla-estructura td.nada { display: none; }
  #tabla-estructura td:nth-child(n+3):nth-child(-n+7)::before {
    display: block; margin-bottom: .05rem; font-size: .66rem; font-weight: 650;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
  #tabla-estructura td:nth-child(3)::before { content: "Secciones / zona"; }
  #tabla-estructura td:nth-child(4)::before { content: "Teléfono"; }
  #tabla-estructura td:nth-child(5)::before { content: "Acceso"; }
  #tabla-estructura td:nth-child(6)::before { content: "Gente propia"; }
  #tabla-estructura td:nth-child(7)::before { content: "Acumulado / meta"; }
  #tabla-estructura td:nth-child(5) { overflow-wrap: anywhere; }

  /* Equipo: la misma tarjeta de dos renglones; la sangría dice de quién depende */
  #tabla-equipo tbody tr {
    display: grid; align-items: start; gap: .3rem 1.1rem; padding: .7rem 1rem;
    /* Sin mínimos fijos: con el menú al lado y la sangría, a 1024 px una
       columna de 7 rem ya no cabía y el botón salía de la tarjeta */
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr)
                           minmax(0, .8fr) minmax(0, .8fr) auto;
    grid-template-areas: "nombre depende usuario secciones capturas acc"
                         "rol tel acceso secciones sync acc";
    margin-left: calc(var(--sangria, 0rem) * 1.6);
    border-left: 3px solid var(--borde-2); }
  #tabla-equipo tbody tr.prof-0 { border-left-color: var(--azul); }
  #tabla-equipo tr.prof-1 { --sangria: .8rem; }
  #tabla-equipo tr.prof-2 { --sangria: 1.6rem; }
  #tabla-equipo tr.prof-3 { --sangria: 2.4rem; }
  #tabla-equipo tr.prof-4 { --sangria: 3.2rem; }
  #tabla-equipo tr.prof-5 { --sangria: 4rem; }
  #tabla-equipo tr.prof-6 { --sangria: 4.8rem; }
  #tabla-equipo tbody tr.separador { display: block; padding: .4rem 0 0; border-left: 0; }
  #tabla-equipo td { display: block; padding: 0; min-width: 0; font-size: .84rem; white-space: normal; }
  #tabla-equipo td[colspan] { grid-column: 1 / -1; }
  #tabla-equipo .rama { display: none; }
  #tabla-equipo td:nth-child(1) { grid-area: nombre; font-size: .98rem; min-width: 0; }
  #tabla-equipo td:nth-child(2) { grid-area: rol; white-space: normal; }
  #tabla-equipo td:nth-child(3) { grid-area: depende; white-space: normal; font-size: .84rem; color: var(--texto); }
  #tabla-equipo td:nth-child(4) { grid-area: usuario; white-space: normal; }
  #tabla-equipo td:nth-child(5) { grid-area: tel; }
  #tabla-equipo td:nth-child(6) { grid-area: secciones; }
  #tabla-equipo td:nth-child(7) { grid-area: capturas; }
  #tabla-equipo td:nth-child(8) { grid-area: sync; white-space: normal; }
  #tabla-equipo td:nth-child(9) { grid-area: acceso; }
  #tabla-equipo td:nth-child(10) { grid-area: acc; display: flex; flex-wrap: wrap; gap: .35rem;
                                   justify-content: flex-end; align-content: flex-start;
                                   white-space: nowrap; }
  #tabla-equipo td.nada { display: none; }
  #tabla-equipo td:nth-child(n+3):nth-child(-n+9)::before {
    display: block; margin-bottom: .05rem; font-size: .66rem; font-weight: 650;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gris); }
  #tabla-equipo td:nth-child(3)::before { content: "Depende de"; }
  #tabla-equipo td:nth-child(4)::before { content: "Usuario"; }
  #tabla-equipo td:nth-child(5)::before { content: "Teléfono"; }
  #tabla-equipo td:nth-child(6)::before { content: "Secciones"; }
  #tabla-equipo td:nth-child(7)::before { content: "Capturas"; }
  #tabla-equipo td:nth-child(8)::before { content: "Último sync"; }
  #tabla-equipo td:nth-child(9)::before { content: "Acceso"; }
  #tabla-equipo td[colspan]::before, #tabla-equipo tr.separador td::before { content: none; }
  #tabla-equipo td:nth-child(4) .login { overflow-wrap: anywhere; }
}
/* Pantalla mediana (una laptop con el menú abierto): menos columnas y más
   renglones; los botones abajo a la derecha */
@media (min-width: 761px) and (max-width: 1150px) {
  #tabla-estructura tbody tr {
    grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: "foto cargo terr acum"
                         "foto nivel tel acum"
                         "foto acceso propias acum"
                         "foto acc acc acc"; }
  #tabla-estructura td:nth-child(8) { max-width: none; padding-top: .25rem; }
  #tabla-equipo tbody tr {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "nombre depende usuario acc"
                         "rol tel acceso acc"
                         "secciones capturas sync acc"; }
}

/* Personas: una cuadrícula de tarjetas */
#tabla-personas tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
                        gap: .75rem; }
#tabla-personas tbody tr {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem .9rem;
  padding: .85rem 1rem; align-content: start;
  grid-template-areas: "nombre nombre" "estatus seccion" "responde responde" "tel capturo" "acc acc"; }
#tabla-personas td { display: block; padding: 0; min-width: 0; font-size: .84rem; white-space: normal; }
#tabla-personas td[colspan] { grid-column: 1 / -1; }
#tabla-personas td:nth-child(1) { grid-area: nombre; display: flex; align-items: center; gap: .75rem;
                                  font-size: 1rem; font-weight: 650; color: var(--texto); }
#tabla-personas td:nth-child(1) .avatar { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; }
#tabla-personas td:nth-child(1) .tarjeta-nombre { min-width: 0; overflow-wrap: anywhere; }
#tabla-personas td:nth-child(1) .nivel-chip { display: table; margin-top: .3rem; font-weight: 600; }
#tabla-personas td:nth-child(2) { grid-area: estatus; }
#tabla-personas td:nth-child(3) { grid-area: seccion; }
#tabla-personas td:nth-child(4) { grid-area: responde; }
#tabla-personas td:nth-child(5) { grid-area: tel; }
#tabla-personas td:nth-child(6) { grid-area: capturo; }
#tabla-personas td:nth-child(7) { grid-area: acc; display: flex; gap: .4rem; justify-content: flex-end;
                                  padding-top: .55rem; border-top: 1px solid var(--borde); }
#tabla-personas td:nth-child(n+2):nth-child(-n+6)::before {
  display: block; margin-bottom: .1rem; font-size: .66rem; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris); }
#tabla-personas td:nth-child(2)::before { content: "Estatus"; }
#tabla-personas td:nth-child(3)::before { content: "Sección"; }
#tabla-personas td:nth-child(4)::before { content: "Responde a"; }
#tabla-personas td:nth-child(5)::before { content: "Teléfono"; }
#tabla-personas td:nth-child(6)::before { content: "Capturó"; }
#tabla-personas td:nth-child(5):empty::after { content: "—"; color: var(--gris); }
#tabla-personas td:nth-child(4) .muted { display: block; font-size: .78rem; }
/* Las cifras del acumulado y los botones nunca se encimen ni ensanchen la
   página: los botones bajan de renglón («+ Coordinador de comunidad» es largo) */
#tabla-estructura td:nth-child(7), #tabla-estructura td:nth-child(7) * { white-space: normal; }
@media (max-width: 760px) {
  #tabla-estructura tbody tr { margin-left: 0; }
  #tabla-estructura td:nth-child(8) { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end;
                                      white-space: normal; max-width: 100%; }
}
/* Formato para llenar: dos botones por distrito (zonas y seccionales; con líderes).
   Siempre el nombre arriba, a todo lo ancho, y los botones debajo: lado a lado,
   en una pantalla angosta el texto quedaba de una palabra por renglón */
#formato-lista li { flex-direction: column; align-items: stretch; gap: .55rem; }
#formato-lista li > span:first-child { flex: none; }
#formato-lista .formato-botones { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ── Foto de la persona (Panel › Personas) ── */
.persona-foto { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 .9rem; }
.persona-foto img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
                    border: 1px solid var(--borde); flex: none; }
.persona-foto-vacia { width: 88px; height: 88px; border-radius: 50%; flex: none; display: grid;
                      place-items: center; background: #f1f5f9; border: 1px dashed var(--borde-2);
                      color: var(--gris); font-size: .78rem; }
.persona-foto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.persona-foto-acciones label.btn { cursor: pointer; }
.persona-foto-acciones .muted { font-size: .78rem; flex-basis: 100%; }
/* La foto en las tarjetas (Personas y Estructura): redonda; mientras no hay
   foto, las iniciales; una posición vacante, el círculo punteado */
.avatar { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden;
  width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #e8eef7; border: 1px solid var(--borde);
  color: var(--azul); font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.vacio { background: #fbfcfe; border: 1px dashed #b6c2d2; }
.avatar[data-ver] { cursor: pointer; }
/* display propio le gana a [hidden] (la misma trampa de siempre) */
.persona-foto [hidden] { display: none !important; }