/* ============================================================
   smgr · css/pages/viz_dificultad_backtest.css — ¿SE CUMPLE EL ANÁLISIS DEL
   CALENDARIO? (visualizacion_dificultad_backtest.php).

   Una sola tarjeta capturable de 1.020 px con tres bloques en fila: el número
   grande manda y el texto explica. El ancho es fijo y el .bt-scaler la reduce
   con transform para que quepa en móvil sin scroll — la escala vive en la
   tarjeta con transformOrigin top-left, así html2canvas la clona a tamaño
   natural (mismo truco que la de dificultad a priori).
   ============================================================ */

.bt-scaler { overflow: hidden; margin-bottom: var(--sp-5); }

.bt-card {
  font-family: 'Inter', sans-serif;
  width: 1020px; background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .1);
}
.bt-card * { box-sizing: border-box; }

/* ---------- Cabecera ---------- */
.bt-head {
  background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%);
  color: #fff; padding: 13px 18px; display: flex; align-items: center; gap: 13px;
  border-bottom: 3px solid #d4a76a;
}
/* logo.png es 91×69: solo se fija la altura, el ancho sale del ratio. */
.bt-logo { height: 34px; width: auto; flex: 0 0 auto; display: block; }
.bt-head .kick { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cbd5e0; }
.bt-head .title { font-size: 23px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; margin-top: 2px; }
.bt-head .sub { font-size: 11.5px; opacity: .85; margin-top: 3px; font-weight: 500; }

/* ---------- Los tres bloques ---------- */
.bt-cols { display: flex; align-items: stretch; }
.bt-blk {
  flex: 1 1 0; padding: 18px 16px 16px; text-align: center;
  border-right: 1px solid #e2e8f0;
}
.bt-blk:last-child { border-right: 0; }
/* El tercer bloque es la conclusión: fondo tenue para que se lea como remate. */
.bt-blk--clave { background: #f7fafc; }

.bt-blk h3 {
  margin: 0 0 12px; font-size: 11px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: #4a5568;
}
.bt-vs { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.bt-vs--solo { gap: 0; }
.bt-vs__sep { font-size: 12px; font-weight: 700; color: #a0aec0; }
.bt-num {
  font-size: 46px; font-weight: 900; letter-spacing: -2px; line-height: 1;
  color: #2f855a; font-variant-numeric: tabular-nums;
}
.bt-num--mal { color: #c53030; }
.bt-num--cero { color: #2d3748; font-size: 52px; }

.bt-lbl { margin: 11px 0 0; font-size: 11.5px; line-height: 1.45; color: #4a5568; }
.bt-lbl strong { color: #1a202c; font-weight: 700; }
.bt-foot {
  margin: 10px 0 0; padding-top: 9px; border-top: 1px dotted #cbd5e0;
  font-size: 11px; line-height: 1.5; color: #718096;
}
.bt-foot strong { color: #2d3748; }

/* ---------- Franja del control ---------- */
.bt-nota-cal {
  background: #edf2f7; border-top: 1px solid #cbd5e0; border-bottom: 1px solid #cbd5e0;
  padding: 10px 18px; font-size: 11.5px; line-height: 1.5; color: #4a5568; text-align: center;
}
.bt-nota-cal strong { color: #1a202c; font-weight: 700; }

/* ---------- Los dos casos con nombre ----------
   Un agregado de 42 temporadas no se recuerda; un equipo sí. Dos tarjetas, una
   por cada mitad del mensaje: el que lo pasó mal y el que lo desmintió. */
.bt-casos { display: flex; align-items: stretch; gap: 0; border-top: 1px solid #e2e8f0; }
.bt-casos__tit {
  flex: 0 0 92px; padding: 12px 14px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #a0aec0; line-height: 1.5; border-right: 1px solid #e2e8f0;
  display: flex; flex-direction: column; justify-content: center;
}
.bt-casos__tit strong { color: #4a5568; font-weight: 800; }
.bt-caso {
  flex: 1 1 0; display: flex; align-items: center; gap: 11px;
  padding: 12px 16px; border-right: 1px solid #e2e8f0;
}
.bt-caso:last-child { border-right: 0; }
.bt-caso img { width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto; }
.bt-caso__eq { display: block; font-size: 13px; font-weight: 800; color: #1a202c; letter-spacing: .02em; }
.bt-caso__txt { display: block; font-size: 11.5px; line-height: 1.45; color: #4a5568; margin-top: 1px; }
.bt-caso__txt strong { color: #2d3748; font-weight: 700; }
.bt-caso--mal  { background: #fff5f5; }
.bt-caso--bien { background: #f0fff4; }
.bt-caso--mal  .bt-caso__hit { color: #c53030; font-weight: 800; }
.bt-caso--bien .bt-caso__hit { color: #2f855a; font-weight: 800; }

/* ---------- Pie ---------- */
.bt-foot-band {
  background: #2d3748; color: rgba(255, 255, 255, .8);
  padding: 8px 18px; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; font-size: 9.5px; font-weight: 600;
}
.bt-foot-band .brand { color: #fff; }

/* ---------- Fuera de la tarjeta ---------- */
.bt-metodo { margin-top: var(--sp-5); }
.bt-metodo > summary {
  font-size: 14px; font-weight: 600; cursor: pointer; padding: 10px 0; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.bt-metodo > summary::-webkit-details-marker { display: none; }
.bt-metodo > summary::before {
  content: ''; width: 8px; height: 8px; flex: 0 0 8px;
  border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep);
  transform: rotate(-45deg); transition: transform .15s ease;
}
.bt-metodo[open] > summary::before { transform: rotate(45deg); }
.bt-metodo__body p { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 80ch; }
.bt-metodo__body strong { color: var(--ink); font-weight: 600; }
.bt-metodo__body code {
  font-size: 13px; background: var(--zebra); padding: 1px 5px; border-radius: 4px;
}
.bt-link { margin: var(--sp-4) 0 0; }