/* ============================================================
   smgr · css/pages/viz_clasicos_fechas.css — CUÁNDO SE JUEGA EL CLÁSICO.
   Trae su propia copia de la tarjeta (.da-card/.da-head/.da-foot) porque esta
   página no carga viz_dificultad_apriori.css, y añade el gráfico y su leyenda.
   ============================================================ */

.da-card { font-family: 'Inter', sans-serif; background: #fff; border-radius: 14px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.1); width: 1000px; }
.da-card * { box-sizing: border-box; }
.da-head { background: linear-gradient(135deg, #2c5282 0%, #2a4365 100%); color: #fff;
  padding: 11px 14px; display: flex; align-items: center; gap: 11px; border-bottom: 3px solid #d4a76a; }
.da-logo { height: 30px; width: auto; flex: 0 0 auto; display: block; }
.da-head .kick { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #cbd5e0; }
.da-head .title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; line-height: 1.15; margin-top: 2px; }
.da-head .sub { font-size: 11px; opacity: .85; margin-top: 2px; font-weight: 500; }
.da-foot { background: #2d3748; color: rgba(255,255,255,.82); padding: 7px 13px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 9.5px; font-weight: 600; }
.da-foot .brand { color: #fff; white-space: nowrap; }

.cf-scaler { overflow: hidden; margin-bottom: var(--sp-4); }
.cf-svg { display: block; width: 100%; height: auto; }

.cf-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 14px 10px;
  font-size: 11px; font-weight: 600; color: #4a5568; border-top: 1px solid #edf2f7; }
.cf-leg span { display: inline-flex; align-items: center; gap: 6px; }
.cf-leg .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cf-leg .dot.ida { background: #131C2E; }
.cf-leg .dot.vuelta { background: #C07C1D; }
.cf-leg .dot.pascua { background: #805ad5; border-radius: 2px; width: 4px; height: 12px; }
.cf-leg .dot.nav { background: #fdd8d4; border-radius: 2px; width: 16px; height: 10px; }

.cf-datos { padding: var(--sp-5); margin-top: var(--sp-4); }
.cf-datos h2 { margin: 0 0 var(--sp-3); font-size: 19px; }
.cf-datos ul { margin: 0; padding-left: 20px; }
.cf-datos li { font-size: 14.5px; line-height: 1.65; color: var(--muted); margin-bottom: 10px; max-width: 80ch; }
.cf-datos strong { color: var(--ink); font-weight: 600; }