/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: var(--topbar-h, 72px);
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--s1);
  border-right: 1px solid var(--b1);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-nav {
  flex: 1;
  padding: 22px 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: navitem;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 22px 11px 18px;
  cursor: pointer;
  color: var(--t3);
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
  border: none;
  border-left: 2px solid transparent;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
  counter-increment: navitem;
}
.sidebar-item::before {
  content: counter(navitem, decimal-leading-zero);
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--t4);
  font-weight: 500;
  min-width: 20px;
  transition: color .15s ease;
}
.sidebar-item:hover {
  color: var(--t1);
  background: rgba(255, 255, 255, 0.02);
}
.sidebar-item:hover::before {
  color: var(--color-brand);
}
.sidebar-item.active {
  color: var(--color-brand);
  background: rgba(217, 164, 65, 0.06);
  border-left-color: var(--color-brand);
}
.sidebar-item.active::before {
  color: var(--color-brand);
}
.sidebar-item .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.sidebar-item .icon svg {
  width: 16px;
  height: 16px;
}
.sidebar-item .label {
  opacity: 1;
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 1;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--b1);
  flex-shrink: 0;
}
.sidebar-footer button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 4px;
  cursor: pointer;
  color: var(--t4);
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s;
  border: none;
  background: none;
  width: 100%;
}
.sidebar-footer button .icon svg { width: 16px; height: 16px; }
.sidebar-footer button:hover {
  color: var(--red);
}
.sidebar-footer button.sb-profile:hover {
  color: var(--color-brand);
}
.sidebar-footer button.sb-profile.active {
  color: var(--color-brand);
}
.sidebar-footer .label {
  opacity: 1;
}

/* ===== TOPBAR ===== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  gap: 20px;
  z-index: 300;
  box-sizing: border-box;
  background: rgba(2,6,23,0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.topbar-left .topbar-logo-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 2px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar-left .topbar-logo-link svg {
  width: 110px;
  height: auto;
  opacity: 1;
  display: block;
}
/* ep-dashboard-inspired compact brand group: hairline left divider inside chip */
.topbar-brand-group {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--b2);
  min-width: 0;
  line-height: 1;
}
.topbar-left .brand {
  font-family: 'Inter', 'Geist', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  color: #F5F5F5;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.topbar-left .brand-logo-img {
  display: block;
  height: 14px;
  width: auto;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 1 auto;
}

.month-selector {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
}
.month-selector button {
  padding: 5px 10px;
  border-radius: 6px;
  font: 600 10px 'Inter', sans-serif;
  cursor: pointer;
  border: 1px solid var(--b1);
  background: transparent;
  color: var(--t4);
  transition: .15s;
}
.month-selector button.on {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.month-selector button:hover:not(.on) {
  color: var(--t2);
  border-color: var(--b2);
}

.lang-toggle {
  display: flex;
  gap: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
}
.lang-toggle button {
  padding: 4px 8px;
  border-radius: 0;
  font: 600 10px 'Inter', sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--t4);
  transition: color .15s;
}
.lang-toggle button + button {
  border-left: 1px solid var(--b1);
}
.lang-toggle button.on {
  background: transparent;
  color: var(--t1);
}
.lang-toggle button:hover:not(.on) {
  color: var(--t2);
}

/* ===== TOPBAR-LEFT — BACKOFFICE BRAND CHIP (ep-dashboard-inspired, compact) ===== */
.topbar-left .brand-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: 2px;
  padding: 3px 7px;
  background: transparent;
  border: 1px solid var(--b1);
  border-radius: 4px;
  font-family: 'Geist Mono', 'Noto Sans Mono', ui-monospace, Menlo, monospace;
  line-height: 1;
  white-space: nowrap;
  opacity: .6;
}
.topbar-left .brand-tag-label {
  font-size: 8px;
  font-weight: 500;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.topbar-left .brand-tag-ver {
  font-size: 9px;
  font-weight: 600;
  color: var(--t2);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

/* ===== TOPBAR-RIGHT — LANG · THEME · CLOCK · ACCOUNT (horizontal) ===== */
.topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  font-size: 11px;
  color: #a8a8a8;
}

.tb-divider {
  display: none;
}

/* user — minimal horizontal text, EP pink accent on role */
.tb-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist Mono', 'Noto Sans Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.tb-user-at {
  color: #5c5c5c;
  font-weight: 600;
}
.tb-user-name {
  color: #f0f0f0;
  font-weight: 600;
}
.tb-user-role {
  color: #D9A441;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 6px;
  background: rgba(217, 164, 65, 0.08);
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 3px;
  margin-left: 4px;
}

/* Clock — minimal mono text, no LCD effect */
.tb-clock {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  position: relative;
  overflow: visible;
}
.tb-clock::before { display: none; }
.tb-clock-str {
  font-family: 'Geist Mono', 'Noto Sans Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--t3);
  text-shadow: none;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  position: relative;
}
.tb-clock-day { color: var(--t4); margin-right: 6px; font-weight: 500; }
.tb-clock-time { color: var(--t2); font-weight: 600; }

@media (max-width: 1024px) {
  .topbar { padding: 0 28px; gap: 14px; }
  .topbar-left { gap: 10px; }
}

@media (max-width: 900px) {
  .topbar-left .brand-tag-label { display: none; }
  .tb-user-role { display: none; }
  .topbar-right { gap: 10px; }
  .tb-clock { padding: 4px 10px; }
  .tb-clock-str { font-size: 11px; letter-spacing: 0.8px; }
}

/* ===== WELCOME SPLASH ===== */
#welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 700px 500px at 50% 42%, rgba(217, 164, 65, 0.10), transparent 62%),
    radial-gradient(ellipse 900px 600px at 50% 55%, rgba(217, 164, 65, 0.06), transparent 70%),
    var(--bg, #020617);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
#welcome-splash.off {
  opacity: 0;
  pointer-events: none;
}
#welcome-splash .ws-inner {
  text-align: center;
  max-width: 1100px;
  padding: 0 24px;
}
.ws-kicker {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold, #D9A441);
}
.ws-greeting {
  font-family: 'Geist', 'Inter', sans-serif;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
  color: #F1F5F9;
  margin: 14px 0 0;
}
.ws-hi {
  font-weight: 400;
  color: var(--t3);
  letter-spacing: -0.3px;
}
.ws-name {
  color: #ffffff;
  display: inline-block;
  filter: drop-shadow(0 2px 16px rgba(255, 255, 255, 0.18));
  font-weight: 700;
}
.ws-progress {
  width: min(280px, 60vw);
  height: 2px;
  margin: 28px auto 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.ws-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #D9A441, #F5CEED, #D9A441);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(217, 164, 65, 0.35);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== MAIN CONTENT ===== */
/* Extra breathing room (24px) below the sticky topbar, matches ep-dashboard feel. */
.main-content {
  margin-left: var(--sidebar-w);
  padding-top: calc(var(--topbar-h) + 24px);
  min-height: 100vh;
}

#app-content {
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 40px 48px;
}

/* ===== GRID ROWS ===== */
.row { display: grid; gap: 12px; margin-bottom: 16px; }
.r6  { grid-template-columns: repeat(6,1fr); }
.r5  { grid-template-columns: repeat(5,1fr); }
.r4  { grid-template-columns: repeat(4,1fr); }
.r3  { grid-template-columns: repeat(3,1fr); }
.r2  { grid-template-columns: repeat(2,1fr); }
.r1  { grid-template-columns: 1fr; }

/* ===== SECTION LABEL ===== */
.sl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 14px;
  padding-left: 2px;
}

/* ===== FOOTER — sits inside .main-content, mirrors #app-content column ===== */
.app-footer {
  max-width: 1360px;
  margin: 0 auto;
  text-align: left;
  padding: 14px 40px;
  border-top: 1px solid var(--b1);
  background: transparent;
}
.app-footer svg {
  width: 100px;
  opacity: .15;
  display: block;
  margin: 0 auto 10px;
}
.app-footer .cb {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 90, 90,.2);
  background: rgba(255, 90, 90,.05);
  color: var(--red);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.app-footer .ft {
  font-size: 10px;
  color: var(--t2);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

/* ===== WIDE PAGES — full width + larger text =====
   Applies to all main pages (Dashboard, Social, Paid, Insights, Tasks, SEO Tracker).
   Admin + operations keep the default narrower layout. */
body[data-page="dashboard"] #app-content,
body[data-page="social"] #app-content,
body[data-page="paid"] #app-content,
body[data-page="insights"] #app-content,
body[data-page="tasks"] #app-content,
body[data-page="seo-tracker"] #app-content,
body[data-page="propuestas"] #app-content,
body[data-page="templates"] #app-content,
body[data-page="admin"] #app-content,
body[data-page="vips"] #app-content,
body[data-page="vips-tracker"] #app-content,
body[data-page="formularios"] #app-content,
body[data-page="budget"] #app-content {
  max-width: none;
  padding: 28px 40px 64px;
}

/* Bigger table body text on wide pages */
body[data-page="dashboard"] table td,
body[data-page="social"] table td,
body[data-page="paid"] table td,
body[data-page="insights"] table td,
body[data-page="tasks"] table td,
body[data-page="seo-tracker"] table td,
body[data-page="propuestas"] table td,
body[data-page="formularios"] table td,
body[data-page="budget"] table td {
  font-size: 13px;
  padding: 13px 18px;
}
body[data-page="dashboard"] table th,
body[data-page="social"] table th,
body[data-page="paid"] table th,
body[data-page="insights"] table th,
body[data-page="tasks"] table th,
body[data-page="seo-tracker"] table th,
body[data-page="formularios"] table th,
body[data-page="budget"] table th {
  font-size: 10px;
  padding: 14px 18px 10px;
  letter-spacing: 1.6px;
}

/* Bigger KPI cards on wide pages */
body[data-page="dashboard"] .card .lbl,
body[data-page="social"] .card .lbl,
body[data-page="paid"] .card .lbl,
body[data-page="insights"] .card .lbl,
body[data-page="tasks"] .card .lbl,
body[data-page="seo-tracker"] .card .lbl,
body[data-page="formularios"] .card .lbl {
  font-size: 10.5px;
  letter-spacing: 1.4px;
}
body[data-page="dashboard"] .card .val,
body[data-page="social"] .card .val,
body[data-page="paid"] .card .val,
body[data-page="insights"] .card .val,
body[data-page="tasks"] .card .val,
body[data-page="seo-tracker"] .card .val,
body[data-page="formularios"] .card .val {
  font-size: 32px;
}

/* Bigger pills on wide pages */
body[data-page="dashboard"] .p,
body[data-page="social"] .p,
body[data-page="paid"] .p,
body[data-page="insights"] .p,
body[data-page="seo-tracker"] .p {
  font-size: 10.5px;
  padding: 3px 10px;
}

/* ===== RESPONSIVE — TABLET (≤1024px) ===== */
@media (max-width: 1024px) {
  .r6 { grid-template-columns: repeat(3,1fr); }
  .r5, .r4 { grid-template-columns: repeat(2,1fr); }
  .r3 { grid-template-columns: 1fr; }
  #app-content { padding: 16px; }
  body[data-page="dashboard"] #app-content,
  body[data-page="social"] #app-content,
  body[data-page="paid"] #app-content,
  body[data-page="insights"] #app-content,
  body[data-page="tasks"] #app-content,
  body[data-page="seo-tracker"] #app-content,
  body[data-page="propuestas"] #app-content,
  body[data-page="templates"] #app-content,
  body[data-page="admin"] #app-content { padding: 16px; }
}

/* ===== RESPONSIVE — MOBILE (≤768px) — desktop untouched =====
   App-style mobile rework (24/04): compact topbar (EP logo + G777 logo +
   burger), full-screen off-canvas drawer with close X, charts fluid, no
   horizontal overflow, no iOS zoom. */
@media (max-width: 768px) {
  /* Lock horizontal scroll — page only allows pinch-zoom, never lateral
     swipe. `position: fixed` on html would break vertical scroll, so we use
     the overflow-x + width clamp combo + touch-action on root. */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
  }
  body {
    overscroll-behavior-x: none;
    touch-action: pan-y pinch-zoom;
  }
  .main-content {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    /* Compact topbar on mobile (56px) → recalc the top padding. */
    padding-top: calc(56px + 16px);
  }
  #app-content {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    padding: 14px 14px 32px;
    box-sizing: border-box;
  }
  /* Wide tables (e.g. Detailed Comparison) scroll horizontally inside their
     wrapper instead of squeezing columns. Sticky first column keeps the
     metric label visible while the user swipes through the months. Right-
     edge gradient + animated chevron in the heading hint scrollability. */
  .tw {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .tw table, .bd-table {
    min-width: max-content;
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  .tw table th,
  .tw table td {
    white-space: nowrap;
    font-size: 11px;
    padding: 10px 14px;
  }
  .tw table th:first-child,
  .tw table td:first-child {
    position: sticky;
    left: 0;
    /* Solid bg required so scrolled cells don't bleed through. Hardcoded
       hex (not var) to bypass any rgba parent gradients. */
    background: #141414;
    z-index: 2;
    box-shadow: 6px 0 8px -6px rgba(0,0,0,0.6);
    min-width: 110px;
  }
  /* Right-edge fade — hints there's more table to the right. Hidden when
     user has scrolled to the end (.is-end class added by mobile-ux.js). */
  .tw::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 22px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(10,10,10,0.6), transparent);
    z-index: 3;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .tw.is-end::after { opacity: 0; }
  /* Animated chevron in the table heading — disappears once user scrolls. */
  .tw .th { position: relative; }
  .tw .th::after {
    content: '⇄';
    color: var(--gold, #D9A441);
    font-size: 12px;
    margin-left: 10px;
    opacity: 0.75;
    display: inline-block;
    animation: epTableSwipeHint 1.6s ease-in-out infinite;
  }
  .tw.is-scrolled .th::after { display: none; }
  @keyframes epTableSwipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50%      { transform: translateX(5px); opacity: 1; }
  }
  /* Media elements fit the viewport. Scoped so it doesn't break ECharts
     canvas (whose parent sizes it explicitly). */
  .main-content img, .main-content video {
    max-width: 100%;
    height: auto;
  }
  /* Chart containers clamp to viewport width but keep their own inline
     height so ECharts renders correctly. Previously forced height:240px
     was breaking some charts (funnel, daily FTD, etc). */
  .card, .ch, .row > div { min-width: 0; max-width: 100%; box-sizing: border-box; }
  /* The id prefixes below name ECharts containers (pc1..6, sc1..7, dc1..7,
     dt1..6, se1..5). `[id^="se"]` also swallowed every SEO Tracker control
     (#seoPresence, #seoBell, #seoSearch, #seoOwner, #seoDetail), which blew the
     whole header up to 220px tall on phones. Exclude the seo* namespace. */
  .card [id^="chart-"], .card [id*="chart"], .skel-chart,
  [id^="pc"], [id^="sc"], [id^="dc"], [id^="dt"], [id^="se"]:not([id^="seo"]),
  [id^="d-funnel"], [id^="dc-"], [id^="chart-"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .skel-chart { min-height: 220px; }
  .ch { padding: 10px; overflow: hidden; }
  .row { gap: 10px; margin-bottom: 12px; }
  .r6, .r5, .r4, .r3, .r2 { grid-template-columns: 1fr !important; }
  /* Force ECharts canvas children to never overflow their parent. */
  .ch canvas, .card canvas { max-width: 100% !important; }

  /* Adaptive chart heights on mobile. ECharts inline-height on containers is
     OK, we only enforce a reasonable min-height so big charts still show. */
  .card [id^="chart-"],
  .card [id*="chart"],
  [id^="pc"], [id^="sc"], [id^="dc"], [id^="dt"], [id^="se"]:not([id^="seo"]),
  [id^="d-funnel"], [id^="dc-"] {
    min-height: 220px;
  }

  /* Tooltips / toasts / onboarding: never force min-width larger than 90vw. */
  .invest-bar-tip, .toast, .ob-tip {
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
  }

  /* Sidebar → FULL-SCREEN off-canvas drawer (app-style).
     Covers the ENTIRE viewport, including the topbar, when open. The close
     X (injected in index.html for mobile) sits at the top-right corner. The
     burger in the topbar ALSO still closes the drawer — both entry points
     toggle `body.nav-open`. */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    background: #0a0a0a !important;
    border-right: none !important;
    box-shadow: none !important;
    /* Sits ABOVE the topbar when open so it truly covers the full screen. */
    z-index: 1100 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 0;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .sidebar {
    transform: translateX(0) !important;
  }
  .sidebar:hover { width: 100vw; }
  /* Topbar stays visible with burger tappable only while the drawer is
     closed. Once opened the drawer covers it (and the X inside handles
     close). */
  .topbar { z-index: 1010 !important; }
  body.nav-open .topbar { z-index: 1000 !important; }

  /* Drawer close X — injected by index.html for mobile only. Tap target
     ≥44×44. Stays in the top-right corner of the drawer. */
  .sidebar-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 12px;
    color: var(--ink);
    cursor: pointer;
    z-index: 1200;
    padding: 0;
  }
  .sidebar-close:active { background: rgba(255,255,255,.04); }
  .sidebar-close svg { width: 18px; height: 18px; }

  /* Drawer header — EP logo + G777 logo, consistent with the topbar.
     Sits at the top of the drawer (56px high, matches mobile topbar). */
  .sidebar-drawer-head {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 56px 0 18px;
    border-bottom: 1px solid var(--hair);
    height: 56px;
    box-sizing: border-box;
    flex-shrink: 0;
  }
  .sidebar-drawer-head svg { height: 16px; width: auto; }
  .sidebar-drawer-head .sep { width: 1px; height: 18px; background: var(--hair-strong); }
  .sidebar-drawer-head .gw-logo { height: 20px; width: auto; max-width: 80px; object-fit: contain; }
  /* Nav list below the drawer header. */
  .sidebar-nav {
    flex-direction: column;
    padding: 10px 0 18px;
    gap: 0;
  }
  .sidebar-item {
    padding: 20px 28px;
    gap: 18px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-width: 0;
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-align: left;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .sidebar-item .icon svg { width: 22px; height: 22px; }
  .sidebar-item .label {
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 1;
    line-height: 1.2;
  }
  .sidebar-item.active {
    background: rgba(217, 164, 65, 0.06);
    color: var(--color-brand);
  }
  .sidebar-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--color-brand);
  }
  .sidebar-footer {
    border-top: 1px solid var(--hair);
    padding: 20px 28px 28px;
  }
  .sidebar-footer button {
    flex-direction: row;
    gap: 16px;
    padding: 12px 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t3);
    line-height: 1.2;
    width: 100%;
  }
  .sidebar-footer button svg { width: 22px; height: 22px; }
  .sidebar-footer button:hover { color: var(--red); }
  .sidebar-footer .label { opacity: 1; font-size: 14px; }

  /* Nav overlay — unused on mobile (drawer is fullscreen). Kept hidden
     so stale clicks cannot trigger it. */
  .nav-overlay { display: none !important; }

  /* Hamburger button in topbar — bigger EP-style tap target.
     Hidden when the drawer is open (close X inside the drawer handles it),
     so it never "floats" over the drawer content. */
  .topbar-burger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, background 0.15s ease;
    position: relative;
    z-index: 260;
  }
  .topbar-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    margin: 0 auto;
    transition: transform 0.2s ease, opacity 0.18s ease;
    border-radius: 2px;
  }
  .topbar-burger:active { border-color: var(--hair-strong); background: rgba(255,255,255,.03); }
  body.nav-open .topbar-burger { visibility: hidden; }

  /* Topbar — app-style compact (56px on mobile) */
  .topbar {
    left: 0;
    padding: 0 12px;
    gap: 8px;
    height: 56px;
  }
  .topbar-left {
    gap: 10px;
    min-width: 0;
    flex-shrink: 1;
    flex: 1 1 auto;
    overflow: hidden;
  }
  /* Logo ElephantPink (SVG text) + Logo GameWorld (PNG) both visible.
     User complained G777 logo was missing — it stays in the topbar. The
     EP SVG is clamped so it shares the row with G777. Version badge is
     hidden on mobile per spec. */
  .topbar-left .topbar-logo-link svg {
    width: 108px;
    flex-shrink: 1;
    display: block;
  }
  .topbar-brand-group {
    display: inline-flex !important;
    padding-left: 10px;
    margin-left: 2px;
    gap: 8px;
    border-left: 1px solid var(--hair-strong);
    min-width: 0;
    flex-shrink: 1;
  }
  .topbar-left .brand-tag { display: none !important; }
  .topbar-brand-group .brand-logo-img {
    height: 22px;
    max-width: 92px;
    object-fit: contain;
    display: block;
  }

  .topbar-center { display: none; }

  .topbar-right {
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .tb-user, .tb-user-at, .tb-user-name, .tb-user-role, .tb-divider { display: none; }
  /* App-style mobile topbar: ONLY EP logo + G777 logo + hamburger. No clock,
     no language toggle, no account chip. All of those live either in the
     drawer or are removed entirely. */
  .tb-clock { display: none !important; }
  .lang-toggle { display: none !important; }
  .tb-account-wrap { display: none !important; }
  .topbar-right .topbar-burger { order: 99; }

  /* Main content shift: no left margin (drawer is off-canvas) */
  .main-content { margin-left: 0; padding-bottom: 0; }
  .app-footer { margin-left: 0; padding: 18px 16px 12px; }

  /* Close drawer when any sidebar link / footer button is tapped */
  .sidebar-item, .sidebar-footer button { touch-action: manipulation; }

  /* Remove the fixed pink orb background on mobile — it can force extra
     width/height and contributes to the "zoom-out" effect on first render. */
  #app-content::before { display: none !important; }
}

/* Hamburger hidden on desktop */
@media (min-width: 769px) {
  .topbar-burger { display: none !important; }
  .nav-overlay { display: none !important; }
  /* Mobile meta block inside sidebar is mobile-only. */
  .sidebar-mobile-meta { display: none !important; }
  /* Mobile-only drawer header + close X, hidden on desktop. */
  .sidebar-drawer-head { display: none !important; }
  .sidebar-close { display: none !important; }
}

/* Sidebar meta block (mobile drawer) — clock + language toggle, shown only
   when the drawer is visible on touch viewports. EP-style: lives at the
   bottom of the scroll area, above the logout button. */
.sidebar-mobile-meta {
  display: none;
}
@media (max-width: 768px) {
  /* Drawer mobile meta — language picker (re-enabled 25/04 per spec change).
     Sits above the Logout button, in the same column. */
  .sidebar-mobile-meta {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 18px 28px 6px;
    margin-top: auto;
    border-top: 1px solid var(--hair);
  }
  .smm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .smm-label {
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--t3);
  }
  .smm-lang {
    display: inline-flex;
    gap: 0;
    border: 1px solid var(--hair);
    border-radius: 999px;
    overflow: hidden;
    width: fit-content;
  }
  .smm-lang button {
    background: transparent;
    color: var(--t3);
    border: 0;
    padding: 8px 18px;
    font-family: 'Noto Sans Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .smm-lang button.on {
    background: var(--color-brand);
    color: #0a0a0a;
  }
  .smm-lang button:not(.on):hover {
    color: var(--ink);
    background: rgba(217, 164, 65, 0.08);
  }
}

/* ===== MOBILE POLISH (2026-04-25): app-feel additions ===== */
@media (max-width: 768px) {
  /* Safe-area for iPhone X+ (notch + home indicator) */
  .sidebar-footer {
    padding-bottom: calc(28px + env(safe-area-inset-bottom));
  }
  .app-footer {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Tap feedback on cards and chart containers — subtle scale on press */
  .card, .ch {
    transition: transform .12s ease, border-color .15s ease;
  }
  .card:active, .ch:active { transform: scale(0.985); }
  .sidebar-item:active { background: rgba(255, 255, 255, 0.05); }

  /* Stagger fade-in for drawer nav items when the drawer opens.
     The delay comes from --nav-i, stamped by mobile-ux.js when the drawer
     opens. It was a hardcoded list of nth-child rules that stopped at the
     ninth item, so with sixteen in the menu items 10 and up inherited a
     delay of zero and appeared BEFORE 7, 8 and 9, leaving a hole in the
     middle of the animation. The fallback of 0 keeps the menu usable if the
     script has not run.
     Step is 25ms, so a full sixteen-item menu lands in 0.4s rather than the
     0.64s the old 40ms step would have taken. */
  body.nav-open .sidebar-item {
    animation: epDrawerItemIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(0.04s + var(--nav-i, 0) * 0.025s);
  }
  @keyframes epDrawerItemIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

/* 2-col KPI grid on phones wide enough to show two cards comfortably.
   Charts stay full-width via the existing .ch overrides. */
@media (min-width: 420px) and (max-width: 768px) {
  .r6, .r5, .r4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Period select hidden on desktop, shown on mobile */
.dp-period-select { display: none; }

@media (max-width: 768px) {
  /* dp-bar restack: vertical, period select replaces pills, PDF + refresh
     in a row underneath. */
  .dp-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  .dp-bar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .dp-month-pills { display: none !important; }
  .dp-period-select {
    display: block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgba(15, 23, 42, 0.6) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23EA8FD7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>") no-repeat right 14px center;
    background-size: 12px 8px;
    border: 1px solid rgba(217, 164, 65, 0.4);
    border-radius: 10px;
    color: #F1F5F9;
    padding: 13px 38px 13px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
    outline: none;
    text-overflow: ellipsis;
  }
  .dp-period-select:focus {
    border-color: var(--color-brand);
    box-shadow: 0 0 0 2px rgba(217, 164, 65,0.2);
  }
  .dp-bar-right {
    display: flex;
    flex-wrap: wrap;           /* a label that does not fit wraps to the next
                                  row instead of being shaved off */
    gap: 10px;
    width: 100%;
  }
  .dp-pdf {
    flex: 1 1 auto;
    /* min-width:0 let flex-shrink cut the box to 83px while the label needed
       141px, and text-overflow never kicked in because .dp-pdf is itself
       display:flex, where ellipsis does not apply, so the text was simply
       clipped ("COMPARAR MES CON OTRO" read "AR MES CO"). min() also keeps a
       label wider than the whole row from leaving the screen. */
    min-width: min(max-content, 100%);
    justify-content: center;
    padding: 12px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
    white-space: normal;
    overflow: visible;
    line-height: 1.15;
  }
  .dp-pdf .dp-pdf-month { display: none !important; }
  .dp-refresh {
    width: 46px !important;
    height: 46px !important;
    flex-shrink: 0;
  }
  /* Click-only press FX — no hover artifacts on touch */
  .dp-refresh:hover { transform: none; }
  .dp-refresh:active { transform: scale(0.92); }
}

/* Reduced motion: disable splash progress, drawer animations, scale fx */
@media (prefers-reduced-motion: reduce) {
  #welcome-splash,
  #welcome-splash * { transition: none !important; animation: none !important; }
  .ws-progress-fill { transition: none !important; }
  .sidebar { transition: none !important; }
  body.nav-open .sidebar-item { animation: none !important; }
  .card:active, .ch:active { transform: none !important; }
}

/* ===== PAGE-SPECIFIC MOBILE FIXES (2026-04-25 v2) ===== */
@media (max-width: 768px) {
  /* SEO Tracker: 1600px-wide table is unusable on phones. Hide all but the
     essential columns (traffic light, priority, task name, status, comments)
     so the table fits without horizontal scroll. */
  body[data-page="seo-tracker"] .tw table th:nth-child(3),
  body[data-page="seo-tracker"] .tw table td:nth-child(3),
  body[data-page="seo-tracker"] .tw table th:nth-child(5),
  body[data-page="seo-tracker"] .tw table td:nth-child(5),
  body[data-page="seo-tracker"] .tw table th:nth-child(6),
  body[data-page="seo-tracker"] .tw table td:nth-child(6),
  body[data-page="seo-tracker"] .tw table th:nth-child(7),
  body[data-page="seo-tracker"] .tw table td:nth-child(7),
  body[data-page="seo-tracker"] .tw table th:nth-child(8),
  body[data-page="seo-tracker"] .tw table td:nth-child(8),
  body[data-page="seo-tracker"] .tw table th:nth-child(9),
  body[data-page="seo-tracker"] .tw table td:nth-child(9),
  body[data-page="seo-tracker"] .tw table th:nth-child(10),
  body[data-page="seo-tracker"] .tw table td:nth-child(10),
  body[data-page="seo-tracker"] .tw table th:nth-child(11),
  body[data-page="seo-tracker"] .tw table td:nth-child(11) {
    display: none !important;
  }
  body[data-page="seo-tracker"] .tw table {
    min-width: 0 !important;
    width: 100% !important;
  }
  body[data-page="seo-tracker"] .tw table th:nth-child(4),
  body[data-page="seo-tracker"] .tw table td:nth-child(4) {
    min-width: 0 !important;
    white-space: normal !important;
  }
  /* Hide the "Detailed Comparison" sticky col + gradient on SEO Tracker */
  body[data-page="seo-tracker"] .tw::after { display: none; }
  body[data-page="seo-tracker"] .tw table th:first-child,
  body[data-page="seo-tracker"] .tw table td:first-child {
    position: static !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }
  /* SEO Tracker board: ensure columns stay 280px-ish, scrollable */
  body[data-page="seo-tracker"] .seo-board { overflow-x: auto; }
  body[data-page="seo-tracker"] .seo-col { flex: 0 0 280px !important; }
  /* Filters wrap, not horizontal scroll */
  body[data-page="seo-tracker"] .seo-input,
  body[data-page="seo-tracker"] .seo-select { flex: 1 1 auto; min-width: 130px; }

  /* Admin Users: convert table to vertical cards. Easier than scrolling
     horizontally to see all permissions + actions. */
  body[data-page="admin"] .tw {
    overflow: visible !important;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  body[data-page="admin"] .tw::after { display: none; }
  body[data-page="admin"] .tw table { display: block; min-width: 0 !important; width: 100%; border-collapse: collapse; }
  body[data-page="admin"] .tw table thead { display: none; }
  body[data-page="admin"] .tw table tbody { display: block; }
  body[data-page="admin"] .tw table tr {
    display: block;
    margin-bottom: 12px;
    padding: 14px 14px 12px;
    border: 1px solid var(--hair);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
  }
  body[data-page="admin"] .tw table td {
    display: block;
    text-align: left !important;
    padding: 6px 0 !important;
    border: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    font-size: 12px !important;
  }
  body[data-page="admin"] .tw table td:first-child {
    font-size: 16px !important;
    font-weight: 700;
    color: var(--t1);
    border-bottom: 1px solid var(--hair) !important;
    padding-bottom: 10px !important;
    margin-bottom: 4px;
    position: static !important;
    box-shadow: none !important;
    background: transparent !important;
    min-width: 0 !important;
  }
  body[data-page="admin"] .tw table td:nth-child(2) {
    margin-top: 6px;
  }
  body[data-page="admin"] .tw table td:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px !important;
    border-top: 1px solid var(--hair) !important;
  }
  body[data-page="admin"] .tw table td:last-child button {
    flex: 1;
    min-width: 90px;
    margin-left: 0 !important;
    padding: 9px 10px !important;
  }
}

/* ===== SIDEBAR VERSION CHIP (footer) ===== */
.sidebar-version {
  display: block;
  padding: 12px 22px 4px;
  font-family: 'Geist Mono', 'Noto Sans Mono', ui-monospace, monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t4);
  text-align: left;
  border-top: 1px solid var(--hair);
  margin-top: auto;
}
.sidebar-version .sv-label { color: var(--t5, #444); }
.sidebar-version .sv-ver {
  color: var(--t3);
  font-weight: 700;
  letter-spacing: 1px;
  margin-left: 6px;
}
@media (max-width: 768px) {
  .sidebar-version {
    padding: 14px 28px 6px;
    font-size: 10px;
    text-align: center;
    border-top: 0;
    margin-top: 0;
  }
}

/* ===== DESKTOP SIDEBAR — cleaner active state (no pink wash) =====
   User feedback 25/04: too much pink at the top of the menu. Active item
   is now white text on a near-invisible wash with a subtle pink hairline. */
@media (min-width: 769px) {
  .sidebar-item.active {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.025);
    border-left-color: var(--color-brand);
  }
  .sidebar-item.active::before {
    color: var(--color-brand);
  }
  .sidebar-item.active .icon svg {
    stroke: var(--ink);
  }
}

/* ===== SMALL MOBILE (≤420px) =====
   Only minor size trims. Earlier versions of this block forced
   `.sidebar { height: 48px }` — a relic from the old bottom-nav layout —
   which broke the full-screen drawer on iPhone SE / Mini. Removed. */
@media (max-width: 420px) {
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar-left .topbar-logo-link svg { width: 92px; }
  .topbar-brand-group { padding-left: 8px; gap: 6px; }
  .topbar-brand-group .brand-logo-img { height: 20px; max-width: 78px; }
  .topbar-burger { width: 40px; height: 40px; }
  .sidebar-item { padding: 18px 22px; font-size: 14px; }
  .sidebar-item .label { font-size: 14px; }
}

/* Client mark on the welcome splash, above the version kicker. Same asset as
   the login screen so the handoff between the two reads as one product. */
.ws-logo {
  display: block;
  height: 38px;
  width: 247px;          /* 312x48 asset, 6.5:1 */
  object-fit: contain;
  margin: 0 auto 18px;
  opacity: .95;
}
@media (max-width: 768px) {
  .ws-logo { height: 30px; width: 195px; margin-bottom: 14px; }
}

/* Touch targets. Several controls sat at 20-30px, under the 44px anyone can
   reliably hit with a thumb. Raised where it costs nothing visually; the
   dense analytical tables keep their size on purpose, they are not for
   tapping. */
@media (max-width: 768px) {
  #ngr-ratio-input {
    min-height: 34px;
    min-width: 72px;
    font-size: 14px;   /* under 16px iOS zooms the whole page on focus */
  }
  .ob-btn,
  .vips-range-btn,
  .vips-topn-btn {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .tb-status { min-width: 34px; min-height: 34px; }
}