/*
  True Influencer frames (1a-1d) and the home screen layouts.

  Loaded after app.css. The frame is an attribute on <html> (data-frame), set by the frame
  store, so every rule here is scoped by it and nothing changes for a screen until a frame
  says so. 1b additionally re-points app.css's tokens at a dark theme, which is what lets
  every existing screen follow it without being rewritten.
*/

/* ---------------------------------------------------------------------------------------
   Shared shell
   --------------------------------------------------------------------------------------- */

html[data-frame="1a"], html[data-frame="1c"] { --frame-bg: #F3F4F7; }
html[data-frame="1d"] { --frame-bg: #EEF0F4; }
html[data-frame="1b"] { --frame-bg: #060A13; }

html[data-frame] body { background: var(--frame-bg); }

/* No sticky header any more: sidebars do not need the offset, and the 1c bar scrolls away. */
html[data-frame] { --header-h: 0px; }

.app--framed { display: flex; min-height: 100vh; }
.app__main { flex: 1; min-width: 0; padding-bottom: 72px; }
html[data-frame="1c"] .app--framed { display: block; }

.fnav { box-sizing: border-box; color: #fff; }
.fnav a { color: inherit; }
.fnav .nav-toggle { display: none; }

.fnav__brand { display: flex; align-items: center; line-height: 1; color: #fff; text-decoration: none; }
.fnav__brand:hover { color: #fff; }
.fnav__brand-dot { display: block; border-radius: 50%; background: #FCA311; box-shadow: 0 0 14px #FCA311; }

.fnav__links { display: flex; flex-direction: column; gap: 6px; }
.fnav__link { display: flex; align-items: center; gap: 13px; text-decoration: none; transition: background .15s ease, color .15s ease; }
.fnav__icon { flex: none; }

.fnav__search { position: relative; display: none; }
.fnav__search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .6; color: #fff; }
.fnav__search input { width: 100%; outline: none; font-size: 13.5px; }

.fnav__section, .fnav__assistant, .fnav__assistant-card { display: none; }

.fnav__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fnav__tools .pulse { margin-left: 0; color: rgba(255, 255, 255, .8); }
.fnav__tools .lang {
  margin-left: 0; background: rgba(255, 255, 255, .07); color: #fff;
  border-color: rgba(255, 255, 255, .14);
}
.fnav__tools .lang option { color: #000; }

.fnav__user { display: flex; align-items: center; gap: 11px; }
.fnav__avatar {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 700;
}
.fnav__who { min-width: 0; }
.fnav__name { font-size: 13.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnav__role { font-size: 12px; color: rgba(255, 255, 255, .55); }

/* ---- 1a / 1b: full sidebar ----------------------------------------------------------- */

html[data-frame="1a"] .fnav,
html[data-frame="1b"] .fnav {
  width: 236px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 26px 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
html[data-frame="1a"] .fnav { background: linear-gradient(180deg, #0A1120 0%, #14213D 100%); }
html[data-frame="1b"] .fnav { background: #060A13; border-right: 1px solid rgba(255, 255, 255, .06); }

html[data-frame="1a"] .fnav__brand,
html[data-frame="1b"] .fnav__brand {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  column-gap: 6px; padding: 0 10px 22px;
}
html[data-frame="1a"] .fnav__brand-true,
html[data-frame="1b"] .fnav__brand-true { font-size: 27px; font-weight: 800; font-style: italic; letter-spacing: -0.03em; }
html[data-frame="1a"] .fnav__brand-dot,
html[data-frame="1b"] .fnav__brand-dot { width: 12px; height: 12px; margin-top: -10px; }
html[data-frame="1a"] .fnav__brand-inf,
html[data-frame="1b"] .fnav__brand-inf { grid-column: 1 / -1; font-size: 21px; font-weight: 300; margin-top: 2px; letter-spacing: -0.01em; }

html[data-frame="1a"] .fnav__link,
html[data-frame="1b"] .fnav__link { height: 44px; padding: 0 13px; border-radius: 11px; font-size: 14px; font-weight: 500; }

html[data-frame="1a"] .fnav__link { color: #fff; }
html[data-frame="1a"] .fnav__link .fnav__icon { color: rgba(255, 255, 255, .8); }
html[data-frame="1a"] .fnav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html[data-frame="1a"] .fnav__link[aria-current="page"] { background: rgba(255, 255, 255, .1); font-weight: 700; }
html[data-frame="1a"] .fnav__link[aria-current="page"] .fnav__icon { color: #FCA311; }

html[data-frame="1b"] .fnav__link { color: rgba(255, 255, 255, .72); }
html[data-frame="1b"] .fnav__link:hover { background: rgba(255, 255, 255, .05); color: #fff; }
html[data-frame="1b"] .fnav__link[aria-current="page"] { background: #FCA311; color: #000; font-weight: 700; }

html[data-frame="1a"] .fnav__section {
  display: block; margin: 22px 13px 8px; font-size: 10.5px; letter-spacing: .1em; color: rgba(255, 255, 255, .45);
}
html[data-frame="1a"] .fnav__assistant {
  display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 10px; border-radius: 12px;
  background: rgba(252, 163, 17, .1); border: 1px solid rgba(252, 163, 17, .25);
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
}
html[data-frame="1a"] .fnav__assistant:hover { background: rgba(252, 163, 17, .18); color: #fff; }
.fnav__orb {
  width: 32px; height: 32px; border-radius: 50%; background: #FCA311; flex: none;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(252, 163, 17, .55);
}

html[data-frame="1a"] .fnav__tools { margin-top: auto; padding: 10px; }
html[data-frame="1a"] .fnav__user { padding: 12px 10px; border-top: 1px solid rgba(255, 255, 255, .08); }

html[data-frame="1b"] .fnav__assistant-card {
  display: block; margin-top: auto; border-radius: 14px; padding: 16px;
  background: linear-gradient(160deg, rgba(252, 163, 17, .22), rgba(252, 163, 17, .04));
  border: 1px solid rgba(252, 163, 17, .3);
}
.fnav__assistant-title { font-size: 14px; font-weight: 700; color: #fff; }
.fnav__assistant-text { font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .65); margin-top: 4px; }
.fnav__assistant-btn {
  margin-top: 12px; width: 100%; height: 36px; border: 0; border-radius: 10px;
  background: #FCA311; color: #000; font-size: 13px; font-weight: 700;
}
html[data-frame="1b"] .fnav__tools { padding: 12px 10px 0; }
html[data-frame="1b"] .fnav__user { padding: 14px 10px 0; }
html[data-frame="1b"] .fnav__avatar { width: 36px; height: 36px; font-size: 12.5px; }

/* ---- 1d: icon rail -------------------------------------------------------------------- */

html[data-frame="1d"] .fnav {
  width: 84px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: #0A1120; padding: 22px 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
html[data-frame="1d"] .fnav__brand {
  width: 44px; height: 44px; border-radius: 13px; background: #14213D;
  justify-content: center; margin-bottom: 16px; flex: none;
}
html[data-frame="1d"] .fnav__brand-true,
html[data-frame="1d"] .fnav__brand-inf { display: none; }
html[data-frame="1d"] .fnav__brand-dot { width: 14px; height: 14px; }
html[data-frame="1d"] .fnav__links { align-items: center; gap: 8px; }
html[data-frame="1d"] .fnav__link {
  width: 48px; height: 48px; border-radius: 13px; justify-content: center; color: rgba(255, 255, 255, .65);
}
html[data-frame="1d"] .fnav__icon { width: 20px; height: 20px; }
html[data-frame="1d"] .fnav__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-frame="1d"] .fnav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-frame="1d"] .fnav__link[aria-current="page"] { background: #FCA311; color: #000; }
html[data-frame="1d"] .fnav__tools { margin-top: auto; flex-direction: column; gap: 10px; }
html[data-frame="1d"] .fnav__tools .pulse .mono { display: none; }
html[data-frame="1d"] .fnav__who { display: none; }
html[data-frame="1d"] .fnav__avatar { width: 40px; height: 40px; font-size: 12.5px; }

/* ---- 1c: top bar ---------------------------------------------------------------------- */

html[data-frame="1c"] .fnav {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 24px;
  min-height: 72px; padding: 0 36px;
  background: radial-gradient(90% 300% at 90% 0%, #2A4A86 0%, #14213D 45%, #070C18 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* On Inicio the bar floats over the hero, so bar and hero read as one dark block. */
html[data-frame="1c"] .app--home .fnav {
  position: absolute; top: 0; left: 0; right: 0; background: transparent;
}
html[data-frame="1c"] .fnav__brand { gap: 6px; flex: none; }
html[data-frame="1c"] .fnav__brand-true { font-size: 21px; font-weight: 800; font-style: italic; }
html[data-frame="1c"] .fnav__brand-dot { width: 9px; height: 9px; box-shadow: 0 0 10px #FCA311; }
html[data-frame="1c"] .fnav__brand-inf { font-size: 19px; font-weight: 300; }
html[data-frame="1c"] .fnav__search { display: block; flex: 1 1 auto; min-width: 160px; max-width: 520px; margin: 0 auto; }
html[data-frame="1c"] .fnav__search input {
  height: 42px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px;
  background: rgba(255, 255, 255, .07); padding: 0 14px 0 40px; color: #fff;
}
html[data-frame="1c"] .fnav__search input::placeholder { color: rgba(255, 255, 255, .55); }
html[data-frame="1c"] .fnav__links { flex-direction: row; gap: 2px; flex: none; }
html[data-frame="1c"] .fnav__link {
  height: 38px; padding: 0 13px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: rgba(255, 255, 255, .8); white-space: nowrap;
}
html[data-frame="1c"] .fnav__icon { display: none; }
html[data-frame="1c"] .fnav__link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-frame="1c"] .fnav__link[aria-current="page"] { background: #FCA311; color: #000; }
html[data-frame="1c"] .fnav__tools { flex: none; flex-wrap: nowrap; }
html[data-frame="1c"] .fnav__who { display: none; }
html[data-frame="1c"] .fnav__avatar { width: 36px; height: 36px; background: #FCA311; color: #000; font-size: 12.5px; font-weight: 800; }

@media (max-width: 1280px) {
  html[data-frame="1c"] .fnav { gap: 14px; padding: 0 22px; }
  html[data-frame="1c"] .fnav__link { padding: 0 9px; font-size: 13px; }
}

/* ---- Small screens: every frame becomes a bar with a menu ------------------------------ */

@media (max-width: 860px) {
  html[data-frame] .app--framed { display: block; }
  html[data-frame] .fnav,
  html[data-frame="1c"] .app--home .fnav {
    position: sticky; top: 0; z-index: 30; width: auto; height: auto; min-height: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 10px var(--gutter); overflow: visible; border-right: 0;
    background: linear-gradient(90deg, #0A1120, #14213D);
  }
  html[data-frame="1b"] .fnav { background: #060A13; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  html[data-frame] .fnav__brand {
    display: flex; width: auto; height: auto; background: none; padding: 0; margin: 0; gap: 6px;
  }
  html[data-frame] .fnav__brand-true { display: inline; font-size: 19px; font-weight: 800; font-style: italic; }
  html[data-frame] .fnav__brand-inf { display: inline; grid-column: auto; font-size: 17px; font-weight: 300; margin: 0; }
  html[data-frame] .fnav__brand-dot { width: 8px; height: 8px; margin: 0; }
  html[data-frame] .fnav .nav-toggle {
    display: inline-flex; margin-left: auto; order: 2;
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, .2);
  }
  html[data-frame] .fnav__tools { order: 1; margin: 0 0 0 auto; padding: 0; flex-direction: row; }
  html[data-frame] .fnav__user, html[data-frame] .fnav__search,
  html[data-frame] .fnav__section, html[data-frame] .fnav__assistant,
  html[data-frame] .fnav__assistant-card { display: none; }
  html[data-frame] .fnav__links { display: none; width: 100%; order: 10; flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 0 4px; }
  html[data-frame] .fnav__links--open { display: flex; }
  html[data-frame] .fnav__link {
    width: auto; height: 44px; justify-content: flex-start; padding: 0 12px; border-radius: 10px;
  }
  html[data-frame] .fnav__icon { display: block; }
  html[data-frame] .fnav__label { position: static; width: auto; height: auto; clip: auto; }
}

/* ---- The frame switch ------------------------------------------------------------------ */

.frame-switch {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 4px; padding: 5px;
  border-radius: 14px; background: rgba(10, 17, 32, .92); backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(10, 17, 32, .35); border: 1px solid rgba(255, 255, 255, .1);
  max-width: calc(100vw - 24px);
}
.frame-switch__label { font-size: 10px; letter-spacing: .1em; color: rgba(255, 255, 255, .5); padding: 0 8px 0 6px; }
.frame-switch__btn {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, .75);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.frame-switch__btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.frame-switch__btn--on { background: #FCA311; color: #000; }
.frame-switch__btn--on:hover { background: #FCA311; color: #000; }
.frame-switch__key { font-size: 11px; opacity: .8; }

@media (max-width: 640px) {
  .frame-switch__label, .frame-switch__name { display: none; }
  .frame-switch__btn { padding: 0 14px; }
}

/* ---------------------------------------------------------------------------------------
   Home: shared pieces
   --------------------------------------------------------------------------------------- */

.home { font-family: var(--font-sans); color: #000; }
.h-alert { margin: 16px 22px 0; }

.h-card {
  background: #fff; border-radius: 16px; padding: 20px; min-width: 0;
  box-shadow: 0 1px 2px rgba(20, 33, 61, .06);
}
.h-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.h-card__head--center { align-items: center; }
.h-card__title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: #14213D; }
.h-card__title--lg { font-size: 18px; letter-spacing: -0.015em; }
.h-card__title--mb { margin-bottom: 14px; }
.h-card__title--mb6 { margin-bottom: 6px; }
.h-card__sub { font-size: 12.5px; color: rgba(0, 0, 0, .55); margin-top: 3px; }

.h-btn {
  white-space: nowrap; height: 36px; padding: 0 14px; border: 1px solid #E5E5E5; background: #fff;
  border-radius: 10px; font-size: 13px; font-weight: 600; color: #14213D;
}
.h-btn--sm { height: 32px; padding: 0 12px; border-radius: 9px; font-size: 12.5px; }
.h-btn:hover { border-color: #14213D; }
.h-link { font-size: 12.5px; font-weight: 700; white-space: nowrap; color: #14213D; }

.h-empty { margin: 10px 0 6px; font-size: 13px; color: rgba(0, 0, 0, .5); }
.h-footnote { margin: 12px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(0, 0, 0, .5); }
.h-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.h-welcome { position: relative; font-size: 13px; font-weight: 500; letter-spacing: .5em; color: rgba(255, 255, 255, .8); }
.h-wordmark { position: relative; display: flex; align-items: center; gap: 18px; margin-top: 10px; color: #fff; line-height: 1; }
.h-wordmark__true { font-size: 46px; font-weight: 800; letter-spacing: .08em; }
.h-wordmark__inf { font-size: 46px; font-weight: 300; letter-spacing: .14em; }
.h-wordmark__orb {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #FFD27A, #FCA311 60%, #D98500);
  box-shadow: 0 0 28px rgba(252, 163, 17, .7);
}
.h-wordmark--xl { gap: 16px; }
.h-wordmark--xl .h-wordmark__true, .h-wordmark--xl .h-wordmark__inf { font-size: 52px; }
.h-wordmark--xl .h-wordmark__orb { width: 38px; height: 38px; box-shadow: 0 0 30px rgba(252, 163, 17, .75); }

.h-toolbar { display: flex; align-items: center; gap: 12px; }
.h-search { flex: 1; position: relative; min-width: 0; }
.h-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .5; color: #14213D; }
.h-search input {
  width: 100%; height: 48px; border: 1px solid #E5E5E5; border-radius: 13px; background: #fff;
  padding: 0 70px 0 46px; font-size: 14px; outline: none; color: #000;
}
.h-search input:focus { border-color: #14213D; }
.h-search__kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #14213D; background: #F3F4F7; border-radius: 6px; padding: 4px 7px;
}
.h-bell {
  flex: none; width: 48px; height: 48px; border: 1px solid #E5E5E5; border-radius: 13px; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #14213D;
}
.h-cta {
  white-space: nowrap; height: 48px; padding: 0 22px; border: 0; border-radius: 13px; flex: none;
  background: linear-gradient(180deg, #FFB63B, #FCA311); color: #000; font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 9px; box-shadow: 0 8px 22px rgba(252, 163, 17, .38);
}
.h-cta:hover { filter: brightness(1.04); }
.h-cta--glow { height: 46px; padding: 0 20px; background: #FCA311; font-size: 14px; box-shadow: 0 0 30px rgba(252, 163, 17, .45); }

.h-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.h-kpis__loading { grid-column: 1 / -1; padding: 30px; text-align: center; font-size: 13px; color: rgba(0, 0, 0, .45); }
.h-kpi__value { font-size: 29px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.h-kpi__value--lg { font-size: 32px; }
.h-kpi__note { font-size: 12px; color: rgba(0, 0, 0, .5); margin-top: 6px; }

.h-delta { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.h-delta--block { display: block; margin-top: 7px; font-size: 12px; }
.h-delta--up { color: #0E8A6E; }
.h-delta--down { color: #C23A6B; }
.h-delta--flat { color: rgba(0, 0, 0, .45); }

.h-net {
  width: 40px; height: 40px; border-radius: 11px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
}
.h-net--sm { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
.h-net--xs { width: 26px; height: 26px; border-radius: 50%; font-size: 10px; }
.h-net--round { width: 42px; height: 42px; border-radius: 50%; }

.h-who { flex: 1; min-width: 0; text-align: left; }
.h-who__name { font-size: 13.5px; font-weight: 700; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-who__meta { font-size: 12px; color: rgba(0, 0, 0, .5); margin-top: 2px; }
.h-who__time { font-weight: 500; color: rgba(255, 255, 255, .45); }

.h-tag {
  justify-self: start; padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  white-space: nowrap; flex: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis;
}
.h-tag--square { border-radius: 8px; padding: 5px 12px; font-size: 12px; }

.h-srow { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #EEEFF2; }
.h-sstatus { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.h-sstatus__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
.sst-active { color: #0B6E58; }
.sst-active .h-sstatus__dot { background: #14B88A; }
.sst-paused { color: #8A5200; }
.sst-paused .h-sstatus__dot { background: #FCA311; }
.sst-draft { color: rgba(0, 0, 0, .5); }
.sst-completed { color: #23489E; }

.h-more {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 0 0; border: 0; border-top: 1px solid #EEEFF2; background: none;
  font-size: 13px; font-weight: 700; color: #14213D;
}

.h-arow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #EEEFF2; width: 100%; }
.h-arow--plain { border-left: 0; border-right: 0; border-bottom: 0; background: none; padding: 9px 0; color: inherit; }
.h-arow--tight { gap: 10px; padding: 9px 0; }
.h-aicon { width: 40px; height: 40px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center; }
.h-aicon--sm { width: 38px; height: 38px; }
.h-astatus { padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ast-running { background: rgba(14, 138, 110, .12); color: #0B6E58; }
.ast-draft { background: rgba(252, 163, 17, .18); color: #8A5200; }
.ast-ready { background: rgba(47, 95, 208, .12); color: #23489E; }
.h-astatus--glow { background: none !important; padding: 0; }
.h-astatus--glow.ast-running { color: #3FE0B0; }
.h-astatus--glow.ast-draft { color: #FCA311; }
.h-astatus--glow.ast-ready { color: #6E9BFF; }

.h-topics { display: flex; flex-direction: column; gap: 12px; }
.h-topics__head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.h-topics__head .mono { color: rgba(255, 255, 255, .6); }
.h-topics__track { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .06); }
.h-topics__bar { display: block; height: 100%; border-radius: 4px; }

/* Assistant boxes */
.h-assist__head { display: flex; align-items: center; gap: 10px; }
.h-orb {
  width: 34px; height: 34px; border-radius: 50%; background: #FCA311; flex: none;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(252, 163, 17, .6);
}
.h-assist__title { font-size: 17px; font-weight: 800; }
.h-assist__sub { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.h-assist__list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.h-assist__q {
  text-align: left; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px; padding: 10px 12px; color: #fff;
}
.h-assist__q:hover { background: rgba(255, 255, 255, .1); }
.h-assist__qtext { font-size: 13px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h-assist__qmeta { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-top: 4px; }
.h-assist__empty { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.h-assist__form { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.h-assist__select {
  height: 34px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07);
  border-radius: 9px; padding: 0 10px; font-size: 12.5px; color: #fff; outline: none;
}
.h-assist__select option { color: #000; }
.h-assist__row { display: flex; gap: 8px; }
.h-assist__row input {
  flex: 1; min-width: 0; height: 42px; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07); border-radius: 11px; padding: 0 13px; font-size: 13px; color: #fff; outline: none;
}
.h-assist__row input::placeholder { color: rgba(255, 255, 255, .5); }
.h-assist__row button {
  width: 42px; height: 42px; border: 0; border-radius: 11px; background: #FCA311; color: #000;
  font-size: 17px; font-weight: 700; flex: none;
}
.h-assist__row button:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------------------------------------------------------------------------------
   1a · Refinado
   --------------------------------------------------------------------------------------- */

.h1a { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; }

.h1a-hero {
  position: relative; height: 148px; border-radius: 18px; overflow: hidden; padding: 30px 36px;
  display: flex; flex-direction: column; justify-content: center;
  background: radial-gradient(120% 140% at 85% 0%, #22407A 0%, #14213D 45%, #070C18 100%);
}
.h1a-hero__art { position: absolute; right: 0; top: 0; width: 68%; height: 100%; }

.h1a-kpi { background: #fff; border-radius: 16px; padding: 18px; display: flex; gap: 14px; box-shadow: 0 1px 2px rgba(20, 33, 61, .06); min-width: 0; }
.h1a-kpi__icon { width: 46px; height: 46px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; }
.h1a-kpi__body { flex: 1; min-width: 0; }
.h1a-kpi__label { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .7); }
.h1a-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; }
.h1a-kpi__row > div { min-width: 0; }
.h1a-kpi__valrow { display: flex; align-items: baseline; gap: 8px; }
.h1a-kpi__row .h-kpi__note { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.h1a-kpi__spark { flex: 0 1 72px; min-width: 0; width: 72px; height: 34px; }

.h1a-row {
  display: grid; grid-template-columns: 40px 210px minmax(0, 1fr) auto 28px; align-items: center;
  gap: 16px; padding: 11px 0; border-top: 1px solid #EEEFF2;
}
.h1a-row .h-who__name { font-size: 14px; }
.h1a-row__text { font-size: 13.5px; line-height: 1.45; color: rgba(0, 0, 0, .75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h1a-row__more { border: 0; background: none; color: rgba(0, 0, 0, .4); font-size: 18px; padding: 0; }
.h1a-row__more:hover { color: #14213D; }

.h1a-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.h1a-assistant {
  position: relative; overflow: hidden; border-radius: 16px; padding: 20px; color: #fff;
  background: radial-gradient(120% 90% at 100% 0%, #2A4A86 0%, #14213D 50%, #0A1120 100%);
  display: flex; flex-direction: column; min-width: 0;
}

/* ---------------------------------------------------------------------------------------
   1b · Modo noche
   --------------------------------------------------------------------------------------- */

.h1b {
  padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 18px; color: #fff; min-height: 100vh;
  background: radial-gradient(70% 50% at 80% 0%, rgba(42, 74, 134, .45), transparent 70%);
}
.h1b .h-search svg { color: #fff; }
.h1b .h-search input { height: 46px; border-color: rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .04); color: #fff; padding-right: 16px; }
.h1b .h-search input::placeholder { color: rgba(255, 255, 255, .5); }

.h1b-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; border-radius: 20px; padding: 28px 30px;
  background: linear-gradient(135deg, #101B33 0%, #0A1120 100%); border: 1px solid rgba(255, 255, 255, .07);
}
.h1b-hero__copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.h1b-hero__hello { font-size: 12px; font-weight: 600; letter-spacing: .4em; color: #FCA311; }
.h1b-hero__big { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin-top: 12px; }
.h1b-hero__light { font-weight: 300; color: rgba(255, 255, 255, .7); }
.h1b-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.h1b-pill { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .75); font-size: 12.5px; font-weight: 600; }
.h1b-pill--good { font-weight: 700; }
.h1b-pill--good.h-delta--up { background: rgba(32, 201, 151, .14); color: #4FE3B6; }
.h1b-pill--good.h-delta--down { background: rgba(255, 125, 170, .14); color: #FF7DAA; }
.h1b-hero__chart { display: flex; flex-direction: column; min-width: 0; }
.h1b-bars { display: flex; align-items: flex-end; gap: 8px; height: 170px; }
.h1b-bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.h1b-bars__bar {
  display: block; width: 100%; border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, rgba(110, 155, 255, .75), rgba(110, 155, 255, .15));
}
.h1b-bars__bar--recent { background: linear-gradient(180deg, #FFD27A, #FCA311); box-shadow: 0 0 18px rgba(252, 163, 17, .55); }
.h1b-bars__labels { display: flex; gap: 8px; margin-top: 8px; }
.h1b-bars__labels span { flex: 1; text-align: center; font-size: 10px; color: rgba(255, 255, 255, .4); }

.h1b-kpi { border-radius: 16px; padding: 18px; background: #0D1526; border: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.h1b-kpi__head { display: flex; align-items: center; gap: 10px; }
.h1b-kpi__icon { width: 34px; height: 34px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; }
.h1b-kpi__label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.h1b-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 14px; }
.h1b-kpi__row > div { min-width: 0; }
.h1b-kpi .h-kpi__value { font-size: 30px; }
.h1b-kpi .h-kpi__note { color: rgba(255, 255, 255, .5); margin-top: 2px; }
.h1b-kpi__spark { overflow: visible; flex: 0 1 104px; min-width: 0; }
.h1b .h-delta--up { color: #4FE3B6; }
.h1b .h-delta--down { color: #FF7DAA; }
.h1b .h-delta--flat { color: rgba(255, 255, 255, .5); }

.h1b-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 14px; }
.h1b-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.h1b .h-card { background: #0D1526; border: 1px solid rgba(255, 255, 255, .07); box-shadow: none; color: #fff; }
.h1b .h-card__title { color: #fff; }
.h1b .h-who__name { color: #fff; }
.h1b .h-who__meta, .h1b .h-empty, .h1b .h-footnote { color: rgba(255, 255, 255, .5); }
.h1b .h-arow { border-top-color: rgba(255, 255, 255, .06); }
.h1b-live { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #FCA311; }
.h1b-live__dot { width: 7px; height: 7px; border-radius: 50%; background: #FCA311; box-shadow: 0 0 10px #FCA311; }
.h1b-row {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%;
  padding: 11px 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .06); background: none; color: #fff; text-align: left;
}
.h1b-row .h-net { width: 38px; height: 38px; font-size: 12.5px; }
.h1b-row__text { font-size: 13px; color: rgba(255, 255, 255, .65); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h1b-row .h-tag { justify-self: end; }

/* ---------------------------------------------------------------------------------------
   1c · Navegación superior
   --------------------------------------------------------------------------------------- */

.h1c-hero {
  position: relative; overflow: hidden; padding: 106px 36px 34px; color: #fff;
  background: radial-gradient(90% 120% at 90% 0%, #2A4A86 0%, #14213D 45%, #070C18 100%);
}
.h1c-hero__art { position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; opacity: .55; }
.h1c-hero__top { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 0 26px; flex-wrap: wrap; }
.h1c-hero__top .h-welcome { color: rgba(255, 255, 255, .75); }
.h1c-hero__actions { display: flex; gap: 10px; }
.h1c-ghost {
  white-space: nowrap; height: 46px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; font-weight: 600;
}
.h1c-ghost:hover { background: rgba(255, 255, 255, .12); }
.h1c-hero .h-kpis { position: relative; }
.h1c-kpi { border-radius: 16px; padding: 18px 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; min-width: 0; }
.h1c-kpi__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.h1c-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }
.h1c-kpi__row > div { min-width: 0; }
.h1c-kpi__row svg { flex: 0 1 100px; min-width: 0; }
.h1c-kpi__note { font-size: 12px; margin-top: 7px; color: rgba(255, 255, 255, .6); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.h1c-kpi .h-delta--up { color: #4FE3B6; }
.h1c-kpi .h-delta--down { color: #FF7DAA; }
.h1c-kpi .h-delta--flat { color: rgba(255, 255, 255, .5); }

.h1c-cols { padding: 22px 36px 30px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.h1c-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.h1c-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.h1c-chip {
  height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #E5E5E5; background: #fff;
  color: #14213D; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.h1c-chip--on { background: #14213D; color: #fff; border-color: #14213D; }
.h1c-row {
  display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border: 0; border-top: 1px solid #EEEFF2; background: none;
  width: 100%; text-align: left; color: inherit;
}
.h1c-row__body { flex: 1; min-width: 0; }
.h1c-row__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.h1c-row__head .h-who__name { font-size: 14px; flex: 0 1 auto; }
.h1c-row__head .h-who__meta { margin: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h1c-row__tag { margin-left: auto; }
.h1c-row__text { font-size: 14px; line-height: 1.5; color: rgba(0, 0, 0, .78); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.h1c-sources { display: flex; flex-wrap: wrap; gap: 8px; }
.h1c-source {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 5px; border: 1px solid #E5E5E5;
  border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #000;
}
.h1c-source:hover { border-color: #14213D; }
.h1c-source--more { padding: 0 13px; background: #14213D; color: #fff; border-color: #14213D; font-weight: 700; }

/* ---------------------------------------------------------------------------------------
   1d · Bento
   --------------------------------------------------------------------------------------- */

.h1d {
  padding: 22px 24px 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px; align-content: start;
}
.h1d-head { grid-column: span 12; display: flex; align-items: center; gap: 12px; }
.h1d-logo { flex: none; line-height: 1; color: #14213D; }
.h1d-logo__true { font-size: 22px; font-weight: 800; font-style: italic; }
.h1d-logo__inf { font-size: 20px; font-weight: 300; }
.h1d-search { margin-left: 20px; }
.h1d-search input { height: 46px; border: 0; border-radius: 14px; padding: 0 16px 0 44px; }
.h1d-cta { white-space: nowrap; height: 46px; padding: 0 20px; border: 0; border-radius: 14px; background: #14213D; color: #fff; font-size: 14px; font-weight: 700; flex: none; }
.h1d-cta:hover { background: #22407A; }

.h1d-hero {
  grid-column: span 8; position: relative; overflow: hidden; border-radius: 22px; padding: 28px 30px; color: #fff;
  background: radial-gradient(110% 130% at 100% 0%, #2A4A86 0%, #14213D 45%, #070C18 100%);
  min-height: 252px; display: flex; flex-direction: column;
}
.h1d-hero__hello { font-size: 12.5px; font-weight: 500; letter-spacing: .45em; color: rgba(255, 255, 255, .75); }
.h1d-hero__row { display: flex; align-items: flex-end; gap: 36px; margin-top: auto; padding-top: 20px; }
.h1d-hero__figure { flex: none; }
.h1d-hero__big { font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: .9; }
.h1d-hero__note { font-size: 14px; color: rgba(255, 255, 255, .7); margin-top: 10px; }
.h1d-hero__note .h-delta--up { color: #4FE3B6; }
.h1d-hero__note .h-delta--down { color: #FF7DAA; }
.h1d-bars { flex: 1; display: flex; align-items: flex-end; gap: 7px; height: 150px; min-width: 0; }
.h1d-bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.h1d-bars .h1b-bars__bar { border-radius: 6px; }

.h1d-assistant {
  grid-column: span 4; border-radius: 22px; padding: 24px; color: #000;
  background: linear-gradient(160deg, #FFB63B 0%, #FCA311 60%, #F08C00 100%);
  display: flex; flex-direction: column; box-shadow: 0 18px 40px rgba(252, 163, 17, .35); min-width: 0;
}
.h1d-orb { width: 38px; height: 38px; border-radius: 50%; background: #000; flex: none; display: flex; align-items: center; justify-content: center; }
.h1d-assistant__title { font-size: 18px; font-weight: 800; }
.h1d-assistant__sub { font-size: 12.5px; font-weight: 600; opacity: .7; }
.h1d-assistant__q {
  margin-top: 18px; padding: 0; border: 0; background: none; text-align: left; color: #000;
  font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.h1d-assistant__q--muted { font-size: 17px; opacity: .75; }
.h1d-assistant__form { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.h1d-assistant__form select {
  height: 34px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .55); padding: 0 10px;
  font-size: 12.5px; font-weight: 600; color: #000; outline: none;
}
.h1d-assistant .h-assist__row input { height: 44px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .85); color: #000; font-size: 13.5px; }
.h1d-assistant .h-assist__row input::placeholder { color: rgba(0, 0, 0, .5); }
.h1d-assistant .h-assist__row button { width: 44px; height: 44px; border-radius: 12px; background: #000; color: #FCA311; }

.h1d-kpi { grid-column: span 3; border-radius: 18px; padding: 18px 20px; background: #fff; min-width: 0; }
.h1d-kpi__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.h1d-kpi__icon { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.h1d-kpi__delta { padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.h1d-kpi__delta.h-delta--up { background: rgba(14, 138, 110, .1); }
.h1d-kpi__delta.h-delta--down { background: rgba(194, 58, 107, .1); }
.h1d-kpi__delta.h-delta--flat { background: rgba(0, 0, 0, .05); }
.h1d-kpi__value { font-size: 30px; margin-top: 14px; }
.h1d-kpi__label { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, .6); margin-top: 6px; }
.h1d-kpi__note { font-size: 11.5px; color: rgba(0, 0, 0, .45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h1d-kpi__spark { display: block; margin-top: 10px; }

.h1d-activity { grid-column: span 8; grid-row: span 2; border-radius: 18px; padding: 20px 22px; background: #fff; min-width: 0; }
.h1d-activity .h-card__head { margin-bottom: 12px; }
.h1d-activity__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.h1d-post { display: flex; flex-direction: column; justify-content: flex-start; border: 1px solid #EEEFF2; border-radius: 14px; padding: 14px; background: #fff; text-align: left; color: inherit; min-width: 0; }
.h1d-post:hover { border-color: #14213D; }
.h1d-post__head { display: flex; align-items: center; gap: 10px; }
.h1d-post .h-who__meta { font-size: 11.5px; }
.h1d-post .h-tag { padding: 4px 10px; font-size: 11px; }
.h1d-post__text { font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, .75); margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.h1d-card { grid-column: span 4; border-radius: 18px; padding: 20px; background: #fff; min-width: 0; }
.h1d-card .h-card__head { margin-bottom: 6px; }
.h1d-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 3px; }
.h1d-stack span { display: block; min-width: 3px; }
.h1d-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 16px; }
.h1d-legend__item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; min-width: 0; }
.h1d-legend__sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.h1d-legend__pct { margin-left: auto; font-size: 11.5px; color: rgba(0, 0, 0, .5); }

/* ---------------------------------------------------------------------------------------
   Home: narrower screens
   --------------------------------------------------------------------------------------- */

@media (max-width: 1280px) {
  .h1a-row { grid-template-columns: 40px 170px minmax(0, 1fr) auto 24px; gap: 12px; }
  .h1d-kpi { grid-column: span 6; }
}

@media (max-width: 1100px) {
  .h-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1a-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .h1a-assistant { grid-column: 1 / -1; }
  .h1b-cols, .h1c-cols { grid-template-columns: minmax(0, 1fr); }
  .h1d-hero, .h1d-assistant, .h1d-activity, .h1d-card { grid-column: span 12; }
  .h1d-activity { grid-row: auto; }
}

@media (max-width: 860px) {
  .h1a, .h1b, .h1d { padding: 16px var(--gutter) 20px; }
  .h1c-hero { padding: 26px var(--gutter) 24px; }
  .h1c-cols { padding: 16px var(--gutter) 20px; }
  .h-wordmark { gap: 10px; }
  .h-wordmark__true, .h-wordmark__inf, .h-wordmark--xl .h-wordmark__true, .h-wordmark--xl .h-wordmark__inf { font-size: 28px; }
  .h-wordmark__orb, .h-wordmark--xl .h-wordmark__orb { width: 22px; height: 22px; }
  .h-welcome { letter-spacing: .3em; font-size: 11px; }
  .h1a-hero { height: auto; padding: 24px; }
  .h1a-hero__art { width: 100%; opacity: .5; }
  .h1a-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .h1a-row__text, .h1a-row__more { display: none; }
  .h1a-cols { grid-template-columns: minmax(0, 1fr); }
  .h-toolbar { flex-wrap: wrap; }
  .h-card__head { flex-wrap: wrap; }
  .h1c-chips { justify-content: flex-start; }
  .h-search { flex-basis: 100%; }
  .h-search__kbd { display: none; }
  .h-cta { flex: 1; justify-content: center; }
  .h1b-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .h1b-hero__big { font-size: 30px; }
  .h1b-bars, .h1d-bars { height: 120px; gap: 4px; }
  .h1b-bars__labels { gap: 4px; }
  .h1c-hero__top { flex-direction: column; align-items: flex-start; }
  .h1d-head { flex-wrap: wrap; }
  .h1d-search { margin-left: 0; flex-basis: 100%; order: 3; }
  .h1d-logo { flex: 1; }
  .h1d-hero__row { flex-direction: column; align-items: stretch; gap: 18px; }
  .h1d-hero__big { font-size: 48px; }
  .h1d-activity__grid { grid-template-columns: minmax(0, 1fr); }
  .h1d-kpi { grid-column: span 12; }
}

@media (max-width: 520px) {
  .h-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------------------------
   1b · Night mode for every other screen
   --------------------------------------------------------------------------------------- */

/*
  The tokens first. app.css uses --navy for headings, links and borders on focus, so it is
  re-pointed at a light ink; the rules below then fix the places that use it as a FILL.
*/
html[data-frame="1b"] {
  --paper: #060A13;
  --surface: #0D1526;
  --line: rgba(255, 255, 255, 0.09);
  --text: #FFFFFF;
  --text-muted: rgba(255, 255, 255, 0.6);
  --text-faint: rgba(255, 255, 255, 0.42);
  --navy: #DCE3F2;
  color-scheme: dark;
}
html[data-frame="1b"] body { color: #fff; }
html[data-frame="1b"] a:hover { color: #FCA311; }

html[data-frame="1b"] .chip--on,
html[data-frame="1b"] .h1c-chip--on { background: #FCA311; border-color: #FCA311; color: #000; }
html[data-frame="1b"] .btn--primary:hover:not(:disabled),
html[data-frame="1b"] .icon-btn:hover,
html[data-frame="1b"] .btn--danger:hover:not(:disabled) { background: #22407A; border-color: #22407A; color: #fff; }
html[data-frame="1b"] .btn--danger { background: #2A0F1C; border-color: #C23A6B; color: #FF7DAA; }
html[data-frame="1b"] .card--dark { background: #14213D; border-color: rgba(255, 255, 255, .1); }
html[data-frame="1b"] .bubble__avatar { background: #22407A; }
html[data-frame="1b"] .pill--on { color: #FCA311; }
html[data-frame="1b"] .status-chip--bad .status-chip__dot { background: #FF7DAA; }

/* app.css draws soft fills as light grey at partial opacity, which glows on a dark page. */
html[data-frame="1b"] .search input,
html[data-frame="1b"] .avatar,
html[data-frame="1b"] .signal,
html[data-frame="1b"] .source-row:hover,
html[data-frame="1b"] .pill--off,
html[data-frame="1b"] .dist__track,
html[data-frame="1b"] .bubble--user .bubble__avatar,
html[data-frame="1b"] .cite,
html[data-frame="1b"] .draft-preview,
html[data-frame="1b"] .reply__original,
html[data-frame="1b"] .alert--info,
html[data-frame="1b"] .rec__icon { background: rgba(255, 255, 255, .06); }
html[data-frame="1b"] .alert--error { background: rgba(255, 125, 170, .08); border-color: rgba(255, 125, 170, .5); color: #FFD3E2; }
html[data-frame="1b"] .modal__backdrop { background: rgba(0, 0, 0, .6); }
html[data-frame="1b"] input, html[data-frame="1b"] select, html[data-frame="1b"] textarea { color-scheme: dark; }
html[data-frame="1b"] .term button:hover, html[data-frame="1b"] .hint--bad,
html[data-frame="1b"] .hint--error, html[data-frame="1b"] .reply__over { color: #FF7DAA; }

/* ---------------------------------------------------------------------------------------
   Category tags outside the home screen (records feed, sources, catalogs)
   --------------------------------------------------------------------------------------- */

.cat-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.cat-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block; }
html[data-frame="1b"] .cat-tag { background: var(--cat-night) !important; color: var(--cat-glow) !important; }

.palette-tones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.palette-tone { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--text-muted); }
.palette-tone .cat-swatch { border: 1px solid var(--line); }
.palette-preview { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.palette-preview__light, .palette-preview__dark {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line);
}
.palette-preview__light { background: #fff; }
.palette-preview__dark { background: #0D1526; }

/* ---------------------------------------------------------------------------------------
   Crear análisis
   --------------------------------------------------------------------------------------- */

.setup-done { display: flex; gap: 18px; align-items: flex-start; margin-top: 18px; }
.setup-done__icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%; background: #FCA311; color: #000;
  display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800;
}
.setup-done__body h2 { margin: 4px 0 6px; font-size: 18px; color: var(--navy); }
.setup-reuse { font-size: 10px; color: var(--text-muted); }
.setup-problem { margin-top: 14px; color: #FFD27A; }

/* Crear análisis — kind switch and "Lo que dicen de las cuentas" */
.kind-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.kind-switch__opt {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.kind-switch__opt strong { color: var(--navy); font-size: 14px; }
.kind-switch__opt span { font-size: 12px; color: var(--text-muted); }
.kind-switch__opt:hover { border-color: var(--navy); }
.kind-switch__opt--on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.mentions-terms { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.option-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.option-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.option-row .term { flex: 0 0 auto; }
.option-row input { flex: 1 1 220px; height: 30px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 10px; font-size: 12px; background: var(--surface); color: var(--text); }
.suggestion { margin-top: 10px; padding: 12px 14px; border: 1px dashed var(--navy); border-radius: var(--radius); }
.suggestion__q { margin: 6px 0; font-weight: 600; color: var(--navy); }
.suggestion__opts { margin: 0 0 8px; padding-left: 18px; font-size: 12.5px; }
.estimate { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.estimate__row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.estimate__row--total { font-weight: 700; color: var(--navy); border-top: 1px solid var(--line); padding-top: 4px; }
.collection-chart { width: 100%; height: 140px; display: block; }
@media (max-width: 640px) { .kind-switch { grid-template-columns: 1fr; } }
.collection-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.collection-legend__row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.collection-legend__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.collection-legend__value { flex: none; font-size: 11.5px; color: var(--text-muted); }

/* Clásico ⇄ Noche, beside the language selector. Sized and tinted to match it. */
.night-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 30px; padding: 0; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .07); color: #fff;
  border: 1px solid rgba(255, 255, 255, .14); cursor: pointer;
}
.night-toggle:hover { border-color: rgba(255, 255, 255, .4); }
.night-toggle[aria-pressed="true"] { color: #FCA311; }

/* Crear análisis — draft notices and the Limpiar button */
.draft-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.setup-autosave { margin-top: 10px; color: rgba(255, 255, 255, .55); font-size: 11.5px; }

/* Crear análisis — Validar */
.profile-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.profile-card__img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--line); }
.profile-card__name { font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 6px; }
.profile-card__verified { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #1D9BF0; color: #fff; font-size: 10px; }
.profile-card__meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.term__avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; margin-left: -4px; }
.term__warn { color: #C8553D; font-size: 12px; }
.term .term__check { font-size: 10.5px; font-weight: 700; color: var(--navy); text-decoration: underline; }

/* Results — the records table under the pills */
.records-card { margin: 14px 0; }
.records-filters { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.records-search { height: 34px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; font-size: 13px; max-width: 360px; background: var(--surface); color: var(--text); }
.records-filter { display: flex; flex-direction: column; gap: 6px; }
.records-filter__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.records-filters > .btn { align-self: flex-start; }
.answer-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; color: #14213D; background: var(--chip); white-space: nowrap;
}
.answer-chip--button { border: 2px solid transparent; cursor: pointer; opacity: .55; }
.answer-chip--button:hover { opacity: .85; }
.answer-chip--on { opacity: 1; border-color: #14213D; }
.answer-chip__count { font-size: 10.5px; font-weight: 500; opacity: .75; }
.records-table-wrap { overflow: auto; max-height: 640px; border: 1px solid var(--line); border-radius: var(--radius); transition: opacity .15s; }
.records-table-wrap--loading { opacity: .5; }
.records-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.records-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.records-table th button { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.records-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.records-table tr:last-child td { border-bottom: 0; }
.records-table .num { text-align: right; }
.records-table__date { white-space: nowrap; font-size: 11.5px; color: var(--text-muted); }
.records-table__author { min-width: 140px; }
.records-table__handle { font-size: 11px; color: var(--text-muted); }
.records-table__post { min-width: 260px; max-width: 460px; }
.records-table__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; line-height: 1.4; }
.records-table__text--open { display: block; -webkit-line-clamp: unset; }
.records-table__link { font-size: 11px; }
.records-empty { padding: 18px; text-align: center; }
.records-pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; }

/* Results — verificación humana */
.records-table__verify { white-space: nowrap; }
.records-table__verify .btn { margin-top: 4px; }
.verify-mark { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #8A5300; }
.verify-mark__date { font-weight: 400; color: var(--text-muted); font-size: 10.5px; }
.verify-dialog { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.verify-dialog__backdrop { position: absolute; inset: 0; background: rgba(13, 21, 38, .45); }
.verify-dialog__panel { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; }
.verify-dialog__panel h2 { margin: 0 0 6px; font-size: 18px; color: var(--navy); }
.verify-dialog__post { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #FCA311; background: var(--frame-bg, #F3F4F7); font-size: 13px; max-height: 140px; overflow: auto; }
.verify-dialog__author { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.verify-dialog__head { display: flex; justify-content: space-between; align-items: center; }
.verify-dialog__list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.verify-dialog__item { display: flex; gap: 8px; align-items: center; }
.verify-dialog__email { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* ---------------------------------------------------------------------------------------
   Analysis list cards
   --------------------------------------------------------------------------------------- */

/*
  app.css stretches .source-card__actions to 100% below 980px, which is right for source
  cards but, inside .record__head, squeezes the title to one word per line and pushes the
  icons over it. Here the icons keep their natural size and the title gets the rest.
*/
.analysis-card { min-width: 0; max-width: 100%; }
.analysis-card .record__head > .source-card__actions { width: auto; flex: none; margin-left: auto; }
.analysis-card .record__name strong { overflow-wrap: anywhere; }
.analysis-card .record__meta > span { white-space: nowrap; }
.analysis-card .signal { min-width: 0; max-width: 100%; }
.analysis-card .signal > span { overflow-wrap: anywhere; }
.analysis-card .record__foot .source-card__actions { flex-wrap: wrap; gap: 6px; }

@media (max-width: 640px) {
  .analysis-card { padding: 16px 14px; }
  .analysis-card .record__head { gap: 10px; }
  .analysis-card .record__head .icon-btn { width: 32px; height: 32px; }
  /* Question above its options instead of two cramped columns. */
  .analysis-card .signal { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  /* Two buttons per row, the quiet re-run link on its own line. */
  .analysis-card .record__foot .source-card__actions > .btn {
    flex: 1 1 calc(50% - 6px); min-width: 0; justify-content: center; text-align: center;
    font-size: 13px; padding-left: 8px; padding-right: 8px; line-height: 1.25;
  }
  .analysis-card .record__foot .source-card__actions > .link-btn { flex: 1 1 100%; text-align: center; padding: 6px 0; }
}

.analysis-card .signals { margin-top: 10px; }

/* On a phone the records table scrolls sideways inside its frame instead of crushing the
   post text into a one-word column (min-width on a table cell is not honoured). */
@media (max-width: 640px) {
  .records-table { min-width: 760px; }
  .records-table__post { width: 280px; }
}

/* ---------------------------------------------------------------------------------------
   Sign-in: brand panel + sign-in panel. Stacks on a phone.
   --------------------------------------------------------------------------------------- */

.signin { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }

.signin__brand {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  padding: 56px clamp(28px, 6vw, 88px); color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, #22407A 0%, transparent 55%), linear-gradient(160deg, #0A1120, #14213D);
}
.signin__mark { display: flex; align-items: center; gap: 10px; line-height: 1; color: #fff; text-decoration: none; width: max-content; }
.signin__mark:hover { color: #fff; }
.signin__true { font-size: clamp(40px, 5vw, 64px); font-weight: 800; font-style: italic; letter-spacing: -0.03em; }
.signin__dot { width: 14px; height: 14px; border-radius: 50%; background: #FCA311; box-shadow: 0 0 22px #FCA311; margin-top: -18px; flex: none; }
.signin__inf { font-size: clamp(34px, 4.2vw, 54px); font-weight: 300; letter-spacing: -0.01em; }
.signin__tagline { margin: 26px 0 0; font-size: clamp(18px, 1.7vw, 22px); font-weight: 700; color: #FCA311; max-width: 30ch; }
.signin__pitch { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); max-width: 46ch; }
.signin__lines { position: absolute; left: 0; right: 0; bottom: 40px; width: 100%; height: 30%; opacity: .55; pointer-events: none; }
.signin__foot { position: absolute; left: clamp(28px, 6vw, 88px); bottom: 22px; margin: 0; font-size: 11px; color: rgba(255, 255, 255, .45); }

.signin__panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 72px 24px 40px; background: var(--paper); }
.signin__tools { position: absolute; top: 20px; right: 24px; }
.signin__tools .lang { background: var(--surface); color: var(--navy); border: 1px solid var(--line); border-radius: 9px; height: 34px; padding: 0 8px; }

.signin__card {
  width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 36px 32px 28px; box-shadow: 0 18px 50px rgba(10, 17, 32, .08);
}
.signin__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); }
.signin__body { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.signin__card .alert { margin-top: 18px; }
.signin__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.signin__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text);
  font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.signin__btn:hover { color: var(--text); border-color: #FCA311; box-shadow: 0 0 0 3px rgba(252, 163, 17, .18); }
.signin__btn:active { transform: translateY(1px); }
.signin__btn:focus-visible { outline: 2px solid #FCA311; outline-offset: 2px; }
.signin__btn svg { flex: none; }
.signin__loading { margin-top: 24px; font-size: 13px; color: var(--text-faint); }
.signin__fine { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-faint); }

html[data-frame="1b"] .signin__card { box-shadow: none; }
html[data-frame="1b"] .signin__btn { background: rgba(255, 255, 255, .04); }
html[data-frame="1b"] .signin__title { color: #fff; }

@media (max-width: 860px) {
  .signin { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .signin__brand { padding: 68px var(--gutter) 84px; min-height: 0; }
  .signin__true { font-size: 44px; }
  .signin__inf { font-size: 37px; }
  .signin__tagline { margin-top: 16px; font-size: 17px; }
  .signin__pitch { display: none; }
  .signin__lines { bottom: 0; height: 38%; opacity: .3; }
  .signin__foot { display: none; }
  .signin__panel { align-items: flex-start; padding: 0 var(--gutter) 40px; background: transparent; }
  /* The card overlaps the bottom of the brand panel, so the two read as one piece. */
  .signin__card { position: relative; z-index: 1; margin-top: -48px; padding: 28px 22px 22px; }
  /* The panel stops being the positioning box, so the language picker sits top-right of the page. */
  .signin { position: relative; }
  .signin__panel { position: static; }
  .signin__tools { top: 14px; right: var(--gutter); }
  .signin__tools .lang { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .2); }
  .signin__tools .lang option { color: #000; }
}