@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/geist-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/geist-mono-400.woff2') format('woff2');
}

:root {
  --font-sans: 'Geist Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Tema Claro (Monocromo Neutro) */
  --bg: #FFFFFF;
  --s1: #FAFAFA;
  --s2: #F2F2F2;
  --line: #E5E5E5;
  --border-field: #8F8F8F;
  --text-1: #0A0A0A;
  --text-2: #525252;
  --text-3: #6B6B6B;

  /* Semántica P&L */
  --pnl-pos: #166534;
  --pnl-neg: #B91C1C;
  --pnl-pos-bg: rgba(22, 101, 52, 0.08);
  --pnl-neg-bg: rgba(185, 28, 28, 0.08);

  /* Superficies flotantes */
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.08);

  /* Compatibilidad con clases previas */
  --panel: var(--s1);
  --panel2: var(--s2);
  --panel-hero: var(--s1);
  --txt: var(--text-1);
  --mut: var(--text-2);
  --green: var(--pnl-pos);
  --red: var(--pnl-neg);
  --gbg: var(--pnl-pos-bg);
  --rbg: var(--pnl-neg-bg);
  --acc: var(--text-1);
  --acc2: var(--text-2);
  --acc-warm: var(--text-2);

  /* Tokens de movimiento */
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);

  color-scheme: light;
}

[data-theme="dark"] {
  /* Tema Oscuro (Monocromo Neutro) */
  --bg: #0A0A0A;
  --s1: #111111;
  --s2: #1A1A1A;
  --line: #262626;
  --border-field: #6B6B6B;
  --text-1: #FAFAFA;
  --text-2: #A3A3A3;
  --text-3: #8A8A8A;

  /* Semántica P&L */
  --pnl-pos: #4ADE80;
  --pnl-neg: #F87171;
  --pnl-pos-bg: rgba(74, 222, 128, 0.10);
  --pnl-neg-bg: rgba(248, 113, 113, 0.10);

  /* Superficies flotantes */
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.50);

  /* Compatibilidad */
  --panel: var(--s1);
  --panel2: var(--s2);
  --panel-hero: var(--s1);
  --txt: var(--text-1);
  --mut: var(--text-2);
  --green: var(--pnl-pos);
  --red: var(--pnl-neg);
  --gbg: var(--pnl-pos-bg);
  --rbg: var(--pnl-neg-bg);
  --acc: var(--text-1);
  --acc2: var(--text-2);
  --acc-warm: var(--text-2);

  color-scheme: dark;
}

[data-monochrome="strict"],
html[data-monochrome="strict"],
body[data-monochrome="strict"] {
  --pnl-pos: var(--text-1) !important;
  --pnl-neg: var(--text-1) !important;
  --pnl-pos-bg: transparent !important;
  --pnl-neg-bg: transparent !important;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.4 var(--font-sans);-webkit-font-smoothing:antialiased}
.num,.tabular,.mono,.kpi-val,.kpi-num,.stat-value,.stat-num,.kpi-v,.money,.balance,.pnl,.trade-pnl,.trade-val,.card-val,.total-val,.amount,.tbl td,.tbl th,table td,table th,.cal-pnl,.cal-date,.cal-cell-day,input[type=number],input[type=date],input[type=time]{font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.pos{color:var(--green)}.neg{color:var(--red)}.mut{color:var(--mut)}
.app{display:grid;grid-template-columns:224px 1fr;min-height:100vh}

/* Sidebar (224px estricto) */
.side {
  width: 224px;
  background: var(--s1);
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
}
.brand {
  display: flex;
  align-items: center;
  padding: 4px 6px 8px;
  color: var(--text-1);
}
.brand-wordmark {
  display: block;
  height: 18px;
  width: auto;
  aspect-ratio: 800 / 140;
  color: var(--text-1);
  fill: currentColor;
}
.calc-frame {
  width: 100%;
  height: calc(100vh - 118px);
  min-height: 560px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  display: block;
}
.logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--text-1);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
}
.side nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.nav-btn .nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.nav-btn:hover {
  background: var(--s2);
  color: var(--text-1);
}
.nav-btn:active {
  transform: scale(0.99);
}
.nav-btn.active {
  background: var(--s2);
  color: var(--text-1);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--text-1);
}
.side-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

/* Buttons (Monocromo de precisión) */
.btn-primary {
  background: var(--text-1);
  border: 1px solid var(--text-1);
  color: var(--bg);
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: none;
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-ghost {
  background: var(--s2);
  border: 1px solid var(--line);
  color: var(--text-1);
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.btn-ghost:hover {
  border-color: var(--border-field);
}
.btn-ghost:active {
  transform: scale(0.98);
}
.btn-danger {
  background: transparent;
  border: 1px solid var(--pnl-neg);
  color: var(--pnl-neg);
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background var(--dur-fast) ease;
}
.btn-danger:hover {
  background: var(--pnl-neg-bg);
}
.btn-danger:active {
  transform: scale(0.98);
}
.sm { padding: 5px 9px; font-size: 12.5px; }
.icon-btn {
  background: var(--s2);
  border: 1px solid var(--line);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  color: var(--text-1);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  box-shadow: none;
  transition: border-color var(--dur-fast) ease;
}
.icon-btn:hover {
  border-color: var(--border-field);
}
.icon-btn:active {
  transform: scale(0.96);
}

/* Main */
main{padding:20px 24px 40px;min-width:0}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.topbar h1{font-size:20px;font-weight:600;letter-spacing:-0.3px;margin:0;margin-right:auto;color:var(--text-1)}
.acct{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px}
.acct b{font-size:14px}
select,input[type=search],input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],textarea{
  font-size: 16px;
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 10px;outline:none;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
select:focus,input:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(91,103,148,.25)}

/* Vistas con transición suave */
.view{
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.view.active{
  display:block;
  animation:viewEnter var(--dur-med) var(--ease-out) forwards;
}
@keyframes viewEnter{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: var(--ease-out);
}

.kpis > .card {
  animation: cardStagger var(--dur-slow) var(--ease-out) both;
}
.kpis > .card:nth-child(1) { animation-delay: 20ms; }
.kpis > .card:nth-child(2) { animation-delay: 40ms; }
.kpis > .card:nth-child(3) { animation-delay: 60ms; }
.kpis > .card:nth-child(4) { animation-delay: 80ms; }
.kpis > .card:nth-child(5) { animation-delay: 100ms; }
.kpis > .card:nth-child(6) { animation-delay: 120ms; }

@keyframes cardStagger {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gráficos animados */
.chart-equity-path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: drawLineChart 1.1s var(--ease-out) forwards;
}
@keyframes drawLineChart {
  to { stroke-dashoffset: 0; }
}
.chart-bar {
  transform-origin: bottom;
  animation: growBar var(--dur-slow) var(--ease-out) forwards;
}
@keyframes growBar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Suavizado en cambio de tema */
html.theme-transitioning, html.theme-transitioning * {
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
}

/* Skeleton loader */
.skeleton {
  background: var(--s2); opacity: 0.7;
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 6px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respeto estricto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .chart-equity-path { stroke-dashoffset: 0 !important; animation: none !important; }
  .chart-bar { transform: scaleY(1) !important; animation: none !important; }
  .view.active { animation: none !important; transform: none !important; opacity: 1 !important; }
  .kpis > .card { animation: none !important; transform: none !important; opacity: 1 !important; }
}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;min-width:0}
.card-h{font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.info{color:var(--mut);cursor:help;font-weight:400}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:14px}
.kpi{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:104px}
.kpi.row{flex-direction:row;align-items:center}
.kpi-l{color:var(--mut);font-size:13px;display:flex;align-items:center;gap:6px}
.kpi-v{font-size:24px;font-weight:800}
.kpi-s{color:var(--mut);font-size:12px}
.badge{background:var(--s2);border:1px solid var(--line);border-radius:4px;padding:1px 6px;font-size:11px;color:var(--text-2);font-family:var(--font-mono);font-variant-numeric:tabular-nums lining-nums;}
.kpi-g{width:96px;text-align:center}
.gauge{width:96px;display:block}
.g-bg{fill:none;stroke:var(--red);stroke-width:9}
.g-fg{fill:none;stroke:var(--green);stroke-width:9}
.g-empty .g-bg{stroke:var(--line)}
.wl{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-top:-2px;padding:0 4px}
.donut{width:64px;height:64px}
.bar2{display:flex;height:6px;border-radius:2px;overflow:hidden;gap:2px}
.bar2 .g{background:var(--pnl-pos);border-radius:2px}.bar2 .r{background:var(--pnl-neg);border-radius:2px}
.bar2-l{display:flex;justify-content:space-between;font-size:12px;font-weight:700}

.grid2{display:grid;grid-template-columns:minmax(260px,1fr) 2fr;gap:14px;margin-bottom:14px}
.grid2.rev{grid-template-columns:2fr minmax(260px,1fr)}
.radar{width:100%;max-height:250px;display:block}
.r-grid{fill:none;stroke:var(--line)}
.r-data{fill:rgba(109,127,209,.35);stroke:var(--acc);stroke-width:2}
.r-lbl{fill:var(--mut);font-size:11px}
.score{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.score b{font-size:26px}
.score-bar{height:6px;border-radius:2px;background:var(--s2);border:1px solid var(--line);position:relative;margin-top:6px}
.score-bar span{position:absolute;top:-4px;width:4px;height:16px;background:#fff;border-radius:2px;transform:translateX(-2px)}
.chart{width:100%;height:auto;display:block}
.ax{fill:var(--mut);font-size:11px;user-select:none}
.gl{stroke:var(--line);stroke-width:1}
.zl{stroke:var(--txt);stroke-width:1.6;stroke-opacity:0.75}
.empty-chart{color:var(--mut);text-align:center;padding:60px 0}
.interactive-chart{cursor:crosshair;touch-action:none}
.chart-crosshair{transition:opacity var(--dur-fast) ease}
[data-theme="light"] .zl{stroke:#0f172a;stroke-opacity:0.85}
[data-theme="light"] .gl{stroke:#e2e8f0}

.recent{list-style:none;margin:0;padding:0}
.recent li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 4px;border-top:1px solid var(--line);cursor:pointer}
.recent li:first-child{border-top:0}
.recent li:hover{background:var(--panel2)}
.side-tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px}
.side-tag.Long,.side-tag.Buy{background:var(--gbg);color:var(--green)}.side-tag.Short,.side-tag.Sell{background:var(--rbg);color:var(--red)}

/* Calendar */
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.cal-nav{display:flex;align-items:center;gap:8px}
.cal-nav h3{margin:0 6px;min-width:150px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr) minmax(90px,.9fr);gap:6px}
.cal-dow{color:var(--mut);font-size:12px;text-align:center;padding:4px 0}
.cal-cell{min-height:92px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;cursor:pointer}
.cal-cell:hover{border-color:var(--acc)}
.cal-cell.empty{background:transparent;border-color:transparent;cursor:default}
.cal-cell.pos{background:var(--gbg);border-color:rgba(34,197,94,.45)}
.cal-cell.neg{background:var(--rbg);border-color:rgba(239,68,68,.45)}
.cal-cell.today{outline:2px solid var(--acc);outline-offset:1px}
.cal-dn{font-size:12px;color:var(--mut);margin-bottom:auto}
.cal-pnl{font-weight:800;font-size:15px}
.cal-cell.pos .cal-pnl{color:var(--green)}.cal-cell.neg .cal-pnl{color:var(--red)}
.cal-meta{font-size:11px;color:var(--mut)}
.cal-week{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;justify-content:center;gap:2px;font-size:12px;color:var(--mut)}
.cal-week b{font-size:15px}
.year-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:14px}
.ym{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer}
.ym:hover,.ym.active{border-color:var(--acc)}
.ym span{display:block;font-size:12px;color:var(--mut)}

/* Tables & Toolbar */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar input[type=search]{min-width:220px;flex:1 1 220px;max-width:320px}
.spacer{flex:1}
.tbl-wrap{overflow-x:auto;padding:0}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{color:var(--mut);font-weight:600;text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tbody tr{transition:background var(--dur-fast) var(--ease-out)}
.tbl tbody tr:hover{background:rgba(91,103,148,0.08)}
.tbl tfoot td{font-weight:800;border-bottom:0}
.tbl .num{text-align:right}
.tbl .clickable{cursor:pointer}
.tbl .col-actions{text-align:right;width:70px}
.tbl .row-actions{display:inline-flex;align-items:center;gap:4px;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.tbl tbody tr:hover .row-actions,.tbl tbody tr:focus-within .row-actions{opacity:1}
@media (max-width:768px),(hover:none){.tbl .row-actions{opacity:1 !important}}
.act-btn{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--mut);cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.act-btn:hover{background:rgba(91,103,148,0.15);color:var(--txt)}
.act-btn.del:hover{background:rgba(239,68,68,0.15);color:var(--red);border-color:rgba(239,68,68,0.25)}
.act{background:none;border:0;cursor:pointer;padding:2px 5px;border-radius:6px}
.act:hover{background:var(--line)}
.mbar{height:6px;border-radius:2px;min-width:2px}
.pos-bg{background:var(--green)}.neg-bg{background:var(--red)}
.reports{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px;box-sizing:border-box}
.statlist{display:grid;grid-template-columns:1fr auto;gap:0}
.statlist div{padding:8px 4px;border-top:1px solid var(--line)}
.statlist div:nth-child(-n+2){border-top:0}
.statlist div:nth-child(even){text-align:right;font-weight:700}

/* Dropdown Menu (Datos ▾) */
.dropdown-menu-wrap{position:relative;display:inline-block}
.dropdown-toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 12px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);font-size:13px;font-weight:600;transition:all var(--dur-fast) var(--ease-out)}
.dropdown-toggle:hover{border-color:var(--acc)}
.dropdown-toggle[aria-expanded="true"]{border-color:var(--acc);box-shadow:0 0 0 2px rgba(91,103,148,0.25)}
.dropdown-toggle .chevron{transition:transform var(--dur-fast) var(--ease-out)}
.dropdown-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100% + 4px);right:0;min-width:240px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,0.35);padding:6px;z-index:1000;display:flex;flex-direction:column;gap:2px;animation:dropMenuEnter var(--dur-fast) var(--ease-out)}
.dropdown-menu[hidden]{display:none !important}
@keyframes dropMenuEnter{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:6px;border:none;background:transparent;color:var(--txt);font-size:13px;font-weight:500;text-align:left;cursor:pointer;transition:background var(--dur-fast) var(--ease-out);box-sizing:border-box}
.dropdown-item:hover,.dropdown-item:focus{background:rgba(91,103,148,0.12);color:var(--acc);outline:none}
.dropdown-divider{height:1px;background:var(--line);margin:4px 0}

/* Custom Accessible Selects */
.c-select-native{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.c-select{position:relative;display:inline-block;min-width:130px}
.c-select-account{min-width:170px;max-width:240px}
.c-select-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:36px;padding:6px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--txt);font-size:13px;font-weight:500;cursor:pointer;user-select:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.c-select-account .c-select-btn{font-weight:700}
.c-select-btn:hover{border-color:var(--acc)}
.c-select-btn:focus-visible,.c-select-btn[aria-expanded="true"]{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(91,103,148,0.25)}
.c-select-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
.c-select-chevron{color:var(--mut);flex-shrink:0;display:inline-flex;align-items:center;transition:transform var(--dur-fast) var(--ease-out)}
.c-select-btn[aria-expanded="true"] .c-select-chevron{transform:rotate(180deg)}
.c-select-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;max-width:320px;max-height:280px;overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px;box-shadow:0 10px 25px rgba(0,0,0,0.35);z-index:1050;display:flex;flex-direction:column;gap:2px;animation:dropMenuEnter var(--dur-fast) var(--ease-out)}
.c-select-menu[hidden]{display:none !important}
.c-select-group-header{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--mut);padding:6px 8px 2px;pointer-events:none}
.c-select-opt{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:6px;font-size:13px;color:var(--txt);cursor:pointer;transition:background var(--dur-fast) var(--ease-out)}
.c-select-opt:hover,.c-select-opt.active{background:rgba(91,103,148,0.12);color:var(--acc)}
.c-select-opt[aria-selected="true"]{background:rgba(91,103,148,0.18);color:var(--acc);font-weight:600}
.c-select-opt-check{margin-left:6px;color:var(--acc);display:inline-flex;align-items:center}

/* Empty states */
.empty{text-align:center;padding:50px 20px}
.empty-state-box{text-align:center;padding:54px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.empty-state-illus{margin-bottom:16px;display:inline-flex;align-items:center;justify-content:center;padding:14px;border-radius:20px;background:rgba(91,103,148,0.06);border:1px dashed var(--line)}
.empty-state-title{font-size:18px;font-weight:700;margin:0 0 6px;color:var(--txt)}
.empty-state-desc{color:var(--mut);max-width:480px;font-size:13px;line-height:1.5;margin:0 auto 20px}
.tbl-empty-box{text-align:center;padding:44px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:sticky;left:0;max-width:100%;box-sizing:border-box}
@media (max-width:768px){
  .tbl-wrap:has(.tbl-empty-box){overflow-x:hidden}
  .tbl:has(.tbl-empty-box){width:100% !important;min-width:0 !important;display:block}
  .tbl:has(.tbl-empty-box) tbody{display:block;width:100%}
  .tbl:has(.tbl-empty-box) tr{display:block;width:100%}
  .tbl:has(.tbl-empty-box) td{display:block;width:100%;box-sizing:border-box}
  .tbl:has(.tbl-empty-box) thead{display:none}
  .tbl-empty-box{padding:32px 10px;width:100%}
}
.tbl-empty-icon{margin-bottom:12px;width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:rgba(91,103,148,0.08)}

/* Collapsible Sidebar (Paso e) */
.app{transition:grid-template-columns var(--dur-med) var(--ease-out)}
.side{transition:width var(--dur-med) var(--ease-out),padding var(--dur-med) var(--ease-out)}
.app.side-collapsed{grid-template-columns:72px 1fr}
.app.side-collapsed .side{width:72px;padding:16px 8px;align-items:center}
.app.side-collapsed .brand{padding:0 0 4px;display:flex;justify-content:center}
.app.side-collapsed .brand-text,
.app.side-collapsed .user-info,
.app.side-collapsed .nav-btn span,
.app.side-collapsed #btnAdd span,
.app.side-collapsed .side-bottom .nav-btn span{display:none !important}
.app.side-collapsed .user-pill{padding:4px;justify-content:center;border-radius:10px;width:100%}
.app.side-collapsed #btnAdd{padding:0;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;margin:0 auto}
.app.side-collapsed .nav-btn{justify-content:center;padding:10px 0;width:44px;height:44px;border-radius:10px;margin:0 auto}
.sidebar-toggle-btn{background:transparent;border:1px solid var(--line);color:var(--mut);width:32px;height:32px;border-radius:8px;display:grid;place-items:center;cursor:pointer;margin-top:6px;transition:all var(--dur-fast) var(--ease-out)}
.sidebar-toggle-btn:hover{background:rgba(91,103,148,0.15);color:var(--txt);border-color:var(--acc)}
.app.side-collapsed .sidebar-toggle-btn .chevron,
.app.side-collapsed #btnToggleSidebar .chevron{transform:rotate(180deg)}

/* Command Palette (Ctrl+K) */
.cmd-palette{background:transparent;border:none;padding:0;width:min(600px,94vw);margin:10vh auto auto;overflow:visible;box-shadow:none}
.cmd-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,0.6),0 0 0 1px rgba(91,103,148,0.25);overflow:hidden;display:flex;flex-direction:column}
.cmd-search-wrap{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.cmd-search-icon{color:var(--acc);flex-shrink:0}
.cmd-input{flex:1;background:transparent;border:none;outline:none;color:var(--txt);font-size:15px;font-weight:500;font-family:inherit}
.cmd-input::placeholder{color:var(--mut)}
.cmd-kbd{font-size:11px;font-family:inherit;font-weight:600;padding:3px 6px;border-radius:4px;background:var(--panel);border:1px solid var(--line);color:var(--mut)}
.cmd-results{max-height:340px;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px}
.cmd-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:8px;cursor:pointer;color:var(--txt);font-size:13.5px;transition:background var(--dur-fast) var(--ease-out)}
.cmd-item:hover,.cmd-item.active{background:rgba(91,103,148,0.18);color:var(--acc)}
.cmd-item-left{display:flex;align-items:center;gap:12px}
.cmd-item-icon{width:18px;height:18px;color:var(--mut);display:grid;place-items:center;flex-shrink:0}
.cmd-item:hover .cmd-item-icon,.cmd-item.active .cmd-item-icon{color:var(--acc)}
.cmd-item-tag{font-size:11px;color:var(--mut);background:rgba(91,103,148,0.08);border:1px solid var(--line);border-radius:4px;padding:2px 6px}
.cmd-empty{padding:28px 20px;text-align:center;color:var(--mut);font-size:13px}
.cmd-footer{display:flex;align-items:center;gap:16px;padding:10px 18px;border-top:1px solid var(--line);background:var(--panel2);font-size:11.5px;color:var(--mut);flex-wrap:wrap}
.cmd-footer kbd{font-size:10px;padding:2px 5px;border-radius:4px;background:var(--panel);border:1px solid var(--line)}

/* Toast Notifications */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (max-width:600px){.toast-container{bottom:80px;left:16px;right:16px;align-items:center}}
.toast{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:280px;max-width:440px;padding:10px 16px;border-radius:10px;background:var(--panel);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,0.45);color:var(--txt);font-size:13px;font-weight:500;animation:toastEnter var(--dur-med) var(--ease-out);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
@keyframes toastEnter{from{opacity:0;transform:translateY(12px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.toast.toast-hiding{opacity:0;transform:translateY(8px) scale(0.96)}
.toast-success{border-color:rgba(34,197,94,0.35)}
.toast-error{border-color:rgba(239,68,68,0.35);color:var(--red)}
.toast-btn{background:rgba(91,103,148,0.2);border:1px solid var(--acc);color:var(--acc);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:700;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.toast-btn:hover{background:var(--acc);color:#fff}

/* Calendar Tooltip */
.cal-tooltip{position:fixed;z-index:1080;pointer-events:none;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,0.45);padding:10px 14px;min-width:180px;font-size:12px;animation:dropMenuEnter var(--dur-fast) var(--ease-out)}
.cal-tooltip[hidden]{display:none !important}
.cal-tooltip-date{font-weight:700;color:var(--txt);margin-bottom:4px}
.cal-tooltip-pnl{font-size:15px;font-weight:800;margin-bottom:3px}
.cal-tooltip-stats{color:var(--mut);font-size:11.5px}

/* Shortcuts Dialog */
.shortcuts-grid{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.shortcut-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-size:13px}
.shortcut-item kbd{font-family:inherit;font-size:11px;font-weight:700;background:var(--panel);border:1px solid var(--line);padding:3px 7px;border-radius:5px;color:var(--acc)}

/* Dialogs */
dialog{
  background:var(--panel);color:var(--txt);border:1px solid var(--line);border-radius:16px;padding:0;
  width:min(720px,94vw);max-height:92vh;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  opacity:0;transform:scale(0.97) translateY(8px);
  transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
dialog[open]{
  opacity:1;transform:scale(1) translateY(0);
}
dialog::backdrop{
  background:rgba(0,0,0,0.6);
  opacity:0;transition:opacity var(--dur-med) var(--ease-out);
}
dialog[open]::backdrop{opacity:1}
.dlg-in{padding:20px 22px}
.dlg-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.dlg-h h2{margin:0;font-size:19px}
.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--mut);font-weight:600}
.form-grid label input,.form-grid label select,.form-grid label textarea{color:var(--txt);font-weight:400;width:100%}
.span2{grid-column:span 2}.span4{grid-column:1/-1}
.pnl-input{font-weight:800 !important;font-size:16px !important}
.hint{font-weight:400;font-size:11px;color:var(--mut)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{flex-direction:row;align-items:center;gap:6px;background:var(--s1);border:1px solid var(--line);border-radius:4px;padding:4px 8px;cursor:pointer;color:var(--text-2);font-weight:500;font-size:12px}
.chips label:has(input:checked){border-color:var(--acc);background:rgba(109,127,209,.18)}
.chips input{accent-color:var(--acc);margin:0}
.dlg-f{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;align-items:center}
.dlg-f .left{margin-right:auto}
.day-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.day-stats div{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.day-stats span{display:block;font-size:12px;color:var(--mut)}
.day-stats b{font-size:17px}
textarea{width:100%;resize:vertical}

@media (max-width:1100px){.grid2,.grid2.rev{grid-template-columns:1fr}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px}
  .side nav{flex-direction:row;flex-wrap:wrap}
  .side-bottom{margin:0;border:0;padding:0;flex-direction:row;flex-wrap:wrap}
  .nav-btn{width:auto}
  main{padding:14px}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .day-stats{grid-template-columns:repeat(2,1fr)}
  .cal-grid{grid-template-columns:repeat(7,1fr)}
  .cal-week{display:none}
  .cal-cell{min-height:62px;padding:4px}
  .cal-meta{display:none}
  .cal-pnl{font-size:12px}
}

/* Brand Logo */
.brand { display: block; padding: 4px 6px 0; margin-bottom: 2px; }
.wordmark { display: block; width: 100%; max-width: 165px; height: auto; filter: brightness(1.22) drop-shadow(0 2px 6px rgba(109,127,209,.25)); }

/* User Pill in Sidebar */
.user-pill {
  display: flex; align-items: center; gap: 10px; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 8px; background: var(--text-1); color: var(--bg);
  display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex-shrink: 0;
}
.user-info { min-width: 0; flex: 1; }
.user-info b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.role-owner { color: #f59e0b; }
.role-user { color: var(--acc2); }

/* Admin View Styles */
.admin-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.admin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-header h2 { margin: 0 0 4px; font-size: 20px; }
.admin-header p { margin: 0; color: var(--mut); font-size: 13px; }
.admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.admin-kpi { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.admin-kpi span { font-size: 12px; color: var(--mut); display: block; margin-bottom: 4px; }
.admin-kpi b { font-size: 24px; font-weight: 800; }

.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); }
.status-active { background: rgba(34,197,94,.15); color: var(--green); border: 1px solid rgba(34,197,94,.3); }
.status-suspended { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.status-banned { background: rgba(239,68,68,.15); color: var(--red); border: 1px solid rgba(239,68,68,.3); }

.admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-xs { font-size: 11px; padding: 4px 8px; border-radius: 6px; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--panel2); color: var(--txt); }
.btn-xs:hover { border-color: var(--acc); }
.btn-xs-warn { color: #f59e0b; border-color: rgba(245,158,11,.3); }
.btn-xs-warn:hover { background: rgba(245,158,11,.15); }
.btn-xs-danger { color: var(--red); border-color: rgba(239,68,68,.3); }
.btn-xs-danger:hover { background: rgba(239,68,68,.15); }
.btn-xs-ok { color: var(--green); border-color: rgba(34,197,94,.3); }
.btn-xs-ok:hover { background: rgba(34,197,94,.15); }

.backup-box { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 16px; background: var(--panel2); border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; }
.danger-zone { border: 1px solid rgba(239,68,68,.35); background: rgba(239,68,68,.04); border-radius: 14px; padding: 18px; margin-top: 20px; }
.danger-zone h3 { margin: 0 0 6px; color: var(--red); font-size: 16px; }
.danger-zone p { margin: 0 0 14px; font-size: 13px; color: var(--mut); }


/* ========================================================
   DISEÑO MÓVIL ESTILO APP NATIVA
   ======================================================== */
.mobile-header, .mobile-bottom-nav, .mobile-sheet { display: none; }

@media (max-width: 840px) {
  html, body {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* Ocultar barra lateral en móvil y mostrar layout fluido */
  .app { display: block !important; min-height: 100dvh; }
  .side { display: none !important; }

  /* Top bar móvil */
  .mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 16px;
    background: rgba(13, 15, 22, 0.95);
    -webkit-
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-logo { height: 26px; width: auto; filter: brightness(1.22); }
  .mobile-user-wrap {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: var(--panel2); border: 1px solid var(--line);
    padding: 4px 10px 4px 6px; border-radius: 99px;
  }
  .mobile-avatar {
    width: 26px; height: 26px; border-radius: 7px;
    background: var(--text-1); color: var(--bg);
    display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff;
  }
  .mobile-username { font-size: 12px; font-weight: 600; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }

  /* Bottom Navigation Bar fija (64px + safe area) */
  .mobile-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .mobile-brand { display: flex; align-items: center; }
  .mobile-wordmark { height: 18px; width: auto; color: var(--text-1); fill: currentColor; }
  .mobile-center-acc { flex: 1; max-width: 140px; margin: 0 8px; }
  .mob-account-select { width: 100%; font-size: 12px; padding: 4px 6px; border-radius: 6px; background: var(--s2); border: 1px solid var(--line); }
  .mobile-user-wrap {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    background: var(--s2); border: 1px solid var(--line);
    padding: 3px 8px 3px 5px; border-radius: 6px;
  }
  .mobile-avatar {
    width: 22px; height: 22px; border-radius: 4px;
    background: var(--text-1); color: var(--bg);
    display: grid; place-items: center; font-weight: 700; font-size: 11px;
  }
  .mobile-username { font-size: 11.5px; font-weight: 600; max-width: 75px; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }

  .mobile-bottom-nav {
    display: flex !important;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--line);
    z-index: 800;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }
  .mob-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    flex: 1; height: 100%; background: none; border: 0; color: var(--text-3);
    font: 500 11px var(--font-sans); cursor: pointer; gap: 3px;
    transition: color var(--dur-fast) ease;
  }
  .mob-tab.active { color: var(--text-1); font-weight: 600; }
  .mob-tab.active .mob-icon { transform: none; }
  .mob-icon { font-size: 18px; line-height: 1; display: grid; place-items: center; }
  .mob-add-btn { flex: 0 0 54px; position: relative; display: flex; align-items: center; justify-content: center; }
  .mob-add-icon {
    width: 44px; height: 44px; border-radius: 6px;
    background: var(--text-1); color: var(--bg);
    display: grid; place-items: center;
    font-size: 20px; font-weight: 400;
    box-shadow: none;
    border: 1px solid var(--text-1);
  }

  /* Padding inferior para que el contenido no quede tapado por la barra */
  main { padding: 14px 14px calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  .topbar { gap: 10px; margin-bottom: 14px; }
  .topbar h1 { font-size: 19px; }
  .acct { font-size: 12px; padding: 6px 10px; }

  /* Tarjetas y KPIs en móvil */
  .kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .kpi { min-height: 90px; padding: 12px; }
  .kpi-v { font-size: 20px; }
  .grid2, .grid2.rev { grid-template-columns: 1fr !important; gap: 12px; }

  /* Modales convertidos en Bottom Sheets cómodos */
  dialog {
    width: 100vw !important; max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important; margin: 0 !important;
    max-height: 90vh !important; border-left: 0 !important; border-right: 0 !important;
    border-bottom: 0 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.6);
    background: var(--panel) !important; color: var(--txt) !important;
  }
  dialog[open] { display: block !important; }
  .mobile-sheet[open] { display: block !important; }
  dialog::backdrop {
    background: rgba(0,0,0,.65) !important;
    -webkit-
  }
  .topbar #btnThemeToggle { display: none !important; }
  .reports { grid-template-columns: 1fr !important; }
  .admin-kpis { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .mob-tab, .mob-add-btn, .sheet-item, .icon-btn {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
    width: 100vw !important; max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    position: fixed !important; bottom: 0 !important; margin: 0 !important;
    max-height: 90vh !important; border-left: 0 !important; border-right: 0 !important;
    border-bottom: 0 !important; box-shadow: 0 -10px 40px rgba(0,0,0,.6);
  }
  .dlg-in { padding: 16px 16px 24px; max-height: 88vh; overflow-y: auto; }
  .form-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .span4, .span2 { grid-column: 1 / -1 !important; }
  input, select, textarea { font-size: 16px !important; padding: 11px 10px !important; } /* Sin zoom forzado */

  /* Calendario en móvil */
  .cal-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; }
  .cal-week { display: none !important; }
  .cal-cell { min-height: 52px !important; padding: 4px 5px !important; }
  .cal-dn { font-size: 11px; }
  .cal-pnl { font-size: 11px !important; }
  .cal-meta { display: none !important; }

  /* Tabla de trades en móvil */
  .toolbar { gap: 6px; }
  .toolbar input[type=search] { min-width: 140px; flex: 1 1 140px; }
  .tbl th, .tbl td { padding: 8px 9px; font-size: 12px; }
  
  /* Bottom Sheet modal menu */
  .mobile-sheet .sheet-in { padding: 18px 18px 24px; }
  .sheet-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .sheet-nav-list { display: grid; gap: 8px; }
  .sheet-item {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px;
    background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
    color: inherit; text-decoration: none; font: inherit; cursor: pointer; text-align: left;
    transition: background .15s; width: 100%;
  }
  .sheet-item:active { background: rgba(109,127,209,.15); }
  .sheet-item span { font-size: 22px; width: 32px; text-align: center; }
  .sheet-item b { display: block; font-size: 14px; }
  .sheet-item small { display: block; color: var(--mut); font-size: 11px; }

  /* Calculadora frame en móvil */
  .calc-frame { height: calc(100vh - 170px); min-height: 480px; }

  /* Tabs de retiros en móvil */
  .payout-tabs { width: 100% !important; display: flex !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .payout-tab-btn { flex: 1 1 auto !important; text-align: center !important; white-space: nowrap !important; padding: 8px 10px !important; font-size: 12.5px !important; }
}


/* Branding Lockup IMPULZE (SVG inline + currentColor) */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  user-select: none;
  padding: 2px 0;
  transition: opacity 120ms ease;
}
.brand-logo:hover { opacity: 0.9; }
.brand-badge-z {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #5B6794;
  display: grid;
  place-items: center;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(91, 103, 148, 0.35);
}
.brand-text {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 19px;
  font-weight: 750;
  letter-spacing: 2px;
  color: var(--txt);
  text-transform: uppercase;
  line-height: 1;
}
.brand-logo.sm { gap: 8px; }
.brand-badge-z.sm {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}
.brand-text.sm {
  font-size: 16px;
  letter-spacing: 1.5px;
}
.nav-icon {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav-btn.active .nav-icon {
  opacity: 1;
  stroke: #8796e0;
}
.mob-icon-svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

/* Tarjeta de Resumen Total del Año en Calendario */
.cal-year-card {
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
}
.cal-year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cal-year-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cal-year-badge {
  background: var(--text-1); color: var(--bg);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 9px;
  border-radius: 8px;
}
.cal-year-pnl-box {
  text-align: right;
  background: var(--panel2);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 12px;
}
.cal-year-pnl-label {
  font-size: 11px;
  color: var(--mut);
  display: block;
}
.cal-year-pnl-val {
  font-size: 22px;
  font-weight: 850;
  display: block;
}
.cal-year-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cal-ykpi {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.cal-ykpi span {
  display: block;
  font-size: 11px;
  color: var(--mut);
  margin-bottom: 3px;
}
.cal-ykpi b {
  display: block;
  font-size: 16px;
  margin-bottom: 2px;
}
.cal-ykpi small {
  display: block;
  font-size: 11px;
}
@media (max-width: 600px) {
  .cal-year-card { padding: 14px; }
  .cal-year-header { flex-direction: column; align-items: flex-start; }
  .cal-year-pnl-box { width: 100%; text-align: left; }
  .cal-year-kpis { grid-template-columns: repeat(2, 1fr); }
}


/* ========================================================
   TEMA CLARO (DEFAULT BLANCO) vs OSCURO (NEGRO)
   ======================================================== */
[data-theme="light"] {
  --bg: #FFFFFF;
  --s1: #FAFAFA;
  --s2: #F2F2F2;
  --line: #E5E5E5;
  --border-field: #8F8F8F;
  --text-1: #0A0A0A;
  --text-2: #525252;
  --text-3: #6B6B6B;
  --pnl-pos: #166534;
  --pnl-neg: #B91C1C;
  --pnl-pos-bg: rgba(22, 101, 52, 0.08);
  --pnl-neg-bg: rgba(185, 28, 28, 0.08);
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.08);
  --panel: var(--s1);
  --panel2: var(--s2);
  --panel-hero: var(--s1);
  --txt: var(--text-1);
  --mut: var(--text-2);
  --green: var(--pnl-pos);
  --red: var(--pnl-neg);
  --gbg: var(--pnl-pos-bg);
  --rbg: var(--pnl-neg-bg);
  --acc: var(--text-1);
  --acc2: var(--text-2);
  --acc-warm: var(--text-2);
  color-scheme: light;
}

[data-theme="light"] .brand-wordmark-img { color: var(--text-1) !important; filter: none !important; }
[data-theme="light"] .nav-btn.active { color: var(--text-1) !important; font-weight: 600; background: var(--s2) !important; box-shadow: inset 2px 0 0 var(--text-1) !important; }
[data-theme="light"] .brand {
  color: var(--txt) !important;
}
[data-theme="light"] .tbl tbody tr:hover { background: var(--s2) !important; }
[data-theme="light"] .card { box-shadow: none !important; }
[data-theme="light"] .c-select-btn,
[data-theme="light"] .dropdown-toggle,
[data-theme="light"] .acct {
  background: #ffffff !important;
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #ffffff !important;
}
[data-theme="light"] .score-bar span { background: var(--text-1) !important; }
[data-theme="light"] .cmd-box { background: var(--bg) !important; box-shadow: var(--shadow-overlay) !important; }
[data-theme="light"] .cmd-search-wrap { background: var(--s1) !important; }
[data-theme="light"] .mobile-header { background: var(--bg) !important; }
[data-theme="light"] .mobile-bottom-nav { background: var(--bg) !important; }
[data-theme="light"] dialog { box-shadow: var(--shadow-overlay) !important; }

/* Payouts Section Styles */
.payout-card {
  margin-bottom: 14px;
}
.payout-status-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  border-radius: 99px; font-size: 11px; font-weight: 700;
}
.payout-cobrado {
  background: var(--gbg); color: var(--green); border: 1px solid rgba(22,163,74,.3);
}

.payout-tabs {
  display: inline-flex;
  gap: 4px;
  background: var(--panel2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.payout-tab-btn {
  background: transparent;
  border: 0;
  color: var(--mut);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.payout-tab-btn:hover {
  color: var(--txt);
}
.payout-tab-btn.active {
  background: var(--panel);
  color: var(--txt);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.payout-proceso {
  background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3);
}

/* Multi-cuenta (Fase 3) */
.account-select {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 12px;
  font-weight: 700;
  color: var(--txt);
  max-width: 240px;
  cursor: pointer;
  outline: none;
}
.account-select:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(109,127,209,.25);
}
.acc-badge-fondeada { background: rgba(56,189,248,.15); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); }
.acc-badge-evaluacion { background: rgba(245,158,11,.15); color: #f59e0b; border: 1px solid rgba(245,158,11,.3); }
.acc-badge-demo { background: rgba(168,85,247,.15); color: #c084fc; border: 1px solid rgba(168,85,247,.3); }
.acc-status-activa { background: rgba(22,163,74,.15); color: var(--green); }
.acc-status-archivada { background: rgba(148,163,184,.15); color: var(--mut); }

/* Reglas de Fondeo (Fase 4) */
.rules-panel {
  margin-bottom: 16px;
  border-left: 4px solid var(--acc);
}
.rule-bar-card {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rule-bar-track {
  height: 8px;
  background: rgba(148,163,184,.2);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.rule-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .3s ease;
}
.chip { display:inline-block; padding:2px 8px; border-radius:4px; font-weight:600; font-size:11.5px; border:1px solid var(--line); }
.chip.ok { background:rgba(34,197,94,.18); color:#22c55e; border:1px solid rgba(34,197,94,.35); }
.chip.no { background:rgba(239,68,68,.18); color:#ef4444; border:1px solid rgba(239,68,68,.35); }
.chip.eq { background:rgba(245,158,11,.18); color:#f59e0b; border:1px solid rgba(245,158,11,.35); }
.chip.sm { padding:2px 7px; font-size:11px; }

/* Revisión Semanal y Estilos de Impresión (Fase 6) */
@media print {
  body {
    background: #fff !important;
    color: #111 !important;
  }
  .side, .mobile-bottom-nav, .mobile-header, .topbar, .dlg-f, .icon-btn, button, .toolbar, select, #selReviewWeek, #btnPrintWeeklyReview {
    display: none !important;
  }
  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }
  .view {
    display: none !important;
  }
  #view-review {
    display: block !important;
    padding: 0 !important;
  }
  #printableWeeklyReview {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: #fff !important;
    color: #111 !important;
  }
  .cal-ykpi, [style*="var(--panel2)"] {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
  }
  .tbl {
    color: #111 !important;
  }
  .tbl th, .tbl td {
    border-color: #cbd5e1 !important;
    color: #111 !important;
  }
  .badge {
    border: 1px solid #cbd5e1 !important;
  }
}


/* Dashboard Monocromo de Precisión (Paso 4) */
.dash-hero-pnl {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px 24px;
  margin-bottom: 16px;
}
.dash-pnl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dash-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-2);
}
.dash-trade-count {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
}
.dash-pnl-number {
  font-size: 40px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dash-pnl-arrow {
  font-size: 28px;
  font-weight: 700;
}
.dash-balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: var(--text-2);
}
.dash-balance-row b {
  color: var(--text-1);
  font-family: var(--font-mono);
  font-weight: 600;
}
.dash-balance-sep {
  color: var(--line);
}
.dash-kpi-row {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px;
}
.dash-kpi-row .kpi {
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--s1);
  border: 1px solid var(--line);
  box-shadow: none;
}
.dash-kpi-row .kpi-l {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.dash-kpi-row .kpi-v {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-1);
  line-height: 1.2;
}
.dash-kpi-row .kpi-s {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
  font-family: var(--font-mono);
}
@media (max-width: 900px) {
  .dash-hero-pnl { padding: 18px 16px; }
  .dash-pnl-number { font-size: 32px; }
  .dash-kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ========================================================
   TABLA DE TRADES DENSA & RESPONSIVE (Paso 5)
   ======================================================== */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  color: var(--text-3);
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  height: 36px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tbl td {
  padding: 6px 10px;
  height: 36px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: middle;
}
.tbl th.num, .tbl td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.tbl tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
.tbl tbody tr:hover {
  background: var(--s2);
}
.tbl tfoot td {
  font-weight: 600;
  padding: 10px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.trade-simbolo-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}
.trade-mob-meta {
  display: none;
}
.trade-mob-r {
  display: none;
}

/* Ocultamiento responsivo progresivo en PC hasta 1280px para evitar scroll horizontal */
@media (max-width: 1280px) and (min-width: 641px) {
  .col-hora, .col-emocion, .col-nota {
    display: none !important;
  }
}
@media (max-width: 1060px) and (min-width: 641px) {
  .col-cant, .col-entry, .col-exit {
    display: none !important;
  }
}

/* Formato móvil (<= 640px): cards compactas de 64px */
@media (max-width: 640px) {
  .tbl-wrap {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  .tbl thead, .tbl tfoot {
    display: none !important;
  }
  .tbl, .tbl tbody {
    display: block;
    width: 100%;
  }
  .tbl tbody tr.clickable {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
    margin-bottom: 6px !important;
    background: var(--panel) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--text-3) !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    position: relative;
    cursor: pointer;
  }
  .tbl tbody tr.clickable.pos-row {
    border-left-color: var(--pnl-pos) !important;
  }
  .tbl tbody tr.clickable.neg-row {
    border-left-color: var(--pnl-neg) !important;
  }
  .tbl tbody tr.clickable > td {
    padding: 0 !important;
    border: none !important;
    height: auto !important;
    background: transparent !important;
    white-space: normal !important;
  }
  .tbl tbody tr.clickable > td.col-fecha,
  .tbl tbody tr.clickable > td.col-hora,
  .tbl tbody tr.clickable > td.col-lado,
  .tbl tbody tr.clickable > td.col-cant,
  .tbl tbody tr.clickable > td.col-entry,
  .tbl tbody tr.clickable > td.col-exit,
  .tbl tbody tr.clickable > td.col-r,
  .tbl tbody tr.clickable > td.col-setup,
  .tbl tbody tr.clickable > td.col-emocion,
  .tbl tbody tr.clickable > td.col-nota,
  .tbl tbody tr.clickable > td.col-actions {
    display: none !important;
  }
  .tbl tbody tr.clickable > td.col-simbolo {
    flex: 1;
    min-width: 0;
  }
  .trade-simbolo-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .trade-sym {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-1);
  }
  .trade-mob-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
  }
  .trade-mob-sep {
    color: var(--text-3);
  }
  .tbl tbody tr.clickable > td.col-pnl {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    text-align: right !important;
  }
  .trade-pnl-val {
    font-size: 15px;
    font-weight: 600;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
  }
  .trade-mob-r {
    display: block;
    font-size: 11px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* ========================================================
   CALENDARIO MONOCROMO DE PRECISIÓN (Paso 5)
   ======================================================== */
.cal-year-card {
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
}
.cal-year-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cal-year-badge {
  background: var(--s2);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.cal-year-pnl-box {
  text-align: right;
  background: var(--s1);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 8px;
}
.cal-year-pnl-label {
  font-size: 11px;
  color: var(--text-3);
  display: block;
  margin-bottom: 2px;
}
.cal-year-pnl-val {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  display: block;
}
.cal-year-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}
.cal-ykpi {
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.cal-ykpi span {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.cal-ykpi b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  margin-bottom: 2px;
}
.cal-ykpi small {
  display: block;
  font-size: 11px;
  color: var(--text-3);
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr) minmax(88px, 0.85fr);
  gap: 4px;
}
.cal-dow {
  color: var(--text-3);
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  padding: 6px 0;
}
.cal-cell {
  min-height: 84px;
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cal-cell:hover {
  border-color: var(--text-1);
}
.cal-cell.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.cal-cell.empty-day {
  background: var(--bg);
  border-color: var(--line);
  opacity: 0.6;
}
.cal-cell.empty-day:hover {
  opacity: 1;
}
.cal-cell.pos {
  background: rgba(34, 197, 94, 0.04);
  border-color: rgba(34, 197, 94, 0.25);
}
.cal-cell.neg {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.25);
}
[data-monochrome="strict"] .cal-cell.pos,
[data-monochrome="strict"] .cal-cell.neg {
  background: var(--s2);
  border-color: var(--line);
}
.cal-cell.today {
  border-color: var(--text-1);
  box-shadow: inset 0 0 0 1px var(--text-1);
}
.cal-dn {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.cal-pnl {
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.cal-meta {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.cal-week {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  font-size: 11px;
  color: var(--text-3);
}
.cal-week b {
  font-size: 13px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Ajuste de reportes para evitar desborde de 5px */
.reports {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 14px;
  box-sizing: border-box;
}

.trade-top-row { display: inline-flex; align-items: center; gap: 5px; }
.trade-mob-setup { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#view-reports, .reports { overflow-x: hidden; max-width: 100%; box-sizing: border-box; }