/* ═══ TEMA DEL SITIO ══════════════════════════════════════════════════════
   Cambia aquí colores y tipografía y todo el sitio se actualiza.            */
:root {
  --fondo: #F4F5F7;          /* fondo de página */
  --tarjeta: #FFFFFF;        /* tarjetas y tablas */
  --tinta: #1B2F4E;          /* texto principal (azul marino) */
  --tinta-suave: #5B6675;    /* texto secundario */
  --linea: #E3E6EB;
  --acento: #C8102E;         /* rojo institucional para énfasis */
  --acento-2: #E0A93F;       /* dorado para medallas y destacados */
  --exito: #1BA39C;
  --fuente: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radio: 12px;
  /* colores por red (se usan en gráficas y chips) */
  --c-FACEBOOK: #1877F2; --c-TWITTER: #14171A; --c-YOUTUBE: #FF0000; --c-INSTAGRAM: #C13584;
  --c-WIKIPEDIA: #6B7280; --c-GOOGLE: #34A853; --c-TIKTOK: #00C2B8;
  /* colores por partido */
  --p-PRI: #DA291C; --p-MC: #FF8300; --p-Morena: #7B1E3A; --p-PAN: #05338D;
  --p-PVEM: #2E8B3A; --p-PT: #C8102E; --p-SOMOS: #E5007D; --p-PAZ: #A87BD6; --p-Independiente: #4B5563;
  --p-PRI-PAN-grafica: #6D28D9;   /* barras de Adrián en las gráficas: morado (la insignia sigue roja/azul) */
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--fuente); background: var(--fondo); color: var(--tinta); font-size: 15px; }
a { color: var(--tinta); text-decoration: none; }
header.barra { background: var(--tinta); color: #fff; padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 58px; }
header.barra .marca { font-weight: 700; font-size: 17px; letter-spacing: .3px; color: #fff; }
header.barra nav a { color: #C9D3E3; margin-right: 18px; font-size: 14px; }
header.barra nav a.activo, header.barra nav a:hover { color: #fff; }
header.barra .usuario { margin-left: auto; font-size: 13px; color: #C9D3E3; }
main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 60px; }
h1 { font-size: 26px; margin: 0 0 4px; } h2 { font-size: 18px; margin: 28px 0 10px; }
.sub { color: var(--tinta-suave); margin: 0 0 18px; }
.fila { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; }
.tarjeta.ancha { flex: 1 1 100%; } .tarjeta.media { flex: 1 1 calc(50% - 8px); } .tarjeta.tercio { flex: 1 1 calc(33% - 11px); }
.kpi { min-width: 180px; flex: 1 1 180px; }
.kpi .valor { font-size: 28px; font-weight: 700; } .kpi .etiqueta { color: var(--tinta-suave); font-size: 12.5px; margin-top: 2px; }
.kpi .delta { font-size: 12.5px; margin-top: 6px; } .delta.pos { color: var(--exito); } .delta.neg { color: var(--acento); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; background: var(--tinta); color: #fff; padding: 8px 10px; font-weight: 600; font-size: 12px; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
td { padding: 8px 10px; border-bottom: 1px solid var(--linea); }
tr:hover td { background: #FAFBFC; }
.pos { font-weight: 700; color: var(--acento-2); width: 40px; }
.chip { display: inline-block; white-space: nowrap; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; color: #fff; background: var(--tinta-suave); }
.chip.PRI { background: var(--p-PRI); } .chip.MC { background: var(--p-MC); } .chip.Morena { background: var(--p-Morena); } .chip.PAN { background: var(--p-PAN); }
.chip.PRI-PAN { background: linear-gradient(90deg, var(--p-PRI) 50%, var(--p-PAN) 50%); }
.chip.PVEM { background: var(--p-PVEM); } .chip.PT { background: var(--p-PT); } .chip.SOMOS { background: var(--p-SOMOS); } .chip.PAZ { background: var(--p-PAZ); } .chip.Independiente { background: var(--p-Independiente); }
.tabs a { display: inline-block; padding: 8px 14px; border-radius: 8px; margin: 0 6px 6px 0; background: #fff; border: 1px solid var(--linea); font-size: 13.5px; }
.tabs a.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
select, input[type=text], input[type=password], input[type=number] { font: inherit; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
button, .boton { font: inherit; background: var(--acento); color: #fff; border: 0; padding: 8px 16px; border-radius: 8px; cursor: pointer; }
button.suave { background: var(--tinta-suave); }
.aviso { background: #FFF6E5; border: 1px solid #F3D9A4; padding: 10px 14px; border-radius: 8px; font-size: 13.5px; }
.aviso.error { background: #FDECEE; border-color: #F3B8C0; }
.login { max-width: 380px; margin: 80px auto; }
.login h1 { text-align: center; }
.login label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--tinta-suave); }
.login input { width: 100%; }
.login button { width: 100%; margin-top: 18px; }
canvas { max-width: 100%; }
.mini { font-size: 12px; color: var(--tinta-suave); }
.grid-metricas td:first-child { max-width: 380px; }
@media (max-width: 720px) { header.barra { padding: 0 12px; gap: 10px; } header.barra nav a { margin-right: 10px; } .tarjeta.media, .tarjeta.tercio { flex-basis: 100%; } }

/* enlaces de red (portada → comparativo) */
.titulo-red { font-weight: 700; text-decoration: none; }
.titulo-red:hover { text-decoration: underline; }
.chips-red .chip { text-decoration: none; }


/* Datos: la fila de nombres queda fija al bajar; la tabla se desplaza dentro de su tarjeta */
.tabla-fija { max-height: calc(100vh - 150px); overflow: auto; }
.tabla-fija thead th { position: sticky; top: 0; z-index: 3; }
thead th a { color: #fff; text-decoration: underline dotted; }
thead th a:hover { text-decoration: underline; }

/* tablas ordenables */
table.ordenable thead th.num:hover { background: #2B3A52; }
table.ordenable .flecha { font-size: 9px; opacity: .85; }

/* publicaciones por persona: tabla con scroll y encabezado fijo */
.tabla-pub { max-height: 560px; overflow: auto; padding-top: 0; }
.tabla-pub thead th { position: sticky; top: 0; z-index: 3; }
.chip.pautada { background: #E0A93F; color: #1B2430; }