/* ════════════════════════════════════════════════════════════════
   marketreports.cloud — Estilos compartidos
   Logo wordmark · selector de idioma · helpers de chrome.
   Construido sobre design-tokens.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Logo (generado por logo.js) ── */
.logo-lockup { display: inline-flex; align-items: center; gap: 9px; }
.logo-wordmark { display: inline-flex; align-items: center; gap: 9px; }
.logo-text {
  font-weight: 500; font-size: 17px; letter-spacing: -0.02em;
  color: var(--text-primary); white-space: nowrap;
}
.logo-text-dim { color: var(--text-tertiary); }
.logo-mark svg { display: block; }
.logo-mark { color: var(--text-primary); }

/* ── Selector de idioma ── */
[data-lang-switch] { position: relative; display: inline-flex; }
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; font-family: var(--font-mono);
  padding: 7px 10px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-secondary); cursor: pointer; line-height: 1;
  transition: border-color .15s, color .15s, background .15s;
}
.lang-trigger:hover { color: var(--text-primary); border-color: var(--border-strong); }
.lang-trigger svg:first-child { opacity: .8; }
.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 168px; padding: 6px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column; gap: 2px;
  max-height: min(62vh, 440px); overflow-y: auto;
}
[data-lang-switch].open .lang-menu { display: flex; }

/* RTL (árabe): el contenido se invierte vía dir="rtl"; ajustes puntuales */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
[dir="rtl"] .lang-opt { text-align: right; }
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-md);
  border: none; background: transparent; cursor: pointer;
  text-align: left; width: 100%; color: var(--text-secondary);
  transition: background .12s, color .12s;
}
.lang-opt:hover { background: var(--bg-hover); color: var(--text-primary); }
.lang-opt[aria-current="true"] { color: var(--primary); background: var(--primary-subtle); }
.lang-code {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  margin-left: auto; color: var(--text-tertiary); flex: none;
}
.lang-flag {
  display: inline-flex; width: 18px; height: 13px; flex: none;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-strong) 60%, transparent);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-opt[aria-current="true"] .lang-code { color: var(--primary); }
.lang-label { font-size: 13px; font-weight: 500; }

/* ── Conmutador de tema ── */
.theme-btn {
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-secondary); border-radius: var(--r-md);
  width: 36px; height: 36px; cursor: pointer; flex: none;
  display: inline-grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.theme-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .ico-moon { display: block; }
.theme-btn .ico-sun { display: none; }
[data-theme="dark"] .theme-btn .ico-moon { display: none; }
[data-theme="dark"] .theme-btn .ico-sun { display: block; }

/* ── Marketplace badge dots (colores de marca, solo dots) ── */
.mkt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mkt-aws { background: var(--mkt-aws); }
.mkt-azure { background: var(--mkt-azure); }
.mkt-gcp { background: var(--mkt-gcp); }
.mkt-snowflake { background: var(--mkt-snowflake); }
.mkt-atlassian { background: var(--mkt-atlassian); }
.mkt-github { background: var(--mkt-github); }
.mkt-oracle { background: var(--mkt-oracle); }
[data-theme="dark"] .mkt-github { background: #e6edf3; }

/* ── Utilidades ── */
.mr-container { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }