/* ==========================================================================
   Proceso electoral (nodo election_campaign): reglas escritas a mano.
   css/election-campaign.css se compila con Tailwind y se sobrescribe al
   recompilar; lo que no es una clase de Tailwind va aquí. Todo bajo
   .uda-elecciones, como el resto de la librería.
   ========================================================================== */

/* Opción "green" de field_pecl_color (#c1e269). Tailwind solo trae blue/red
   (tw-*-uda-blue, tw-*-uda-orange): estas clases hacen lo mismo para el verde.
   Las usan los mapas `tonos` de node--election-campaign.html.twig y de las
   vistas election-videos, election-albums y election-candidates. */
.uda-elecciones .uda-ec-borde-green {
  border-color: #c1e269;
}

.uda-elecciones .uda-ec-texto-green {
  color: #c1e269;
}

.uda-elecciones .uda-ec-barra-green {
  background-color: #c1e269;
}

/* Color propio de cada lista para los títulos y enlaces que el diseño pone en
   azul dentro del modal y en la página de la candidatura (título del equipo,
   cargo y documento de cada miembro, plan de trabajo, "Ver más videos"). La
   plantilla pone data-color-titulos y --ec-color-titulos solo si
   field_pecl_color_titulos_varios trae un color válido; sin él queda el azul.
   Más específico que `.uda-elecciones .tw-text-uda-blue` del Tailwind. */
/* Aplica en el modal y en la pagina de la candidatura (ambos llevan data-color-titulos). */
.uda-elecciones [data-color-titulos] .uda-ec-titulo-color {
  color: var(--ec-color-titulos);
}

/* Subtítulo de los banners de la lista (candidatura, videos, álbumes y álbum) y
   botón de pausa del carrusel de la galería (modal y página de la candidatura):
   el diseño los trae en naranja fijo (#f08236). Toman el color de la lista
   (field_pecl_color) con las clases uda-ec-sub--{clave} y uda-ec-toggle--{clave}
   (macro clave_color). red se queda con el naranja del diseño. En el banner
   (fondo oscuro) el azul es el celeste de la etiqueta del modal. */
.uda-elecciones .uda-news-hero__subtitle.uda-ec-sub--blue {
  color: #38bdf8;
}

.uda-elecciones .uda-news-hero__subtitle.uda-ec-sub--green {
  color: #c1e269;
}

.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--blue,
.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--blue:hover {
  background-color: #0073b7;
}

/* Sobre el verde claro el ícono blanco no se lee: va oscuro. */
.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--green,
.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--green:hover {
  background-color: #c1e269;
  color: #0f172a;
}

.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--blue:hover,
.uda-elecciones .uda-carousel-toggle.uda-ec-toggle--green:hover {
  filter: brightness(0.9);
}

/* Biografía del equipo directivo (modal de la lista): texto enriquecido del
   campo field_pecc_bio, alineado a la izquierda aunque la tarjeta centre el
   nombre y el cargo. El preflight de Tailwind quita márgenes y viñetas: aquí
   se devuelven para que párrafos y listas se lean. */
.uda-elecciones .uda-modal-bio {
  /* Separación clara entre el cargo y el inicio de la reseña. */
  margin-top: 1rem;
  font-size: 11px;
  line-height: 1.55;
  color: #64748b;
  text-align: left;
  overflow-wrap: anywhere;
}

.uda-elecciones .uda-modal-bio p {
  margin: 0 0 0.5rem;
}

.uda-elecciones .uda-modal-bio ul,
.uda-elecciones .uda-modal-bio ol {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.uda-elecciones .uda-modal-bio ul {
  list-style: disc;
}

.uda-elecciones .uda-modal-bio ol {
  list-style: decimal;
}

.uda-elecciones .uda-modal-bio strong,
.uda-elecciones .uda-modal-bio b {
  color: #334155;
  font-weight: 600;
}

.uda-elecciones .uda-modal-bio a {
  color: inherit;
  text-decoration: underline;
}

.uda-elecciones .uda-modal-bio > :last-child {
  margin-bottom: 0;
}

/* Galería de campaña (carrusel del modal de la lista): el alto es el del
   diseño (16/7, en election-campaign.css). La imagen se recorta desde arriba
   para que no se pierdan los textos que traen las fotos en la parte superior. */
.uda-elecciones .uda-carousel-image {
  object-position: center top;
}