/* FINDLEY DEPORT · Paneles (central de Ryan, panel de cada gym y app del socio)
   Usa las variables de styles.css. Pantallas de trabajo: claras, densas y legibles en celular. */
.pn { min-height: 100vh; background: var(--hueso); color: var(--tinta); }
.pn-barra { position: sticky; top: 0; z-index: 30; background: var(--noche); color: #fff; border-bottom: 1px solid var(--linea-osc); }
.pn-barra .contenedor { display: flex; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.pn-barra .logo { font-size: 20px; }
.pn-titulo { font-family: var(--display); font-size: 20px; text-transform: uppercase; letter-spacing: .04em; color: var(--lima); margin-right: auto; }
.pn-barra .btn-claro { background: rgba(255,255,255,.06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.pn-barra select { color: var(--tinta); background: #fff; border: 0; font-weight: 700; font-size: 14px; }
.pn-main { padding: 26px 0 80px; }
.pn-main .contenedor { display: grid; gap: 22px; }

/* login */
.pn-login { min-height: 100vh; display: grid; place-items: center; padding: 30px 16px; background: radial-gradient(1200px 600px at 20% -10%, rgba(227,16,31,.35), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(var(--lima-rgb), .16), transparent 60%), var(--noche); color: #fff; }
.pn-login-caja { width: 100%; max-width: 420px; background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 24px; padding: 30px 26px; display: grid; gap: 16px; box-shadow: 0 40px 90px -40px #000; }
.pn-login-caja .logo { font-size: 26px; }
.pn-login-caja h1 { font-family: var(--display); text-transform: uppercase; font-size: 34px; line-height: 1; }
.pn-login-caja p { color: var(--gris-claro); font-size: 14.5px; }
.pn-login-caja .campo span { color: #c6cfdb; }
.pn-login-caja input { background: var(--noche-3); color: #fff; border-color: var(--noche-4); }
.pn-err { color: #ff8a93; font-size: 14px; font-weight: 600; min-height: 1em; }

/* campos (independientes de la web) */
.pn .campo, .pn-login .campo, .pn-modal .campo { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.pn .campo span, .pn-modal .campo span { color: var(--gris); }
.pn input, .pn select, .pn textarea, .pn-login input, .pn-modal input, .pn-modal select { width: 100%; border: 1.5px solid var(--linea); background: #fff; border-radius: 12px; padding: 11px 13px; font-size: 15px; font-weight: 500; min-width: 0; }
.pn input:focus, .pn select:focus, .pn-login input:focus, .pn-modal input:focus { outline: none; border-color: var(--tinta); }
.pn-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }

/* tarjetas y KPIs */
.pn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pn-kpi { background: #fff; border: 1px solid var(--linea); border-radius: 18px; padding: 16px 18px; display: grid; gap: 4px; }
.pn-kpi small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.pn-kpi b { font-family: var(--display); font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; }
.pn-kpi span { font-size: 13px; color: var(--gris); }
.pn-kpi.oscuro { background: var(--noche); border-color: var(--noche); }
.pn-kpi.oscuro small, .pn-kpi.oscuro span { color: var(--gris-claro); }
.pn-kpi.oscuro b { color: var(--lima); }
.pn-kpi.alerta { border-color: #ffb3b9; background: #fff4f5; }
.pn-kpi.alerta b { color: var(--rojo); }
.pn-caja { background: #fff; border: 1px solid var(--linea); border-radius: 20px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.pn-caja-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pn-caja h2 { font-family: var(--display); text-transform: uppercase; font-size: 26px; line-height: 1; }
.pn-caja h2 small { font-family: "Plus Jakarta Sans", sans-serif; text-transform: none; font-size: 14px; color: var(--gris); font-weight: 600; margin-left: 6px; }
.pn-nota { font-size: 13.5px; color: var(--gris); }

/* barra de uso del plan */
.pn-uso { display: grid; gap: 8px; }
.pn-uso-barra { height: 14px; border-radius: 99px; background: var(--hueso); overflow: hidden; }
.pn-uso-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4fd36b, var(--lima)); transition: width .6s; }
.pn-uso-barra.medio i { background: linear-gradient(90deg, var(--oro), #ffa53a); }
.pn-uso-barra.lleno i { background: linear-gradient(90deg, #ff6a00, var(--rojo)); }
.pn-uso-txt { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; font-weight: 600; flex-wrap: wrap; }

/* pestañas y filtros */
.pn-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pn-tabs button { border: 0; background: var(--hueso); border-radius: 99px; padding: 8px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.pn-tabs button.on { background: var(--tinta); color: #fff; }
.pn-tabs button b { font-variant-numeric: tabular-nums; opacity: .7; margin-left: 4px; }
.pn-buscar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pn-buscar input { flex: 1 1 220px; }

/* tablas (en celular pasan a tarjetas) */
.pn-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.pn-tabla th { text-align: left; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); padding: 8px 10px; border-bottom: 1.5px solid var(--linea); white-space: nowrap; }
.pn-tabla td { padding: 11px 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.pn-tabla tr:hover td { background: #fafbfc; }
.pn-tabla .acc { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.pn-tabla select { padding: 6px 8px; font-size: 13.5px; border-radius: 9px; width: auto; }
.pn-scroll { overflow-x: auto; margin: 0 -4px; }
.pn-nombre { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.pn-nombre small { display: block; font-weight: 500; color: var(--gris); font-size: 12.5px; }
.pn-av { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c, var(--rojo)); color: #fff; font-weight: 800; font-size: 14px; }
.pn-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 800; white-space: nowrap; background: var(--hueso); color: var(--gris); }
.pn-chip.ok { background: #e7f9ec; color: #157a33; }
.pn-chip.warn { background: #fff4d6; color: #8a6100; }
.pn-chip.mal { background: #ffe9eb; color: #b30b17; }
.pn-chip.oro { background: linear-gradient(135deg, var(--oro), var(--oro-2)); color: var(--oro-tinta); }
.pn-chip.lima { background: var(--lima); color: var(--tinta); }
.pn-mini { border: 0; background: var(--hueso); border-radius: 9px; padding: 7px 11px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.pn-mini:hover { background: var(--linea); }
.pn-mini.verde { background: #e7f9ec; color: #157a33; }
.pn-mini.rojo { background: #ffe9eb; color: #b30b17; }
.pn-mini:disabled { opacity: .5; cursor: default; }
.pn-vacio { text-align: center; color: var(--gris); padding: 30px 10px; font-size: 14.5px; }

/* dos columnas */
.pn-dos { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; }

/* modal */
.pn-modal { border: 0; border-radius: 22px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 40px); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); }
.pn-modal::backdrop { background: rgba(7,9,13,.6); backdrop-filter: blur(3px); }
.pn-modal form, .pn-modal-cuerpo { padding: 24px; display: grid; gap: 14px; }
.pn-modal h3 { font-family: var(--display); text-transform: uppercase; font-size: 28px; line-height: 1; }
.pn-modal .acc { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.pn-cred { background: var(--noche); color: #fff; border-radius: 16px; padding: 18px; display: grid; gap: 8px; font-size: 15px; }
.pn-cred div { display: flex; justify-content: space-between; gap: 10px; }
.pn-cred span { color: var(--gris-claro); }
.pn-cred b { font-family: ui-monospace, Menlo, monospace; font-size: 18px; color: var(--lima); letter-spacing: .04em; word-break: break-all; text-align: right; }

/* máquinas */
.pn-maq { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pn-maq label { display: flex; gap: 9px; align-items: center; background: var(--hueso); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.pn-maq input { width: 18px; height: 18px; accent-color: var(--rojo); flex: none; padding: 0; }
.pn-maq h4 { grid-column: 1 / -1; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-top: 6px; }

.pn-qr { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; }
.pn-qr svg, .pn-qr img { width: 150px; height: 150px; background: #fff; border-radius: 12px; }

/* coaches en el panel del gym */
.pn-sub { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-top: 6px; }
.pn-coaches { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pn-coach { display: flex; gap: 12px; align-items: flex-start; text-align: left; border: 1px solid var(--linea); background: #fff; border-radius: 16px; padding: 14px; cursor: pointer; position: relative; }
.pn-coach:hover { border-color: var(--tinta); }
.pn-coach.off { opacity: .55; }
.pn-coach span:not(.pn-av) { display: grid; gap: 2px; }
.pn-coach small { color: var(--gris); font-size: 12.5px; }
.pn-coach em { position: absolute; top: 10px; right: 10px; font-style: normal; }

/* ---------- App del socio (mi-gym) ---------- */
.mg-paso { margin-top: 26px; max-width: 560px; display: grid; gap: 12px; }
.mg-buscador { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 6px 8px 6px 16px; color: var(--tinta); box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
.mg-buscador .i { width: 22px; height: 22px; flex: none; color: var(--gris); }
.mg-buscador input { flex: 1; border: 0; outline: 0; font-size: 18px; padding: 12px 0; background: transparent; min-width: 0; }
.mg-res { display: grid; gap: 8px; }
.mg-gym { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 16px; padding: 12px 14px; cursor: pointer; transition: background .2s, transform .2s; }
.mg-gym:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }
.mg-gym span:nth-child(2) { flex: 1; display: grid; }
.mg-gym small { color: var(--gris-claro); font-size: 13px; }
.mg-gym em { font-style: normal; color: var(--lima); font-weight: 700; font-size: 14px; }
.mg-vacio, .mg-ayuda { color: var(--gris-claro); font-size: 14px; }
.mg-ayuda a { color: var(--lima); font-weight: 700; }
.mg-login { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 22px; padding: 22px; }
.mg-login .campo { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: #c6cfdb; }
.mg-login input { width: 100%; border: 1.5px solid var(--noche-4); background: var(--noche-3); color: #fff; border-radius: 12px; padding: 12px 14px; font-size: 16px; }
.mg-gym-sel { display: flex; gap: 12px; align-items: center; }
.mg-gym-sel small { display: block; color: var(--gris-claro); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.mg-gym-sel b { font-size: 20px; }
.mg-link { background: none; border: 0; color: var(--gris-claro); cursor: pointer; font-weight: 600; justify-self: start; }

.mg-top { background: radial-gradient(900px 400px at 0% 0%, color-mix(in srgb, var(--c, #e3101f) 55%, transparent), transparent 70%), var(--noche); color: #fff; padding: 140px 0 40px; }
.mg-top .contenedor { display: grid; gap: 14px; }
.mg-top-gym { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mg-top-gym small { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--gris-claro); }
.mg-top-gym b { font-size: 20px; }
.mg-av { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
.mg-abierto { margin-left: auto; border-radius: 99px; padding: 6px 12px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.08); color: var(--gris-claro); }
.mg-abierto.si { background: rgba(var(--lima-rgb), .14); color: var(--lima); }
.mg-top h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(44px, 8vw, 84px); line-height: .9; }
.mg-top h1 em { font-style: normal; color: var(--lima); }
.mg-frase { font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; max-width: 760px; color: #e6ebf2; }
.mg-aviso { background: rgba(var(--oro-rgb), .12); border: 1px solid rgba(var(--oro-rgb), .4); color: var(--oro-claro); border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; max-width: 760px; font-size: 15px; }
.mg-aviso b { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.mg-sec { padding-top: 30px; }
.mg-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: start; }
.mg-col { display: grid; gap: 22px; min-width: 0; }
.mg-grande { font-family: var(--display); font-size: 34px; text-transform: uppercase; line-height: 1; }
.mg-btn-grande { padding: 18px 24px; font-size: 18px; }
.mg-btn-grande .i { width: 22px; height: 22px; }
.mg-accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-acceso { display: flex; gap: 12px; align-items: center; background: var(--hueso); border-radius: 16px; padding: 14px; transition: background .2s, transform .2s; }
.mg-acceso:hover { background: var(--linea); transform: translateY(-2px); }
.mg-acceso span:last-child { display: grid; }
.mg-acceso small { color: var(--gris); font-size: 12.5px; line-height: 1.35; }
.mg-ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--noche); color: var(--lima); display: grid; place-items: center; }
.mg-ico .i { width: 22px; height: 22px; }
.mg-calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.mg-dsem { font-size: 11px; font-weight: 800; color: var(--gris); text-align: center; }
.mg-dia { aspect-ratio: 1; border-radius: 10px; background: var(--hueso); display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--gris); }
.mg-dia.on { background: var(--lima); color: var(--tinta); }
.mg-dia.hoy { box-shadow: inset 0 0 0 2px var(--tinta); }
.mg-plan-fila { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; border-bottom: 1px solid var(--linea); padding-bottom: 8px; }
.mg-plan-fila span { color: var(--gris); }
.mg-marcas { display: grid; gap: 8px; }
.mg-marca { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--hueso); border-radius: 14px; padding: 12px 14px; }
.mg-marca span { display: grid; }
.mg-marca small { color: var(--gris); font-size: 12.5px; }
.mg-marca em { font-style: normal; font-weight: 800; font-size: 13px; color: var(--rojo); white-space: nowrap; }
.mg-marca em.pronto { color: var(--gris); }
.mg-cod-in { font-family: var(--display); font-size: 48px !important; text-align: center; letter-spacing: .3em; }
.mg-coach-ok { display: flex; gap: 14px; align-items: flex-start; background: #e7f9ec; border-radius: 16px; padding: 14px; }
.mg-coach-ok b { font-size: 17px; }
.mg-coach-mini { display: grid; gap: 6px; }
.mg-coach-mini span { display: grid; background: var(--hueso); border-radius: 12px; padding: 10px 12px; }
.mg-coach-mini small { color: var(--gris); }
.mg-coaches { display: grid; gap: 8px; }
.mg-coach-op { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--linea); border-radius: 14px; padding: 10px 12px; cursor: pointer; font-size: 14px; }
.mg-coach-op:has(input:checked) { border-color: var(--tinta); background: var(--hueso); }
.mg-coach-op input { width: 18px !important; height: 18px; flex: none; accent-color: var(--rojo); }
.mg-coach-op span { flex: 1; display: grid; }
.mg-coach-op small { color: var(--gris); font-size: 12.5px; font-weight: 500; }
.mg-coach-op em { font-style: normal; font-weight: 800; text-align: right; display: grid; font-size: 14px; }
.mg-dias { display: flex; gap: 6px; flex-wrap: wrap; }
.mg-dias label { display: flex; align-items: center; gap: 5px; background: var(--hueso); border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 700; color: var(--tinta); }
.mg-dias label:has(input:checked) { background: var(--tinta); color: #fff; }
.mg-dias input { width: auto !important; accent-color: var(--lima); }
@media (max-width: 900px) { .mg-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mg-accesos { grid-template-columns: 1fr; } .mg-top { padding-top: 120px; } }

@media (max-width: 900px) { .pn-dos { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .pn-tabla.cards thead { display: none; }
  .pn-tabla.cards, .pn-tabla.cards tbody, .pn-tabla.cards tr, .pn-tabla.cards td { display: block; width: 100%; }
  .pn-tabla.cards tr { border: 1px solid var(--linea); border-radius: 14px; padding: 6px 4px; margin-bottom: 10px; }
  .pn-tabla.cards td { border: 0; padding: 5px 10px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
  .pn-tabla.cards td[data-l]::before { content: attr(data-l); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
  .pn-tabla.cards .acc { justify-content: flex-start; }
  .pn-caja { padding: 16px; }
  .pn-qr { grid-template-columns: 1fr; }
}
@media print { .pn-barra, .pn-noprint { display: none !important; } }

/* ── Riesgo, reporte, invitados, retos y ranking (panel del gym y app del socio) ── */
.pn-semaforo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pn-luz { text-align: left; border: 1.5px solid var(--linea); background: #fff; border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; cursor: pointer; font: inherit; }
.pn-luz small { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.pn-luz b { font-family: var(--display); font-size: 38px; line-height: 1; }
.pn-luz span { font-size: 12.5px; color: var(--gris); }
.pn-luz.rojo b { color: #d0202e; } .pn-luz.amarillo b { color: #b37a00; } .pn-luz.verde b { color: #157a33; } .pn-luz.verde { cursor: default; }
.pn-luz.on { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.pn-rep { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pn-rep div { background: var(--hueso); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.pn-rep small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.pn-rep b { font-family: var(--display); font-size: 30px; line-height: 1; }
.pn-rep span { font-size: 12.5px; color: var(--gris); }
.pn-rep em { font-style: normal; font-weight: 800; } .pn-rep em.sube { color: #157a33; } .pn-rep em.baja { color: #d0202e; }
.pn-pase-form { display: flex; gap: 8px; }
.pn-pase-form input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
.pn-kpis-mini .pn-kpi b { font-size: 30px; }
.pn-avisos { display: grid; gap: 8px; }
.pn-avisos div { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: rgba(var(--oro-rgb), .18); border: 1px solid rgba(var(--oro-rgb), .6); border-radius: 14px; padding: 10px 14px; font-size: 14px; }
.pn-ranking { list-style: none; display: grid; gap: 6px; counter-reset: rk; }
.pn-ranking li { display: flex; align-items: center; gap: 10px; background: var(--hueso); border-radius: 12px; padding: 9px 12px; font-size: 14.5px; counter-increment: rk; }
.pn-ranking li::before { content: counter(rk); font-family: var(--display); font-size: 20px; width: 24px; color: var(--gris); }
.pn-ranking li:has(em)::before { display: none; }
.pn-ranking li em { font-style: normal; font-family: var(--display); font-size: 20px; width: 26px; text-align: center; color: var(--gris); }
.pn-ranking li b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-ranking li small { color: var(--gris); font-size: 12px; }
.pn-ranking li span { font-weight: 800; font-variant-numeric: tabular-nums; }
.pn-ranking li.yo { background: var(--lima); color: var(--tinta); }
.pn-ranking li.pn-vacio::before { display: none; }
.pn-reto { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.pn-reto > div { flex: 1; display: grid; } .pn-reto small { color: var(--gris); font-size: 12.5px; } .pn-reto.off { opacity: .55; }
.pn-upsell { display: grid; gap: 4px; background: linear-gradient(120deg, rgba(var(--gym-rgb, 47,107,255), .12), rgba(var(--lima-rgb), .12)); border: 1px dashed var(--rojo); border-radius: 14px; padding: 14px; font-size: 14px; }
.pn-dos-igual { grid-template-columns: 1fr 1fr; }
.pn-off td { opacity: .55; }
@media (max-width: 860px) { .pn-rep { grid-template-columns: 1fr 1fr; } .pn-dos-igual { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .pn-semaforo { grid-template-columns: 1fr; } .pn-avisos div { flex-direction: column; align-items: flex-start; } }

/* app del socio */
.mg-cupo { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-cupo span { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: rgba(var(--lima-rgb), .18); border: 1.5px solid var(--lima); }
.mg-cupo span.usado { background: var(--hueso); border-color: var(--linea); color: var(--gris); font-size: 18px; font-weight: 800; }
.mg-pases { display: grid; gap: 8px; }
.mg-pase { display: flex; align-items: center; gap: 8px; border: 1px solid var(--linea); border-radius: 14px; padding: 10px 12px; }
.mg-pase span { flex: 1; display: grid; min-width: 0; } .mg-pase small { color: var(--gris); font-size: 12.5px; }
.mg-pase-listo { display: grid; gap: 8px; background: rgba(var(--lima-rgb), .16); border: 1.5px solid var(--lima); border-radius: 16px; padding: 14px; }
.mg-pase-listo span { font-size: 14px; color: var(--gris); }
.mg-reto { display: grid; gap: 6px; border-top: 1px solid var(--linea); padding-top: 12px; }
.mg-reto small { color: var(--gris); font-size: 12.5px; }
.mg-insignias { display: flex; gap: 8px; flex-wrap: wrap; }
.mg-insignias span { display: grid; place-items: center; font-size: 26px; background: var(--hueso); border-radius: 14px; padding: 6px 10px; line-height: 1.1; }
.mg-insignias small { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--gris); }

/* pase del invitado */
.pase-pag { background: radial-gradient(900px 500px at 10% -10%, rgba(var(--gym-rgb), .45), transparent 60%), radial-gradient(700px 400px at 110% 110%, rgba(var(--lima-rgb), .2), transparent 60%), var(--noche); min-height: 100vh; }
.pase { max-width: 460px; margin: 0 auto; padding: 24px 16px 40px; display: grid; gap: 18px; color: #fff; }
.pase-tarjeta { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 28px; padding: 24px 20px; display: grid; gap: 12px; text-align: center; box-shadow: 0 40px 90px -40px #000; }
.pase-tarjeta h1 { font-family: var(--display); text-transform: uppercase; font-size: 44px; line-height: 1; }
.pase-tarjeta h1 em { font-style: normal; color: var(--lima); }
.pase-gym { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: left; }
.pase-gym div { display: grid; line-height: 1.15; } .pase-gym small { color: var(--gris-claro); font-size: 12px; } .pase-gym b { font-size: 18px; }
.pase-txt { color: #c6cfdb; }
.pase-qr { background: #fff; border-radius: 22px; padding: 14px; width: min(260px, 80%); margin: 6px auto 0; }
.pase-qr svg { width: 100%; height: auto; }
.pase-codigo { font-family: ui-monospace, Menlo, monospace; font-size: 30px; font-weight: 800; letter-spacing: .18em; color: var(--lima); }
.pase-datos { list-style: none; display: grid; gap: 6px; background: var(--noche-3); border-radius: 16px; padding: 12px 14px; text-align: left; font-size: 14.5px; }
.pase-estado { background: rgba(var(--oro-rgb), .14); border: 1px solid rgba(var(--oro-rgb), .5); border-radius: 16px; padding: 16px; font-weight: 600; }
.pase-tarjeta .eyebrow { justify-content: center; color: var(--lima); margin: 6px 0 0; }
.pase-tarjeta .pn-nota { color: var(--gris-claro); }

/* modo TV */
.tv-pag { background: radial-gradient(1200px 700px at 0% -10%, rgba(var(--gym-rgb), .4), transparent 60%), var(--noche); color: #fff; min-height: 100vh; }
.tv { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 2.2vh; padding: 3vh 3vw; }
.tv-cab { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.tv-cab small { color: var(--lima); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(14px, 1.4vw, 24px); }
.tv-cab h1 { font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 6vw, 110px); line-height: .9; }
.tv-reloj { text-align: right; display: grid; } .tv-reloj b { font-family: var(--display); font-size: clamp(40px, 5vw, 96px); line-height: 1; } .tv-reloj span { color: var(--gris-claro); font-size: clamp(14px, 1.4vw, 24px); }
.tv-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2vw; min-height: 0; }
.tv-col { display: grid; gap: 2vh; align-content: start; }
.tv-panel { background: var(--noche-2); border: 1px solid var(--linea-osc); border-radius: 28px; padding: 2.4vh 2vw; display: grid; gap: 1vh; align-content: start; }
.tv-panel h2, .tv-panel small { font-size: clamp(14px, 1.4vw, 24px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-claro); }
.tv-panel p { font-size: clamp(16px, 1.6vw, 28px); color: #dfe5ee; } .tv-panel strong { color: var(--lima); }
.tv-panel ol { list-style: none; display: grid; gap: .6vh; font-size: clamp(16px, 1.6vw, 28px); } .tv-panel ol li span { color: var(--lima); font-weight: 800; float: right; }
.tv-ranking { list-style: none; display: grid; gap: 1vh; }
.tv-ranking li { display: flex; align-items: center; gap: 1.2vw; background: var(--noche-3); border-radius: 18px; padding: 1.1vh 1.4vw; font-size: clamp(18px, 2vw, 38px); }
.tv-ranking li em { font-style: normal; font-family: var(--display); width: 2.4em; text-align: center; color: var(--gris-claro); }
.tv-ranking li b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tv-ranking li span { font-family: var(--display); color: var(--lima); font-size: 1.2em; }
.tv-ranking li.p1 { background: linear-gradient(90deg, rgba(var(--gym-rgb), .55), var(--noche-3)); }
.tv-vacio { color: var(--gris-claro); }
.tv-reto b { font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 5vw, 90px); line-height: 1; }
.tv-pie { display: flex; justify-content: space-between; align-items: center; color: var(--gris-claro); font-size: clamp(14px, 1.3vw, 22px); }
@media (max-width: 760px) { .tv-grid { grid-template-columns: 1fr; } }
.pase { grid-template-columns: minmax(0, 1fr); }
.pase-tarjeta { min-width: 0; }
.pase-tarjeta .btn { white-space: normal; text-align: center; line-height: 1.25; }

.pn-login-caja .logo-fitora { font-size: 34px; }

/* FITORA · Clases grupales (gym-clases.js y app del socio) */
.pn-switch { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; user-select: none; }
.pn-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pn-switch i { width: 42px; height: 24px; border-radius: 99px; background: var(--linea); position: relative; transition: background .2s; flex: none; }
.pn-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.pn-switch input:checked + i { background: var(--rojo); }
.pn-switch input:checked + i::after { transform: translateX(18px); }
.pn-switch input:focus-visible + i { outline: 2px solid var(--rojo); outline-offset: 2px; }
.pn-cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 14px 0 6px; }
.pn-cl { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid var(--linea); background: #fff; border-radius: 16px; padding: 14px; cursor: pointer; font: inherit; color: inherit; }
.pn-cl:hover { border-color: var(--rojo); }
.pn-cl-hora { font-family: var(--display); font-size: 26px; line-height: 1; display: grid; gap: 2px; min-width: 64px; }
.pn-cl-hora small { font-family: inherit; font-size: 12px; color: var(--gris); font-weight: 700; }
.pn-cl-info { display: grid; gap: 4px; flex: 1; min-width: 0; }
.pn-cl-info small { color: var(--gris); font-size: 12.5px; }
.pn-cl-info .pn-uso-barra { height: 6px; }
.pn-cl em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--rojo); white-space: nowrap; }
.pn-cl-lista { display: grid; gap: 6px; margin: 10px 0; max-height: 46vh; overflow: auto; }
.pn-cl-fila { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid var(--linea); border-radius: 12px; padding: 9px 11px; flex-wrap: wrap; }
.pn-cl-fila > span:first-child { display: grid; min-width: 0; flex: 1; }
.pn-cl-fila small { color: var(--gris); font-size: 12px; }
.pn-chip.rojo { background: #ffe9eb; color: #b30b17; }
#lista-q { width: 100%; border: 1.5px solid var(--linea); border-radius: 12px; padding: 11px 13px; font-size: 15px; margin: 6px 0; }
/* app del socio */
.mg-cl-dias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.mg-cl-dias button { border: 0; background: var(--hueso); border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 13px; cursor: pointer; display: grid; justify-items: center; min-width: 54px; color: var(--tinta); }
.mg-cl-dias button small { font-weight: 700; font-size: 11px; opacity: .7; }
.mg-cl-dias button.on { background: var(--tinta); color: #fff; }
.mg-cl-dias button i { width: 6px; height: 6px; border-radius: 50%; background: var(--rojo); margin-top: 3px; }
.mg-cl-l { display: grid; gap: 8px; margin-top: 12px; }
.mg-cl { display: flex; gap: 12px; align-items: center; border: 1px solid var(--linea); border-radius: 16px; padding: 12px 14px; background: #fff; }
.mg-cl.mia { border-color: var(--rojo); box-shadow: 0 0 0 3px rgba(var(--gym-rgb, 47,107,255), .12); }
.mg-cl.pasada { opacity: .5; }
.mg-cl-h { font-family: var(--display); font-size: 24px; line-height: 1; min-width: 58px; }
.mg-cl-i { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mg-cl-i small { color: var(--gris); font-size: 12.5px; }
.mg-cl .btn { flex: none; }
.mg-cl-cupo { font-size: 12px; font-weight: 800; }
.mg-cl-cupo.lleno { color: #b30b17; }
.mg-cl-cupo.pocos { color: #8a6100; }
.mg-cl-aviso { background: #fff4d6; color: #6b4b00; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 600; margin-top: 10px; }