/* GRID · modo de métricas: las tres tarjetas (Simples · Ampliadas · Mis métricas), la lista «Este es mi equipo» y el aviso de la mesa
   cuando «Mis métricas» no tiene equipo marcado. Las tres tarjetas del mismo tamaño; la elegida toma el tinte ENTERO (sin franja); radio ≤ 10 px.
   Lo pinta tablero.js (asistente, Ajustes de la jornada y del torneo) y mesa.js (el aviso). */
.mt-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mt-op { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 148px; padding: 14px;
  text-align: left; font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: 10px; cursor: pointer; }
.mt-op:hover:not(:disabled) { border-color: var(--tinta-3); }
.mt-op:focus-visible, .mt-eq:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.mt-op[aria-checked="true"], .mt-eq[aria-checked="true"] { background: var(--marca-suave); border-color: var(--marca); }
.mt-op:disabled { cursor: not-allowed; }
.mt-op:disabled:not([aria-checked="true"]) { opacity: .55; }
.mt-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--alzado); color: var(--tinta); }
.mt-op[aria-checked="true"] .mt-ico { background: var(--papel); color: var(--marca-osc); }
.mt-cue { display: block; min-width: 0; }
.mt-cue b { display: block; font-size: 15px; line-height: 1.25; }
.mt-tx { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--tinta-2); }
.mt-ok { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 6px;
  border: 2px solid var(--linea-fuerte); color: transparent; }
.mt-op[aria-checked="true"] .mt-ok { background: var(--marca); border-color: var(--marca); color: #fff; }
.mt-ok svg { width: 12px; height: 12px; }

/* «¿Cuál es tu equipo?» · una fila por equipo, con su interruptor «Este es mi equipo»; solo uno queda prendido. */
.mt-eqs { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.mt-eqs-tit { margin: 0; font-size: 14px; font-weight: 700; color: var(--tinta); }
.mt-eqs .pista { margin: 0; }
.mt-eq { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; text-align: left; font: inherit; color: var(--tinta);
  background: var(--papel); border: 1px solid var(--linea-fuerte); border-radius: 10px; cursor: pointer; }
.mt-eq:hover:not(:disabled) { border-color: var(--tinta-3); }
.mt-eq:disabled { cursor: not-allowed; opacity: .6; }
.mt-eq .esc { flex: none; }
.mt-eqs .aviso { margin: 0; }
/* El interruptor dentro de la fila del asistente (un botón): sin el borde ni el fondo de los botones. */
.mt-sw-b { flex: none; min-height: 44px; padding: 0 4px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; font: inherit; color: var(--tinta-2); cursor: pointer; }
.mt-sw-b[aria-checked="true"] { color: var(--tinta); font-weight: 600; }
.mt-sw-b[aria-checked="true"] i { background: var(--marca); }
.mt-sw-b[aria-checked="true"] i::after { transform: translateX(14px); }
.mt-sw-b:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.mt-eq > b { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.mt-sw { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-2); }
.mt-sw i { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--linea-fuerte); transition: background .15s; }
.mt-sw i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 8px; background: #fff; transition: transform .15s; }
.mt-eq[aria-checked="true"] .mt-sw { color: var(--tinta); font-weight: 600; }
.mt-eq[aria-checked="true"] .mt-sw i { background: var(--marca); }
.mt-eq[aria-checked="true"] .mt-sw i::after { transform: translateX(14px); }
.mt-aviso { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .mt-sw i, .mt-sw i::after { transition: none; } }

/* Celular: las tres tarjetas en columna, cada una con el ícono a la izquierda. */
@media (max-width: 640px) {
  .mt-ops { grid-template-columns: 1fr; }
  .mt-op { flex-direction: row; align-items: center; gap: 12px; min-height: 104px; padding: 12px 40px 12px 12px; }
  .mt-ok { top: 50%; margin-top: -9px; }
  .mt-sw { font-size: 12px; gap: 6px; }
  .mt-sw > span { max-width: 70px; line-height: 1.15; text-align: right; }
}

/* La mesa de «Mis métricas» sin equipo marcado (o en un partido donde no juega): dice qué pasa y deja anotar solo el marcador. */
.mt-sin { display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; padding: 24px 16px; }
.mt-sin h3 { margin: 0; font-size: 18px; line-height: 1.3; color: var(--tinta); }
.mt-sin p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-2); }
.mt-sin-bts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.mt-sin-bts .btn { min-height: 44px; }
@media (max-width: 640px) { .mt-sin { padding: 16px 12px; } .mt-sin-bts .btn { flex: 1; } }