/* ═══ MARCA: blanco 60 / negro 30 / gris 10. Cero azul. Ver assets/marca/MARCA.md ═══
   El 30% de negro es SUPERFICIE, no texto: la barra lateral y la tarjeta de cifras.  */
:root{
  --blanco:#FFFFFF; --negro:#0C0A09; --gris-fondo:#FAFAF9; --gris-linea:#E7E5E4;
  --gris-texto:#78716C; --gris-suave:#F5F5F4; --tinta-panel:#FAFAF9;
  --logo-sobre-negro:url("gymkor-blanco.png"); --logo-sobre-blanco:url("gymkor-negro.png");
  --r-tarjeta:12px; --r-boton:8px; --resalte-barra:rgba(250,250,249,.10);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --blanco:#0C0A09; --negro:#FAFAF9; --gris-fondo:#1C1917; --gris-linea:#292524;
  --gris-texto:#A8A29E; --gris-suave:#1C1917; --tinta-panel:#0C0A09;
  --logo-sobre-negro:url("gymkor-negro.png"); --logo-sobre-blanco:url("gymkor-blanco.png");
  --resalte-barra:rgba(12,10,9,.08);
}}
:root[data-theme="dark"]{
  --blanco:#0C0A09; --negro:#FAFAF9; --gris-fondo:#1C1917; --gris-linea:#292524;
  --gris-texto:#A8A29E; --gris-suave:#1C1917; --tinta-panel:#0C0A09;
  --logo-sobre-negro:url("gymkor-negro.png"); --logo-sobre-blanco:url("gymkor-blanco.png");
  --resalte-barra:rgba(12,10,9,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--gris-fondo);color:var(--negro);
  font-family:Figtree,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
[hidden]{display:none !important}

.logo{background-repeat:no-repeat;background-position:center;background-size:contain}

/* ── Botones y campos ─────────────────────────────────────────────────────── */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;
  border-radius:var(--r-boton);font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--gris-linea);background:var(--blanco);color:var(--negro);width:100%;max-width:340px;
  transition:background .15s ease,opacity .15s ease}
.btn:hover{background:var(--gris-suave)}
.btn:disabled{opacity:.5;cursor:default}
.btn-negro{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn-negro:hover{background:var(--negro);opacity:.88}
.btn:focus-visible{outline:2px solid var(--negro);outline-offset:2px}
.enlace{background:none;border:0;padding:0;font-family:inherit;font-size:14px;color:var(--gris-texto);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;width:fit-content}
.enlace:hover{color:var(--negro)}
.campo{display:flex;flex-direction:column;gap:6px;max-width:340px}
.campo label{font-size:12px;color:var(--gris-texto)}
.campo input{height:40px;padding:0 12px;border-radius:var(--r-boton);border:1px solid var(--gris-linea);
  background:var(--blanco);color:var(--negro);font-family:inherit;font-size:14px}
.campo input:focus{outline:none;border-color:var(--negro)}
.campo .pista{font-size:11px;color:var(--gris-texto)}
.codigo{font-size:20px;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
/* AVISO: filete de 2px y texto. Ni recuadro, ni fondo de color, ni icono. */
.aviso{border-left:2px solid var(--negro);padding-left:12px;font-size:12px;color:var(--gris-texto);max-width:52ch}
.aviso.malo{border-left-color:#B91C1C;color:#B91C1C}
.etiqueta{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-texto)}

/* ── Entrada (login / vincular) ───────────────────────────────────────────── */
.entrada{display:grid;grid-template-columns:38% 1fr;min-height:100%;background:var(--blanco)}
.lado-marca{background:var(--negro);color:var(--tinta-panel);padding:40px;
  display:flex;flex-direction:column;justify-content:space-between}
.lado-marca .logo{width:44px;height:47px;background-image:var(--logo-sobre-negro)}
.lado-marca .frase{font-size:16px;font-weight:500;line-height:1.35;text-wrap:balance}
.lado-marca .pie{font-size:11px;color:var(--gris-texto)}
.lado-accion{padding:48px 40px;display:flex;flex-direction:column;justify-content:center;gap:24px}
.lado-accion h1{font-size:24px;font-weight:500;margin:0;line-height:1.1}
.lado-accion p{margin:0;color:var(--gris-texto);max-width:46ch}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100%}
/* EL 30% NEGRO: la barra lateral es superficie, no adorno. */
.barra{background:var(--negro);color:var(--tinta-panel);padding:24px 16px;display:flex;flex-direction:column;gap:24px}
.barra .logo{width:32px;height:34px;background-image:var(--logo-sobre-negro);margin-left:8px}
.barra nav{display:flex;flex-direction:column;gap:4px;flex:1}
.barra button.gym{background:none;border:0;text-align:left;font-family:inherit;font-size:14px;
  color:var(--gris-texto);padding:8px 12px;border-radius:var(--r-boton);cursor:pointer;width:100%}
.barra button.gym:hover{color:var(--tinta-panel)}
.barra button.gym[aria-current="true"]{background:var(--resalte-barra);color:var(--tinta-panel);font-weight:600}
.barra .salir{background:none;border:0;font-family:inherit;font-size:12px;color:var(--gris-texto);
  cursor:pointer;text-align:left;padding:8px 12px}
.barra .salir:hover{color:var(--tinta-panel)}

.contenido{padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0}
.contenido h1{font-size:24px;font-weight:500;margin:0;line-height:1.1}

/* Las cifras, en negro: el patrón del número protagonista. */
.cifras{background:var(--negro);color:var(--tinta-panel);border-radius:var(--r-tarjeta);
  padding:24px 32px;display:flex;gap:48px;flex-wrap:wrap}
.cifra .n{font-size:32px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.cifra .q{font-size:12px;color:var(--gris-texto)}

.tarjeta{background:var(--blanco);border-radius:var(--r-tarjeta);padding:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);min-width:0}
.barra-busqueda{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.envoltorio-tabla{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:0 12px;height:44px;border-bottom:1px solid var(--gris-linea);white-space:nowrap}
th{font-size:12px;font-weight:600;background:var(--gris-fondo);position:sticky;top:0}
td{font-size:14px}
td.num{font-variant-numeric:tabular-nums}
.chip{display:inline-block;background:var(--gris-suave);color:var(--gris-texto);font-size:12px;
  padding:4px 10px;border-radius:9999px;white-space:nowrap}
.chip-negro{background:var(--negro);color:var(--blanco)}
.paginacion{display:flex;align-items:center;gap:16px;margin-top:16px;font-size:12px;color:var(--gris-texto)}
.paginacion button{background:none;border:1px solid var(--gris-linea);border-radius:var(--r-boton);
  height:32px;padding:0 12px;font-family:inherit;font-size:13px;color:var(--negro);cursor:pointer}
.paginacion button:disabled{opacity:.4;cursor:default}
/* ESTADO VACIO: una frase y ya. Sin ilustracion, sin caja, sin tres lineas. */
.vacio{color:var(--gris-texto);padding:32px 12px}

@media (max-width:820px){
  .entrada{grid-template-columns:1fr}
  .lado-marca{flex-direction:row;align-items:center;justify-content:space-between;padding:20px 24px}
  .lado-marca .frase,.lado-marca .pie{display:none}
  .lado-accion{padding:32px 24px}
  .app{grid-template-columns:1fr}
  .barra{flex-direction:row;align-items:center;gap:12px;padding:12px 16px;overflow-x:auto}
  .barra nav{flex-direction:row;flex:1}
  .barra button.gym{white-space:nowrap}
  .contenido{padding:20px 16px}
  .cifras{gap:24px;padding:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Clases que sustituyen a los dos estilos en linea, para que la CSP pueda
   prohibir style-src 'unsafe-inline' sin excepciones. */
.pila{display:flex;flex-direction:column;gap:16px}
.campo-busqueda{max-width:280px}