/* =====================================================================
   Encabezado nuevo (barra superior + cabecera + menú)
   Basado en el diseño de custom.css. Solo usa clases .cgz-*, así que no
   altera el resto del sitio (body, a, h1… quedan como los tenías).
   Colores: salen de los valores dinámicos de la BD (ver head.php).
   ===================================================================== */

.cgz-topbar,
.cgz-main {
  --cgz-green-900: var(--cgz-primary, #4C594F);
  --cgz-green-800: color-mix(in srgb, var(--cgz-green-900) 88%, #000);
  --cgz-green-700: color-mix(in srgb, var(--cgz-green-900) 82%, #fff);
  --cgz-gray-050:  #f6f6f7;
  --cgz-gray-border: #e2e2e2;
  --cgz-text: #1c1c1c;
}

/* ---------- Barra superior ---------- */
.cgz-topbar { background: var(--cgz-green-900); color: #fff; font-size: .875rem; }
.cgz-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: 1rem; }
.cgz-topbar__date { text-transform: capitalize; }
.cgz-topbar__right { display: flex; align-items: center; gap: .875rem; }

.cgz-social-list { list-style: none; display: flex; align-items: center; gap: .875rem; margin: 0; padding: 0; }
.cgz-topbar .cgz-social-list a { color: #fff; opacity: .9; text-decoration: none; display: inline-flex; }
.cgz-topbar .cgz-social-list a:hover,
.cgz-topbar .cgz-social-list a:focus-visible { opacity: 1; color: #fff; }

.cgz-divider { width: 1px; height: 1rem; background: rgba(255,255,255,.25); display: inline-block; }

.cgz-fontsize { display: flex; align-items: center; gap: .25rem; }
.cgz-fontsize__btn {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1; padding: .3125rem .4375rem;
  border-radius: .25rem; cursor: pointer;
}
.cgz-fontsize__btn:hover { background: rgba(255,255,255,.25); }

.cgz-topbar a:focus-visible,
.cgz-topbar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 767px) {
  .cgz-topbar { font-size: .75rem; }
  .cgz-topbar__inner { flex-direction: column; justify-content: center; gap: 6px; padding: 6px 0; }
  .cgz-topbar__right { justify-content: center; gap: .75rem; }
}

/* ---------- Cabecera principal ---------- */
.cgz-main { width: 100%; background: #fff; position: relative; z-index: 100; }
.cgz-main__inner { display: flex; align-items: center; gap: 1rem; padding-top: .625rem; padding-bottom: .625rem; }

.cgz-main { --cgz-logo-width: 11.25rem; }  /* ajusta este valor: ancho que ocupa el logo */
.cgz-brand { display: flex; align-items: center; flex: 0 0 var(--cgz-logo-width); width: var(--cgz-logo-width); max-width: 100%; }
.cgz-brand__logo { height: 6.125rem; width: 100%; object-fit: cover; object-position: left center; }

/* ---------- Menú ---------- */
.cgz-nav { flex: 1; min-width: 0; position: relative; }
.cgz-nav__toggle {
  display: none; align-items: center; gap: .5rem; margin-left: auto;
  background: transparent; border: 1px solid var(--cgz-gray-border); border-radius: .375rem;
  padding: .5rem .75rem; font-weight: 600; color: var(--cgz-text); cursor: pointer;
}
.cgz-nav__toggle:focus-visible { outline: 2px solid var(--cgz-green-900); outline-offset: 2px; }

/* Bootstrap oculta .collapse:not(.show); en escritorio lo forzamos visible */
.cgz-nav__collapse.collapse { display: flex !important; align-items: center; justify-content: center; gap: 1rem; width: 100%; }

.cgz-nav__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem .75rem; margin: 0; padding: 0; list-style: none; }
.cgz-nav__item { position: relative; }

.cgz-main .cgz-nav__link {
  color: var(--cgz-text); font-size: .9375rem; font-weight: 600; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: .25rem;
  text-align: center; line-height: 1.15; padding: .375rem .3125rem;
  border-bottom: 3px solid transparent;
}
.cgz-main .cgz-nav__link:hover,
.cgz-main .cgz-nav__link:focus-visible { color: var(--cgz-green-800); }
.cgz-main .cgz-nav__link.active { color: var(--cgz-green-800); border-bottom-color: var(--cgz-green-800); }
.cgz-main .cgz-nav__link:focus-visible { outline: 2px solid var(--cgz-green-900); outline-offset: 2px; }
.cgz-nav__caret { font-size: .6875rem; }

/* Submenú (solo aparece si un ítem trae 'hijos') */
.cgz-nav__submenu {
  display: none; position: absolute; top: 100%; left: 0; z-index: 9999;
  min-width: 13.75rem; margin: 0; padding: .5rem 0; list-style: none; background: #fff;
  border-radius: .375rem; border-top: 3px solid var(--cgz-green-800); box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.cgz-nav__item:hover > .cgz-nav__submenu,
.cgz-nav__item:focus-within > .cgz-nav__submenu { display: block; }
.cgz-nav__submenu a { display: block; padding: .5rem 1.125rem; font-size: .9375rem; color: #333; text-decoration: none; }
.cgz-nav__submenu a:hover,
.cgz-nav__submenu a:focus-visible { background: var(--cgz-gray-050); color: var(--cgz-green-800); }

/* ---------- Buscador y botón "En vivo" ---------- */
.cgz-actions { display: flex; align-items: center; gap: .75rem; flex: 0 0 auto; }

.cgz-search { display: flex; align-items: center; width: 14.275rem; max-width: 100%; box-sizing: border-box; margin: 0; }
.cgz-search__input {
  flex: 1; min-width: 0; height: 2.25rem; border: 1px solid var(--cgz-gray-border); border-right: none;
  border-radius: .375rem 0 0 .375rem; padding: 0 .75rem; font-size: .8125rem; background: var(--cgz-gray-050); outline: none;
}
.cgz-search__input:focus { border-color: var(--cgz-green-900); background: #fff; }
.cgz-search__btn {
  height: 2.25rem; width: 2.5rem; background: var(--cgz-gray-050); color: #666;
  border: 1px solid var(--cgz-gray-border); border-left: none; border-radius: 0 .375rem .375rem 0; cursor: pointer;
}
.cgz-search__btn:hover,
.cgz-search__btn:focus-visible { background: var(--cgz-green-900); color: #fff; }

.cgz-main .cgz-live-btn {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--cgz-green-900); color: #fff;
  font-size: .9375rem; font-weight: 700; text-decoration: none; padding: .5rem .75rem; border-radius: .375rem; white-space: nowrap;
}
.cgz-main .cgz-live-btn:hover,
.cgz-main .cgz-live-btn:focus-visible { background: var(--cgz-green-700); color: #fff; }

/* ---------- Tablet / móvil ---------- */
@media (max-width: 991px) {
  .cgz-main__inner { flex-wrap: wrap; }
  .cgz-brand { flex: 0 1 auto; width: auto; }
  .cgz-brand__logo { height: 4.5rem; width: auto; }
  .cgz-nav { flex: 1 1 auto; }
  .cgz-nav__toggle { display: inline-flex; }

  .cgz-nav__collapse.collapse { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .875rem; }
  .cgz-nav__collapse.collapse:not(.show) { display: none !important; }
  .cgz-nav__collapse.collapse.show { display: flex !important; padding-top: .75rem; }

  .cgz-nav__list { flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; }
  .cgz-main .cgz-nav__link { justify-content: flex-start; text-align: left; padding: .625rem .25rem; }

  .cgz-nav__submenu { position: static; display: block; box-shadow: none; border-top: 0; margin: 0 0 .25rem .75rem; padding: 0; }

  .cgz-actions { flex-direction: column; align-items: stretch; }
  .cgz-search { width: 100%; }
  .cgz-main .cgz-live-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cgz-topbar *, .cgz-main * { transition: none !important; }
}

.footer-divider {
    border-top: 1px solid #FFFFFF1F !important;
}