/* Barra superior compartida por todas las páginas. */
body { margin: 0; }
.dex-topbar, .dex-topbar * { box-sizing: border-box; }
/* La barra no depende de que cada página traiga la regla [hidden]. */
.dex-topbar [hidden] { display: none !important; }
/* La barra provisional del HTML no se ve mientras site-nav.js dibuja la definitiva. */
.dex-nav[data-site-nav]:not(.is-ready) { visibility: hidden; }
.dex-topbar { position: sticky; top: 0; z-index: 20; color: #fff; background: linear-gradient(180deg, #131823, #0a0d14); border-bottom: 1px solid #262f40; box-shadow: 0 6px 24px #0008; font-family: "Space Grotesk", sans-serif; }
.dex-header-inner { width: min(100% - 36px, 1600px); min-height: 64px; display: flex; align-items: center; gap: 28px; margin: 0 auto; }
.dex-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: #f2f4fb; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.dex-logo { width: 42px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 4px #0008); }
.dex-brand .brand-accent { color: #ffd442; }
/* Pestañas: las que no caben pasan al menú «Más» (lo calcula site-nav.js). */
.dex-nav { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 0; }
.dex-nav a, .nav-more-btn { flex: 0 0 auto; padding: 8px 12px; color: #aab6cc; background: none; border: 1px solid transparent; border-radius: 18px; font: 700 13px "Space Grotesk", sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
.dex-nav a:hover, .nav-more-btn:hover, .nav-more.is-open .nav-more-btn { color: #fff; background: #1a2130; border-color: #303b50; transform: translateY(-1px) scale(1.05); }
.dex-nav a.active, .nav-more-btn.active { color: #fff; background: #1d2535; border-color: #ffd44299; }
.dex-nav a:has(.nav-badge) { position: relative; padding-right: 14px; }
.nav-badge { position: absolute; top: -5px; right: -6px; padding: 1px 6px; color: #08101f; background: #43db95; border-radius: 999px; font: 700 9px "DM Mono", monospace; letter-spacing: .05em; animation: nav-badge-pulse 2s ease-in-out infinite; pointer-events: none; }
.nav-more-menu .nav-badge { position: static; margin-left: 8px; }
@keyframes nav-badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 #43db9580; } 50% { box-shadow: 0 0 0 6px #43db9500; } }
.nav-more { position: relative; flex: 0 0 auto; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 7px; }
.nav-more-btn i { width: 7px; height: 7px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.nav-more.is-open .nav-more-btn i { margin-top: 3px; transform: rotate(-135deg); }
.nav-more-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 220px; display: grid; gap: 2px; padding: 8px; background: #121722; border: 1px solid #303b50; border-radius: 12px; box-shadow: 0 16px 34px #000c; }
.nav-more-menu::before { content: ""; position: absolute; top: -10px; right: 0; left: 0; height: 10px; }
.dex-nav .nav-more-menu a { padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.dex-nav .nav-more-menu a:hover { transform: none; }
/* Botón fijo de Feedback (siempre visible, también en móvil). */
.feedback-cta { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; min-height: 42px; padding: 2px 14px 2px 2px; color: #f2f4fb; background: linear-gradient(135deg, #2a2412, #141a26 70%); border: 1px solid #ffd44288; border-radius: 999px; text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 0 #ffd44200; transition: border-color .15s ease, box-shadow .2s ease, transform .15s ease; }
.feedback-cta:hover, .feedback-cta:focus-visible { border-color: #ffd442; box-shadow: 0 0 18px #ffd44240; transform: translateY(-1px); }
.feedback-cta[aria-current="page"] { border-color: #ffd442; background: linear-gradient(135deg, #3a3215, #1d2535 70%); }
.feedback-cta img { width: 62px; height: 62px; margin: -14px -8px -14px -10px; filter: drop-shadow(0 3px 3px #0009); transition: transform .2s ease; }
.feedback-cta:hover img { transform: rotate(-8deg) scale(1.08); }
.feedback-cta span { display: inline-flex; align-items: center; gap: 5px; font: 600 13px "Space Grotesk", sans-serif; }
.feedback-cta i { width: 8px; height: 8px; background: #58eb9b; border-radius: 50%; animation: feedback-ping 2s ease-in-out infinite; }
.feedback-cta b { color: #cfd8e8; font-weight: 600; }
.feedback-cta em { color: #ffd442; font-style: normal; font-weight: 700; }
@keyframes feedback-ping { 0%, 100% { box-shadow: 0 0 0 0 #58eb9b80; } 50% { box-shadow: 0 0 0 5px #58eb9b00; } }

@media (max-width: 1500px) {
  .feedback-cta b { display: none; }
  .feedback-cta em::before { content: "Feedback · "; color: #cfd8e8; font-weight: 600; }
}
@media (max-width: 1100px) {
  .feedback-cta em::before { content: ""; }
  .feedback-cta em { font-size: 0; }
  .feedback-cta em::after { content: "Feedback"; font-size: 13px; }
}
@media (max-width: 700px) {
  .dex-header-inner { width: calc(100% - 24px); min-height: 0; flex-wrap: wrap; gap: 0; padding-top: 9px; }
  .dex-brand { font-size: 15px; }
  .feedback-cta { min-height: 36px; margin-left: auto; padding-right: 11px; }
  .feedback-cta img { width: 54px; height: 54px; margin: -12px -7px -12px -9px; }
  .feedback-cta span { font-size: 12px; }
  .feedback-cta em::after { font-size: 12px; }
  .dex-logo { width: 34px; height: 32px; }
  .dex-nav { flex: 1 1 100%; order: 2; gap: 4px; padding: 7px 0 6px; }
  .dex-nav a, .nav-more-btn { padding: 7px 12px; font-size: 12px; }
  .nav-more-menu { position: fixed; top: auto; right: 12px; left: 12px; margin-top: 8px; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}