/* Estilos de SET UP, estadísticas y calendario (Fase 2). */

/* ---------- SET UP ---------- */
.setup-title { width: 100%; font-size: 18px; font-weight: 700; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; margin-bottom: 10px; background: transparent; }
.setup-title:hover, .setup-title:focus { border-color: var(--border); background: var(--surface); }
.table-scroll { overflow-x: auto; }
.setup-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 680px; }
.setup-table th, .setup-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: middle; }
.setup-table th { background: var(--surface-2); font-weight: 600; }
.setup-table tr.checked td { background: var(--checked-row); }
.setup-table.compact tr { cursor: pointer; }
.num-col { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.setup-table .num-col:first-child { width: 48px; text-align: center !important; font-weight: 700; color: var(--muted); }
.check-col { width: 90px; text-align: center !important; }
.check-col input { width: 20px; height: 20px; cursor: pointer; accent-color: var(--pos); }
.row-actions { white-space: nowrap; text-align: right; }
.input.num { text-align: right; }
.pct-input { width: 80px; }
.step-text { width: 100%; resize: vertical; min-height: 38px; line-height: 1.35; }
.imp-select { width: 100%; font-weight: 600; }
.imp-mandatory { background: var(--imp-mandatory-bg) !important; color: var(--imp-mandatory-fg); }
.imp-optional { background: var(--imp-optional-bg) !important; color: var(--imp-optional-fg); }
.imp-suggested { background: var(--imp-suggested-bg) !important; color: var(--imp-suggested-fg); }
.imp-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.total-pct .warn { color: var(--warn-fg); font-weight: 600; }
.setup-bottom { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.setup-controls { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; justify-content: center; }
.threshold { display: flex; align-items: center; gap: 8px; }
.th-input { width: 70px; }
.score-status { display: flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: var(--radius); min-width: 230px; }
.score-status.ok { background: var(--tp-bg); color: var(--tp-fg); }
.score-status.ko { background: var(--sl-bg); color: var(--sl-fg); }
.score-num { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.score-label { font-weight: 700; font-size: 15px; }
.score-status.ok .score-label::before { content: "✓ "; }
.score-status.ko .score-label::before { content: "✕ "; }
.score-min { font-size: 12px; opacity: .8; }
.setup-modal .score-status { margin-top: 14px; }
.plan-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 20px; }
.plan-card { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--color-foco); border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.plan-card.important { border-left-color: var(--danger); background: var(--important-bg); }
.plan-head { display: flex; align-items: center; gap: 6px; }
.plan-title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; }
.plan-text { border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; resize: none; min-height: 60px; line-height: 1.45; background: transparent; overflow: hidden; }
.plan-title:hover, .plan-title:focus, .plan-text:hover, .plan-text:focus { border-color: var(--border); background: var(--surface); }
.plan-add { align-items: center; justify-content: center; border-style: dashed; border-left-width: 1px; color: var(--muted); cursor: pointer; min-height: 120px; font: inherit; font-weight: 600; }
.plan-add:hover { background: var(--surface-2); color: var(--text); }
.score-cell { display: block; width: 100%; height: 57px; border: 0; background: transparent; cursor: pointer; font-weight: 700; color: var(--muted); font-size: 13px; }
.score-cell:hover { background: var(--color-seleccion-hover); }
.score-cell.ok { color: var(--tp-fg); background: var(--tp-bg); }
.score-cell.ko { color: var(--sl-fg); background: var(--sl-bg); }
.score-chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.score-chip.ok { background: var(--tp-bg); color: var(--tp-fg); }
.score-chip.ko { background: var(--sl-bg); color: var(--sl-fg); }

/* ---------- estadísticas ---------- */
.stats, .calendar { max-width: 1200px; }
.stats .toolbar, .calendar .toolbar { margin-bottom: 12px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg-btn { border: 0; background: transparent; padding: 7px 16px; cursor: pointer; font-weight: 600; color: var(--muted); }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.on { background: var(--color-acento); color: var(--color-sobre-acento); }
.filters-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; padding: 12px 16px; }
.filters-bar label > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.filters-bar .input { min-width: 140px; }
.filters-bar .range { display: flex; align-items: center; gap: 4px; }
.input.small { width: 64px; min-width: 0 !important; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-value { font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.kpi-value.outcomes { display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; margin-top: 8px; }
.pill-TP, .pill-SL, .pill-BE { display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 12px; }
.pill-TP { background: var(--tp-bg); color: var(--tp-fg); }
.pill-SL { background: var(--sl-bg); color: var(--sl-fg); }
.pill-BE { background: var(--be-bg); color: var(--be-fg); }
.chart-wrap { position: relative; width: 100%; min-height: 300px; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-wrap .gridline { stroke: var(--border); stroke-width: 1; }
.chart-wrap .zero { stroke: var(--chart-guide); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-wrap .axis { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-wrap .line { fill: none; stroke: var(--color-acento); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-wrap .area { fill: var(--color-acento); opacity: .08; }
.chart-wrap .dot { fill: var(--color-acento); stroke: var(--surface); stroke-width: 2; }
.chart-wrap .cross { stroke: var(--chart-guide); stroke-width: 1; }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 8px 10px; font-size: 12px; min-width: 170px; z-index: 5; }
.tip-head { font-weight: 700; margin-bottom: 2px; }

/* ---------- calendario ---------- */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .btn { font-size: 16px; }
.cal-month { min-width: 190px; text-align: center; }
.cal-month-total { display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; }
.cal-month-total strong { font-size: 20px; }
.cal { display: grid; gap: 6px; overflow-x: auto; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)) minmax(100px, 1.1fr); gap: 6px; min-width: 720px; }
.cal-labels div { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; text-transform: capitalize; padding: 2px 0; }
.cal-day, .cal-week { min-height: 86px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); padding: 6px 8px; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 2px; }
button.cal-day { cursor: pointer; }
button.cal-day:hover { box-shadow: 0 0 0 2px var(--color-foco) inset; }
.cal-day.out { background: transparent; border-style: dashed; opacity: .45; }
.cal-day.today .cal-num { background: var(--color-acento); color: var(--color-sobre-acento); border-radius: 10px; padding: 0 7px; align-self: flex-start; }
.cal-num { font-size: 12px; font-weight: 700; color: var(--muted); }
.cal-val { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; margin-top: auto; }
.cal-count { font-size: 11px; color: var(--muted); }
.cal-week { background: var(--surface-2); }
.cal-day.pos, .cal-week.pos, .cal-month-total.pos { background: var(--tp-bg); border-color: var(--tp-border); }
.cal-day.pos .cal-val, .cal-week.pos .cal-val, .cal-month-total.pos strong { color: var(--tp-fg); }
.cal-day.neg, .cal-week.neg, .cal-month-total.neg { background: var(--sl-bg); border-color: var(--sl-border); }
.cal-day.neg .cal-val, .cal-week.neg .cal-val, .cal-month-total.neg strong { color: var(--sl-fg); }
.cal-day.flat, .cal-week.flat, .cal-month-total.flat { background: var(--be-bg); border-color: var(--be-border); }
.cal-week-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.day-list { display: grid; gap: 12px; }
.day-trade { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.day-trade-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.day-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.day-img { margin: 0; }
.day-img img { width: 220px; max-width: 100%; height: 130px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); cursor: zoom-in; display: block; }
.day-img figcaption { font-size: 11px; color: var(--muted); margin-top: 3px; }
.day-notes { margin-top: 10px; font-size: 13px; }
.day-notes p { margin: 2px 0 0; }

/* ---------- calculadora de lotes y contratos (SETUP) ---------- */
.calc { margin-top: 6px; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 10px; }
.calc-field > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.calc-field .input, .calc-field select { width: 100%; }
.calc-inline { display: flex; gap: 6px; }
.calc-inline .input:first-child { flex: 1; min-width: 0; }
.calc-inline > select.input { width: auto; flex: 0 0 92px; }
.calc-specs { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.calc-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.calc-badge.ok { background: var(--tp-bg); color: var(--tp-fg); }
.calc-badge.check { background: var(--warn-bg); color: var(--warn-fg); }
.calc-warn-rate { font-size: 12px; color: var(--warn-fg); background: var(--warn-bg); border: 1px solid var(--warn-border); border-radius: 8px; padding: 6px 10px; margin: 0 0 12px; }
.calc-out { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.calc-main { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.calc-qty { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--strong); }
.calc-unit { font-size: 15px; color: var(--muted); font-weight: 600; }
.calc-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; }
.calc-row strong { font-variant-numeric: tabular-nums; }
.calc-alert { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--sl-bg); color: var(--sl-fg); font-size: 13px; font-weight: 600; }
.calc-saved { margin: 10px 0 0; }