@import url('https://fonts.googleapis.com/css2?family=VT323&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --paper:    #F5F1E8;
    --paper-2:  #EAE5D6;
    --paper-3:  #DCD5C0;
    --ink:      #111111;
    --ink-soft: #2a2a2a;
    --mid:      #666;
    --light:    #9a9a9a;
    --line:     #b8b1a0;
    --wa:       #128C7E;
    --wa-hover: #0e7468;
    --red:      #a62c14;
    --red-pale: #F2DFD7;
    --amber:    #a46a0a;
    --amber-pale:#EADFBF;
    --green-ok: #2E6A38;
    --green-pale:#DFE8D8;
    --star:     #e9a41e;

    --font-display: 'VT323', 'IBM Plex Mono', monospace;
    --font-body:    'IBM Plex Mono', 'Courier New', Courier, monospace;
  }

  html, body {
    height: 100%;
    background: #000;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
  }

  /* ════════════════════════════════════════════
     LAB (outer demo wrapper)
     ════════════════════════════════════════════ */
  .lab {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lab-header {
    width: 100%;
    flex-shrink: 0;
    background: #0a0a0a;
    color: #eee;
    padding: 8px 14px;
    border-bottom: 1px solid #222;
  }

  .state-switcher {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
  }

  .lab-header-inner {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .state-switcher::-webkit-scrollbar { display: none; }

  .state-btn {
    flex-shrink: 0;
    background: transparent;
    border: 1px solid #444;
    color: #aaa;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .state-btn:hover { border-color: #888; color: #ddd; }
  .state-btn.active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
  }

  /* ════════════════════════════════════════════
     PHONE FRAME
     ════════════════════════════════════════════ */
  .phone {
    width: 100%;
    max-width: 420px;
    flex: 1;
    min-height: 0;
    background: var(--paper);
    position: relative;

    background-image:
      repeating-linear-gradient(0deg,
        rgba(0,0,0,0.018) 0,
        rgba(0,0,0,0.018) 1px,
        transparent 1px,
        transparent 3px);

    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  @media (min-width: 640px) {
    .phone {
      margin: 20px 0;
      max-height: 880px;
      border-radius: 32px;
      box-shadow: 0 20px 80px rgba(0,0,0,0.5);
      border: 8px solid #222;
    }
  }

  /* ════════════════════════════════════════════
     HALFTONE DARK
     Black dots on cream paper — like a thermal/dot-matrix print.
     Background-color stays paper; the dots do the darkening.
     1.75px grid, 1.0px dot radius (~95% coverage).
     ════════════════════════════════════════════ */
  .topbar,
  .bottom-nav,
  .delta-widget.paid,
  .cta-btn,
  .fomo-btn {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, #0a0a0a 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
  }

  .delta-widget.free {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, #3a0f08 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
  }

  /* Green CTA buttons — WhatsApp green dots on cream */
  .cta-btn {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, var(--wa) 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
  }
  .cta-btn:hover {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, var(--wa-hover) 1.0px, transparent 1.15px);
  }

  /* Darker cream sections — subtle paper halftone, smaller dots to stay light */
  .paper-2-dotted,
  .fp-widget,
  .comp-chip,
  .social-detail-item,
  .cta-item.all-clear,
  .cta-item.soft,
  .delta-placeholder {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
  }

  /* Text crisping on halftone surfaces */
  .topbar,
  .bottom-nav .nav-btn,
  .delta-widget,
  .cta-btn {
    text-shadow: 0 0 1px rgba(0,0,0,0.9);
  }

  /* ════════════════════════════════════════════
     STICKY HEADER (top)
     ════════════════════════════════════════════ */
  .topbar {
    flex-shrink: 0;
    color: var(--paper);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #000;
  }

  .topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .brand {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: lowercase;
  }

  .venue-tag {
    font-family: var(--font-display);
    font-size: 17px;
    color: rgba(245,241,232,0.7);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    border-left: 1px solid rgba(245,241,232,0.2);
    padding-left: 14px;
  }

  .gear-btn {
    background: transparent;
    border: 1px solid rgba(245,241,232,0.3);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(245,241,232,0.7);
    padding: 0;
    transition: all 0.15s;
  }
  .gear-btn:hover { color: var(--paper); border-color: var(--paper); }
  .gear-btn svg { width: 15px; height: 15px; }

  /* ════════════════════════════════════════════
     SCROLLABLE BODY
     ════════════════════════════════════════════ */
  .scroll-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 14px 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-body::-webkit-scrollbar { display: none; }

  /* ════════════════════════════════════════════
     BOTTOM NAV
     ════════════════════════════════════════════ */
  .bottom-nav {
    flex-shrink: 0;
    border-top: 2px solid var(--ink);
    display: flex;
    box-shadow: 0 -8px 20px rgba(0,0,0,0.15);
  }

  .nav-btn {
    flex: 1;
    padding: 10px 0 12px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(245,241,232,0.55);
    cursor: pointer;
    font-family: var(--font-body);
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    transition: color 0.15s;
    min-height: 56px;
  }
  .nav-btn svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
  }
  .nav-btn-label {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .nav-btn.active {
    color: var(--paper);
    border-top-color: var(--wa);
  }
  .nav-btn.next {
    color: rgba(245,241,232,0.3);
  }
  .nav-btn.next .nav-btn-label::before {
    content: '▸ ';
    opacity: 0.6;
  }
  .nav-btn:hover:not(.active):not(.next) { color: rgba(245,241,232,0.85); }

  body[data-state="s0"] .nav-btn[data-show~="s0"] { display: flex; }
  body[data-state="s1"] .nav-btn[data-show~="s1"] { display: flex; }
  body[data-state="s2"] .nav-btn[data-show~="s2"] { display: flex; }
  body[data-state="s3"] .nav-btn[data-show~="s3"] { display: flex; }
  body[data-state="s4"] .nav-btn[data-show~="s4"] { display: flex; }
  body[data-state="paid"] .nav-btn[data-show~="paid"] { display: flex; }
  body[data-state="paid-clear"] .nav-btn[data-show~="paid"] { display: flex; }
  body[data-state="free"] .nav-btn[data-show~="free"] { display: flex; }

  /* ════════════════════════════════════════════
     ASCII separators & labels
     ════════════════════════════════════════════ */
  .ascii-sep {
    text-align: center;
    color: var(--line);
    font-size: 11px;
    letter-spacing: 0.4em;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    margin: 12px 0 10px;
    line-height: 1;
  }

  .ascii-label {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--ink);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    margin: 18px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    line-height: 1;
  }
  .ascii-label::before,
  .ascii-label::after {
    content: '═══════════════════════';
    color: var(--line);
    font-size: 10px;
    letter-spacing: 0.1em;
    overflow: hidden;
    flex: 1;
    line-height: 1;
  }

  .ascii-label.red { color: var(--red); }
  .ascii-label.red::before,
  .ascii-label.red::after { color: var(--red); opacity: 0.6; }

  /* ════════════════════════════════════════════
     WEEKLY DELTA WIDGET
     ════════════════════════════════════════════ */
  .delta-widget {
    color: var(--paper);
    padding: 14px 15px;
    margin: 6px -2px 6px;
    border: 1px solid var(--ink);
    position: relative;
  }
  body[data-state="s2"] .delta-widget.paid,
  body[data-state="s3"] .delta-widget.paid,
  body[data-state="s4"] .delta-widget.paid,
  body[data-state="paid"] .delta-widget.paid,
  body[data-state="paid-clear"] .delta-widget.paid,
  body[data-state="free"] .delta-widget.free {
    margin-top: 0;
  }
  .delta-widget.free {
    border-left: 3px solid var(--red);
  }

  .delta-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    font-family: var(--font-display);
  }
  .delta-title {
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .delta-date {
    font-size: 13px;
    opacity: 0.55;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .delta-section { margin-bottom: 10px; }
  .delta-section:last-child { margin-bottom: 0; }

  /* Two-column layout for paid widget: TEO HIZO left, RESULTADOS right */
  .delta-cols {
    display: grid;
    grid-template-columns: 1fr 1px auto;
    gap: 12px;
    margin-bottom: 10px;
  }
  .delta-cols .delta-section { margin-bottom: 0; }
  .delta-cols .delta-divider {
    background: var(--paper);
    opacity: 0.25;
  }
  /* When in cols, headline stacks vertically: each metric on its own line */
  .delta-cols .delta-headline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 17px;
  }
  .delta-cols .delta-headline > span {
    display: block;
  }

  .delta-label {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 4px;
  }

  .delta-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .delta-headline {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.2;
  }
  .delta-headline .pos { color: #7ec988; }
  .delta-headline .neg { color: #E38570; }

  .delta-row {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12.5px;
    line-height: 1.5;
    opacity: 0.92;
  }
  .delta-row::before {
    content: '›';
    color: var(--wa);
    font-weight: 700;
  }
  .delta-row strong { color: var(--paper); }

  .delta-comp {
    font-size: 11.5px;
    line-height: 1.55;
    opacity: 0.7;
    padding-top: 8px;
    margin-top: 10px;
    border-top: 1px dashed rgba(245,241,232,0.15);
  }
  .delta-comp strong { color: var(--paper); opacity: 1; }

  .delta-insight {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(245,241,232,0.2);
  }
  .delta-insight-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.55;
    margin-bottom: 4px;
  }
  .delta-insight-text {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
  }

  .delta-placeholder {
    padding: 12px 14px;
    border: 1px dashed var(--line);
    text-align: center;
    margin: 6px 0;
  }
  .delta-placeholder-label {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 4px;
  }
  .delta-placeholder-text {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.45;
  }

  /* ════════════════════════════════════════════
     CTAs
     ════════════════════════════════════════════ */
  .cta-stack { display: flex; flex-direction: column; gap: 8px; }

  .cta-item {
    background: var(--paper);
    border: 1px solid var(--ink);
    padding: 12px 13px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .cta-item > .cta-title,
  .cta-item > .cta-body,
  .cta-item > .pending-list,
  .cta-item > .check {
    align-self: stretch;
  }
  .cta-item.primary { border-width: 1.5px; }

  .cta-title {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    margin-bottom: 5px;
  }
  .cta-body {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .cta-body:last-child { margin-bottom: 0; }
  .cta-body strong { color: var(--ink); }

  .cta-btn {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 8px;
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 9px 13px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-image 0.15s;
  }
  .cta-btn.secondary {
    background: transparent;
    background-image: none;
    color: var(--ink);
    border: 1px solid var(--ink);
    text-shadow: none;
  }
  .cta-btn.secondary:hover {
    background: var(--ink);
    background-image: none;
    color: var(--paper);
  }
  .cta-btn.block {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .cta-item.all-clear {
    background-color: var(--paper);
    border: 1px dashed var(--line);
    text-align: center;
    padding: 16px 14px;
    align-items: center;
  }
  .cta-item.all-clear .check {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--green-ok);
    line-height: 1;
    margin-bottom: 6px;
  }
  .cta-item.all-clear .cta-title { color: var(--ink); }
  .cta-item.all-clear .cta-body { color: var(--ink-soft); margin-bottom: 0; }

  /* Compact variant: single horizontal line, check on left of title, no body */
  .cta-item.all-clear.compact {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-align: left;
    padding: 10px 14px;
  }
  .cta-item.all-clear.compact .check {
    font-size: 22px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .cta-item.all-clear.compact .cta-title {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 0;
  }

  /* ════════════════════════════════════════════
     ZONE 1 — two-block horizontal layout
     ════════════════════════════════════════════ */
  .z1-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px dashed var(--line);
  }
  .z1-left { min-width: 0; }
  .z1-venue {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 3px;
  }
  .z1-meta {
    font-size: 10.5px;
    color: var(--mid);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
  }
  .z1-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    padding-left: 14px;
    border-left: 1px dashed var(--line);
  }
  .z1-rating {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 0.9;
  }
  .z1-stars {
    font-size: 12px;
    color: var(--star);
    letter-spacing: 0.06em;
    line-height: 1;
  }
  .z1-reviews {
    font-size: 10px;
    color: var(--mid);
    letter-spacing: 0.04em;
    line-height: 1.3;
    text-align: right;
  }

  .z1-ranking { margin-bottom: 12px; }
  .z1-ranking-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 2px;
  }
  .z1-ranking-val {
    font-family: var(--font-display);
    font-size: 18px;
  }

  .z1-callouts { display: flex; flex-direction: column; gap: 6px; }
  .z1-callout {
    display: flex;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
  }
  .z1-callout-arrow {
    font-weight: 700;
    flex-shrink: 0;
    width: 14px;
  }
  .z1-callout.up .z1-callout-arrow { color: var(--green-ok); }
  .z1-callout.down .z1-callout-arrow { color: var(--red); }
  .z1-callout-label { color: var(--mid); }
  .z1-callout-val { font-weight: 700; }
  .z1-callout-val.up { color: var(--green-ok); }
  .z1-callout-val.down { color: var(--red); }

  body[data-state="free"] .z1-callout.down {
    background: var(--red-pale);
    padding: 8px 10px;
    border-left: 2px solid var(--red);
  }

  /* ════════════════════════════════════════════
     ZONE 2 — Competidores (new bucket model)
     ════════════════════════════════════════════ */
  .bucket { margin-bottom: 8px; }

  .bucket-head { padding: 6px 0 4px; }
  .bucket-title {
    font-family: var(--font-display);
    font-size: 17px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
  }
  .bucket-sub {
    font-size: 10.5px;
    color: var(--mid);
    letter-spacing: 0.04em;
    margin-top: 2px;
    line-height: 1.35;
  }

  .comp-row {
    border-top: 1px dashed var(--line);
    padding: 9px 0 7px;
    cursor: pointer;
  }
  .comp-row:last-child { border-bottom: 1px dashed var(--line); }

  /* Venue's own row inside competencia directa — distinct treatment so
     the owner sees their position visually in the ranking */
  .comp-row.is-self {
    background-color: var(--paper-2);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    padding: 10px 8px 8px;
    margin-left: -8px;
    margin-right: -8px;
    cursor: default;
  }
  .comp-row.is-self + .comp-row { border-top: none; }
  .comp-row .comp-rank {
    font-family: var(--font-display);
    font-size: 13px;
    color: var(--mid);
    letter-spacing: 0.04em;
    margin-right: 6px;
    line-height: 1;
  }
  .comp-row.is-self .comp-rank {
    color: var(--ink);
  }
  .comp-row.is-self .comp-self-tag {
    font-family: var(--font-body);
    font-size: 9.5px;
    color: var(--paper);
    background: var(--ink);
    padding: 1px 6px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 4px;
    line-height: 1.4;
  }
  .comp-row.is-self .comp-rating {
    color: var(--ink);
    font-weight: 500;
  }
  .comp-row.is-self .comp-expand-btn { display: none; }

  .comp-main {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .comp-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .comp-name {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink);
    letter-spacing: 0.02em;
    line-height: 1.1;
  }
  .comp-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .comp-chip {
    font-size: 9.5px;
    color: var(--mid);
    padding: 1px 6px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: 1px solid var(--line);
  }
  .comp-chip.dist { font-weight: 700; color: var(--ink-soft); }
  .comp-chip.price { color: var(--ink-soft); }

  .social-icons {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  .social-icons svg {
    width: 13px; height: 13px;
    color: var(--mid);
  }

  .comp-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .comp-rating {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--ink);
    line-height: 1;
  }
  .comp-rating.higher { color: var(--red); }
  .comp-rating.lower { color: var(--green-ok); }
  .comp-trend {
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 5px;
    font-weight: 700;
    line-height: 1.4;
  }
  .comp-trend.up { background: var(--red-pale); color: var(--red); }
  .comp-trend.flat { background: var(--paper-2); color: var(--mid); }
  .comp-trend.down { background: var(--green-pale); color: var(--green-ok); }

  .comp-expand-btn {
    background: transparent;
    border: none;
    color: var(--mid);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
    line-height: 1;
    transition: transform 0.2s, color 0.15s;
  }
  .comp-row.open .comp-expand-btn { transform: rotate(180deg); color: var(--ink); }

  /* Trend arrows hidden until historical data exists */
  .comp-trend { display: none; }
  body[data-state="paid"] .comp-trend,
  body[data-state="paid-clear"] .comp-trend,
  body[data-state="free"] .comp-trend { display: inline-block; }

  body[data-state="free"] .comp-row.widening { background: rgba(166,44,20,0.05); }

  .comp-detail {
    display: none;
    padding: 10px 2px 6px;
    margin-top: 4px;
    border-top: 1px dashed var(--line);
  }
  .comp-row.open .comp-detail { display: block; }

  .detail-block { margin-bottom: 12px; }
  .detail-block:last-child { margin-bottom: 0; }

  .detail-title {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .detail-title svg { width: 12px; height: 12px; }

  .google-detail {
    display: grid;
    grid-template-columns: 1fr 115px;
    gap: 10px;
    align-items: center;
  }
  .g-summary {
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--ink-soft);
  }
  .g-summary strong { color: var(--ink); }

  .g-dist {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .g-dist-row {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 6px;
    align-items: center;
    font-size: 10px;
    color: var(--mid);
    line-height: 1;
  }
  .g-dist-stars {
    text-align: right;
    font-weight: 700;
    color: var(--ink-soft);
  }
  .g-dist-bar {
    height: 6px;
    background: var(--paper-2);
    position: relative;
    overflow: hidden;
  }
  .g-dist-bar .fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--star);
  }

  .social-detail {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.4;
  }
  .social-detail-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--line);
  }
  .social-detail-item svg { width: 11px; height: 11px; }
  .social-detail-item strong { color: var(--ink); }

  /* ════════════════════════════════════════════
     FOREIGN PATRON WIDGET
     ════════════════════════════════════════════ */
  .fp-widget {
    padding: 12px 14px;
    border: 1px solid var(--line);
    margin: 8px 0;
  }
  .fp-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 8px;
  }
  .fp-main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
  }
  .fp-ratio {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 1;
  }
  .fp-vs {
    font-size: 11px;
    color: var(--mid);
    text-align: right;
    line-height: 1.4;
  }
  .fp-vs strong { color: var(--ink); }
  .fp-langs {
    font-size: 11px;
    color: var(--ink-soft);
    letter-spacing: 0.04em;
  }

  /* ════════════════════════════════════════════
     STATE VISIBILITY
     ════════════════════════════════════════════ */
  .delta-widget, .delta-placeholder { display: none; }
  body[data-state="s2"] .delta-widget.paid,
  body[data-state="s3"] .delta-widget.paid,
  body[data-state="s4"] .delta-widget.paid,
  body[data-state="paid"] .delta-widget.paid,
  body[data-state="paid-clear"] .delta-widget.paid,
  body[data-state="free"] .delta-widget.free { display: block; }

  .action-slot-post-delta, .action-slot-post-zone2 { display: none; }
  body[data-state="s0"] .action-slot-post-zone2,
  body[data-state="s1"] .action-slot-post-zone2 { display: block; }
  body[data-state="s2"] .action-slot-post-delta,
  body[data-state="s3"] .action-slot-post-delta,
  body[data-state="s4"] .action-slot-post-delta,
  body[data-state="paid"] .action-slot-post-delta,
  body[data-state="paid-clear"] .action-slot-post-delta,
  body[data-state="free"] .action-slot-post-delta { display: block; }

  .cta-s0, .cta-s1, .cta-s2, .cta-s3, .cta-s4, .cta-paid-pending, .cta-paid-clear, .cta-free { display: none; }
  /* cta-items (card containers) use flex layout so flex-end right-aligns the button */
  body[data-state="s0"] .cta-s0,
  body[data-state="s1"] .cta-s1,
  body[data-state="s2"] .cta-s2,
  body[data-state="s3"] .cta-s3,
  body[data-state="s4"] .cta-s4,
  body[data-state="paid-clear"] .cta-paid-clear,
  body[data-state="free"] .cta-free { display: flex; }
  /* cta-paid-pending is a wrapper containing a label + stack of tasks; needs block */
  body[data-state="paid"] .cta-paid-pending { display: block; }

  .secondary-actions { display: none; }
  body[data-state="paid"] .secondary-actions,
  body[data-state="paid-clear"] .secondary-actions { display: block; }

  /* ════════════════════════════════════════════
     PAGE SWITCHING
     ════════════════════════════════════════════ */
  .page { display: none; }

  /* Tighten first-of-page headroom. The scroll-body's 8px top padding
     already provides breathing room — the first visible header on each
     page should not add more on top. Uses :first-of-type so it works
     even when earlier siblings are hidden by state. */
  .page > .ascii-label:first-of-type,
  .page > .comp-pulse:first-of-type,
  .page > .collapsible:first-of-type > .collapsible-trigger > .ascii-label,
  .page > .collapsible:first-of-type > .collapsible-trigger > .settings-group-title {
    margin-top: 0;
  }
  /* On Settings, the back button is the absolute first child; the ascii-label
     after it should sit close, not 18px down */
  .page-settings > .ascii-label {
    margin-top: 6px;
  }

  /* TU POSICIÓN ascii-label is structurally the 4th DIV child of page-resumen
     (after delta-widget paid, delta-widget free, action-slot-post-delta).
     :first-of-type doesn't help here because it checks tag type, not class.
     In S0/S1 all preceding siblings are hidden, so TU POSICIÓN is the first
     visible header — kill its margin-top in those states only. */
  body[data-state="s0"] .page-resumen > .ascii-label.first-on-page-when-empty,
  body[data-state="s1"] .page-resumen > .ascii-label.first-on-page-when-empty {
    margin-top: 0;
  }
  body[data-page="resumen"] .page-resumen { display: block; }
  body[data-page="reviews"] .page-reviews { display: block; }

  /* Nav button highlight follows data-page */
  body[data-page="resumen"] .nav-btn[data-page-link="resumen"],
  body[data-page="reviews"] .nav-btn[data-page-link="reviews"] {
    color: var(--paper);
    border-top-color: var(--wa);
  }
  body[data-page="resumen"] .nav-btn:not([data-page-link="resumen"]),
  body[data-page="reviews"] .nav-btn:not([data-page-link="reviews"]) {
    /* reset — not active */
  }

  /* ════════════════════════════════════════════
     REVIEWS PAGE — Google summary header
     ════════════════════════════════════════════ */
  .g-summary-block {
    padding: 4px 0 12px;
    margin-bottom: 8px;
    border-bottom: 1px dashed var(--line);
  }
  .g-summary-top {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
  }
  .g-summary-rating-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }
  .g-big-rating {
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 0.9;
    color: var(--ink);
  }
  .g-big-stars {
    font-size: 13px;
    color: var(--star);
    letter-spacing: 0.08em;
    line-height: 1;
  }
  .g-big-count {
    font-size: 10px;
    color: var(--mid);
    letter-spacing: 0.04em;
    line-height: 1.3;
  }

  .g-summary-dist {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  .g-summary-highlights {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .g-highlight-row {
    display: flex;
    gap: 8px;
    font-size: 11.5px;
    line-height: 1.55;
  }
  .g-highlight-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    flex-shrink: 0;
    min-width: 70px;
    padding-top: 2px;
  }
  .g-highlight-label.pos { color: var(--green-ok); }
  .g-highlight-label.neg { color: var(--red); }
  .g-highlight-text {
    color: var(--ink-soft);
    flex: 1;
  }
  .g-highlight-text strong { color: var(--ink); }

  /* ════════════════════════════════════════════
     REVIEWS — mode chip
     ════════════════════════════════════════════ */
  .mode-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin-bottom: 14px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .mode-chip:hover { border-color: var(--ink); }
  .mode-chip-head {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mode-chip-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
  }
  .mode-chip-value {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .mode-chip-edit {
    margin-left: auto;
    color: var(--wa);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .mode-chip-tagline {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.4;
  }

  /* ════════════════════════════════════════════
     REVIEW ROW
     ════════════════════════════════════════════ */
  .review-row {
    border-top: 1px dashed var(--line);
    padding: 12px 0 10px;
  }
  .review-row:last-child { border-bottom: 1px dashed var(--line); }

  .review-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 6px;
  }
  .review-left {
    min-width: 0;
    flex: 1;
  }
  .review-author {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 2px;
  }
  .review-meta {
    font-size: 10px;
    color: var(--mid);
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  .review-stars {
    font-size: 12px;
    color: var(--star);
    letter-spacing: 0.06em;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .review-stars.low { color: var(--red); }

  .review-text {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.55;
    margin-bottom: 8px;
  }
  .review-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Teo's proposed draft (on unanswered rows) */
  .teo-draft {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--wa);
    padding: 8px 10px;
    margin-bottom: 8px;
  }
  .teo-draft-label {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wa);
    margin-bottom: 4px;
  }
  .teo-draft-text {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    font-style: italic;
  }

  /* Teo's posted response (on answered rows) */
  .teo-response {
    border-left: 2px solid var(--line);
    padding: 6px 0 6px 10px;
    margin-top: 6px;
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .teo-response-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 3px;
  }
  .teo-response-label.owner { color: var(--amber); }

  .review-actions {
    display: flex;
    justify-content: flex-end;
  }

  /* Queued (paid-clear) row — no action, quiet style */
  .review-row.queued .teo-draft {
    border-left-color: var(--mid);
  }
  .review-row.queued .teo-draft-label {
    color: var(--mid);
  }
  .queue-note {
    font-size: 10.5px;
    color: var(--mid);
    font-style: italic;
    letter-spacing: 0.02em;
  }

  /* Filter bar for answered reviews */
  .filter-bar {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 10px 0 6px;
  }
  .filter-chip {
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--mid);
    cursor: pointer;
    transition: all 0.15s;
  }
  .filter-chip:hover { border-color: var(--ink); color: var(--ink); }
  .filter-chip.active {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .filter-chip .star {
    color: var(--star);
    margin-left: 2px;
  }
  .filter-chip.active .star { color: var(--star); }

  .filter-row {
    margin-bottom: 8px;
  }
  .filter-row-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 2px;
  }

  /* FOMO urgent header */
  .urgent-banner {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, #3a0f08 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
    color: var(--paper);
    padding: 10px 12px;
    margin: 4px 0 10px;
    text-shadow: 0 0 1px rgba(0,0,0,0.9);
  }
  .urgent-banner-label {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-bottom: 3px;
  }
  .urgent-banner-text {
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.92;
  }
  .urgent-banner-text strong { color: var(--paper); }

  /* FOMO per-row activate CTA */
  .fomo-row-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    margin-top: 6px;
    border: 1px dashed var(--red);
    background-color: var(--red-pale);
  }
  .fomo-row-cta-text {
    font-size: 11px;
    color: var(--red);
    font-weight: 700;
    line-height: 1.3;
  }
  .fomo-row-cta-btn {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, var(--wa) 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0,0,0,0.9);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
  }

  /* All-clear empty state for reviews — compact inline */
  .reviews-all-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px dashed var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin: 4px 0 14px;
  }
  .reviews-all-clear .check {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--green-ok);
    line-height: 1;
    flex-shrink: 0;
  }
  .reviews-all-clear-text {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1;
  }
  .reviews-all-clear-sub {
    font-size: 10.5px;
    color: var(--mid);
    line-height: 1.3;
    flex: 1;
  }

  /* ════════════════════════════════════════════
     REVIEWS — visibility per state
     ════════════════════════════════════════════ */
  .mode-chip, .filter-row, .rev-answered, .rev-unanswered, .rev-showcase,
  .rev-queued, .rev-fomo-top, .reviews-all-clear { display: none; }

  /* S0 — showcase only */
  body[data-state="s0"][data-page="reviews"] .rev-showcase { display: block; }

  /* S1–S4, PAID — full unanswered + answered + mode chip (from S2 onward) */
  body[data-state="s2"][data-page="reviews"] .mode-chip,
  body[data-state="s3"][data-page="reviews"] .mode-chip,
  body[data-state="s4"][data-page="reviews"] .mode-chip,
  body[data-state="paid"][data-page="reviews"] .mode-chip,
  body[data-state="paid-clear"][data-page="reviews"] .mode-chip { display: flex; }

  body[data-state="s1"][data-page="reviews"] .rev-unanswered,
  body[data-state="s2"][data-page="reviews"] .rev-unanswered,
  body[data-state="s3"][data-page="reviews"] .rev-unanswered,
  body[data-state="s4"][data-page="reviews"] .rev-unanswered,
  body[data-state="paid"][data-page="reviews"] .rev-unanswered { display: block; }

  body[data-state="s1"][data-page="reviews"] .rev-answered,
  body[data-state="s2"][data-page="reviews"] .rev-answered,
  body[data-state="s3"][data-page="reviews"] .rev-answered,
  body[data-state="s4"][data-page="reviews"] .rev-answered,
  body[data-state="paid"][data-page="reviews"] .rev-answered,
  body[data-state="paid-clear"][data-page="reviews"] .rev-answered { display: block; }

  body[data-state="s1"][data-page="reviews"] .filter-row,
  body[data-state="s2"][data-page="reviews"] .filter-row,
  body[data-state="s3"][data-page="reviews"] .filter-row,
  body[data-state="s4"][data-page="reviews"] .filter-row,
  body[data-state="paid"][data-page="reviews"] .filter-row,
  body[data-state="paid-clear"][data-page="reviews"] .filter-row { display: block; }

  /* PAID all-clear: queued list replaces unanswered; all-clear badge on top */
  body[data-state="paid-clear"][data-page="reviews"] .rev-queued { display: block; }
  body[data-state="paid-clear"][data-page="reviews"] .reviews-all-clear { display: block; }

  /* FREE FOMO: top-3 urgent + full unanswered list below (no answered section) */
  body[data-state="free"][data-page="reviews"] .rev-fomo-top { display: block; }
  body[data-state="free"][data-page="reviews"] .rev-unanswered { display: block; }

  /* ════════════════════════════════════════════
     CALENDAR — post expansion panel (inline)
     ════════════════════════════════════════════ */
  .post-expand {
    border: 1.5px solid var(--ink);
    background-color: var(--paper);
    margin-bottom: 10px;
    padding: 0;
    animation: expandFade 0.2s ease;
  }
  @keyframes expandFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .post-expand-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px dashed var(--line);
  }
  .post-expand-status {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
  }
  .post-expand-status.scheduled { color: var(--ink); }
  .post-expand-status.suggested { color: var(--wa); }
  .post-expand-status.published { color: var(--mid); }

  .post-expand-close {
    background: transparent;
    border: none;
    color: var(--mid);
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }
  .post-expand-close:hover { color: var(--ink); }

  .post-expand-img {
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background-image:
      radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0, transparent 40%),
      radial-gradient(circle at 70% 70%, rgba(0,0,0,0.25) 0, transparent 50%),
      linear-gradient(135deg, #d4a04a 0%, #a46a0a 60%, #6e4200 100%);
  }
  .post-expand-img.alt {
    background-image:
      radial-gradient(circle at 40% 30%, rgba(255,255,255,0.1) 0, transparent 40%),
      linear-gradient(135deg, #7a5d3e 0%, #4a3320 60%, #2d1e10 100%);
  }
  .post-expand-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(0,0,0,0.25) 0.6px, transparent 0.8px);
    background-size: 2.5px 2.5px;
    pointer-events: none;
  }
  .post-expand-img-label {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .post-expand-body {
    padding: 10px 12px;
  }
  .post-expand-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .post-expand-meta svg { width: 13px; height: 13px; color: var(--ink); }
  .post-expand-date {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-left: auto;
  }

  .post-expand-caption {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
    padding: 8px 10px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin-bottom: 10px;
    min-height: 60px;
  }
  .post-expand-caption[contenteditable="true"]:focus {
    outline: 2px solid var(--wa);
    outline-offset: -2px;
  }

  .post-expand-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .post-expand-actions .cta-btn {
    align-self: auto;
  }

  /* Batch approve bar */
  .cal-batch-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1.5px solid var(--ink);
    background-color: var(--paper);
  }
  .cal-batch-info {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.3;
    flex: 1;
  }
  .cal-batch-info strong {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* Day hover/pressable for better affordance */
  .cal-day:has(.cal-post:not(.empty):not(.empty-fomo)) {
    cursor: pointer;
  }
  .cal-day:has(.cal-post:not(.empty):not(.empty-fomo)):hover {
    border-color: var(--ink);
  }
  .cal-day.selected {
    border-color: var(--ink);
    border-width: 1.5px;
  }

  /* Create post button on empty days */
  .cal-day-create {
    flex: 1;
    min-height: 0;
    background: transparent;
    border: 1px dashed rgba(18,140,126,0.3);
    color: rgba(18,140,126,0.5);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.15s;
  }
  .cal-day-create:hover {
    border-color: var(--wa);
    color: var(--wa);
  }
  .cal-day.past .cal-day-create { display: none; }

  /* Batch actions section at bottom of calendar */
  .cal-batch-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
  }

  /* ════════════════════════════════════════════
     CHATBOT PAGE
     ════════════════════════════════════════════ */
  body[data-page="chatbot"] .page-chatbot { display: block; }
  body[data-page="chatbot"] .nav-btn[data-page-link="chatbot"] {
    color: var(--paper);
    border-top-color: var(--wa);
  }

  /* Chatbot demo transcript */
  .chat-transcript {
    border: 1px solid var(--line);
    padding: 10px;
    margin-bottom: 12px;
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
  }
  .chat-transcript-head {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
  }
  .chat-msg {
    max-width: 82%;
    padding: 7px 10px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 1.4;
    word-wrap: break-word;
  }
  .chat-msg.customer {
    background: var(--paper-2);
    color: var(--ink);
    border-radius: 0 8px 8px 8px;
    align-self: flex-start;
    border: 1px solid var(--line);
  }
  .chat-msg.bot {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, var(--wa) 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
    color: #fff;
    border-radius: 8px 0 8px 8px;
    align-self: flex-end;
    margin-left: auto;
    text-shadow: 0 0 1px rgba(0,0,0,0.9);
  }
  .chat-msg-meta {
    font-size: 9.5px;
    color: var(--mid);
    margin-bottom: 2px;
    letter-spacing: 0.04em;
  }
  .chat-msg.bot .chat-msg-meta {
    text-align: right;
    color: var(--wa);
  }
  .chat-msgs {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .chat-divider {
    text-align: center;
    font-family: var(--font-body);
    font-size: 9px;
    color: var(--light);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 6px 0;
    opacity: 0.6;
  }

  /* Chatbot stats block */
  .chatbot-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .stat-card {
    padding: 10px 12px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
  }
  .stat-label {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    line-height: 1;
    margin-bottom: 6px;
  }
  .stat-value {
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 0.9;
    color: var(--ink);
  }
  .stat-sub {
    font-size: 10px;
    color: var(--mid);
    margin-top: 2px;
    line-height: 1.3;
  }

  .chatbot-topics {
    padding: 10px 12px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin-bottom: 14px;
  }
  .topic-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px dotted var(--line);
    font-size: 12px;
  }
  .topic-row:last-child { border-bottom: none; }
  .topic-label { color: var(--ink-soft); }
  .topic-count {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
  }

  /* WhatsApp Business link block */
  .wa-biz-link {
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    margin-bottom: 16px;
    background-color: var(--paper);
  }
  .wa-biz-link-head {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    line-height: 1.1;
  }
  .wa-biz-link-sub {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 10px;
  }
  .wa-biz-link-hint {
    font-size: 10px;
    color: var(--mid);
    margin-top: 6px;
    font-style: italic;
  }

  /* Config sections */
  .cfg-section {
    padding: 10px 12px;
    border: 1px solid var(--line);
    margin-bottom: 8px;
  }
  .cfg-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
  }
  .cfg-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
  }
  .cfg-status {
    font-family: var(--font-body);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 6px;
    line-height: 1.4;
    flex-shrink: 0;
  }
  .cfg-status.active {
    background: var(--green-pale);
    color: var(--green-ok);
    border: 1px solid var(--green-ok);
  }
  .cfg-status.inactive {
    background: var(--paper-2);
    color: var(--mid);
    border: 1px solid var(--line);
  }
  .cfg-desc {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin-bottom: 8px;
  }
  .cfg-action {
    display: flex;
    justify-content: flex-end;
  }

  /* Chatbot demo CTA (preview link box) */
  .demo-link-box {
    padding: 12px 14px;
    border: 1px dashed var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin-bottom: 14px;
  }
  .demo-link-head {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .demo-link-desc {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 10px;
  }

  /* Chatbot state visibility */
  .cbot-s0, .cbot-s1, .cbot-s2, .cbot-s3, .cbot-live, .cbot-free { display: none; }
  body[data-state="s0"][data-page="chatbot"] .cbot-s0 { display: block; }
  body[data-state="s1"][data-page="chatbot"] .cbot-s0 { display: block; }
  body[data-state="s2"][data-page="chatbot"] .cbot-s0 { display: block; }
  body[data-state="s3"][data-page="chatbot"] .cbot-s3 { display: block; }
  body[data-state="s4"][data-page="chatbot"] .cbot-live { display: block; }
  body[data-state="paid"][data-page="chatbot"] .cbot-live { display: block; }
  body[data-state="paid-clear"][data-page="chatbot"] .cbot-live { display: block; }
  body[data-state="free"][data-page="chatbot"] .cbot-free { display: block; }

  /* ════════════════════════════════════════════
     FAQ PAGE (Pregúntale a Teo)
     ════════════════════════════════════════════ */
  body[data-page="faq"] .page-faq { display: block; }
  body[data-page="faq"] .nav-btn[data-page-link="faq"] {
    color: var(--paper);
    border-top-color: var(--wa);
  }

  .faq-intro {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.55;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin-bottom: 14px;
  }
  .faq-intro strong { color: var(--ink); }

  .faq-group {
    margin-bottom: 14px;
  }
  .faq-group-title {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--line);
  }
  .faq-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 1px solid var(--line);
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--ink-soft);
    text-align: left;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.4;
  }
  .faq-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
  }
  /* ════════════════════════════════════════════
     SETTINGS PAGE
     ════════════════════════════════════════════ */
  body[data-page="settings"] .page-settings { display: block; }

  .settings-group {
    margin-bottom: 16px;
  }
  .settings-group-title {
    font-family: var(--font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--line);
  }

  .setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-top: none;
    background-color: var(--paper);
  }
  .setting-row:first-of-type {
    border-top: 1px solid var(--line);
  }

  .setting-row.tappable {
    cursor: pointer;
    transition: background 0.15s;
  }
  .setting-row.tappable:hover {
    background-color: var(--paper-2);
  }

  .setting-left {
    min-width: 0;
    flex: 1;
  }
  .setting-label {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--ink);
  }
  .setting-value {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.4;
    margin-top: 3px;
  }
  .setting-value.mono {
    font-family: var(--font-body);
    letter-spacing: 0.02em;
  }

  .setting-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .setting-arrow {
    color: var(--wa);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .setting-chip {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid;
    line-height: 1.4;
  }
  .setting-chip.active {
    color: var(--green-ok);
    background: var(--green-pale);
    border-color: var(--green-ok);
  }
  .setting-chip.inactive {
    color: var(--mid);
    background: var(--paper-2);
    border-color: var(--line);
  }

  /* Toggle switch */
  .toggle {
    width: 36px;
    height: 20px;
    border-radius: 20px;
    background: var(--paper-2);
    border: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
  }
  .toggle::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mid);
    transition: all 0.15s;
  }
  .toggle.on {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, var(--wa) 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
    border-color: var(--wa);
  }
  .toggle.on::after {
    left: auto;
    right: 1px;
    background: var(--paper);
  }

  /* Referral banner */
  .ref-banner {
    padding: 12px 14px;
    border: 1.5px solid var(--ink);
    background-color: var(--paper);
    margin-bottom: 10px;
  }
  .ref-code {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 6px;
  }
  .ref-url {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--ink-soft);
    margin-bottom: 10px;
    word-break: break-all;
    line-height: 1.4;
  }
  .ref-stats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    margin-bottom: 10px;
  }
  .ref-stat-label {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    line-height: 1.1;
  }
  .ref-stat-value {
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1;
    margin-top: 3px;
    color: var(--ink);
  }

  .ref-how {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
    padding: 8px 10px;
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    border: 1px dashed var(--line);
  }
  .ref-how strong { color: var(--ink); }

  /* Billing invoice row */
  .invoice-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-top: none;
  }
  .invoice-row:first-of-type {
    border-top: 1px solid var(--line);
  }
  .invoice-date {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--ink);
    letter-spacing: 0.02em;
  }
  .invoice-amount {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--ink);
  }
  .invoice-download {
    color: var(--wa);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--wa);
  }
  .invoice-download:hover {
    background: var(--wa);
    color: #fff;
  }

  /* Settings back button */
  .settings-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 4px 0;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .settings-back:hover { color: var(--ink); }

  /* Danger zone */
  .danger-section {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px dashed var(--red);
  }
  .danger-label {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
  }
  .danger-row {
    border-color: var(--red-pale);
  }
  .danger-row .setting-arrow { color: var(--red); }

  /* ════════════════════════════════════════════
     PAGE SWITCHING — add calendar
     ════════════════════════════════════════════ */
  body[data-page="calendar"] .page-calendar { display: block; }
  body[data-page="calendar"] .nav-btn[data-page-link="calendar"] {
    color: var(--paper);
    border-top-color: var(--wa);
  }

  /* ════════════════════════════════════════════
     CALENDAR — competitor pulse strip
     ════════════════════════════════════════════ */
  .comp-pulse {
    padding: 8px 10px;
    border: 1px solid var(--line);
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin: 4px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .comp-pulse-label {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mid);
    line-height: 1;
    flex-shrink: 0;
  }
  .comp-pulse-list {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.45;
    flex: 1;
    min-width: 0;
  }
  .comp-pulse-list strong { color: var(--ink); }

  /* ════════════════════════════════════════════
     CALENDAR — post preview (S1 — single post)
     ════════════════════════════════════════════ */
  .post-preview {
    border: 1px solid var(--ink);
    padding: 0;
    margin-bottom: 12px;
  }
  .post-preview-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #d4a04a 0%, #a46a0a 60%, #6e4200 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Halftone over the image for the thermal look */
    background-image:
      radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15) 0, transparent 40%),
      radial-gradient(circle at 70% 70%, rgba(0,0,0,0.25) 0, transparent 50%),
      linear-gradient(135deg, #d4a04a 0%, #a46a0a 60%, #6e4200 100%);
  }
  .post-preview-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(0,0,0,0.25) 0.6px, transparent 0.8px);
    background-size: 2.5px 2.5px;
    pointer-events: none;
  }
  .post-preview-img-label {
    position: relative;
    z-index: 1;
    background: rgba(0,0,0,0.4);
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.2);
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .post-preview-body {
    padding: 10px 12px;
  }
  .post-preview-platforms {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
  }
  .post-preview-platforms svg { width: 13px; height: 13px; color: var(--ink); }
  .post-preview-date {
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-left: auto;
  }
  .post-preview-caption {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  /* ════════════════════════════════════════════
     CALENDAR — month grid
     ════════════════════════════════════════════ */
  .cal-month {
    margin-bottom: 14px;
  }
  .cal-month-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
  }
  .cal-month-title {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
  }
  .cal-month-nav {
    display: flex;
    gap: 4px;
  }
  .cal-nav-btn {
    width: 26px;
    height: 26px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--mid);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
  }
  .cal-nav-btn:hover { border-color: var(--ink); color: var(--ink); }

  .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mid);
    text-align: center;
    padding-bottom: 4px;
    line-height: 1;
  }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }
  .cal-day {
    aspect-ratio: 1 / 1.1;
    background-color: var(--paper);
    border: 1px solid var(--line);
    padding: 3px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    min-width: 0;
  }
  .cal-day.outside {
    opacity: 0.25;
  }
  .cal-day-num {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--mid);
    line-height: 1;
    text-align: right;
  }
  .cal-day.today .cal-day-num {
    color: var(--ink);
    font-weight: 700;
  }
  .cal-day.today {
    border-color: var(--ink);
    border-width: 1.5px;
  }

  /* Post chip inside a day */
  .cal-post {
    flex: 1;
    min-height: 0;
    border: 1px solid transparent;
    padding: 1px 3px;
    font-family: var(--font-body);
    font-size: 8px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
    overflow: hidden;
  }

  /* ═══ Calendar visual hierarchy (v2) — suggested = loudest (action), scheduled = mid, published = quietest (history) ═══ */

  /* Published — quietest, faded into history */
  .cal-post.published {
    background-color: var(--paper-2);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.28) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    color: var(--mid);
    border: 1px solid var(--line);
    font-style: italic;
    opacity: 0.85;
  }

  /* Scheduled — mid-weight, clean & decisive (done, will run) */
  .cal-post.scheduled {
    background-color: var(--paper);
    color: var(--ink);
    border: 1.25px solid var(--ink);
  }

  /* Suggested — LOUDEST (this is the action surface) */
  .cal-post.suggested {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.45) 0.6px, transparent 0.85px);
    background-size: 1.75px 1.75px;
    color: var(--ink);
    border: 1.5px dashed var(--ink);
    font-weight: 500;
    position: relative;
  }
  .cal-post.suggested::after {
    content: '✱';
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 9px;
    color: var(--ink);
    line-height: 1;
  }

  .cal-post.empty {
    background: transparent;
    border: none;
  }

  /* FOMO calendar — owner's days are empty with a faint "—" */
  .cal-post.empty-fomo {
    background: transparent;
    border: 1px dashed rgba(166,44,20,0.25);
    color: rgba(166,44,20,0.4);
    font-size: 10px;
  }

  /* Legend */
  .cal-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0 4px;
    font-size: 10px;
    color: var(--mid);
  }
  .cal-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .cal-legend-swatch {
    width: 10px;
    height: 10px;
    display: inline-block;
    flex-shrink: 0;
  }
  .cal-legend-swatch.published {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    border: 1px solid var(--line);
  }
  .cal-legend-swatch.scheduled {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, #0a0a0a 1.0px, transparent 1.15px);
    background-size: 1.75px 1.75px;
    border: 1px solid var(--ink);
  }
  .cal-legend-swatch.suggested {
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.35) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    border: 1px dashed var(--line);
  }

  /* Empty calendar hero (S0) */
  .cal-empty-hero {
    padding: 20px 16px;
    border: 1px dashed var(--line);
    text-align: center;
    background-color: var(--paper);
    background-image: radial-gradient(circle at center, rgba(26,26,26,0.55) 0.55px, transparent 0.75px);
    background-size: 1.75px 1.75px;
    margin: 4px 0 12px;
  }
  .cal-empty-label {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--mid);
    margin-bottom: 4px;
  }
  .cal-empty-sub {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.5;
  }

  /* ════════════════════════════════════════════
     CALENDAR — visibility per state
     ════════════════════════════════════════════ */
  .cal-s0, .cal-s1, .cal-s2, .cal-s3, .cal-s4, .cal-paid, .cal-free { display: none; }

  /* S0: next-to-unlock preview only (paper hero) */
  body[data-state="s0"][data-page="calendar"] .cal-s0 { display: block; }
  /* S1: single post preview */
  body[data-state="s1"][data-page="calendar"] .cal-s1 { display: block; }
  /* S2: month view with 2 posts/week proposal */
  body[data-state="s2"][data-page="calendar"] .cal-s2 { display: block; }
  /* S3–S4: full month view, locked + suggested mix */
  body[data-state="s3"][data-page="calendar"] .cal-s3 { display: block; }
  body[data-state="s4"][data-page="calendar"] .cal-s4 { display: block; }
  /* PAID: full month view (live) */
  body[data-state="paid"][data-page="calendar"] .cal-paid { display: block; }
  body[data-state="paid-clear"][data-page="calendar"] .cal-paid { display: block; }
  /* FREE: empty-own-grid FOMO with pulse on top */
  body[data-state="free"][data-page="calendar"] .cal-free { display: block; }

  /* ════════════════════════════════════════════
     COLLAPSIBLE SECTION SYSTEM
     Sections collapsed by default; tap header to expand.
     Reset to collapsed when changing tab/state.
     ════════════════════════════════════════════ */

  .collapsible {
    margin-bottom: 14px;
  }

  .collapsible-trigger {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: inherit;
    font: inherit;
    color: inherit;
  }
  .collapsible-trigger:active { opacity: 0.85; }

  /* Preview line shown under the section header when collapsed.
     Style differs slightly depending on the wrapped header type. */
  .collapsible-preview {
    font-size: 11.5px;
    color: var(--ink-soft);
    text-align: center;
    margin-top: -6px;
    margin-bottom: 4px;
    padding: 0 12px;
    line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .collapsible-preview .preview-arrow {
    font-family: var(--font-display);
    color: var(--ink);
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
    display: inline-block;
    border: 1px solid var(--ink);
    background: var(--paper);
    padding: 1px 7px 2px;
    line-height: 1.25;
    vertical-align: middle;
    transform: translateY(-1px);
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Settings groups: their headers are left-aligned, so preview aligns left too */
  .collapsible.settings-group .collapsible-preview,
  .collapsible.danger-section .collapsible-preview,
  .collapsible.bucket-collapsible .collapsible-preview {
    text-align: left;
    padding: 0;
    margin-top: 0;
  }

  /* Bucket-collapsible — the OTROS COMPETIDORES sub-section. The trigger
     contains a bucket-head (title + sub) followed by a preview line. When
     collapsed, preview shows the venue names + abrir chip. */
  .collapsible.bucket-collapsible .collapsible-trigger {
    display: block;
  }
  .collapsible.bucket-collapsible .collapsible-preview {
    padding: 4px 0 6px;
    border-bottom: 1px dashed var(--line);
    color: var(--ink-soft);
    font-size: 11.5px;
  }

  /* Hide body when collapsed; hide preview when expanded */
  .collapsible[data-expanded="false"] .collapsible-body { display: none; }
  .collapsible[data-expanded="true"]  .collapsible-preview { display: none; }

  /* When expanded, append a small "cerrar" pill to the section header.
     Styled identically to the preview-arrow chip below for consistency. */
  .collapsible[data-expanded="true"] .collapsible-trigger .ascii-label::after,
  .collapsible[data-expanded="true"] .collapsible-trigger .settings-group-title::after,
  .collapsible[data-expanded="true"] .collapsible-trigger .danger-label::after,
  .collapsible[data-expanded="true"] .collapsible-trigger .delta-insight-label::after,
  .collapsible[data-expanded="true"] .collapsible-trigger .bucket-title::after {
    content: 'cerrar ↑';
    font-family: var(--font-display);
    color: var(--ink);
    margin-left: 8px;
    font-size: 11px;
    letter-spacing: 0.06em;
    border: 1px solid var(--ink);
    background: var(--paper);
    padding: 1px 7px 2px;
    line-height: 1.25;
    text-transform: uppercase;
    vertical-align: middle;
    transform: translateY(-1px);
    display: inline-block;
    white-space: nowrap;
  }

  /* settings-group / danger-section inside a collapsible: title is the trigger */
  .collapsible .settings-group-title,
  .collapsible .danger-label {
    cursor: pointer;
  }

  /* Visual hierarchy refinement — bump ascii-label dash visibility to make
     major-zone boundaries clearer without consuming extra vertical space */
  .ascii-label::before,
  .ascii-label::after {
    font-size: 11px;
    color: var(--ink-soft);
    opacity: 0.55;
  }
  .ascii-label.red::before,
  .ascii-label.red::after {
    opacity: 0.55;
  }


  /* ════════════════════════════════════════════
     PORTAL ERROR OVERLAY (network/auth/404 states)
     ════════════════════════════════════════════ */
  .portal-error {
    height: 100%;
    background: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 28px;
    text-align: center;
    color: var(--ink);
  }
  .portal-error-brand {
    font-family: var(--font-display);
    font-size: 28px;
    margin-bottom: 18px;
    letter-spacing: 0.02em;
  }
  .portal-error-msg {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 280px;
  }