/* AMT Journal — Backtesting: lista de sesiones y detalle con registro rápido. Prefijo .bt- */

/* ============================================================
   Lista
   ============================================================ */
.bt-list-kpis { margin-bottom: 16px; }
.bt-empty { display: grid; place-items: center; min-height: 340px; }

.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; }

.bt-card { display: flex; flex-direction: column; cursor: pointer; transition: border-color .16s; }
.bt-card:hover { border-color: var(--line-strong); }
.bt-card.is-archived { opacity: .78; }
.bt-card.is-archived:hover { opacity: 1; }
.bt-card-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 12px 0 18px; }
.bt-card-head .pill { margin-top: 1px; }
.bt-card-head .btn { margin-top: -2px; }
.bt-card-name { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; }
.bt-card-name:focus-visible { border-radius: var(--r-xs); }
.bt-card-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-3); }
.bt-card-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 20px 18px 18px; }
.bt-card-pnl { margin-top: 7px; font-size: 24px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; white-space: nowrap; }
.bt-card-spark { flex: none; }
.bt-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; border-top: 1px solid var(--line-soft); }
.bt-card-stats > div { min-width: 0; padding: 12px 18px 14px; }
.bt-card-stats > div + div { border-left: 1px solid var(--line-soft); }
.bt-card-stats dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-card-stats dd { margin-top: 5px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }

.bt-archived { margin-top: 26px; }
.bt-archived-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 8px 0 6px; margin-left: -6px;
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  transition: background .14s, color .14s;
}
.bt-archived-toggle:hover { background: var(--hover); color: var(--text); }
.bt-archived-toggle svg { color: var(--text-3); transition: transform .2s var(--ease); }
.bt-archived-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.bt-archived .bt-grid { margin-top: 12px; }

/* ============================================================
   Detalle: cabecera y estructura
   ============================================================ */
.bt-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px;
  font-size: 12.5px; font-weight: 500; color: var(--text-3);
  transition: color .14s;
}
.bt-back:hover { color: var(--text); }
.bt-head { align-items: flex-start; }
.bt-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bt-notes {
  max-width: 720px; margin-top: 10px;
  font-size: 13px; line-height: 1.6; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bt-layout { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; align-items: start; }
.bt-aside { position: sticky; top: 20px; min-width: 0; max-height: calc(100dvh - var(--topbar-h) - 40px); overflow-y: auto; scrollbar-width: none; border-radius: var(--r-lg); }
.bt-aside::-webkit-scrollbar { display: none; }
.bt-stats { min-width: 0; }
.bt-stats-empty, .bt-locked { display: grid; place-items: center; }
.bt-stats-empty { min-height: 520px; }
.bt-locked { min-height: 300px; }
.bt-table { margin-top: 16px; }

/* ============================================================
   Registro rápido
   ============================================================ */
.bt-logger-risk { font-size: 12px; color: var(--text-3); }
.bt-logger-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 18px; }
.bt-logger-body > .err { margin-top: -8px; font-size: 12px; color: var(--neg); }
.bt-logger .err { font-size: 12px; color: var(--neg); }
.bt-row { display: grid; gap: 10px; }
.bt-row-date { grid-template-columns: minmax(0, 1fr) 112px; }
.bt-row-side { grid-template-columns: minmax(0, 1fr) 112px; }
.bt-col { display: contents; }
.bt-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 19px; }
.bt-label-start { justify-content: flex-start; }
.bt-weekday, .bt-optional { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.bt-time { padding: 0 10px; }

/* control unido: − valor + */
.bt-stepper {
  display: flex; align-items: stretch;
  height: 36px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--inset);
  transition: border-color .16s, box-shadow .16s;
}
.bt-stepper:hover { border-color: var(--line-strong); }
.bt-stepper:focus-within { border-color: rgba(61, 123, 255, .65); box-shadow: 0 0 0 3px rgba(61, 123, 255, .14); }
.bt-stepper > button {
  flex: none; width: 32px;
  display: grid; place-items: center;
  color: var(--text-3);
  transition: color .14s, background .14s;
}
.bt-stepper > button:hover { color: var(--text); background: var(--hover); }
.bt-stepper > button:first-child { border-right: 1px solid var(--line-soft); border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px); }
.bt-stepper > button:last-child { border-left: 1px solid var(--line-soft); border-radius: 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0; }
.bt-stepper > button:focus-visible { outline-offset: -2px; }
.bt-stepper > input {
  flex: 1; min-width: 0; width: 100%;
  padding: 0 6px;
  background: none; border: none;
  font-size: 13.5px; text-align: center;
}
.bt-stepper > input:focus { outline: none; }
.bt-stepper-date > input { padding: 0 4px 0 8px; text-align: left; }
.bt-stepper > input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.6); cursor: pointer; margin-left: 0; }

/* Long / Short a todo el ancho, a la altura de un campo */
.bt-logger [data-seg="bt-side"] { display: flex; height: 36px; border-color: var(--line); border-radius: var(--r-md); background: var(--inset); }
.bt-logger [data-seg="bt-side"] button { flex: 1; height: auto; font-size: 13px; }
.bt-logger [data-seg="bt-mode"] { padding: 1px; border-radius: var(--r-sm); }
.bt-logger [data-seg="bt-mode"] button { height: 19px; padding: 0 8px; border-radius: var(--r-xs); font-size: 11px; font-weight: 600; letter-spacing: .02em; }

/* resultado: tres botones grandes */
.bt-outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bt-out {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-height: 64px; padding: 11px 12px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255, 255, 255, .02);
  text-align: left;
  transition: border-color .14s, background .14s, color .14s;
}
.bt-out:hover { border-color: var(--line-strong); background: var(--hover); }
.bt-out-code { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2; }
.bt-out-code i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.bt-out-tp .bt-out-code i { background: var(--pos); }
.bt-out-sl .bt-out-code i { background: var(--neg); }
.bt-out-name { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.bt-out .bt-kbd { position: absolute; top: 8px; right: 8px; }
.bt-out.is-on { border-color: var(--line-strong); background: var(--active); }
.bt-out.is-on .bt-out-name { color: var(--text-2); }
.bt-out-tp.is-on { border-color: var(--pos-line); background: var(--pos-soft); color: var(--pos); }
.bt-out-sl.is-on { border-color: var(--neg-line); background: var(--neg-soft); color: var(--neg); }
.bt-out-tp.is-on .bt-out-name, .bt-out-sl.is-on .bt-out-name { color: currentColor; opacity: .78; }
.bt-out-tp.is-on .bt-kbd, .bt-out-sl.is-on .bt-kbd { border-color: currentColor; color: currentColor; opacity: .6; background: none; }
.bt-outcomes.is-attn .bt-out { animation: bt-attn .5s ease; }
@keyframes bt-attn {
  0%, 100% { border-color: var(--line); }
  35% { border-color: var(--neg-line); background: var(--neg-soft); }
}

.bt-size { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.bt-size .input:disabled { opacity: .5; cursor: not-allowed; }
.bt-preview { min-width: 96px; text-align: right; font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--text-3); white-space: nowrap; }
.bt-preview.pos { color: var(--pos); }
.bt-preview.neg { color: var(--neg); }
.bt-submit { height: 38px; margin-top: 2px; }

.bt-kbd {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: rgba(255, 255, 255, .03);
  font-family: var(--mono); font-size: 10px; font-weight: 500; line-height: 1;
  color: var(--text-3);
}
.btn-primary .bt-kbd { border-color: rgba(10, 10, 12, .2); background: rgba(10, 10, 12, .05); color: rgba(10, 10, 12, .6); }

.bt-recent { padding: 13px 18px 12px; border-top: 1px solid var(--line-soft); }
.bt-recent-list { margin-top: 6px; }
.bt-recent-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 62px 84px; align-items: center; gap: 8px;
  height: 32px; margin: 0 -8px; padding: 0 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.bt-recent-row .pill { height: 20px; padding: 0 6px; font-size: 11px; }

@keyframes bt-flash { from { background: rgba(61, 123, 255, .18); } to { background: transparent; } }
.bt-recent-row.is-flash, .bt-tbl tr.is-flash td { animation: bt-flash 1.8s ease-out both; }

/* ============================================================
   Estadísticas y tabla
   ============================================================ */
.bt-kpis.kpi-strip { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bt-kpis > .kpi { padding: 15px 16px 14px; }
.bt-kpis > .kpi:nth-child(4n + 1) { border-left: none; }
.bt-kpis > .kpi:nth-child(n + 5) { border-top: 1px solid var(--line-soft); }
.bt-kpis .kpi-value { font-size: 21px; }
.bt-kpis .kpi-row { margin-top: 9px; }

.bt-balance { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.bt-charts-2 { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; }
.bt-mix .chart-donut .chart-plot { gap: 14px 22px; }
.bt-mix { display: grid; align-items: center; min-height: 228px; }

.bt-tbl td.bt-note { max-width: 280px; }
.bt-tbl td.bt-note span { display: block; }
.bt-tbl td.bt-row-actions { width: 1%; padding-top: 6px; padding-bottom: 6px; text-align: right; }
.bt-tbl td.bt-row-actions .btn { color: var(--text-3); }
.bt-tbl td.bt-row-actions .btn:hover { color: var(--text); }
.bt-tbl td.bt-row-actions .btn[data-act="del-trade"]:hover { color: var(--neg); background: var(--neg-soft); }

/* ============================================================
   Responsive
   ============================================================ */
/* columna única: el registro deja de ser fijo y reparte sus campos en dos columnas */
@media (max-width: 1240px) {
  .bt-layout { grid-template-columns: minmax(0, 1fr); }
  .bt-aside { position: static; max-height: none; overflow: visible; }
  .bt-stats-empty { min-height: 320px; }
}
/* dos columnas en portátiles estrechos: KPI algo más compactos para importes largos */
@media (min-width: 1241px) and (max-width: 1400px) {
  .bt-kpis > .kpi { padding-left: 14px; padding-right: 14px; }
  .bt-kpis .kpi-value { font-size: 19px; }
}
@media (min-width: 641px) and (max-width: 1240px) {
  .bt-logger-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; align-items: start; }
  .bt-logger-body > .err { grid-column: 1 / -1; margin-top: -10px; }
  .bt-field-outcome { align-self: stretch; }
  .bt-field-outcome .bt-outcomes { flex: 1; }
  .bt-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .bt-submit { grid-column: 1 / -1; }
  .bt-recent-row { grid-template-columns: 40px minmax(0, 1fr) auto 80px 110px; }
}
@media (max-width: 920px) {
  .bt-kbd { display: none; }
  .bt-kpis.kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt-kpis > .kpi:nth-child(n + 5) { border-top: none; }
}
@media (max-width: 760px) {
  .bt-charts-2 { grid-template-columns: minmax(0, 1fr); }
  .bt-mix { min-height: 0; }
}
@media (max-width: 640px) {
  .bt-head .page-actions { width: 100%; }
  .bt-head .page-actions .btn { flex: 1; padding: 0 10px; }
  .bt-card-hero { padding-top: 16px; }
  .bt-card-meta { white-space: normal; }
  .bt-card-stats > div { padding: 11px 14px 13px; }
  .bt-kpis .kpi-value { font-size: 19px; }
  .bt-balance .cap { display: none; }
}