/* =======================================================
   ESTILOS PERSONALIZADOS DEL SITIO WEB
   ======================================================= */

/* --------------------------------------------------
   1. Definición de Colores (:root)
-------------------------------------------------- */
:root {
  /* -- Variables de Color (Hex) -- */
  /* Colores Vibrantes */
  --custom-black: #000000;
  --custom-yellow: #FFCC00;
  --custom-red: #FF0000;
  --custom-gold: #CC9933;
  --custom-purple: #990099;
  --custom-magenta: #FF00FF;
  --custom-green: #33CC33;
  --custom-cyan: #00CCFF;
  --custom-orange: #FF9933;
  /* Tonos Neutros y Grises */
  --custom-charcoal: #242625;
  --custom-gunmetal: #354038;
  --custom-slate: #6d4a89;
  /*--custom-ash: #A4A69C;*/
  /*--custom-ash: #4c594f;*/
  --custom-ash: #AF7FB7;
  --custom-silver: #BEBEB8;

  /* -- Componentes RGB (para usar con opacidad) -- */
  /* Colores Vibrantes */
  --custom-black-rgb: 0, 0, 0;
  --custom-yellow-rgb: 255, 204, 0;
  --custom-red-rgb: 255, 0, 0;
  --custom-gold-rgb: 204, 153, 51;
  --custom-purple-rgb: 153, 0, 153;
  --custom-magenta-rgb: 255, 0, 255;
  --custom-green-rgb: 51, 204, 51;
  --custom-cyan-rgb: 0, 204, 255;
  --custom-orange-rgb: 255, 153, 51;
  /* Tonos Neutros y Grises */
  --custom-charcoal-rgb: 36, 38, 37;
  --custom-gunmetal-rgb: 53, 64, 56;
  --custom-slate-rgb: 76, 89, 79;
  --custom-ash-rgb: 164, 166, 156;
  --custom-silver-rgb: 190, 190, 184;
}


/* --------------------------------------------------
   2. Clases de Utilidad
-------------------------------------------------- */

/* Utilidades de Opacidad para Texto */
.text-opacity-25 { --bs-text-opacity: 0.25; }
.text-opacity-50 { --bs-text-opacity: 0.5; }
.text-opacity-75 { --bs-text-opacity: 0.75; }
.text-opacity-100 { --bs-text-opacity: 1; }

/* Clases de Color de Texto (con soporte para opacidad) */
.text-custom-black    { --bs-text-opacity: 1; color: rgba(var(--custom-black-rgb), var(--bs-text-opacity)) !important; }
.text-custom-yellow   { --bs-text-opacity: 1; color: rgba(var(--custom-yellow-rgb), var(--bs-text-opacity)) !important; }
.text-custom-red      { --bs-text-opacity: 1; color: rgba(var(--custom-red-rgb), var(--bs-text-opacity)) !important; }
.text-custom-gold     { --bs-text-opacity: 1; color: rgba(var(--custom-gold-rgb), var(--bs-text-opacity)) !important; }
.text-custom-purple   { --bs-text-opacity: 1; color: rgba(var(--custom-purple-rgb), var(--bs-text-opacity)) !important; }
.text-custom-magenta  { --bs-text-opacity: 1; color: rgba(var(--custom-magenta-rgb), var(--bs-text-opacity)) !important; }
.text-custom-green    { --bs-text-opacity: 1; color: rgba(var(--custom-green-rgb), var(--bs-text-opacity)) !important; }
.text-custom-cyan     { --bs-text-opacity: 1; color: rgba(var(--custom-cyan-rgb), var(--bs-text-opacity)) !important; }
.text-custom-orange   { --bs-text-opacity: 1; color: rgba(var(--custom-orange-rgb), var(--bs-text-opacity)) !important; }
.text-custom-charcoal { --bs-text-opacity: 1; color: rgba(var(--custom-charcoal-rgb), var(--bs-text-opacity)) !important; }
.text-custom-gunmetal { --bs-text-opacity: 1; color: rgba(var(--custom-gunmetal-rgb), var(--bs-text-opacity)) !important; }
.text-custom-slate    { --bs-text-opacity: 1; color: rgba(var(--custom-slate-rgb), var(--bs-text-opacity)) !important; }
.text-custom-ash      { --bs-text-opacity: 1; color: rgba(var(--custom-ash-rgb), var(--bs-text-opacity)) !important; }
.text-custom-silver   { --bs-text-opacity: 1; color: rgba(var(--custom-silver-rgb), var(--bs-text-opacity)) !important; }

/* Clases de Color de Fondo (colores sólidos) */
.bg-custom-black    { background-color: var(--custom-black) !important; }
.bg-custom-yellow   { background-color: var(--custom-yellow) !important; }
.bg-custom-red      { background-color: var(--custom-red) !important; }
.bg-custom-gold     { background-color: var(--custom-gold) !important; }
.bg-custom-purple   { background-color: var(--custom-purple) !important; }
.bg-custom-magenta  { background-color: var(--custom-magenta) !important; }
.bg-custom-green    { background-color: var(--custom-green) !important; }
.bg-custom-cyan     { background-color: var(--custom-cyan) !important; }
.bg-custom-orange   { background-color: var(--custom-orange) !important; }
.bg-custom-charcoal { background-color: var(--custom-charcoal) !important; }
.bg-custom-gunmetal { background-color: var(--custom-gunmetal) !important; }
.bg-custom-slate    { background-color: var(--custom-slate) !important; }
.bg-custom-ash      { background-color: var(--custom-ash) !important; }
.bg-custom-silver   { background-color: var(--custom-silver) !important; }


/* --------------------------------------------------
   3. Estilos de Componentes Específicos
-------------------------------------------------- */

/* Corrección para Navbar */
.navbar.bg-custom-slate {
  background-color: var(--custom-slate) !important;
}

/* Botones Personalizados */
.btn-custom-red { background-color: var(--custom-red); color: #fff; border-color: var(--custom-red); }
.btn-custom-red:hover { background-color: #D60000; border-color: #BE0000; color: #fff; }

.btn-custom-slate { background-color: var(--custom-slate); color: #fff; border-color: var(--custom-slate); }
.btn-custom-slate:hover { background-color: var(--custom-gunmetal); border-color: var(--custom-gunmetal); color: #fff; }

.btn-custom-yellow { background-color: var(--custom-yellow); color: var(--custom-charcoal); border-color: var(--custom-yellow); }
.btn-custom-yellow:hover { background-color: #E6B800; border-color: #CCA300; color: var(--custom-charcoal); }

.btn-outline-custom-purple { color: var(--custom-purple); border-color: var(--custom-purple); }
.btn-outline-custom-purple:hover { background-color: var(--custom-purple); border-color: var(--custom-purple); color: #fff; }



/* Estilo para Barra de Accesos */
.barra-acceso-item {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.barra-acceso-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Estilo para Tarjetas de Diputados */
.profile-image {
  width: 170px;
  height: 170px; /* Ajustado para ser un círculo perfecto */
  object-fit: cover; /* Evita que la imagen se deforme */
}
.party-logo {
  width: 100px;
  height: auto; /* Mantiene la proporción */
}
/* Caja de lista a la misma altura que el video */

.video-playlist {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}



/* Items de la lista */
.video-playlist-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #e0e0e0;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.video-playlist-item:last-child {
  border-bottom: none;
}

.video-playlist-item:hover {
  background-color: #f5f7fa;
}

/* Estilo para Playlist de Video */
.video-playlist-item.active {
  background-color: rgba(0, 204, 255, 0.08); /* Cian con muy baja opacidad */
  border-left: 4px solid var(--custom-cyan);
  border-radius: .25rem;
}

/* Miniaturas */
.video-playlist-thumbnail {
  width: 100px;
  height: 60px;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* Fecha y título */
.video-playlist-date {
  font-size: 0.75rem;
  color: #8C98A4;
  display: block;
  margin-bottom: 0.25rem;
}

.video-playlist-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #354038;
  margin: 0;
}


/* =======================================================
   Menú de Navegación Lateral (Sidebar)
   ======================================================= */

.sidebar-nav .nav-link {
  display: block;
  padding: 0.65rem 1.25rem;
  color: var(--custom-gunmetal);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0 .25rem .25rem 0;
  transition: background-color 0.2s ease, border-left-color 0.2s ease;

  /* --- AJUSTES AQUÍ --- */
  /* Fondo y borde gris aplicados por defecto a todos los elementos */
  background-color: #f8f9fa; /* Gris claro de Bootstrap */
  /*background-color: #4c594f;*/
  border-left: 4px solid var(--custom-ash); 
}

/* El estado :hover ahora es igual al estado por defecto, como solicitaste */
.sidebar-nav .nav-link:hover {
  /* Puedes añadir un efecto sutil aquí si lo deseas en el futuro,
     como un ligero cambio de brillo, ej: filter: brightness(98%); */
}

/* El estado activo anula los estilos por defecto para resaltar */
.sidebar-nav .nav-link.active {
  color: var(--custom-charcoal);
  font-weight: 700; /* fw-bold */
  background-color: rgba(var(--custom-cyan-rgb), 0.1);
  border-left-color: var(--custom-cyan);
}

/* Estilo para los encabezados/separadores (sin cambios) */
.sidebar-heading {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--custom-ash);
  padding: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

/* Estilo para el encabezado/indicador de la categoría padre en el sidebar */
.sidebar-parent-category {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  background-color: var(--custom-slate);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-bottom: 0.5rem;
  border-radius: .25rem;
}

.sidebar-parent-category:hover {
  background-color: var(--custom-gunmetal); /* Un poco más oscuro al pasar el mouse */
  color: #fff;
}

.sidebar-parent-category .bi {
  font-size: 1.5rem;
  margin-right: 0.75rem;
  line-height: 1;
}

/* Estilo para los encabezados/separadores del menú lateral */
.sidebar-heading {
  /* --- NUEVO DISEÑO --- */
  background-color: var(--custom-silver); /* Fondo gris claro de tu paleta */
  color: var(--custom-gunmetal);        /* Texto oscuro para contraste */
  padding: 0.5rem 1.25rem;              /* Espaciado interno */
  margin-top: 1rem;                   /* Espacio superior para separar */
  margin-bottom: 0;                     /* Sin margen inferior, se une a la lista */
  border-radius: .25rem;                /* Bordes redondeados */

  /* Estilos de fuente */
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* =======================================================
   Estilos Personalizados para Breadcrumb
   ======================================================= */

/* Cambia el color de los enlaces del breadcrumb a un tono oscuro */
.breadcrumb-item a {
  color: var(--custom-gunmetal); /* Tono gris oscuro de tu paleta */
  text-decoration: none;
}

/* Añade un subrayado al pasar el mouse para indicar que es un enlace */
.breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Opcional: Ajusta el color del elemento activo para que coincida */
.breadcrumb-item.active {
  color: var(--custom-ash); /* Tono de gris medio para la página actual */
}

.profile-image-sm {
  width: 80px;
  height: 80px;
  object-fit: cover; /* Evita que la imagen se deforme */
}

/* =======================================================
   Estilos Personalizados para separador
   ======================================================= */

hr.separadord {
  margin: 0;
  border: none;
  border-top: .1px solid #AF7FB7;
}

hr.separadorg {
  margin: 0;
  border: none;
  border-top: 7px solid #AF7FB7;
}

.texto-destacado {
  color: #444; /* Verde grisáceo oscuro: buen contraste sobre fondo claro */
  font-weight: 600;
  border-left: 4px solid #A4A69C; /* Contraste visual sin depender solo del color */
  padding-left: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.texto-destacadof {
  color: #444; /* Verde grisáceo oscuro: buen contraste sobre fondo claro */
  font-weight: 600;
  padding-left: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.texto-destacadoa {
  color: #595959; /*No se alinea justificado por el espacio entre las palabras, afecta a lectura de pantalla*/
  font-weight: 500;
  padding-left: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.texto-destacadoform {
  color: #444;
  font-weight: 500;
  border-left: 4px solid #444;
  padding-left: 8px;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.splide__arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.arrow-label {
  font-size: 0.85rem;
  margin-top: 0.25rem;
  color: #333; /* ajusta según tu diseño */
}


.btn-arriba {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #0d6efd; /* color tipo Bootstrap */
  color: white;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  font-size: 22px;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.btn-arriba:hover {
  background-color: #0b5ed7;
}

/* Cuando se muestra */
.btn-arriba.visible {
  opacity: 1;
  visibility: visible;
}


 /*Timeline*/

 /* ====== TIMELINE GENERAL ====== */
.timeline {
  position: relative;
  margin: 4rem auto;
  padding-left: 40px;
  list-style: none;
  max-width: 900px;
}

/* Línea vertical central */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 4px;
  height: 100%;
  background-color: #ccc;
  border-radius: 2px;
}

/* ====== ELEMENTOS ====== */
.timeline__item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 2rem;
}

/* Punto en la línea */
.timeline__item::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 16px;
  height: 16px;
  background-color: #007bff; /* color primario */
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
}

/* Enlace */
.timeline__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ====== CONTENIDO ====== */
.timeline__time {
  font-size: 0.9rem;
  color: #555;
  font-weight: 600;
}

.timeline__container-titulos {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: background 0.3s ease;
}

.timeline__link:hover .timeline__container-titulos {
  background-color: #e9f2ff;
}

.timeline__titulo {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
  color: #222;
}

.timeline__descripcion {
  margin: 0;
  color: #555;
  line-height: 1.5;
}

/* Imagen */
.timeline__imagen {
  max-width: 100px;
  height: auto;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .timeline {
    padding-left: 20px;
  }

  .timeline::before {
    left: 10px;
  }

  .timeline__item {
    padding-left: 1.5rem;
  }

  .timeline__imagen {
    max-width: 70px;
  }
}


/* ===== GALERÍA RESPONSIVE ===== */
.contenedor-img {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Ajuste flexible */
  gap: 1rem;
  margin: 2rem 0;
}

.contenedor-img figure {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f9fa; /* Fondo neutro detrás de imágenes verticales */
}

/* Imagen adaptativa */
.contenedor-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ⬅️ mantiene proporción sin recortar */
  transition: transform 0.4s ease, opacity 0.4s ease;
  /*cursor: pointer;*/
  display: block;
}

/* Efecto al pasar el mouse */
/*.contenedor-img img:hover {
  transform: scale(1.03);
  opacity: 0.9;
}*/

/* Margen inferior global */
.margin-bottom {
  margin-bottom: 2rem;
}

/* ===== OPCIONAL: sombreado suave ===== */
.contenedor-img figure::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  pointer-events: none;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .contenedor-img {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}


.video-playlist {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;      /* scroll vertical */
}

/* Limitar altura a 3 items de la lista */
.video-playlist-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

#playlist {
  max-height: calc(5 * 5rem); /* Ajusta 5rem al alto real de cada <li> */
  overflow-y: auto;
}