/* ══════════════════════════════════════════════════════════════════════════
   Arbby — styles.css · capa ESPECÍFICA del Hub (páginas públicas + componentes
   del dashboard). Los TOKENS, la base, el sidebar y los botones viven en
   theme.css (fuente única, compartida con los paneles de Arbby Ads y Arbby Orders). CARGAR
   theme.css ANTES que este archivo. No redefinir tokens acá.
   ════════════════════════════════════════════════════════════════════════ */

/* Números siempre tabulares */
.num, td.num, th.num,
.rc-value, .sc-pct, .sc-leg-val, .ref-value, .fiat-card .vals,
#auth-code { font-variant-numeric: tabular-nums; }

/* LAYOUT (.app/.sidebar/.main-content/.page-head) y BOTONES viven en theme.css */

/* ══════════════════════════════════════════════════════════════════════════
   FILTROS (Mercado)
   ════════════════════════════════════════════════════════════════════════ */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.filters-2 { align-items: center; }
.group {
  display: flex; gap: 3px; background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border-medium); border-radius: var(--radius-item); padding: 3px; align-items: center;
}
.group-label {
  color: var(--color-text-secondary); font-size: var(--text-label);
  letter-spacing: 0; padding: 0 6px;
}
.chips { display: flex; flex-wrap: wrap; gap: 3px; }
.group button {
  border: none; background: transparent; color: var(--color-text-secondary);
  padding: 6px 12px; border-radius: var(--radius-item); cursor: pointer; font: inherit; font-size: var(--text-data);
  transition: background 0.15s, color 0.15s;
}
.group button:hover { color: var(--color-text-primary); }
.group button.active { background: var(--color-bg-hover); color: var(--color-text-primary); }
.group button.primary { color: var(--color-text-primary); }

.side-btn small { display: block; font-size: var(--text-caption); font-weight: 400; opacity: 0.7; }
.side-btn[data-side="SELL"].active { background: color-mix(in srgb, var(--color-negative) 14%, transparent); color: var(--color-text-primary); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--color-negative) 40%, transparent); }
.side-btn[data-side="BUY"].active { background: color-mix(in srgb, var(--color-positive) 14%, transparent); color: var(--color-text-primary); box-shadow: inset 0 0 0 0.5px var(--color-positive); }

.amount-group label { display: flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: var(--text-data); padding: 0 6px; }
.amount-group input {
  width: 120px; background: var(--color-bg-primary); border: 0.5px solid var(--color-border-strong);
  color: var(--color-text-primary); border-radius: var(--radius-item); padding: 6px 8px; font: inherit;
}
.amount-group input:focus { border-color: var(--color-accent); }
.view-btn.active { background: var(--color-bg-hover); color: var(--color-text-primary); }

/* ══════════════════════════════════════════════════════════════════════════
   BANNER / CTA de gate
   ════════════════════════════════════════════════════════════════════════ */
.banner {
  background: color-mix(in srgb, var(--color-warning) 8%, var(--color-bg-surface)); border: 0.5px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
  color: var(--color-warning); border-radius: var(--radius-card-sm); padding: 9px 13px; margin-bottom: 10px; font-size: var(--text-data);
}
.gate-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border-strong);
  border-radius: var(--radius-card-sm); padding: 13px 16px; margin-bottom: 14px; font-size: var(--text-body);
  color: var(--color-text-primary);
}
.gate-cta button.primary { margin-left: auto; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════════════════
   TABLA de anuncios
   ════════════════════════════════════════════════════════════════════════ */
table {
  width: 100%; border-collapse: collapse;
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card-sm); overflow: hidden;
}
th, td { padding: 9px 12px; text-align: left; border-bottom: 0.5px solid var(--color-border-medium); }
tbody tr:last-child td { border-bottom: none; }
th {
  background: transparent; color: var(--color-text-secondary);
  font-size: var(--text-label); font-weight: 500; letter-spacing: 0;
}
tbody tr { transition: background 0.12s; }
tbody tr:hover { background: var(--color-bg-hover); }
td.num, th.num { text-align: right; }
td.price { font-weight: 500; font-size: var(--text-body); color: var(--color-text-primary); }

.exchange-tag {
  padding: 2px 9px; border-radius: var(--radius-item); font-size: var(--text-caption); font-weight: 500;
  letter-spacing: 0.01em; display: inline-block;
}
.exchange-tag.bybit { background: color-mix(in srgb, var(--venue-bybit) 16%, transparent); color: var(--venue-bybit); }
.exchange-tag.binance { background: color-mix(in srgb, var(--venue-binance) 16%, transparent); color: var(--venue-binance); }
.exchange-tag.okx { background: color-mix(in srgb, var(--venue-okx) 14%, transparent); color: var(--venue-okx); }
.exchange-tag.bitget { background: color-mix(in srgb, var(--venue-bitget) 14%, transparent); color: var(--venue-bitget); }
.exchange-tag.bingx { background: color-mix(in srgb, var(--venue-bingx) 18%, transparent); color: var(--venue-bingx); }
.exchange-tag.mexc { background: color-mix(in srgb, var(--venue-mexc) 30%, transparent); color: var(--color-text-primary); }   /* MEXC 3,5:1: no alcanza para texto (guía §2.7) */

.verified { color: var(--color-accent); font-weight: 500; }
.not-verified { color: var(--color-text-muted); }
/* "BingX no informa verificación" al lado de "Solo verificados" (HUB-4 §2) */
.verif-aviso { font-size: var(--text-caption); color: var(--color-warning); margin-left: 8px; }
.methods { color: var(--color-text-secondary); font-size: var(--text-label); }

.ex-section { margin-bottom: 20px; }
.ex-section h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: var(--text-body); font-weight: 500; }
.ex-count { color: var(--color-text-secondary); font-size: var(--text-label); font-weight: 400; }
#empty-msg { color: var(--color-text-secondary); text-align: center; padding: 28px; }

/* ══════════════════════════════════════════════════════════════════════════
   FIAT — tira de cotizaciones
   ════════════════════════════════════════════════════════════════════════ */
.fiat-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.fiat-card {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card-sm); padding: 10px 14px; min-width: 124px;
}
.fiat-card .nombre { color: var(--color-text-secondary); font-size: var(--text-caption); letter-spacing: 0; }
.fiat-card .venta { font-weight: 500; font-size: var(--text-heading); color: var(--color-text-primary); }
.fiat-card .compra { color: var(--color-text-secondary); font-size: var(--text-label); }
.fiat-strip .stale { color: var(--color-warning); }
.fiat-strip .fuente { align-self: center; color: var(--color-text-muted); font-size: var(--text-caption); margin-left: 2px; }
.fiat-strip .fuente a, .sp-fuente a { color: inherit; text-decoration: underline; }
.fiat-cond { color: var(--color-warning); cursor: help; }
.page-head .status.stale { color: var(--color-warning); }

/* ══════════════════════════════════════════════════════════════════════════
   MODAL + FORMS (login, referencia, spread)
   ════════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.66);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px;
  backdrop-filter: blur(2px);
}
.modal {
  position: relative; background: var(--color-bg-float); box-shadow: var(--shadow-float);
  border: 0.5px solid var(--color-border-strong); border-radius: var(--radius-card);
  padding: 26px; width: 100%; max-width: 360px;
}
.modal.wide { max-width: 440px; }
.modal h2 { margin: 0 0 4px; font-size: var(--text-heading); font-weight: 500; }
.modal-sub { color: var(--color-text-secondary); font-size: var(--text-data); margin: 0 0 16px; }
.modal-close {
  position: absolute; top: 10px; right: 14px; background: none; border: none;
  color: var(--color-text-secondary); font-size: var(--text-data-large); line-height: 1; cursor: pointer;
}
.modal-close:hover { color: var(--color-text-primary); }

.field { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-data); color: var(--color-text-secondary); margin-bottom: 12px; }
.field input, .field select {
  background: var(--color-bg-primary); border: 0.5px solid var(--color-border-strong);
  color: var(--color-text-primary); border-radius: var(--radius-item); padding: 9px 10px; font: inherit; font-size: var(--text-body);
}
.field input:focus, .field select:focus { border-color: var(--color-accent); }
.field.check { flex-direction: row; align-items: center; gap: 8px; }
.field.check input { width: auto; }
#auth-code { letter-spacing: 6px; text-align: center; font-size: var(--text-heading); }

.form-row { display: flex; gap: 10px; }
.form-row .field { flex: 1; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }
.modal-actions .primary { flex: 1; }

.consent { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-label); color: var(--color-text-secondary); margin-bottom: 14px; }
.consent a { color: var(--color-accent); }
.auth-error { color: var(--color-negative); font-size: var(--text-data); margin: 10px 0 0; }

.ro-field {
  background: var(--color-bg-primary); border: 0.5px dashed var(--color-border-strong);
  color: var(--color-text-secondary); border-radius: var(--radius-item); padding: 9px 10px; font-size: var(--text-data); font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGE Premium
   ════════════════════════════════════════════════════════════════════════ */
.pro-badge {
  background: transparent; color: var(--color-accent);
  border: 0.5px solid var(--color-border-strong);
  font-size: var(--text-caption); font-weight: 500; padding: 1px 6px; border-radius: var(--radius-tag);
  letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════════
   SPREADS — locked (Free/anónimo): preview borroso + CTA
   ════════════════════════════════════════════════════════════════════════ */
#spreads-locked { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; padding: 24px 0; }
.lock-hero h2 { font-size: var(--text-data-large); font-weight: 500; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.lock-hero p { color: var(--color-text-secondary); font-size: var(--text-body); line-height: 1.6; margin: 0 0 18px; max-width: 44ch; }
.lock-note { font-size: var(--text-label); color: var(--color-text-muted); margin-top: 12px; }
.lock-preview { display: flex; flex-direction: column; gap: 12px; filter: blur(3px); opacity: 0.55; pointer-events: none; user-select: none; }
.lock-preview .sp-card {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-card-sm); padding: 16px 20px;
}
.lock-preview .sp-name { font-weight: 500; }
.lock-preview .sp-pct { font-size: var(--text-data-large); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.sp-pct.up { color: var(--color-positive); }
.sp-pct.down { color: var(--color-negative); }
@media (max-width: 720px) { #spreads-locked { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════════
   SPREADS — dashboard (Premium)
   ════════════════════════════════════════════════════════════════════════ */
.sp-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.sp-toolbar #sp-status { margin-left: auto; }
.sp-section { margin-bottom: 28px; }
.sp-section h2 {
  font-size: var(--text-label); color: var(--color-text-secondary);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; margin: 0 0 12px;
}
.sp-empty { color: var(--color-text-secondary); padding: 14px 2px; }
/* Qué es una referencia, bajo el título (HUB-4 §4) */
.sp-ayuda { font-size: var(--text-caption); color: var(--color-text-muted); margin: -6px 0 10px; }

.iconbtn {
  background: none; border: none; color: var(--color-text-secondary); cursor: pointer;
  font-size: var(--text-body); padding: 3px 6px; border-radius: var(--radius-item); transition: background 0.15s, color 0.15s;
}
.iconbtn:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }

/* Referencias — tarjetas (valor en primer plano).
   HUB-4 §3: tamaño intermedio entre el de antes de HUB-3 y el 50 % de HUB-3.
   Grilla pareja con la de spreads: 3 referencias = 2 spreads de ancho (6 y 4
   por fila a 1366, ~180 y ~274 px; 9 y 6 a 1920). Jerarquía de la captura de
   Lucas: exchange + lado, par, entidad (solo oficial), precio —lo más grande—
   y chips. */
.ref-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ref-card {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-item); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.ref-card .rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.ref-card .rc-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ref-card .rc-apodo { font-size: var(--text-caption); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-card .rc-name { font-weight: 500; font-size: var(--text-label); line-height: 1.3; color: var(--color-text-primary); overflow-wrap: anywhere; }
.ref-card .rc-par, .ref-card .rc-entidad { font-size: var(--text-caption); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-card .rc-actions { display: flex; gap: 2px; flex-shrink: 0; }
.ref-card .rc-value { font-size: var(--text-data-large); font-weight: 500; line-height: 1.1; color: var(--color-text-primary); }
/* ⓘ: qué es una referencia (HUB-4 §4) */
.rc-info { margin-left: 5px; font-size: var(--text-caption); font-weight: 400; color: var(--color-text-muted); cursor: help; }
.rc-info:hover, .rc-info:focus-visible { color: var(--color-text-primary); }
/* Exchange en su color de venue (guía §2.7). MEXC (3,5:1) no alcanza para texto. */
.ex-nombre.ex-bybit { color: var(--venue-bybit); }
.ex-nombre.ex-binance { color: var(--venue-binance); }
.ex-nombre.ex-okx { color: var(--venue-okx); }
.ex-nombre.ex-bitget { color: var(--venue-bitget); }
.ex-nombre.ex-bingx { color: var(--venue-bingx); }
.ex-nombre.ex-mexc { color: var(--color-text-primary); }
.ref-card .rc-value.sindata { font-size: var(--text-label); font-weight: 400; font-style: italic; color: var(--color-text-muted); }
.ref-fuente { font-size: var(--text-caption); letter-spacing: 0; color: var(--color-text-secondary); }
.ref-fuente.manual { color: var(--color-warning); }
.ref-value { font-weight: 500; }
.ref-value.sindata { color: var(--color-text-muted); font-weight: 400; font-style: italic; }

/* Filtros inline en la tarjeta de referencia */
.rc-filtros { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rc-filtros .chip {
  background: var(--color-bg-primary); border: 0.5px solid var(--color-border-strong);
  color: var(--color-text-secondary); border-radius: var(--radius-pill); padding: 1px 6px;
  font: inherit; font-size: var(--text-caption); cursor: pointer; white-space: nowrap; transition: color 0.15s;
}
.rc-filtros .chip:hover { color: var(--color-text-primary); }
.rc-filtros .chip.on { background: color-mix(in srgb, var(--color-accent) 22%, transparent); border-color: var(--color-accent); color: var(--color-text-primary); }
.rc-filtros .chip.estatico { cursor: default; }
.rc-filtros .rc-monto {
  width: 52px; background: var(--color-bg-primary); border: 0.5px solid var(--color-border-strong);
  color: var(--color-text-primary); border-radius: var(--radius-item); padding: 1px 4px; font: inherit; font-size: var(--text-caption);
}
.rc-filtros .rc-monto:focus { border-color: var(--color-accent); }
/* Sin las flechitas del input numérico: en 52 px tapaban el "monto". */
.rc-filtros .rc-monto { -moz-appearance: textfield; appearance: textfield; }
.rc-filtros .rc-monto::-webkit-inner-spin-button,
.rc-filtros .rc-monto::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Spread cards */
/* HUB-4 §3: tamaño intermedio (~274 px a 1366), alineada con la grilla de
   referencias. Misma jerarquía: par y patas en gris, el % grande. */
#sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.spread-card {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border);
  border-radius: var(--radius-item); padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
  position: relative; transition: border-color 0.2s, box-shadow 0.2s;
}
.spread-card.alerta { border-color: var(--color-accent); box-shadow: 0 0 0 0.5px var(--color-accent), 0 0 18px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.spread-card .sc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; }
.spread-card .sc-title { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; }
.spread-card .sc-par { font-weight: 500; font-size: var(--text-label); color: var(--color-text-secondary); }
.spread-card .sc-apodo { font-size: var(--text-caption); color: var(--color-text-secondary); }
.spread-card .sc-name { font-weight: 500; font-size: var(--text-label); }
.spread-card .sc-actions { display: flex; gap: 2px; flex-shrink: 0; }

.spread-card .sc-pct {
  font-family: var(--font-display); font-size: var(--text-data-large); font-weight: 500; line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.sc-pct.up { color: var(--color-positive); }   /* guía §6: positivo completo — signo, número y % */
.sc-pct.down { color: var(--color-negative); }
.sc-pct.nd { color: var(--color-text-muted); font-size: var(--text-label); font-style: italic; }

.spread-card .sc-legs { font-size: var(--text-caption); color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 2px; }
.spread-card .sc-leg { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.spread-card .sc-leg-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spread-card .sc-leg-txt b { font-weight: 500; }
/* compra = verde, venta = rojo (regla de color del upgrade, HUB-3 §0) */
.lado-compra { color: var(--color-positive); }
.lado-venta { color: var(--color-negative); }
.spread-card .sc-fuente { color: var(--color-text-muted); font-size: var(--text-caption); }
.spread-card .sc-leg-val { font-weight: 500; white-space: nowrap; }
.sc-bell { font-size: var(--text-caption); }
.sc-bell.on { color: var(--color-accent); }
.sc-umbral { font-size: var(--text-caption); color: var(--color-text-secondary); }

/* Dentro de las tarjetas chicas, los botones y la leyenda también a escala. */
.ref-card .iconbtn, .spread-card .iconbtn { font-size: var(--text-caption); padding: 1px 3px; }
/* En la tarjeta chica las acciones (✎ 🗑 ✕ 🔔) no le roban ancho al nombre:
   aparecen encima, arriba a la derecha, con el mouse o el foco de teclado. */
.ref-card, .spread-card { position: relative; }
.ref-card .rc-actions, .spread-card .sc-actions {
  position: absolute; top: 4px; right: 4px; background: var(--color-bg-surface);
  border-radius: var(--radius-item); opacity: 0; transition: opacity 0.15s;
}
.ref-card:hover .rc-actions, .ref-card:focus-within .rc-actions,
.spread-card:hover .sc-actions, .spread-card:focus-within .sc-actions { opacity: 1; }
.ref-card .sp-plan-leyenda, .spread-card .sp-plan-leyenda { font-size: var(--text-caption); line-height: 1.2; margin-top: 0; }
.ref-card .rc-fiat-viejo { font-size: var(--text-caption); color: var(--color-warning); }
.sp-fuente { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 10px; }

/* Alertas: toast + pulso */
.sp-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 200; max-width: 340px;
  background: var(--color-bg-float); border: 0.5px solid var(--color-accent); border-left-width: 3px;
  border-radius: var(--radius-card-sm); padding: 12px 16px; font-size: var(--text-body);
  box-shadow: var(--shadow-float); animation: sp-slide 0.25s ease;
}
.sp-toast .t-title { font-weight: 500; margin-bottom: 2px; }
.sp-toast .t-body { color: var(--color-text-secondary); font-size: var(--text-data); }
@keyframes sp-slide { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sp-pulse {
  0%, 100% { box-shadow: 0 0 0 0.5px var(--color-accent), 0 0 6px color-mix(in srgb, var(--color-accent) 20%, transparent); }
  50% { box-shadow: 0 0 0 2px var(--color-accent), 0 0 26px color-mix(in srgb, var(--color-accent) 60%, transparent); }
}
.spread-card.pulsing { animation: sp-pulse 0.6s ease 3; }

/* Drag-to-reorder */
.drag-card { cursor: grab; }
.drag-card:active { cursor: grabbing; }
.drag-card.dragging { opacity: 0.45; outline: 1px dashed var(--color-accent); }
.ref-card .rc-actions, .spread-card .sc-actions { cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════
   CONTEXTO PÚBLICO (OSCURO) — /planes, /login, /registro, /contacto
   REGLA DURA: todo suite.arbby.app es dark. (landing y /descargas usan body
   pelado + estilos scoped; estas páginas comparten este contexto público dark.)
   El nombre de clase sigue siendo `public` por herencia; ya NO es claro.
   ════════════════════════════════════════════════════════════════════════ */
body.public {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  color-scheme: dark;
}
body.public a:not([class^="btn-"]) { color: var(--color-text-primary); }

.public-nav {
  display: flex; align-items: center; gap: 24px;
  padding: 20px clamp(20px, 6vw, 72px); max-width: 1200px; margin: 0 auto;
}
.public-nav .wordmark {
  font-size: 24px; color: var(--color-text-primary); text-decoration: none;
}
.public-nav .nav-links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.public-nav .nav-links a:not([class^="btn-"]) { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s; }
.public-nav .nav-links a:not([class^="btn-"]):hover { color: var(--color-text-primary); }

.btn-primary-light {
  background: var(--color-accent); color: var(--color-text-primary); border: none;
  padding: 9px 22px; border-radius: 6px; font-size: 14px; font-weight: 500;
  font-family: var(--font-ui); cursor: pointer; text-decoration: none; display: inline-block;
  transition: filter 0.15s;
}
.btn-primary-light:hover { filter: brightness(1.12); }
.btn-secondary-light {
  background: transparent; color: var(--color-text-primary);
  border: 0.5px solid var(--color-border-strong); padding: 9px 22px; border-radius: 6px;
  font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; display: inline-block;
  transition: background 0.15s;
}
.btn-secondary-light:hover { background: var(--color-bg-hover); }

.public-wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 72px); }

/* Hero */
.hero { padding: clamp(48px, 10vw, 110px) 0 clamp(40px, 8vw, 80px); max-width: 780px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 6vw, 64px); line-height: 1.05; margin: 0 0 20px;
  color: var(--color-text-primary); letter-spacing: var(--tracking-hero);
}
.hero h1 .accent-dot { color: var(--color-accent); }
.hero p.sub { font-size: clamp(16px, 2vw, 20px); color: var(--color-text-secondary); line-height: 1.55; margin: 0 0 32px; max-width: 56ch; }
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Feature highlights */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 32px; padding: 40px 0 64px; border-top: 0.5px solid var(--color-border-strong); }
.feature .f-icon { width: 26px; height: 26px; stroke: var(--color-accent); fill: none; stroke-width: 1.5; margin-bottom: 12px; }
.feature h3 { font-size: 16px; font-weight: 500; margin: 0 0 6px; color: var(--color-text-primary); }
.feature p { font-size: 14px; color: var(--color-text-secondary); line-height: 1.55; margin: 0; }

/* Sección genérica clara */
.section-light { padding: 56px 0; border-top: 0.5px solid var(--color-border-strong); }
.section-light h2 { font-family: var(--font-ui); font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; color: var(--color-text-primary); }
.section-light .lead { color: var(--color-text-secondary); font-size: 16px; margin: 0 0 32px; max-width: 52ch; }

/* Tabla de planes (cards) */
.plans-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plan-card { background: var(--color-bg-surface); border: 0.5px solid var(--color-border-strong); border-radius: 12px; padding: 26px 24px; display: flex; flex-direction: column; }
.plan-card.featured { border-color: var(--color-accent); border-width: 1px; background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.plan-card .p-name { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: 10px; }
.plan-card .p-price { font-family: var(--font-display); font-size: 40px; color: var(--color-text-primary); line-height: 1; margin-bottom: 4px; }
.plan-card .p-price small { font-family: var(--font-ui); font-size: 14px; color: var(--color-text-secondary); }
.plan-card ul { list-style: none; padding: 0; margin: 20px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.plan-card li { font-size: 14px; color: var(--color-text-primary); display: flex; gap: 9px; align-items: flex-start; }
.plan-card li .check { color: var(--color-accent); flex-shrink: 0; }
.plan-card li.off { color: var(--color-text-secondary); }
.plan-card li.off .check { color: var(--color-text-secondary); }
.plan-card .btn-primary-light, .plan-card .btn-secondary-light { margin-top: auto; text-align: center; }

/* Tabla comparativa */
.compare { width: 100%; border-collapse: collapse; background: transparent; border: none; border-radius: 0; margin-top: 8px; }
.compare th, .compare td { border-bottom: 0.5px solid var(--color-border-strong); padding: 13px 14px; color: var(--color-text-primary); background: transparent; }
.compare thead th { color: var(--color-text-secondary); font-weight: 500; font-size: 13px; }
.compare td.feat { color: var(--color-text-secondary); }
.compare td.yes { color: var(--color-accent); }

/* Login público */
.login-card { max-width: 380px; margin: clamp(40px, 10vh, 96px) auto; padding: 0 24px; text-align: center; }
.login-card .wordmark { font-size: 40px; color: var(--color-text-primary); display: flex; justify-content: center; margin-bottom: 8px; }
.login-card .login-sub { color: var(--color-text-secondary); font-size: 15px; margin: 0 0 28px; }
.login-card .field { text-align: left; color: var(--color-text-secondary); }
.login-card .field input {
  background: var(--color-bg-surface); border: 0.5px solid var(--color-border-strong);
  color: var(--color-text-primary);
}
.login-card .field input:focus { border-color: var(--color-accent); }
.login-card .btn-primary-light { width: 100%; padding: 12px; }
.login-card .consent { color: var(--color-text-secondary); text-align: left; }
.login-card .consent a { color: var(--color-accent); }

/* Contacto */
.contact-list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.contact-item { font-size: 16px; color: var(--color-text-primary); }
.contact-item a { color: var(--color-accent); text-decoration: none; }
.contact-item a:hover { text-decoration: underline; }

/* Footer público */
.public-footer {
  border-top: 0.5px solid var(--color-border-strong); margin-top: 48px;
  padding: 32px clamp(20px, 6vw, 72px); max-width: 1200px; margin-left: auto; margin-right: auto;
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.public-footer .wordmark { font-size: 18px; color: var(--color-text-primary); }
.public-footer .foot-links { display: flex; gap: 18px; margin-left: auto; }
.public-footer a { font-size: 13px; color: var(--color-text-secondary); text-decoration: none; }
.public-footer a:hover { color: var(--color-text-primary); }

/* Perfil */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; max-width: 640px; }
.profile-item { background: var(--color-bg-surface); border: 0.5px solid var(--color-border); border-radius: var(--radius-card-sm); padding: 16px 18px; }
.profile-item .pi-label { font-size: var(--text-caption); letter-spacing: 0.08em; color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 6px; }
.profile-item .pi-value { font-size: var(--text-body); color: var(--color-text-primary); word-break: break-all; }

/* Responsive del shell (sidebar/app/main-content): theme.css */

/* ══════════════════════════════════════════════════════════════════════════
   MODO EMBED (?embed=1) — Spreads chromeless dentro del Panel Arbby (iframe).
   Oculta el sidebar del Hub para no tener doble-sidebar. `.main-content` es
   flex:1 dentro de `.app` (flex): al sacar el sidebar toma TODO el ancho solo,
   sin margin ni left que tocar. Opt-in por query param — `/spreads` sin ?embed=1
   (prod suite.arbby.app) no lleva `body.embed` y queda EXACTAMENTE igual.
   ════════════════════════════════════════════════════════════════════════ */
body.embed #app-sidebar { display: none; }
body.embed .main-content { padding-top: 16px; }   /* sin chrome arriba, no hace falta tanto aire */

/* ?embebido=1 (HUB-DATOS §2): sin marco. El fondo es el de la Suite que nos
   contiene; el ruido y el halo de `.main-content` se van con él. */
body.embebido,
body.embebido .app,
body.embebido .main-content { background: transparent; min-height: 0; }
body.embebido .main-content { padding: 0; }
body.embebido .main-content::before,
body.embebido .main-content::after { display: none; }
body.embebido #tab-spreads > .page-head { display: none; }