/* ============================================
   VARIABLES DE MARCA  
   ============================================ */
:root {
    /* Colores de marca */
    --brand-primary: #009887;
    --brand-primary-text: #021d1a;
    --brand-primary-light: #0edba2;
    --text-light: #0c57ee;

    /* Colores generales de sitio (usados por widgets propios) */
    --bg-site: #f8fafc;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border: #e2e8f0;

    /* Layout */
    --radius: 12px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipografía */
    --font-principal: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ============================================
   TIPOGRAFÍA GLOBAL
   ============================================ */
body {
    font-family: var(--font-principal);
}

/* Si algún componente de Bootstrap no hereda la
    fuente de body (poco común), descomenta esto: */
/*
    .btn,
    .form-control,
    .nav-link,
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-principal);
    }
    */


/* ============================================
   COMPONENTES: Fondos de marca
   (agrupados porque comparten el mismo color)
   ============================================ */
.g-bg-color-footer,
.g-bg-pink,
.g-bg-primary {
    background-color: var(--brand-primary) !important;
}

.fondo-verde-institucional {
    background-color: var(--brand-primary) !important;
    color: #ffffff;
    /* Texto en blanco para el contraste */
}


/* ============================================
   COMPONENTES: Acordeón
   ============================================ */
.u-accordion-bg-primary .u-accordion__header [aria-expanded="true"] {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}


/* ===============================================================
   COMPONENTES: Navegación (pills)
   =============================================================== */


.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--brand-primary-text);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--brand-primary);
    color: #ffffff;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link:focus {
    color: var(--brand-primary);
}


/* Estado hover/focus: mismo color, sin cambio */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.u-nav-v5-1 .nav-link:hover,
.u-nav-v5-1 .nav-link:focus {
    color: var(--brand-primary);
    isolation: isolate;
    /* evita que el borde-hover de Bootstrap tape tu color */
}

/* Estado activo (tab seleccionada) */
.nav-tabs .nav-link.active,
.u-nav-v5-1 .nav-link.active {
    color: var(--brand-primary);
    background-color: transparent;
    border-color: transparent;
}

/* Si tu theme pinta un borde inferior de color al hacer hover/active en tabs */
.u-nav-v5-1 .nav-link.active,
.u-nav-v5-1 .nav-link:hover {
    border-bottom-color: var(--brand-primary-);
}

/*==============================================================
   COMPONENTES: Alertas y listas
  ============================================================== */
.alert-warning,
.list-group-item.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}


/* ============================================
   COMPONENTES: Tablas
   ============================================ */
.table td,
.table th {
    border-top: 1px solid var(--brand-primary-light);
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--brand-primary-light);
}


/* ============================================
   SECCIÓN: Noticias
   ============================================ */
#noticias h3,
#noticias h6 {
    font-size: 18px;
    margin: 0 0 25px 10px;
}

#noticias h3 {
    line-height: normal;
    color: var(--text-light);
}



.timeline-dot {
    position: absolute;
    top: 1.25rem;
    left: calc(-1.5rem - 1px);
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bs-danger);
    border: 3px solid var(--bs-body-bg);
    z-index: 1;
}

/* Alterna el color como en tu imagen */
.timeline-item:nth-child(even) .timeline-dot {
    background: var(--bs-teal);
}


/* La imagen llena toda la altura de su columna sin deformarse */
.timeline-img {
    width: 100%;
    height: 100%;
    min-height: 110px;
    object-fit: cover;
    display: block;
}

.link-noticia {
    color: #215573;
}