/* ==========================================================================
   PALETA COSSPRA — V Congreso
   "Dos días, dos grupos": Cataratas (institucional) + Selva Misionera (congreso)
   ========================================================================== */

:root {
  /* --- Paleta cruda, por si se necesita usar en algún lado puntual --- */
  --cosspra-cataratas-dark:  #165D74;
  --cosspra-cataratas-mid:   #85AEB7;
  --cosspra-cataratas-light: #B8D8E0;

  --cosspra-unificacion: #EDE5DB;

  --cosspra-selva-light: #827831;
  --cosspra-selva-mid:   #5C663A;
  --cosspra-selva-dark:  #2E401C;

  /* Colores puntuales de agenda (dados en el boceto) */
  --cosspra-dia1-bg:   #DFEEF2;
  --cosspra-dia1-text: #115D75;
  --cosspra-dia2-bg:   #D9E2B3;
  --cosspra-dia2-text: #2F4117;

  /* --- Pisamos el color primario del theme (antes violeta #6600CC) --- */
  --bs-primary: var(--cosspra-cataratas-dark);
  --bs-primary-rgb: 22, 93, 116;

  /* --- Pisamos el gradiente global del theme (antes #7579FF -> #B224EF) ---
     Esta es la variable que usan botones, bordes, hover de flechas, etc.
     en TODO el sitio. Un solo cambio ac\u00e1 corrige todos esos lugares.
     Gradiente dentro de los verdes selva (claro -> oscuro), sin mezclar
     el azul cataratas, seg\u00fan referencia del bot\u00f3n "Enviar". */
  --bs-gradient-color1: var(--cosspra-selva-light);
  --bs-gradient-color2: var(--cosspra-selva-dark);
}

/* ==========================================================================
   Quitar puntos y l\u00edneas decorativas en toda la web
   (clase .dots / img-moving-anim se repite en casi todos los widgets del
   theme: Programa, Disertantes, Testimonios, etc. Las l\u00edneas son los <hr>
   que el theme agrega como separador opcional entre secciones)
   ========================================================================== */
.dots,
[class*="img-moving-anim"] {
  display: none !important;
}

.container > hr {
  display: none !important;
}

/* ==========================================================================
   Disertantes: fotos cuadradas (1:1)
   ========================================================================== */
.speakers-gallery-item-thumb {
  aspect-ratio: 1 / 1;
}

.speakers-gallery-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Programa: colores por d\u00eda
   Los 4 tabs se cargan en este orden fijo: D\u00eda 1 Conferencias, D\u00eda 1
   Talleres, D\u00eda 2 Conferencias, D\u00eda 2 Talleres -> por eso se puede
   distinguir por posici\u00f3n (nth-of-type) sin tocar el PHP del widget.
   ========================================================================== */

/* Día 1 (paneles 1 y 2 = Conferencias + Talleres) */
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item {
  background-color: var(--cosspra-dia1-bg);
}
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item .title,
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item .speaker_name,
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item .date,
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item .time,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item .title,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item .speaker_name,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item .date,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item .time {
  color: var(--cosspra-dia1-text);
}

/* Día 2 (paneles 3 y 4 = Conferencias + Talleres) */
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item {
  background-color: var(--cosspra-dia2-bg);
}
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item .title,
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item .speaker_name,
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item .date,
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item .time,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item .title,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item .speaker_name,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item .date,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item .time {
  color: var(--cosspra-dia2-text);
}

/* El theme ya trae una regla propia para .card-description .name con mayor
   especificidad (6 clases) que pisa nuestra regla de arriba (4 clases).
   Forzamos con !important solo en este punto puntual para garantizar que
   el color por día gane. */
.schedule-tab-content .tab-pane:nth-of-type(1) .schedule-item .card-description .name,
.schedule-tab-content .tab-pane:nth-of-type(2) .schedule-item .card-description .name {
  color: var(--cosspra-dia1-text) !important;
}
.schedule-tab-content .tab-pane:nth-of-type(3) .schedule-item .card-description .name,
.schedule-tab-content .tab-pane:nth-of-type(4) .schedule-item .card-description .name {
  color: var(--cosspra-dia2-text) !important;
}

.schedule-sec .schedule-content-wrap .schedule-tab-content .schedule-item:hover {
  box-shadow: 0px 10px 20px 4px rgba(var(--bs-primary-rgb), 0.15);
}

/* ==========================================================================
   Violeta hardcodeado que NO usa las variables del theme (por eso el
   cambio de --bs-primary de arriba no le llega solo). Reemplazamos cada
   selector puntual encontrado en theme.css por el color institucional.
   ========================================================================== */

/* Barra de contacto bajo el hero (mail / ubicación) */
.info-sec .information-area .mail .icon i,
.info-sec .information-area .location .icon i,
.info-sec .information-area .number .icon i {
  color: var(--bs-primary);
}

/* Pill "NUESTRO PROGRAMA" / "DÍAS Y HORARIOS" / etc. (fondo tenía el
   violeta fijo aunque el texto ya usaba --bs-primary) */
.section-head .label {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Botón de envío del formulario de contacto */
.contact-sec .contact-wrap .contact-form .contact-btn {
  background: linear-gradient(var(--bs-gradient-color1), var(--bs-gradient-color2));
}
.contact-sec .contact-wrap .contact-form .contact-btn:hover {
  color: var(--bs-gradient-color2);
  border-color: var(--bs-gradient-color2);
}

/* Botón "ver más" del blog y pill de categoría en tarjetas de blog */
.blog-sec .section-head .blog-btn:hover {
  background-color: var(--bs-primary);
}
.blog-sec .blog-cards-wrap .card .card-body .label {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Íconos y links violeta dentro de blog feature / listado de blog */
.blog-feature-sec .blog-feature-wrap .blog-feature-content .blog-post-tag a i,
.blog-feature-sec .blog-feature-wrap .blog-feature-content .blog-feature-title:hover,
.blog-feature-sec .blog-feature-wrap .blog-feature-content .blog-comment a i,
.blog-post-area .blog-post-area-wrap .blog-post-item .item-content .post-tag a i,
.blog-post-area .blog-post-area-wrap .blog-post-item .item-content .post-title a:hover,
.blog-post-area .blog-post-area-wrap .blog-post-item .item-content .post-meta .comment i,
.blog-post-area .blog-post-area-wrap .blog-post-item .item-content .post-meta .read-btn i {
  color: var(--bs-primary);
}

/* Botón de play sobre el video */
.popup-play {
  background-color: var(--bs-primary);
}

/* ==========================================================================
   Header sticky (al hacer scroll)
   ========================================================================== */
.header-area .header-nav.sticky {
  --bs-navbar-padding-y: 10px;
  background-color: #827831f5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15);
  animation: 0.5s ease-in-out 0s normal none 1 running fadeInDown;
  margin-top: var(--global--admin-bar--height);
}
button#bt-d1,
button#bt-d2 {
  transition: background-color 0.3s ease, color 0.3s ease;
}

button#bt-d1 {
  background: #85AEB7;
}
button#bt-d1:hover {
  background: #165D74;
  color: #fff;
}

button#bt-d2 {
  background: #827831;
}
button#bt-d2:hover {
  background: #2E401C;
  color: #fff;
}