/* Golf360 · Jugar con amigos (app/js/multijugador.js): hojas, sala de espera, «Pasa el móvil», marcador y panel.
   Colores de asiento de la liga (liga.css --as1…--as4): ninguno se confunde con la estela roja ni con la zona amarilla;
   nunca solo por color (inicial y alias siempre). Objetivos táctiles de 44 px. MULTIJUGADOR-DIRECTO §9 y §15. */
:root{--mj-as1:#1F5FBF;--mj-as2:#0E7C66;--mj-as3:#6B3FA0;--mj-as4:#4E5761}
.mj-velo{position:fixed;inset:0;z-index:9;display:flex;align-items:flex-end;justify-content:center;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 12px);background:rgba(6,40,20,.42);font-family:var(--golf-font);color:var(--verde-texto)}
@media (min-width:721px) and (min-height:501px){.mj-velo{align-items:center}}
.mj-hoja{position:relative;width:min(520px,100%);max-height:calc(100dvh - 24px);overflow:auto;background:#fff;border-radius:22px;box-shadow:0 10px 30px rgba(8,94,43,.28),0 2px 6px rgba(8,94,43,.16);padding:14px 16px 16px;animation:mj-entra .22s ease both}
@keyframes mj-entra{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mj-hoja{animation:none}}
.mj-hoja-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.mj-hoja-h h2{margin:0;font:800 19px/1.2 var(--golf-font);color:var(--verde-texto)}
.mj-x{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:50%;background:#EEF4EC;color:var(--verde-texto);font:500 26px/1 var(--golf-font);cursor:pointer}
.mj-x:hover{background:#E1EEDD}
.mj-p{margin:0 0 10px;font:500 14.5px/1.45 var(--golf-font)}
.mj-nota{margin:6px 0 10px;font:400 12.5px/1.45 var(--golf-font);color:var(--gris-texto)}
.mj-err{margin:6px 0 0;min-height:1em;font:600 13px/1.4 var(--golf-font);color:#8A3B00}
.mj-err:empty{display:none}
.mj-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* botones */
.mj-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:14px;font:700 14.5px/1.15 var(--golf-font);cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.mj-btn:disabled{opacity:.5;cursor:default}
.mj-btn.mj-prim{background:var(--verde-texto);color:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.mj-btn.mj-sec{background:#EEF4EC;color:var(--verde-texto)}
.mj-btn.mj-sec:hover:not(:disabled){background:#E1EEDD}
.mj-btn.mj-sec[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--verde-texto)}
.mj-btn.mj-sal{background:none;color:var(--verde-texto);box-shadow:inset 0 0 0 2px #DCEBD8}
.mj-bot{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mj-bot .mj-prim{flex:1 1 180px}
.mj-fila{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mj-btn:focus-visible,.mj-opc:focus-visible,.mj-x:focus-visible,.mj-in:focus-visible,.mj-op-i input:focus-visible+span{outline:3px solid #F2AB27;outline-offset:2px}
/* inicio: tres caminos */
.mj-lista{display:flex;flex-direction:column;gap:8px}
.mj-opc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:60px;padding:10px 14px;border:0;border-radius:16px;background:#EEF4EC;color:var(--verde-texto);text-align:left;cursor:pointer;font-family:var(--golf-font)}
.mj-opc b{font:700 15.5px/1.2 var(--golf-font)}
.mj-opc small{font:400 12.5px/1.35 var(--golf-font);color:var(--gris-texto)}
.mj-opc.mj-prim{background:var(--verde-texto);color:#fff}
.mj-opc.mj-prim small{color:#DCEFD9}
.mj-opc:hover{filter:brightness(.98)}
/* formularios */
.mj-form{display:flex;flex-direction:column;gap:6px}
.mj-op{margin:0 0 6px;padding:0;border:0;min-width:0}
.mj-op legend{padding:0;margin:0 0 5px;font:700 13px/1.2 var(--golf-font);color:var(--verde-texto)}
.mj-op-l{display:flex;flex-wrap:wrap;gap:6px}
.mj-op-i{position:relative;display:inline-flex}
.mj-op-i input{position:absolute;opacity:0;width:1px;height:1px}
.mj-op-i span{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:99px;background:#EEF4EC;font:600 13.5px/1.2 var(--golf-font);cursor:pointer}
.mj-op-i input:checked+span{background:var(--verde-texto);color:#fff}
.mj-op-i.dis span{opacity:.5;cursor:default}
.mj-lbl{font:700 13px/1.2 var(--golf-font);margin-top:4px}
.mj-in{width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:#F6FAF5;box-shadow:inset 0 0 0 1.5px #C9D9C6;color:var(--verde-texto);font:600 16px/1.2 var(--golf-font)}
.mj-in.mj-codigo{font:800 22px/1.2 var(--golf-font);letter-spacing:.14em;text-transform:uppercase}
.mj-check{display:flex;align-items:center;gap:10px;min-height:44px;font:600 14px/1.3 var(--golf-font);cursor:pointer}
.mj-check input{width:22px;height:22px;accent-color:var(--verde-texto)}
.mj-campos{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.mj-inv{display:flex;flex-direction:column;gap:4px}
.mj-inv[hidden]{display:none}
.mj-nombres{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.mj-nom{display:flex;flex-direction:column;gap:3px}
.mj-nom[hidden]{display:none}
/* insignia de asiento */
.mj-as{display:inline-grid;place-items:center;flex:0 0 auto;min-width:22px;height:22px;padding:0 4px;border-radius:99px;background:var(--mj-as4);color:#fff;font:800 12px/1 var(--golf-font);font-style:normal;vertical-align:middle}
.mj-as-a1{background:var(--mj-as1)}.mj-as-a2{background:var(--mj-as2)}.mj-as-a3{background:var(--mj-as3)}.mj-as-a4{background:var(--mj-as4)}
/* sala de espera */
.mj-codigo-g{margin:2px 0 6px;text-align:center;font:800 34px/1.1 var(--golf-font);letter-spacing:.08em;color:var(--verde-texto);font-variant-numeric:tabular-nums}
.mj-asientos{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mj-asientos li{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 6px 4px 10px;border-radius:14px;background:#F6FAF5}
.mj-asientos li>span:nth-child(2){flex:1;min-width:0;font:500 14px/1.3 var(--golf-font)}
.mj-asientos small{color:var(--gris-texto)}
.mj-listo{font:600 12.5px/1 var(--golf-font);color:var(--gris-texto);white-space:nowrap}
.mj-quitar{min-height:36px;padding:0 10px;font-size:12.5px}
.mj-qr{display:grid;place-items:center;margin:6px auto}
.mj-qr svg{width:min(220px,70vw);height:auto;border-radius:10px}
.mj-qr[hidden]{display:none}
/* «Pasa el móvil»: pantalla completa y opaca */
.mj-velo.mj-velo-pasa{align-items:center;background:#0B3D1E}
.mj-hoja.mj-pasa{width:min(440px,100%);text-align:center;padding:26px 20px 22px}
.mj-hoja.mj-pasa .mj-hoja-h{justify-content:center}
.mj-hoja.mj-pasa .mj-hoja-h h2{font-size:24px}
.mj-pasa-as .mj-as{min-width:64px;height:64px;font-size:30px}
.mj-pasa-t{margin:12px 0 4px;font:600 16px/1.4 var(--golf-font)}
.mj-pasa .mj-bot{justify-content:center}
/* marcador (tarjeta común) */
.mj-tab{width:100%;border-collapse:separate;border-spacing:0;font:500 13px/1.2 var(--golf-font);font-variant-numeric:tabular-nums;color:var(--verde-texto)}
.mj-tab caption{text-align:left;font:700 13px/1.3 var(--golf-font);margin:0 0 6px;color:var(--verde-texto)}
.mj-tab th,.mj-tab td{padding:6px 5px;border-bottom:1px solid #E1EEDD;text-align:center;white-space:nowrap}
.mj-tab thead th{font-weight:700;color:var(--gris-texto)}
.mj-tab thead th.act{color:var(--verde-texto);box-shadow:inset 0 -3px 0 #F2AB27}
.mj-tab tbody th{text-align:left;font-weight:600;max-width:9.5rem;overflow:hidden;text-overflow:ellipsis}
.mj-tab tbody th .mj-as{margin-right:5px}
.mj-tab tbody th small{font-weight:500;color:var(--gris-texto)}
.mj-tab td.tot{font-weight:800}
.mj-tab td.bajo{color:#0E5C2E;font-weight:800}
.mj-tab td.sobre{color:#4E5761}
.mj-tab td.enj{color:var(--gris-texto);font-style:italic}
.mj-tab tr.fuera{opacity:.55}
.mj-tab-w{overflow-x:auto;margin:6px 0}
.mj-podio{margin:4px 0 10px;padding-left:0;list-style:none;font:600 15px/1.8 var(--golf-font)}
/* «⋯ → Partida» (móvil) y panel de la columna (escritorio y kiosko) */
.mj-partida{display:flex;flex-direction:column;gap:6px;color:var(--verde-texto);font-family:var(--golf-font)}
.mj-cab{margin:0;font:700 13.5px/1.35 var(--golf-font)}
.mj-ahora{margin:0;font:500 13px/1.45 var(--golf-font)}
.mj-reac{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mj-reac[hidden]{display:none}
.mj-reac .mj-btn{min-height:44px;padding:0 12px;font-size:13px}
.mj-para{width:auto;min-height:44px;flex:1 1 120px;font-size:14px}
.mj-acc{display:flex;flex-wrap:wrap;gap:6px}
.mj-acc .mj-btn{flex:1 1 auto;font-size:13px}
.mj-acc .mj-btn[hidden]{display:none}
.mj-panel{padding:12px 14px;border-radius:18px;background:var(--panel,rgba(255,255,255,.94));box-shadow:var(--sombra,0 10px 30px rgba(8,94,43,.22));pointer-events:auto}
.mj-panel .mj-tab{font-size:12px}
.mj-panel .mj-tab th,.mj-panel .mj-tab td{padding:4px 3px}
.mj-panel .mj-reac .mj-btn,.mj-panel .mj-acc .mj-btn{min-height:36px;font-size:12px;padding:0 10px}
.mj-panel .mj-para{min-height:36px;font-size:12.5px}
.gm-compacto .mj-panel{display:none}
/* «Silenciar o denunciar» (QA 29-09): plegado, una fila por persona */
.mj-pers{border-radius:14px;background:#F6FAF5;padding:0 10px}
.mj-pers[hidden]{display:none}
.mj-pers>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font:600 13.5px/1.2 var(--golf-font);color:var(--verde-texto);list-style:none}
.mj-pers>summary:focus-visible{outline:3px solid #F2AB27;outline-offset:2px;border-radius:10px}
.mj-pers>summary::-webkit-details-marker{display:none}
.mj-pers>summary::after{content:'';margin-left:auto;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.mj-pers[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
@media (prefers-reduced-motion:reduce){.mj-pers>summary::after{transition:none}}
.mj-pers-l{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.mj-pers-l li{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;min-height:44px}
.mj-pers-l li>span{flex:1 1 90px;min-width:0;font:500 13.5px/1.3 var(--golf-font);overflow-wrap:anywhere}
.mj-pers-l small{color:var(--gris-texto)}
.mj-pers-l .mj-btn{min-height:40px;padding:0 10px;font-size:12.5px}
.mj-panel .mj-pers>summary{min-height:36px;font-size:12.5px}
.mj-panel .mj-pers-l .mj-btn{min-height:34px;font-size:12px}
