/* ============================================================
   OUQ · Site theme — chrome (top bar, nav, footer) + dark mode
   Imported on every page after colors_and_type.css
   ============================================================ */

/* Los correos son una sola palabra larga: en celular se parten para no ensanchar la página. */
a[href^="mailto:"] { overflow-wrap: anywhere; }

/* ─── DARK MODE TOKENS ─────────────────────────────────── */
[data-theme="dark"] {
  --ouq-bg:           #0E1722;
  --ouq-bg-alt:       #161F2C;
  --ouq-warm:         #161F2C;
  --ouq-warm-dark:    #1F2A3A;

  --ouq-text:         #E8ECF1;
  --ouq-text-muted:   #A4B0BE;
  --ouq-text-faint:   #8492A3;   /* antes #6E7C8E: 4,2:1 sobre el fondo; ahora 5,7:1 */

  --ouq-primary:      #5B9BD5;   /* lighter institucional for dark bg */
  --ouq-primary-700:  #75AEDD;
  --ouq-primary-900:  #08111B;   /* deepest surface */
  --ouq-on-primary:   #0E1722;   /* el blanco sobre #5B9BD5 da 3:1; este, 6,1:1 */

  --ouq-secondary:    #8FB6D8;
  --ouq-secondary-300:#5B9BD5;
  --ouq-secondary-100:#1B2A3D;

  --ouq-rule:         #2A4866;
  --ouq-rule-soft:    #2A3548;
  --ouq-rule-faint:   #1E2738;

  --ouq-positive:     #5BC598;
  --ouq-negative:     #E27A7A;

  --ouq-cat-1:        #5B9BD5;
  --ouq-cat-2:        #A9CBEB;
  --ouq-cat-3:        #E3A13B;
  --ouq-cat-4:        #9AA3AE;
  --ouq-cat-texto-1:  #0E1722;
}

/* Theme-aware overrides for the institutional blue surfaces
   (footer, dark hero blocks) so they read correctly in dark mode */
[data-theme="dark"] .footer,
[data-theme="dark"] .topbar,
[data-theme="dark"] .featured,
[data-theme="dark"] .dash {
  background: #050A12;
}

/* When light backgrounds contain navy text, swap to white */
[data-theme="dark"] .section-title,
[data-theme="dark"] .block__title,
[data-theme="dark"] .block__lead,
[data-theme="dark"] .ind__num,
[data-theme="dark"] .ind-head__title,
[data-theme="dark"] .nav__brand .name {
  color: var(--ouq-text);
}

/* Logo swap (assets/logo-primary is dark blue, hard to see on dark bg)
   We invert the primary logo via filter for dark mode header. */
[data-theme="dark"] .nav__brand img,
[data-theme="dark"] img.logo-auto {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* ─── SHARED CHROME — TOP BAR ───────────────────────── */
.ouq-topbar {
  background: var(--ouq-primary-900);
  color: rgba(255,255,255,0.78);
  font-family: var(--ouq-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.ouq-topbar__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.ouq-topbar__row a { color: #fff; cursor: default; }
.ouq-topbar__row a:hover { color: var(--ouq-secondary-300); }
.ouq-topbar__row .sep { opacity: 0.4; margin: 0 12px; }
/* Correo del Observatorio en la barra (todas las páginas). En celular, "Escríbenos". */
.ouq-topbar__der { display: flex; align-items: center; min-width: 0; }
.ouq-topbar__row a.ouq-topbar__mail { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 600; white-space: nowrap; }
.ouq-topbar__row a.ouq-topbar__mail:hover, .ouq-topbar__row a.ouq-topbar__mail:focus-visible { color: var(--ouq-secondary-300); text-decoration: underline; text-underline-offset: 3px; }
.ouq-topbar__mail svg { width: 15px; height: 15px; flex: none; }
.ouq-topbar__mail-corto { display: none; }
/* Para que la barra no se parta en dos líneas: en tableta salen los enlaces (están en el pie y en el
   menú) y, más angosto, la fecha de actualización (está en el pie). */
@media (max-width: 1100px) { .ouq-topbar__links { display: none; } }
@media (max-width: 860px) { .ouq-topbar__upd { display: none; } }
.ouq-topbar__row .pulse {
  display: inline-block; width: 7px; height: 7px;
  background: #5BC598; border-radius: 50%; margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(91,197,152,0.25);
  animation: ouq-pulse 2s infinite;
}
@keyframes ouq-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(91,197,152,0.25); }
  50%     { box-shadow: 0 0 0 7px rgba(91,197,152,0.05); }
}

/* ─── MAIN NAV ──────────────────────────────────────── */
.ouq-nav {
  background: var(--ouq-bg);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ouq-rule-faint);
}
.ouq-nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 24px;
}
.ouq-nav__brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ouq-nav__brand img { height: 40px; width: auto; }
.ouq-nav__links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
@media (max-width: 1100px) { .ouq-nav__links { display: none; } }
.ouq-nav__link {
  font-family: var(--ouq-font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 10px 12px;
  color: var(--ouq-text);
  position: relative;
  cursor: default;
  white-space: nowrap;
}
.ouq-nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 1px; background: var(--ouq-secondary); transform: scaleX(0);
  transform-origin: left; transition: transform .18s ease;
}
.ouq-nav__link:hover::after { transform: scaleX(1); }
.ouq-nav__link.is-active { color: var(--ouq-primary); font-weight: 600; }
.ouq-nav__link.is-active::after { transform: scaleX(1); background: var(--ouq-primary); }

.ouq-nav__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

.ouq-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent;
  color: var(--ouq-text-muted);
  cursor: default;
  transition: all .15s ease;
  background: transparent;
}
.ouq-icon-btn:hover { color: var(--ouq-primary); border-color: var(--ouq-rule-soft); }
.ouq-icon-btn svg { width: 18px; height: 18px; stroke-width: 1.7; }

.ouq-nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ouq-primary);
  color: var(--ouq-on-primary) !important;
  padding: 10px 18px;
  font-family: var(--ouq-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
  transition: background .15s ease;
  white-space: nowrap;
}
.ouq-nav__cta:hover { background: var(--ouq-primary-700); }
.ouq-nav__cta::after { content: "→"; font-family: var(--ouq-font-body); }

/* ─── MENÚ DE CELULAR Y TABLETA (≤1100 px) ─────────────
   Por debajo de 1100 px la barra oculta los enlaces; el botón de menú abre este
   panel, que cuelga de la barra fija (no bloquea el scroll de la página y, si no
   cabe en la pantalla, se desplaza por dentro). Lo arma chrome.js en las 11 páginas. */
.ouq-nav__menu-btn { display: none; }
.ouq-icon-btn:focus-visible,
.ouq-nav__link:focus-visible,
.ouq-nav__cta:focus-visible { outline: 2px solid var(--ouq-secondary); outline-offset: 2px; }
.ouq-nav__menu-btn[aria-expanded="true"] { color: var(--ouq-primary); border-color: var(--ouq-rule-soft); background: var(--ouq-warm); }
.ouq-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ouq-bg);
  border-top: 1px solid var(--ouq-rule-faint);
  border-bottom: 2px solid var(--ouq-primary);
  box-shadow: 0 14px 30px rgba(15,42,66,0.14);
  max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px);
  overflow-y: auto; overscroll-behavior: contain;
}
.ouq-menu[hidden] { display: none !important; }
[data-theme="dark"] .ouq-menu { box-shadow: 0 14px 30px rgba(0,0,0,0.5); }
.ouq-menu__lista { list-style: none; margin: 0; padding: var(--ouq-space-2) 0; }
.ouq-menu__link {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 var(--ouq-space-4);
  font-family: var(--ouq-font-display); font-weight: 600; font-size: 17px;
  color: var(--ouq-text);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--ouq-rule-faint);
}
.ouq-menu__lista li:last-child .ouq-menu__link { border-bottom: 0; }
.ouq-menu__link:hover { background: var(--ouq-warm); color: var(--ouq-primary); }
.ouq-menu__link.is-active { color: var(--ouq-primary); border-left-color: var(--ouq-primary); background: var(--ouq-warm); }
.ouq-menu__link:focus-visible,
.ouq-menu__cta:focus-visible { outline: 2px solid var(--ouq-secondary); outline-offset: -2px; }
.ouq-menu__mail {
  display: flex; align-items: center; gap: 10px; min-height: 48px;
  padding: 0 var(--ouq-space-4); margin-bottom: var(--ouq-space-2);
  border-top: 1px solid var(--ouq-rule-faint);
  font-family: var(--ouq-font-display); font-weight: 600; font-size: 15px;
  color: var(--ouq-secondary); overflow-wrap: anywhere;
}
.ouq-menu__mail svg { width: 18px; height: 18px; flex: none; }
.ouq-menu__mail:hover { background: var(--ouq-warm); }
.ouq-menu__mail:focus-visible { outline: 2px solid var(--ouq-secondary); outline-offset: -2px; }
/* En celular el botón "Explorar" de la barra pasa al menú (no cabe junto al botón). */
.ouq-menu__cta { display: none; }
@media (max-width: 1100px) {
  .ouq-nav__menu-btn { display: inline-flex; }
}
@media (min-width: 1101px) {
  .ouq-menu { display: none !important; }
}
@media (max-width: 480px) {
  .ouq-nav__cta { display: none; }
  .ouq-menu__cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: var(--ouq-space-2) 0 var(--ouq-space-4); min-height: 48px;
    background: var(--ouq-primary); color: var(--ouq-on-primary);
    font-family: var(--ouq-font-display); font-weight: 600; font-size: 14px;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .ouq-menu__cta::after { content: "→"; font-family: var(--ouq-font-body); }
}

/* Search popover (renders to body in JS) */
.ouq-search-pop {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--ouq-bg);
  border-bottom: 1px solid var(--ouq-rule-faint);
  z-index: 100;
  transform: translateY(-100%);
  transition: transform .18s ease;
  padding: 24px 0;
}
.ouq-search-pop.is-open { transform: translateY(0); }
.ouq-search-pop__row { display: grid; grid-template-columns: 24px 1fr 80px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 2px solid var(--ouq-primary); }
.ouq-search-pop input {
  border: 0; background: transparent; padding: 0;
  font-family: var(--ouq-font-display); font-weight: 500;
  font-size: 28px; color: var(--ouq-text); outline: none; width: 100%;
}
.ouq-search-pop input::placeholder { color: var(--ouq-text-faint); }
.ouq-search-pop .esc { font-family: var(--ouq-font-mono); font-size: 11px; color: var(--ouq-text-faint); text-align: right; letter-spacing: 0.06em; }
.ouq-search-pop .esc kbd { padding: 3px 7px; border: 1px solid var(--ouq-rule-soft); margin-left: 6px; font-family: var(--ouq-font-mono); }
.ouq-search-pop__results { padding-top: 20px; max-height: 60vh; overflow-y: auto; }
.ouq-search-pop__hit { padding: 14px 0; border-bottom: 1px solid var(--ouq-rule-faint); display: grid; grid-template-columns: 100px 1fr auto; gap: 16px; align-items: baseline; cursor: default; }
.ouq-search-pop__hit:hover, .ouq-search-pop__hit.is-active { background: var(--ouq-warm); padding-left: 12px; padding-right: 12px; }
.ouq-search-pop__hit .code { font-family: var(--ouq-font-mono); font-size: 12px; color: var(--ouq-primary); font-weight: 600; }
.ouq-search-pop__hit .name { font-family: var(--ouq-font-display); font-weight: 600; font-size: 17px; color: var(--ouq-text); }
.ouq-search-pop__hit .cat { font-family: var(--ouq-font-mono); font-size: 11px; color: var(--ouq-text-faint); letter-spacing: 0.06em; text-transform: uppercase; }
.ouq-search-pop__hint { padding: 24px 0; color: var(--ouq-text-faint); font-size: 14px; }
.ouq-search-pop__hint kbd { font-family: var(--ouq-font-mono); padding: 2px 7px; border: 1px solid var(--ouq-rule-soft); margin: 0 4px; }
.ouq-search-pop__overlay { position: fixed; inset: 0; background: rgba(15,42,66,0.4); z-index: 99; opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ouq-search-pop__overlay.is-open { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .ouq-search-pop__overlay { background: rgba(0,0,0,0.6); }

/* ─── FOOTER ────────────────────────────────────────── */
.ouq-footer {
  background: var(--ouq-primary-900);
  color: rgba(255,255,255,0.8);
  padding: 64px 0 32px;
}
.ouq-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.ouq-footer__brand img { height: 48px; margin-bottom: 18px; filter: brightness(0) invert(1); }
.ouq-footer__brand p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.65); max-width: 360px; margin: 0; }
.ouq-footer__mail { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.ouq-footer__mail-k {
  font-family: var(--ouq-font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ouq-secondary-300);
}
.ouq-footer__mail-v {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%;
  font-family: var(--ouq-font-display); font-weight: 600; font-size: 18px; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 3px;
}
.ouq-footer__mail-v span { min-width: 0; overflow-wrap: anywhere; }
.ouq-footer__mail-v svg { width: 20px; height: 20px; flex: none; }
.ouq-footer__mail-v:hover, .ouq-footer__mail-v:focus-visible { border-bottom-color: #fff; }
.ouq-footer__col h4 {
  font-family: var(--ouq-font-display);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ouq-secondary-300);
  margin: 0 0 16px;
}
.ouq-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ouq-footer__col li { font-size: 14px; cursor: default; }
.ouq-footer__col a { color: rgba(255,255,255,0.78); }
.ouq-footer__col a:hover { color: #fff; }
.ouq-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding-top: 24px;
  font-family: var(--ouq-font-mono); font-size: 12px; color: rgba(255,255,255,0.55);
}
.ouq-footer__bottom .links { display: flex; gap: 22px; }
.ouq-footer__bottom .links a:hover { color: #fff; }
@media (max-width: 880px) {
  .ouq-footer__top { grid-template-columns: 1fr 1fr; }
  .ouq-footer__brand { grid-column: 1 / -1; }   /* descripción y contacto a todo el ancho */
}
@media (max-width: 480px) { .ouq-footer__mail-v { font-size: 16px; } }

/* ─── FOOTER · INSTITUTIONAL HEADER ────────────────── */
.ouq-footer__institution {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  padding-bottom: 36px; margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.ouq-footer__initiative { display: flex; flex-direction: column; gap: 5px; }
.ouq-footer__initiative-label {
  font-family: var(--ouq-font-mono);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.ouq-footer__initiative-name {
  font-family: var(--ouq-font-display);
  font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.92);
  letter-spacing: 0.01em; max-width: 460px;
}
.ouq-footer__quito { height: 60px; width: auto; flex-shrink: 0; }
@media (max-width: 560px) {
  .ouq-footer__institution { gap: 18px; padding-bottom: 28px; margin-bottom: 32px; }
  .ouq-footer__quito { height: 46px; }
}

/* ─── COMMON UTILITIES ─────────────────────────────── */
/* Margen lateral del sitio: 48 px, 24 px en celular. Los contenedores de página
   que combinan .ouq-wrap con su propio padding lo conservan con var(--ouq-gutter). */
:root { --ouq-gutter: 48px; }
@media (max-width: 720px) { :root { --ouq-gutter: 24px; } }
.ouq-wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--ouq-gutter); }

/* Page-level scaffolding */
html, body { background: var(--ouq-bg); color: var(--ouq-text); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
body { margin: 0; }

/* Density modifier */
[data-density="comfy"]  { --density-pad-y: 144px; --density-card-pad: 40px; }
[data-density="regular"]{ --density-pad-y: 112px; --density-card-pad: 32px; }
[data-density="tight"]  { --density-pad-y: 80px;  --density-card-pad: 24px; }
:root { --density-pad-y: 112px; --density-card-pad: 32px; }

/* ─── BREADCRUMB ───────────────────────────────────── */
.ouq-crumbs { padding: 24px 0 0; }
.ouq-crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--ouq-font-mono); font-size: 12px; color: var(--ouq-text-faint); letter-spacing: 0.06em; }
.ouq-crumbs li::after { content: "/"; margin-left: 8px; color: var(--ouq-rule-soft); }
.ouq-crumbs li:last-child::after { content: ""; }
.ouq-crumbs li:last-child { color: var(--ouq-primary); font-weight: 600; }
.ouq-crumbs a:hover { color: var(--ouq-secondary); }

/* ─── MÓVIL (≤720 px) ──────────────────────────────── */
/* El chrome compartido tiene que caber en 360 px sin desborde horizontal.
   Barra superior: queda el estado de la edición; los enlaces y la fecha de
   actualización ya están en el pie. Navegación: logo, búsqueda, tema y
   "Explorar" más compactos. */
@media (max-width: 720px) {
  .ouq-topbar__row { gap: 12px; }
  .ouq-topbar__status { white-space: nowrap; min-width: 0; }
  .ouq-topbar__upd,
  .ouq-topbar__links,
  .ouq-topbar__mail-largo { display: none; }
  .ouq-topbar__mail-corto { display: inline; }

  .ouq-nav__row { gap: 12px; }
  .ouq-nav__brand img { height: 30px; }
  .ouq-nav__actions { gap: 2px; }
  .ouq-icon-btn { width: 36px; height: 36px; }
  .ouq-nav__cta { padding: 10px 12px; }

  .ouq-search-pop { padding: 16px 0; }
  .ouq-search-pop__row { grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
  .ouq-search-pop input { font-size: 20px; }
  .ouq-search-pop .esc { display: none; }
  .ouq-search-pop__hit { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; }
  .ouq-search-pop__hit .cat { grid-column: 2; }
  .ouq-search-pop__hit:hover, .ouq-search-pop__hit.is-active { padding-left: 0; padding-right: 0; }
}
@media (max-width: 380px) {
  .ouq-nav__brand img { height: 26px; }
  .ouq-nav__cta::after { content: none; }
}