#grafico-principal { max-width: 1200px; margin: 0 auto; background: #fff; color: #000; font-family: Roboto, Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.4; }
  #grafico-principal, #grafico-principal * { box-sizing: border-box; }
  #grafico-principal p { margin: 0; }
  #grafico-principal [hidden] { display: none; }

  #grafico-principal .cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
  #grafico-principal .marca { display: flex; align-items: center; gap: 8px; }
  #grafico-principal .icono { width: 38px; height: 38px; object-fit: contain; flex: none; }
  #grafico-principal .titulo { margin: 0; font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
  #grafico-principal .enlaces { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
  #grafico-principal .enlaces li + li::before { content: "-"; margin-right: 8px; color: #6f6f6f; }
  #grafico-principal .enlaces a { color: #000; font-weight: 700; text-decoration: none; }
  #grafico-principal .enlaces a.destacado { color: #cc0000; }
  #grafico-principal .enlaces a:hover { text-decoration: underline; }
  #grafico-principal a:focus-visible { outline: 2px solid #cc0000; outline-offset: 2px; }

  #grafico-principal .camaras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; margin-top: 12px; }
  #grafico-principal .leyenda, #grafico-principal .mayoria-c, #grafico-principal .falta, #grafico-principal .solo-compacta { display: none; }
  #grafico-principal .camara-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; }
  #grafico-principal .nombre { margin: 0; font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 1rem; line-height: 1.3; }
  #grafico-principal .pendientes { color: #6f6f6f; }

  #grafico-principal .barra { position: relative; overflow: hidden; background: #e3e3e3; }
  #grafico-principal .tramo { position: absolute; top: 0; bottom: 0; width: 0; transition: left .9s cubic-bezier(.2, .7, .2, 1), right .9s cubic-bezier(.2, .7, .2, 1), width .9s cubic-bezier(.2, .7, .2, 1); }
  #grafico-principal .principal { height: 44px; margin-top: 6px; }
  #grafico-principal .principal .cifra { position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); font-family: Merriweather, Georgia, serif; font-weight: 700; font-size: 1.5rem; line-height: 1; color: #fff; white-space: nowrap; }
  #grafico-principal .principal .cifra.fuera.d { color: #1f52c4; }
  #grafico-principal .principal .cifra.fuera.r { color: #cc0000; }
  #grafico-principal .principal .falta { position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -50%); padding: 0 6px; background: #e3e3e3; color: #6f6f6f; white-space: nowrap; }
  #grafico-principal .principal .falta.oculta { visibility: hidden; }
  #grafico-principal .principal .mitad { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 1; border-left: 2px dashed #000; transform: translateX(-1px); }

  #grafico-principal .etiquetas { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 4px; }
  #grafico-principal .etiquetas .d { color: #1f52c4; font-weight: 700; }
  #grafico-principal .etiquetas .r { color: #cc0000; font-weight: 700; text-align: right; }
  #grafico-principal .etiquetas .mayoria { color: #000; }

  #grafico-principal .antes { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 8px; }
  #grafico-principal .antes-texto { color: #6f6f6f; }
  #grafico-principal .secundaria { height: 22px; }
  #grafico-principal .secundaria .tramo { display: flex; align-items: center; overflow: hidden; white-space: nowrap; color: #fff; font-weight: 700; }
  #grafico-principal .secundaria .tramo.d { padding-left: 6px; }
  #grafico-principal .secundaria .tramo.r { justify-content: flex-end; padding-right: 6px; }

  #grafico-principal .pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; margin-top: 10px; color: #6f6f6f; }
  #grafico-principal .lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  @media (prefers-reduced-motion: reduce) {
    #grafico-principal .tramo { transition: none; }
  }
  /* Versión compacta: una leyenda común arriba en vez de nombres de partido en cada cámara, la mayoría junto al
     nombre de la cámara, lo que falta por decidir dentro de la barra y «Antes: …» dentro de la barra fina */
  @media (max-width: 800px) {
    #grafico-principal .leyenda { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 6px 0 0; padding: 0; list-style: none; }
    #grafico-principal .leyenda li { display: flex; align-items: center; gap: 6px; }
    #grafico-principal .leyenda svg { display: block; width: 14px; height: 14px; flex: none; }
    #grafico-principal .etiquetas, #grafico-principal .antes-texto, #grafico-principal .pendientes { display: none; }
    #grafico-principal .mayoria-c, #grafico-principal .solo-compacta { display: inline; }
    #grafico-principal .principal .falta { display: block; }
    #grafico-principal .mayoria-c .i { color: #606060; }
    #grafico-principal .camaras { gap: 14px 24px; margin-top: 8px; }
    #grafico-principal .principal { height: 36px; margin-top: 4px; }
    #grafico-principal .principal .cifra { font-size: 1.375rem; }
    #grafico-principal .antes { display: block; margin-top: 3px; }
    #grafico-principal .pie { margin-top: 8px; }
  }
  @media (max-width: 680px) {
    #grafico-principal .camaras { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 400px) {
    #grafico-principal .titulo { font-size: 1.125rem; }
  }