:root {
  --bg: #080d11;
  --panel: #10171d;
  --panel-2: #0d141a;
  --line: #26343e;
  --line-soft: #1d2931;
  --text: #f4f7fa;
  --muted: #8fa4b6;
  --yellow: #ffc800;
  --green: #41e5a0;
  --blue: #79b9ff;
  --amber: #f5b846;
  --red: #ff7777;
  --radius: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, Segoe UI, system-ui, sans-serif; }
body { min-width: 320px; }
button, select { font: inherit; }
button { cursor: pointer; }
.app-shell { height: 100dvh; min-height: 0; padding: 0 18px 4px; display: flex; flex-direction: column; overflow: hidden; }
.topbar { height: 58px; flex: 0 0 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; border-bottom: 1px solid var(--line-soft); }
.brand-wrap, .market-head { display: flex; align-items: center; gap: 10px; }
.market-head { justify-content: flex-end; }
.brand { font-size: 24px; font-weight: 800; letter-spacing: .5px; }
.icon-button { width: 42px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #0d1419; color: var(--text); font-size: 22px; }
.icon-button.close { width: 36px; height: 36px; font-size: 28px; line-height: 24px; }
.badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid transparent; padding: 8px 12px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.version { background: #123c30; color: #d7fff0; }
.live { background: #123b2f; color: var(--green); }
.live.stale, .live.offline { background: #3b2626; color: #ffb0b0; }
.btc-price { color: var(--yellow); font-size: 27px; font-weight: 900; }
.updated { color: var(--muted); font-size: 11px; }
.strategy-select { min-width: 250px; border: 1px solid transparent; background: var(--bg); color: var(--text); padding: 9px 34px 9px 12px; border-radius: 9px; font-weight: 700; }
.strategy-select:hover, .strategy-select:focus { border-color: var(--line); outline: none; }
.dashboard-grid { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, .98fr) minmax(660px, 1.04fr); grid-template-rows: minmax(244px, 1.38fr) minmax(136px, .76fr) minmax(140px, .76fr); gap: 6px; padding-top: 6px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.best-card { display: flex; flex-direction: column; min-height: 0; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 8px 14px 4px; }
.panel-heading.compact { align-items: center; padding: 6px 11px 3px; }
h2 { margin: 0; font-size: 15px; letter-spacing: .2px; }
.eyebrow { color: #d6e5f1; font-weight: 800; font-size: 13px; letter-spacing: .4px; }
.best-title-row { display: flex; align-items: baseline; gap: 9px; margin-top: 7px; }
.best-strike { font-size: 25px; font-weight: 900; white-space: nowrap; }
.muted-inline { color: var(--muted); font-size: 12px; }
.best-status-stack { display: grid; justify-items: end; gap: 5px; }
.micro-label { color: #8ca3b6; font-size: 10px; letter-spacing: .35px; }
.state.recommended { background: #163d32; color: var(--green); }
.state.acceptable { background: #463c1d; color: #ffe278; }
.state.wait { background: #21364d; color: #b8d8ff; }
.state.neutral, .action.neutral, .goal.neutral { background: #1a242c; color: #c3d0da; border-color: #2a3a45; }
.goal.good { background: #104633; color: var(--green); }
.goal.mid { background: #473c1e; color: #ffd86c; }
.goal.bad { background: #51252a; color: #ffadad; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px 14px; padding: 0 14px 4px; }
.metric { display: grid; gap: 2px; }
.metric span { color: var(--muted); font-size: 10px; }
.metric strong { font-size: 14px; }
.metric-adjusted strong { color: #86e8bf; }
.metric-available strong { color: #cae4ff; }
.evidence-pill { display: inline-block; width: 100%; border-radius: 8px; padding: 3px 10px; background: #19344f; color: #cae4ff; }
.action-strip { margin: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #0b1217; padding: 4px 7px 4px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; flex: 0 0 auto; }
.action-status { display: grid; gap: 3px; }
.action-detail-button { white-space: nowrap; align-self: center; }
.action.enter { background: #114a31; color: var(--green); }
.action.caution { background: #543d18; color: #ffd776; }
.action.wait { background: #17314f; color: #b8d8ff; }
.action-copy { font-size: 12px; }
.best-footer { min-height: 22px; display: flex; align-items: center; padding: 2px 14px 4px; margin-top: auto; flex: 0 0 auto; }
.best-explanation { color: #b4c3cf; font-size: 11px; }
.primary-button { border: 0; border-radius: 10px; padding: 8px 16px; background: var(--yellow); color: #111; font-weight: 900; }
.primary-button:disabled { opacity: .5; cursor: default; }
.secondary-button { border: 1px solid #32414c; border-radius: 9px; background: #17222b; color: var(--text); padding: 7px 12px; }
.secondary-button.small { padding: 6px 14px; font-size: 11px; }
.full-width { width: calc(100% - 18px); margin: 4px 9px 6px; }
.alternatives-card .full-width { flex: 0 0 22px; height: 22px; min-height: 22px; margin: 2px 9px 3px; padding: 0 10px; border-radius: 7px; font-size: 10px; line-height: 1; }
.alternatives-card { display: flex; flex-direction: column; min-height: 0; }
.alternatives-list { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: repeat(5, minmax(34px, 1fr)); gap: 3px; padding: 0 9px; }
.alt-row { min-height: 34px; display: grid; grid-template-columns: 32px minmax(0,1fr) 116px; align-items: center; gap: 7px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--panel-2); padding: 3px 7px; overflow: hidden; }
.rank-pill { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #15283b; color: #b9d7f3; font-size: 11px; font-weight: 800; }
.alt-main { min-width: 0; display: grid; gap: 2px; }
.alt-top { display: flex; gap: 7px; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
.alt-top strong { font-size: 12.5px; }
.duration-chip { border: 1px solid #2b3944; border-radius: 7px; padding: 1px 5px; color: #b8c7d2; font-size: 9px; }
.alt-bottom { display: grid; grid-template-columns: auto auto auto minmax(86px,1fr); gap: 7px; align-items: center; font-size: 9.6px; line-height: 1.08; white-space: nowrap; min-width: 0; overflow: hidden; }
.alt-bottom .apr { color: var(--yellow); font-weight: 800; }
.alt-bottom .adjusted { color: var(--green); font-weight: 800; }
.alt-bottom .distance { color: #9cafbd; overflow: hidden; text-overflow: ellipsis; }
.alt-actions { width: 116px; display: grid; grid-template-columns: minmax(0,1fr) 42px; align-items: center; gap: 4px; justify-self: end; }
.alt-decision { min-width: 0; overflow: hidden; text-overflow: ellipsis; border-radius: 7px; padding: 4px 3px; background: #17314f; color: #b8d8ff; font-size: 8.8px; line-height: 1.05; font-weight: 800; text-align: center; }
.alt-view { width: 42px; border: 1px solid #32414c; border-radius: 8px; background: #17222b; color: white; padding: 5px 0; }
.analysis-card { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, .78fr) minmax(720px, 1.22fr); overflow: hidden; }
.analysis-context, .analysis-decision { min-width: 0; min-height: 0; overflow: hidden; }
.analysis-context { display: grid; grid-template-rows: auto 1fr; border-right: 1px solid var(--line); }
.analysis-decision { display: grid; grid-template-rows: auto minmax(0, 1fr); padding-bottom: 5px; }
.analysis-subheading { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 11px 2px; }
.market-grid { height: 100%; min-height: 0; display: grid; grid-template-columns: repeat(4,1fr); padding: 2px 8px 4px; }
.market-cell { display: grid; align-content: center; gap: 4px; padding: 2px 9px; border-right: 1px solid var(--line-soft); }
.market-cell:last-child { border-right: 0; }
.market-cell span { color: var(--muted); font-size: 10px; }
.market-cell strong { font-size: 13.5px; }

.decision-topline { padding: 1px 13px 7px; display: grid; grid-template-columns: auto auto minmax(0,1fr); align-items: center; gap: 7px 10px; }
.analysis-decision .analysis-subheading h2 { font-size: 16px; }
.analysis-decision .micro-label { font-size: 10.5px; }
.decision-headline { min-width: 0; font-size: 11.8px; line-height: 1.32; white-space: normal; overflow: visible; }
.decision-bottom-grid { min-height: 0; display: grid; grid-template-columns: .95fr .95fr 1.18fr; gap: 18px; padding: 2px 13px 6px; overflow: visible; align-content: start; }
.decision-bottom-grid > div { min-width: 0; }
.decision-columns { display: contents; }
.compact-list { list-style: none; padding: 0; margin: 4px 0 0; color: #b7c6d1; font-size: 11px; line-height: 1.3; }
.compact-list li { margin: 1px 0; }
.compact-list li::before { content: "✓ "; color: var(--blue); }
#riskList li::before { content: "• "; color: var(--amber); }
.trigger-line { padding: 0; display: grid; gap: 5px; align-content: start; font-size: 10.8px; white-space: normal; overflow: visible; }
.trigger-line strong { color: #d6e0e7; font-weight: 600; line-height: 1.32; }

.decision-simple-grid { min-height: 0; height: 100%; display: grid; grid-template-columns: auto minmax(0,1.35fr) minmax(230px,.95fr); gap: 16px; align-items: center; padding: 4px 14px 10px; }
.decision-action-block, .decision-why-block, .decision-trigger-block { min-width: 0; display: grid; gap: 6px; align-content: center; }
.decision-action-block { justify-items: start; }
.decision-action-block .badge { font-size: 12px; padding: 9px 13px; }
.decision-why-block, .decision-trigger-block { border-left: 1px solid var(--line-soft); padding-left: 15px; }
.decision-headline { min-width: 0; font-size: 12.8px; line-height: 1.35; white-space: normal; overflow: visible; color: #f2f6f8; }
.decision-trigger-block strong { color: #d6e0e7; font-size: 12px; line-height: 1.35; font-weight: 650; white-space: normal; }
.analysis-decision .micro-label { font-size: 10.5px; }

.opportunities-modal-card { width: min(1240px, 96vw); height: min(720px, 90vh); overflow: hidden; display: flex; flex-direction: column; }
.opportunities-modal-content { flex: 1 1 auto; min-height: 0; padding: 10px 12px 12px; }
.opportunities-table-wrap { height: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: #0d141a; }
.opportunities-table { width: 100%; border-collapse: collapse; min-width: 1080px; font-size: 11px; }
.opportunities-table thead { position: sticky; top: 0; z-index: 1; }
.opportunities-table th { background: #172028; color: #9fb4c5; text-align: left; font-weight: 600; padding: 8px 9px; border-bottom: 1px solid #34424d; white-space: nowrap; }
.opportunities-table td { padding: 8px 9px; border-bottom: 1px solid #1d2931; white-space: nowrap; }
.opportunities-table tbody tr:hover { background: #111c23; }
.opportunities-table .rank-col { color: #b9d7f3; font-weight: 800; }
.opportunities-table .apr-col { color: var(--yellow); font-weight: 800; }
.opportunities-table .adjusted-col { color: var(--green); font-weight: 800; }
.table-decision { display: inline-block; border-radius: 7px; padding: 5px 7px; background: #17314f; color: #b8d8ff; font-size: 9px; font-weight: 800; }
.table-view { border: 1px solid #32414c; border-radius: 8px; background: #17222b; color: white; padding: 5px 12px; }
.empty-table { text-align: center; color: var(--muted); padding: 28px !important; }

.activity-section { grid-column: 1 / -1; min-height: 0; align-self: stretch; display: flex; flex-direction: column; overflow: hidden; }
.activity-heading { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 0 3px; }
.activity-table-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.activity-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 11px; }
.activity-table th { background: #172028; color: #8fa8bb; font-weight: 500; text-align: left; padding: 4px 8px; border-bottom: 1px solid #34424d; line-height: 1.2; }
.activity-table td { padding: 4px 8px; border-bottom: 1px solid #17232b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.activity-table tbody tr { height: 23px; }
.activity-table th:nth-child(1), .activity-table td:nth-child(1) { width: 76px; }
.activity-table th:nth-child(2), .activity-table td:nth-child(2) { width: 260px; }
.activity-table th:nth-child(4), .activity-table td:nth-child(4) { width: 105px; text-align: right; }
.loading-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(5,9,12,.88); backdrop-filter: blur(4px); }
.loading-overlay.hidden { display: none; }
.loading-card { display: grid; justify-items: center; gap: 10px; color: #d8e4ec; }
.loading-card span { color: var(--muted); font-size: 12px; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #263640; border-top-color: var(--yellow); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.7); backdrop-filter: blur(5px); }
.modal-backdrop.hidden { display: none; }
.modal-card { width: min(1040px, 96vw); max-height: 90vh; overflow: auto; border: 1px solid #334550; border-radius: 16px; background: #0b1116; box-shadow: 0 22px 70px rgba(0,0,0,.55); }
.modal-header { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; background: #0d151b; border-bottom: 1px solid var(--line); }
.modal-header h2 { font-size: 22px; }
.modal-content { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
.detail-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: #10181e; min-width: 0; }
.detail-card h3 { margin: 0 0 10px; color: var(--yellow); font-size: 14px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.detail-kv { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #1f2b33; padding-bottom: 4px; font-size: 11px; }
.detail-kv span { color: var(--muted); }
.detail-kv strong { text-align: right; }
.detail-list { margin: 0; padding-left: 18px; color: #c7d4de; font-size: 11px; line-height: 1.5; }
.detail-card.full { grid-column: 1 / -1; }
.toast { position: fixed; right: 18px; top: 72px; bottom: auto; z-index: 200; max-width: 380px; border: 1px solid #3c4b56; border-radius: 10px; background: #152029; color: white; padding: 10px 14px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.toast.hidden { display: none; }

@media (max-width: 1000px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  .app-shell { height: auto; min-height: 100vh; overflow: visible; }
  .topbar { height: auto; min-height: 72px; grid-template-columns: 1fr auto; padding: 8px 0; }
  .strategy-wrap { order: 3; grid-column: 1 / -1; }
  .strategy-select { width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .analysis-card { grid-column: 1; grid-template-columns: 1fr; }
  .analysis-context { border-right: 0; border-bottom: 1px solid var(--line); }
  .activity-section { grid-column: 1; }
  .market-grid { min-height: 150px; }
}
@media (max-width: 650px) {
  .app-shell { padding: 0 9px 9px; }
  .brand { font-size: 19px; }
  .btc-price { font-size: 20px; }
  .updated { display: none; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .market-grid { grid-template-columns: 1fr 1fr; }
  .market-cell:nth-child(2) { border-right: 0; }
  .decision-bottom-grid, .decision-simple-grid, .modal-content, .detail-grid { grid-template-columns: 1fr; }
  .action-strip { grid-template-columns: 1fr; align-items: stretch; }
  .action-detail-button { width: 100%; }
  .decision-why-block, .decision-trigger-block { border-left: 0; padding-left: 0; }
  .detail-card.full { grid-column: auto; }
  .activity-table th:nth-child(2), .activity-table td:nth-child(2) { width: 180px; }
  .activity-table th:nth-child(4), .activity-table td:nth-child(4) { display: none; }
  .alt-decision { display: none; }
}

/* Entry conditions detail — incremental decision-engine extension. */
.conditions-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; background: #0c141a; }
.conditions-table { width: 100%; border-collapse: collapse; min-width: 880px; font-size: 10.5px; }
.conditions-table th { padding: 7px 8px; text-align: left; color: #9fb4c5; background: #172028; border-bottom: 1px solid #34424d; white-space: nowrap; }
.conditions-table td { padding: 7px 8px; vertical-align: top; border-bottom: 1px solid #1d2931; }
.conditions-table td strong { display: block; color: #edf4f8; font-size: 10.7px; }
.conditions-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.condition-role, .condition-status { display: inline-block; border-radius: 999px; padding: 3px 6px; font-size: 8.5px; line-height: 1; font-weight: 850; white-space: nowrap; }
.condition-role.necesaria { background: #183650; color: #b8dcff; }
.condition-role.favorable { background: #183a2b; color: #b9f0cf; }
.condition-role.invalidacion { background: #442126; color: #ffbdc5; }
.condition-status.met { background: #163b29; color: #aee9c7; }
.condition-status.pending { background: #4b3c15; color: #ffe29a; }
.condition-status.invalid { background: #4a2025; color: #ffb8c1; }
.condition-status.nodata { background: #28323a; color: #b5c3cc; }
.method-note { margin-top: 9px; color: #8fa2af; font-size: 9.5px; line-height: 1.42; }
.scenarios-table td:last-child { font-weight: 850; }
.scenario-gain { color: #9be2b9; }
.scenario-loss { color: #ff9fab; }