/* ── TRADERSHUB SKIN · project-only layer, loaded last over the repo CSS.
   Rule: graphite base; orange only for the primary action, focus and "where you are". ── */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/Geist-Variable.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/GeistMono-Variable.woff2') format('woff2')}
:root{--bg:#09090b;--card:#111114;--card-hover:#16161a;--border:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.13);--muted: rgba(255,255,255,0.72);--dim: rgba(255,255,255,0.55);--accent:#ff6b00;--accent-dim:rgba(255,107,0,0.10);--neutral-on:rgba(255,255,255,0.07)}
a{color:var(--accent)}a:hover{color:#ff8a3d}

/* Menu: same surface as the page, neutral active item + thin orange mark */
.side-brand-text span{color:var(--dim);letter-spacing:1px}
.side-item{position:relative}
.side-item.active::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--accent)}
.side-toggle.on{border-color:var(--border-strong);background:rgba(255,255,255,0.05)}
.side-badge{background:rgba(255,107,0,0.16);color:var(--accent)}
.topbar{background:rgba(9,9,11,0.88)}

/* Segmented tabs, chips, ranges: selected = light neutral, not orange blocks */
.ptab[aria-selected="true"],.rpt-tab[aria-selected="true"],.adm-tab[aria-selected="true"]{background:var(--card-hover);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text)}
.chip.on{background:#fafafa;border-color:#fafafa;color:#09090b}
.seg button.on,.seg .on,[role="radiogroup"] [aria-checked="true"]{background:var(--card-hover);box-shadow:inset 0 0 0 1px var(--border-strong);color:var(--text)}

/* Cards & notes: quieter titles, no orange rails */
.card{border-radius:14px}
.card-title{font-size: 12px;letter-spacing:0.08em;color:var(--muted)}
.note{border-left:1px solid var(--border);border-radius:10px;background:rgba(255,255,255,0.025)}
.acct-strip{border-left:1px solid var(--border);border-radius:12px}
.acct-phase{color:var(--muted);border-color:var(--border-strong);background:transparent}
.acct-btn:hover,.acct-switch.is-open .acct-btn{border-color:rgba(255,255,255,0.25)}
.acct-opt.on{background:var(--neutral-on)}
.qa-item svg{color:var(--muted)}
.lock{color:var(--muted);border-color:var(--border-strong)}

/* Buttons */
.btn{border-radius:10px}
.btn-primary{color:#0a0a0a}

/* Scrollbars */
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}

.lock{display:inline-flex;align-items:center;gap:3px}
.side-item:has(.lock) .side-item-label{opacity:.75}

/* ── Rediseño rápido v1: superficies sólidas, texto legible, mobile ── */
#contenido .card, #contenido .cx-panel, #contenido .cx-hero { background: linear-gradient(180deg, #17171b, #111114) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px; box-shadow: 0 20px 44px -28px rgba(0,0,0,.9); backdrop-filter: none; }
#contenido .card-title, #contenido .card h3, #contenido .cx-panel h3 { color: #fff; font-weight: 800; letter-spacing: -.01em; }
#contenido .card-sub, #contenido .page-sub { color: #b9b9c2; }
#contenido p, #contenido li, #contenido td { color: #dcdce2; }
#contenido .tbl th { background: #1b1b20; color: #b9b9c2; }
#contenido .tbl td { border-color: rgba(255,255,255,.06); }
/* Coach: chat moderno */
.cx-chat .cx-msg, .cx-bubble { border-radius: 16px !important; line-height: 1.6; font-size: 14.5px; }
.cx-chat textarea, .cx-chat input { border-radius: 14px !important; min-height: 48px; font-size: 15px; }
/* Mobile: objetivos táctiles y nada fuera del ancho */
@media (max-width: 760px) {
  #contenido { overflow-x: hidden; }
  #contenido .btn, #contenido button.btn, #contenido .in, #contenido select { min-height: 44px; font-size: 15px; }
  #contenido .tbl-wrap, #contenido .table-wrap, #contenido .fc-wrap, #contenido .fp-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #contenido .card { border-radius: 16px; padding-left: 14px; padding-right: 14px; }
  #contenido .page-title { font-size: 22px; }
}
.pp-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;margin-top:14px}
.pp-plan{display:grid;align-content:start;gap:6px;padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}
.pp-plan.pro{border-color:rgba(255,107,0,.45);background:radial-gradient(120% 90% at 100% 0%,rgba(255,107,0,.14),transparent 60%),rgba(255,255,255,.03)}
.pp-plan-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:#a9a9b3}
.pp-plan.pro .pp-plan-k{color:var(--accent)}
.pp-plan b{font-size:16px;color:#fff}
.pp-plan p{margin:0;font-size:13.5px;line-height:1.55;color:#c9c9d0}
.pp-plan ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.pp-plan li{display:flex;gap:8px;font-size:13.5px;color:#e4e4e8}
.pp-plan li::before{content:"✓";color:var(--accent);font-weight:800}
@media (max-width:640px){.pp-plans{grid-template-columns:1fr}}
.pp-pitch{display:grid;gap:10px;margin-top:16px;padding:24px 26px;border-radius:14px;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--accent);background:#111114}
.pp-pitch-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;color:var(--accent)}
.pp-pitch b{font-size:22px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.pp-pitch p{margin:0;max-width:62ch;font-size:14.5px;line-height:1.65;color:#c9c9d0}
.pp-pitch-ways{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pp-pitch-ways span{padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);font-size:12.5px;font-weight:600;color:#e4e4e8}
@media (max-width:640px){.pp-pitch{padding:18px}.pp-pitch b{font-size:19px}}

/* ── Paso 1 · Inicio: jerarquía y números grandes ── */
.dash .kpi-val, .dash .kpi .num, .dash [class*="kpi"] .num { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dash [class*="kpi"] { border-radius: 16px; }
.dash .dash-side > *, .dash .card { min-width: 0; }
/* ── Paso 2 · Diario: formulario más claro, guardar fijo en celular ── */
.jf { gap: 16px; }
.jf-top { padding: 18px; border-radius: 16px; background: #141418; border: 1px solid rgba(255,255,255,.08); }
.jf-pnl input { font-size: 28px !important; font-weight: 800; min-height: 56px; }
.jf-rows { display: grid; gap: 4px; padding: 6px 18px; border-radius: 16px; background: #141418; border: 1px solid rgba(255,255,255,.08); }
.jf-row { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.jf-row:last-child { border-bottom: 0; }
.jf-row-k { color: #e4e4e8; font-weight: 700; }
.jf-more { border-radius: 16px; background: #141418; border: 1px solid rgba(255,255,255,.08); padding: 4px 18px; }
.jf-more summary { padding: 12px 0; font-weight: 700; color: #fff; cursor: pointer; }
@media (max-width: 760px) {
  .jf-foot { position: sticky; bottom: 0; z-index: 10; margin: 0 -14px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); background: rgba(12,12,14,.96); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,.1); }
  .jf-actions { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
  .jf-seg, .jf-plan { flex-wrap: wrap; }
}
/* ── Paso 3 · Análisis y Reportes: filtros como chips, gráficos en tarjetas ── */
.filterbar { gap: 8px; padding: 10px 12px; border-radius: 14px; background: #121215; border: 1px solid rgba(255,255,255,.08); }
.filterbar .chip, .filterbar [class*="period"] button, .rp-tabs button, .tabs button { border-radius: 999px !important; font-weight: 700; }
.viz { border-radius: 14px; }
#contenido .viz-tip { background: #1c1c21 !important; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }

/* ── Paso 4 · Estados vacíos: tarjeta guía, clara y con acción ── */
#contenido .empty { display: grid; justify-items: center; gap: 10px; max-width: 560px; margin: 24px auto; padding: 36px 28px; border-radius: 20px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, rgba(255,107,0,.12), transparent 60%), #121215; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 50px -30px rgba(0,0,0,.9); }
#contenido .empty::before { content: ""; width: 52px; height: 52px; border-radius: 15px; background: rgba(255,107,0,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23ff6b00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/24px no-repeat; }
#contenido .empty-title { font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
#contenido .empty-desc { margin: 0; max-width: 46ch; font-size: 14.5px; line-height: 1.65; color: #c9c9d0; text-wrap: pretty; }
#contenido .empty .row { margin-top: 6px; gap: 8px; flex-wrap: wrap; }
/* ── Paso 5 · Celular: lectura cómoda y nada se corta ── */
@media (max-width: 760px) {
  #contenido { padding-left: 12px; padding-right: 12px; }
  #contenido .stack { gap: 14px; }
  #contenido .row { flex-wrap: wrap; }
  #contenido .form-grid, #contenido .split-even, #contenido .td-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #contenido table { font-size: 13px; }
  #contenido .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  #contenido img, #contenido video, #contenido canvas { max-width: 100%; }
  #contenido .pill { font-size: 12px; }
  #contenido .empty { margin: 12px auto; padding: 26px 18px; }
  .topbar, .app-top { gap: 6px; flex-wrap: wrap; }
  .side-item { min-height: 44px; }
}
@media (max-width: 400px) { #contenido .page-title { font-size: 20px; } #contenido .btn { padding-left: 12px; padding-right: 12px; } }
.sf-feedback{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;margin-bottom:8px;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,107,0,.35);background:rgba(255,107,0,.08);color:var(--accent)}
.sf-feedback:hover{background:rgba(255,107,0,.15);border-color:rgba(255,107,0,.6)}
.sf-feedback:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sf-feedback span{display:grid;gap:1px;min-width:0}
.sf-feedback b{font-size:13.5px;color:#fff}
.sf-feedback small{font-size:11.5px;color:#b9b9c2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-collapsed .sf-feedback{justify-content:center;padding:10px 0}