/* bet-calculator-view.css — visual + tooltips + mesa enfrentada + mesa de ejemplo + presets 2 filas */
.bcv{
  --card-bg: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.12);
  --ink: #e7f1f7;
  --muted:#9fb0c0;
  --accent: var(--primary, #00bcd4);
  --ok:#19c37d;
  --warn:#f5a524;
  --bad:#ef4444;
  color: var(--ink);
}

.bcv-header h2{ margin:0 0 .25rem; font-weight:800; font-size: clamp(1.2rem,1vw + 1rem,1.6rem); }
.bcv-header p{ margin:0 0 1rem; color:var(--muted); }

.bcv-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 980px){ .bcv-grid{ grid-template-columns:1fr; } }

.bcv-card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
}
.bcv-card h3{ margin:0 0 .75rem; font-weight:800; font-size:1.05rem; }

.bcv-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem; margin-bottom:.75rem; }
.bcv-row.bcv-seg{ grid-template-columns: 1fr 1fr; }
@media (max-width: 780px){ .bcv-row{ grid-template-columns:1fr; } .bcv-row.bcv-seg{ grid-template-columns:1fr; } }

.bcv-input label{ display:flex; align-items:center; gap:.35rem; margin:0 0 .35rem; color:var(--muted); font-weight:600; }
.bcv-input input, .bcv-input select{
  width:100%; background:#1f2731; color:var(--ink);
  border:1px solid var(--border); border-radius:8px; padding:.7rem .8rem;
}
.bcv-input.full{ grid-column:1 / -1; }
.readout{ margin-top:.2rem; color:var(--muted); font-size:.9rem; }

.bcv-actions{ display:flex; gap:.5rem; }
.bcv-btn{
  padding:.65rem .9rem; border:1px solid var(--border); background:#263241; color:var(--ink);
  border-radius:8px; font-weight:800; cursor:pointer;
}
.bcv-btn:hover{ filter:brightness(1.08); }

.seg{ display:flex; flex-direction:column; gap:.35rem; }
.seg-label{ color:var(--muted); font-weight:700; display:flex; align-items:center; gap:.35rem; }
.seg-group{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:stretch; }
.seg.wide{ grid-column:1 / -1; }

.seg-btn{
  border:1px solid var(--border); background:#19222d; color:var(--ink);
  padding:.55rem .7rem; border-radius:10px; font-weight:800; cursor:pointer; min-width:110px; text-align:center;
}
.seg-btn small{ color:var(--muted); font-weight:700; }
.seg-btn.active{ outline:2px solid var(--accent); background:#203341; }

.bcv-preset-grid{
  display:grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); gap:.5rem; align-items:center;
}
.bcv-preset-grid > span{ grid-column: 1 / -1; color:var(--muted); font-weight:700; }
.preset{
  border:1px solid var(--border); background:#223141; color:var(--ink);
  padding:.45rem .6rem; border-radius:8px; font-weight:800; cursor:pointer; text-align:center;
}
.preset:hover{ filter:brightness(1.1); }

.bcv-hero{
  display:flex; gap:1rem; align-items:stretch;
  background:linear-gradient(180deg, rgba(0,188,212,.10), transparent 60%);
  border:1px solid var(--border); border-radius:12px; padding:1rem;
}
.hero-left{ flex:1; display:flex; flex-direction:column; gap:.4rem; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .8rem; font-weight:900; border-radius:999px; background:#213142;
  border:1px solid var(--border); width:fit-content; min-width:160px; text-transform:uppercase;
}
.delta{
  font-weight:900; font-size:1.15rem;
  padding:.3rem .55rem; border-radius:8px; width:fit-content; border:1px solid var(--border);
}
.delta.ok{ background: rgba(25,195,125,.15); border-color: rgba(25,195,125,.4); }
.delta.warn{ background: rgba(245,165,36,.15); border-color: rgba(245,165,36,.4); }
.delta.bad{ background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); }
.sub{ color:var(--muted); }

.hero-right{ flex:1; display:flex; flex-direction:column; gap:.75rem; }
.meter{ display:flex; flex-direction:column; gap:.3rem; }
.meter-label{ display:flex; justify-content:space-between; color:var(--muted); font-weight:700; }
.bar{ width:100%; height:12px; background:#0f1720; border:1px solid var(--border); border-radius:999px; overflow:hidden; }
.bar > span{ display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--accent), rgba(0,188,212,.15)); }

.bcv-mini-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.75rem; margin-top:.75rem;
}
@media (max-width: 980px){ .bcv-mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .bcv-mini-grid{ grid-template-columns: 1fr; } }

.mini{
  background: rgba(255,255,255,0.05);
  border:1px solid var(--border);
  border-radius:10px; padding:.7rem;
}
.mini-label{ color:var(--muted); font-weight:700; margin-bottom:.2rem; display:flex; align-items:center; gap:.3rem; }
.mini-value{ font-weight:900; font-size:1.15rem; }
.mini-sub{ color:var(--muted); font-size:.9rem; }

.divider{ height:1px; background:var(--border); margin:.85rem 0; }
.bcv-r2 h4{ margin:.15rem 0 .5rem; font-weight:900; }

.bcv-explain{
  margin-top: .9rem;
  background: rgba(0,188,212,0.08);
  border-left: 4px solid var(--accent);
  padding: .75rem .9rem;
  border-radius: 0 10px 10px 0;
  color:#e7f1f7;
  font-size:.95rem;
}
.bcv-explain h4{ margin:.1rem 0 .4rem; font-weight:900; }
.bcv-explain code{ background:#0f1720; border:1px solid var(--border); padding:.05rem .3rem; border-radius:6px; }

.tip{ border-bottom:1px dashed var(--muted); cursor:help; position:relative; }
.tip:hover::after{
  content: attr(data-tip);
  position:absolute; left:0; top:120%;
  background:#101821; color:#dfe9f0; border:1px solid var(--border);
  padding:.5rem .6rem; border-radius:8px; width:280px; z-index:50; font-size:.85rem; line-height:1.2;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* "?" chiquito en cada campo */
.help{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:999px; font-weight:900; font-size:.8rem;
  background:#213142; color:#cfe5f2; border:1px solid var(--border); cursor:help; position:relative;
}
.help:hover::after{
  content: attr(data-tip);
  position:absolute; left:0; top:120%;
  background:#101821; color:#dfe9f0; border:1px solid var(--border);
  padding:.45rem .55rem; border-radius:8px; width:270px; z-index:50; font-size:.85rem; line-height:1.2;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Mesa mini (viva) */
.bcv-table{
  margin-top: .9rem;
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.bcv-table .table-head{
  display:grid; grid-template-columns: 1fr auto 1fr; gap:.5rem;
  background:#15202b; border-bottom:1px solid var(--border);
  padding:.5rem .75rem; color:#cfe5f2; font-weight:800;
}
.bcv-table .table-head .mid{ opacity:.9; font-weight:700; }
.bcv-table .felt{
  background: radial-gradient(circle at center, #15303f 0%, #0f1720 60%);
  padding: .8rem; min-height: 170px; position: relative;
}
.seats{ position:absolute; left:0; right:0; top:36px; display:flex; justify-content:space-between; padding:0 .6rem; pointer-events:none; }
.seat{ background: rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; padding:.4rem .5rem; width:160px; text-align:center; }
.seat-title{ font-weight:900; }
.seat-badge{
  display:inline-block; margin:.25rem 0; padding:.1rem .4rem; border-radius:999px; font-weight:800; font-size:.8rem;
  background:#203341; border:1px solid var(--border);
}
.seat-stack{ color:#dbe7f2; font-size:.9rem; }

.bcv-table .pot{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  background:rgba(0,188,212,.12); border:1px solid var(--border); padding:.25rem .5rem;
  border-radius:999px; font-weight:800; font-size:.9rem;
}
.bcv-table .branch{ display:flex; flex-direction:column; gap:.4rem; margin-top: 88px; }
.bcv-table .step{ background: rgba(255,255,255,.05); border:1px solid var(--border); border-radius:10px; padding:.5rem .6rem; }
.bcv-table .line{ font-size:.95rem; line-height:1.25; }

/* Mesa mini de ejemplo (fija) */
.bcv-example{ margin-top: .9rem; }
.bcv-example h4{ margin:.15rem 0 .5rem; font-weight:900; }
.bcv-table.tiny .felt{ min-height: 120px; }
.bcv-table.tiny .line{ font-size:.9rem; }

/* Mini mesa compacta */
.bcv-table-mini{
  margin-top:.9rem;
  border:1px solid var(--border-color, var(--border));
  border-radius:12px;
  overflow:hidden;
}
.bcv-table-mini .table-head{
  display:grid; grid-template-columns:1fr auto 1fr; gap:.5rem;
  background:#15202b;
  border-bottom:1px solid var(--border-color, var(--border));
  padding:.5rem .75rem; color:#cfe5f2; font-weight:800;
}
.bcv-table-mini .table-head .mid{ opacity:.9; font-weight:700; }
.bcv-table-mini .felt{
  background: radial-gradient(circle at center, #15303f 0%, #0f1720 60%);
  padding:.8rem; min-height: 140px; position: relative;
}
.bcv-table-mini .pot{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  background:rgba(0,188,212,.12); border:1px solid var(--border-color, var(--border));
  padding:.25rem .5rem; border-radius:999px; font-weight:800; font-size:.9rem;
}
.bcv-table-mini .branch{ display:flex; flex-direction:column; gap:.5rem; margin-top: 36px; }
.bcv-table-mini .step{
  background: rgba(255,255,255,.05);
  border:1px solid var(--border-color, var(--border));
  border-radius:10px; padding:.55rem .65rem;
}
.bcv-table-mini .line{ font-size:.95rem; line-height:1.25; }