/* =====================================================================
   PISTA · sistema de diseño  (Fase 2 · Dirección B · Precisión)
   Escala neutra fría, un acento usado con avaricia.
   Sans para jerarquía, Mono para toda cifra.
   ===================================================================== */

:root {
  /* superficies y texto — modo claro */
  --surface:        #FFFFFF;
  --surface-raised: #F7F8FA;
  --surface-sunken: #EFF1F4;
  --surface-page:   #FFFFFF;
  --border:         #DCE0E6;
  --border-strong:  #B9BFC7;
  --text-tertiary:  #6B7280;
  --text-secondary: #5A6270;
  --text-primary:   #0B0C0E;
  --accent:         #2438D9;
  --accent-hover:   #1B2AA8;
  --accent-soft:    #EEF1FE;
  --accent-contrast:#FFFFFF;
  --success:        #0E7A4F;
  --success-soft:   #E8F5EE;
  --warning:        #A65A00;
  --warning-soft:   #FDF3E6;
  --danger:         #C0281F;
  --danger-soft:    #FCEDEC;

  /* espaciado · base 4 */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;

  /* radio: controles 4 · contenedores 6 · pill solo en chips */
  --radio-2: 2px; --radio-4: 4px; --radio-6: 6px; --radio-full: 999px;

  /* elevación: sombra corta y contenida */
  --e1: 0 1px 2px rgba(11,12,14,.06);
  --e2: 0 8px 24px -12px rgba(11,12,14,.28);

  --z-sticky: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500;

  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 300ms;
  --ease: cubic-bezier(.2,0,0,1);

  /* EL PAR REALZADO: lo que tiene que destacar SOBRE la página en vez de
     seguirla —el botón flotante, la fila elegida, la pestaña activa—.
     Van juntos y se dan vuelta juntos.

     Antes esto se hacía con `background: var(--realzado-fondo)` y `color: var(--realzado-txt)`,
     que es el color del TEXTO usado de fondo. En un mundo de un solo tema
     funciona; en el panel, que tiene dos, `--text-primary` se da vuelta y el
     fondo queda claro con la letra blanca encima. El elemento desaparece, y
     un botón invisible no da error: simplemente nadie lo aprieta. Aparecieron
     tres así al revisar las 52 pantallas.

     Los valores de acá son EXACTAMENTE los de antes, para que en la tienda y
     en la muestra clara no cambie ni un píxel. */
  --realzado-fondo: #0B0C0E;
  --realzado-txt:   #FFFFFF;

  --max: 1280px;
  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* modo oscuro: mismos nombres, otros valores.
   El acento se aclara para mantener 4.5:1 sobre superficie. */
:root[data-tema="oscuro"],
html:not([data-tema="claro"]) body.tema-auto-oscuro {
  --surface:        #0B0C0E;
  --surface-raised: #14161A;
  --surface-sunken: #1C1F24;
  --surface-page:   #0B0C0E;
  --border:         #24272C;
  --border-strong:  #3A3F47;
  --text-tertiary:  #8A9199;
  --text-secondary: #A8AEB6;
  --text-primary:   #F2F4F7;
  /* Aclarado: el índigo de antes daba 3:1 contra una página casi negra, que
     alcanza para un titular y no para un enlace de 14px. */
  --accent:         #8A9BFF;
  --accent-hover:   #A9B6FF;
  --accent-soft:    #151B3D;
  --success:        #22B37A;
  --success-soft:   #10281F;
  --warning:        #E0912F;
  --warning-soft:   #2A1E0C;
  --danger:         #F0564A;
  --danger-soft:    #2C1210;
  /* El par realzado también se da vuelta acá: sobre oscuro, lo que destaca es
     lo claro. Sin esto queda el fondo casi negro de la muestra clara sobre
     una página casi negra, o sea nada. */
  --realzado-fondo: #F2F4F7;
  --realzado-txt:   #0B0C0E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --surface:        #0B0C0E;
    --surface-raised: #14161A;
    --surface-sunken: #1C1F24;
    --surface-page:   #0B0C0E;
    --border:         #24272C;
    --border-strong:  #3A3F47;
    --text-tertiary:  #8A9199;
    --text-secondary: #A8AEB6;
    --text-primary:   #F2F4F7;
    --accent:         #8A9BFF;
    --accent-hover:   #A9B6FF;
    --accent-soft:    #151B3D;
    --success:        #22B37A;
    --success-soft:   #10281F;
    --warning:        #E0912F;
    --warning-soft:   #2A1E0C;
    --danger:         #F0564A;
    --danger-soft:    #2C1210;
    --realzado-fondo: #F2F4F7;
    --realzado-txt:   #0B0C0E;
  }
}

/* --------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* `hidden` gana siempre.
 *
 * El atributo sólo trae `display: none` de la hoja del navegador, y cualquier
 * clase nuestra con `display: flex` —`.campo`, `.fila`, `.pcard`— le gana por
 * especificidad. Cuando eso pasa, el elemento que un script cree haber
 * escondido se queda a la vista: en la grilla de canchas, elegir una hora
 * dejaba abajo el desplegable de «Qué hora», así que parecía que pedía elegir
 * de nuevo, y la tarjeta «Elegiste» se veía vacía desde antes de elegir nada.
 *
 * `!important` acá está bien puesto: `hidden` no es un estilo, es un estado
 * del elemento, y no hay ningún caso en que una clase deba poder revivirlo.
 * Sin esta regla el problema vuelve cada vez que alguien esconde algo con
 * `hidden` —ya había cinco reglas sueltas arreglando el mismo caso una por
 * una, más abajo en este archivo—. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radio-4);
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; }

/* ---------------------------------------------------------- tipografía */

.t-display { font-size: 64px; line-height: 1;    letter-spacing: -.04em;  font-weight: 600; }
.t-h1      { font-size: 48px; line-height: 1.05; letter-spacing: -.035em; font-weight: 600; }
.t-h2      { font-size: 32px; line-height: 1.1;  letter-spacing: -.03em;  font-weight: 600; }
.t-h3      { font-size: 24px; line-height: 1.2;  letter-spacing: -.02em;  font-weight: 600; }
.t-lead    { font-size: 20px; line-height: 1.35; letter-spacing: -.015em; font-weight: 500; }
.t-body    { font-size: 16px; line-height: 1.5; }
.t-sm      { font-size: 14px; line-height: 1.45; color: var(--text-secondary); }
.t-xs      { font-size: 13px; line-height: 1.4;  color: var(--text-secondary); }
.t-label {
  font-family: var(--mono); font-size: 12px; line-height: 1.35;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary); font-weight: 500;
}
.t-label--accent { color: var(--accent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sec { color: var(--text-secondary); }
.ter { color: var(--text-tertiary); }
.max-60 { max-width: 60ch; } .max-70 { max-width: 70ch; } .max-40 { max-width: 40ch; }

@media (max-width: 767px) {
  .t-display { font-size: 40px; letter-spacing: -.035em; }
  .t-h1 { font-size: 32px; line-height: 1.05; letter-spacing: -.035em; }
  .t-h2 { font-size: 26px; }
  .t-h3 { font-size: 20px; }
  .t-lead { font-size: 17px; }
}

/* Cifras: ancho fijo para que los totales no bailen. */
.precio { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.precio--xl { font-size: 32px; letter-spacing: -.02em; }
.precio--lg { font-size: 24px; letter-spacing: -.01em; }
.precio--md { font-size: 18px; }
.precio--sm { font-size: 15px; }
.precio-antes { color: var(--text-tertiary); text-decoration: line-through; font-weight: 400; }
.cuota { font-family: var(--mono); font-size: 13px; color: var(--text-secondary); }

/* -------------------------------------------------------------- layout */

.env { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 1279px) { .env { padding: 0 24px; } }
@media (max-width: 767px)  { .env { padding: 0 20px; } }

.pila   { display: flex; flex-direction: column; }
.fila   { display: flex; align-items: center; }
.entre  { justify-content: space-between; }
.wrap   { flex-wrap: wrap; }
.auto   { margin-left: auto; }
.g-1 { gap: 4px; } .g-2 { gap: 8px; } .g-3 { gap: 12px; } .g-4 { gap: 16px; }
.g-6 { gap: 24px; } .g-8 { gap: 32px; } .g-12 { gap: 48px; } .g-16 { gap: 64px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; }
.mt-auto { margin-top: auto; }
/* Solo vertical: con el atajo `padding: 56px 0` se reescribía a cero el
   padding lateral que trae .env, y todo quedaba pegado al borde izquierdo.
   .env y .seccion tienen la misma especificidad, así que ganaba la última. */
.seccion { padding-top: 56px; padding-bottom: 56px; }
.seccion--sm { padding-top: 32px; padding-bottom: 32px; }
@media (max-width: 767px) { .seccion { padding-top: 32px; padding-bottom: 32px; } }

.rejilla { display: grid; gap: 24px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) {
  .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}
/* Rejilla que no se desarma en el teléfono. Para celdas cortas —un número y
   dos palabras— apilarlas gasta media pantalla en decir tres cosas. */
.rejilla--firme.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--firme.rejilla--3 { grid-template-columns: repeat(3, 1fr); }

.divisor { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ------------------------------------------------------------- cabecera */

.cab {
  position: sticky; top: 0; z-index: calc(var(--z-sticky) + 1);
  background: var(--surface); border-bottom: 1px solid var(--surface-sunken);
}
.cab__in { display: flex; align-items: center; gap: 40px; height: 64px; }
.cab__marca { font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); }
.cab__nav { display: flex; gap: 28px; font-size: 15px; }
.cab__nav a { color: var(--text-secondary); }
.cab__nav a.on { color: var(--text-primary); font-weight: 500; }
.cab__der { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.cab__sep { width: 1px; height: 20px; background: var(--border); }
.cab__carro {
  font-family: var(--mono); font-size: 14px; color: var(--surface);
  background: var(--realzado-fondo); border-radius: var(--radio-4); padding: 8px 12px;
}
@media (max-width: 1023px) {
  .cab__in { gap: 16px; height: 56px; }
  .cab__nav, .cab__sep, .cab__despacho, .cab__cuenta { display: none; }
}

/* barra inferior mobile: el diseño se decide en 390px */
.tabbar { display: none; }
@media (max-width: 767px) {
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    background: var(--surface); border-top: 1px solid var(--surface-sunken);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 0 14px; color: var(--text-tertiary); font-size: 11px; min-height: 44px;
  }
  .tabbar a.on { color: var(--text-primary); font-weight: 500; }
  .tabbar__ic { font-size: 15px; }
  body { padding-bottom: 64px; }
}

.pie { background: var(--surface-raised); border-top: 1px solid var(--border); padding: 32px 0; margin-top: 64px; }
.pie__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.pie__links { display: flex; gap: 24px; flex-wrap: wrap; }

/* ------------------------------------------------------------- botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1;
  min-height: 44px; padding: 0 22px; border-radius: var(--radio-4);
  border: 1px solid transparent; cursor: pointer; text-align: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: 1; }

.btn--primario { background: var(--accent); color: var(--accent-contrast); font-weight: 600; }
.btn--primario:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.btn--primario:active { background: var(--accent-hover); transform: translateY(1px); }
.btn--primario:disabled { background: var(--surface-sunken); color: var(--text-tertiary); }

.btn--secundario { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn--secundario:hover { background: var(--surface-raised); color: var(--text-primary); border-color: var(--text-secondary); }
.btn--secundario:disabled { color: var(--text-tertiary); border-color: var(--border); background: var(--surface); }

.btn--terciario { background: transparent; color: var(--accent); padding: 0 12px; }
.btn--terciario:hover { background: var(--accent-soft); }
.btn--terciario:disabled { color: var(--text-tertiary); background: transparent; }

.btn--destructivo { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn--destructivo:hover { background: var(--danger-soft); color: var(--danger); }

.btn--bloque { width: 100%; }
.btn--sm { min-height: 36px; font-size: 14px; padding: 0 14px; }
.btn--lg { min-height: 52px; font-size: 16px; padding: 0 28px; }
.btn.cargando { color: transparent !important; position: relative; pointer-events: none; }
.btn.cargando::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--accent-contrast); animation: girar .7s linear infinite;
}
.btn--secundario.cargando::after, .btn--terciario.cargando::after { color: var(--text-secondary); }
@keyframes girar { to { transform: rotate(360deg); } }

.btn-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; background: transparent; border: 0;
  border-radius: var(--radio-4); color: var(--text-primary); font-size: 18px;
  font-family: inherit; cursor: pointer;
}
.btn-icono:hover { background: var(--surface-sunken); }

/* -------------------------------------------------------------- campos */

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label, .etq { font-size: 14px; font-weight: 500; }
.campo .ayuda { font-size: 13px; color: var(--text-secondary); }
.campo .error { font-size: 13px; color: var(--danger); }
.campo .ok    { font-size: 13px; color: var(--success); }

.input, .select, textarea.input {
  font-family: inherit; font-size: 15px; color: var(--text-primary);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radio-4); min-height: 44px; padding: 10px 12px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover { border-color: var(--text-secondary); }
.input:disabled { background: var(--surface-sunken); color: var(--text-tertiary); }
.campo.malo .input, .campo.malo .select { border-color: var(--danger); }

.select-envoltura { position: relative; display: flex; }
.select {
  appearance: none; padding-right: 36px; cursor: pointer;
}
.select-envoltura::after {
  content: ''; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-secondary); border-bottom: 1.5px solid var(--text-secondary);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.check, .radio {
  display: flex; align-items: center; gap: 10px; font-size: 15px;
  min-height: 44px; cursor: pointer; user-select: none;
}
.check input, .radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__caja, .radio__caja {
  width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--border-strong);
  border-radius: var(--radio-2); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease);
}
.radio__caja { border-radius: 50%; }
.check input:checked + .check__caja { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__caja::after {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.radio input:checked + .radio__caja { border-color: var(--accent); border-width: 5px; }
.check input:focus-visible + .check__caja, .radio input:focus-visible + .radio__caja {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.check__n, .faceta__n { margin-left: auto; font-family: var(--mono); font-size: 13px; color: var(--text-tertiary); }
.check.vacio { color: var(--text-tertiary); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radio-4); }
.stepper button {
  width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 18px; color: var(--text-primary);
}
.stepper button:hover { background: var(--surface-sunken); }
.stepper button:disabled { color: var(--text-tertiary); cursor: not-allowed; }
.stepper input {
  width: 44px; text-align: center; border: 0; background: transparent;
  font-family: var(--mono); font-size: 15px; color: var(--text-primary);
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ------------------------------------------------------- badges y chips */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 8px; border-radius: var(--radio-2); font-weight: 500;
  background: var(--surface-sunken); color: var(--text-secondary);
}
.badge--nuevo   { background: var(--accent-soft);  color: var(--accent); }
.badge--ok      { background: var(--success-soft); color: var(--success); }
.badge--aviso   { background: var(--warning-soft); color: var(--warning); }
.badge--malo    { background: var(--danger-soft);  color: var(--danger); }
.badge--solido  { background: var(--realzado-fondo); color: var(--surface); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; color: var(--accent-hover);
  background: var(--accent-soft); border: 0; border-radius: var(--radio-full);
  padding: 7px 12px; cursor: pointer; font-weight: 500;
}
.chip:hover { color: var(--accent); }
.chip--neutro { background: var(--surface-sunken); color: var(--text-secondary); }
/* El activo va macizo, no un tono más de lo mismo: con solo el peso de la
   letra cambiando, tres filtros seguidos se ven los tres iguales y no se
   sabe cuál está puesto. */
.chip--activo {
  background: var(--accent); color: var(--accent-contrast); font-weight: 600;
}
.chip--activo:hover { color: var(--accent-contrast); }
.chip__x { font-size: 13px; line-height: 1; }

/* ---------------------------------------------------------- migas, tabs */

.migas { display: flex; gap: 8px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
/* El separador iba del color de un borde: 1,6:1 contra el fondo, o sea casi
   invisible. No es decoración —es lo que dice que «Catálogo» y «Nuevo» son
   dos niveles y no dos palabras—. */
.migas .sep { color: var(--text-tertiary); }
.migas .actual { color: var(--text-primary); }

.tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--border); }
.tabs button, .tabs a {
  font-family: inherit; font-size: 15px; font-weight: 500; background: transparent; border: 0;
  padding: 12px 0; cursor: pointer; color: var(--text-secondary);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs [aria-selected="true"], .tabs .on { color: var(--text-primary); border-bottom-color: var(--accent); }

.acordeon { border-top: 1px solid var(--border); }
.acordeon details { border-bottom: 1px solid var(--border); }
.acordeon summary {
  list-style: none; cursor: pointer; padding: 18px 0; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 500;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary); transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease);
}
.acordeon details[open] summary::after { transform: rotate(225deg) translate(-2px, 2px); }
.acordeon .cuerpo { padding: 0 0 20px; color: var(--text-secondary); font-size: 15px; }

.paginacion { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  font-family: var(--mono); font-size: 14px; color: var(--text-primary);
}
.paginacion .on { background: var(--realzado-fondo); color: var(--surface); border-color: var(--text-primary); }
.paginacion .off { color: var(--text-tertiary); border-color: var(--surface-sunken); }

/* --------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio-6);
  padding: 24px;
}
.tarjeta--plana { border: 0; background: var(--surface-raised); }
.tarjeta--elev { border: 0; box-shadow: var(--e2); }

/* nunca borde + sombra + fondo a la vez */
.marco { border: 1px solid var(--border); border-radius: var(--radio-6); }

.media {
  background: var(--surface-sunken); border-radius: var(--radio-4);
  aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: 16px;
  color: var(--text-tertiary); overflow: hidden;
  /* El recuadro de «sin foto» se posiciona contra este contenedor. Sin esto se
     ancla al <main> y se va a la esquina de la página. */
  position: relative;
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--1x1 { aspect-ratio: 1 / 1; }

.entrada {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radio-6); color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease);
}
.entrada:hover { border-color: var(--border-strong); color: var(--text-primary); }
.entrada .flecha { font-size: 15px; font-weight: 500; color: var(--accent); margin-top: auto; }

/* ficha de producto en grilla */
.ficha { display: flex; flex-direction: column; gap: 12px; color: var(--text-primary); position: relative; }
.ficha:hover { color: var(--text-primary); }
.ficha:hover .ficha__media { border-color: var(--border-strong); }
.ficha__media {
  position: relative; aspect-ratio: 1 / 1; background: var(--surface-sunken);
  border: 1px solid transparent; border-radius: var(--radio-6); overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease);
}
.ficha__media img { width: 100%; height: 100%; object-fit: cover; }
.ficha__badge { position: absolute; top: 12px; left: 12px; }
.ficha__marca { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--text-secondary); text-transform: uppercase; }
.ficha__nombre { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.ficha__specs { font-size: 14px; color: var(--text-secondary); }
.ficha__pie { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.ficha--horizontal { flex-direction: row; gap: 14px; align-items: flex-start; }
.ficha--horizontal .ficha__media { width: 96px; min-width: 96px; }

/* fila comparativa (pelotas, nutrición): la tabla es el producto */
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th {
  text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-secondary); font-weight: 500;
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabla td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--surface-sunken); vertical-align: middle; }
.tabla tr:hover td { background: var(--surface-raised); }
.tabla .num { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-scroll { overflow-x: auto; }

/* comparador de palas: el dato es contenido de primer nivel */
.comparador { width: 100%; border-collapse: collapse; font-size: 15px; }
.comparador th, .comparador td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.comparador th:first-child, .comparador td:first-child {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); width: 140px;
}
.comparador thead th { font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary);
  font-family: var(--sans); text-transform: none; }

/* --------------------------------------------------------- facetas */

.facetas { display: flex; flex-direction: column; gap: 24px; }
.faceta__titulo { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.faceta__ayuda { font-size: 13px; color: var(--text-secondary); margin-top: 8px; }
.tallas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.talla {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radio-4);
  font-family: var(--mono); font-size: 14px; cursor: pointer; background: var(--surface);
  color: var(--text-primary);
}
.talla:hover { border-color: var(--text-secondary); }
.talla.on { background: var(--realzado-fondo); color: var(--surface); border-color: var(--text-primary); }
.talla.agotada {
  color: var(--text-tertiary); border-color: var(--border); cursor: not-allowed;
  background: linear-gradient(to top left, transparent calc(50% - 1px), var(--border), transparent calc(50% + 1px));
}

/* --------------------------------------------------- carro y dependencia */

.carro-item {
  display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--surface-sunken);
}
.carro-item__media { width: 72px; min-width: 72px; aspect-ratio: 1; background: var(--surface-sunken); border-radius: var(--radio-4); overflow: hidden; }
.carro-item__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.carro-item__tipo { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }
.carro-item__precio { text-align: right; white-space: nowrap; }
/* el hijo cuelga del padre: sangría + guía vertical */
.carro-item--hijo {
  margin-left: 24px; padding-left: 20px; border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--surface-sunken);
}
.carro-item--hijo .carro-item__media { width: 48px; min-width: 48px; }
.dependencia { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); }

.resumen { display: flex; flex-direction: column; gap: 10px; }
.resumen__fila { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.resumen__total { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px; font-size: 18px; font-weight: 600; }

/* --------------------------------------------------------- calendario */

.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dia {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 14px; border-radius: var(--radio-4);
  border: 1px solid transparent; color: var(--text-primary); cursor: pointer; background: transparent;
}
.cal__dia:hover { background: var(--surface-sunken); }
.cal__dia.sin { color: var(--text-tertiary); cursor: not-allowed; }
.cal__dia.hay { border-color: var(--border-strong); font-weight: 500; }
.cal__dia.on { background: var(--realzado-fondo); color: var(--surface); border-color: var(--text-primary); }
.cal__cab { font-family: var(--mono); font-size: 11px; text-transform: uppercase; color: var(--text-tertiary); text-align: center; padding-bottom: 6px; }
.horas { display: flex; gap: 8px; flex-wrap: wrap; }
.hora {
  min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center;
  border: 1px solid var(--border-strong); border-radius: var(--radio-4);
  font-family: var(--mono); font-size: 14px; background: var(--surface); color: var(--text-primary); cursor: pointer;
}
.hora:hover { border-color: var(--text-secondary); }
.hora.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.hora.sin { color: var(--text-tertiary); border-color: var(--border); cursor: not-allowed; text-decoration: line-through; }

/* ---------------------------------------------------------- voucher */

.voucher { border: 1px solid var(--border); border-radius: var(--radio-6); overflow: hidden; }
.voucher__cab { padding: 20px 24px; background: var(--surface-raised); display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.voucher__codigo {
  font-family: var(--mono); font-size: 18px; letter-spacing: .04em;
  background: var(--surface-sunken); border-radius: var(--radio-4); padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.voucher--vencido { opacity: .72; }
.voucher--vencido .voucher__codigo { text-decoration: line-through; color: var(--text-tertiary); }

/* ------------------------------------------------- estados obligatorios */

.estado { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 40px 24px; }
.estado--centro { align-items: center; text-align: center; }
.estado__acciones { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 4px; }

.nota {
  display: flex; gap: 12px; padding: 16px; border-radius: var(--radio-6);
  font-size: 14px; line-height: 1.5; background: var(--surface-raised); color: var(--text-secondary);
}
.nota--ok    { background: var(--success-soft); color: var(--success); }
.nota--aviso { background: var(--warning-soft); color: var(--warning); }
.nota--malo  { background: var(--danger-soft);  color: var(--danger); }
.nota--acento{ background: var(--accent-soft);  color: var(--accent-hover); }
.nota strong { color: inherit; }

.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.punto--aviso { background: var(--warning); }
.punto--malo { background: var(--danger); }

/* skeleton: cada bloque reserva su alto real, nunca un spinner de página */
.esqueleto {
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-raised) 37%, var(--surface-sunken) 63%);
  background-size: 200% 100%; animation: brillo 1.4s ease infinite; border-radius: var(--radio-4);
}
@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* -------------------------------------------- drawer · modal · toast */

.velo {
  position: fixed; inset: 0; background: rgba(11,12,14,.4); z-index: var(--z-drawer);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%);
  background: var(--surface); z-index: calc(var(--z-drawer) + 1);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease);
  display: flex; flex-direction: column; box-shadow: var(--e2);
}
.drawer.abierto { transform: none; }
.drawer__cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer__cuerpo { flex: 1; overflow-y: auto; padding: 0 24px; }
.drawer__pie { border-top: 1px solid var(--border); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }

dialog.modal {
  border: 0; border-radius: var(--radio-6); padding: 0; max-width: 480px; width: calc(100% - 40px);
  background: var(--surface); color: var(--text-primary); box-shadow: var(--e2);
}
dialog.modal::backdrop { background: rgba(11,12,14,.4); }
.modal__cuerpo { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.modal__acciones { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }

/* La imagen de los cuadros. Más ancha que el modal de confirmar —acá hay que
   VER la lámina, no leer una pregunta— y con tope de alto para que en un
   teléfono de pie el botón de bajar no quede debajo del borde. */
dialog.modal--ancho { max-width: 720px; }
.modal--ancho .modal__cuerpo { padding: 20px; max-height: 88vh; overflow-y: auto; }
/* NADA SE ENCOGE. El cuerpo es una columna flex con el alto limitado, así que
   sus hijos se apretaban para caber —y la imagen de adentro no se apretaba con
   ellos: se salía del recuadro y quedaba pintada por debajo del botón de
   descargar, que es exactamente donde se toca. */
.modal--ancho .modal__cuerpo > * { flex: 0 0 auto; }
/* En un teléfono el título se lleva dos líneas y la tapa pegada arriba se
   come un cuarto de la pantalla, que es la que se necesita para mirar. */
.modal--ancho .modal__tapa h2 { font-size: 20px; line-height: 1.2; }
@media (min-width: 768px) { .modal--ancho .modal__cuerpo { padding: 28px; } }

/* La tapa se queda pegada arriba. La vista previa es larga y el que baja a
   mirarla se quedaba SIN SALIDA: la ✕ se iba con el scroll —980 px más
   arriba— y tocar el velo no cierra. En un teléfono eso es un modal del que
   no se puede salir. El fondo es opaco porque la imagen le pasa por debajo. */
.modal--ancho .modal__tapa {
  position: sticky; top: -20px; z-index: 1;
  margin: -20px -20px 0; padding: 20px 20px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
@media (min-width: 768px) {
  .modal--ancho .modal__tapa { top: -28px; margin: -28px -28px 0; padding: 28px 28px 14px; }
}

/* La previa se mira, no se usa: fondo hundido para que se note dónde termina
   la lámina, y ancho completo porque en 375 px cualquier margen la achica
   hasta que los nombres no se leen. */
/* Es un botón porque se puede tocar para abrirla a tamaño real, pero se ve
   como un recuadro: pintarla de botón haría creer que ahí se descarga. */
.cx-previa {
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radio-6); padding: 8px; min-height: 120px; width: 100%;
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-in; font: inherit; color: inherit;
}
.cx-previa:disabled { cursor: default; }
.cx-previa img { display: block; width: 100%; height: auto; border-radius: var(--radio-4); }

.toast-zona { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 16px; background: var(--realzado-fondo); color: var(--surface);
  border-radius: var(--radio-6); padding: 14px 18px; font-size: 14px; box-shadow: var(--e2);
}
.toast a, .toast button { color: var(--surface); text-decoration: underline; background: none; border: 0; cursor: pointer; font: inherit; }

/* --------------------------------------------------------- utilidades */

.solo-movil { display: none; }
@media (max-width: 767px) {
  .solo-movil { display: initial; }
  .no-movil { display: none !important; }
}
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.pegado { position: sticky; top: 88px; }
.barra-movil {
  position: fixed; left: 0; right: 0; bottom: var(--tabbar-alto, 0px); z-index: calc(var(--z-sticky) + 1);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -10px 20px -14px rgba(11, 12, 14, .25);
  padding: 12px 20px; display: flex; align-items: center; gap: 16px;
}
.barra-movil .precio { font-size: 21px; }
@media (min-width: 768px) { .barra-movil { display: none; } }
/* Con las dos barras abajo, el contenido necesita más aire o la última fila
   queda debajo del botón de comprar. */
body:has(.barra-movil) { padding-bottom: calc(var(--tabbar-alto, 64px) + 76px); }

/* ------------------------------------------------- marquesina de marcas */
/* Una banda de marcas que corre sola. No es un carrusel de contenido: no
   esconde nada ni pide interacción, solo dice qué se vende acá. */

.marquesina {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--surface-sunken);
  border-bottom: 1px solid var(--surface-sunken);
  padding: 22px 0;
  /* Aire propio: la banda no debe quedar pegada al hero ni a las entradas. */
  margin: 24px 0 64px;
  /* Los extremos se desvanecen para que no corte en seco contra el borde. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina__pista {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: correr var(--marquesina-dur, 46s) linear infinite;
}
.marquesina:hover .marquesina__pista,
.marquesina:focus-within .marquesina__pista { animation-play-state: paused; }
/* La pista lleva la lista dos veces; al recorrer la mitad vuelve al inicio y
   el salto no se ve. */
@keyframes correr { to { transform: translateX(-50%); } }

.marquesina__marca {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 19px; font-weight: 600; letter-spacing: -.02em;
  color: var(--text-secondary); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.marquesina__marca:hover { color: var(--text-primary); }
.marquesina__marca .n {
  font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--text-tertiary);
}
.marquesina__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }

@media (max-width: 767px) {
  .marquesina { margin: 8px 0 40px; padding: 18px 0; }
  .marquesina__pista { gap: 36px; }
  .marquesina__marca { font-size: 17px; }
}

/* Quien pidió menos movimiento recibe la misma lista, quieta y desplazable. */
@media (prefers-reduced-motion: reduce) {
  .marquesina { overflow-x: auto; }
  .marquesina__pista { animation: none; }
}

/* -------------------------------------------- opciones de una cotización */
/* «Elige una»: la tarjeta entera es el control, no solo el radio. */

label[data-opcion] { transition: border-color var(--dur-fast) var(--ease); }
label[data-opcion]:hover { border-color: var(--border-strong); }
label[data-opcion] input:checked ~ .radio__caja { border-color: var(--accent); border-width: 5px; }
label[data-opcion]:has(input:checked) { border-color: var(--text-primary); background: var(--surface-raised); }
label[data-opcion] input:focus-visible ~ .radio__caja { outline: 2px solid var(--accent); outline-offset: 2px; }
label[data-opcion] input:disabled ~ .radio__caja { opacity: .5; }

/* ------------------------------------------------------ contenedor del panel */
/* Todas las pantallas del back-office comparten el mismo ancho, para que el
   contenido arranque en la misma línea al cambiar de una a otra. Lo que
   necesita ser angosto lo es por dentro, no encogiendo el contenedor: si se
   encoge el contenedor, el borde izquierdo se mueve de página en página.

   1180px es el ancho del área de trabajo que queda al lado de la lateral;
   el relleno crece con la pantalla en vez de saltar por tramos. */

.env--panel { max-width: 1180px; padding-inline: clamp(16px, 3vw, 32px); }
.angosto-640  { max-width: 640px; }
.angosto-760  { max-width: 760px; }
.angosto-960  { max-width: 960px; }
.angosto-1100 { max-width: 1100px; }
.angosto-1200 { max-width: 1200px; }

/* ── Móvil primero: la cotización que abre el cliente ──────────────────
 *
 * Es la pantalla que decide la venta y se abre casi siempre en un teléfono,
 * de pie en un club. Estaba armada como una fila flexible y en 390 px el
 * precio quedaba fuera de la pantalla: el cliente veía el nombre del producto
 * y no lo que costaba.
 *
 * Acá se apila por omisión y se alinea recién cuando hay ancho. La foto deja
 * de ser una miniatura de 64 px: es lo que se está vendiendo.
 */
.item-cot {
  display: grid;
  /* control · foto · datos. El control en su propia pista: encima de la foto
     tapaba el producto, que es justo lo que el cliente vino a mirar. */
  grid-template-columns: 26px 84px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.item-cot:not(:has(.radio__caja)):not(:has(.check__caja)) {
  grid-template-columns: 84px minmax(0, 1fr);   /* modo «se lleva todo» */
}
.item-cot:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.item-cot--fuera { opacity: .55; }
.item-cot__foto {
  width: 84px; padding: 0; border-radius: var(--radio-4);
  background: var(--surface-sunken); overflow: hidden;
}
.item-cot__foto img { width: 100%; height: 100%; object-fit: cover; }
.item-cot__datos { min-width: 0; }
.item-cot__nombre { font-weight: 600; font-size: 16px; line-height: 1.25; }

.item-cot .radio__caja,
.item-cot .check__caja { flex-shrink: 0; }
.item-cot__datos { align-self: center; }
/* El estado marcado vive en `.check input:checked + .check__caja`, que exige un
   ancestro `.check`. La fila de la cotización no lo es —es una grilla propia—,
   así que la casilla se veía SIEMPRE vacía aunque el ítem estuviera elegido.
   El borde azul decía una cosa y la casilla la contraria. */
.item-cot input:checked + .check__caja { background: var(--accent); border-color: var(--accent); }
.item-cot input:checked + .check__caja::after {
  content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.item-cot input:checked + .radio__caja { border-color: var(--accent); border-width: 5px; }
.item-cot input:focus-visible + .check__caja,
.item-cot input:focus-visible + .radio__caja { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 560px) {
  .item-cot { grid-template-columns: 26px 104px minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
  .item-cot:not(:has(.radio__caja)):not(:has(.check__caja)) { grid-template-columns: 104px minmax(0, 1fr); }
  .item-cot__foto { width: 104px; }
  .item-cot__nombre { font-size: 17px; }
}

/* Elegido: se nota sin depender solo del color, que no todos distinguen. */
.item-cot:has(input:checked) .item-cot__nombre { color: var(--text-primary); }
.item-cot:not(:has(input:checked)) { background: var(--surface-raised); }

/* El resumen: fluido en el teléfono, acotado y a la derecha en escritorio. */
.resumen-cot { max-width: 100%; }
@media (min-width: 768px) { .resumen-cot { max-width: 380px; margin-left: auto; } }

/* Nada de esta página puede desbordar a lo ancho: es lo que rompía el precio. */
.item-cot, .item-cot__datos, .resumen-cot { max-width: 100%; }
.item-cot__datos > * { min-width: 0; overflow-wrap: anywhere; }

/* ── Catálogo: móvil primero ───────────────────────────────────────────
 *
 * La grilla tenía `grid-template-columns: 236px 1fr` en línea. En el teléfono
 * la barra de filtros se ocultaba con `.no-movil`, pero su pista de 236 px
 * seguía ahí: las fichas quedaban en el 40% del ancho, con la foto diminuta y
 * todo corrido. Se veía como «no se cargan las fotos» y era la grilla.
 */
.catalogo { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 1024px) {
  .catalogo { grid-template-columns: 236px minmax(0, 1fr); gap: 40px; }
}
.catalogo__productos { min-width: 0; }

/* Dos columnas desde el teléfono. Con una sola, una categoría de 105 productos
   son 105 pantallazos: nadie llega al final y el filtro pasa a ser obligatorio
   en vez de opcional. */
.rejilla--fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
@media (min-width: 768px)  { .rejilla--fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; } }
@media (min-width: 1280px) { .rejilla--fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Los filtros: barra lateral desde 1024, desplegable debajo. Se usa un
   breakpoint propio y no `.no-movil` —que corta en 768— porque la barra
   necesita 236 px de ancho más el contenido, y a 800 px no caben los dos. */
.catalogo__lateral { display: none; }
@media (min-width: 1024px) { .catalogo__lateral { display: block; } }
.filtros-movil { display: block; }
@media (min-width: 1024px) { .filtros-movil { display: none; } }

.filtros-movil {
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); margin-bottom: 20px;
}
.filtros-movil > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; font-weight: 600; list-style: none;
}
.filtros-movil > summary::-webkit-details-marker { display: none; }
.filtros-movil > summary::after {
  content: '›'; font-size: 20px; line-height: 1; color: var(--text-secondary);
  transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease);
}
.filtros-movil[open] > summary::after { transform: rotate(-90deg); }
.filtros-movil[open] > summary { border-bottom: 1px solid var(--border); }
.filtros-movil > div { padding: 0 16px 16px; }

/* En dos columnas angostas, el nombre y las specs no pueden desbordar. */
@media (max-width: 767px) {
  .ficha__nombre { font-size: 16.5px; line-height: 1.28; }
  .ficha__specs  { font-size: 14px; }
  .ficha__marca  { font-size: 12px; }
  .ficha, .ficha__nombre, .ficha__specs { min-width: 0; overflow-wrap: anywhere; }
  /* «Comparar» bajo cada ficha es ruido en una grilla de dos columnas. */
  .ficha [data-comparar] { display: none; }

  /* ── La foto, más grande ──────────────────────────────────────────
     Una pala es alta y angosta. En un cuadrado, con los márgenes que
     traen las fotos de estudio, el producto ocupaba unos 100 px de los
     169 de la tarjeta: no alcanza para distinguir una Metalbone de una
     Rowan sin entrar. En 4:5 el recorte se come margen vacío por los
     lados y le da a la foto un 30% más de superficie, sin perder la
     segunda columna —que es lo que hace navegable un catálogo de cien
     palas. */
  .ficha__media { aspect-ratio: 4 / 5; }
  .rejilla--fichas { gap: 18px 10px; }
  .ficha { gap: 8px; }
  /* El precio manda en la decisión: en la tarjeta chica tiene que leerse
     antes que las especificaciones, no después. */
  .ficha__pie .precio { font-size: 19px; }
  .ficha__pie .precio-antes { font-size: 15px; }
  /* Y en el catálogo del profesor, que es donde se cotiza. */
  .b2b__card-pie .precio--md { font-size: 21px; }
  .b2b__card-pie .precio-antes { font-size: 15px; }
}

/* En un teléfono angosto, cada píxel de margen es píxel que no es foto. */
@media (max-width: 420px) {
  .env { padding: 0 14px; }
  .rejilla--fichas { gap: 16px 8px; }
}

/* ── Profundidad ───────────────────────────────────────────────────────
 *
 * El diseño es deliberadamente sobrio, pero había pasado de sobrio a plano por
 * una razón concreta: página blanca, ficha blanca y —lo decisivo— fotos de
 * producto normalizadas sobre fondo blanco. Tres capas del mismo color, con un
 * borde de 1 px como única separación. Una grilla así se lee como una planilla,
 * no como una vitrina.
 *
 * La corrección es de fondo, no de adorno: se le da una tinta muy leve a la
 * PÁGINA para que lo blanco —la ficha y la foto que trae dentro— se despegue.
 * Un solo token, ningún elemento nuevo, y las 1.783 fotos siguen sirviendo
 * como están.
 */
:root { --surface-page: #F5F6F8; }
body { background: var(--surface-page); }

/* La ficha pasa a ser un objeto sobre la página, no un rectángulo dibujado. */
.ficha__media {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--e1);
}
.ficha:hover .ficha__media {
  box-shadow: 0 10px 24px -14px rgba(11, 12, 14, .32);
  transform: translateY(-2px);
}
.ficha__media { transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-fast) var(--ease); }
/* En un teléfono no hay hover: lo que hay es presión. */
.ficha__media:active { transform: translateY(0) scale(.985); }
@media (prefers-reduced-motion: reduce) {
  .ficha__media, .ficha:hover .ficha__media, .ficha__media:active { transform: none; transition: none; }
}

/* Las superficies con contenido se mantienen blancas para separarse de la
   página tintada. Sin esto quedarían del mismo color y no habría ganado nada. */
.marco, .tarjeta, .cab, .tabla, .filtros-movil { background: var(--surface); }
.tabla-scroll { background: var(--surface); border-radius: var(--radio-6); }

/* La barra inferior del teléfono deja de flotar sobre nada. */
.barra-movil { box-shadow: 0 -1px 0 var(--border), 0 -8px 24px -18px rgba(11,12,14,.35); }

/* ── Una tabla que en el teléfono es una lista de tarjetas ─────────────
 *
 * El catálogo del profesor tiene siete columnas. En escritorio una tabla es lo
 * correcto —se comparan precios de un vistazo—; en un teléfono es scroll
 * horizontal y nadie lee la última columna, que justo es cuánto gana.
 *
 * Se reusa el MISMO marcado: cada celda se apila y se anuncia con su etiqueta
 * desde `data-et`. Duplicar la vista sería garantizar que se desincronicen.
 */
@media (max-width: 767px) {
  .tabla-tarjetas .tabla,
  .tabla-tarjetas .tabla tbody,
  .tabla-tarjetas .tabla tr,
  .tabla-tarjetas .tabla td { display: block; width: auto; }
  .tabla-tarjetas .tabla thead { display: none; }

  .tabla-tarjetas .tabla tr {
    position: relative;
    border: 1px solid var(--border); border-radius: var(--radio-6);
    background: var(--surface); box-shadow: var(--e1);
    padding: 14px 14px 14px 92px;   /* deja el hueco de la foto */
    margin-bottom: 12px; min-height: 96px;
  }
  .tabla-tarjetas .tabla td { border: 0; padding: 0; text-align: left; }

  /* La foto se ancla al hueco de la izquierda y es grande de verdad. */
  .tabla-tarjetas .tabla td:first-child {
    position: absolute; left: 14px; top: 14px; width: 64px;
  }
  .tabla-tarjetas .tabla td:first-child .media,
  .tabla-tarjetas .tabla td:first-child a { width: 64px !important; }

  /* Nombre y SKU mandan; el resto se anuncia con su etiqueta. */
  .tabla-tarjetas .tabla td:nth-child(2) { margin-bottom: 8px; }
  .tabla-tarjetas .tabla td[data-et] {
    display: flex; align-items: baseline; gap: 8px;
    padding: 3px 0; font-size: 14px;
  }
  .tabla-tarjetas .tabla td[data-et]::before {
    content: attr(data-et) ':';
    color: var(--text-tertiary); font-size: 12px;
    text-transform: uppercase; letter-spacing: .04em;
    min-width: 74px; flex-shrink: 0;
  }
  /* El botón de agregar, ancho completo y al alcance del pulgar. */
  .tabla-tarjetas .tabla td:last-child { margin-top: 10px; }
  .tabla-tarjetas .tabla td:last-child .btn { width: 100%; min-height: 44px; }
}

/* ── La cotización: el total al alcance del pulgar ─────────────────────
 *
 * La página mide más de 2.000 px en un teléfono. El total y el botón estaban
 * al final: para saber cuánto es había que recorrerla entera, y para volver a
 * cambiar algo, subir de nuevo. En el teléfono la acción se fija abajo.
 */
@media (max-width: 767px) {
  .barra-cot {
    position: sticky; bottom: 0; z-index: var(--z-sticky);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 28px -20px rgba(11, 12, 14, .45);
    margin: 16px -20px 0;            /* revienta el padding de .env */
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  .barra-cot__form { display: flex; align-items: center; gap: 12px; width: 100%; }
  .barra-cot__total { display: flex; flex-direction: column; line-height: 1.1; }
  .barra-cot__btn { flex: 1; min-height: 48px; }
  /* «No me sirve» no compite con el botón de pagar. */
  .barra-cot > form:last-child .btn { min-height: 44px; }
}
@media (min-width: 768px) { .barra-cot__total { display: none; } }

/* El desglose de envíos, plegado. */
.detalle-envios { margin-top: 12px; }
.detalle-envios > summary {
  cursor: pointer; font-size: 14px; color: var(--accent);
  list-style: none; padding: 6px 0;
}
.detalle-envios > summary::-webkit-details-marker { display: none; }
.detalle-envios > summary::after { content: '›'; display: inline-block; margin-left: 5px; transition: transform var(--dur-fast) var(--ease); }
.detalle-envios[open] > summary::after { transform: rotate(90deg); }

/* Objetivos táctiles: 44 px es el mínimo con el que un pulgar acierta. */
@media (max-width: 767px) {
  .item-cot { min-height: 96px; }
  .btn { min-height: 44px; }
  .select { min-height: 44px; }
}

/* Los filtros del catálogo del profesor: plegados en el teléfono, abiertos
   siempre en escritorio. Son 27 chips; desplegados, el primer producto queda a
   mil píxeles del borde superior. */
.filtros-b2b > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer; font-weight: 600; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); margin-bottom: 16px;
}
.filtros-b2b > summary::-webkit-details-marker { display: none; }
.filtros-b2b > summary::after {
  content: '›'; font-size: 20px; line-height: 1; color: var(--text-secondary);
  transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease);
}
.filtros-b2b[open] > summary::after { transform: rotate(-90deg); }
@media (min-width: 1024px) {
  .filtros-b2b > summary { display: none; }
  .filtros-b2b > div { display: block !important; }
}

/* ── Portada del catálogo central ──────────────────────────────────────
 * Móvil primero: una columna, y la vitrina de producto recién cuando hay
 * ancho para que la foto se vea de verdad.
 */
.portada__hero { grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .portada__hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; }
}

.portada__vitrina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portada__prod {
  display: flex; flex-direction: column; gap: 6px; color: var(--text-primary);
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); box-shadow: var(--e1);
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.portada__prod:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -18px rgba(11,12,14,.4); }
.portada__prod-media { aspect-ratio: 1/1; border-radius: var(--radio-4); overflow: hidden; background: var(--surface-sunken); }
.portada__prod-media img { width: 100%; height: 100%; object-fit: cover; }
.portada__prod-nombre { font-weight: 600; font-size: 14px; line-height: 1.25; }

.portada__familias { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px)  { .portada__familias { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px) { .portada__familias { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.portada__fam {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radio-6); background: var(--surface-sunken); color: #fff;
}
.portada__fam img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.portada__fam:hover img { transform: scale(1.04); }
/* Degradado para que el texto se lea sobre cualquier foto, no solo las claras. */
.portada__fam-txt {
  position: absolute; inset: auto 0 0 0; padding: 28px 12px 12px;
  display: flex; flex-direction: column; gap: 2px;
  /* El degradado sube más de lo que ocupa el texto: un nombre de dos líneas
     —«Equipos de recuperación»— se montaba sobre la foto y no se leía. */
  background: linear-gradient(to top, rgba(11,12,14,.88) 40%, rgba(11,12,14,0));
}
.portada__fam-nombre { font-weight: 600; font-size: 14px; line-height: 1.2; }
.portada__fam-txt .mono { opacity: .8; }

.portada__tiendas { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .portada__tiendas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.portada__quien { grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .portada__quien { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ── Ficha de producto: la galería ─────────────────────────────────────
 * La foto principal usaba `.media`, que aporta su propio fondo y padding. Como
 * las fotos ya vienen normalizadas sobre un fondo claro, se veía un recuadro
 * dentro de otro con una costura entre ambos. Un solo marco, y la foto lo llena.
 */
.galeria__principal {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); box-shadow: var(--e1);
  display: flex; align-items: center; justify-content: center;
}
.galeria__principal img { width: 100%; height: 100%; object-fit: contain; }

.galeria__tiras { display: flex; gap: 10px; flex-wrap: wrap; }
.galeria__tira {
  width: 84px; aspect-ratio: 1 / 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.galeria__tira img { width: 100%; height: 100%; object-fit: contain; display: block; }
.galeria__tira:hover { border-color: var(--border-strong); }
/* Cuál se está mirando: sin esto las miniaturas eran tres botones idénticos. */
.galeria__tira.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

@media (max-width: 767px) {
  .galeria__tira { width: 64px; }
}

/* ── El mostrador del profesor (/panel/b2b) ────────────────────────────
 * Layout de «PISTA Panel» (Claude Design), en los tokens de PISTA.
 * Móvil primero: una columna, controles de 44 px y la barra de cotización
 * fija abajo.
 */
.b2b { padding-bottom: 120px; }          /* deja aire para la barra fija */
.b2b__intro { margin-bottom: 16px; }

.b2b__buscar {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radio-6); padding: 10px 14px; box-shadow: var(--e1);
  margin-bottom: 14px;
}
.b2b__lupa { font-size: 15px; color: var(--text-tertiary); }
.b2b__input {
  border: 0; outline: none; flex: 1; min-width: 0; background: transparent;
  font-family: var(--sans); font-size: 15px; color: var(--text-primary);
}
.b2b__borrar { font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* Categorías: la primera decisión, en tiras deslizables. */
.b2b__cats {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x proximity; margin-bottom: 6px;
}
.b2b__cat {
  display: flex; flex-direction: column; gap: 1px; flex-shrink: 0;
  padding: 9px 14px; border-radius: var(--radio-6);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); scroll-snap-align: start;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.b2b__cat:hover { border-color: var(--border-strong); }
.b2b__cat.on { background: var(--realzado-fondo); border-color: var(--text-primary); color: var(--surface); }
.b2b__cat-nombre { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.b2b__cat-n { font-family: var(--mono); font-size: 12px; color: var(--text-tertiary); white-space: nowrap; }
/* Atenuado sobre el contraste del acento, no blanco translúcido: en la
   muestra oscura el acento es celeste claro y el blanco se pierde. */
.b2b__cat.on .b2b__cat-n { color: var(--accent-contrast); opacity: .68; }

/* Filtros: quedan arriba mientras se recorren 780 productos. */
.b2b__barra {
  position: sticky; top: var(--cab-alto, 64px); z-index: var(--z-sticky);
  background: var(--surface-page);
  padding: 8px 0 12px; box-shadow: 0 8px 8px -8px rgba(11, 12, 14, .10);
}
.b2b__chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.b2b__chip {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 14px; min-height: 42px; cursor: pointer; font-size: 14.5px;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); color: var(--text-primary);
  font: 600 13px/1 var(--sans); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.b2b__chip:hover { border-color: var(--border-strong); }
.b2b__chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.b2b__n { font-family: var(--mono); font-size: 11px; background: var(--surface); color: var(--accent); border-radius: var(--radio-full); padding: 1px 6px; }
.b2b__caret { font-size: 9px; color: var(--text-tertiary); }

.b2b__tokens { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 10px; }
.b2b__token {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  color: var(--accent); border-radius: var(--radio-full);
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.b2b__limpiar { padding: 5px 4px; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }

.b2b__conteo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 2px 0 12px; font-size: 13px; color: var(--text-secondary); font-weight: 600;
}

/* Las tarjetas. Una columna en el teléfono; el `auto-fill` hace el resto. */
.b2b__grilla { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .b2b__grilla { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }

.b2b__card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radio-6); padding: 14px; box-shadow: var(--e1);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.b2b__card:hover { box-shadow: 0 10px 22px -16px rgba(11,12,14,.34); }
/* Lo ya elegido se ve elegido sin tener que bajar a la barra. */
.b2b__card.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.b2b__card-top { display: flex; gap: 13px; align-items: flex-start; }
.b2b__foto {
  width: 104px; height: 130px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--radio-4); border: 1px solid var(--border);
  background: var(--surface); display: flex; align-items: center; justify-content: center;
}
/* `contain` y no `cover`: acá conviven palas altas con bolsos anchos y frascos,
   y cortarle el extremo a un paletero en la pantalla con la que se vende es
   peor que dejar aire arriba. */
.b2b__foto img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
@media (max-width: 380px) { .b2b__foto { width: 88px; height: 110px; } }
.b2b__iniciales { font-size: 15px; color: var(--text-tertiary); letter-spacing: .5px; }
.b2b__datos { flex: 1; min-width: 0; }
.b2b__nombre { display: block; font-size: 17px; font-weight: 700; line-height: 1.28; color: var(--text-primary); }
.b2b__meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 5px; font-size: 14px; color: var(--text-secondary);
}
.b2b__meta > span { min-width: 0; overflow-wrap: anywhere; }
.b2b__meta .mono { font-size: 12.5px; color: var(--text-tertiary); }
.b2b__punto { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
@media (max-width: 480px) { .b2b__punto { display: none; } }
.b2b__tags { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.b2b__stock { font-size: 11px; font-weight: 700; border-radius: var(--radio-4); padding: 2px 7px; white-space: nowrap; }
.b2b__stock--ok    { background: var(--success-soft); color: var(--success); }
.b2b__stock--aviso { background: var(--warning-soft); color: var(--warning); }
.b2b__stock--malo  { background: var(--danger-soft);  color: var(--danger); }
.b2b__tag { font-size: 11px; color: var(--text-secondary); background: var(--surface-sunken); border-radius: var(--radio-4); padding: 2px 7px; font-weight: 600; }

.b2b__card-pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--surface-sunken);
}
.b2b__ganas { font-size: 14px; color: var(--success); font-weight: 700; }
.b2b__agregar { min-height: 40px; padding-left: 20px; padding-right: 20px; }

.b2b__contador { display: flex; align-items: center; gap: 2px; background: var(--accent-soft); border-radius: var(--radio-6); padding: 4px; }
.b2b__paso {
  width: 36px; height: 36px; border: 0; border-radius: var(--radio-4);
  background: var(--surface); color: var(--accent);
  font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
}
.b2b__paso:hover { background: var(--surface-raised); }
.b2b__qty { min-width: 28px; text-align: center; font-size: 14px; color: var(--accent); font-weight: 600; }

/* La cotización en curso, siempre a la vista. */
.b2b__cotiza {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: var(--surface); border-top: 1px solid var(--border);
  box-shadow: 0 -10px 28px -20px rgba(11,12,14,.45);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
}
.b2b__cotiza-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

/* ── Hoja inferior ─────────────────────────────────────────────────── */
.hoja { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; flex-direction: column; justify-content: flex-end; }
.hoja[hidden] { display: none; }
.hoja__fondo { position: absolute; inset: 0; background: rgba(11, 12, 14, .4); animation: hojaFade .18s ease; }
.hoja__panel {
  position: relative; background: var(--surface);
  border-radius: 18px 18px 0 0; max-height: 82vh; width: 100%; max-width: 640px;
  margin: 0 auto; display: flex; flex-direction: column;
  animation: hojaSube .26s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hojaFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes hojaSube { from { transform: translateY(100%) } to { transform: translateY(0) } }
@media (prefers-reduced-motion: reduce) {
  .hoja__fondo, .hoja__panel { animation: none; }
}
.hoja__asa { width: 38px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 10px auto 0; }
.hoja__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 10px; border-bottom: 1px solid var(--border); }
.hoja__cuerpo { flex: 1; overflow-y: auto; padding: 6px 20px 18px; }
.hoja__grupo { padding: 14px 0; border-bottom: 1px solid var(--surface-sunken); }
.hoja__grupo:last-child { border-bottom: 0; }
.hoja__opcion {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; min-height: 40px; border-radius: var(--radio-6);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-primary); font-size: 13px; font-weight: 600;
}
.hoja__opcion:hover { border-color: var(--border-strong); }
.hoja__opcion.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.hoja__opcion.on .mono { color: rgba(255, 255, 255, .7); }
/* Un valor sin resultados se muestra apagado, no se esconde: saber que existe
   y está en cero es información. */
.hoja__opcion.vacia { opacity: .45; }
.hoja__pie { flex-shrink: 0; border-top: 1px solid var(--border); padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; }

/* ── Ficha de producto: móvil primero ──────────────────────────────────
 * La grilla era `1fr 460px` en línea, sin punto de quiebre. En un teléfono la
 * columna de 460 px se llevaba casi todo y la galería quedaba en 110: se veían
 * las miniaturas y la foto principal del producto NO aparecía. En una ficha de
 * producto eso es dejar fuera lo único que el cliente vino a mirar.
 */
.pdp { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr) 460px; gap: 48px; }
  .pdp--tabs { grid-template-columns: minmax(0, 1fr) 380px; }
}
.pdp > * { min-width: 0; }

/* En el teléfono la galería va primero: la foto es el encabezado real. */
@media (max-width: 899px) {
  .galeria__tiras { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .galeria__tira { flex-shrink: 0; }
}

/* ── Detalle del producto en el mostrador ─────────────────────────────
 * Se abre encima del listado. En el teléfono es una hoja alta; en escritorio,
 * dos columnas con la foto a la izquierda.
 */
.hoja__panel--alto { max-height: 92vh; }

.det { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .det { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; } }
.det > * { min-width: 0; }

.det__foto {
  aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radio-6); background: var(--surface);
}
/* En el teléfono la foto se acota: cuadrada a ancho completo ocupaba la primera
   pantalla entera y la descripción —lo que el profesor le lee al alumno—
   quedaba fuera de vista. */
@media (max-width: 719px) {
  .det__foto { aspect-ratio: auto; height: 38vh; min-height: 200px; }
  .det__foto img { object-fit: contain; }
}
.det__foto img { width: 100%; height: 100%; object-fit: contain; }
.det__tiras { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.det__tira {
  width: 60px; aspect-ratio: 1/1; flex-shrink: 0; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radio-4); background: var(--surface);
}
.det__tira img { width: 100%; height: 100%; object-fit: contain; display: block; }
.det__tira.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.det__ganas { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--success); }

.det__ficha { margin-top: 14px; border-top: 1px solid var(--surface-sunken); padding-top: 12px; }
.det__ficha > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); list-style: none; }
.det__ficha > summary::-webkit-details-marker { display: none; }
.det__ficha > summary::after { content: ' ›'; display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.det__ficha[open] > summary::after { transform: rotate(90deg); }

/* La acción, fija al pie de la hoja: se puede agregar sin cerrar ni volver. */
.det__pie {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-top: 1px solid var(--border);
  margin: 18px -20px -18px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
}

/* El interruptor de la comisión. Va visible y no escondido en un menú: el
   profesor tiene que poder apagarlo de un toque justo antes de dar vuelta el
   teléfono, no buscarlo. */
.b2b__ojo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; min-height: 40px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radio-full);
  background: var(--surface); color: var(--text-secondary);
  font: 600 13px/1 var(--sans); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.b2b__ojo:hover { border-color: var(--border-strong); }
.b2b__ojo.on { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.b2b__ojo-i { flex: none; }

/* ── Agenda del profesor ──────────────────────────────────────────────
   Lista por día y no rejilla de 7×16: publica horas parado en la cancha,
   con el teléfono en una mano. La tira de arriba da la vista de semana. */
.ag__nav { margin-bottom: 12px; }
.ag__tira {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-bottom: 28px;
}
.ag__dia {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 2px; border: 1px solid var(--border); border-radius: var(--radio-4);
  background: var(--surface); text-decoration: none; color: inherit; min-width: 0;
}
.ag__dia:hover { border-color: var(--border-strong); }
.ag__dia--hoy { border-color: var(--accent); background: var(--accent-soft); }
.ag__dia-n { font: 500 11px/1 var(--sans); color: var(--text-tertiary); text-transform: uppercase; }
.ag__dia-f { font: 600 17px/1.2 var(--mono); }
.ag__dia-c { font: 400 11px/1 var(--mono); color: var(--text-tertiary); }
.ag__seccion { margin-bottom: 24px; }
/* Solo la primera letra en mayúscula, no cada palabra: con `capitalize` el
   título del día salía «Jueves 3 De Septiembre». */
.ag__titulo { font: 600 15px/1.3 var(--sans); margin: 0 0 10px; text-transform: none; }
.ag__titulo::first-letter { text-transform: uppercase; }
/* Cada hora es una tarjeta apoyada, con la hora afuera a la izquierda como
   en una línea de tiempo: el ojo baja por la columna de horas y se detiene
   en la que busca, sin leer las tarjetas. */
.ag__hora {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px 14px 14px; margin-bottom: 10px;
  border: 1px solid transparent; border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}
.ag__hora--vendida { border-color: var(--success); background: var(--success-soft); }
/* En «Mis horarios» la lista va apretada: es el resumen de la semana que la
   tabla de arriba ya dibuja, y con la tarjeta holgada de «Mi agenda» una
   semana normal ocupaba cuatro pantallas. */
.ag__seccion--compacta .ag__hora { padding: 8px 12px 8px 10px; margin-bottom: 6px; border-radius: 12px; gap: 10px; }
.ag__seccion--compacta .ag__hora .pila { gap: 0; }
.ag__seccion--compacta .ag__titulo { margin-bottom: 6px; }
.ag__hora--debe { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
/* Lo que viene del calendario del profesor no es una hora nuestra: se ve que
   es de otra naturaleza, si no parece una clase publicada. */
.ag__hora--ocupada {
  background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 6px,
              transparent 6px, transparent 12px);
  border-style: dashed;
}
/* La hora, en su propia columna y con el punto de la línea de tiempo. */
.ag__reloj {
  position: relative; font-size: 15px; font-weight: 700; flex: none; width: 52px;
  padding-left: 14px; font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.ag__reloj::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent);
}
.ag__hora--debe .ag__reloj::before { background: var(--danger); }
.ag__hora--ocupada .ag__reloj::before { background: var(--border-strong); }
.ag__acc { margin-left: auto; flex: none; }

/* ── La cabecera del día ──────────────────────────────────────────────
   Como un parte: el punto late si es hoy, el día en versalitas y a la derecha
   el club, cuando todas las clases del día son en el mismo —que es lo normal:
   el profesor va a una cancha y hace ahí toda la tarde. */
.ag__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ag__titulo {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font: 700 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.ag__titulo::first-letter { text-transform: uppercase; }
.ag__pulso { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--border-strong); }
.ag__pulso.late { background: var(--realce); box-shadow: 0 0 0 3px color-mix(in srgb, var(--realce) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) { .ag__pulso.late { animation: latir 2s ease-in-out infinite; } }
.ag__club { font-size: 11px; font-weight: 700; color: var(--accent); text-align: right; }

/* ── La tarjeta de una clase ──────────────────────────────────────────
   Arriba quién viene y si pagó —lo que se lee de un vistazo caminando a la
   cancha—; abajo dónde es y cuánto, o el botón de cobrar. */
.clase { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.clase__cab { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.clase__ava {
  display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 50%; background: var(--accent); color: var(--accent-contrast);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.clase__ava--grupo { background: var(--accent-soft); color: var(--accent); }
/* La columna del nombre pide un ancho mínimo real. Con `flex: 1` a secas y
   las marcas al lado, en un teléfono se le daban treinta píxeles y el nombre
   salía partido letra por letra —«Cla / se / s / de / pá / del»—; las marcas
   bajan a la línea siguiente, que es lo correcto. */
.clase__id { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; min-width: 130px; }
/* El tipo de clase va arriba y chico: dice qué es sin competir con el nombre,
   que es lo que el profesor busca. */
.clase__ojo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
/* `break-word` y no `anywhere`: el segundo entra en el cálculo del ancho
   mínimo y deja que el navegador achique la columna hasta una letra. */
.clase__nom { font-size: 16px; font-weight: 600; letter-spacing: -.015em; overflow-wrap: break-word; }

.clase__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--surface-raised);
  font-size: 12.5px; color: var(--text-secondary);
}
.clase__lugar { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.clase__lugar svg { color: var(--text-tertiary); flex: 0 0 auto; }
.clase__lugar b { font-weight: 600; color: var(--text-primary); }
.clase__sep { color: var(--border-strong); }
/* `margin-left: auto` y no solo `space-between`: cuando el nombre del club es
   largo la plata baja de línea, y ahí `space-between` la deja pegada a la
   izquierda, donde parece otra cosa. */
.clase__precio { margin-left: auto; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Cobrar es rojo y es un botón, no un enlace: es la única acción de la
   tarjeta que mueve plata, y tiene que verse distinta de «ver la orden». */
.cobrar {
  margin-left: auto; padding: 5px 12px; border-radius: var(--radio-full); text-decoration: none;
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 700;
  white-space: nowrap;
}
.cobrar:hover { filter: brightness(1.08); color: #fff; }
/* Los alumnos, debajo de una línea: son el detalle operativo —escribirle,
   cerrar su clase— y no lo primero que se lee. */
.clase__gente { display: flex; flex-direction: column; gap: 8px; }
.clase__gente:not(:empty) { padding-top: 8px; border-top: 1px solid var(--surface-raised); }

/* ── La barra oscura de publicar ──────────────────────────────────────
   Oscura y no blanca: es la única cosa de la pantalla que no es la agenda,
   y entre tarjetas blancas una más se pierde. */
.cta-oscura {
  display: flex; align-items: center; gap: 12px; margin-top: 22px;
  padding: 12px 18px; border-radius: var(--radio-full);
  /* Mismo caso que el botón de anotar alumno: fondo hecho con el color del
     texto, que en la muestra oscura se da vuelta y deja letra clara sobre
     fondo claro. */
  background: var(--tinta-firme); color: var(--inverso, #EAF1FF); text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(11, 28, 48, .8);
}
.cta-oscura:hover { color: #fff; box-shadow: 0 18px 34px -16px rgba(11, 28, 48, .85); }
.cta-oscura__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%; background: var(--realce); color: var(--sobre-realce);
}
.cta-oscura__t { font-size: 13.5px; font-weight: 700; color: #fff; }
.cta-oscura__s { font-size: 11px; color: rgba(255, 255, 255, .6); }
.cta-oscura__ir { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--realce); white-space: nowrap; }

/* Solo la primera letra en mayúscula. El día y el mes vienen en minúscula del
   formateador —así se escriben en español— y acá encabezan una frase. */
.cap1::first-letter { text-transform: uppercase; }

/* Cuánto cambió el mes contra el anterior. Va dentro de la tarjeta verde, así
   que el fondo es un blanco translúcido y no un color propio: dos verdes
   distintos peleando en la misma tarjeta se ven como un error de impresión. */
.delta {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px;
  border-radius: var(--radio-full); background: rgba(255, 255, 255, .18);
  color: var(--realce); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.delta--baja { color: #FFC9C4; }

/* El pie de la billetera: de dónde sale el número. */
.billetera__pie {
  padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px; color: rgba(255, 255, 255, .78);
}
.billetera__pie b { color: #fff; font-weight: 800; }

/* Los dos botones que empiezan una venta. El de vender va en verde eléctrico:
   es lo único de la pantalla que el profesor viene a apretar, y en verde
   profundo se confundía con el resto del panel. */
.btn-accion {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 12px 14px; border-radius: 18px; text-align: center;
  background: var(--surface); color: var(--text-primary); text-decoration: none;
  font-size: 14px; font-weight: 700; line-height: 1.25;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn-accion svg { flex: 0 0 auto; color: var(--accent); }
.btn-accion:hover { color: var(--text-primary); box-shadow: 0 8px 20px -12px rgba(11, 28, 48, .5); }
.btn-accion:active { transform: scale(.985); }
.btn-accion--ya { background: var(--realce); color: var(--sobre-realce); box-shadow: 0 10px 24px -14px rgba(9, 228, 121, .9); }
.btn-accion--ya svg { color: var(--sobre-realce); }
.btn-accion--ya:hover { color: var(--sobre-realce); }

/* ── La tarjeta de la cartera ─────────────────────────────────────────
   Dos números y una barra. La barra no es adorno: dice qué parte de la
   cartera tiene clase por delante, y un número solo no responde si 8 de 24
   es mucho o poco. */
.cartera__ojo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-secondary);
}
.cartera__n { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.cartera__n--acento { color: var(--accent); }
.barra { height: 7px; border-radius: var(--radio-full); background: var(--surface-sunken); overflow: hidden; }
.barra i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }

/* El conteo dentro de una píldora de filtro. */
.pill__n { font-variant-numeric: tabular-nums; opacity: .6; font-weight: 700; }
.pill.on .pill__n { opacity: .75; }

/* ── Las acciones de un alumno ────────────────────────────────────────
   Píldoras y no botones cuadrados: son tres blancos del mismo tamaño en una
   fila, y en un teléfono la píldora perdona el dedo torcido. */
.chip-acc {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px;
  border-radius: var(--radio-full); text-decoration: none;
  background: var(--surface-raised); color: var(--text-primary);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease);
}
.chip-acc svg { color: var(--accent); flex: 0 0 auto; }
.chip-acc:hover { background: var(--surface-sunken); color: var(--text-primary); }
.chip-acc--ir { margin-left: auto; background: var(--accent); color: var(--accent-contrast); }
.chip-acc--ir svg { color: #fff; }
.chip-acc--ir:hover { background: var(--accent-hover); color: #fff; }
/* Cobrar en verde eléctrico: es la única de las tres que mueve plata. */
.chip-acc--cobrar { margin-left: auto; background: var(--realce); color: var(--sobre-realce); font-weight: 800; }
.chip-acc--cobrar svg { color: var(--sobre-realce); }
.chip-acc--cobrar:hover { background: var(--realce); color: var(--sobre-realce); filter: brightness(.96); }
.alum__quedan { color: var(--accent); font-weight: 700; }

/* ── Fichas repetidas ─────────────────────────────────────────────────
   Un aviso, no una alarma: tener dos fichas del mismo alumno no rompe nada
   hoy, solo hace que los números mientan. Va plegado para que no le gane la
   pantalla a la lista, que es a lo que se viene. */
/* `.pcard.dupes` y no `.dupes` a secas: `.pcard` se define más abajo y le
   ganaba el fondo blanco. */
.pcard.dupes { background: var(--warning-soft); }
.dupes__cab { display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none; }
.dupes__cab::-webkit-details-marker { display: none; }
.dupes__cab::after { content: '›'; margin-left: auto; font-size: 19px; color: var(--text-tertiary); transition: transform var(--dur-fast) var(--ease); }
.dupes[open] > .dupes__cab::after { transform: rotate(90deg); }
.dupes__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 10px; background: var(--surface); color: var(--warning);
}
.dupes__t { font-size: 13.5px; font-weight: 700; }
.dupe {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; border-radius: 14px; background: var(--surface);
}
.dupe__par { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
/* Cada ficha con lo que la distingue de la otra. Sin eso, dos botones que
   dicen «Ver a Matías» no se pueden elegir. */
.dupe__f {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 10px; background: var(--surface-raised);
  font-size: 12.5px;
}
.dupe__f b { font-weight: 600; }
.dupe__f .mono { color: var(--text-secondary); }

/* ── La ficha del profesor, como la ve el alumno ───────────────────────
   Arriba de todo y en tarjeta: esta pantalla era catorce campos seguidos y no
   había forma de ver cómo quedaba sin abrir la ficha pública en otra pestaña.
   Lo que se edita vive debajo de lo que edita. */
.perfil {
  display: flex; flex-direction: column; gap: 14px; padding: 18px;
  border-radius: 22px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.perfil__cab { display: flex; align-items: center; gap: 14px; }
.perfil__foto {
  display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto;
  border-radius: 22px; overflow: hidden; background: var(--accent-soft);
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__ini { font-size: 22px; font-weight: 800; color: var(--accent); }
/* La franja de la ficha pública: es un interruptor, no un aviso, así que se
   ve como una fila apretable y no como una nota. */
.perfil__vis {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; background: var(--surface-raised);
}
.perfil__vis-ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 50%; background: var(--surface); color: var(--accent);
}

/* Los tres números de la trayectoria. */
.cifra {
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  padding: 14px 8px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}
.cifra b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.cifra i { font-style: normal; font-size: 11px; color: var(--text-tertiary); }
.cifra--acento { color: var(--accent); }

/* Un logro: ícono, qué fue, y el año a la derecha. Va en tarjetas y no en
   lista con viñeta porque el palmarés es lo que hace que un alumno elija a
   este profesor y no al de al lado. */
.logro {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}
.logro__ico {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 12px; background: var(--accent-soft); color: var(--accent);
}
.logro__t { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.logro__anio { font-size: 12px; font-weight: 700; color: var(--text-tertiary); flex: 0 0 auto; }
.logro__x {
  border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
  color: var(--text-tertiary); font: inherit; font-size: 13px; line-height: 1;
}
.logro__x:hover { color: var(--danger); }

/* La opinión destacada. */
.opinion { gap: 12px; }
.opinion__estrellas { display: inline-flex; gap: 1px; flex: 0 0 auto; font-size: 13px; color: var(--border-strong); }
.opinion__estrellas i { font-style: normal; }
.opinion__estrellas i.on { color: #E8A317; }
.opinion__txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }

/* ══ La ficha pública de un club ══════════════════════════════════════
   Se abre desde la calle, con una mano, para responder cuatro cosas: qué es
   este lugar, está abierto, cómo llego y quién enseña acá. En ese orden. La
   ficha vive fuera del panel, así que se pinta con los tokens de la tienda y
   no hereda nada de `body.panel`. */
/* La ficha del club va en el verde de PISTA y no en el azul de la tienda: es
   de la plataforma, no de un distribuidor. Solo se cambian los tokens de
   acento; el resto del sistema queda igual. */
body.club {
  --accent: #006B47;
  --accent-hover: #00875A;
  --accent-soft: #E2F6EC;
  --accent-contrast: #FFFFFF;
}
/* `main.club` y no `.club` a secas: el BODY también lleva la clase `club`
   —viene de `cuerpoClase`— así que `.club { max-width }` se la aplicaba al
   body entero. La cabecera y todo lo que quisiera ir a sangre quedaban
   encajonados en 880 píxeles, y nadie lo notó mientras nada intentó salirse. */
main.club { max-width: 560px; margin: 0 auto; padding: 0 0 40px; }
@media (min-width: 900px) { main.club { max-width: 880px; padding-bottom: 64px; } }

.club-cab { border-bottom: 1px solid var(--border); background: var(--surface); }
.club-cab__in { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; min-height: 54px; }
.club-cab__marca { font-weight: 800; letter-spacing: .08em; text-decoration: none; color: var(--accent); }
.club-cab__sitio { font-size: 13px; color: var(--text-secondary); }

/* La portada: la foto con el nombre encima. El club se reconoce por la cancha,
   no por el texto. */
.club-hero { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #06301F; }
/* Con tope de alto: a 880px de ancho, 16/7 son 385px de foto y el nombre del
   club queda debajo del pliegue en un portátil. */
@media (min-width: 560px) {
  .club-hero { aspect-ratio: 16 / 7; max-height: 320px; border-radius: 0 0 26px 26px; }
}
.club-hero--sinfoto { background: linear-gradient(140deg, #00875A, #006B47 55%, #00432D); }
.club-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* El velo va SIEMPRE, tenga foto o no: sin él, una foto clara deja el nombre
   blanco sobre cielo blanco y no se lee ninguno de los dos. */
.club-hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2, 20, 12, .92) 0%, rgba(2, 20, 12, .45) 38%, rgba(2, 20, 12, .05) 68%);
}
.club-hero__txt { position: absolute; left: 18px; right: 18px; bottom: 16px; color: #fff; }
.club-hero__dir {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 6px;
  font-size: 12px; color: rgba(255, 255, 255, .85);
}
.club-hero__n { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
@media (min-width: 560px) { .club-hero__n { font-size: 34px; } }
.club-estado {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: var(--radio-full); background: rgba(2, 20, 12, .72);
  backdrop-filter: blur(6px); color: #fff; font-size: 12px; font-weight: 700;
}
.club-estado i { width: 8px; height: 8px; border-radius: 50%; background: #43FE90; }
.club-estado--cerrado i { background: #9AA5AE; }

.club-acc { display: flex; gap: 10px; padding: 16px 18px 0; }
.club-acc__b {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 16px; text-decoration: none;
  background: var(--surface); color: var(--text-primary);
  font-size: 12.5px; font-weight: 600; text-align: center;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.club-acc__b svg { color: var(--accent); }
.club-acc__b:hover { color: var(--text-primary); box-shadow: 0 8px 20px -12px rgba(11, 28, 48, .45); }

.club-desc { margin: 18px 18px 0; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }

.club-sec { padding: 26px 18px 0; }
.club-sec__t {
  display: flex; align-items: center; gap: 9px; margin: 0 0 4px;
  font-size: 18px; font-weight: 700; letter-spacing: -.02em;
}
/* La barrita verde antes del título: separa las secciones sin una línea que
   corte la página en pedazos. */
.club-sec__t span { width: 4px; height: 18px; border-radius: 2px; background: var(--accent); }
.club-sec__s { margin: 0 0 14px; font-size: 13px; color: var(--text-tertiary); }
.club-sec > .pila, .club-sec > .pcard, .club-sec > .fila { margin-top: 14px; }

/* Un profesor del club. */
.prof-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  border-radius: 20px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.prof-card__cab { display: flex; align-items: flex-start; gap: 12px; }
.prof-card__foto {
  display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 18px; overflow: hidden; background: var(--accent-soft);
}
.prof-card__foto img { width: 100%; height: 100%; object-fit: cover; }
.prof-card__foto i { font-style: normal; font-size: 17px; font-weight: 800; color: var(--accent); }
.prof-card__n { font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.prof-card__nota { font-size: 12.5px; font-weight: 700; color: #B07400; }
.prof-card__precio { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.prof-card__horas { display: flex; flex-wrap: wrap; gap: 8px; }
.hora-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px;
  border-radius: var(--radio-full); background: var(--accent-soft); color: var(--accent);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.hora-pill b { font-weight: 800; }
.prof-card__ir { font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--accent); }

/* El día, como cabecera dentro de la lista de horas. */
.club-dia {
  display: block; padding: 12px 16px 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-tertiary);
}
.club-dia::first-letter { text-transform: uppercase; }
.club-hora { font-size: 15px; font-weight: 700; flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Un campeonato en la ficha del club: la fecha en bloque a la izquierda, la
   franja de color al borde. La franja dice de un vistazo si sirve mirarlo
   —abierto, por cerrarse, cerrado— sin leer la etiqueta. */
.torneo {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px 14px 20px; border-radius: 18px; overflow: hidden;
  background: var(--surface); color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.torneo:hover { color: inherit; box-shadow: 0 8px 20px -12px rgba(11, 28, 48, .45); }
.torneo--cerrado { opacity: .72; }
.torneo__franja { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.torneo__franja--ok { background: var(--accent); }
.torneo__franja--aviso { background: var(--warning); }
.torneo__franja--gris { background: var(--border-strong); }
.torneo__fecha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 54px; padding: 8px 6px; flex: 0 0 auto;
  border-radius: 14px; background: var(--surface-raised);
}
.torneo__fecha b { font-size: 18px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.torneo__fecha i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.torneo__n { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; overflow-wrap: anywhere; }
.torneo__ir { font-size: 20px; color: var(--text-tertiary); flex: 0 0 auto; }

/* El mismo bloque de fecha, en el listado del backoffice. */
.camp {
  display: flex; flex-direction: row; align-items: center; gap: 14px;
  text-decoration: none; color: inherit;
}
.camp:hover { color: inherit; box-shadow: 0 6px 18px -10px rgba(11, 28, 48, .4); }
.camp__fecha {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 8px 6px; flex: 0 0 auto;
  border-radius: 14px; background: var(--surface-raised);
}
.camp__fecha b { font-size: 18px; font-weight: 800; line-height: 1; }
.camp__fecha i {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.camp__n { font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
/* Una inscripción anulada se ve tachada y no desaparece: quedó anotada, y
   saber que alguien se bajó es un dato. */
.fila-lista.anulado { opacity: .55; text-decoration: line-through; }
/* En el teléfono los tres botones de una inscripción no caben al lado del
   nombre: se van abajo enteros en vez de partir el nombre en cuatro líneas. */
@media (max-width: 620px) {
  .fila-lista { flex-wrap: wrap; }
  .fila-lista > .fila { width: 100%; }
}

/* ── La grilla de canchas ─────────────────────────────────────────────
   Una fila por franja y una columna por cancha. Se desliza de lado con más
   de tres canchas: achicar las columnas para que quepan seis deja celdas
   donde no cabe el precio, que es lo único que la celda tiene que decir. */
.reja-envoltura {
  overflow-x: auto; border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06); -webkit-overflow-scrolling: touch;
}
.reja { border-collapse: separate; border-spacing: 0; width: 100%; }
.reja__h {
  position: sticky; top: 0; z-index: 2; padding: 10px 8px; text-align: center;
  background: var(--surface-raised); font-size: 11px; font-weight: 700;
  color: var(--text-secondary); white-space: nowrap;
}
.reja__h i { display: block; font-style: normal; font-size: 9.5px; font-weight: 600; color: var(--text-tertiary); }
.reja__hora {
  position: sticky; left: 0; z-index: 1; padding: 6px 12px; text-align: left;
  background: var(--surface); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: 1px 0 0 var(--border);
}
/* Más ancho que antes: la celda ahora lleva «18:30–20:00» además del
   precio, y a 92px eso se parte en dos líneas. */
.reja td { padding: 3px; min-width: 104px; }

/* Dos líneas: el horario del turno y el precio. El horario también está en la
   cabecera de la fila, pero en el teléfono, desplazado hasta la cancha 9, esa
   cabecera ya quedó fuera de pantalla. */
.celda {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  width: 100%; padding: 9px 6px; border: 0; border-radius: 11px;
  font: inherit; font-size: 12.5px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.celda b { font-size: 11px; font-weight: 700; letter-spacing: -.01em; }
.celda span { font-size: 13px; font-weight: 700; }
.celda--libre {
  cursor: pointer; background: var(--accent-soft); color: var(--accent);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.celda--libre b { opacity: .72; }
.celda--libre:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.celda--libre:active { transform: scale(.97); }
.celda--libre.on { background: var(--accent); color: var(--accent-contrast); }
/* Lo tomado SE VE. Antes decía «ocupada» en gris chico y se leía como una
   celda vacía. Marcarlo hace tres cosas: se distingue de un vistazo, empuja a
   reservar antes, y muestra que el club se llena —que le sirve al club—. La
   palabra se mantiene porque «clase» y «tomada» no son lo mismo para el que
   mira, y el color solo no los distingue. */
.celda--ocupado {
  background: var(--danger-soft); color: var(--danger);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 22%, transparent);
}
.celda--ocupado b { opacity: .8; }
.celda--ocupado span { font-size: 11px; font-weight: 600; text-transform: lowercase; }
.celda--pasado {
  background: transparent; color: var(--border-strong); font-weight: 500; font-size: 11px;
}
/* La cancha sin turno a esa hora —la single de 60 mientras el resto va de 90—.
   No está ocupada: no existe ahí. Va en blanco y no en gris, para que no se
   confunda con una celda tomada. */
.celda--nada { min-height: 42px; background: transparent; }

.pinta { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 auto; }
.pinta--libre { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pinta--ocupado { background: var(--danger-soft); box-shadow: inset 0 0 0 1px var(--danger); }

/* La línea de la portada que dice qué es este lugar. */
.club-hero__sub { display: block; margin-top: 5px; font-size: 12.5px; color: rgba(255, 255, 255, .8); }
/* Las marcas de la portada, apiladas: con dos en fila una se sale en 360px. */
.club-hero__marcas { position: absolute; top: 14px; left: 14px; display: flex;
                     flex-direction: column; align-items: flex-start; gap: 6px; }
.club-hero__marcas .club-estado { position: static; }
.club-estado--punta { background: rgba(217, 255, 61, .92); color: #2A2A00; }

/* Una cancha en la vitrina del club, con sus próximas horas y su precio. */
.cancha-fila {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border-radius: 18px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.cancha-fila__ico {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent);
}
/* La hora y su precio, juntos: el precio cambia con la franja y ponerlo
   aparte obliga a cruzarlos a ojo. */
.hora-precio {
  display: inline-flex; flex-direction: column; gap: 1px; padding: 8px 13px;
  border-radius: 13px; text-decoration: none; background: var(--surface-raised);
  color: var(--text-primary); transition: background var(--dur-fast) var(--ease);
}
.hora-precio:hover { background: var(--accent-soft); color: var(--accent); }
.hora-precio b { font-size: 12.5px; font-weight: 700; }
.hora-precio i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }

/* Los servicios, en lista con ícono. */
.servicios { align-items: stretch; }
.servicio {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border-radius: 14px; background: var(--surface); font-size: 13px;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}
.servicio__ico { color: var(--accent); flex: 0 0 auto; display: grid; place-items: center; }

.club-chip {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border-radius: var(--radio-full); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}

/* ── «¿Este es tu club?» ───────────────────────────────────────────────
   Un bloque tranquilo y no una franja de colores: la ficha la abre sobre
   todo un jugador buscando dónde jugar, y esto no es para él. El dueño que
   baja hasta acá lo encuentra igual. */
.club-reclamo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
                padding: 20px; margin-top: 22px; border-radius: 16px;
                background: var(--surface-raised); border: 1px solid var(--border); }
.club-reclamo b { font-size: 16px; font-weight: 700; }
.club-reclamo p { margin: 0; font-size: 13.5px; line-height: 1.55;
                  color: var(--text-secondary); max-width: 58ch; }
.club-reclamo .btn { margin-top: 6px; }

.club-pie {
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 36px 18px 0; text-align: center; font-size: 12px; color: var(--text-secondary);
}

/* ── Anotar un alumno ─────────────────────────────────────────────────
   El botón es el `summary` del formulario: abre y cierra solo, sin una línea
   de JavaScript y sin depender de que el navegador expanda un `<details>` al
   saltar a un ancla, cosa que no todos hacen.

   Va fijo abajo y no al final de la página: en un teléfono el pulgar llega al
   borde inferior, y esta pantalla se abre en la cancha con una mano. Fijo y
   no `sticky` porque siendo el último elemento del `main`, `sticky` no tiene
   dónde pegarse —el bloque contenedor termina justo ahí— y aparecía recién al
   llegar al fondo de la lista.

   SE LLAMA `alta-alumno` Y NO `anotar` porque `anotar` ya es otra cosa: la
   pantalla del anotador del torneo, que lleva esa clase en su <main> Y en su
   <body>. Compartiendo nombre, este bloque le caía encima y la dejaba fija,
   centrada y en `column-reverse`: el encabezado salía ABAJO del contenido, en
   la pantalla que se usa de pie en la cancha. */
.alta-alumno {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: 22px;
  /* `column-reverse` y no `order` sobre el formulario: Chrome envuelve el
     contenido de un `<details>` en un pseudo-elemento propio, así que el
     `order` del formulario no llega a nada y el botón quedaba arriba, con el
     formulario saliéndose de la pantalla por abajo. Invirtiendo la columna, el
     `summary` cae al final se envuelva o no. */
  display: flex; flex-direction: column-reverse; align-items: center;
  width: min(100% - 32px, 560px);
}
.alta-alumno__btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex: 0 0 auto; width: fit-content; padding: 14px 26px; cursor: pointer;
  /* `--tinta-firme` y no `--text-primary`: el fondo de este botón está hecho
     con el color del TEXTO, y en la muestra oscura ese color se da vuelta y
     queda claro — botón claro con letra blanca, o sea invisible. El token
     firme es el mismo azul casi negro en las dos muestras, que es lo que un
     botón flotante necesita: destacar sobre la página, no seguirla. */
  border-radius: var(--radio-full); background: var(--tinta-firme); color: #fff;
  font-size: 14px; font-weight: 700; list-style: none;
  box-shadow: 0 16px 34px -16px rgba(11, 28, 48, .85);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.alta-alumno__btn::-webkit-details-marker { display: none; }
.alta-alumno__btn svg { color: var(--realce); }
.alta-alumno__btn:active { transform: scale(.98); }
.alta-alumno[open] > .alta-alumno__btn { background: var(--surface); color: var(--text-primary); box-shadow: 0 2px 8px -2px rgba(11, 28, 48, .3); }
.alta-alumno[open] > .alta-alumno__btn svg { color: var(--accent); }
.alta-alumno[open] .alta-alumno__txt::after { content: ' · cerrar'; opacity: .55; font-weight: 600; }
/* El formulario va ENCIMA del botón —abajo lo taparía— y con su propio
   desplazamiento: en un teléfono acostado no cabe entero. */
.alta-alumno__form {
  /* `min-height: 0` para que el desplazamiento propio funcione dentro de la
     columna: sin eso el formulario empuja la caja y se sale por arriba. */
  /* El tope va acá y no en la caja de afuera. El navegador envuelve el
     contenido de un `<details>` en un pseudo-elemento propio, así que el
     formulario no es hijo directo del flex y no se encoge con él: la caja
     medía sus 560px y el formulario se salía por arriba igual. Con su propio
     `max-height` funciona en cualquier navegador, envuelva o no. */
  width: 100%; margin-bottom: 12px; max-height: min(62vh, 520px); overflow-y: auto;
  /* Borde además de sombra: el formulario cae encima de tarjetas blancas y
     sin una línea que lo cierre parece que la de abajo se estiró. */
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -22px rgba(11, 28, 48, .6);
}
/* La lista necesita aire abajo o el botón flotante tapa la última tarjeta:
   se ve la mitad de un nombre y parece que la lista se cortó. */
body.panel:has(.anotar) .marco-panel > .trabajo > .env--panel:last-child { padding-bottom: 110px; }
/* Con la barra de pestañas puesta, el botón se apoya encima de ella. */
@media (max-width: 860px) {
  body.panel:has(.tabarra) .anotar { bottom: 86px; }
  body.panel:has(.tabarra) .alta-alumno__form { max-height: min(56vh, 460px); }
  body.panel:has(.tabarra):has(.anotar) .trabajo { padding-bottom: 78px; }
}
@media (max-width: 400px) { .cta-oscura__s { display: none; } }

/* ── La línea de tiempo del día ──────────────────────────────────────
   El riel corre por el canalón de la izquierda y cada hora se cuelga de él
   con su punto. La hora sale de la tarjeta y se va al canalón: así el ojo
   baja por una sola columna de números hasta la que busca, en vez de entrar
   a cada tarjeta a leer con qué empieza. De paso la tarjeta gana los 52px
   que la hora le ocupaba adentro, que en un teléfono es una línea menos por
   cada nombre largo.

   Va colgado de `.ag__linea` y no de `.ag__hora` a secas porque «Mis
   horarios» usa las mismas tarjetas sin canalón: sin ese envoltorio, la
   hora se saldría por la izquierda de la pantalla. */
.ag__linea { position: relative; padding-left: 68px; }
/* El riel. Empieza y termina en el centro del primer y del último punto —de
   borde a borde parece que el día sigue para arriba y para abajo. */
.ag__linea::before {
  content: ''; position: absolute; left: 58px; top: 20px; bottom: 20px;
  width: 2px; border-radius: 2px; background: var(--border);
}
/* La hora, en dos líneas: arriba a la que empieza y abajo a la que termina.
   Es la forma en que se lee un horario —«de nueve a diez»— y libera la línea
   de arriba de la tarjeta, donde antes iba el rango repetido. */
.ag__linea .ag__reloj {
  position: absolute; left: -68px; top: 13px; width: 42px; padding-left: 0;
  display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
}
.ag__linea .ag__reloj b { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ag__linea .ag__reloj i { font-size: 11px; font-style: normal; color: var(--text-tertiary); }
/* El punto, encima del riel. Relleno del color del fondo y no transparente:
   el riel pasa por detrás y se vería cruzándolo. */
/* El punto va relleno y no en anillo: sobre el riel, un aro se confunde con
   el propio riel a un metro de distancia, que es como se mira esto. */
.ag__linea .ag__reloj::before {
  content: ''; position: absolute; left: 53px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface-page), 0 2px 5px -1px rgba(0, 107, 71, .45);
}
.ag__linea .ag__hora--debe .ag__reloj::before {
  background: var(--warning); box-shadow: 0 0 0 3px var(--surface-page);
}
.ag__linea .ag__hora--libre .ag__reloj::before {
  background: var(--realce); box-shadow: 0 0 0 3px var(--surface-page);
}
.ag__linea .ag__hora--ocupada .ag__reloj::before {
  background: var(--border-strong); box-shadow: 0 0 0 3px var(--surface-page);
}
/* Sin la hora adentro, la tarjeta vuelve a su relleno parejo. */
.ag__linea .ag__hora { padding-left: 16px; }
/* La hora publicada que nadie tomó. Fondo teñido y sin sombra: se lee como
   un hueco en el día —que es exactamente lo que es— sin robarle la atención a
   las clases de verdad. */
.ag__hora--libre {
  border: 0 !important; background: var(--surface-raised); box-shadow: none;
}
.libre { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.libre__cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.libre__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto;
  border-radius: 10px; background: var(--surface); color: var(--accent);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.libre__t { font-size: 13.5px; font-weight: 700; }
.libre__abre > summary {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radio-full); cursor: pointer;
  background: var(--surface); color: var(--accent);
  font-size: 13px; font-weight: 700; list-style: none;
  box-shadow: 0 1px 2px rgba(11, 28, 48, .08);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.libre__abre > summary::-webkit-details-marker { display: none; }
.libre__abre > summary:hover { background: var(--accent); color: var(--accent-contrast); }
.libre__abre[open] > summary { background: var(--accent); color: var(--accent-contrast); }
@media (max-width: 520px) { .libre__abre > summary { width: 100%; } }
/* Con espacio, el botón se va al otro extremo de la fila: la hora libre es
   una línea, no una tarjeta de tres pisos. Al abrirla vuelve a apilarse,
   porque el formulario sí necesita el ancho. */
@media (min-width: 521px) {
  .libre { flex-direction: row; align-items: center; justify-content: space-between; }
  .libre__abre { flex: 0 0 auto; }
  .libre:has(.libre__abre[open]) { flex-direction: column; align-items: stretch; }
}
@media (max-width: 400px) {
  /* Con menos de 400px el canalón se come el ancho del nombre del alumno. */
  .ag__linea { padding-left: 56px; }
  .ag__linea::before { left: 46px; }
  .ag__linea .ag__reloj { left: -56px; width: 34px; font-size: 12px; }
  .ag__linea .ag__reloj::before { left: 42px; }
}
@media (max-width: 520px) {
  .ag__tira { gap: 4px; }
  .ag__dia { padding: 8px 0; }
  /* «5 · 3✓» no cabe en una casilla de 48 px: se parte en dos líneas en
     vez de salirse por el borde. */
  .ag__dia-c { font-size: 10px; line-height: 1.25; text-align: center; white-space: normal; }
  .ag__dia-f { font-size: 15px; }
}


/* ── Tabla para marcar horas ──────────────────────────────────────────
   Días arriba, horas al costado. Marcar quince casillas es lo que en el
   formulario de abajo son quince veces el mismo trámite.

   Se desplaza de lado en pantallas angostas con la columna de la hora
   pegada: siete columnas de 44px no caben en 390px, y encoger la casilla
   hasta que quepan la deja imposible de tocar con el dedo. */
.th-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.th { border-collapse: separate; border-spacing: 3px; width: 100%; }
.th__esq { width: 52px; }
.th__hora, .th__dia { padding: 0; background: var(--surface); }
.th__hora {
  position: sticky; left: 0; z-index: 1; width: 52px;
  background: var(--surface); text-align: right;
}
.th__sel {
  width: 100%; min-height: 34px; padding: 4px 6px; cursor: pointer;
  background: none; border: 0; border-radius: var(--radio-2); color: var(--text-secondary);
  font: 500 12px/1.2 var(--mono);
}
.th__sel:hover { background: var(--surface-sunken); color: var(--text-primary); }
.th__dia .th__sel { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; }
.th__dow { font: 500 10px/1 var(--sans); text-transform: uppercase; color: var(--text-tertiary); }
.th__num { font: 600 15px/1 var(--mono); color: var(--text-primary); }
.th__dia--hoy .th__num { color: var(--accent); }
.th__c { padding: 0; min-width: 40px; }
.th__lab { display: block; cursor: pointer; }
.th__lab input { position: absolute; opacity: 0; width: 0; height: 0; }
.th__caja, .th__ya, .th__oc, .th__pas {
  display: block; height: 34px; border-radius: var(--radio-2);
  border: 1px solid var(--border);
}
.th__caja { background: var(--surface); transition: background var(--dur-fast) var(--ease); }
.th__lab:hover .th__caja { background: var(--accent-soft); border-color: var(--accent); }
.th__lab input:checked + .th__caja { background: var(--accent); border-color: var(--accent); }
.th__lab input:focus-visible + .th__caja { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Lo que ya existe se muestra pero no se puede marcar: publicar encima lo
   rechazaría igual, y ofrecerlo sería mentir sobre lo que va a pasar. */
.th__ya {
  background: var(--surface); color: var(--success); border: 1px dashed var(--success);
  font: 700 13px/34px var(--mono); text-align: center;
}
/* RESERVADA ES VERDE LLENO: es la hora que ya se vendió, la buena noticia.
   Estaba en rojo —el color de «algo anda mal»— mientras la lista de abajo
   la pintaba verde: el profesor veía la misma hora de dos colores y la
   disponible, que es la que todavía no rinde, era la que se veía «bien». */
.th__ya--vendida { background: var(--success); color: var(--surface); border: 1px solid var(--success); }
.th__oc {
  background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 4px,
              transparent 4px, transparent 8px);
  border-style: dashed;
}
.th__pas { background: transparent; border-color: transparent; }
.th__ley {
  width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--mono);
}
.th__ley--sel  { background: var(--accent); border-color: var(--accent); }
.th__ley--ya   { background: var(--surface); border: 1px dashed var(--success); color: var(--success); }
.th__ley--vend { background: var(--success); border-color: var(--success); color: var(--surface); }
.th__ley--oc   { background: repeating-linear-gradient(45deg, var(--surface-sunken), var(--surface-sunken) 4px,
                 transparent 4px, transparent 8px); border-style: dashed; }
@media (max-width: 600px) {
  .th { border-spacing: 2px; }
  .th__esq, .th__hora { width: 44px; }
  .th__sel { font-size: 11px; padding: 4px 2px; }
  .th__c { min-width: 0; }
  .th__caja, .th__ya, .th__oc, .th__pas { height: 40px; }
  .th__ya { line-height: 40px; font-size: 12px; }
  .th__sel[data-fila] { min-height: 40px; }
}

/* Selector chico, para los dos filtros que van encima del de club. */
.select--sm { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.campo--club .ayuda { display: block; }

/* El panel de reservar de cada hora. Colgado de su fila, cerrado por
   omisión: abiertos los quince de una semana, la agenda no se lee. */
.ag__panel {
  margin: -6px 0 12px; padding: 14px 16px;
  border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 var(--radio-4) var(--radio-4);
  background: var(--surface);
}
.ag__panel[hidden] { display: none; }

/* La casilla publicada es un botón: se reserva desde la tabla. */
button.th__ya { width: 100%; cursor: pointer; font-family: var(--mono); }
button.th__ya:hover { background: var(--success); color: var(--surface); }
button.th__ya:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Dentro de la hoja el panel ya no cuelga de una fila: no lleva borde propio. */
.hoja__cuerpo .ag__panel { margin: 0; padding: 0; border: 0; background: none; }

/* Tercer estado: la hora está comprometida pero nadie pagó todavía. Ámbar,
   que es el color con que el resto del panel dice «esto está a medias». */
.th__ya--espera { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }
button.th__ya--espera:hover { background: var(--warning); color: var(--surface); }
.th__ley--espera { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.ag__hora--espera { border-color: var(--warning); background: var(--warning-soft); }

/* Cuarto estado: la hora está en la cotización que el profesor arma en este
   momento. Todavía no compromete a nadie —por eso no es ámbar— pero tiene
   que verla en el calendario o la agrega y no queda rastro. */
.th__ya--encot { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
button.th__ya--encot:hover { background: var(--accent); color: var(--surface); }
.th__ley--encot { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ag__hora--encot { border-color: var(--accent); background: var(--accent-soft); }

/* ── Los cuatro datos que deciden la compra ───────────────────────────
   En escritorio van en fila. En el teléfono la rejilla genérica los
   apilaba de a uno: cuatro filas de 70 px que empujaban el precio y el
   botón fuera de la pantalla. De a dos se leen igual de bien y ocupan
   la mitad. */
.destacados {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
}
.destacados__celda { background: var(--surface); padding: 14px; min-width: 0; }
.destacados__etq { font-size: 11px; }
.destacados__valor { font-size: 16px; margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .destacados__celda { padding: 12px 14px; }
  .destacados__valor { font-size: 17px; }
}

/* ── Las dos acciones de la ficha ─────────────────────────────────────
   En escritorio conviven en una fila. En el teléfono no: «Comparar» es
   una acción de segunda y estaba ocupando la mitad del ancho al lado de
   la que cierra la venta. Baja, se achica y pierde el marco. */
.acciones-pdp { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.acciones-pdp__ppal { flex: 1; }
@media (max-width: 767px) {
  .acciones-pdp { flex-direction: column; align-items: stretch; gap: 6px; }
  .acciones-pdp__ppal { width: 100%; }
  .acciones-pdp__sec {
    align-self: flex-start; min-height: 40px; padding: 8px 4px;
    font-size: 14px; background: none; border-color: transparent; color: var(--accent);
  }
}

/* ── Dos columnas que sí colapsan ─────────────────────────────────────
   `grid-template-columns: 1fr 380px` escrito en el HTML no colapsa nunca:
   en un teléfono la columna fija pide sus 380 px, la grilla mide 750 y la
   PÁGINA ENTERA queda desplazable de lado, con el contenido cortado. Era
   el mismo defecto en once pantallas —carro, checkout, clases, zonas,
   portada y cinco del panel—, arreglado una por una cada vez que aparecía.

   Acá va una sola vez: apilado en el teléfono, dos columnas desde 900 px,
   y el ancho de la segunda se pasa con `--col2`. */
.doscol {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start;
}
.doscol > * { min-width: 0; }
@media (min-width: 900px) {
  .doscol { grid-template-columns: minmax(0, 1fr) var(--col2, 380px); gap: 48px; }
}
/* La portada alinea sus dos columnas al centro, no arriba. */
.doscol--centrado { align-items: center; }
/* Sin foto, las iniciales: un cuadrado gris vacío se lee como una imagen
   que no cargó, y una clase no tiene foto porque no es un objeto. */
.carro-item__inicial {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 17px; letter-spacing: .5px; color: var(--text-tertiary);
}

/* ── Qué estás pagando (link de pago) ────────────────────────────────
 *
 * La pantalla del link es lo único que ve alguien que no conoce la tienda:
 * llega por un mensaje, mira, y decide si pone la tarjeta. Por eso la foto
 * es grande y el nombre pesa más que el precio unitario — reconocer el
 * producto va primero que el número.
 */
.cobro { padding: 0; overflow: hidden; }
.cobro__titulo {
  display: block; padding: 16px 20px 0;
}
.cobro__lista { list-style: none; margin: 0; padding: 0; }
.cobro__item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 16px; align-items: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--surface-sunken);
}
.cobro__item:last-child { border-bottom: 0; }

.cobro__foto {
  width: 88px; height: 88px; border-radius: var(--radio-6);
  object-fit: contain; background: var(--surface-sunken);
}
.cobro__foto--vacia {
  display: grid; place-items: center;
  color: var(--text-secondary); font-size: 28px;
}

.cobro__texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cobro__nombre { font-size: 16px; line-height: 1.3; }
.cobro__meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 14px; color: var(--text-secondary);
}
.cobro__desc {
  margin: 4px 0 0; font-size: 14px; line-height: 1.5;
  color: var(--text-secondary);
  /* Dos líneas y corta: la descripción está para reconocer el producto, no
   * para leerla entera. Un párrafo largo empuja el botón de pagar fuera de
   * la pantalla, que es peor que no tenerla. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cobro__precio { white-space: nowrap; font-size: 16px; align-self: start; }

/* Dónde es la clase. Va con el color de acento porque es lo que el alumno
 * busca con la vista cuando abre el link: qué compró y adónde tiene que ir. */
.cobro__lugar { color: var(--accent); }

/* En el teléfono —que es donde se abre casi siempre— el precio baja debajo
 * del texto en vez de apretar el nombre contra el borde. */
@media (max-width: 480px) {
  .cobro__item { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .cobro__foto { width: 80px; height: 80px; }
  /* El precio pasa a la columna del texto, pegado a lo que describe. La
   * descripción SE QUEDA: el teléfono es donde se abre el link, y esconder
   * ahí lo que le da seguridad al cliente es esconderlo siempre. */
  .cobro__precio { grid-column: 2; justify-self: start; margin-top: 2px; }
  .cobro__desc { -webkit-line-clamp: 3; }
}

/* ── Cuenta corriente del alumno ─────────────────────────────────────── */
.kpi { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.kpi__n { font-size: 30px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

.clase { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.clase__cab { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.clase__notas textarea { resize: vertical; min-height: 56px; }
.clase__acciones { flex-wrap: wrap; align-items: center; }
.clase__acciones form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  /* En el teléfono el profesor cierra la clase parado en la cancha: los
   * botones tienen que ser alcanzables con el pulgar, no de 24px. */
  .clase__acciones, .clase__acciones form { width: 100%; }
  .clase__acciones .btn { flex: 1 1 auto; }
  .clase__acciones .select-envoltura, .clase__acciones input[name="motivo"] { width: 100%; max-width: none; }
}

/* ── Ficha pública del profesor ──────────────────────────────────────── */
.ficha-prof { display: flex; gap: 20px; align-items: center; }
.ficha-prof__foto {
  width: 120px; height: 120px; border-radius: 50%;
  object-fit: cover; background: var(--surface-sunken); flex-shrink: 0;
}
.ficha-prof__foto--vacia { display: grid; place-items: center; font-size: 44px; color: var(--text-secondary); }

.logros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.logros__item {
  display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--surface-sunken);
}
.logros__item:last-child { border-bottom: 0; }
.logros__anio { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .ficha-prof { gap: 14px; }
  .ficha-prof__foto { width: 84px; height: 84px; }
}

/* ── Subir la foto del profesor ──────────────────────────────────────── */
.foto-prof { padding: 18px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.foto-prof__actual { display: flex; gap: 10px; flex-shrink: 0; }
.foto-prof__actual img {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; background: var(--surface-sunken);
}
.foto-prof__vacia {
  width: 96px; height: 96px; border-radius: 50%;
  display: grid; place-items: center; font-size: 36px;
  background: var(--surface-sunken); color: var(--text-secondary);
}

/* ── Estrellas ────────────────────────────────────────────────────────
 *
 * Radios de verdad, pintados con CSS. El truco del `row-reverse` es lo que
 * permite iluminar de la estrella elegida hacia la izquierda usando solo el
 * selector `~`, que apunta hacia adelante en el DOM. Sin JavaScript: esto se
 * abre desde un mensaje y una estrella que no responde es una reseña menos.
 */
.estrellas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.estrellas label {
  font-size: 34px; line-height: 1; cursor: pointer;
  color: var(--surface-sunken); transition: color .12s;
}
.estrellas label:hover,
.estrellas label:hover ~ label,
.estrellas input:checked ~ label { color: #F5A623; }
.estrellas input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

.estrellas--fijas { flex-direction: row; font-size: 24px; color: var(--surface-sunken); }
.estrellas--fijas .on { color: #F5A623; }

.resena { padding: 14px 0; border-bottom: 1px solid var(--surface-sunken); }
.resena:last-child { border-bottom: 0; }
.resena__cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.resena__estrellas { color: #F5A623; letter-spacing: 1px; }

/* ── Ficha técnica del alumno ─────────────────────────────────────────
 * Se lee de pie en la cancha, dos minutos antes de la clase: todo visible
 * sin desplegar nada, y lo de salud destacado.
 */
.ficha-al { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.ficha-al__cintas { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-al__pie {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding-top: 12px; border-top: 1px solid var(--surface-sunken);
}

/* =====================================================================
   PANEL · barra lateral y área de trabajo
   ---------------------------------------------------------------------
   Solo aplica bajo `body.panel`, que pone `esPanel`. La vitrina no se toca:
   ahí el acento es el color del distribuidor y la tipografía es IBM Plex.
   El panel, en cambio, es la herramienta de trabajo y se ve igual entrando
   por la tienda que sea.
   ===================================================================== */

body.panel {
  /* La misma del resto del producto. El prototipo usaba la del sistema, que
     se lee muy bien y no es de nadie: saltando de la tienda al panel se nota
     que son dos programas distintos. Instrument Sans es la que ya llevan la
     ficha del club, el catálogo y la vitrina. */
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* BLANCO · ZAFIRO, la muestra por omisión.
     Grises neutros y acento azul: es el backoffice como herramienta, no como
     extensión de la cancha. El verde queda para lo público —la ficha del
     club, la tienda—, donde vende; acá lo que importa es que una tabla de
     doscientas filas se lea ocho horas seguidas sin cansar. */
  --surface-page:   #F5F5F7;
  --surface:        #FFFFFF;
  --surface-raised: #FAFAFC;
  --surface-sunken: #EEEEF2;
  --border:         #E5E5EA;
  --border-strong:  #DCDCE3;
  --text-primary:   #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary:  #8E8E93;

  /* EL VERDE DEL PRODUCTO, el mismo de la ficha del club y del catálogo. El
     prototipo lo traía azul y se veía bien, pero dejaba el backoffice como
     otro programa: se administra el mismo negocio que se vende, y cruzar de
     una pantalla a otra no debería sentirse como cambiar de aplicación. */
  --accent:         #1F4D3A;
  --accent-hover:   #123928;
  --accent-soft:    #E4EDE8;
  /* La letra que va ENCIMA del acento. Va aparte y no fija en blanco porque
     en la muestra oscura el acento es un celeste claro: blanco sobre celeste
     da 2,1:1, o sea nada. Catorce reglas la tenían escrita a mano —la hora
     elegida, el día del calendario, la pestaña del B2B, el chip de unir
     alumnos— y las catorce se volvían ilegibles al cambiar de muestra. */
  --accent-contrast:#FFFFFF;

  /* El verde eléctrico. No es el acento: es el realce de lo que el profesor
     gana, y por eso aparece SOLO en la plata que es suya. Usarlo en botones
     lo gastaría. */
  --realce:         #43FE90;
  --sobre-realce:   #00210C;

  /* LA TINTA FIRME: el azul casi negro de los elementos que tienen que
     destacar SOBRE la página en vez de seguirla —el botón flotante de anotar
     alumno, la tarjeta de acción de la agenda—. No cambia entre muestras a
     propósito. Antes usaban `--text-primary`, que es el color del TEXTO: en
     la muestra oscura se da vuelta y quedaban claros, con su letra blanca
     encima. Un botón invisible no da error: simplemente nadie lo aprieta. */
  --tinta-firme:    #0B1C30;
  /* El verde de «+5 este mes». En claro va casi negro sobre verde pálido; en
     oscuro el fondo también se oscurece, así que la letra tiene que aclararse
     o queda verde sobre verde. */
  --marca-gana-txt: #00543a;

  /* Esquinas del prototipo: 9 en lo que se aprieta, 16 en lo que contiene. */
  --radio-4: 9px;
  --radio-6: 16px;
}

/* La lateral acompaña a la muestra: clara en Zafiro, oscura en Grafito. Antes
   era oscura siempre. Sobre una página blanca, una columna negra de 248px
   pesa como un bloque y compite con la pantalla; con el mismo blanco y una
   línea, la navegación se corre al costado y deja el trabajo al medio. */
body.panel {
  --lat-fondo:  #FAFAFC;
  --lat-txt:    #6E6E73;
  --lat-txt-on: #1D1D1F;
  --lat-hover:  #EEEEF2;
  --lat-borde:  #E5E5EA;
}
/* En oscuro el panel se oscurece entero. Antes acá solo cambiaba el acento y
   el resto quedaba claro: un verde brillante sobre fondo blanco, ilegible.
   El `data-tema` va en <html>, no en el <body>: preguntarlo sobre el body
   daba siempre verdadero. */
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) body.panel {
    --surface-page:   #111214;
    --surface:        #1C1D21;
    --surface-raised: #191A1E;
    --surface-sunken: #232429;
    --border:         #303238;
    --border-strong:  #45474E;
    --text-primary:   #F5F5F7;
    --text-secondary: #A6A8B1;
    --text-tertiary:  #86888F;
    --accent:         #5FD2B5;
    --accent-hover:   #8CE3CC;
    --accent-soft:    #16302A;
    --accent-contrast:#04231C;
    /* La lateral queda un punto más clara que la página, al revés que en
       claro, o se pierde el límite entre las dos. */
    --lat-fondo:      #0B0C0E;
    --lat-txt:        #969AA5;
    --lat-txt-on:     #F5F5F7;
    --lat-hover:      #202227;
    --lat-borde:      #292B30;
    --marca-gana-txt: #7BF3BE;
    /* Sobre una página oscura, lo que destaca es lo CLARO. Con la letra
       oscura encima, que es la única que se lee sobre claro. */
    --realzado-fondo: #EAF0F4;
    --realzado-txt:   #0B0F14;
  }
}
/* El mismo juego, para quien eligió el tema oscuro a mano. Está repetido
   porque una lista de selectores no puede cruzar un @media; es lo mismo
   que hace el bloque oscuro de arriba del archivo. */
:root[data-tema="oscuro"] body.panel {
  --surface-page:   #111214;
  --surface:        #1C1D21;
  --surface-raised: #191A1E;
  --surface-sunken: #232429;
  --border:         #303238;
  --border-strong:  #45474E;
  --text-primary:   #F5F5F7;
  --text-secondary: #A6A8B1;
  --text-tertiary:  #86888F;
  --accent:         #5FD2B5;
  --accent-hover:   #8CE3CC;
  --accent-soft:    #16302A;
  --accent-contrast:#04231C;
  /* La lateral queda un punto más clara que la página, al revés que en
     claro, o se pierde el límite entre las dos. */
  --lat-fondo:      #0B0C0E;
  --lat-txt:        #969AA5;
  --lat-txt-on:     #F5F5F7;
  --lat-hover:      #202227;
  --lat-borde:      #292B30;
  --marca-gana-txt: #7BF3BE;
  --realzado-fondo: #EAF0F4;
  --realzado-txt:   #0B0F14;
}

.marco-panel { display: flex; min-height: 100vh; align-items: flex-start; }

/* ------------------------------------------------------------- lateral */

.lateral {
  flex: 0 0 248px; width: 248px; align-self: stretch;
  position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 14px;
  background: var(--lat-fondo); color: var(--lat-txt-on);
  z-index: var(--z-sticky);
}
.lateral__marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: inherit; }
.lateral__marca:hover { color: inherit; }
.lateral__punto {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  background: var(--accent); box-shadow: inset 0 0 0 3px rgba(255,255,255,.14);
}
.lateral__marca-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.lateral__nombre { font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.lateral__rol { font-size: 12px; color: var(--lat-txt); }

/* El espacio de trabajo: de quién es este panel. La inicial es lo que se
   distingue de reojo cuando alguien administra dos cosas distintas. */
.lateral__espacio {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 8px; margin-bottom: 8px;
  border-block: 1px solid var(--lat-borde);
}
.lateral__mono {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
  font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 500; line-height: 1;
}
.lateral__espacio-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lateral__espacio-t b {
  font-size: 13.5px; font-weight: 600; color: var(--lat-txt-on);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral__espacio-t small { font-size: 11px; color: var(--lat-txt); margin-top: 2px; }

/* Los caminos de vuelta a lo público: se administra a ciegas si no hay forma
   de ver cómo quedó lo que uno acaba de guardar. Van pegados al pie y no en
   el menú: no son secciones del panel, son salidas. */
.lateral__salidas { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; }
.lateral__salidas a {
  font-size: 12.5px; color: var(--lat-txt); padding: 7px 10px; border-radius: 7px;
}
.lateral__salidas a:hover { background: var(--lat-hover); color: var(--lat-txt-on); }

.lateral__nav { display: flex; flex-direction: column; gap: 2px; }
/* El rótulo de cada tramo del menú. */
.lateral__grupo {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--lat-txt); padding: 0 13px; margin: 20px 0 6px;
}
.lateral__grupo:first-child { margin-top: 4px; }
.lateral__it {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: var(--lat-txt);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lateral__it svg { flex: none; opacity: .85; }
.lateral__it:hover { background: var(--lat-hover); color: var(--lat-txt-on); }
.lateral__it.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.lateral__it.on svg { color: var(--accent); opacity: 1; }

.lateral__pie {
  /* Sin `margin-top: auto`: ahora el que empuja hacia abajo es el bloque de
     salidas, que va justo encima. Con los dos, quedaba un hueco entre ellos. */
  padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--lat-borde);
  display: flex; align-items: center; gap: 10px;
}
.lateral__ini {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lat-hover); color: var(--lat-txt);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.lateral__quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lateral__quien-n {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lateral__salir {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--lat-txt); text-align: left;
}
.lateral__salir:hover { color: var(--lat-txt-on); text-decoration: underline; }

/* ------------------------------------------------------- área de trabajo */

.trabajo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trabajo__cab {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.trabajo__cab-in { display: flex; align-items: center; gap: 12px; min-height: 58px; }
/* La cabecera dice DÓNDE se está, no de qué se trata: el título grande lo
   pone cada pantalla. Por eso va del tamaño del texto corrido y en el gris
   secundario — si se pone a competir, arriba quedan dos titulares. */
.trabajo__titulo { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 899px) { .trabajo__titulo { font-size: 16px; color: var(--text-primary); } }
.trabajo__quien { margin-left: auto; }

body.panel .marco-panel > .trabajo > .env--panel:last-child { padding-bottom: 48px; }

.lateral__abrir {
  display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: -6px;
  background: none; border: 1px solid var(--border); border-radius: var(--radio-4);
  color: var(--text-primary); cursor: pointer;
}
.lateral__velo { display: none; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* En el teléfono la lateral pasa a ser un cajón: 248px fijos sobre 390px de
   pantalla no dejan ancho para trabajar. */
@media (max-width: 899px) {
  .lateral {
    position: fixed; inset: 0 auto 0 0; max-height: none; height: 100%;
    transform: translateX(-100%); transition: transform var(--dur-base) var(--ease);
    z-index: var(--z-drawer);
  }
  .lateral.abierta { transform: none; box-shadow: var(--e2); }
  .lateral__abrir { display: inline-flex; }
  .lateral__velo:not([hidden]) {
    display: block; position: fixed; inset: 0;
    background: rgba(12,17,22,.45); z-index: calc(var(--z-drawer) - 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lateral { transition: none; }
}

/* Cada alumno de una hora, en la agenda. Envuelve en el teléfono en vez de
   empujar el bloque: nombre, teléfono y los dos botones de cerrar la clase no
   caben en una línea de 390px. */
.ag__alumno { row-gap: 4px; }
.ag__alumno form { display: flex; gap: 6px; margin-left: auto; }
@media (max-width: 599px) { .ag__alumno form { margin-left: 0; } }

/* En la agenda todo está vendido, así que teñirlo todo de verde no distingue
   nada. El color queda para lo único que pide acción: la hora con alguien que
   todavía no paga. */
.ag__hora--debe { border-color: var(--warning); }

/* Los cuatro números de la agenda se quedan en dos columnas en el teléfono.
   Apilados de a uno ocupaban media pantalla antes de la primera clase, que es
   lo que se viene a ver. */
@media (max-width: 639px) {
  .ag__resumen { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ag__resumen .tarjeta { padding: 12px; }
  .ag__resumen .precio--xl { font-size: 24px; }
}

/* Una fila de la ficha técnica: etiqueta a la izquierda, valor a la derecha.
   Iba como `.fila.entre`, que centra verticalmente y no limita el ancho: un
   valor largo —la lista de certificaciones de la creatina, siete ítems— se
   metía encima de la etiqueta. Ahora el valor se queda en su columna y la
   etiqueta no se mueve de arriba. */
.par-ficha {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 10px 0; border-bottom: 1px solid var(--surface-sunken);
}
.par-ficha__k { flex: none; max-width: 45%; }
.par-ficha__v { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }

/* La tarjeta de lo que está esperando pago. Se distingue por el borde y no
   por relleno: es un dato, no una alarma —tener links sin pagar es lo normal
   en el día de un profesor. */
.tarjeta--espera { border-color: var(--warning); }

/* La barra de la cotización, en el panel, arranca DESPUÉS de la lateral. Iba
   de borde a borde y le quedaba encima al bloque del profesor —su nombre y
   «Cerrar sesión»— que vive abajo del todo en la barra oscura. */
body.panel .b2b__cotiza { left: 248px; }
@media (max-width: 899px) { body.panel .b2b__cotiza { left: 0; } }

/* ── Sugerencias de dirección ────────────────────────────────────────
   La lista del autocompletar de Google, dibujada por nosotros. Sale del
   flujo para no empujar el resto del formulario cada vez que aparece, y
   por eso el campo se vuelve `relative`: la lista se cuelga de él y no de
   la página, así que sigue al campo si el formulario tiene su propio
   desplazamiento.

   El z-index va sobre `--z-sticky` porque en el checkout la barra del
   resumen queda pegada abajo y tapaba la sugerencia de más abajo. */
.dir { position: relative; display: flex; }

.sug {
  position: absolute; top: 100%; left: 0; right: 0; margin: 4px 0 0;
  z-index: calc(var(--z-sticky) + 2);
  list-style: none; padding: 4px; max-height: 288px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radio-6); box-shadow: var(--e2);
}
.sug[hidden] { display: none; }

.sug__op {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; border-radius: var(--radio-4); cursor: pointer;
}
/* `.en` es la que está marcada con el teclado. Se pinta igual que el hover
   para que subir y bajar con las flechas se lea igual que pasar el mouse:
   son la misma cosa vista de dos maneras. */
.sug__op:hover, .sug__op.en { background: var(--surface-sunken); }
.sug__que   { font-size: 15px; color: var(--text-primary); }
.sug__donde { font-size: 13px; color: var(--text-secondary); }

/* Cuando la dirección quedó ubicada en el mapa. Es un borde, no un cartel:
   confirma sin ocupar una línea, y si no se nota tampoco se pierde nada. */
.campo--ubicado .input { border-color: var(--success); }

/* ── Horario de la semana ────────────────────────────────────────────
   Siete filas de «día · abre · cierra». En rejilla y no en flex por fila
   para que las tres columnas queden alineadas entre días: con flex, un
   «Miércoles» empuja sus horas y la columna se ve quebrada. */
.semana { display: grid; gap: 6px; }
/* Los dos campos de hora con ancho fijo y no `1fr`: una hora son cinco
   caracteres, y estirados a media pantalla parecen esperar una frase. La
   última columna se come el espacio que sobra. */
.semana__dia {
  display: grid; grid-template-columns: 92px 132px auto 132px 1fr; gap: 8px;
  align-items: center;
}
.semana__nom { font-size: 14px; color: var(--text-secondary); }
.semana__a   { font-size: 13px; color: var(--text-tertiary); }
.semana__nota { grid-column: 5; }
.semana .input { min-height: 38px; padding: 6px 8px; }

@media (max-width: 560px) {
  /* El nombre del día arriba y las horas debajo: en 320px, la etiqueta más
     dos campos de hora no caben y el segundo se sale de la pantalla. */
  .semana__dia { grid-template-columns: 1fr auto 1fr; }
  .semana__nom { grid-column: 1 / -1; font-weight: 500; }
  .semana__nota { grid-column: 1 / -1; }
}

/* La ficha pública: la semana como lista, no como frase. */
.horas-club { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.horas-club div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.horas-club dt { color: var(--text-secondary); }
.horas-club dd { margin: 0; font-variant-numeric: tabular-nums; }
.horas-club .cerrado { color: var(--text-tertiary); }
/* Hoy, en negrita: es la línea que se busca al abrir la ficha. */
.horas-club .hoy dt, .horas-club .hoy dd { font-weight: 600; color: var(--text-primary); }

/* ── Tabla de precios del profesor ───────────────────────────────────
   La casilla con el signo pegado adentro: sin él, un número suelto en una
   columna de números no se lee como plata, y el profesor se pregunta si
   son pesos o miles. */
.precio-caja { position: relative; display: flex; align-items: center; }
.precio-caja__signo {
  position: absolute; left: 10px; font-size: 14px; color: var(--text-tertiary);
  pointer-events: none;
}
.precio-caja .input { padding-left: 24px; min-height: 40px; width: 132px; text-align: right; }
/* Las flechitas de `type=number` roban ancho y nadie sube un precio de a uno. */
.precio-caja .input::-webkit-outer-spin-button,
.precio-caja .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.precio-caja .input[type=number] { -moz-appearance: textfield; }

.tabla--precios td { vertical-align: middle; }
/* La fila sin precio, apagada: se ve de un vistazo qué se ofrece y qué no,
   que es la pregunta que trae al profesor a esta pantalla. */
.tabla--precios tr.sin-precio td:not(:nth-child(4)) { opacity: .55; }
.precio-caja__legible { display: block; margin-top: 2px; text-align: right; width: 132px; }

/* ── Evaluación de la clase ──────────────────────────────────────────
   El selector de 1 a 5 del profesor: botones y no un <select>, porque se
   llena en el teléfono al lado de la cancha y abrir un desplegable por cada
   uno de veinte ítems es lo que hace que no se llene ninguno. */
/* Se llama `escala` y no `punto`: `.punto` ya era el circulito verde de
   «con stock», con `width: 8px` y `border-radius: 50%`. Reusar el nombre dejó
   los seis botones convertidos en seis puntitos de ocho píxeles, uno encima
   de otro, y el profesor sin dónde puntuar. */
.escala { display: flex; gap: 4px; }
/* El ancho va en el <label>, que es el ítem flexible, y como base fija y no
   `auto`: el cuadro de adentro es un grid con una sola letra, así que su
   ancho intrínseco es el de esa letra. */
.escala__n { position: relative; margin: 0; flex: 0 0 38px; }
.escala__n input { position: absolute; opacity: 0; width: 0; height: 0; }
.escala__n span {
  display: grid; place-items: center; width: 100%; min-height: 38px;
  border: 1px solid var(--border-strong); border-radius: var(--radio-4);
  font-size: 14px; font-variant-numeric: tabular-nums; cursor: pointer;
  background: var(--surface); color: var(--text-primary);
}
.escala__n input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.escala__n input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.escala__n--cero span { color: var(--text-tertiary); }
.escala__n--cero input:checked + span {
  background: var(--surface-sunken); border-color: var(--border-strong); color: var(--text-tertiary);
}
.tabla--rubrica td { vertical-align: middle; padding-top: 8px; padding-bottom: 8px; }

/* Lo que significa la nota elegida, debajo de la escala. Ancho acotado para
   que una frase larga no estire la columna y descuadre las diecisiete filas. */
.escala__que { display: block; margin-top: 4px; max-width: 320px; line-height: 1.35; }

/* ── La nota, en el panel ────────────────────────────────────────────
   El anillo con el número adentro. En la ficha del alumno; el informe tiene
   el suyo, más grande y con su propio mundo. */
.anillo { position: relative; width: 120px; height: 120px; flex: 0 0 auto; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.anillo__fondo { stroke: var(--surface-sunken); }
.anillo__linea { stroke: var(--accent); transition: stroke-dashoffset var(--dur-lento, .6s) var(--ease); }
.anillo__n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-primary); letter-spacing: -.02em;
}
/* La animación de llenado: entra dibujándose. Es medio segundo y se hace una
   vez —el informe se abre, se mira y se cierra—, así que no cansa. */
@media (prefers-reduced-motion: no-preference) {
  /* Arranca vacío y se dibuja. El «vacío» es el largo de ESTE círculo, que
     lo pasa la vista: con un número fijo, el anillo chico partía desde más
     allá de su propia vuelta. */
  .anillo__linea { animation: anillo-entra .7s var(--ease) both; }
  @keyframes anillo-entra { from { stroke-dashoffset: var(--vuelta, 327); } }
}

/* Cómo viene: las notas de las clases anteriores. */
.hist { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.hist__u { flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
           justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.hist__n { font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.hist__b { width: 100%; height: 100%; display: flex; align-items: flex-end;
           background: var(--surface-sunken); border-radius: var(--radio-4); overflow: hidden; }
.hist__b span { width: 100%; background: var(--border-strong); border-radius: var(--radio-4); min-height: 3px; }
/* La de hoy, en el color de la marca: es la que se viene a mirar. */
.hist__u--hoy .hist__b span { background: var(--accent); }
.hist__u--hoy .hist__n { color: var(--text-primary); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .hist__b span { animation: hist-sube .5s var(--ease) both; }
  @keyframes hist-sube { from { height: 0 !important; } }
}
/* La nota que va saliendo mientras el profesor puntúa. */
.nota-viva { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
             border: 1px solid var(--border); border-radius: var(--radio-6);
             background: var(--surface); }
.nota-viva[hidden] { display: none; }
.nota-viva__n { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums;
                color: var(--accent); line-height: 1; }
.anillo--chico { width: 80px; height: 80px; }
.anillo--chico .anillo__n { font-size: 22px; }
.hist--mini { height: 44px; gap: 4px; width: 160px; }
.hist--mini .hist__b { border-radius: 2px; }
/* En la versión chica el relleno gris sobre fondo gris no se ve: cuatro
   cuadros casi vacíos no dibujan ninguna curva. Sin pisar la de hoy, que va
   en el color de la marca y es la que se busca. */
.hist--mini .hist__u:not(.hist__u--hoy) .hist__b span { background: var(--text-tertiary); }

/* ═══ El informe de la clase ═════════════════════════════════════════
   La única página del sistema que no vive dentro de una tienda: se abre
   desde un link, se mira una vez y casi siempre en el teléfono. Por eso
   tiene su propio mundo —oscuro, angosto, de tarjetas— y no sigue el tema
   del navegador: acá el diseño está decidido y es el mismo para todos.

   El acento SÍ es el de la tienda: el informe lo manda un profesor que
   trabaja para alguien, y esa marca tiene que verse. El realce en cambio es
   fijo, y es lo que hace que se vea de deporte y no de planilla. */
body.informe {
  --fondo:      #090D16;
  --papel:      #0B111E;
  --tarjeta:    #131C2D;
  --tarjeta-2:  #121927;
  --linea:      #233047;
  --linea-suave: rgba(35, 48, 71, .6);
  --tinta:      #F1F5F9;
  --tinta-2:    #94A3B8;
  --tinta-3:    #64748B;
  --hueco:      #1E293B;
  --realce:     #D4FF00;
  --ok:         #34D399;
  --ojo:        #FBBF24;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}
/* El informe se lee como una aplicación de teléfono, también en el
   computador: una columna angosta y centrada. Estirarlo a 1200px deja los
   textos de tres palabras al medio de una línea vacía. */
.inf { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--papel);
       border-inline: 1px solid var(--linea-suave); }

.inf__cab { padding: 26px 20px 16px; background: linear-gradient(to bottom, #131D31, transparent); }
.inf__h1 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.inf__fecha { color: var(--tinta-2); font-weight: 700; }
.inf__cuerpo { padding: 0 20px; display: flex; flex-direction: column; gap: 18px; }
.inf__h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.inf__p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tinta); }
.inf__p--sm { font-size: 13.5px; }
.inf__sec { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tinta-3); }

.etiq-inf { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            color: var(--tinta-2); }
.etiq-inf--realce { color: var(--realce); }

.chip-inf {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--radio-full); background: rgba(30, 41, 59, .8);
  border: 1px solid var(--linea); font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--tinta-2);
}
.chip-inf--club, .chip-inf--n { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent);
                                background: color-mix(in srgb, var(--accent) 12%, transparent); }
/* El punto que late: dice «esto es de hoy» sin escribirlo. */
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--realce); }
@media (prefers-reduced-motion: no-preference) {
  .pulso { animation: latir 2s ease-in-out infinite; }
  @keyframes latir { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}

.avatar-inf {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; padding: 1.5px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #000));
  display: grid;
}
.avatar-inf span {
  display: grid; place-items: center; border-radius: 10px; background: #0F172A;
  font-size: 13px; font-weight: 800; color: var(--realce);
}

/* ── Tarjetas ─────────────────────────────────────────────────────── */
.tarj { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px;
        border-radius: 18px; background: var(--tarjeta); border: 1px solid var(--linea-suave); }
.tarj--hero {
  position: relative; overflow: hidden; border-radius: 24px; padding: 20px;
  background: linear-gradient(135deg, #162136, #10192A 55%, #0D1322);
  border-color: var(--linea);
  box-shadow: 0 0 28px -6px color-mix(in srgb, var(--accent) 35%, transparent);
}
/* Los dos halos de las esquinas. Van en pseudoelementos y no en dos divs:
   son decoración y no tienen por qué existir en el árbol. */
.tarj--hero::before, .tarj--hero::after {
  content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%;
  filter: blur(38px); pointer-events: none;
}
.tarj--hero::before { top: -60px; right: -60px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.tarj--hero::after  { bottom: -60px; left: -60px; background: color-mix(in srgb, var(--realce) 10%, transparent); }
.tarj--hero > * { position: relative; z-index: 1; }

.tarj--bien { border-left: 3px solid var(--ok); }
.tarj--ojo  { border-left: 3px solid var(--ojo); }
.tarj--tarea {
  flex-direction: row; gap: 12px; align-items: flex-start; border-radius: 18px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 22%, #0D1322), #0D1322 70%);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.tarea__ico { flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px;
              border-radius: 10px; background: var(--realce); color: #0B1220; }
.tarj--proxima { border-radius: 24px; background: linear-gradient(135deg, #121D32, #0E1729 60%, #0A101C);
                 border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

/* ── El medidor ───────────────────────────────────────────────────── */
.medidor { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
.medidor svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.medidor circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.medidor__fondo { stroke: var(--hueco); }
.medidor__linea { stroke: var(--accent); }
.medidor__n {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  font-size: 27px; font-weight: 800; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.medidor__n small { font-size: 9px; font-weight: 700; letter-spacing: .08em;
                    text-transform: uppercase; color: var(--tinta-3); }
@media (prefers-reduced-motion: no-preference) {
  .medidor__linea { animation: medidor-entra .9s var(--ease) both; }
  @keyframes medidor-entra { from { stroke-dashoffset: var(--vuelta, 251); } }
}

.delta { font-size: 12px; font-weight: 700; }
.delta--sube  { color: var(--ok); }
.delta--baja  { color: var(--ojo); }
.delta--igual { color: var(--tinta-3); }
.delta--mini  { font-size: 11px; }

/* ── Las cuatro áreas ─────────────────────────────────────────────── */
.rejilla-inf { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tarj--metrica { gap: 6px; padding: 13px 14px; border-radius: 16px; background: var(--tarjeta-2); }
.metrica__n { font-size: 23px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ico-eje { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 9px;
           font-size: 13px; background: color-mix(in srgb, var(--eje, var(--accent)) 14%, transparent); }
.riel { height: 6px; border-radius: 3px; background: var(--hueco); overflow: hidden; }
.riel span { display: block; height: 100%; border-radius: 3px; background: var(--eje, var(--accent)); }
@media (prefers-reduced-motion: no-preference) {
  .riel span { animation: riel-crece .7s var(--ease) both; }
  @keyframes riel-crece { from { width: 0 !important; } }
}

/* Un color por área. Le da a cada una su identidad sin necesidad de leer el
   título, que es lo que hace que la rejilla se entienda de un vistazo. */
.eje--tecnica { --eje: #3B82F6; }
.eje--tactica { --eje: #818CF8; }
.eje--fisico  { --eje: #34D399; }
.eje--actitud { --eje: #FBBF24; }

/* ── Pestañas por área ────────────────────────────────────────────── */
.pestanas { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 2px;
            scrollbar-width: none; -ms-overflow-style: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pest {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--radio-full); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700;
  background: rgba(30, 41, 59, .8); color: var(--tinta-2);
  border: 1px solid var(--linea); transition: all var(--dur-fast) var(--ease);
}
.pest:hover { color: var(--tinta); }
.pest.on { background: var(--eje, var(--accent)); border-color: var(--eje, var(--accent)); color: #0B1220; }
.pest:focus-visible { outline: 2px solid var(--realce); outline-offset: 2px; }

.areas { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.area { display: flex; flex-direction: column; gap: 10px; }
.area[hidden] { display: none; }
.area__cab { padding-bottom: 6px; border-bottom: 1px solid var(--linea-suave); align-items: center; }
.area__nom { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.punto-eje { width: 8px; height: 8px; border-radius: 50%; background: var(--eje, var(--accent)); }

/* ── Cada golpe ───────────────────────────────────────────────────── */
.tarj--item { gap: 8px; padding: 14px 16px; background: var(--tarjeta-2); border-radius: 18px;
              border-color: var(--linea); }
/* Lo que está en 1 o 2, marcado. No es un castigo: es lo que el alumno viene
   a buscar cuando pregunta qué practicar. */
.tarj--foco { border-color: color-mix(in srgb, var(--ojo) 45%, transparent); background: #141C2B; }
.item__nom { font-size: 14px; font-weight: 700; }
.item__n { font-size: 12px; font-weight: 800; color: var(--eje, var(--accent)); font-variant-numeric: tabular-nums; }
.tarj--foco .item__n { color: var(--ojo); }
.item__nota { color: var(--tinta-2); font-style: italic; }
.badge-foco { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
              padding: 2px 6px; border-radius: 5px; color: var(--ojo);
              background: color-mix(in srgb, var(--ojo) 12%, transparent);
              border: 1px solid color-mix(in srgb, var(--ojo) 25%, transparent); }
.tramos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tramos span { height: 8px; border-radius: var(--radio-full); background: var(--hueco); }
.tramos span.on { background: var(--eje, var(--accent)); }
.tarj--foco .tramos span.on { background: var(--ojo); }

/* ── Cómo vienes, dentro del informe ──────────────────────────────── */
body.informe .hist { height: 110px; }
body.informe .hist__b { background: var(--hueco); }
/* Las clases anteriores en gris claro y no en el gris de los bordes: sobre
   el fondo del riel quedaban invisibles y las cuatro barras se veían vacías. */
body.informe .hist__b span { background: #475569; }
body.informe .hist__u--hoy .hist__b span { background: var(--accent); }
body.informe .hist__n { color: var(--tinta-3); }
body.informe .hist__u--hoy .hist__n { color: var(--tinta); }

/* ── El botón y el pie ────────────────────────────────────────────── */
.btn-inf {
  display: flex; align-items: center; justify-content: center; margin-top: 6px;
  padding: 13px 16px; border-radius: 13px; text-decoration: none;
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-contrast); background: linear-gradient(100deg, var(--accent),
                color-mix(in srgb, var(--accent) 70%, #fff));
  box-shadow: 0 8px 22px -10px var(--accent);
  transition: transform var(--dur-fast) var(--ease);
}
.btn-inf:active { transform: scale(.985); }
.btn-inf--suave { background: rgba(30, 41, 59, .9); color: var(--tinta);
                  border: 1px solid var(--linea); box-shadow: none; }
.inf__pie { display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
            padding-top: 16px; border-top: 1px solid var(--linea); font-size: 13px; font-weight: 600; }
.inf__marca { letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

@media (max-width: 380px) {
  .inf__h1 { font-size: 22px; }
  .rejilla-inf { gap: 8px; }
}

/* ═══ El panel del profesor, en el teléfono ══════════════════════════
   La lateral es de escritorio. En la cancha, con una mano y saliendo de la
   pista, lo que sirve es una barra abajo con cuatro destinos grandes. El
   resto del menú sigue en el cajón. */
.tabarra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sticky) + 2);
  display: none; align-items: stretch; gap: 4px;
  padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
.tabarra__it {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 52px; border-radius: var(--radio-6); text-decoration: none;
  color: var(--text-tertiary); font-size: 11px; font-weight: 600; letter-spacing: .01em;
}
.tabarra__it.on { color: var(--accent); font-weight: 700; background: var(--accent-soft); }
.tabarra__it:active { transform: scale(.97); }

/* La marca en la cabecera: en el teléfono no hay lateral, así que «Alumnos»
   a secas se leería como una pantalla de cualquier cosa. */
.cab-marca { display: flex; flex-direction: column; min-width: 0; }
.cab-marca__p { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
                color: var(--accent); line-height: 1.2; }
.cab-yo { display: flex; align-items: center; gap: 12px; margin-left: auto; }
/* El selector de apariencia. Discreto a propósito: se usa una vez y después
   nunca más, así que no puede competir con lo que la pantalla hace. */
.cab-tema select {
  font: inherit; font-size: 12.5px; color: var(--text-secondary);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radio-4);
  padding: 7px 26px 7px 10px; cursor: pointer; color-scheme: light dark;
}
.cab-tema select:hover { border-color: var(--border-strong); color: var(--text-primary); }
/* En el teléfono la cabecera lleva el menú, el título y la cuenta: el
   selector se achica a lo justo para caber sin empujar a los demás. */
@media (max-width: 899px) {
  .cab-tema select {
    max-width: 104px; padding: 6px 20px 6px 8px; font-size: 11.5px;
    text-overflow: ellipsis;
  }
}
.cab-yo__ini {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
/* El punto de «estás dentro». Es chico y no dice nada por sí solo, pero su
   ausencia se nota: es lo que hace que la cabecera se vea viva. */
.cab-yo__ini i {
  position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--realce); box-shadow: 0 0 0 2px var(--surface);
}

@media (max-width: 860px) {
  body.panel:has(.tabarra) .trabajo { padding-bottom: 78px; }
  .tabarra { display: flex; }
}

/* ═══ Tarjetas del panel ═════════════════════════════════════════════
   El lenguaje de las cuatro pantallas del profesor: tarjeta blanca sobre
   fondo frío, esquinas blandas, sombra apenas. */
.pcard { background: var(--surface); border-radius: 18px; padding: 16px;
         box-shadow: 0 1px 2px rgba(11, 28, 48, .05); display: flex; flex-direction: column; gap: 10px; }
/* La tarjeta que va en fila.
 *
 * `.pcard` es columna, y viene después de `.fila` en la hoja: juntas, lo que
 * se quería en una fila se apila a lo alto, alineado a un costado y con
 * huecos enormes entre medio. Pasó tres veces —el formulario de
 * auspiciadores, el bloque del logo y la tarjeta «Elegiste» de reservar— y
 * dos quedaron parchadas con un `style="flex-direction:row"` en línea.
 *
 * Con un nombre, se dice lo que es en vez de repetir el parche. */
.pcard--fila { flex-direction: row; align-items: center; flex-wrap: wrap; }
.pcard--plano { box-shadow: none; background: var(--surface-raised); }
.pcard--lista { padding: 0; gap: 0; overflow: hidden; }
/* La tarjeta que propone algo: se llenó el americano y se puede ampliar. Va
   en ámbar y no en verde porque no es una confirmación, es una decisión que
   está esperando —y no en rojo porque no hay nada roto. */
.pcard--aviso { background: var(--warning-soft);
                box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 22%, transparent); }
.pcard--aviso b { color: var(--warning); }

/* ── Con quién se juega ────────────────────────────────────────────────
   La chapita que contesta la primera pregunta de todas: ¿el compañero es
   el mismo toda la tarde o va cambiando? Dos colores distintos y no dos
   tonos del mismo, porque lo que tiene que saltar es que SON DISTINTAS:
   un club que elige a ojo mira el color antes que la palabra. */
.fmt-quien { align-self: flex-start; padding: 2px 8px; border-radius: 999px;
             font-size: 11px; font-weight: 700; letter-spacing: .02em;
             white-space: nowrap; }
.fmt-quien--fija { background: var(--success-soft); color: var(--success); }
.fmt-quien--rota { background: var(--warning-soft); color: var(--warning); }

/* El bloque de un grupo de formatos. `fieldset` y no un `div` con un título:
   son opciones excluyentes agrupadas, que es literalmente para lo que existe,
   y un lector de pantalla anuncia el grupo antes de cada opción. */
.fmt-bloque { border: 0; margin: 0 0 14px; padding: 0; }
.fmt-bloque:last-child { margin-bottom: 0; }
.fmt-bloque > legend { padding: 0; margin-bottom: 4px; }

/* Una categoría, como casilla que se aprieta entera. Casillas y no un menú:
   con un menú hay que abrirlo para ver qué hay, y elegir dos obliga a saber
   que se puede. */
.cat-casilla { display: inline-flex; align-items: center; gap: 6px;
               padding: 6px 11px; border-radius: 999px; cursor: pointer;
               background: var(--surface-raised);
               box-shadow: inset 0 0 0 1px var(--border);
               font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.cat-casilla:hover { color: var(--text-primary); }
.cat-casilla:has(input:checked) { background: var(--accent-soft);
                                  color: var(--accent);
                                  box-shadow: inset 0 0 0 1.5px var(--accent); }
.cat-casilla--sm { padding: 4px 9px; font-size: 12px; }

/* Una fila por número con sus letras al lado. Cuarenta y dos casillas en una
   tira no se eligen: se buscan. Así la vista va al número primero y a la
   letra después, que es como se dice en la cancha. */
.cat-filas { display: flex; flex-direction: column; gap: 6px; }
.cat-fila { display: flex; align-items: center; gap: 10px; }
.cat-fila__n { flex: 0 0 30px; font-size: 13px; font-weight: 800;
               color: var(--text-primary); }

/* El mensaje para el grupo, tal como se va a ver pegado en WhatsApp: mismo
   ancho de línea corto y monoespaciado apenas, para que los saltos que uno
   ve acá sean los que van a salir allá. */
.wsp-texto { font-family: inherit; font-size: 13px; line-height: 1.55;
             resize: vertical; white-space: pre-wrap; }

/* ── Las pestañas de la mesa del torneo ────────────────────────────────
   La misma técnica que en la página del jugador —botones de radio, sin
   JavaScript— con la ropa del panel. En el escritorio también: la ficha
   de un torneo crecería igual a una tira de mil líneas en una pantalla
   grande, sólo que con más scroll por delante. */
.pt-tabs__r { position: absolute; opacity: 0; pointer-events: none; }
.pt-tabs__nav { position: sticky; top: 0; z-index: 6; display: flex; gap: 2px;
                margin-bottom: 16px; padding: 3px; border-radius: 12px;
                background: var(--surface-raised);
                box-shadow: inset 0 0 0 1px var(--border);
                /* Con seis pestañas no caben en 430px. Antes que apretarlas
                   hasta que «Inscritos» se lea «Inscri…», se arrastran. */
                overflow-x: auto; -webkit-overflow-scrolling: touch;
                scrollbar-width: none; }
.pt-tabs__nav::-webkit-scrollbar { display: none; }
.pt-tabs__nav label { flex: 1 0 auto; padding: 8px 14px; border-radius: 9px;
                      text-align: center; white-space: nowrap;
                      font-size: 13px; font-weight: 600; color: var(--text-secondary);
                      cursor: pointer; transition: background .15s, color .15s; }
.pt-tabs__nav label:hover { color: var(--text-primary); }
.pt-panel { display: none; }
.pt-panel > .pila, .pt-panel > section, .pt-panel > .marco,
.pt-panel > p, .pt-panel > div { margin-bottom: 18px; }
.pt-panel > :last-child { margin-bottom: 0; }

#pt-mesa:checked      ~ .pt-panel--mesa,
#pt-inscritos:checked ~ .pt-panel--inscritos,
#pt-parejas:checked   ~ .pt-panel--parejas,
#pt-rondas:checked    ~ .pt-panel--rondas,
#pt-tablas:checked    ~ .pt-panel--tablas,
#pt-cuadros:checked   ~ .pt-panel--cuadros,
#pt-marketing:checked ~ .pt-panel--marketing { display: block; }
#pt-mesa:checked      ~ .pt-tabs__nav label[for="pt-mesa"],
#pt-inscritos:checked ~ .pt-tabs__nav label[for="pt-inscritos"],
#pt-parejas:checked   ~ .pt-tabs__nav label[for="pt-parejas"],
#pt-rondas:checked    ~ .pt-tabs__nav label[for="pt-rondas"],
#pt-tablas:checked    ~ .pt-tabs__nav label[for="pt-tablas"],
#pt-cuadros:checked   ~ .pt-tabs__nav label[for="pt-cuadros"],
#pt-marketing:checked ~ .pt-tabs__nav label[for="pt-marketing"] {
  background: var(--surface); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}
/* La tarjeta que lleva a otra pantalla: ícono, dos líneas y el chevrón. Es un
   enlace entero y no un botón adentro de una tarjeta —en un teléfono el blanco
   útil es toda la tarjeta, no los 90px del botón. */
.pcard--cta {
  display: flex; flex-direction: row; align-items: center; gap: 14px; margin-top: 20px;
  text-decoration: none; color: inherit;
}
.pcard--cta:hover { box-shadow: 0 6px 18px -10px rgba(11, 28, 48, .35); }
.pcard--cta__ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.pcard--cta__ir { margin-left: auto; font-size: 20px; color: var(--text-tertiary); }

/* La tarjeta grande de plata: fondo del acento, números en blanco. Es lo
   primero de la pantalla de inicio y lo que el profesor viene a mirar. */
.billetera {
  position: relative; overflow: hidden; border-radius: 26px; padding: 22px;
  background: linear-gradient(140deg, var(--accent-hover), var(--accent) 60%, #00543a);
  color: var(--accent-contrast); display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 16px 40px -18px var(--accent);
}
.billetera::before, .billetera::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(46px); pointer-events: none;
}
.billetera::before { top: -70px; right: -60px; width: 200px; height: 200px;
                     background: color-mix(in srgb, var(--realce) 22%, transparent); }
.billetera::after  { bottom: -80px; left: -50px; width: 180px; height: 180px;
                     background: rgba(255, 255, 255, .12); }
.billetera > * { position: relative; z-index: 1; }
.billetera__n { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.billetera__sub { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, .12); }
/* Adentro de la billetera manda el blanco de la tarjeta. `.t-sm` y `.t-xs`
   traen su propio gris oscuro y ahí quedaban ilegibles —«Esperando pago» se
   leía como una mancha—. Va con `:where` para que no sume especificidad y
   `.sobre-oscuro` pueda seguir bajando el blanco donde corresponde. */
.billetera :where(.t-sm, .t-xs, .t-label, .t-h3) { color: inherit; }
.sobre-oscuro { color: rgba(255, 255, 255, .78); }
.realce { color: var(--realce); }

/* Píldoras: filtros, categorías, estados. */
.pill {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 8px 15px; border-radius: var(--radio-full); border: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; text-decoration: none;
  background: var(--surface); color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill:hover { color: var(--text-primary); }
.pill.on { background: var(--accent); color: var(--accent-contrast); }
.pill--oscura.on { background: var(--realzado-fondo); color: var(--surface); }
/* Una fila de píldoras que se desliza, sin barra a la vista: en 390px no
   caben cinco categorías y cortarlas es peor que dejarlas correr. */
.riel-pills { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 4px;
              scrollbar-width: none; -ms-overflow-style: none; }
.riel-pills::-webkit-scrollbar { display: none; }

/* Marcas de estado. */
.marca { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
         border-radius: var(--radio-full); font-size: 11px; font-weight: 700;
         letter-spacing: .02em; white-space: nowrap; }
.marca--ok    { background: var(--accent-soft); color: var(--accent); }
.marca--debe  { background: var(--danger-soft); color: var(--danger); }
.marca--neutra{ background: var(--surface-sunken); color: var(--text-secondary); }
/* El color iba escrito a mano —un verde casi negro— sobre un fondo que en la
   muestra oscura también se oscurece: verde sobre verde. Ahora sale del token
   del acento, que cambia con la muestra. */
.marca--gana  { background: color-mix(in srgb, var(--realce) 30%, transparent);
                color: var(--marca-gana-txt, #00543a); }

/* Buscador con lupa adentro. */
.buscador { position: relative; display: flex; align-items: center; }
.buscador svg { position: absolute; left: 13px; color: var(--text-tertiary); pointer-events: none; }
.buscador .input { padding-left: 40px; border-radius: 14px; background: var(--surface);
                   border-color: transparent; box-shadow: 0 1px 2px rgba(11, 28, 48, .05); }
.buscador .input:focus { border-color: var(--accent); }

/* Filas de lista dentro de una tarjeta. Reemplazan a las tablas de cinco
   columnas, que en un teléfono se leen de lado. */
.fila-lista { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
/* El logo del auspiciador en la lista de canchas. El club los reconoce por el
   logo y no por el nombre —«la del banco»—, así que la miniatura hace más que
   el texto. Fondo blanco propio: un logo pensado para papel desaparece sobre
   la muestra oscura. */
/* ── La cabecera de una pantalla del panel ───────────────────────────
   Rótulo, título, la línea que dice qué se hace acá y una acción principal.
   Las cincuenta y tres pantallas lo escribían a mano con su propio `style`
   encima: cinco variantes del mismo margen y tres alturas de título. */
.pcab { display: flex; align-items: flex-start; justify-content: space-between;
        gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.pcab__t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pcab__t .t-label { margin-bottom: 2px; }
.pcab__t h1 { margin: 0; }
/* Ancho de lectura: la bajada es una línea, y estirada a mil doscientos
   píxeles deja de leerse como una línea. */
.pcab__p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-secondary);
           max-width: 68ch; line-height: 1.5; }
.pcab__a { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }

@media (max-width: 700px) {
  /* La acción baja y ocupa el ancho: arriba a la derecha, en un teléfono
     queda pegada al título y se aprieta sin querer. */
  .pcab { flex-direction: column; gap: 14px; }
  .pcab__a, .pcab__a .btn, .pcab__a form { width: 100%; }
}

/* ── Quiénes juegan una hora, en el panel ────────────────────────────
   Plegado: la agenda de un día son cuarenta filas, y cuatro nombres colgando
   de cada una la vuelven ilegible. Se abre la que interesa. */
.ju-lista { flex: 0 0 auto; font-size: 13px; }
.ju-lista summary { cursor: pointer; color: var(--text-secondary); }
.ju-lista summary:hover { color: var(--text-primary); }
.ju-lista ul { list-style: none; margin: 8px 0 0; padding: 0;
               display: flex; flex-direction: column; gap: 4px; }
.ju-lista li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.ju-lista b { font-weight: 600; }
.ju-lista span { font-size: 12px; color: var(--text-secondary); }
.ju-lista i { font-style: normal; font-size: 11px; letter-spacing: .04em;
              text-transform: uppercase; color: var(--accent); }

.ausp-mini { flex: none; width: 46px; height: 34px; object-fit: contain;
             padding: 3px; border: 1px solid var(--border); border-radius: 5px;
             background: #FFFFFF; }
/* El hueco sin vender. Punteado y con el fondo de la página, no blanco: tiene
   que leerse como un espacio disponible y no como un logo que no cargó. */
.ausp-mini--libre { display: flex; align-items: center; justify-content: center;
                    border-style: dashed; background: transparent;
                    font-size: 10px; letter-spacing: .04em; color: var(--text-tertiary); }
/* Ancho fijo, y del porte de la opción más larga. El desplegable se estiraba a
   su contenido y «Sin auspiciador» quedaba tapado por la flecha —«Sin
   auspiciado»—, que se lee como un nombre cortado. */
.ausp-sel { flex: 0 0 178px; }
.ausp-sel .select { width: 100%; }
.fila-lista__que { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto;
                   text-decoration: none; color: inherit; }
.fila-lista__n { font-size: 14px; font-weight: 600; color: var(--text-primary);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.raya { height: 1px; background: var(--border); margin: 0 16px; }

/* La semana de un vistazo, arriba de la agenda: un punto por clase. Deja ver
   dónde está apretado sin leer una sola hora. */
.semana-tira { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0;
               scrollbar-width: none; -ms-overflow-style: none; }
.semana-tira::-webkit-scrollbar { display: none; }
.dia-slot {
  flex: 1 1 0; min-width: 46px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; border-radius: 16px; text-decoration: none;
  background: var(--surface); color: var(--text-secondary);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
}
.dia-slot.on { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 20px -10px var(--accent); }
.dia-slot.vacio { opacity: .6; }
.dia-slot__d { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dia-slot__n { font-size: 17px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
               color: var(--text-primary); }
/* El número del día elegido: sobre el acento, y el acento en la muestra
   oscura es celeste claro. */
.dia-slot.on .dia-slot__n { color: var(--accent-contrast); }
.dia-slot__p { display: flex; gap: 3px; height: 6px; align-items: center; }
.dia-slot__p i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.dia-slot.on .dia-slot__p i { background: var(--realce); }
.dia-slot__p i.off { background: var(--border-strong); width: 4px; height: 4px; }
/* Un día sin clases pero con horas ofrecidas no es un día vacío: es donde el
   profesor todavía puede vender algo. Se distingue con un punto hueco. */
.dia-slot__p i.libre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.dia-slot.on .dia-slot__p i.libre { box-shadow: inset 0 0 0 1.5px var(--realce); }
/* El día elegido y vacío no puede quedar con el punto verde de «hay clase»:
   la regla del día encendido teñía también el punto apagado. */
.dia-slot.on .dia-slot__p i.off { background: var(--accent-contrast); opacity: .45; }

/* ── El conmutador semana / mes ───────────────────────────────────────
   Dos enlaces dentro de una píldora, con el activo levantado. Se ve como un
   control y no como dos botones sueltos: el ojo entiende que son las dos
   caras de lo mismo. */
.segmento {
  display: inline-flex; padding: 3px; gap: 2px;
  border-radius: var(--radio-full); background: var(--surface-sunken);
}
.segmento__b {
  padding: 7px 16px; border-radius: var(--radio-full); text-decoration: none;
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmento__b:hover { color: var(--text-primary); }
.segmento__b.on {
  background: var(--surface); color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(11, 28, 48, .12);
}

/* ── La cuadrícula del mes ────────────────────────────────────────────
   Siete columnas fijas, semanas completas. La celda dice dos cosas y nada
   más: el número y cuántas clases hay. La hora de cada una es la pregunta de
   la semana, no la del mes; meterla acá deja celdas de 40px con letra de 9. */
.mes {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 18px;
}
.mes__cab {
  text-align: center; padding: 4px 0 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
}
.mes__d {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  aspect-ratio: 1; border-radius: 12px; text-decoration: none;
  background: var(--surface); color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(11, 28, 48, .05);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.mes__d:hover { transform: translateY(-1px); }
.mes__n { font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
/* Los días de relleno se pueden abrir igual —una clase del 31 de agosto es
   una clase— pero no son de este mes y no compiten por la atención. */
.mes__d.fuera { background: transparent; box-shadow: none; color: var(--text-tertiary); }
.mes__d.hoy { box-shadow: inset 0 0 0 1.5px var(--accent); }
.mes__d.on { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 8px 20px -10px var(--accent); }
.mes__d.on .mes__n { color: #fff; }
/* La fila de puntos ocupa su alto siempre, tenga o no puntos: si no, los días
   con clase quedan más altos y la cuadrícula se ve temblorosa. */
.mes__p { display: flex; gap: 3px; height: 5px; align-items: center; }
.mes__p i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.mes__p i.libre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.mes__d.on .mes__p i { background: var(--realce); }
.mes__d.on .mes__p i.libre { background: transparent; box-shadow: inset 0 0 0 1.5px var(--realce); }
@media (max-width: 380px) {
  .mes { gap: 3px; }
  .mes__n { font-size: 13px; }
}
/* En el escritorio la celda cuadrada se va a 220px y el mes se come la
   pantalla: el detalle del día, que es lo que se viene a leer, queda debajo
   del pliegue. Acá manda una altura fija. */
@media (min-width: 861px) {
  .mes { gap: 6px; max-width: 720px; }
  .mes__d { aspect-ratio: auto; height: 78px; }
}

/* Los números de la agenda, en tira. En cuadrícula de cuatro, en un teléfono
   cada uno quedaba de 85px y el título no cabía. */
.kpi-chip { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
            padding: 9px 14px 9px 10px; border-radius: 16px; background: var(--surface);
            box-shadow: 0 1px 2px rgba(11, 28, 48, .05); }
.kpi-chip__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; }
.kpi-chip__n { font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kpi-chip--debe .kpi-chip__n { color: var(--danger); }

/* La tarjeta de un alumno. */
.alum__ini { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto;
             border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--accent-contrast);
             background: linear-gradient(140deg, var(--accent), var(--accent-hover)); }
.alum__n { font-size: 16px; font-weight: 600; color: var(--text-primary);
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alum__acc { border-top: 1px solid var(--border); padding-top: 10px; flex-wrap: wrap; }

/* ═══ Catálogo del profesor, con el lenguaje nuevo ═══════════════════ */

/* El interruptor de la ganancia. */
.ganancia { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
            border-radius: 18px; background: var(--surface); box-shadow: 0 1px 2px rgba(11, 28, 48, .05); }
.ganancia__ico { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
                 border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.palanca { width: 50px; height: 29px; flex: 0 0 auto; margin-left: auto; padding: 2px; cursor: pointer;
           border: 0; border-radius: var(--radio-full); background: var(--border-strong);
           transition: background var(--dur-fast) var(--ease); }
.palanca.on { background: var(--accent); }
.palanca i { display: block; width: 25px; height: 25px; border-radius: 50%; background: #fff;
             box-shadow: 0 1px 3px rgba(11, 28, 48, .25);
             transition: transform var(--dur-fast) var(--ease); }
.palanca.on i { transform: translateX(21px); }
.palanca:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Las categorías, como píldoras con su conteo al lado. En columna, el
   conteo debajo del nombre hacía cada una de 60px de alto para decir dos
   palabras. */
.b2b__cat { flex-direction: row !important; align-items: baseline; gap: 7px !important;
            border-radius: var(--radio-full) !important; padding: 9px 16px !important;
            border-color: transparent !important; box-shadow: 0 1px 2px rgba(11, 28, 48, .05); }
.b2b__cat.on { background: var(--accent) !important; color: var(--accent-contrast) !important; }
.b2b__cat.on .b2b__cat-n { color: var(--accent-contrast); opacity: .72; }

/* La tarjeta parada: foto arriba a todo el ancho, datos abajo. Solo en el
   teléfono —en el escritorio la tarjeta horizontal cabe de a cuatro por fila
   y sigue siendo la buena; esto puesto a todo ancho daba fotos de medio
   metro. */
@media (max-width: 860px) {
  .b2b__card { padding: 0 !important; border-radius: 20px !important; border-color: transparent !important;
               overflow: hidden; }
  .b2b__card-top { flex-direction: column; gap: 0; }
  /* El marco, en proporción y no en una altura fija: 190px sobre un ancho de
     366 daba un rectángulo apaisado, y acá casi todo lo que se vende es
     parado —palas, zapatillas, bolsos— así que `cover` le cortaba el mango a
     la pala en la pantalla con la que se vende. Se agranda el marco en vez de
     achicar la foto: con 4:3 una pala entra entera y a un bolso ancho le
     sobra aire arriba, que sobre fondo blanco no se ve. El tope es para la
     tablet, donde 4:3 sobre 800px de ancho vuelve a ser desmedido. */
  .b2b__foto {
    width: 100% !important; height: auto !important;
    aspect-ratio: 4 / 3; max-height: 300px;
    border: 0 !important; border-radius: 0 !important;
    background: #fff; position: relative;
  }
  .b2b__foto img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
  .b2b__datos { padding: 14px 16px 0; }
  .b2b__card-pie { padding: 12px 16px 14px; }
  .b2b__card.on { box-shadow: inset 0 0 0 2px var(--accent); }
}

/* Lo que gana, como marca y no como texto suelto: es el número por el que
   está mirando el catálogo. */
.b2b__ganas {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px;
  border-radius: var(--radio-full); font-size: 12px; font-weight: 700;
  background: color-mix(in srgb, var(--realce) 32%, transparent); color: #00543A;
}

/* La barra de la cotización, flotando. */
.b2b__cotiza { background: transparent !important; border: 0 !important; box-shadow: none !important;
               padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.cotiza-flota {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  border-radius: 20px; background: var(--realzado-fondo); color: var(--realzado-txt);
  box-shadow: 0 18px 40px -16px rgba(11, 28, 48, .55);
}
.cotiza-flota .t-sm { color: rgba(255, 255, 255, .82); }
.cotiza-flota .realce { color: var(--realce); }
.pulso-v { width: 8px; height: 8px; border-radius: 50%; background: var(--realce); flex: 0 0 auto; }
@media (prefers-reduced-motion: no-preference) {
  .pulso-v { animation: latir 2s ease-in-out infinite; }
}
.cotiza-flota__ir {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 16px; border-radius: 14px; text-decoration: none;
  background: var(--realce); color: var(--sobre-realce);
  font-size: 13.5px; font-weight: 800; letter-spacing: .01em;
}
.cotiza-flota__ir:active { transform: scale(.99); }
.cotiza-flota__vaciar { color: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .25); }
.cotiza-flota__vaciar:hover { color: #fff; }

/* Con la barra de abajo puesta, la de la cotización se apoya encima. */
@media (max-width: 860px) {
  body.panel:has(.tabarra) .b2b__cotiza { bottom: 72px; }
}

/* =====================================================================
   KINETIC COURT · el lenguaje de lo público
   =====================================================================
   El tercer mundo visual de PISTA, y el último: acá viven las pantallas que
   abre alguien que TODAVÍA NO ES CLIENTE —el buscador nacional, los
   campeonatos, la ficha de un profesor y la de un club—. El panel se queda
   con su verde cancha y su lateral oscura, y la vitrina de cada distribuidor
   con su acento propio, que es una característica y no un descuido.

   Por qué separado y no un tema más: lo público se mira en la calle, en un
   teléfono, con sol, por alguien que llegó de Instagram y no sabe qué es
   PISTA. Eso pide otra densidad y otro contraste que una herramienta de
   trabajo que se usa ocho horas.

   Del sistema «Kinetic Court» se toma la paleta de la prosa —slate profundo,
   verde cancha y volt— y NO el bloque YAML del archivo, que se contradice
   con ella (ahí el primario es negro puro). Manda lo que muestran las
   pantallas.

   Todo cuelga de `body.kc` y usa el prefijo `.kc`. Nada de esto se filtra a
   la tienda ni al panel, y por eso puede permitirse tokens propios sin
   pelear con los de arriba. Es un mundo claro a propósito: `data-tema` no lo
   activa ninguna ruta pública, así que no hay variante oscura que mantener.
   ------------------------------------------------------------------- */

body.kc {
  /* Suelo y superficies */
  --kc-suelo:    #EDEEEA;   /* hueso: el fondo de todo */
  --kc-tarjeta:  #FFFFFF;
  --kc-elev:     #F2F3F1;   /* la superficie de un dato dentro de una tarjeta */
  /* ── RETUNEADO al sistema nuevo (`PISTA.dc.html`) ──────────────────
     Las ocho pantallas que todavía no se rediseñaron cuelgan enteras de
     estos tokens. Cambiarlos acá las mueve de golpe al lenguaje nuevo
     —hueso, tinta casi negra, lima como acción— sin tocar tres mil líneas
     de marcado. No quedan idénticas al diseño, porque el diseño además
     les cambia el LAYOUT; pero dejan de verse como otro producto al lado
     de la portada, que es lo que de verdad rompía. */
  --kc-linea:    #E4E6E2;   /* el pelo que separa */
  --kc-linea-2:  #DDE0DB;   /* cuando algo flota */
  /* Tinta */
  --kc-tinta:    #0D0F0E;   /* texto Y primario */
  --kc-tinta-2:  #4A504B;
  --kc-tinta-3:  #6B716C;   /* metadatos */
  /* Acentos */
  --kc-verde:    #0F3D2E;   /* bosque: lo vivo, el enlace, la confirmación */
  --kc-verde-s:  #E8F7E5;
  --kc-verde-t:  #0F3D2E;
  --kc-volt:     #C6F832;   /* la acción principal, y NADA más */
  --kc-volt-2:   #D4FA5E;
  --kc-ambar:    #F59E0B;   /* la estrella de la nota, sólo eso */
  --kc-rojo:     #C43C3C;
  --kc-rojo-s:   #FFDAD6;
  /* Sombras: ambiente tenue, nunca borde duro */
  --kc-s1: 0 1px 3px 0 rgba(15,23,42,.04), 0 1px 2px -1px rgba(15,23,42,.04);
  --kc-s2: 0 10px 15px -3px rgba(15,23,42,.07), 0 4px 6px -4px rgba(15,23,42,.04);
  --kc-s3: 0 20px 25px -5px rgba(15,23,42,.1), 0 8px 10px -6px rgba(15,23,42,.05);

  background: var(--kc-suelo);
  color: var(--kc-tinta);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Sitio para la barra de abajo, que es fija en el teléfono. */
  padding-bottom: 88px;
}
@media (min-width: 900px) { body.kc { padding-bottom: 40px; } }

/* El ancho: móvil primero. En el computador NO se estira a 1280 de una
   columna —un texto de tres palabras al medio de una línea vacía— sino que
   la lista pasa a dos columnas y los filtros se van al costado.

   Se llama `.kc-env` y no `.kc` porque `.kc` es la clase del <body>: un
   selector `.kc` con `max-width` se la aplicaba TAMBIÉN al body, y la página
   entera —cabecera incluida— quedaba encajonada en 480px y centrada. El
   mundo y el contenedor no pueden compartir nombre. */
.kc-env { max-width: 480px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .kc-env { max-width: 1180px; padding: 0 32px; } }

/* ------------------------------------------------------------ cabecera */
/* Fija y con vidrio esmerilado: al bajar por 40 tarjetas hay que poder
   cambiar de pestaña sin volver arriba. */
.kc-cab {
  position: sticky; top: 0; z-index: 40;
  background: rgba(248,250,252,.88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kc-linea);
}
.kc-cab__in { max-width: 480px; margin: 0 auto; padding: 0 16px;
              min-height: 60px; display: flex; align-items: center;
              justify-content: space-between; gap: 12px; }
@media (min-width: 900px) { .kc-cab__in { max-width: 1180px; padding: 0 32px; } }
.kc-marca { display: inline-flex; align-items: baseline; gap: 6px;
            text-decoration: none; color: var(--kc-tinta);
            font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.kc-marca__pais { font-size: 9px; font-weight: 800; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--kc-tinta-3); }
.kc-cab__der { display: flex; align-items: center; gap: 8px; }
/* En el teléfono queda sólo «Súmate». «Entrar» es para quien ya tiene cuenta
   —y ése llega por su marcador, no por la cabecera— y dos botones al lado del
   logo dejan a los dos en dos líneas. */
.kc-cab__entrar { display: none; }
@media (min-width: 560px) { .kc-cab__entrar { display: inline-flex; } }

/* Las pestañas de escritorio viven en la cabecera; en el teléfono están
   abajo, al alcance del pulgar. */
.kc-cab__nav { display: none; gap: 4px; }
@media (min-width: 900px) { .kc-cab__nav { display: flex; } }
.kc-cab__nav a {
  padding: 8px 14px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--kc-tinta-3);
}
.kc-cab__nav a:hover { background: var(--kc-elev); color: var(--kc-tinta); }
.kc-cab__nav a[aria-current] { background: var(--kc-tinta); color: #fff; }

/* ------------------------------------------------------- barra de abajo */
/* Sólo en el teléfono. Lleva las dos cosas que se pueden buscar, no un
   simulacro de aplicación: «Mis clases» y «Backoffice» del diseño no existen
   para quien todavía no entró, y una pestaña que pide clave no es navegación,
   es una puerta cerrada. */
.kc-pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--kc-linea);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: var(--kc-s3);
}
@media (min-width: 900px) { .kc-pie { display: none; } }
.kc-pie a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 10px 4px 8px; text-decoration: none;
  color: var(--kc-tinta-3); font-size: 11px; font-weight: 700;
}
.kc-pie a[aria-current] { color: var(--kc-verde); }
.kc-pie svg { width: 22px; height: 22px; }

/* --------------------------------------------------------- encabezados */
.kc-tit { margin: 18px 0 2px; font-size: 26px; line-height: 1.16;
          font-weight: 800; letter-spacing: -.025em; }
@media (min-width: 900px) { .kc-tit { font-size: 32px; letter-spacing: -.02em; } }
.kc-bajada { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--kc-tinta-3); }
.kc-h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.kc-etiq { font-size: 10px; font-weight: 800; letter-spacing: .06em;
           text-transform: uppercase; color: var(--kc-tinta-3); }
.kc-cifra { font-variant-numeric: tabular-nums; font-weight: 800;
            letter-spacing: -.02em; }

/* La línea de arriba: una banderita de estado sin inventar nada. */
.kc-linea-viva { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                 margin-top: 14px; font-size: 12px; font-weight: 700;
                 color: var(--kc-tinta-3); }
.kc-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--kc-verde);
            box-shadow: 0 0 0 3px rgba(22,163,74,.18); }

/* ----------------------------------------------------------- tarjetas */
.kc-card {
  background: var(--kc-tarjeta); border: 1px solid var(--kc-linea);
  border-radius: 16px; box-shadow: var(--kc-s1); padding: 16px;
}
.kc-card--plano { padding: 0; overflow: hidden; }
.kc-dato { background: var(--kc-elev); border: 1px solid var(--kc-linea);
           border-radius: 12px; padding: 10px 12px; }

/* ------------------------------------------------------------ botones */
.kc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 12px; border: 0;
  font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: background .15s, transform .1s;
}
.kc-btn:active { transform: scale(.98); }
/* El volt es la acción principal de la pantalla, y por eso va con tinta
   oscura encima: volt sobre blanco no se lee, y volt en todos lados deja de
   significar nada. */
.kc-btn--volt { background: var(--kc-volt); color: var(--kc-tinta); }
.kc-btn--volt:hover { background: var(--kc-volt-2); }
.kc-btn--slate { background: var(--kc-tinta); color: #fff; }
.kc-btn--slate:hover { background: #1E293B; }
.kc-btn--fantasma { background: transparent; border: 1.5px solid var(--kc-linea);
                    color: var(--kc-tinta); }
.kc-btn--fantasma:hover { background: var(--kc-elev); }
.kc-btn--bloque { width: 100%; }
.kc-btn--sm { min-height: 38px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
/* El de la casa: los dos caminos son la acción principal de la página. */
.kc-btn--lg { min-height: 54px; padding: 0 24px; font-size: 15.5px; border-radius: 14px; }
.kc-btn[aria-disabled="true"], .kc-btn:disabled {
  opacity: .45; pointer-events: none;
}

/* -------------------------------------------------------------- campos */
.kc-campo {
  width: 100%; min-height: 48px; padding: 0 14px;
  background: var(--kc-tarjeta); border: 1px solid var(--kc-linea);
  border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--kc-tinta);
  appearance: none;
}
.kc-campo:focus { outline: 0; border-color: var(--kc-verde);
                  box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.kc-campo::placeholder { color: #94A3B8; }
select.kc-campo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 16px; padding-right: 34px;
}
/* El buscador con la lupa adentro. */
.kc-buscar { position: relative; flex: 1; }
.kc-buscar .kc-campo { padding-left: 42px; }
.kc-buscar svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
                 width: 18px; height: 18px; color: #94A3B8; pointer-events: none; }

/* ------------------------------------------------------ chips y filtros */
/* La tira que se desliza: en el teléfono los filtros no caben en una línea y
   apilarlos se come la pantalla antes del primer resultado. */
.kc-tira {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 16px 2px;
  margin: 0 -16px; scrollbar-width: none;
}
.kc-tira::-webkit-scrollbar { display: none; }
.kc-tira > * { flex-shrink: 0; }

.kc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--kc-tarjeta); border: 1px solid var(--kc-linea);
  color: var(--kc-tinta-3); font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.kc-chip:hover { background: var(--kc-elev); color: var(--kc-tinta); }
/* Un filtro puesto se ve encendido y trae su propia salida. */
.kc-chip--on { background: var(--kc-tinta); border-color: var(--kc-tinta); color: #fff; }
.kc-chip--on:hover { background: #1E293B; color: #fff; }
.kc-chip__x { display: inline-flex; opacity: .7; font-weight: 700; }
.kc-chip__x:hover { opacity: 1; }
.kc-chip--sm { padding: 5px 10px; font-size: 11.5px; }

/* Las etiquetas que describen, que no se pueden apretar. */
.kc-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--kc-elev); color: var(--kc-tinta-2);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.kc-tag--verde { background: var(--kc-verde-s); color: var(--kc-verde-t); }
.kc-tag--volt  { background: #ECFCCB; color: #3F6212; }
.kc-tag--slate { background: var(--kc-tinta); color: var(--kc-volt); }
.kc-tag--aviso { background: #FFEDD5; color: #9A3412; }
.kc-tag--gris  { background: var(--kc-elev); color: var(--kc-tinta-3); }
/* La categoría de juego, por tramos: 1ª y 2ª pesan distinto que 6ª. */
.kc-cat--alta  { background: var(--kc-tinta); color: var(--kc-volt); }
.kc-cat--media { background: var(--kc-verde-s); color: var(--kc-verde-t); }
.kc-cat--baja  { background: var(--kc-elev); color: var(--kc-tinta-2); }

/* --------------------------------------------------- fila de resultados */
.kc-conteo { display: flex; align-items: center; justify-content: space-between;
             gap: 12px; padding: 14px 0 10px; }
.kc-conteo__n { font-size: 13px; font-weight: 700; color: var(--kc-tinta-2); }
.kc-orden { display: flex; align-items: center; gap: 6px; }

/* ------------------------------------------------------------- lista */
.kc-lista { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  /* Dos columnas en el computador; los filtros se van al costado. */
  .kc-cuerpo { display: grid; grid-template-columns: 300px 1fr; gap: 28px;
               align-items: start; }
  .kc-cuerpo__filtros { position: sticky; top: 78px; }
  .kc-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .kc-lista > .kc-ancho { grid-column: 1 / -1; }
}

/* ------------------------------------------------- tarjeta de profesor */
.kc-prof { display: flex; flex-direction: column; gap: 12px; }
.kc-prof__top { display: flex; gap: 12px; align-items: flex-start; }
.kc-prof__foto {
  width: 64px; height: 64px; border-radius: 14px; object-fit: cover;
  flex-shrink: 0; box-shadow: var(--kc-s1); background: var(--kc-elev);
}
/* Sin foto: las iniciales sobre el verde. Hoy NINGÚN profesor de producción
   tiene foto cargada, así que este es el estado normal y no el excepcional
   —tiene que verse bien, no verse «roto pero tolerable». */
.kc-prof__ini {
  width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #16A34A, #0F5132);
  color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.02em;
}
.kc-prof__id { flex: 1; min-width: 0; }
.kc-prof__nom { display: flex; align-items: baseline; justify-content: space-between;
                gap: 8px; }
.kc-prof__nom h4 { margin: 0; font-size: 18px; font-weight: 700;
                   letter-spacing: -.01em; overflow: hidden;
                   text-overflow: ellipsis; white-space: nowrap; }
.kc-nota { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
           font-size: 13px; font-weight: 700; color: var(--kc-tinta); }
.kc-nota svg { width: 14px; height: 14px; color: var(--kc-ambar); }
.kc-nota__n { color: var(--kc-tinta-3); font-weight: 600; }
.kc-prof__sub { margin: 2px 0 0; font-size: 12.5px; font-weight: 700;
                color: var(--kc-verde-t); }
.kc-prof__donde { display: flex; align-items: center; gap: 5px; margin-top: 3px;
                  font-size: 12.5px; color: var(--kc-tinta-3); }
.kc-prof__donde svg { width: 13px; height: 13px; flex-shrink: 0; }
.kc-prof__chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* La franja de cupos: es lo que convierte una ficha en una reserva. */
.kc-cupos { display: flex; flex-direction: column; gap: 8px; }
.kc-cupos__tit { display: flex; align-items: center; justify-content: space-between;
                 gap: 8px; font-size: 12px; font-weight: 700; color: var(--kc-tinta-2); }
.kc-cupos__horas { display: flex; gap: 6px; flex-wrap: wrap; }
.kc-hora {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px; border-radius: 10px; text-decoration: none;
  background: var(--kc-tarjeta); border: 1px solid var(--kc-linea);
  font-size: 12.5px; font-weight: 700; color: var(--kc-tinta);
  font-variant-numeric: tabular-nums;
}
.kc-hora:hover { border-color: var(--kc-linea-2); box-shadow: var(--kc-s1); }
/* La más próxima va en verde: es la que se aprieta. */
.kc-hora--ya { background: var(--kc-verde-s); border-color: #BBF7D0; color: var(--kc-verde-t); }

/* El pie de la tarjeta: precio a la izquierda, acción a la derecha. */
.kc-prof__pie { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; padding-top: 12px; border-top: 1px solid var(--kc-linea); }
.kc-precio { display: flex; align-items: baseline; gap: 4px; }
.kc-precio__n { font-size: 20px; font-weight: 800; letter-spacing: -.02em;
                font-variant-numeric: tabular-nums; }
.kc-precio__u { font-size: 12px; font-weight: 600; color: var(--kc-tinta-3); }
.kc-precio__desde { display: block; font-size: 10px; font-weight: 800;
                    letter-spacing: .06em; text-transform: uppercase;
                    color: var(--kc-tinta-3); }

/* De qué tienda es. El marketplace es vitrina común y la venta es de cada
   tienda: si la tarjeta no lo dice, el alumno descubre en el checkout que le
   está comprando a alguien de quien nunca oyó hablar. */
.kc-tienda { font-size: 11px; color: var(--kc-tinta-3); }
.kc-tienda strong { color: var(--kc-tinta-2); font-weight: 700; }

/* ----------------------------------------------- tarjeta de campeonato */
.kc-torneo { display: flex; flex-direction: column; }
.kc-torneo__foto { position: relative; aspect-ratio: 16 / 9; background: #0F172A;
                   overflow: hidden; }
.kc-torneo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-torneo__velo { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(15,23,42,.94) 6%, rgba(15,23,42,.35) 55%, rgba(15,23,42,.05)); }
.kc-torneo__sinfoto { position: absolute; inset: 0;
  background: linear-gradient(140deg, #1E293B, #0F172A 60%, #052E16); }
.kc-torneo__marcas { position: absolute; top: 12px; left: 12px; right: 12px;
                     display: flex; gap: 6px; flex-wrap: wrap; }
.kc-torneo__tit { position: absolute; left: 16px; right: 16px; bottom: 14px; color: #fff; }
.kc-torneo__tit h3 { margin: 0; font-size: 21px; line-height: 1.2; font-weight: 800;
                     letter-spacing: -.02em; }
.kc-torneo__club { display: flex; align-items: center; gap: 5px; margin-top: 4px;
                   font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.85); }
.kc-torneo__club svg { width: 13px; height: 13px; }
.kc-torneo__cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.kc-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kc-rejilla__c { display: flex; flex-direction: column; gap: 2px; }
.kc-rejilla__v { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

/* El bloque de fecha a la izquierda, para la vista de lista agrupada. */
.kc-fecha { display: flex; flex-direction: column; align-items: center;
            justify-content: center; min-width: 54px; padding: 8px 6px;
            border-radius: 12px; background: var(--kc-tinta); color: #fff; }
.kc-fecha__d { font-size: 20px; font-weight: 800; line-height: 1;
               font-variant-numeric: tabular-nums; }
.kc-fecha__m { font-size: 10px; font-weight: 800; letter-spacing: .08em;
               text-transform: uppercase; color: var(--kc-volt); margin-top: 3px; }

/* Los cupos: la barra sólo aparece cuando quedan pocos. Una barra al 8% en
   cada tarjeta es ruido; al 90% es un argumento. */
.kc-barra { height: 5px; border-radius: 999px; background: var(--kc-linea); overflow: hidden; }
.kc-barra span { display: block; height: 100%; border-radius: 999px; background: var(--kc-volt); }
.kc-barra--apura span { background: #F97316; }

/* El mes que se queda pegado mientras se baja por la lista. */
.kc-mes {
  position: sticky; top: 61px; z-index: 20; margin: 6px 0 -2px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(248,250,252,.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kc-tinta-2); border: 1px solid var(--kc-linea);
  width: fit-content;
}

/* ------------------------------------------------------------- vacío */
/* El diseño pide que la tarjeta vacía diga QUÉ SACAR para volver a tener
   resultados. Un «no se encontraron resultados» a secas deja al que busca
   sin próximo paso. */
/* ── La casa ───────────────────────────────────────────────────────────
   Una pregunta arriba y contenido de verdad abajo. Sin hero gigante: la casa
   se abre en el teléfono, muchas veces desde un enlace de WhatsApp, y una
   portada que ocupa la pantalla completa con una frase obliga a un scroll
   antes de ver la primera cosa útil. */
.casa-hero { padding: 26px 0 8px; }
.casa-tit { margin: 0 0 10px; font-size: 30px; line-height: 1.1; font-weight: 800;
            letter-spacing: -.03em; text-wrap: balance; }
@media (min-width: 900px) { .casa-tit { font-size: 46px; } }
.casa-bajada { margin: 0 0 20px; font-size: 15px; line-height: 1.55;
               color: var(--kc-tinta-3); max-width: 46ch; }
@media (min-width: 900px) { .casa-bajada { font-size: 17px; } }

/* Dos caminos y nada más. En el teléfono se apilan a ancho completo: dos
   botones lado a lado quedan en dos líneas de texto cada uno. */
.casa-puertas { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 480px) { .casa-puertas { flex-direction: row; } }
.casa-puertas .kc-btn { justify-content: center; }

.casa-sec { margin-top: 34px; }
.casa-sec__cab { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 12px; margin-bottom: 12px; }
.casa-h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 900px) { .casa-h2 { font-size: 23px; } }
.casa-vermas { flex: 0 0 auto; font-size: 13px; font-weight: 700;
               color: var(--kc-verde-t); text-decoration: none; }
.casa-vermas:hover { text-decoration: underline; }
.casa-nota { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--kc-tinta-3); }
.casa-nota a { color: var(--kc-verde-t); font-weight: 600; }

.casa-rej { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .casa-rej { grid-template-columns: repeat(3, 1fr); } }
.casa-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
             text-decoration: none; color: inherit; }
.casa-item:hover { box-shadow: var(--kc-s2); transform: translateY(-1px); }
.casa-item__pie { font-size: 12.5px; color: var(--kc-tinta-3); }

.casa-puerta { display: flex; flex-direction: column; gap: 8px;
               text-decoration: none; color: inherit; }
.casa-puerta:hover { box-shadow: var(--kc-s2); }
.casa-puerta__t { font-size: 13.5px; line-height: 1.5; color: var(--kc-tinta-3); }
.casa-puerta__ir { margin-top: auto; padding-top: 4px; font-size: 13px;
                   font-weight: 700; color: var(--kc-verde-t); }

/* La tienda, en una fila de cuatro. Con foto, porque un catálogo sin
   imágenes no parece un catálogo. */
.casa-prods { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .casa-prods { grid-template-columns: repeat(4, 1fr); } }
.casa-prod { display: flex; flex-direction: column; gap: 3px;
             text-decoration: none; color: inherit; }
.casa-prod__foto { display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden;
                   background: var(--kc-carta, #fff); border: 1px solid var(--kc-linea);
                   margin-bottom: 5px; }
.casa-prod__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.casa-prod__marca { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
                    letter-spacing: .05em; color: var(--kc-tinta-3); }
.casa-prod__n { font-size: 13px; line-height: 1.35; font-weight: 600;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
                overflow: hidden; }
.casa-prod__p { font-size: 14px; font-weight: 700; }

/* ── El directorio de clubes ───────────────────────────────────────────
   Parrilla y no lista: son 179 y lo que se busca es reconocer el club de uno
   entre muchos, no leerlos en orden. Con la foto arriba eso se hace de un
   vistazo; en una fila de texto hay que leer los 48 de la página. */
.kc-clubes { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .kc-clubes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .kc-clubes { grid-template-columns: 1fr 1fr 1fr; } }

.kc-club { display: flex; flex-direction: column; gap: 0; padding: 0;
           overflow: hidden; text-decoration: none; color: inherit; }
.kc-club:hover { box-shadow: var(--kc-s2); transform: translateY(-1px); }
.kc-club__foto { position: relative; display: block; aspect-ratio: 16 / 9;
                 background: var(--kc-suelo); overflow: hidden; }
.kc-club__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Los 17 sin foto muestran su inicial. Un hueco gris en la parrilla se lee
   como «este club está roto», y no lo está: es la importación la que no
   trajo la imagen. */
.kc-club__ini { position: absolute; inset: 0; display: flex; align-items: center;
                justify-content: center; font-size: 40px; font-weight: 800;
                color: var(--kc-linea-2); background: var(--kc-suelo); }
/* Lo que se está jugando ahí HOY, encima de la foto: es el único dato que
   hace que alguien abra una ficha en vez de otra. */
.kc-club__vivo { position: absolute; left: 8px; bottom: 8px; padding: 3px 8px;
                 border-radius: 999px; background: var(--kc-volt);
                 color: var(--kc-tinta); font-size: 11px; font-weight: 700; }
.kc-club__cuerpo { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.kc-club__donde { display: flex; align-items: flex-start; gap: 5px;
                  font-size: 12.5px; line-height: 1.4; color: var(--kc-tinta-3); }
.kc-club__donde svg { flex: 0 0 auto; width: 13px; height: 13px; margin-top: 2px; }
.kc-club__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }

.kc-paginas { display: flex; align-items: center; justify-content: center;
              gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.kc-paginas__n { font-size: 13px; color: var(--kc-tinta-3); }

.kc-vacio { text-align: center; padding: 34px 20px; }
.kc-vacio__ico { width: 46px; height: 46px; margin: 0 auto 12px;
                 display: flex; align-items: center; justify-content: center;
                 border-radius: 14px; background: var(--kc-elev); color: var(--kc-tinta-3); }
.kc-vacio h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.kc-vacio p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--kc-tinta-3); }

/* ------------------------------------------------------------- avisos */
.kc-aviso { display: flex; gap: 10px; align-items: flex-start;
            padding: 12px 14px; border-radius: 12px;
            background: var(--kc-verde-s); color: var(--kc-verde-t);
            font-size: 13px; line-height: 1.45; font-weight: 600; }
.kc-aviso--malo { background: var(--kc-rojo-s); color: #93000A; }
.kc-aviso svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

/* --------------------------------------------------- llamada del final */
/* La franja oscura de abajo: el club que quiere publicar, el profesor que
   quiere sumarse. Es lo único de la pantalla que no es un resultado. */
.kc-cta { background: var(--kc-tinta); color: #fff; border-radius: 18px;
          padding: 20px; margin-top: 4px; }
.kc-cta h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.kc-cta p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: #94A3B8; }

/* En el computador la columna de filtros mide 300px: una tira que se desliza
   ahí adentro esconde la mitad de las categorías detrás de un gesto que en un
   mouse no existe. Se envuelven. */
@media (min-width: 900px) {
  .kc-cuerpo__filtros .kc-tira {
    flex-wrap: wrap; overflow: visible; margin: 0; padding: 0;
  }
  /* Y el buscador deja de pelear con su botón por 300px: se apila. */
  .kc-cuerpo__filtros form > div:first-of-type { flex-wrap: wrap; }
  .kc-cuerpo__filtros .kc-buscar { flex-basis: 100%; }
}

/* Un campeonato sin foto propia ni foto del club: la portada se achica. Un
   16/9 vacío son 240px de degradado antes del primer dato útil. */
.kc-torneo__foto--corta { aspect-ratio: 16 / 6; }

/* ---------------------------------------------- la ficha del profesor */
/* El encabezado oscuro: la foto, el nombre y las tres cifras. Es lo único
   oscuro de la pantalla, y por eso funciona como retrato. */
.kc-jefe { background: var(--kc-tinta); color: #fff; border-radius: 20px;
           padding: 18px; margin-top: 12px; }
.kc-jefe__top { display: flex; gap: 14px; align-items: center; }
.kc-jefe__foto { width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
                 border: 2px solid rgba(255,255,255,.9); flex-shrink: 0; }
.kc-jefe__ini { width: 76px; height: 76px; border-radius: 50%; flex-shrink: 0;
                display: flex; align-items: center; justify-content: center;
                background: linear-gradient(145deg, #16A34A, #065F32);
                font-size: 26px; font-weight: 800; }
.kc-jefe__nom { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.kc-jefe__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.kc-jefe__club { margin: 6px 0 0; font-size: 13px; color: #94A3B8; }
.kc-nota--oscura { color: #fff; }
/* Las cifras van en una fila con separadores: tres columnas de igual peso,
   como el marcador de un partido. */
.kc-jefe__cifras { display: flex; margin-top: 16px; padding-top: 14px;
                   border-top: 1px solid rgba(255,255,255,.12); }
.kc-jefe__cifras > div { flex: 1; text-align: center; }
.kc-jefe__cifras > div + div { border-left: 1px solid rgba(255,255,255,.12); }
.kc-jefe__n { display: block; font-size: 20px; font-weight: 800; color: var(--kc-volt);
              letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kc-jefe__l { display: block; font-size: 11px; color: #94A3B8; margin-top: 2px; }

.kc-p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--kc-tinta-2); }
.kc-p + .kc-p { margin-top: 8px; }

.kc-logros { list-style: none; margin: 6px 0 0; padding: 0;
             display: flex; flex-direction: column; gap: 8px; }
.kc-logros li { display: flex; gap: 10px; align-items: baseline;
                font-size: 14px; color: var(--kc-tinta-2); }
.kc-logros .kc-cifra { color: var(--kc-verde-t); font-size: 13px; min-width: 38px; }

.kc-fila-sede { display: flex; align-items: center; justify-content: space-between;
                gap: 12px; padding: 10px 0; }
.kc-fila-sede + .kc-fila-sede { border-top: 1px solid var(--kc-linea); }

.kc-resena--sig { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kc-linea); }
.kc-resena__top { display: flex; align-items: center; justify-content: space-between;
                  gap: 8px; margin-bottom: 6px; }
.kc-resena .kc-nota svg { width: 15px; height: 15px; }

/* --------------------------------------------------- los cuatro pasos */
/* Numerados y siempre visibles: un acordeón esconde justo lo que falta por
   hacer, y el que reserva no sabe cuánto le queda. */
.kc-paso { margin-top: 12px; }
.kc-paso__tit { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kc-paso__n { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
              display: flex; align-items: center; justify-content: center;
              background: var(--kc-verde-s); color: var(--kc-verde-t);
              font-size: 12px; font-weight: 800; }

.kc-opciones { display: flex; flex-direction: column; gap: 8px; }
.kc-opcion { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
             border-radius: 12px; border: 1px solid var(--kc-linea);
             background: var(--kc-tarjeta); text-decoration: none; color: inherit; }
.kc-opcion:hover { background: var(--kc-elev); }
.kc-opcion--on { background: #EFF6FF; border-color: var(--kc-verde); }
.kc-opcion .kc-prof__donde { display: block; margin-top: 2px; }
/* El punto de radio, dibujado: es un enlace, no un input, porque cada paso
   tiene que ser una URL compartible. */
.kc-radio { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
            border: 2px solid var(--kc-linea-2); }
.kc-opcion--on .kc-radio { border-color: var(--kc-verde); border-width: 5px; }

.kc-dia { display: flex; flex-direction: column; align-items: center; gap: 1px;
          min-width: 58px; padding: 9px 8px; border-radius: 12px;
          border: 1px solid var(--kc-linea); background: var(--kc-tarjeta);
          text-decoration: none; color: var(--kc-tinta); }
.kc-dia--on { background: var(--kc-tinta); border-color: var(--kc-tinta); color: #fff; }
.kc-dia__s { font-size: 10px; font-weight: 800; letter-spacing: .06em;
             text-transform: uppercase; color: var(--kc-tinta-3); }
.kc-dia--on .kc-dia__s { color: #94A3B8; }
.kc-dia__n { font-size: 19px; font-weight: 800; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.kc-dia__m { font-size: 10px; font-weight: 700; text-transform: uppercase;
             color: var(--kc-tinta-3); }
.kc-dia--on .kc-dia__m { color: var(--kc-volt); }

.kc-horas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kc-slot { display: flex; flex-direction: column; align-items: center; gap: 1px;
           padding: 10px 6px; border-radius: 12px; text-decoration: none;
           border: 1px solid var(--kc-linea); background: var(--kc-tarjeta);
           color: var(--kc-tinta); }
.kc-slot:hover { border-color: var(--kc-linea-2); }
.kc-slot--on { background: var(--kc-tinta); border-color: var(--kc-tinta); color: #fff; }
.kc-slot__h { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-slot__e { font-size: 10.5px; color: var(--kc-tinta-3); }
.kc-slot--on .kc-slot__e { color: var(--kc-volt); }

/* La franja de cierre: se queda pegada abajo en el teléfono, encima de la
   barra de secciones, porque es la acción de la pantalla. */
.kc-cerrar {
  position: sticky; bottom: 76px; z-index: 30; margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--kc-linea-2); box-shadow: var(--kc-s3);
}
@media (min-width: 900px) { .kc-cerrar { bottom: 16px; } }

/* ── La ficha del club, dentro de Kinetic Court ──────────────────────────
   La ficha se construyó con el sistema general —`pila`, `fila`, `t-xs`,
   `btn`— y funciona. Repintarla NO es reescribirla: se le cambian los TOKENS
   del sistema por los de Kinetic Court, y todo lo que ya estaba hecho con
   ellos queda pintado solo.

   Es la diferencia entre cambiarle la ampolleta a la pieza y rehacer la
   instalación eléctrica. Rehacer la vista entera habría significado volver a
   escribir el «abierto ahora», la vitrina de canchas y los torneos, que se
   armaron ayer y andan.

   Va después de `body.club` en el archivo para ganarle: los dos definen
   `--accent`, y acá mandan los tokens nuevos. */
body.kc {
  --surface:        var(--kc-tarjeta);
  --surface-raised: var(--kc-elev);
  --surface-sunken: var(--kc-elev);
  --surface-page:   var(--kc-suelo);
  --border:         var(--kc-linea);
  --border-strong:  var(--kc-linea-2);
  --text-primary:   var(--kc-tinta);
  --text-secondary: var(--kc-tinta-2);
  --text-tertiary:  var(--kc-tinta-3);
  --accent:         var(--kc-verde);
  --accent-hover:   var(--kc-verde-t);
  --accent-soft:    var(--kc-verde-s);
  --accent-contrast:#FFFFFF;
  --success:        var(--kc-verde-t);
  --success-soft:   var(--kc-verde-s);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* Kinetic Court es de esquinas generosas: 16px en tarjetas, 12 en
     controles. El sistema general usa 4 y 6, que al lado se ven de otra
     aplicación. */
  --radio-4: 10px; --radio-6: 14px;
}
/* La portada del club deja de ser verde botella y pasa al slate profundo,
   que es el fondo de todo lo oscuro en este mundo. */
body.kc.club .club-hero--sinfoto {
  background: linear-gradient(140deg, #1E293B, #0F172A 60%, #052E16);
}
body.kc.club .club-hero__velo {
  background: linear-gradient(to top, rgba(15,23,42,.94) 0%, rgba(15,23,42,.45) 38%, rgba(15,23,42,.05) 68%);
}
/* La ficha del club respira igual que las otras pantallas públicas. */
body.kc.club .club { max-width: 480px; }
@media (min-width: 900px) { body.kc.club .club { max-width: 880px; } }
/* La marca de la ficha del club va en slate, igual que en la cabecera del
   buscador: es la misma marca, no el acento de la página. */
body.kc.club .club-cab__marca { color: var(--kc-tinta); }
body.kc.club .club-cab { background: rgba(248,250,252,.88);
                         backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* La ficha de UNA persona es una columna de lectura, no una parrilla de
   resultados: estirada a 1180px, tres horas ocupan el ancho de la pantalla y
   el paso siguiente queda debajo del pliegue. El buscador sí usa todo el
   ancho, porque ahí lo que se compara son muchas tarjetas. */
@media (min-width: 900px) {
  .kc-env--angosto { max-width: 720px; }
  /* Y las horas dejan de crecer sin límite: seis por fila, no tres anchas. */
  .kc-env--angosto .kc-horas { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------- la tabla en vivo de un torneo */
/* Se mira en la cancha, en el teléfono, entre ronda y ronda. Por eso las
   cifras son grandes y tabulares: se leen de un vistazo y de pie. */
.kc-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.kc-tabla th {
  text-align: left; padding: 10px 12px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--kc-tinta-3);
  background: var(--kc-elev); border-bottom: 1px solid var(--kc-linea);
}
.kc-tabla td { padding: 11px 12px; border-bottom: 1px solid var(--kc-linea); }
.kc-tabla tr:last-child td { border-bottom: 0; }
.kc-tabla__n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-tabla th.kc-tabla__n { text-align: right; }
/* Los tres primeros: es la única jerarquía que se busca de un vistazo. */
.kc-tabla--podio td { background: rgba(132, 204, 22, .07); font-weight: 700; }

/* Un partido: los dos lados y el marcador al medio, como en una pizarra. */
.kc-partido {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--kc-linea);
  font-size: 13.5px;
}
.kc-partido:first-of-type { border-top: 0; }
.kc-partido__lado { min-width: 0; }
.kc-partido__lado--der { text-align: right; }
.kc-partido__lado--gana { font-weight: 800; color: var(--kc-verde-t); }
.kc-partido__marcador {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 15px;
  padding: 3px 10px; border-radius: 999px; background: var(--kc-elev);
  color: var(--kc-tinta); white-space: nowrap;
}
.kc-partido__cancha {
  grid-column: 1 / -1; font-size: 11px; color: var(--kc-tinta-3); text-align: center;
}

/* ── Tarifas por bloque ────────────────────────────────────────────────
   La tira de la semana. Cada bloque crece en proporción a los minutos que
   cubre, así el día se lee como una regla y no como una lista: un vistazo
   basta para ver que la punta ocupa la última cuarta parte de la tarde. */
.tarifa-dia { display: flex; align-items: center; gap: 10px; }
.tarifa-dia__nom {
  flex: 0 0 78px; font-size: 12px; color: var(--text-tertiary);
  text-transform: capitalize;
}
.tarifa-dia__tira { display: flex; flex: 1 1 auto; gap: 2px; min-width: 0; overflow-x: auto; }
.tarifa-bloque {
  /* Crece en proporción a los minutos, pero nunca por debajo de lo que mide
     su propia etiqueta: un bloque de media hora ilegible no informa nada. */
  flex: 1 1 0; min-width: 88px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; padding: 6px 8px; border-radius: var(--radio-6);
  background: var(--success-soft); color: var(--success);
  font-size: 11.5px; line-height: 1.25;
}
.tarifa-bloque b { display: block; font-weight: 600; font-size: 11px; opacity: .8; }
.tarifa-bloque--sin { background: var(--surface-sunken); color: var(--text-tertiary); }

/* Las casillas de días, como fichas: siete controles en una línea sin que
   parezcan un formulario de siete campos. */
.chip-check { display: inline-flex; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-check span {
  display: inline-block; padding: 6px 11px; border-radius: var(--radio-full);
  border: 1px solid var(--border); font-size: 13px;
  color: var(--text-secondary); background: var(--surface); user-select: none;
}
.chip-check input:checked + span {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
.chip-check input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Armar parejas a mano ──────────────────────────────────────────────
   Una fila por persona, con su buscador de compañero al lado. En el
   teléfono el menú y el botón bajan debajo del nombre en vez de apretarse
   contra el borde: es donde se arman las duplas, diez minutos antes de
   empezar y de pie. */
@media (max-width: 620px) {
  .fila-lista[data-suelto] { flex-wrap: wrap; }
  .fila-lista[data-suelto] > form { flex: 1 1 100%; justify-content: flex-start !important; }
}

/* ── El asistente para crear una competencia ───────────────────────────
   Tres pasos, siempre a la vista. Saber cuántos faltan es lo que hace que
   alguien empiece: un formulario que no dice dónde termina se abandona en el
   primer campo raro. Y era exactamente lo que había —doce campos de una— con
   la mitad sin sentido hasta haber elegido el formato. */
.cw-pasos { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.cw-paso {
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--radio-full);
  font-size: 13px; color: var(--text-tertiary); background: var(--surface);
}
.cw-paso b {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border-radius: 50%; background: var(--surface-sunken); color: var(--text-tertiary);
  font-size: 11px; font-weight: 700;
}
.cw-paso--on { border-color: var(--accent); color: var(--text-primary); }
.cw-paso--on b { background: var(--accent); color: var(--accent-contrast); }
.cw-paso--listo b { background: var(--success); color: #fff; }

/* Lo mismo en la ficha pública: la lista con su ícono. Sin `list-style`
   porque el ícono ya es la viñeta, y con el emoji a tamaño fijo para que una
   fila de cuatro no quede escalonada. */
.am-extras { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.am-extras li { display: inline-flex; align-items: center; gap: 7px; }
.am-extras li > span { font-size: 16px; line-height: 1; }

/* ── El armador de parejas ─────────────────────────────────────────────
   Se usa EN EL TELÉFONO, de pie, por doce personas a la vez. De ahí el
   tamaño: las fichas son blancos de pulgar, no etiquetas. */
.pj-lista { display: flex; flex-wrap: wrap; gap: 10px; }
.pj {
  display: inline-flex; align-items: center; min-height: 46px;
  padding: 10px 18px; border: 1px solid var(--border); border-radius: var(--radio-full);
  background: var(--surface); color: var(--text-primary); font-size: 15px;
  text-decoration: none; cursor: pointer; font-family: inherit;
  transition: border-color .18s, background .18s, transform .12s;
}
.pj:hover, .pj:focus-visible { border-color: var(--border-strong); }
.pj:active { transform: scale(.97); }
/* El que soy yo, marcado: en una lista de doce nombres el propio se busca. */
.pj--yo { border-color: var(--accent); font-weight: 600; }
/* El primero de los dos toques, ya elegido. No es un botón: tocarlo otra vez
   no hace nada, y dejarlo con aspecto de botón invita a volver a apretarlo. */
.pj--on { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); cursor: default; }
/* Arrastrando uno encima. */
.pj--sobre { border-color: var(--accent); background: var(--accent-soft); }
.pj--elegir { width: 100%; justify-content: center; }
@media (min-width: 520px) { .pj--elegir { width: auto; } }

/* ── Lo que hay además del pádel ───────────────────────────────────────
   Casillas con ícono y no un párrafo: «asado» es la misma palabra en los 179
   clubes, y marcarla es un toque contra escribir una frase. La casilla de
   verdad se esconde y manda la etiqueta entera, que es lo que se puede tocar
   con el pulgar. */
.act-rej { display: flex; flex-wrap: wrap; gap: 8px; }
.act {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 14px 8px 12px; border: 1px solid var(--border);
  border-radius: var(--radio-full); background: var(--surface);
  font-size: 13px; transition: border-color .18s, background .18s;
}
.act:hover { border-color: var(--border-strong); }
.act input { position: absolute; opacity: 0; width: 0; height: 0; }
.act input:focus-visible + .act__i { outline: 2px solid var(--accent); outline-offset: 3px; }
.act__i { font-size: 15px; line-height: 1; }
.act--on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }

/* Los pasos ya hechos son enlaces: se vuelve pinchándolos. */
a.cw-paso { text-decoration: none; }
a.cw-paso:hover { border-color: var(--accent); color: var(--text-primary); }

/* ── Lo que llevas elegido ─────────────────────────────────────────────
   El asistente pedía tres cosas y no enseñaba ninguna: en el paso 3 nadie se
   acuerda de a qué hora dejó la competencia. Cada tarjeta es además el
   enlace al paso donde se cambia, que es la otra mitad de lo mismo. */
.cw-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cw-resumen > a {
  display: grid; gap: 2px; padding: 12px 14px; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface-raised); color: var(--text-primary);
  transition: border-color .18s, background .18s;
}
.cw-resumen > a:hover { border-color: var(--accent); background: var(--surface); }
.cw-cambiar { font-size: 12px; font-weight: 600; color: var(--accent); margin-top: 4px; }

/* Las dos formas de jugar, como tarjetas y no como dos radios en una lista.
   «¿Juegas con tu pareja o va rotando?» se contesta sin saber nada de pádel
   de torneo; «¿round robin o corralito?» no, y era la primera pregunta. */
.cw-familias { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.cw-fam {
  display: block; position: relative; padding: 16px 16px 16px 44px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface); transition: border-color .18s, background .18s;
}
.cw-fam:hover { border-color: var(--border-strong); }
.cw-fam input { position: absolute; left: 16px; top: 18px; }
.cw-fam b { display: block; margin-bottom: 4px; }
.cw-fam span { display: block; font-size: 13px; color: var(--text-tertiary); line-height: 1.5; }
.cw-fam--on { border-color: var(--accent); background: var(--accent-soft); }

/* ── Cambiar el formato del torneo ─────────────────────────────────────
   La fila entera es el disparador, no un enlace de doce píxeles: estaba
   como un `summary` de texto suelto y el club no lo encontró. Se quita el
   triangulito porque ya hay un botón diciendo qué hace. */
.cambio-formato > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; cursor: pointer; list-style: none;
}
.cambio-formato > summary::-webkit-details-marker { display: none; }
.cambio-formato > summary::marker { content: ''; }
.cambio-formato > summary:hover .btn { background: var(--surface-sunken); }
.cambio-formato > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radio-6);
}
/* Abierto, el botón dice lo que hace ahora. */
.cambio-formato[open] > summary .btn::after { content: ' ▴'; }
.cambio-formato:not([open]) > summary .btn::after { content: ' ▾'; }

/* ── Grupos y llaves ───────────────────────────────────────────────────
   Dos cosas que el fixture en lista no deja ver: cómo quedaron los grupos
   y cómo va la llave de cada copa. Vive en los dos mundos —el panel y la
   página pública— así que usa medidas propias y hereda los colores del
   contenedor, sin depender de ninguna de las dos paletas. */
/* 340 y no 250: con 250 entraban dos grupos a lo ancho en una pantalla de
   escritorio y adentro de cada uno los nombres de las parejas se partían en
   cuatro líneas. Un grupo necesita el ancho de un nombre completo. */
.gl-grupos { display: grid; gap: 12px;
             grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.gl-grupo { border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 14%, transparent);
            border-radius: 10px; overflow: hidden; }
/* Con poco ancho no caben las ocho columnas, y la que se salía era PTS
   —justo la que decide la tabla—. En vez de arrastrar a lo ancho se esconden
   GF y GC: la diferencia ya las resume, y quien quiera el detalle lo tiene en
   la pestaña de tablas y en el computador. */
@media (max-width: 560px) {
  .gl-tabla th:nth-child(7), .gl-tabla td:nth-child(7),
  .gl-tabla th:nth-child(8), .gl-tabla td:nth-child(8) { display: none; }
  .gl-tabla th, .gl-tabla td { padding-left: 6px; padding-right: 6px; }
}
/* El nombre del grupo, GRANDE. Era un rótulo de doce píxeles como cualquier
   otro encabezado, y en una página con tres grupos seguidos lo primero que
   hay que poder hacer es encontrar el tuyo sin leer nada más. Con la barra de
   color al costado se ubica de reojo, desplazando. */
.gl-grupo__tit { display: flex; align-items: center; gap: 9px;
                 padding: 10px 12px; font-size: 15px; font-weight: 800;
                 letter-spacing: .02em; color: var(--text-primary);
                 background: color-mix(in srgb, currentColor 6%, transparent);
                 border-left: 4px solid var(--accent); }
.gl-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.gl-tabla th { font-size: 10.5px; font-weight: 600; text-transform: uppercase;
               letter-spacing: .04em; opacity: .55; padding: 5px 8px; text-align: left; }
.gl-tabla td { padding: 6px 8px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.gl-n { text-align: right; font-variant-numeric: tabular-nums; }
/* El puesto es lo que decide a qué copa va cada pareja: se marca. */
.gl-puesto { font-weight: 700; opacity: .75; }
/* El rótulo de la copa, del color de su copa. Salía gris para las tres y
   había que leer la palabra; con el color se reconoce de un vistazo, que es
   justo lo que se mira en una tabla de grupo. */
.gl-copa { display: inline-flex; align-items: center; gap: 3px;
           margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
           font-weight: 700; white-space: nowrap;
           background: color-mix(in srgb, currentColor 10%, transparent); }
/* El ícono al lado del nombre. Un pelo más grande que el texto —una medalla
   a 10 px es una mancha— y sin empujar la línea: la chapita vive dentro de
   celdas de tabla apretadas. */
.gl-copa__i { font-size: 1.15em; line-height: 1; }
.gl-llave__i { font-size: 1.1em; line-height: 1; margin-right: 2px; }
.gl-copa--oro    { background: #FEF3C7; color: #92400E; }
.gl-copa--plata  { background: #E5E7EB; color: #374151; }
.gl-copa--bronce { background: #FFEDD5; color: #9A3412; }
.gl-copa--mimbre { background: #EDE9E3; color: #6B5B44; }

/* La tabla se corre a lo ancho en vez de cortarse: en el teléfono la columna
   de PTS quedaba fuera y se leía «PT». Con una raya arriba para despegarla
   del horario, y con aire a los lados: pegada al borde de la tarjeta se lee
   como si se hubiera desbordado. */
.gl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
             padding: 2px 12px 12px;
             border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.gl-agenda + .gl-scroll { padding-top: 12px; }

.gl-llaves { display: grid; gap: 10px; margin-top: 12px;
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.gl-llave { border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
            border-radius: 10px; overflow: hidden; }
.gl-llave__tit { padding: 7px 11px; font-size: 12px; font-weight: 800;
                 letter-spacing: .05em; text-transform: uppercase;
                 background: color-mix(in srgb, currentColor 6%, transparent); }
/* Oro, plata y bronce se reconocen por el color antes que por la palabra. */
.gl-llave__tit--oro    { background: rgba(217,164,6,.16);  color: #8A6A00; }
.gl-llave__tit--plata  { background: rgba(120,130,145,.16); color: #4A5464; }
.gl-llave__tit--bronce { background: rgba(176,110,60,.16); color: #7A4A20; }
.gl-llave__tit--mimbre { background: rgba(120,100,70,.14); color: #6A5636; }

/* La llave. Una columna por ronda y `space-around` en cada una: así el
   partido de la ronda siguiente queda a la altura de los dos de los que sale,
   que es lo que hace que un cuadro se lea como cuadro y no como tres listas
   al lado. Sirve para cuatro, ocho o dieciséis sin tocar nada. */
.gl-cols { display: flex; gap: 10px; padding: 10px; overflow-x: auto; }
.gl-col { flex: 1 0 148px; min-width: 148px; display: flex; flex-direction: column; gap: 8px; }
.gl-col__ps { flex: 1; display: flex; flex-direction: column;
              justify-content: space-around; gap: 8px; }
.gl-col--espera { opacity: .75; }
.gl-col__tit { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .05em; opacity: .5; }
.gl-p { border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        border-radius: 8px; padding: 7px 9px; font-size: 12.5px; line-height: 1.35; }
.gl-p--cerrado { background: color-mix(in srgb, currentColor 4%, transparent); }
.gl-p__rotulo { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase;
                letter-spacing: .05em; opacity: .5; margin-bottom: 2px; }
.gl-p__lado { display: block; }
.gl-p__lado--gana { font-weight: 700; }
.gl-p__m { display: block; font-size: 11px; font-weight: 700; opacity: .55;
           font-variant-numeric: tabular-nums; margin: 1px 0; }
.gl-p__pie { display: block; font-size: 10.5px; opacity: .5; margin-top: 3px; }
/* La cancha, como título del partido en el horario de un grupo. Va marcada
   —no gris al pie— porque es la mitad del dato: «a las 11:00 en la 3». */
.gl-p__cancha { display: block; margin: -1px 0 4px; font-size: 11.5px;
                font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
                color: var(--accent); }
.gl-vacio { border: 1px dashed color-mix(in srgb, currentColor 20%, transparent);
            border-radius: 8px; padding: 8px 9px; font-size: 12px; opacity: .55; }


/* El eco de «anotar»: dice si quedó guardado sin sacar a nadie de la fila. */
/* El espacio se reserva desde el principio: si no, la fila entera salta hacia
   la izquierda cada vez que aparece un «anotado». */
.anota__eco { align-self: center; font-size: 11.5px; flex: 0 0 74px; white-space: nowrap;
              color: var(--text-tertiary); }
.anota__eco--ok   { color: var(--success); font-weight: 600; }
/* «¡Semifinales de copa!» no cabe en 74px: cuando hay una ronda nueva el eco
   se estira, porque es la noticia del día y no un acuse de recibo. */
.anota__eco--ok { flex: 0 1 auto; white-space: normal; }
.anota__eco--malo { color: var(--danger); white-space: normal; flex: 0 1 220px; }

/* ═══ El americano, para el que lo está jugando ═══════════════════════
   Esta página se abre EN LA CANCHA, en el teléfono, entre ronda y ronda, y
   después se comparte por WhatsApp. Tiene su propio mundo —claro, de
   tarjetas, con el podio arriba— porque lo que se busca acá es «¿cómo voy?»
   y «¿a qué hora me toca?», no navegar un sitio.

   El fondo gris y las tarjetas blancas vienen del diseño que pidió el club:
   es el lenguaje de una aplicación de teléfono y se lee de un vistazo bajo el
   sol. En el computador la columna se centra y no se estira: una tabla de
   doce parejas a 1400px de ancho es una planilla, no un torneo. */
/* Los tokens del americano, RETUNEADOS al sistema nuevo. Toda la página
   —seiscientas líneas de tablas, fixture y cuadros— cuelga de estas seis
   variables, así que cambiarlas acá la migra entera sin tocar el marcado.

   `main.am` Y NO `.am`: la ficha del americano lleva `am` también en el
   <body> —de ahí cuelga el retune de más abajo, `body.am.pista`— y con el
   selector suelto este bloque le caía encima. El cuerpo entero quedaba
   encajonado en 600 píxeles y centrado: la cabecera de PISTA salía de ese
   porte, en medio de la pantalla, con dos franjas vacías a los lados. Es el
   mismo choque que después costó `.catalogo`, y las dos veces no dio error:
   sólo se veía mal. */
main.am {
  --am-fondo:  #EDEEEA;
  --am-carta:  #FFFFFF;
  --am-linea:  #E4E6E2;
  --am-suave:  #6B716C;
  --am-tinta:  #0D0F0E;
  --am-verde:  #0F3D2E;
  --am-oro:    #D97706;   --am-oro-f:    #FEF3C7;
  --am-plata:  #4B5563;   --am-plata-f:  #F3F4F6;
  --am-bronce: #B45309;   --am-bronce-f: #FFEDD5;
  --am-aire: 14px;
  max-width: 600px; margin: 0 auto; padding: 0 var(--am-aire) 32px;
  color: var(--am-tinta);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Plus Jakarta Sans',
               system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body:has(.am) { background: var(--am-fondo); }

/* ── La cabecera ──────────────────────────────────────────────────── */
.am-cab { padding: 16px 0 10px; }
.am-cab__fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am-vivo { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
           border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.am-vivo--juego   { background: #D1FAE5; color: #065F46; }
.am-vivo--abierto { background: #DBEAFE; color: #1E40AF; }
.am-vivo--fin     { background: #F3F4F6; color: #4B5563; }
/* El punto late sólo mientras se está jugando: es la única animación de la
   página y por eso significa algo. */
.am-vivo__punto { width: 6px; height: 6px; border-radius: 50%; background: #10B981;
                  animation: am-late 1.6s ease-in-out infinite; }
@keyframes am-late { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .am-vivo__punto { animation: none; } }
.am-club { font-size: 12.5px; font-weight: 600; color: var(--am-suave); text-decoration: none; }
.am-club:hover { color: var(--am-verde); }

.am-titulo { margin: 10px 0 2px; font-size: clamp(24px, 6vw, 30px); font-weight: 800;
             letter-spacing: -.03em; line-height: 1.08; }
.am-datos { margin: 0; display: flex; flex-wrap: wrap; gap: 0 6px;
            font-size: 12.5px; color: var(--am-suave); }

/* ── El podio ─────────────────────────────────────────────────────── */
.am-podio { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.am-podio__f { display: flex; align-items: center; justify-content: space-between; gap: 8px;
               padding: 8px 12px; border-radius: 12px; font-size: 13px;
               border: 1px solid transparent; }
.am-podio__f--oro    { background: var(--am-oro-f);    border-color: #FDE68A; color: #78350F; }
.am-podio__f--plata  { background: var(--am-plata-f);  border-color: #E5E7EB; color: #374151; }
.am-podio__f--bronce { background: var(--am-bronce-f); border-color: #FED7AA; color: #7C2D12; }
.am-podio__f--mimbre,
.am-podio__f--otro   { background: #F5F5F4; border-color: #E7E5E4; color: #44403C; }
.am-podio__izq { display: flex; align-items: center; gap: 7px; min-width: 0; }
.am-podio__med { font-size: 15px; }
.am-podio__nom { font-weight: 600; color: var(--am-tinta); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.am-podio__rot { flex: 0 0 auto; font-size: 10px; font-weight: 800;
                 text-transform: uppercase; letter-spacing: .06em; opacity: .8; }

/* ── Las pestañas ─────────────────────────────────────────────────────
   Botones de radio y no JavaScript: la página se abre en un teléfono con
   mala señal en el fondo de un club, y si el guion no carga las pestañas
   tienen que funcionar igual. */
.am-tabs__r { position: absolute; opacity: 0; pointer-events: none; }
/* Las columnas se cuentan solas: «Cuadros» no está en un americano —no tiene
   cuadros— y con un `repeat(4, 1fr)` fijo quedaba una cuarta columna vacía
   y las tres pestañas apretadas a la izquierda. */
.am-tabs__nav { position: sticky; top: 0; z-index: 5; display: grid;
                grid-auto-flow: column; grid-auto-columns: 1fr;
                gap: 2px; margin: 14px 0 12px;
                padding: 3px; border-radius: 11px; background: #E3E3E8; }
.am-tabs__nav label { padding: 7px 4px; border-radius: 8px; text-align: center;
                      font-size: 13px; font-weight: 600; color: #4B5563; cursor: pointer;
                      transition: background .15s, color .15s; }
.am-tabs__nav label:hover { color: var(--am-tinta); }
.am-panel { display: none; }
#am-rondas:checked  ~ .am-panel--rondas,
#am-tabla:checked   ~ .am-panel--tabla,
#am-cuadros:checked ~ .am-panel--cuadros,
#am-parejas:checked ~ .am-panel--parejas { display: block; }
#am-rondas:checked  ~ .am-tabs__nav label[for="am-rondas"],
#am-tabla:checked   ~ .am-tabs__nav label[for="am-tabla"],
#am-cuadros:checked ~ .am-tabs__nav label[for="am-cuadros"],
#am-parejas:checked ~ .am-tabs__nav label[for="am-parejas"] {
  background: var(--am-carta); color: var(--am-tinta);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .1);
}
.am-tabs__r:focus-visible ~ .am-tabs__nav label { outline: 2px solid var(--am-verde); }

/* ── Las tarjetas ─────────────────────────────────────────────────── */
.am-card { background: var(--am-carta); border-radius: 14px; padding: 12px 14px;
           margin-bottom: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.am-lab { display: block; margin: 16px 0 7px; font-size: 11px; font-weight: 700;
          text-transform: uppercase; letter-spacing: .07em; color: var(--am-suave); }
.am-modalidad { display: flex; flex-direction: column; gap: 2px; }
.am-modalidad .am-lab { margin: 0; }
.am-modalidad__t { font-size: 14px; font-weight: 600; }

.am-ronda__cab { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 8px; margin: 18px 2px 8px; }
.am-ronda__nom { font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
                 color: var(--am-suave); }
.am-ronda__hora, .am-ronda__fase { font-weight: 500; text-transform: none; letter-spacing: 0; }
.am-ronda__est { font-size: 11.5px; font-weight: 600; color: var(--am-suave); }
.am-ronda__est--ok { color: var(--am-verde); }

/* Un partido. El ganador en negro y el que perdió en gris: se lee quién ganó
   sin leer los números. */
.am-p__cab { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px;
             margin-bottom: 6px; border-bottom: 1px solid var(--am-linea);
             font-size: 11.5px; color: var(--am-suave); }
.am-p__hora { flex: 0 0 auto; }
.am-p__lado { display: flex; align-items: center; justify-content: space-between; gap: 10px;
              padding: 4px 0; font-size: 14.5px; color: #6B7280; }
.am-p__lado--gana { color: var(--am-tinta); font-weight: 700; }
.am-p__n { flex: 0 0 auto; min-width: 30px; text-align: center; padding: 2px 8px;
           border-radius: 7px; background: #F3F4F6; font-weight: 700;
           font-variant-numeric: tabular-nums; }
.am-p__lado--gana .am-p__n { background: #D1FAE5; color: #065F46; }
.am-p__pie { margin-top: 6px; font-size: 11.5px; color: var(--am-oro); font-weight: 600; }
/* La gran final se distingue del resto: es el partido del día. */
.am-p--oro { background: linear-gradient(#FFFBEB, #FFFFFF); border: 1px solid #FDE68A; }
.am-p--oro .am-p__cab { color: var(--am-oro); font-weight: 700; }
.am-p--oro .am-p__lado--gana .am-p__n { background: #FDE68A; color: #78350F; }

.am-descansan { margin: 2px 2px 10px; font-size: 12px; color: var(--am-suave); }

/* ── Las tablas ───────────────────────────────────────────────────── */
.am-card--tabla { padding: 4px 0; overflow-x: auto; }
.am-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.am-tabla th { padding: 8px 10px; text-align: left; font-size: 10.5px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .05em; color: var(--am-suave); }
.am-tabla td { padding: 9px 10px; border-top: 1px solid var(--am-linea); }
.am-tabla .am-n { text-align: right; font-variant-numeric: tabular-nums; }
.am-tabla--podio td { background: #F0FDF4; font-weight: 600; }
.am-nota { margin: 8px 2px 0; font-size: 12px; line-height: 1.5; color: var(--am-suave); }
.am-nota a { color: var(--am-verde); }

.am-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.am-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px;
           border-radius: 999px; background: #F3F4F6; font-size: 12.5px; font-weight: 500; }
.am-chip i { font-style: normal; font-size: 10px; font-weight: 800; text-transform: uppercase;
             letter-spacing: .04em; color: var(--am-oro); }
.am-vacio { text-align: center; color: var(--am-suave); font-size: 13.5px; }
.am-vacio p, .am-vacio__p { margin: 6px 0; }
.am-vacio a { color: var(--am-verde); }

/* Los grupos y las llaves heredan el color del contenedor, así que acá
   quedan claros sin tocar su hoja. */
.am .gl-grupo, .am .gl-llave { background: var(--am-carta); border-color: var(--am-linea); }
.am .gl-grupos, .am .gl-llaves { margin-bottom: 10px; }

/* ── Inscribirse en el americano ───────────────────────────────────────
   Lo primero que ve el que abrió el enlace que le mandaron: viene a
   anotarse, no a mirar una tabla vacía. Campos grandes, porque se llena de
   pie en el estacionamiento del club. */
.am-inscribir { margin: 14px 0 4px; }
.am-ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.am-ok p { margin: 4px 0 0; font-size: 13px; color: #047857; }
.am-error { margin-bottom: 10px; padding: 9px 11px; border-radius: 10px;
            background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B;
            font-size: 13px; }
.am-form { display: flex; flex-direction: column; gap: 12px; }
.am-campo { display: flex; flex-direction: column; gap: 5px; border: 0; padding: 0; margin: 0; }
.am-campo > span, .am-campo > legend { font-size: 12.5px; font-weight: 600; padding: 0; }
.am-campo > span > i, .am-campo > legend > i { font-style: normal; font-weight: 500;
                                               color: var(--am-suave); }
.am-campo input[type="text"], .am-campo input:not([type]), .am-campo input[name] {
  width: 100%; padding: 11px 12px; border: 1px solid var(--am-linea); border-radius: 10px;
  font-size: 16px;  /* 16px o el teléfono hace zoom al enfocar */
  font-family: inherit; background: var(--am-carta); color: var(--am-tinta);
}
.am-campo input:focus { outline: 2px solid var(--am-verde); outline-offset: 1px;
                        border-color: var(--am-verde); }
.am-campo small { font-size: 11.5px; line-height: 1.45; color: var(--am-suave); }

/* El +56 pegado al campo: nadie tiene que acordarse de ponerlo. */
.am-tel { display: flex; align-items: stretch; }
.am-tel i { display: flex; align-items: center; padding: 0 11px; font-style: normal;
            font-weight: 600; font-size: 15px; color: var(--am-suave);
            background: #F3F4F6; border: 1px solid var(--am-linea); border-right: 0;
            border-radius: 10px 0 0 10px; }
.am-tel input { border-radius: 0 10px 10px 0 !important; }

.am-lados__op { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.am-lado input { position: absolute; opacity: 0; width: 0; height: 0; }
.am-lado span { display: block; padding: 10px 6px; text-align: center; font-size: 13px;
                font-weight: 600; border: 1px solid var(--am-linea); border-radius: 10px;
                background: var(--am-carta); cursor: pointer; }
.am-lado input:checked + span { background: var(--am-verde); border-color: var(--am-verde);
                                color: #fff; }
.am-lado input:focus-visible + span { outline: 2px solid var(--am-verde); outline-offset: 2px; }

/* ── «¿Qué haces en el pádel?» ─────────────────────────────────────────
   Casillas apiladas y no una fila de tres como `.am-lados`: cada una lleva
   una línea de explicación, y tres bloques de texto en fila quedan en
   columnas de cuarenta píxeles en el teléfono. La casilla se ve —no se
   esconde como en `.am-lado`— porque acá se puede marcar más de una, y sin
   la marca visible nadie sabe que eso es posible. */
.am-marcas { display: flex; flex-direction: column; gap: 8px; }
.am-marca { display: flex; align-items: flex-start; gap: 11px; padding: 12px 13px;
            border: 1px solid var(--am-linea); border-radius: 12px;
            background: var(--am-carta); cursor: pointer;
            /* Algo invisible adentro (el checkbox con su estilo global) se
               pasaba del borde y dejaba la página de 442 px en el teléfono. */
            overflow: hidden; }
.am-marca:hover { border-color: var(--am-verde); }
.am-marca input { flex: 0 0 auto; margin: 2px 0 0; width: 18px; height: 18px;
                  accent-color: var(--am-verde); cursor: pointer; }
.am-marca span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-marca b { font-size: 14.5px; font-weight: 700; color: var(--am-tinta); }
.am-marca small { font-size: 12.5px; line-height: 1.45; color: var(--am-suave); }
.am-marca:has(input:checked) { border-color: var(--am-verde);
                               box-shadow: inset 0 0 0 1px var(--am-verde); }
.am-marca:has(input:focus-visible) { outline: 2px solid var(--am-verde); outline-offset: 2px; }

/* El pie del formulario: «¿ya tienes cuenta?». Chico y aparte, porque es
   para la minoría que se equivocó de página. */
.am-pie-nota { margin: 14px 0 0; text-align: center; font-size: 12.5px;
               color: var(--am-suave); }
.am-pie-nota a { color: var(--am-verde); font-weight: 600; }

.am-btn { padding: 13px 16px; border: 0; border-radius: 12px; background: var(--am-verde);
          color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700;
          cursor: pointer; }
.am-btn:hover { background: #047857; }
.am-form__pie { text-align: center; font-size: 12px; color: var(--am-suave); }

/* Nombre y apellido, uno al lado del otro. En el teléfono angosto se apilan:
   dos campos de texto a 160px cada uno no se llenan cómodos. */
.am-doble { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .am-doble { grid-template-columns: 1fr; } }

/* ── Cuánto queda del americano ────────────────────────────────────────
   La barra se entiende sin leer y el número es el dato exacto que alguien
   le pasa a su compañero. Las dos cosas, porque contestan distinto. */
.am-cupos { display: flex; flex-direction: column; gap: 9px; }
.am-cupos__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.am-cupos__n { font-size: 14px; color: var(--am-suave); }
.am-cupos__n b { color: var(--am-tinta); font-size: 17px; font-weight: 800; }
.am-cupos__caja { display: flex; flex-direction: column; align-items: center;
                  min-width: 74px; padding: 5px 10px; border-radius: 10px;
                  background: #ECFDF5; border: 1px solid #A7F3D0; line-height: 1.1; }
.am-cupos__caja b { font-size: 20px; font-weight: 800; color: #047857;
                    font-variant-numeric: tabular-nums; }
.am-cupos__caja i { font-style: normal; font-size: 10px; font-weight: 700;
                    text-transform: uppercase; letter-spacing: .04em; color: #059669; }
/* Con dos o menos deja de ser información y pasa a ser un apuro. */
.am-cupos__caja--pocos { background: #FEF2F2; border-color: #FECACA; }
.am-cupos__caja--pocos b { color: #B91C1C; }
.am-cupos__caja--pocos i { color: #DC2626; }
/* «Completo» es una palabra donde el resto del tiempo va un número grande:
   baja de tamaño para que quepa sin romper el ancho de la caja. */
.am-cupos__completo { font-size: 12px !important; text-transform: uppercase;
                      letter-spacing: .05em; }

/* ── Cupos completos ───────────────────────────────────────────────────
   Ocupa el lugar del formulario, no se suma a él. Va en rojo suave —el
   mismo de la caja cuando aprieta— porque es la misma noticia dicha en
   grande, y no en gris: en gris se lee como un pie de página. */
.am-lleno { background: #FEF2F2; border: 1px solid #FECACA; }
.am-lleno__t { display: block; font-size: 16px; color: #991B1B; }
.am-lleno p { margin: 6px 0 0; font-size: 13px; color: #B91C1C; }
.am-lleno__mas { padding-top: 9px; border-top: 1px solid #FECACA; }
.am-lleno__mas b { color: #7F1D1D; }
.am-lleno a { color: #991B1B; font-weight: 700; }

/* ── La lista de reserva ───────────────────────────────────────────────
   Ámbar y no verde ni rojo: no es «listo» ni «no hay», es «estás en la
   fila». El acuse y la cola comparten el tono para que se lean como la
   misma cosa. */
.am-espero { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.am-espero p { margin: 4px 0 0; font-size: 13px; color: #B45309; }

/* «Agregar a mi calendario» dentro del acuse. Botón y no enlace suelto: es
   la única acción de esa tarjeta y se aprieta con el pulgar en la calle, con
   el teléfono en una mano. */
.am-agenda { display: inline-block; align-self: flex-start; margin-top: 10px;
             padding: 8px 14px; border-radius: 10px;
             background: var(--am-carta, #fff); color: inherit;
             box-shadow: inset 0 0 0 1.5px currentColor;
             font-size: 13px; font-weight: 700; text-decoration: none; }
.am-agenda:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.am-cola__l { list-style: none; margin: 0; padding: 0; display: flex;
              flex-direction: column; gap: 1px; }
.am-cola__l li { display: flex; align-items: center; gap: 10px;
                 padding: 8px 0; border-top: 1px solid var(--am-linea); }
.am-cola__l li:first-child { border-top: 0; }
/* El número del puesto, tabular: en una columna de números el ojo compara
   posiciones, y con ancho variable el 1 y el 10 no se alinean. */
.am-cola__p { flex: 0 0 24px; height: 24px; display: grid; place-items: center;
              border-radius: 8px; background: #FFFBEB; color: #92400E;
              font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.am-cola__n { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-cola__h { flex: 0 0 auto; font-size: 11.5px; color: var(--am-suave); }

/* ── Una fecha del circuito ────────────────────────────────────────────
   La fila entera es el enlace: en el teléfono el blanco útil es toda la
   fila, no los pocos píxeles del nombre. */
.am-fecha { display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit;
            border-top: 1px solid var(--am-linea); }
.am-fecha:first-child { border-top: 0; }
.am-fecha:hover { background: color-mix(in srgb, currentColor 4%, transparent); }
.am-fecha__i { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.am-fecha__i b { font-size: 14.5px; }
.am-fecha__i i { font-style: normal; font-size: 12px; color: var(--am-suave); }
.am-fecha__e { flex: 0 0 auto; font-size: 11px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .04em; color: var(--am-suave); }

/* La lista de «qué te resuelve»: viñetas con aire, no un párrafo con puntos. */
.am-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.am-lista li { font-size: 14px; line-height: 1.5; color: var(--am-tinta); }
.am-lista b { font-weight: 700; }

/* ── La ficha del americano ────────────────────────────────────────────
   Las preguntas que llegan por WhatsApp, contestadas todas juntas. Una
   parrilla que en el teléfono es una columna y en el escritorio dos: son
   datos que se CONSULTAN —«¿a qué hora era?»— y en una columna larga hay
   que barrer toda la lista para encontrar uno. */
.am-ficha { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.am-datos2 { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .am-datos2 { grid-template-columns: 1fr 1fr; gap: 16px 22px; } }

.am-dato { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* El rótulo arriba y chico: se salta con la vista hasta dar con el que se
   busca, y recién ahí se lee el dato. Al revés —dato grande arriba— hay que
   leerlos todos. */
.am-dato__r { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; color: var(--am-suave); }
.am-dato b { font-size: 15px; font-weight: 700; color: var(--am-tinta); line-height: 1.3; }
.am-dato i { font-style: normal; font-size: 12.5px; color: var(--am-suave); line-height: 1.4; }
.am-dato__ir { align-self: flex-start; margin-top: 4px; font-size: 12.5px;
               font-weight: 700; color: var(--am-verde); text-decoration: none; }
.am-dato__ir:hover { text-decoration: underline; }

/* Lo que el club promete además del pádel. Se lee entero, no se consulta,
   así que va en bloques a lo ancho y no en la parrilla. */
.am-extras { display: flex; flex-direction: column; gap: 12px; }
.am-extra__r { display: block; font-size: 10.5px; font-weight: 700;
               text-transform: uppercase; letter-spacing: .05em; color: var(--am-suave); }
.am-extra p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: var(--am-tinta);
              white-space: pre-line; }
/* Los premios en dorado: es lo único de la tarjeta que no le toca a todos. */
.am-extra__premios .am-extra__r { color: #B45309; }
.am-extra__premios p { color: #92400E; font-weight: 600; }

/* Los premios, uno por línea con su puesto adelante. La chapita del puesto
   tiene ancho fijo para que los premios queden alineados: en una columna,
   el ojo compara qué se lleva cada lugar sin leer los números. */
.am-premios { list-style: none; margin: 4px 0 0; padding: 0;
              display: flex; flex-direction: column; gap: 6px; }
.am-premios li { display: flex; align-items: baseline; gap: 9px; }
.am-premios__p { flex: 0 0 42px; padding: 2px 0; border-radius: 7px; text-align: center;
                 background: #FEF3C7; color: #92400E; font-size: 11.5px; font-weight: 800;
                 font-variant-numeric: tabular-nums; }
.am-premios__p--todos { flex-basis: 58px; font-size: 10px; letter-spacing: .02em; }
.am-premios__q { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.45;
                 color: #92400E; font-weight: 600; }

/* Y en el panel, una fila por puesto con el lugar ya escrito. */
.premio-fila { align-items: center; }
.premio-fila__p { flex: 0 0 104px; font-size: 13px; font-weight: 700;
                  color: var(--text-primary); }
.premio-fila__p i { display: block; font-style: normal; font-size: 11px;
                    font-weight: 600; color: var(--text-tertiary); }
.premio-fila__p--todos { color: var(--text-secondary); }
.premio-fila .input { flex: 1 1 auto; min-width: 0; }

/* ══ LA FICHA DEL AMERICANO, EN ANCHO ═════════════════════════════════
   El mundo `am` sigue siendo el mismo —claro, de tarjetas, pensado para
   mirarse en la cancha— y lo que cambia es la COMPOSICIÓN: portada con la
   foto del club, la tira de cifras, los campeones por copa y dos columnas.

   Todo cuelga de `main.am.am-torneo`, que sólo existe en esta pantalla. El
   marcador en vivo y las demás vistas del mundo `am` siguen en su columna
   angosta, que es lo que se mira de pie al lado de una cancha. */
main.am.am-torneo { max-width: 1280px; --am-aire: clamp(16px, 4vw, 24px); }

.am-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
           padding: 22px 0 18px; font-size: 12.5px; color: var(--am-suave); }
.am-miga a:hover { color: var(--am-verde); }
.am-miga span[aria-hidden] { color: var(--am-linea); }

/* ── La portada ────────────────────────────────────────────────────── */
.am-hero { display: grid; grid-template-columns: 1.25fr 1fr; min-height: 360px;
           background: #173D32; color: #fff; border-radius: 14px; overflow: hidden; }
.am-hero__t { display: flex; flex-direction: column; align-items: flex-start;
              justify-content: center; gap: 0; padding: clamp(24px, 3vw, 38px); }
.am-hero__k { display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
              font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
              color: #C6D6CC; }
.am-hero__h { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
              font-size: clamp(30px, 3.6vw, 52px); line-height: 1.04;
              letter-spacing: -.03em; margin: 18px 0 0; color: #fff;
              text-wrap: balance; }
.am-hero__s { font-size: 14px; color: #B7CFC0; margin: 12px 0 0; }
.am-hero__s a { text-decoration: underline; text-underline-offset: 3px; }
.am-hero__s a:hover { color: #fff; }
.am-hero__b { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
              min-height: 46px; padding: 12px 20px; border-radius: 8px;
              background: #E6EFE5; color: #183D30; font-size: 14px; font-weight: 600; }
.am-hero__b:hover { background: #fff; }
.am-hero__f { position: relative; min-width: 0; background: #10312A; }
.am-hero__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.am-hero__r { position: absolute; right: 14px; bottom: 12px; font-size: 10px;
              letter-spacing: .12em; text-transform: uppercase; color: #fff;
              text-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* ── Las cifras ────────────────────────────────────────────────────── */
.am-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
             gap: 18px; padding: 28px 0 24px; border-bottom: 1px solid var(--am-linea); }
.am-cifras > div + div { border-left: 1px solid var(--am-linea); padding-left: 18px; }
.am-cifra { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500;
            font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.am-cifra i { font-family: inherit; font-style: normal; font-size: 17px;
              color: var(--am-suave); margin-left: 4px; }
.am-cifra__r { display: block; margin-top: 8px; font-size: 12.5px; color: var(--am-suave); }

/* ── Los campeones ─────────────────────────────────────────────────
   Una tarjeta por copa. NO son primero, segundo y tercero: cada copa es su
   propio torneo de cuatro parejas, y el campeón de plata es 5º en la general.
   El color distingue la copa; el rótulo lo dice con todas sus letras, porque
   un borde dorado no se lee en blanco y negro ni con daltonismo. */
.am-campeones { padding: 32px 0 36px; }
.am-campeones__cab { display: flex; align-items: flex-end; justify-content: space-between;
                     gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.am-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
         font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -.02em; margin: 4px 0 0; }
.am-h2 em { font-style: italic; }
.am-vertodo { font-size: 12.5px; text-decoration: underline; text-underline-offset: 4px;
              color: var(--am-suave); }
.am-vertodo:hover { color: var(--am-verde); }
.am-campeones__g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
                   gap: 18px; }
.am-campeon { position: relative; background: var(--am-carta); border: 1px solid var(--am-linea);
              border-radius: 12px; padding: 22px; }
.am-campeon__c { font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
                 font-weight: 600; color: var(--am-suave); }
.am-campeon__m { position: absolute; right: 20px; top: 19px; width: 32px; height: 32px;
                 border-radius: 50%; display: grid; place-items: center;
                 border: 1px solid var(--am-linea); background: var(--am-fondo);
                 font: 500 17px 'Fraunces', Georgia, serif; color: var(--am-suave); }
.am-campeon__n { font-size: 18px; font-weight: 600; line-height: 1.25;
                 margin: 12px 42px 0 0; }
.am-campeon__r { font-size: 12.5px; color: var(--am-suave); margin: 6px 0 0; }
.am-campeon__f { display: flex; align-items: baseline; justify-content: space-between;
                 gap: 12px; margin-top: 18px; padding-top: 16px;
                 border-top: 1px solid var(--am-linea); font-size: 13px; color: var(--am-suave); }
.am-campeon__f b { font-size: 24px; color: var(--am-tinta); letter-spacing: -.02em; }
.am-campeon--oro { border-color: #D6C89F; background: linear-gradient(130deg, #FFFEF9, #fff); }
.am-campeon--oro .am-campeon__c { color: #8A6B24; }
.am-campeon--oro .am-campeon__m { border-color: #D8C387; background: #F5EDDA; color: #89691F; }
.am-campeon--plata .am-campeon__c { color: #55606B; }
.am-campeon--plata .am-campeon__m { border-color: #CBD5E1; background: #F1F5F9; color: #475569; }
.am-campeon--bronce .am-campeon__c { color: #9A5B1E; }
.am-campeon--bronce .am-campeon__m { border-color: #E3C3A3; background: #FBEEE2; color: #96551C; }

/* ── Las dos columnas ──────────────────────────────────────────────── */
.am-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px;
             align-items: start; gap: 26px; padding-bottom: 32px; }
/* `min-width: 0` no es adorno: un hijo de rejilla se estira hasta que quepa su
   contenido más ancho, y la tabla de posiciones empujaba la columna por debajo
   de la ficha. Con esto la tabla se desliza dentro de su panel. */
.am-comp { min-width: 0; scroll-margin-top: 20px; }

.am-detalle { position: sticky; top: 20px; background: var(--am-carta);
           border: 1px solid var(--am-linea); border-top: 3px solid var(--am-verde);
           border-radius: 12px; padding: 24px; }
.am-detalle .am-lab { margin-top: 0; }
.am-detalle__t { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px;
              letter-spacing: -.02em; margin: 2px 0 6px; }
.am-bloque { display: flex; flex-direction: column; gap: 3px;
             border-top: 1px solid var(--am-linea); padding: 16px 0; font-size: 13.5px; }
.am-bloque__r { font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
                font-weight: 600; color: var(--am-suave); margin-bottom: 3px; }
.am-bloque b { font-size: 15px; font-weight: 600; }
.am-bloque i { font-style: normal; font-size: 12.5px; color: var(--am-suave); line-height: 1.5; }
.am-bloque__ir { margin-top: 6px; font-size: 12.5px; color: var(--am-verde);
                 text-decoration: underline; text-underline-offset: 4px; }
.am-incluye { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--am-suave); }
.am-incluye li { margin-bottom: 2px; }

.am-estado { margin-top: 18px; padding: 16px; border-radius: 9px;
             background: var(--am-fondo); font-size: 13px; }
.am-estado b { display: block; font-size: 14.5px; }
.am-estado p { margin: 5px 0 0; color: var(--am-suave); line-height: 1.5; }
.am-estado__ir { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600;
                 color: var(--am-verde); text-decoration: underline; text-underline-offset: 4px; }
.am-estado--abierto { background: #EDF4EF; }

/* En esta pantalla las pestañas van como una fila subrayada y no como una
   píldora gris: la columna es ancha, y la píldora estirada a 900 píxeles se
   veía como una barra de navegación del sitio y no como pestañas del torneo. */
.am-torneo .am-tabs__nav { display: flex; gap: 4px; overflow-x: auto;
                           background: none; border-radius: 0; padding: 0;
                           border-bottom: 1px solid var(--am-linea); margin: 0 0 22px; }
.am-torneo .am-tabs__nav label { flex: 0 0 auto; padding: 14px 18px; border-radius: 0;
                                 border-bottom: 3px solid transparent;
                                 font-size: 14px; white-space: nowrap; }
.am-torneo #am-rondas:checked  ~ .am-tabs__nav label[for="am-rondas"],
.am-torneo #am-tabla:checked   ~ .am-tabs__nav label[for="am-tabla"],
.am-torneo #am-cuadros:checked ~ .am-tabs__nav label[for="am-cuadros"],
.am-torneo #am-parejas:checked ~ .am-tabs__nav label[for="am-parejas"] {
  background: none; box-shadow: none;
  color: var(--am-verde); border-bottom-color: var(--am-verde);
}

/* ── El selector de ronda y el buscador ──────────────────────────────
   Los dos nacen escondidos y los muestra el guion. Sin él, todas las rondas
   se ven una tras otra y el buscador no existe: un buscador que no busca es
   peor que no tener buscador. */
.am-rondasel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
               margin: 4px 0 14px; }
.am-rondasel .am-lab { margin: 0; }
.am-rondasel__b { display: flex; gap: 4px; flex-wrap: wrap; }
.am-rondasel__b button { min-height: 36px; padding: 7px 14px; border-radius: 999px;
                         border: 1px solid var(--am-linea); background: var(--am-carta);
                         font-size: 13px; font-weight: 600; color: var(--am-suave);
                         cursor: pointer; }
.am-rondasel__b button:hover { color: var(--am-tinta); }
.am-rondasel__b button[aria-pressed="true"] { background: var(--am-verde);
                                              border-color: var(--am-verde); color: #fff; }

.am-panel__cab { display: flex; align-items: center; justify-content: space-between;
                 gap: 16px; flex-wrap: wrap; }
.am-buscar { display: flex; align-items: center; gap: 10px; }
.am-buscar .am-lab { margin: 0; }
.am-buscar__i { min-height: 38px; padding: 8px 12px; border-radius: 9px;
                border: 1px solid var(--am-linea); background: var(--am-carta);
                font: inherit; font-size: 13px; color: var(--am-tinta); min-width: 200px; }

@media (max-width: 980px) {
  .am-cuerpo { grid-template-columns: 1fr; }
  .am-detalle { position: static; }
}
@media (max-width: 720px) {
  .am-hero { grid-template-columns: 1fr; min-height: 0; }
  /* La foto arriba: en un teléfono, el verde a pantalla completa antes de la
     foto deja el nombre del torneo bajo el pliegue. */
  .am-hero__f { order: -1; aspect-ratio: 16 / 9; }
  .am-cifras { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .am-cifras > div + div { border-left: 0; padding-left: 0; }
  .am-cifras > div:nth-child(even) { border-left: 1px solid var(--am-linea); padding-left: 14px; }
  .am-cifra { font-size: 32px; }
  .am-campeones__g { grid-template-columns: 1fr; }
}

/* ═══ FIN DE LA FICHA DEL AMERICANO EN ANCHO ═════════════════════════
   Lo de acá abajo ya no es de esta pantalla. La prueba que comprueba que
   ninguna clase nueva le pise el nombre a una vieja lee hasta esta línea; sin
   ella se comía todo lo que viniera después en el archivo y denunciaba
   reglas que no tienen nada que ver. Ya pasó con la prueba equivalente del
   backoffice. */

/* ── Cómo juega cada grupo ─────────────────────────────────────────────
   El afiche que arma cualquier club, puesto en la pantalla: por hora, y
   dentro de cada hora un partido por cancha. La hora va en su propia
   columna a la izquierda para que se pueda barrer con el dedo hasta la
   que a uno le toca, sin leer los partidos. */
.gl-agenda { display: flex; flex-direction: column; gap: 10px;
             padding: 11px 12px; }
.gl-tanda { display: flex; align-items: flex-start; gap: 10px; }
.gl-tanda__h { flex: 0 0 46px; padding: 4px 0; border-radius: 8px; text-align: center;
               background: var(--surface-raised, #F1F3F7); color: var(--text-secondary);
               font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gl-tanda__ps { flex: 1 1 auto; min-width: 0; display: grid;
                grid-template-columns: 1fr; gap: 6px; }
/* `auto-fit` y no una consulta de ventana: la consulta mira el ancho de la
   PANTALLA y estos partidos viven dentro de una tarjeta que puede ser mucho
   más angosta. En un escritorio de 900px se ponían dos por fila adentro de
   una columna de 300, y «Mauricio Hugel y Diego Do Nascimento» quedaba en
   cuatro líneas. Así se parten en dos sólo cuando de verdad caben. */
.gl-tanda__ps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.am-barra { height: 9px; border-radius: 999px; background: #E5E7EB; overflow: hidden; }
.am-barra__lleno { display: block; height: 100%; border-radius: 999px;
                   background: linear-gradient(90deg, #10B981, #059669);
                   transition: width .4s var(--ease, ease); }
.am-barra__lleno--pocos { background: linear-gradient(90deg, #F87171, #DC2626); }
@media (prefers-reduced-motion: reduce) { .am-barra__lleno { transition: none; } }
.am-cupos__pct { font-size: 11.5px; color: var(--am-suave); }

/* =====================================================================
   PISTA · fundamentos 2026
   ---------------------------------------------------------------------
   El sistema nuevo, tal como viene del diseño (`PISTA.dc.html`). Es OTRO
   mundo visual, no un retoque del que ya existe: fondo hueso en vez de
   slate, Instrument Sans en vez de Plus Jakarta, y un lima ácido como
   acción. Convive con `body.kc` a propósito —las pantallas se migran de
   a una— y por eso todo cuelga de `body.pista`: mezclar los dos juegos
   de tokens en la misma clase deja media pantalla con el diseño viejo y
   media con el nuevo, que es peor que no haber empezado.
   ===================================================================== */

/* LOS TOKENS VAN EN `:root`, NO EN `body.pista`.
   Son valores, no un tema: las piezas del sistema —`.ps-carta`, `.ps-chapa`,
   `.ps-btn`— se usan también dentro de pantallas que todavía llevan otra
   clase de body, y ahí una variable que no existe deja la tarjeta sin fondo
   y la chapa sin color. Pasó con la ficha de club, que es `kc club`: las
   canchas salían como texto suelto sobre el hueso.
   `body.pista` se queda sólo con lo que SÍ es del tema: fondo y tipografía. */
:root {
  /* Superficies */
  --ps-suelo:   #EDEEEA;   /* hueso: el fondo de todo */
  --ps-papel:   #FFFFFF;   /* la tarjeta */
  --ps-hundido: #F2F3F1;   /* el hover y lo que se rebaja */
  --ps-linea:   #E4E6E2;   /* el pelo que separa */
  --ps-linea-2: #DDE0DB;

  /* Tinta */
  --ps-tinta:   #0D0F0E;   /* texto y también el primario oscuro */
  --ps-tinta-2: #4A504B;   /* cuerpo */
  --ps-tinta-3: #6B716C;   /* metadatos y rótulos */
  --ps-tinta-4: #A2A8A3;   /* deshabilitado, y texto sobre oscuro */

  /* Acentos */
  --ps-lima:    #C6F832;   /* LA acción. Nada más. */
  --ps-bosque:  #0F3D2E;   /* lo vivo, el enlace, el punto de la zona */
  --ps-verde-s: #E8F7E5;
  --ps-rojo:    #C43C3C;
  --ps-rojo-s:  #FDF2F2;

  --ps-r-chico: 14px;      /* botones y campos */
  --ps-r:       16px;      /* tarjetas chicas */
  --ps-r-gordo: 20px;      /* tarjetas grandes */
}

body.pista {
  background: var(--ps-suelo);
  color: var(--ps-tinta);
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Los enlaces heredan el color del texto… salvo los que son botones.
   `body.pista a` pesa más que `.ps-btn--solido` por especificidad, así que
   sin el `:not()` el botón negro salía con letra negra: invisible. Es el
   mismo choque que ya nos costó una vez con `[hidden]`.
   `.cl-cta` es el botón de la ficha del club, que vive en otra hoja y traía
   el mismo problema: crema sobre crema, y era el único botón de esa página.
   El hover también se excluye: en la ficha, un verde bosque sobre crema es
   otro color que no es de ese mundo.

   `.dp-dia` y `.dp-cta` son lo mismo en el panel de disponibilidad: el día
   elegido es negro con el número blanco y el botón es verde con la letra
   blanca. Sin excluirlos, los dos salían del color del panel —negro sobre
   negro y verde sobre verde—, que es el mismo choque de siempre: este
   selector pesa (0,3,1) y le gana a cualquier clase sola. */
/* LA LISTA DE EXCEPCIONES VA DENTRO DE `:where()`, QUE NO SUMA PESO. Cada
   `:not(.algo)` suelto valía una clase, así que la regla ENGORDABA con cada
   excepción nueva: al llegar a ocho pesaba (0,9,1) y se comió a
   `body.pista .clcab a.clcab__marca` (0,3,2) —la cabecera y el pie del club
   quedaron con el texto negro sobre negro, o sea invisibles, y la página se
   veía descuadrada porque arriba parecía no haber nada—. Con `:where()` la
   regla vale (0,1,2) pase lo que pase, y agregar una excepción no vuelve a
   apagarle la luz a nadie. */
body.pista a:not(:where(.ps-btn, .cl-cta, .dp-dia, .dp-cta, .cn-vuelta, .cn-ficha, .cn-banda, .cn-cta)) { color: inherit; text-decoration: none; }
body.pista a:not(:where(.ps-btn, .cl-cta, .dp-dia, .dp-cta, .cn-vuelta, .cn-ficha, .cn-banda, .cn-cta)):hover { color: var(--ps-bosque); }
body.pista a.ps-btn, body.pista a.cl-cta,
body.pista a.dp-dia, body.pista a.dp-cta,
body.pista a.cn-vuelta, body.pista a.cn-ficha,
body.pista a.cn-banda, body.pista a.cn-cta { text-decoration: none; }

/* ── Las excepciones de la ficha del americano ───────────────────────
   Van ACÁ ABAJO y no con el resto de su bloque a propósito. La regla de
   arriba pesa (0,3,2) —`body`, `.pista`, `a`, y los dos `:not()`, que suman
   como clases— y `body.pista .am-torneo a.am-hero__b` pesa exactamente lo
   mismo: empatan, y en un empate gana la que va después en el archivo. La
   primera versión de esto estaba doscientas líneas más arriba y perdía: el
   botón de la portada quedaba blanco sobre verde claro, invisible. Un botón
   invisible no da error, se ve igual que un botón que no existe.

   `:not()` no aporta especificidad por sí mismo, pero su argumento sí: es
   justamente lo que hace que una regla que parece «genérica» pese como tres
   clases y le gane a cualquier clase suelta. */
body.pista .am-torneo a.am-hero__b { color: #183D30; }
body.pista .am-torneo a.am-bloque__ir,
body.pista .am-torneo a.am-estado__ir,
body.pista .am-torneo a.am-vertodo:hover,
body.pista .am-torneo .am-miga a:hover { color: var(--am-verde); }
body.pista .am-torneo .am-hero__s a:hover { color: #fff; }

/* ── Tipografía ──────────────────────────────────────────────────────
   Instrument Sans para hablar y Geist Mono para todo dato: hora, precio,
   marcador, contador. El interletrado negativo crece con el tamaño —a 58
   píxeles un titular sin apretar se ve suelto—. */
.ps-display { font-size: clamp(30px, 7.4cqw, 58px); font-weight: 600;
              letter-spacing: -.045em; line-height: 1.02; margin: 0;
              text-wrap: balance; }
.ps-h2 { font-size: clamp(22px, 4cqw, 34px); font-weight: 600;
         letter-spacing: -.035em; line-height: 1.08; margin: 0; text-wrap: balance; }
.ps-h3 { font-size: 24px; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.ps-texto { font-size: 15px; line-height: 1.55; color: var(--ps-tinta-2); margin: 0; }
.ps-lead { font-size: clamp(14px, 1.6cqw, 17px); line-height: 1.5;
           color: var(--ps-tinta-3); margin: 0; }
/* El rótulo en versalitas: es el que ordena la página sin gritar. */
.ps-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
            letter-spacing: .16em; text-transform: uppercase; color: var(--ps-tinta-3); }
.ps-dato { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 600;
           letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ps-mono { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ── La marca ────────────────────────────────────────────────────── */
.ps-marca { display: inline-flex; align-items: baseline; gap: 6px; }
.ps-marca b { font-size: 17px; font-weight: 700; letter-spacing: -.04em; }
.ps-marca i { font-style: normal; font-size: 9px; font-weight: 600;
              letter-spacing: .22em; color: var(--ps-lima); }
.ps-marca--claro i { color: var(--ps-tinta-3); }

/* ── Botones ─────────────────────────────────────────────────────── */
.ps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--ps-r-chico); padding: 14px 24px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .18s, background .18s, border-color .18s;
}
.ps-btn:hover { transform: translateY(-2px); }
.ps-btn--lima  { background: var(--ps-lima);  color: var(--ps-tinta); }
.ps-btn--lima:hover { color: var(--ps-tinta); }
.ps-btn--solido{ background: var(--ps-tinta); color: #fff; }
.ps-btn--solido:hover { color: #fff; }
.ps-btn--sec   { background: var(--ps-papel); color: var(--ps-tinta);
                 border: 1px solid var(--ps-linea); }
.ps-btn--sec:hover { background: var(--ps-hundido); transform: none; }
.ps-btn[disabled], .ps-btn--off {
  background: var(--ps-suelo); color: var(--ps-tinta-4);
  pointer-events: none; transform: none;
}
.ps-btn--bloque { width: 100%; padding: 16px; font-size: 15.5px; border-radius: var(--ps-r); }

/* ── Campos ──────────────────────────────────────────────────────── */
.ps-campo {
  width: 100%; border: 1px solid var(--ps-linea); background: var(--ps-papel);
  border-radius: var(--ps-r-chico); padding: 14px 16px;
  font-family: inherit; font-size: 15px; color: var(--ps-tinta);
  outline: none; transition: border-color .18s;
}
.ps-campo::placeholder { color: var(--ps-tinta-4); }
.ps-campo:focus { border-color: var(--ps-tinta); }
.ps-campo--mal { border: 1.5px solid var(--ps-rojo); color: var(--ps-rojo); }
/* Sobre fondo oscuro el campo se invierte: un campo blanco sobre negro es
   un parche de luz que se lleva toda la atención. */
.ps-campo--oscuro {
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #fff;
}
.ps-campo--oscuro::placeholder { color: var(--ps-tinta-4); }
.ps-campo--oscuro:focus { border-color: var(--ps-lima); }

/* ── Tarjetas y marcas ───────────────────────────────────────────── */
.ps-carta { background: var(--ps-papel); border: 1px solid var(--ps-linea);
            border-radius: var(--ps-r-gordo); }
.ps-chapa { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
            text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
            white-space: nowrap; display: inline-block; }
.ps-chapa--lima  { background: var(--ps-lima);   color: var(--ps-tinta); }
.ps-chapa--verde { background: var(--ps-verde-s); color: var(--ps-bosque); }
.ps-chapa--rojo  { background: var(--ps-rojo-s);  color: var(--ps-rojo); }
.ps-chapa--gris  { background: var(--ps-hundido); color: var(--ps-tinta-3); }

/* ── La barra de zona ────────────────────────────────────────────
   Va pegada arriba en toda pantalla pública. No es decoración: es lo que
   deja salir de la zona con un clic. Un filtro que no se puede quitar
   desde donde se nota se siente como un sitio roto. */
.ps-zona {
  display: flex; align-items: center; gap: 9px;
  background: var(--ps-papel); border-bottom: 1px solid var(--ps-linea);
  padding: 9px 20px 11px; cursor: pointer; color: inherit;
}
.ps-zona:hover { color: inherit; }
.ps-zona__punto { width: 6px; height: 6px; border-radius: 999px;
                  background: var(--ps-bosque); flex: 0 0 auto; }
.ps-zona__t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600;
              letter-spacing: -.015em; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
.ps-zona__a { font-size: 12.5px; font-weight: 600; color: var(--ps-bosque);
              white-space: nowrap; flex: 0 0 auto; }

/* ── El envase ───────────────────────────────────────────────────── */
.ps-env { max-width: 760px; margin: 0 auto; }
.ps-ancho { max-width: 1180px; margin: 0 auto; }

/* ── La puerta de ubicación ──────────────────────────────────────────
   La única pantalla oscura del sitio. Es una puerta, no una sección: el
   negro completo dice «acá se decide una cosa y se sigue», y hace que
   todo lo demás se sienta claro al entrar. */
body.pista .ps-puerta {
  min-height: 100vh; background: var(--ps-tinta); color: #fff;
  padding: clamp(26px, 5cqw, 64px) clamp(20px, 5cqw, 64px) clamp(40px, 5cqw, 72px);
  container-type: inline-size;
}
.ps-puerta .ps-lead { color: var(--ps-tinta-4); }
.ps-puerta .ps-label { color: var(--ps-tinta-3); }

/* Las comunas donde más se juega: atajos, para no obligar a bajar por la
   lista de quince regiones cuando el 80% va a elegir una de seis. */
.ps-zonas { display: grid; gap: 9px; margin-top: 12px;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ps-zonita {
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04);
  border-radius: var(--ps-r); padding: 15px; display: flex; flex-direction: column;
  gap: 4px; transition: transform .2s, border-color .2s, background .2s;
}
.ps-zonita:hover { transform: translateY(-2px); border-color: var(--ps-lima);
                   background: rgba(198,248,50,.07); color: inherit; }
.ps-zonita__n { font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.ps-zonita__c { font-size: 12px; color: var(--ps-tinta-3); }

/* La lista de regiones. La fila entera es el enlace y se corre a la
   derecha al pasar por encima: en el teléfono el blanco útil es toda la
   fila, no las letras. */
.ps-fila {
  display: flex; align-items: center; gap: 12px; padding: 15px 4px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: padding-left .18s;
}
.ps-fila:hover { padding-left: 10px; color: inherit; }
.ps-fila__n { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: #fff;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-fila__n i { font-style: normal; font-size: 12.5px; color: var(--ps-tinta-3);
                margin-left: 8px; font-weight: 400; }
.ps-fila__c { font-size: 13px; color: var(--ps-tinta-3); flex: 0 0 auto; }
.ps-fila__f { font-size: 14px; color: var(--ps-tinta-3); flex: 0 0 auto; }

.ps-saltar { display: inline-block; margin-top: 28px; font-size: 14px;
             font-weight: 600; color: var(--ps-lima); }
.ps-saltar:hover { color: var(--ps-lima); text-decoration: underline; }

/* ── La cabecera y el pie del diseño nuevo ───────────────────────────
   En el teléfono manda la barra de abajo —donde llega el pulgar— y arriba
   queda sólo la franja de zona. Cuatro secciones, dos botones y la zona no
   caben en 390 píxeles sin partirse en tres líneas. */
/* Vale para las dos familias públicas: `pista` (la casa) y `kc` (directorio,
   súmate, las portadas de clubes. y entrenadores.). Con la regla sólo para
   `pista`, las `kc` mostraban la barra completa en el teléfono y la página
   quedaba de 836 px, con barra horizontal. */
body.pista .ps-top, body.kc .ps-top { display: none; }
@media (min-width: 900px) {
  body.pista .ps-top, body.kc .ps-top {
    display: block; position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.86); backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--ps-linea);
  }
  body.pista .ps-zona, body.kc .ps-zona { display: none; }
}
/* LOS ESPACIOS SE ENCOGEN CON LA PANTALLA. Con 32 px de costado, 22 de
   separación y 26 entre secciones, la barra necesitaba 944 px para dibujarse
   entera... y se encendía a los 900. Entre 900 y 949 el último botón se salía
   por la derecha, la página quedaba con barra horizontal y se leía corrida.
   Con `clamp` la barra pide 858 px a los 900, así que entra con holgura desde
   el primer píxel en que se muestra. */
.ps-top__in { max-width: 1180px; margin: 0 auto; height: 64px;
              padding: 0 clamp(16px, 2.2vw, 32px);
              display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.ps-top__nav { display: flex; gap: clamp(14px, 2vw, 26px); font-size: 14px; font-weight: 500;
               white-space: nowrap; }
.ps-top__nav a { color: var(--ps-tinta-2); padding-bottom: 2px;
                 border-bottom: 2px solid transparent; transition: color .18s; }
.ps-top__nav a:hover { color: var(--ps-tinta); }
.ps-top__nav a[aria-current] { color: var(--ps-tinta); font-weight: 600;
                               border-bottom-color: var(--ps-tinta); }
.ps-top__sep { flex: 1; }
.ps-top__zona { display: flex; align-items: center; gap: 8px; background: var(--ps-hundido);
                border: 1px solid var(--ps-linea); border-radius: 999px; padding: 7px 14px;
                font-size: 12.5px; font-weight: 600; white-space: nowrap;
                transition: border-color .18s; }
.ps-top__zona:hover { border-color: var(--ps-tinta); color: inherit; }
.ps-top__zona i { font-style: normal; font-weight: 400; color: var(--ps-tinta-3); }
.ps-btn--sm { padding: 9px 16px; font-size: 13px; border-radius: 999px; }
.ps-btn--pill { border-radius: 999px; padding: 15px 26px; font-size: 15px; }
.ps-btn--fantasma { border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; }
.ps-btn--fantasma:hover { background: rgba(255,255,255,.08); color: #fff; }

.ps-pie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex;
  background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--ps-linea);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 900px) { body.pista .ps-pie, body.kc .ps-pie { display: none; } }
.ps-pie a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
            padding: 9px 4px 7px; color: var(--ps-tinta-3); font-size: 10.5px; font-weight: 600; }
.ps-pie a[aria-current] { color: var(--ps-tinta); }
.ps-pie svg { width: 21px; height: 21px; }
body.pista { padding-bottom: 76px; }
@media (min-width: 900px) { body.pista { padding-bottom: 0; } }

.ps-fondo { border-top: 1px solid var(--ps-linea); padding: 28px 0 34px; margin-top: 40px; }
.ps-fondo .ps-ancho { padding: 0 clamp(20px,5cqw,64px); display: flex; gap: 14px;
                      align-items: baseline; flex-wrap: wrap; }
.ps-fondo__t { font-size: 13px; color: var(--ps-tinta-3); }

/* ── La portada ──────────────────────────────────────────────────────
   Abre oscura y sigue en hueso. El corte separa la promesa de lo que hay
   de verdad hoy. */
body.pista .ps-hero {
  background: var(--ps-tinta); color: #fff; container-type: inline-size;
  padding: clamp(28px,7cqw,80px) clamp(20px,5cqw,64px) clamp(30px,6cqw,64px);
}
.ps-hero__eti { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
                letter-spacing: .18em; text-transform: uppercase; color: var(--ps-lima); }
.ps-hero__t { margin: 18px 0 0; font-size: clamp(34px, 9.4cqw, 74px); line-height: .96;
              letter-spacing: -.045em; font-weight: 600; text-wrap: balance; max-width: 14em; }
.ps-hero__b { margin: 18px 0 0; font-size: clamp(15px, 1.6cqw, 19px); line-height: 1.5;
              color: var(--ps-tinta-4); max-width: 34em; }
.ps-hero__acc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.ps-hero__acc .ps-btn--lima:hover { box-shadow: 0 10px 30px rgba(198,248,50,.3); }

/* El partido de ahora. Es lo único de la portada que cambia solo. */
.ps-vivo { margin-top: clamp(28px,5cqw,52px); border: 1px solid rgba(255,255,255,.14);
           border-radius: var(--ps-r-gordo); padding: 16px 18px; display: flex;
           align-items: center; gap: 14px; transition: border-color .2s; color: #fff; }
.ps-vivo:hover { border-color: rgba(198,248,50,.5); color: #fff; }
.ps-vivo__p { width: 8px; height: 8px; border-radius: 999px; background: var(--ps-lima);
              flex: 0 0 auto; animation: ps-late 1.6s infinite; }
@keyframes ps-late { 0%,100% { opacity: 1; transform: scale(1); }
                     50% { opacity: .35; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .ps-vivo__p { animation: none; } }
.ps-vivo__i { flex: 1; min-width: 0; }
.ps-vivo__e { display: block; font-size: 10px; font-family: 'Geist Mono', monospace;
              letter-spacing: .16em; text-transform: uppercase; color: var(--ps-lima); }
.ps-vivo__n { display: block; font-size: 15px; font-weight: 600; margin-top: 3px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-vivo__m { font-size: 19px; flex: 0 0 auto; }

/* El contenedor de una página. `--ps-hueco` deja que una pantalla apriete
   sus secciones sin pelearle a la regla: el catálogo son título, filtros y
   parrilla, y 52 píxeles entre medio los deja flotando. */
.ps-cuerpo { --ps-hueco: clamp(28px,5cqw,52px);
             padding: clamp(24px,5cqw,56px) clamp(20px,5cqw,64px);
             display: flex; flex-direction: column; gap: var(--ps-hueco);
             container-type: inline-size; }
.ps-cuerpo--junto { --ps-hueco: 20px; }
.ps-sec__cab { display: flex; align-items: baseline; justify-content: space-between;
               gap: 12px; margin-bottom: 14px; }
.ps-vermas { font-size: 13px; font-weight: 600; color: var(--ps-bosque); white-space: nowrap; }

.ps-rej { display: grid; gap: 12px; }
/* `auto-fill` y no `auto-fit`: con una sola tarjeta, `auto-fit` colapsa las
   pistas vacías y la estira a los 1180 píxeles enteros. Hoy hay UN club en
   PISTA, así que ése es el caso normal y no el raro. */
.ps-rej--250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ps-rej--220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ps-rej--210 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ps-rej--200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ps-rej--prod { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .ps-rej--prod { grid-template-columns: repeat(4, 1fr); } }

/* Las tarjetas se levantan al pasar por encima. Un solo gesto para todas:
   con tres animaciones distintas la página se siente inquieta. */
.ps-am, .ps-club, .ps-profe {
  display: block; transition: transform .2s, box-shadow .2s;
}
.ps-am:hover, .ps-club:hover, .ps-profe:hover {
  transform: translateY(-3px); box-shadow: 0 14px 34px rgba(13,15,14,.07); color: inherit;
}

.ps-am { padding: 18px; }
.ps-am__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ps-am__p { font-size: 13px; }
.ps-am__n { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin-top: 12px; }
.ps-am__d { font-size: 13px; color: var(--ps-tinta-3); margin-top: 4px; }
.ps-am__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ps-tag { font-size: 11.5px; font-weight: 600; color: var(--ps-tinta-2);
          background: var(--ps-hundido); padding: 4px 9px; border-radius: 8px; }
.ps-barra { margin-top: 14px; height: 4px; background: var(--ps-suelo);
            border-radius: 999px; overflow: hidden; }
.ps-barra i { display: block; height: 100%; background: var(--ps-lima);
              border-radius: 999px; transition: width .5s; }
.ps-am__c { font-size: 12px; color: var(--ps-tinta-3); margin-top: 7px; }

.ps-club { overflow: hidden; }
.ps-club__f { display: block; height: 118px; background: #E7E9E4; position: relative; }
.ps-club__f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-club__ini { position: absolute; inset: 0; display: grid; place-items: center;
                font-size: 34px; font-weight: 700; color: #C2C7C2; }
.ps-club__c { display: block; padding: 14px 16px 16px; }
.ps-club__n { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ps-club__d { display: block; font-size: 12.5px; color: var(--ps-tinta-3); margin-top: 3px; }

.ps-profe { padding: 16px; display: flex; gap: 12px; align-items: center; }
.ps-profe__ini { width: 46px; height: 46px; border-radius: 999px; background: var(--ps-bosque);
                 color: var(--ps-lima); display: grid; place-items: center;
                 font-size: 14px; font-weight: 700; flex: 0 0 auto; }
.ps-profe__c { min-width: 0; }
.ps-profe__n { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.ps-profe__d { display: block; font-size: 12.5px; color: var(--ps-tinta-3); margin-top: 2px; }

.ps-prod { display: flex; flex-direction: column; gap: 3px; }
.ps-prod__f { display: block; aspect-ratio: 1; border-radius: var(--ps-r);
              overflow: hidden; background: var(--ps-papel);
              border: 1px solid var(--ps-linea); margin-bottom: 5px; }
.ps-prod__f img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ps-prod__m { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; color: var(--ps-tinta-3); }
.ps-prod__n { font-size: 13px; line-height: 1.35; font-weight: 600;
              display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
              overflow: hidden; }
.ps-prod__p { font-size: 14px; }

.ps-vacio { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.ps-vacio b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.ps-vacio span { font-size: 13.5px; color: var(--ps-tinta-3); line-height: 1.5; }
.ps-vacio__acc { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }

.ps-puertas { padding: clamp(20px,3cqw,34px); border-radius: 24px; }
.ps-puerta1 { border: 1px solid var(--ps-linea); border-radius: var(--ps-r);
              padding: 16px; display: flex; flex-direction: column; gap: 6px;
              transition: border-color .2s, background .2s; }
.ps-puerta1:hover { border-color: var(--ps-tinta); background: #FAFBF9; color: inherit; }
.ps-puerta1 b { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.ps-puerta1 span { font-size: 13px; color: var(--ps-tinta-3); line-height: 1.45; }
.ps-puerta1 i { font-style: normal; font-size: 13px; font-weight: 600;
                color: var(--ps-bosque); margin-top: auto; padding-top: 6px; }

/* ── La cabecera del americano, en el diseño nuevo ────────────────────
   Oscura y a sangre, como la puerta y la portada. Se sale del ancho de la
   columna con márgenes negativos: el `main.am` es angosto a propósito —una
   tabla de doce parejas a 1400px es una planilla— pero la cabecera sí se
   estira, y ese contraste es lo que la hace leer como portada del torneo. */
body.am.pista .am-cab {
  background: var(--ps-tinta); color: #fff; border-radius: 0;
  margin: 0 calc(-1 * var(--am-aire)) 18px;
  padding: clamp(22px,4cqw,44px) var(--am-aire) clamp(20px,3cqw,32px);
  container-type: inline-size;
}
body.am.pista .am-cab__fila { display: flex; align-items: center; gap: 10px;
                              flex-wrap: wrap; margin-bottom: 16px; }
body.am.pista .am-club { font-size: 12.5px; color: var(--ps-tinta-4); font-weight: 500; }
body.am.pista a.am-club:hover { color: var(--ps-lima); }
body.am.pista .am-titulo {
  font-size: clamp(28px, 6cqw, 50px); letter-spacing: -.045em; font-weight: 600;
  line-height: 1.02; margin: 0; color: #fff; text-wrap: balance;
}
body.am.pista .am-datos { font-size: 14px; color: var(--ps-tinta-4); margin: 8px 0 0; }

/* Los datos duros, en fila. Es la parte que se mira dos veces: antes de
   anotarse y otra vez camino al club. */
.am-meta { display: flex; gap: clamp(18px,3cqw,44px); flex-wrap: wrap; margin-top: 24px; }
.am-meta__k { display: block; font-family: 'Geist Mono', ui-monospace, monospace;
              font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
              color: var(--ps-tinta-3); }
.am-meta__v { display: block; font-size: clamp(15px,1.8cqw,19px); font-weight: 600;
              margin-top: 5px; color: #fff; }

body.am.pista .am-podio { margin-top: 26px; }
body.am.pista .am-podio__f { background: rgba(255,255,255,.06);
                             border: 1px solid rgba(255,255,255,.12); color: #fff; }
body.am.pista .am-podio__rot { color: var(--ps-lima); }
/* El nombre trae color propio —tinta casi negra, del diseño claro— y le gana
   al blanco que la fila pone para el fondo oscuro: los campeones salían en
   negro sobre negro, que es justo lo que la gente entra a mirar. */
body.am.pista .am-podio__nom { color: #fff; }

/* ── La barra fija de inscripción ────────────────────────────────────
   El precio y el botón, pegados abajo. La página es larga —ficha, cupos,
   fixture, tabla— y el que decidió anotarse a mitad de camino no tiene por
   qué volver a subir a buscar el formulario. */
.am-fija {
  position: sticky; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.9); backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--ps-linea);
  margin: 22px calc(-1 * var(--am-aire)) 0;
  padding: 14px var(--am-aire);
  display: flex; align-items: center; gap: 14px;
}
@media (min-width: 900px) { body.pista .am-fija { bottom: 0; } }
.am-fija__i { flex: 1; min-width: 0; }
.am-fija__p { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 19px;
              font-weight: 600; letter-spacing: -.03em; }
.am-fija__t { font-size: 11.5px; color: var(--ps-tinta-3); }

/* ── La tira de filtros y la parrilla del catálogo ───────────────────── */
.ps-tira { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.ps-tira::-webkit-scrollbar { height: 0; }
.ps-pildora {
  border: 1px solid var(--ps-linea); background: var(--ps-papel); color: var(--ps-tinta);
  font-size: 13px; font-weight: 600; padding: 9px 15px; border-radius: 999px;
  white-space: nowrap; transition: all .18s; flex: 0 0 auto;
}
.ps-pildora:hover { border-color: var(--ps-tinta); color: var(--ps-tinta); }
.ps-pildora.on { background: var(--ps-tinta); border-color: var(--ps-tinta); color: #fff; }
.ps-pildora i { font-style: normal; font-family: 'Geist Mono', ui-monospace, monospace;
                font-size: 11px; opacity: .55; margin-left: 3px; }

.ps-rej--160 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ps-item { overflow: hidden; display: block; transition: transform .2s, box-shadow .2s; }
.ps-item:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(13,15,14,.08); color: inherit; }
.ps-item__f { display: block; aspect-ratio: 1; background: var(--ps-hundido); }
.ps-item__f img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ps-item__c { display: block; padding: 14px 15px 16px; }
.ps-item__m { display: block; font-size: 10px; font-family: 'Geist Mono', ui-monospace, monospace;
              letter-spacing: .14em; text-transform: uppercase; color: var(--ps-tinta-3); }
.ps-item__n { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em;
              margin-top: 6px; line-height: 1.3; }
.ps-item__p { display: block; font-size: 14px; margin-top: 8px; }

.ps-paginas { display: flex; align-items: center; justify-content: center; gap: 14px;
              flex-wrap: wrap; }
.ps-paginas__n { font-size: 13px; color: var(--ps-tinta-3); }

/* ── La portada de la ficha de club, en el diseño nuevo ──────────────
   Partida en dos: a la izquierda quién es y sus números, a la derecha la
   foto. Antes el nombre iba ENCIMA de la foto, y los números —que son lo
   que decide si vale la pena venir— no se leían sobre una imagen. */
body.club .club-hero {
  display: grid; grid-template-columns: 1fr; background: var(--ps-tinta);
  align-items: stretch; container-type: inline-size; border-radius: 0;
  min-height: 0; padding: 0; overflow: hidden;
}
@media (min-width: 820px) {
  body.club .club-hero { grid-template-columns: 1.05fr 1fr; }
  body.club .club-hero--sinfoto { grid-template-columns: 1fr; }
}
.club-hero__col { padding: clamp(20px,3.4cqw,44px); display: flex;
                  flex-direction: column; min-width: 0; color: #fff; }
/* En fila y no en columna: ahora lleva el logo a la izquierda, y la etiqueta
   con la comuna apiladas a su lado. */
.club-hero__top { display: flex; align-items: center; gap: 12px;
                  margin-bottom: clamp(20px,4cqw,52px); }
.club-hero__eti { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px;
                  letter-spacing: .2em; text-transform: uppercase; color: var(--ps-lima); }
.club-hero__loc { font-size: 12.5px; color: #D3D7D2; }
body.club .club-hero__n {
  margin: 0; color: #fff; font-size: clamp(32px, 7.4cqw, 62px);
  line-height: .9; letter-spacing: -.05em; font-weight: 600; text-wrap: balance;
}
.club-hero__cifras {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: clamp(12px,1.6cqw,20px); margin-top: clamp(20px,2.8cqw,34px);
  border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(16px,2.2cqw,24px);
}
.club-hero__v { display: block; font-size: clamp(19px,2.2cqw,28px); font-weight: 600;
                letter-spacing: -.035em; color: #fff; }
.club-hero__k { display: block; font-size: 10.5px; font-family: 'Geist Mono', monospace;
                letter-spacing: .14em; color: #9AA09B; text-transform: uppercase; margin-top: 4px; }
body.club .club-hero__marcas { position: static; display: flex; gap: 8px;
                               flex-wrap: wrap; margin-top: 18px; }
body.club .club-estado { background: rgba(255,255,255,.08); color: #fff;
                         border: 1px solid rgba(255,255,255,.16); }
body.club .club-estado--punta { color: var(--ps-lima); border-color: rgba(198,248,50,.3); }
.club-hero__foto { position: relative; background: #1A1C1B; min-height: 220px; overflow: hidden; }
.club-hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
                       object-fit: cover; display: block; }

/* ── El claim del club ───────────────────────────────────────────────
   Pegado a la portada y sobre el mismo negro: es la continuación de la
   presentación, no una sección más. */
body.club .club-claim {
  background: var(--ps-tinta); color: #fff;
  padding: clamp(26px,4.4cqw,56px) clamp(20px,4cqw,56px);
  display: grid; gap: clamp(18px,3cqw,44px); align-items: start;
  grid-template-columns: 1fr; container-type: inline-size;
}
@media (min-width: 820px) { body.club .club-claim { grid-template-columns: 1fr 1fr; } }
.club-claim__f { margin: 0; font-size: clamp(20px,2.8cqw,32px); line-height: 1.25;
                 letter-spacing: -.03em; font-weight: 500; text-wrap: pretty; }
.club-claim__d { display: flex; flex-direction: column; gap: 18px; }
.club-claim__p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ps-tinta-4); }
.club-claim__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.club-tag { font-size: 12px; font-weight: 600; color: #fff;
            border: 1px solid rgba(255,255,255,.18); padding: 7px 12px;
            border-radius: 999px; white-space: nowrap; }

/* ── Lo que ya pasó ──────────────────────────────────────────────────
   El campeón con su medalla. Es la sección que convierte una guía en un
   club con historia. */
.club-paso { display: block; padding: 0; overflow: hidden;
             transition: transform .2s, box-shadow .2s; }
.club-paso:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13,15,14,.08); color: inherit; }
.club-paso__top { display: block; background: var(--ps-tinta); color: #fff; padding: 16px 18px; }
.club-paso__k { display: block; font-family: 'Geist Mono', ui-monospace, monospace;
                font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
                color: var(--ps-lima); }
.club-paso__n { display: block; font-size: 16.5px; font-weight: 600;
                letter-spacing: -.025em; margin-top: 5px; }
.club-paso__c { display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.club-paso__med { width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto;
                  background: var(--ps-tinta); color: var(--ps-lima);
                  display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.club-paso__gan { min-width: 0; flex: 1; }
.club-paso__r { display: block; font-size: 10px; font-family: 'Geist Mono', monospace;
                letter-spacing: .14em; color: var(--ps-tinta-3); text-transform: uppercase; }
.club-paso__w { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.015em;
                margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.club-paso__j { font-size: 13px; flex: 0 0 auto; color: var(--ps-tinta-2); }

/* ── Las canchas del club ────────────────────────────────────────────
   Una tarjeta por cancha con lo que se pregunta antes de reservar: cómo es
   y cuánto sale el turno. */
.ps-rej--240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.club-cancha { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; }
.club-cancha__cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.club-cancha__n { font-size: 16.5px; font-weight: 600; letter-spacing: -.025em; }
.club-cancha__m { display: flex; gap: 5px; flex: 0 0 auto; }
.club-cancha__p { display: flex; align-items: baseline; gap: 6px; }
.club-cancha__p .ps-dato { font-size: 15px; }
.club-cancha__p i { font-style: normal; font-size: 12.5px; color: var(--ps-tinta-3); }
.club-cancha__s { font-size: 12.5px; color: var(--ps-tinta-3); }

/* ── La semana ───────────────────────────────────────────────────────
   Cuántos turnos libres tiene cada día. Los cerrados se dibujan igual y
   apagados: un club que esconde el día que no abre hace que alguien lo
   busque tres veces. */
.club-sem { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 4px; }
.club-sem::-webkit-scrollbar { height: 0; }
.club-dia {
  flex: 0 0 auto; min-width: 74px; text-align: center; border-radius: var(--ps-r-chico);
  border: 1px solid var(--ps-linea); background: var(--ps-papel);
  padding: 9px 13px; transition: transform .18s, border-color .18s;
}
a.club-dia:hover { transform: translateY(-2px); border-color: var(--ps-tinta); color: inherit; }
.club-dia--off { opacity: .5; }
.club-dia__d { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em;
               text-transform: uppercase; color: var(--ps-tinta-3); }
.club-dia__n { display: block; font-size: 15px; margin-top: 3px; }
.club-dia__l { display: block; font-size: 10.5px; font-weight: 600; margin-top: 3px;
               color: var(--ps-bosque); }
.club-dia--off .club-dia__l { color: var(--ps-tinta-3); }
.club-horas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* La portada y el claim van A SANGRE, fuera de la columna de 880px.
   `main.club` es angosto a propósito —una ficha se lee en una columna— pero
   la presentación del club es la portada de su página y encerrarla en el
   mismo ancho la deja pareciendo una tarjeta más. Se sale con márgenes
   negativos calculados desde el viewport: el `main` está centrado, así que
   la mitad de lo que sobra a cada lado es exactamente lo que hay que
   recuperar. */
body.club .club-hero,
body.club .club-claim {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ── El tablero de fotos del club ────────────────────────────────────
   No es una lista de archivos: son los huecos del layout en su sitio. El
   club ve dónde va cada foto y cuáles le faltan. */
.fotos-rej { display: grid; gap: 14px;
             grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fotos-rej--una { grid-template-columns: 1fr; }

.hueco { display: flex; flex-direction: column; gap: 8px; }

/* El hueco solo —la portada— va con la foto a la izquierda y su rótulo y sus
   botones al lado. Antes iba en columna como los del mosaico, y con la foto a
   420×315 el botón de Quitar caía en el píxel 998 de una pantalla de 900:
   había que bajar para encontrarlo, y el club creía que no se podía sacar.
   Al lado se ve siempre, sin scroll. */
@media (min-width: 640px) {
  .hueco--ancho { flex-direction: row; align-items: flex-start; gap: 16px; }
  .hueco--ancho .hueco__caja { width: 300px; flex: 0 0 auto; }
  .hueco--ancho .hueco__lado { display: flex; flex-direction: column; gap: 8px;
                               flex: 1; min-width: 0; }
}
.hueco__caja {
  position: relative; display: block; aspect-ratio: 4 / 3; cursor: pointer;
  border-radius: 14px; overflow: hidden; background: var(--surface-sunken);
  border: 1px dashed var(--border-strong); transition: border-color .18s;
}
.hueco__caja:hover { border-color: var(--accent); }
.hueco:has(.hueco__img) .hueco__caja { border-style: solid; }
.hueco__img { position: absolute; inset: 0; width: 100%; height: 100%;
              object-fit: cover; display: block; }
/* El hueco vacío lleva su rótulo debajo, así que acá basta la invitación.
   Un recuadro gris sin nada no se llena nunca. */
.hueco__vacio { position: absolute; inset: 0; display: flex; flex-direction: column;
                align-items: center; justify-content: center; gap: 6px;
                color: var(--text-tertiary); }
.hueco__mas { font-size: 13px; font-weight: 600; }
.hueco__pie { display: flex; flex-direction: column; gap: 1px; }
.hueco__pie b { font-size: 14px; font-weight: 600; }
.hueco__pie span { font-size: 12.5px; color: var(--text-tertiary); line-height: 1.4; }
.hueco__aviso { min-height: 1.2em; color: var(--text-tertiary); }
.hueco__acc { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── El mosaico del club ─────────────────────────────────────────────
   Cinco huecos: el primero manda y los otros cuatro lo acompañan. En el
   teléfono se apilan de a dos, porque cinco fotos en columna son cinco
   pantallas de scroll antes de llegar a las canchas. */
/* Las medidas son las del diseño. La primera manda —el doble de ancho y las
   dos filas de alto— y las otras cuatro la acompañan; en el teléfono la
   primera se lleva el ancho entero y las demás van de a dos. */
.club-mosaico {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 170px 110px 110px;
  grid-template-areas: 'a a' 'b c' 'd e';
}
@media (min-width: 720px) {
  .club-mosaico {
    gap: 10px;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 170px 130px;
    grid-template-areas: 'a b c' 'a d e';
  }
}
.club-mos { position: relative; border-radius: 18px; overflow: hidden;
            background: #E7E9E4; aspect-ratio: 4 / 3; }
@media (min-width: 720px) { .club-mos { aspect-ratio: auto; } }
.club-mos--a { grid-area: a; } .club-mos--b { grid-area: b; }
.club-mos--c { grid-area: c; } .club-mos--d { grid-area: d; }
.club-mos--e { grid-area: e; }
.club-mos img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; display: block; }

/* El hueco vacío DICE qué va ahí. Un rectángulo gris sin nada se lee como
   una página rota; con su rótulo se lee como una ficha a medio llenar, que
   es la verdad y además es lo que empuja al club a completarla. */
.club-mos__vacio {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 10px;
  color: var(--ps-tinta-3); background: var(--ps-hundido);
  border: 1px dashed var(--ps-linea-2); border-radius: inherit; text-align: center;
}
.club-mos__vacio i { font-style: normal; font-size: 11.5px; font-weight: 600; line-height: 1.3; }

/* La tarjeta de la cancha ya no lleva foto: con seis canchas eran seis fotos
   más que pedir, y la sexta foto de una cancha de pádel es igual a la
   primera. Queda el nombre, cómo es y cuánto sale, que es lo que se mira. */
.club-cancha { padding: 14px 16px; }

/* El texto que el club escribe debajo de la foto. Sobre la imagen y con un
   degradado detrás: al costado obligaría a dejarle sitio a un texto que la
   mayoría de las fotos no lleva. */
/* El hueco de la portada, que sólo ve el club. */
.club-hero__foto--hueco { display: block; background: #141615; }
.club-hero__foto--hueco .club-mos__vacio { color: rgba(255,255,255,.55);
                                           border-color: rgba(255,255,255,.2); }
.club-hero__foto--hueco:hover .club-mos__vacio { color: var(--ps-lima);
                                                 border-color: rgba(198,248,50,.4); }

.club-mos__pie {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px;
  color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ── El marcador en vivo ─────────────────────────────────────────────
   Se lee desde tres metros, parado al lado de la cancha. Pantalla negra,
   sin cabecera y sin menú: acá no se navega, se mira un número. Más negra
   que el resto del sistema —#08090A— porque en un club de noche una
   pantalla encendida al máximo molesta a los que juegan. */
body.vivo { background: #08090A; color: #fff; padding-bottom: 0; }
/* `main.vivo` y no `.vivo`, por lo mismo que `main.am`: la pantalla del
   marcador lleva `vivo` también en el <body>, y con el selector suelto el
   cuerpo se llevaba el padding —el contenido partía al doble de distancia del
   borde— y, peor, el `container-type`, que hace que cualquier `@container`
   escrito para esta pantalla mida contra el cuerpo y no contra ella. */
main.vivo { min-height: 100vh; container-type: inline-size;
            padding: clamp(22px,4cqw,52px) clamp(18px,4cqw,56px) clamp(30px,4cqw,52px); }
.vivo__cab { display: flex; align-items: center; gap: 10px; }
.vivo__punto { width: 8px; height: 8px; border-radius: 999px; background: var(--ps-lima);
               flex: 0 0 auto; animation: ps-late 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .vivo__punto { animation: none; } }
.vivo__eti { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px;
             letter-spacing: .18em; text-transform: uppercase; color: var(--ps-lima);
             white-space: nowrap; }
.vivo__sep { flex: 1; }
.vivo__donde { font-size: 12.5px; color: var(--ps-tinta-3); }

.vivo__marcador { margin-top: clamp(26px,4cqw,44px); display: flex; flex-direction: column;
                  gap: clamp(14px,2cqw,22px); }
.vivo__lado { border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
              padding: clamp(16px,2.6cqw,26px); display: flex; align-items: center; gap: 16px; }
/* El que va ganando se marca. En un marcador de dos filas, saber cuál es
   cuál sin comparar los números es la mitad del trabajo. */
.vivo__lado--gana { border-color: rgba(198,248,50,.45); background: rgba(198,248,50,.05); }
.vivo__n { flex: 1; min-width: 0; font-size: clamp(19px,2.8cqw,30px); font-weight: 600;
           letter-spacing: -.035em; line-height: 1.15; }
.vivo__p { font-size: clamp(46px,8cqw,92px); line-height: 1; flex: 0 0 auto;
           min-width: 1.6em; text-align: right; }
.vivo__lado--gana .vivo__p { color: var(--ps-lima); }

.vivo__nota { margin: clamp(18px,3cqw,28px) 0 0; font-size: 12.5px;
              color: var(--ps-tinta-3); line-height: 1.5; max-width: 46ch; }

.vivo__nada { margin-top: clamp(40px,8cqw,90px); display: flex; flex-direction: column;
              gap: 10px; align-items: flex-start; }
.vivo__nada b { font-size: clamp(20px,3.4cqw,30px); font-weight: 600; letter-spacing: -.03em; }
.vivo__nada span { font-size: 14.5px; color: var(--ps-tinta-4); }
.vivo__nada .ps-btn { margin-top: 10px; }

.vivo__tabla { margin-top: clamp(26px,4cqw,44px); border-top: 1px solid rgba(255,255,255,.1);
               padding-top: 20px; }
.vivo__lab { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
             letter-spacing: .16em; text-transform: uppercase; color: var(--ps-tinta-3);
             margin-bottom: 8px; }
.vivo__fila { display: flex; align-items: center; gap: 12px; padding: 11px 0;
              border-bottom: 1px solid rgba(255,255,255,.07); }
.vivo__pos { width: 22px; font-size: 13px; color: var(--ps-tinta-3); }
.vivo__jn { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; }
.vivo__pts { font-size: 15px; }
.vivo__ir { display: inline-block; margin-top: 16px; font-size: 13px;
            font-weight: 600; color: var(--ps-lima); }

/* ── El ranking ──────────────────────────────────────────────────────── */
.ps-rej--150 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.rk-podio { border-radius: 22px; padding: 20px; display: flex; flex-direction: column;
            gap: 4px; border: 1px solid var(--ps-linea); background: var(--ps-papel);
            transition: transform .2s; }
.rk-podio:hover { transform: translateY(-4px); }
/* El primero en negro y lima: en una lista de nombres, el campeón tiene que
   distinguirse sin leer el número. */
.rk-podio--oro { background: var(--ps-tinta); border-color: var(--ps-tinta); color: #fff; }
.rk-podio--oro .rk-podio__n { color: var(--ps-lima); }
.rk-podio--oro .rk-podio__m { color: var(--ps-tinta-4); }
.rk-podio__n { font-size: clamp(30px,4cqw,42px); letter-spacing: -.05em; line-height: 1;
               color: var(--ps-tinta-3); }
.rk-podio__j { font-size: clamp(15px,1.8cqw,19px); font-weight: 600;
               letter-spacing: -.025em; margin-top: 14px; }
.rk-podio__m { font-size: 12.5px; color: var(--ps-tinta-3); }
.rk-podio__p { font-size: 15px; margin-top: 12px; }

.rk-tabla { overflow: hidden; padding: 0; }
.rk-cab, .rk-fila { display: flex; align-items: center; gap: 12px; padding: 13px 18px; }
.rk-cab { background: #FAFBF9; border-bottom: 1px solid var(--ps-linea);
          font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
          letter-spacing: .12em; text-transform: uppercase; color: var(--ps-tinta-3); }
.rk-fila { border-bottom: 1px solid var(--ps-hundido); }
.rk-fila:last-child { border-bottom: 0; }
.rk-fila:hover { background: #FAFBF9; }
.rk-pos { width: 26px; flex: 0 0 auto; font-size: 14px; color: var(--ps-tinta-3); }
.rk-ini { width: 34px; height: 34px; border-radius: 999px; flex: 0 0 auto;
          background: var(--ps-hundido); color: var(--ps-tinta-2);
          display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.rk-cab .rk-nom, .rk-nom { flex: 1; min-width: 0; }
.rk-nom b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -.015em;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-nom i { display: block; font-style: normal; font-size: 12px;
            color: var(--ps-tinta-3); margin-top: 2px; }
.rk-n { width: 46px; flex: 0 0 auto; text-align: right; font-size: 13.5px; }

/* ── El embudo de las clases ─────────────────────────────────────────
   Los cuatro pasos se dibujan siempre, también los que todavía no se pueden
   tocar: ver cuántos faltan es lo que hace que alguien empiece. Los que
   esperan van apagados, no escondidos. */
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.paso--espera { opacity: .55; }

.opcion { display: flex; gap: 12px; align-items: center; padding: 16px;
          border: 1.5px solid var(--ps-linea); border-radius: 18px;
          background: var(--ps-papel); transition: all .2s; }
.opcion:hover { border-color: var(--ps-tinta); color: inherit; transform: translateY(-2px); }
.opcion--on { border-color: var(--ps-tinta); background: var(--ps-tinta); color: #fff; }
.opcion--on .opcion__t i { color: var(--ps-tinta-4); }
.opcion--on .opcion__ini { background: var(--ps-lima); color: var(--ps-tinta); }
.opcion__ini { width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
               background: var(--ps-bosque); color: var(--ps-lima);
               display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.opcion__t { min-width: 0; }
.opcion__t b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.02em; }
.opcion__t i { display: block; font-style: normal; font-size: 12px;
               color: var(--ps-tinta-3); margin-top: 2px; }
.opcion--num { flex-direction: column; gap: 4px; text-align: center; padding: 16px 12px; }
.opcion__n { font-size: 22px; }
.opcion__l { font-size: 11.5px; font-weight: 600; color: var(--ps-tinta-3); }
.opcion__pr { font-size: 12px; color: var(--ps-tinta-3); }

/* ── La cabecera del profesor ────────────────────────────────────────
   Oscura y a sangre, como la del club y la del americano. La foto grande a
   la izquierda y el precio a la derecha: antes eso estaba abajo, después de
   la biografía, y es lo primero que se busca. */
.pf-cab {
  background: var(--ps-tinta); color: #fff; container-type: inline-size;
  padding: clamp(22px,4cqw,48px) clamp(18px,4cqw,56px);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-bottom: 20px;
}
.pf-cab__in { display: flex; gap: clamp(16px,2.6cqw,28px); align-items: center;
              flex-wrap: wrap; max-width: 1180px; margin: 0 auto; }
.pf-cab__foto { width: clamp(76px,10cqw,116px); height: clamp(76px,10cqw,116px);
                border-radius: 999px; overflow: hidden; flex: 0 0 auto;
                background: #1E211F; position: relative; display: block; }
.pf-cab__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
                    object-fit: cover; display: block; }
.pf-cab__ini { position: absolute; inset: 0; display: grid; place-items: center;
               font-size: 28px; font-weight: 700; color: var(--ps-lima); }
.pf-cab__t { flex: 1; min-width: 180px; }
.pf-cab__eti { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
               letter-spacing: .16em; text-transform: uppercase; color: var(--ps-lima); }
.pf-cab__n { margin: 10px 0 0; font-size: clamp(26px,5cqw,46px); letter-spacing: -.045em;
             font-weight: 600; line-height: 1; color: #fff; }
.pf-cab__m { font-size: 13.5px; color: var(--ps-tinta-4); margin-top: 8px; }
.pf-cab__d { text-align: right; flex: 0 0 auto; }
.pf-cab__k { display: block; font-size: 10.5px; font-family: 'Geist Mono', monospace;
             letter-spacing: .14em; text-transform: uppercase; color: var(--ps-tinta-3);
             margin-top: 4px; }
.pf-cab__v { display: block; font-size: clamp(22px,3cqw,32px); letter-spacing: -.04em;
             line-height: 1; color: #fff; }
.pf-cab__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
                  gap: clamp(12px,1.6cqw,20px); max-width: 1180px; margin: clamp(20px,2.8cqw,32px) auto 0;
                  border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(16px,2.2cqw,24px); }
.pf-cab__cifras .pf-cab__v { font-size: clamp(19px,2.2cqw,28px); }

.am-envivo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
             padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
             border: 1px solid rgba(198,248,50,.4); color: var(--ps-lima); }
.am-envivo:hover { background: rgba(198,248,50,.08); color: var(--ps-lima); }
.am-envivo__p { width: 7px; height: 7px; border-radius: 999px; background: var(--ps-lima);
                animation: ps-late 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .am-envivo__p { animation: none; } }

/* ── El anotador ──────────────────────────────────────────────────────────
   Se usa de pie, con una mano y el partido a un metro. Todo lo que se
   aprieta es del porte del pulgar y está lejos de sus vecinos: con el «+»
   y el «−» pegados, el punto que se anota mal es el de la cancha de al
   lado y nadie se entera hasta la ronda siguiente. */
body.anotar { background: #08090A; color: #fff; }
/* `main.anotar`, por lo mismo que `main.am` y `main.vivo`: la clase va también
   en el <body> —de ahí cuelga el fondo negro de la línea de arriba— y con el
   selector suelto el cuerpo se llevaba el ancho y el padding, y los sumaba a
   los del <main>. */
main.anotar { max-width: 560px; margin: 0 auto; padding: 18px 14px 64px; }
.anotar__cab { padding: 6px 2px 16px; }
.anotar__eti { display: block; font-family: 'Geist Mono', ui-monospace, monospace;
             font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
             color: var(--ps-lima); }
.anotar__t { display: block; font-size: 20px; letter-spacing: -.03em; margin-top: 6px; }
.anotar__nada { text-align: center; padding: 56px 18px; display: grid; gap: 10px;
              justify-items: center; }
.anotar__nada b { font-size: 20px; }
.anotar__nada span { color: rgba(255,255,255,.6); max-width: 34ch; font-size: 14px; }
.anotar__pie { margin-top: 22px; text-align: center; font-size: 12.5px;
             color: rgba(255,255,255,.42); }

.mp { background: #121415; border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
      padding: 14px; margin-bottom: 14px; }
.mp--listo { opacity: .5; }
.mp__cab { display: flex; align-items: center; justify-content: space-between;
           font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
           letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5);
           margin-bottom: 10px; }
.mp__ok { color: var(--ps-lima); }
.mp__lado { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.mp__lado + .mp__lado { border-top: 1px solid rgba(255,255,255,.07); }
.mp__n { flex: 1; font-size: 15px; line-height: 1.25; min-width: 0; }
.mp__ctrl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* 52px: el mínimo cómodo para un pulgar, y los dos separados por el número. */
.mp__b { width: 52px; height: 52px; border-radius: 14px; border: 1px solid rgba(255,255,255,.16);
         background: #1C1F20; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
         display: grid; place-items: center; }
.mp__b:active { transform: scale(.94); }
.mp__b:disabled { opacity: .35; cursor: default; }
.mp__b--mas { background: var(--ps-lima); border-color: var(--ps-lima); color: #0D0F0E; }
.mp__p { min-width: 46px; text-align: center; font-size: 32px; letter-spacing: -.04em;
         font-variant-numeric: tabular-nums; }
.mp__cerrar { width: 100%; margin-top: 12px; padding: 13px; border-radius: 14px;
              border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
              font-size: 14.5px; font-weight: 600; cursor: pointer; }
.mp__cerrar:active { background: rgba(255,255,255,.06); }
.mp__err { margin: 10px 0 0; font-size: 13px; color: #FF8A8A; }
.mp__oro { margin-top: 12px; display: grid; gap: 8px; }
.mp__oro span { font-size: 13px; color: rgba(255,255,255,.65); }
.mp__b2 { padding: 13px; border-radius: 14px; border: 1px solid var(--ps-lima);
          background: transparent; color: var(--ps-lima); font-size: 14.5px;
          font-weight: 600; cursor: pointer; }

/* Subir varias fotos de una vez. Va arriba de la rejilla de huecos: es el
   atajo, no el reemplazo, y quien sabe cuál foto quiere dónde sigue usando
   los huecos de abajo. */
.fotos-varias { display: grid; gap: 8px; }
.fotos-varias__aviso { margin: 0; font-size: 13px; color: var(--ter); }

/* El profesional dado de baja. Se sigue viendo —su historia está ahí y a
   veces vuelve— pero apagado: si se viera igual que el resto, la lista diría
   que trabajan veinte cuando trabajan doce. */
.prof--baja > td { opacity: .5; }

/* ── El equipo ────────────────────────────────────────────────────────
   La rejilla del diseño: foto arriba en 4/5, y debajo quién es y cuánto
   cobra. Las horas libres se quedan adentro —el diseño traía sólo la ficha,
   y sin ellas esto es un catálogo de gente: lo que se busca es con cuál se
   puede el jueves, no quiénes enseñan acá—. */
.eq { background: #fff; border: 1px solid var(--ps-linea); border-radius: 22px;
      overflow: hidden; display: flex; flex-direction: column;
      transition: transform .2s, box-shadow .2s; }
.eq:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(13,15,14,.08); }
.eq__f { position: relative; display: block; aspect-ratio: 4 / 5; background: #E7E9E4; }
.eq__f img { position: absolute; inset: 0; width: 100%; height: 100%;
             object-fit: cover; display: block; }
.eq__c { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.eq__n { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.eq__r { font-size: 12.5px; color: var(--ps-tinta-2); margin-top: 3px; }
.eq__l { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.eq__d { font-size: 12.5px; }
.eq__nota { font-size: 12.5px; font-weight: 600; }
.eq__nota i { font-style: normal; font-weight: 400; color: var(--ps-tinta-2); }
.eq__h { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.eq__mas { font-size: 11.5px; font-weight: 600; color: var(--ps-tinta-2);
           align-self: center; }
.eq__ir { display: block; margin-top: auto; padding-top: 12px; font-size: 12.5px;
          font-weight: 600; color: var(--ps-bosque); }

/* El aviso cuando la foto no se pudo preparar. Bloque rojo y no una línea
   gris: el mensaje que explicaba por qué no subía pasaba desapercibido —el
   club elegía sus fotos, no veía nada y se iba creyendo que las había
   subido—. */
.hueco__aviso--malo {
  display: block; margin-top: 6px; padding: 8px 10px; border-radius: 10px;
  background: rgba(196,60,60,.1); border: 1px solid rgba(196,60,60,.3);
  color: #8E2B2B; font-size: 12px; line-height: 1.4;
}

/* ── Encuadrar la foto ────────────────────────────────────────────────
   El recuadro muestra exactamente lo que va a quedar guardado, y el aro de
   encima es el mismo recorte redondo que hace la ficha: sin él, alguien
   encuadra por el cuadrado y descubre en su ficha que las esquinas no
   estaban. */
.encuadre { display: grid; gap: 8px; justify-items: start; margin-top: 4px; }
.encuadre__caja { position: relative; width: 200px; max-width: 100%; }
.encuadre__l {
  display: block; width: 100%; aspect-ratio: 1; border-radius: 12px;
  background: var(--surface-sunken); cursor: grab; touch-action: none;
}
.encuadre__l:active { cursor: grabbing; }
.encuadre__l:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* El aro no recibe el dedo: si lo hiciera, arrastrar por el centro —que es
   por donde se arrastra— no movería nada. */
.encuadre__aro {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: rgba(0, 0, 0, .3);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
          mask: radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
}
.encuadre__zoom { display: flex; align-items: center; gap: 8px; width: 200px; max-width: 100%; }
.encuadre__zoom input { flex: 1; }

/* La miniatura del producto en la tienda del club. Es lo que el club
   reconoce: el nombre de una pala en el catálogo no le dice cuál es. */
.tienda-mini {
  width: 46px; height: 46px; border-radius: 10px; flex: 0 0 auto;
  background: var(--surface-sunken); overflow: hidden; display: block; position: relative;
}
.tienda-mini img { position: absolute; inset: 0; width: 100%; height: 100%;
                   object-fit: cover; display: block; }

/* ── La tienda del club ───────────────────────────────────────────────
   La tarjeta grande oscura del destacado a la izquierda y la rejilla de los
   demás a la derecha, como el diseño. Sin destacado, la rejilla se lleva el
   ancho entero: un hueco negro donde iría la tarjeta se lee como algo que no
   cargó. */
.club-tienda { display: grid; gap: 14px; margin-top: 14px;
               grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ct-dest { background: var(--ps-tinta); color: #fff; border-radius: 24px;
           overflow: hidden; display: flex; flex-direction: column; }
.ct-dest:hover { color: #fff; }
.ct-dest__f { display: block; position: relative; aspect-ratio: 16 / 11; background: #1A1C1B; }
.ct-dest__f img { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; display: block; }
.ct-dest__c { padding: clamp(16px, 2.4cqw, 24px); display: grid; gap: 8px; }
.ct-dest__eti { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
                letter-spacing: .18em; text-transform: uppercase; color: var(--ps-lima); }
.ct-dest__n { font-size: clamp(19px, 2.4cqw, 26px); font-weight: 600; letter-spacing: -.03em;
              line-height: 1.15; }
.ct-dest__m { font-size: 13px; color: var(--ps-tinta-4); }
.ct-dest__p { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ct-dest__p b { font-size: 20px; }
.ct-dest__p i { font-style: normal; font-size: 13px; color: var(--ps-tinta-3);
                text-decoration: line-through; }
.ct-dest__p em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
                 color: var(--ps-tinta); background: var(--ps-lima);
                 padding: 4px 8px; border-radius: 999px; }
.ct-dest__ir { font-size: 13px; font-weight: 600; color: var(--ps-lima); margin-top: 6px; }

.ct-rej { display: grid; gap: 10px; align-content: start;
          grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ct-item { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ct-item__f { display: block; position: relative; aspect-ratio: 1; background: #F2F3F1; }
.ct-item__f img { position: absolute; inset: 0; width: 100%; height: 100%;
                  object-fit: cover; display: block; }
.ct-item__c { padding: 12px 13px 14px; display: grid; gap: 5px; }
.ct-item__m { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px;
              letter-spacing: .14em; text-transform: uppercase; color: var(--ps-tinta-2); }
.ct-item__n { font-size: 13px; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.ct-item__p { font-size: 13.5px; }

/* El mapa de la ficha del club. Alto fijo y esquinas redondas como el resto
   de las tarjetas; el iframe no trae borde propio. */
.club-mapa { border-radius: 20px; overflow: hidden; margin-bottom: 12px;
             background: var(--ps-hueso-2); }
.club-mapa iframe { display: block; width: 100%; height: clamp(220px, 34vw, 340px);
                    border: 0; }

/* El hueco de un logo. A diferencia del de una foto, la imagen va ENTERA y
   centrada: un logo recortado para llenar el recuadro deja de ser el logo. */
.hueco__caja--logo { aspect-ratio: 16 / 9; background: #fff; }
.hueco__caja--logo .hueco__img { object-fit: contain; padding: 10px; }

/* ── La tira de marcas del club ───────────────────────────────────────
   Los logos van ENTEROS y centrados sobre blanco: recortar un logo para que
   llene el recuadro deja de ser el logo. Y en gris hasta que se pasa por
   encima —son catorce marcas ajenas y a todo color le ganan a la ficha. */
.club-marcas__t { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px;
                  letter-spacing: .16em; text-transform: uppercase; color: var(--ps-tinta-2); }
.club-marcas__r { display: grid; gap: 10px; margin-top: 14px;
                  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
/* Los logos van A COLOR. Estaban en gris, que es un recurso para cuando la
   tira es un pie de página que no debe competir con nada; acá es lo
   contrario: el club los pone porque quiere que se vean, y el auspiciador
   paga por su color. En gris parecían apagados o rotos.

   Y las medidas van EN LA IMAGEN, no en la caja. Con `max-height: 100%`
   sobre una caja de alto fijo, los logos más altos que el recuadro se salían
   por arriba y por abajo —Gatorade y P&G se veían como dos rectángulos
   pisando la tira— porque el porcentaje no llegaba a resolverse y el navegador
   dibujaba la imagen a su tamaño. Con un máximo en píxeles se achican. */
.club-marca { min-height: 64px; background: #fff; border: 1px solid var(--ps-linea);
              border-radius: 16px; display: grid; place-items: center; padding: 10px;
              overflow: hidden; }
.club-marca img { max-height: 44px; max-width: 100%; width: auto; height: auto;
                  object-fit: contain; display: block; }

/* El logo del club, en el encabezado. Va ENTERO y centrado —recortarlo para
   llenar el cuadrado deja de ser el logo— y sin logo van las iniciales, que
   es lo que hace que el encabezado se vea terminado igual.
   La fila la define `.club-hero__top`, más arriba. */
/* EL LOGO SE ADAPTA A SU FORMA. El recuadro era cuadrado, y los logos de club
   casi nunca lo son: uno de 400×100 —lo normal, la marca escrita al lado del
   escudo— entraba entero dentro de 56×56 y quedaba de 56×14, ilegible.

   LOS TOPES VAN EN LA IMAGEN, no en la caja. Puestos en la caja, un logo
   vertical se salía por abajo y `overflow: hidden` lo RECORTABA en vez de
   achicarlo. Con `max-height` y `max-width` sobre la imagen y las dos medidas
   en auto, el navegador la achica hasta que quepa en las dos y la proporción
   nunca se toca: 4:1 sale 4:1, cuadrado sale cuadrado.

   El fondo sólo se pinta cuando NO hay logo —para las iniciales—: detrás de
   un PNG transparente, un recuadro gris se ve como una caja alrededor. */
.club-hero__logo {
  min-width: clamp(42px, 4.4cqw, 56px); min-height: clamp(42px, 4.4cqw, 56px);
  border-radius: 15px; flex: none; display: grid; place-items: center;
}
.club-hero__logo:has(i) { background: rgba(255,255,255,.1); }
.club-hero__logo img {
  max-height: clamp(42px, 4.4cqw, 56px); max-width: clamp(110px, 15cqw, 180px);
  width: auto; height: auto; display: block;
}

/* El mismo trato en el panel, al mismo doble de tamaño: el club ve del porte
   que va a quedar en su página, y no dentro de un cuadrado que la ficha no
   tiene. */
.logo-club {
  min-width: 72px; min-height: 72px; border-radius: 18px; flex: none;
  background: var(--surface-sunken); display: grid; place-items: center; padding: 6px;
}
.logo-club img { max-height: 64px; max-width: 200px; width: auto; height: auto;
                 display: block; }
.logo-club i { font-style: normal; font-weight: 700; font-size: 24px; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════
   EL BACKOFFICE, CON LA COMPOSICIÓN NUEVA

   Cincuenta y dos pantallas, un solo lugar. No se reescribió ninguna: todas
   hablan el mismo vocabulario —`.pcard`, `.tabla`, `.campo`, `.btn`— y acá se
   le cambia la ropa a ese vocabulario. Reescribirlas de a una habría sido
   cincuenta y dos oportunidades de perder un campo, un estado o una
   validación por copiarla mal.

   TODO VA ACOTADO A `body.panel`. Las mismas clases las usa la tienda, y una
   regla suelta acá le cambia el aspecto a la vitrina de doscientos clubes.
   Ya pasó con `.catalogo`, con `.am` y con `.anotar`.

   Y TODO CUELGA DE LOS TOKENS, nunca de un color escrito. Son dos muestras
   —Blanco · Zafiro y Grafito · Plata— y un `#fff` en una tarjeta la deja
   blanca en la oscura, que es exactamente la clase de error que no se ve
   hasta que alguien cambia de tema.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El titular de cada pantalla ────────────────────────────────────
   Fraunces grande, con el rótulo encima. Es lo que le da al panel el aire de
   la ficha del club y la tienda: un backoffice que se parece al producto que
   administra en vez de a una planilla. */
/* Fraunces en los titulares, como en la ficha del club y en el catálogo. El
   prototipo hacía que su `--serif` apuntara al sans; acá vuelve, porque es la
   letra que identifica al producto y el panel es parte del mismo producto. */
body.panel h1.t-h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 2.6vw, 40px); font-weight: 500; line-height: 1.14;
  letter-spacing: -.03em;
}
body.panel h1.t-h2 em { font-style: normal; color: var(--accent); }
body.panel h2.t-h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
                     font-size: 23px; line-height: 1.25; letter-spacing: -.02em; }
body.panel { letter-spacing: -.012em; -webkit-font-smoothing: antialiased; }
/* El rótulo que va sobre el titular. */
body.panel .t-label {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary);
}

/* ── Las tarjetas ───────────────────────────────────────────────────
   Menos redondeo y un borde en vez de sombra: sobre una página de trabajo con
   veinte tarjetas, la sombra ensucia y el borde ordena. */
body.panel .pcard, body.panel .tarjeta {
  border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(22, 28, 45, .025), 0 12px 35px rgba(22, 28, 45, .025);
  padding: 24px;
}
body.panel .marco { border-radius: 12px; }

/* La cifra grande de un indicador: es el dato que se mira de reojo. */
/* La cifra de un indicador: grande, apretada y con los dígitos del mismo
   ancho, para que dos tarjetas al lado no bailen. */
/* La cifra de un indicador, en Fraunces y con los dígitos del mismo ancho
   para que dos tarjetas al lado no bailen. */
body.panel .pcard .t-h2, body.panel .cifra, body.panel .cd-cifra > b,
body.panel .cja-m > b {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

/* ── Las tablas ─────────────────────────────────────────────────────
   Encabezado sobre fondo hundido y filas con aire. Una tabla de pedidos se
   lee de arriba abajo buscando UNA fila, y el aire es lo que permite no
   perder el renglón a mitad de camino. */
body.panel .tabla th {
  font-family: var(--sans); font-size: 11px; letter-spacing: .07em;
  background: var(--surface-sunken); color: var(--text-secondary);
  padding: 13px 20px; border-bottom: 1px solid var(--border);
}
body.panel .tabla th:first-child, body.panel .tabla td:first-child { padding-left: 20px; }
body.panel .tabla td { padding: 17px 20px; border-top: 1px solid var(--border);
                       border-bottom: 0; font-size: 14px; }
body.panel .tabla tr:hover td { background: var(--surface-raised); }
/* La tabla adentro de una tarjeta llega hasta el borde: un doble margen entre
   la línea del encabezado y el borde de la tarjeta se ve como un error. */
body.panel .pcard > .tabla-scroll, body.panel .marco > .tabla-scroll {
  margin: -22px; margin-top: 0; width: calc(100% + 44px);
}

/* ── Los botones ────────────────────────────────────────────────────── */
/* 44 píxeles de alto: es el mínimo que el pulgar acierta sin mirar, y esta
   pantalla también se abre desde la cancha. */
body.panel .btn { border-radius: 9px; min-height: 44px; }
body.panel .btn--sm { min-height: 36px; }
body.panel .btn--secundario { background: var(--surface); border: 1px solid var(--border); }
body.panel .btn--secundario:hover { border-color: var(--border-strong); }

/* ── Los campos ─────────────────────────────────────────────────────── */
body.panel .input, body.panel .select, body.panel textarea {
  border-radius: 9px; padding: 11px 12px; min-height: 44px;
}
body.panel textarea { min-height: 88px; }
body.panel .input:focus-visible, body.panel .select:focus-visible { border-color: var(--accent); }
body.panel .campo > label {
  font-size: 13px; font-weight: 500; color: var(--text-secondary);
  letter-spacing: 0; text-transform: none;
}

/* ── El vacío ───────────────────────────────────────────────────────
   Centrado y con aire. Un estado vacío pegado a la izquierda se lee como
   contenido que no cargó; centrado se lee como una respuesta. */
body.panel .estado {
  align-items: center; text-align: center; padding: 60px 24px;
  border: 1px solid var(--border); border-radius: 12px;
}
body.panel .estado__acciones { justify-content: center; }

/* ── El aviso ───────────────────────────────────────────────────────
   Una línea al costado en vez de un recuadro de color: el panel ya tiene
   tarjetas, y un bloque más compite con lo que la pantalla hace. */
body.panel .nota {
  background: none; border-radius: 0; padding: 6px 14px;
  border-left: 2px solid var(--accent); font-size: 13px;
}
body.panel .nota--malo { border-left-color: var(--danger); color: var(--danger); }
body.panel .nota--aviso { border-left-color: var(--warning); }

/* ── El pie del panel ───────────────────────────────────────────────
   Cierra la página. Sin él, en una pantalla corta el contenido queda colgando
   sobre un fondo que no termina en ninguna parte. */
.panel-pie {
  border-top: 1px solid var(--border); margin: 40px 40px 0; padding: 24px 0;
  display: flex; gap: 20px; align-items: baseline;
  font-size: 13px; letter-spacing: .06em; color: var(--text-primary);
}
.panel-pie span { color: var(--text-secondary); letter-spacing: 0; }
.panel-pie small { margin-left: auto; color: var(--text-tertiary); letter-spacing: 0; }
@media (max-width: 899px) {
  .panel-pie { margin: 32px 20px 0; }
  .panel-pie small { display: none; }
  body.panel .pcard, body.panel .tarjeta { padding: 18px; }
  body.panel .tabla th, body.panel .tabla td { padding: 13px 16px; }
  body.panel .pcard > .tabla-scroll, body.panel .marco > .tabla-scroll {
    margin: -18px; margin-top: 0; width: calc(100% + 36px);
  }
}

/* ── EL CONTROL DEL DÍA ──────────────────────────────────────────────
   La pantalla que el mostrador deja abierta. No es una tabla: es una lista de
   filas grandes que se leen de pie, muchas veces desde el teléfono y entre las
   canchas. Todo lo que se toca tiene 44px de alto y nada depende de pasar el
   mouse por encima, que en un teléfono no existe. */

/* Las tres cifras que se leen de lejos. */
body.panel .cd-cifras {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
/* Cuatro en la ficha del jugador. Va acá y no en un `style=` de la vista:
   escrito en línea le gana a la regla del teléfono y las cuatro cifras se
   apretaban hasta salirse de su caja. */
body.panel .cd-cifras--4 { grid-template-columns: repeat(4, 1fr); }
body.panel .cd-cifra {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface);
}
body.panel .cd-cifra > b { font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
body.panel .cd-cifra > span { font-size: 13px; color: var(--text-secondary); }
body.panel .cd-de { font-size: .55em; color: var(--text-tertiary); font-family: inherit; }
/* La plata que falta se pinta SOLO si falta. En rojo permanente, el día que
   está todo cobrado se ve igual de mal que el día que no cobró nadie. */
body.panel .cd-cifra--debe { border-color: var(--danger); }
body.panel .cd-cifra--debe > b { color: var(--danger); }

/* La barra: el día que se mira y los filtros. */
body.panel .cd-barra {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
}
body.panel .cd-dias { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
body.panel .cd-dias input[type="date"] { min-height: 40px; width: auto; }
body.panel .cd-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
body.panel .cd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radio-full);
  font-size: 13px; color: var(--text-secondary); text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
body.panel .cd-chip:hover { background: var(--surface-sunken); }
body.panel .cd-chip.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-contrast);
}
body.panel .cd-chip span { font-variant-numeric: tabular-nums; opacity: .7; }
/* La etiqueta dentro de una tabla: el mismo chip no sirve, mide 40px de alto
   y estira la fila. Es un rótulo, no algo que se apriete. */
body.panel .cd-chip--et {
  min-height: 0; padding: 1px 8px; margin-right: 6px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ── El tablero: mapa de calor y variaciones ─────────────────────────
   Sin librería de gráficos: una grilla de celdas con opacidad se lee igual en
   el teléfono, pesa cero y no se rompe cuando alguien sube la versión. */
body.panel .tb-calor { border-collapse: separate; border-spacing: 3px; }
body.panel .tb-calor th {
  font-size: 11px; font-weight: 500; color: var(--text-tertiary);
  text-align: left; white-space: nowrap; padding: 0 6px 0 0;
  font-variant-numeric: tabular-nums;
}
body.panel .tb-calor thead th { text-align: center; padding: 0 0 4px; }
body.panel .tb-calor td { padding: 0; }
/* La celda es un cuadro de color: la opacidad ES el dato. */
body.panel .tb-c {
  display: block; width: 26px; height: 22px; border-radius: 3px;
  background: var(--accent);
}
/* Cerrado no es vacío: un club cerrado el domingo no tiene «0% de ocupación»,
   no tiene ocupación. Con el mismo color al 6% se leería como casi vacío. */
body.panel .tb-c--no {
  background: repeating-linear-gradient(45deg, var(--surface-sunken) 0 3px,
              transparent 3px 6px);
  opacity: 1;
}
/* Verde el que sube y rojo el que baja, con los tokens que ya existen: un
   token inventado acá se queda sin declarar en el tema oscuro y la flecha
   desaparece. */
body.panel .tb-sube { color: var(--accent); }
body.panel .tb-baja { color: var(--danger); }

/* ── La fila ─────────────────────────────────────────────────────────
   `min-width: 0` en las columnas: sin él, un nombre largo o cuatro casilleros
   estiran la rejilla y la fila se sale de la tarjeta. */
body.panel .cd-fila {
  display: grid; gap: 0 16px; align-items: center;
  grid-template-columns: 4px 110px minmax(0, 1fr) auto auto;
  padding: 14px 18px 14px 0;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface);
  overflow: visible;   /* los medios de pago se abren por encima */
}
body.panel .cd-fila > * { min-width: 0; }

/* El semáforo es una barra de color Y un texto («2/4»). Sólo color deja fuera
   a uno de cada doce hombres, que en un mostrador es el operador del turno. */
body.panel .cd-luz {
  align-self: stretch; border-radius: var(--radio-6) 0 0 var(--radio-6);
  background: var(--border-strong);
}
body.panel .cd-fila--pagada .cd-luz { background: var(--success); }
body.panel .cd-fila--parcial .cd-luz { background: var(--warning); }
body.panel .cd-fila--por_cobrar .cd-luz { background: var(--danger); }

/* La que ya se jugó se apaga: la deuda sigue, pero la hora ya no se cobra en
   la puerta. Sin esto, a las 22:00 la pantalla es un muro de rojo del día
   entero y el rojo que importa —el de la próxima hora— se pierde adentro. */
body.panel .cd-fila--jugada { background: var(--surface-raised); }
body.panel .cd-fila--jugada .cd-cuando, body.panel .cd-fila--jugada .cd-quien {
  opacity: .72;
}

body.panel .cd-cuando { display: flex; flex-direction: column; padding-left: 16px; }
body.panel .cd-hora { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
body.panel .cd-cancha { font-size: 12px; color: var(--text-secondary); }
body.panel .cd-ya {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary);
}

body.panel .cd-quien { display: flex; flex-direction: column; gap: 2px; }
body.panel .cd-quien > b { font-size: 15px; }
body.panel .cd-meta { display: flex; gap: 10px; font-size: 12px; }
body.panel .cd-meta a { color: var(--text-secondary); }
body.panel .cd-nota { color: var(--warning); font-weight: 700; }

/* ── Los casilleros ──────────────────────────────────────────────────
   Uno por cupo, con nombre o sin él. Cada uno es un <details>: sin JavaScript
   se abre, se elige el medio y el formulario se manda de verdad. */
body.panel .cd-cupos { display: flex; flex-wrap: wrap; gap: 6px; }
body.panel .cd-cupo { position: relative; }
body.panel .cd-cupo > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; min-width: 92px; padding: 4px 12px;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  transition: border-color var(--dur-fast) var(--ease);
}
body.panel .cd-cupo > summary::-webkit-details-marker { display: none; }
body.panel .cd-cupo > summary:hover { border-color: var(--border-strong); }
body.panel .cd-cupo__n {
  font-size: 12px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12ch;
}
body.panel .cd-cupo__m { font-size: 12px; line-height: 1.2; color: var(--text-secondary); }
/* El pagado se lee de un vistazo por el fondo; el que debe, por el monto. */
body.panel .cd-cupo--ok > summary {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border-color: color-mix(in srgb, var(--success) 40%, transparent);
}
body.panel .cd-cupo--ok .cd-cupo__m { color: var(--success); }
body.panel .cd-cupo--debe .cd-cupo__m { color: var(--danger); font-weight: 600; }
/* El cupo que nadie tomó: se ve que está vacío sin dejar de ser cobrable. */
body.panel .cd-cupo--debe > summary { border-style: dashed; }

/* Los medios de pago salen POR ENCIMA y no empujando la fila: en una lista de
   cuarenta, abrir un cupo movía las treinta y nueve de abajo y el operador
   perdía de vista la que estaba mirando. */
body.panel .cd-medios {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column; gap: 4px;
  /* 210 y no 170: adentro va el campo del comprobante, y con menos ancho el
     rótulo sale cortado justo en la palabra que dice qué escribir. */
  padding: 8px; min-width: 210px;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  background: var(--surface-raised); box-shadow: var(--e2);
}
body.panel .cd-medios .btn { justify-content: flex-start; width: 100%; }
/* El comprobante, arriba de los tres botones: se escribe ANTES de elegir con
   qué se pagó, que es el orden en que pasa —el operador tiene el voucher en la
   mano y después aprieta «Tarjeta». */
body.panel .cd-resp { width: 100%; font-size: 13px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  background: var(--surface); color: var(--text-primary); }
body.panel .cd-resp--4 { font-variant-numeric: tabular-nums; letter-spacing: .08em; }
body.panel .cd-resp__ay { font-size: 11px; color: var(--text-tertiary); line-height: 1.3; }

/* ── EL TECLADO DE BILLETES ──────────────────────────────────────────
   Tres columnas, de mayor a menor: es el orden en que se cuenta la plata y el
   que tiene el cajón. Ordenado de menor a mayor obliga a leer la etiqueta de
   cada casilla en vez de ir directo a la que se necesita. */
body.panel .cd-plata > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; color: var(--accent); padding: 4px 0;
}
body.panel .cd-plata > summary::-webkit-details-marker { display: none; }
body.panel .cd-plata__g {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 4px 0;
}
body.panel .cd-bill { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
body.panel .cd-bill > span { font-size: 10px; color: var(--text-tertiary); }
body.panel .cd-bill > input {
  width: 100%; min-height: 32px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radio-4);
  background: var(--surface); color: var(--text-primary);
  font: inherit; font-size: 13px; font-variant-numeric: tabular-nums;
}
/* El vuelto en grande: es el número que el operador va a sacar del cajón, y
   equivocarse ahí se descubre al cierre sin saber de dónde vino. */
body.panel .cd-plata__r {
  margin: 4px 0 0; padding: 8px 10px;
  border-radius: var(--radio-4); background: var(--accent-soft);
  font-size: 13px; color: var(--text-primary);
}
body.panel .cd-plata__r b { font-size: 16px; font-variant-numeric: tabular-nums; }
body.panel .cd-plata__r--corto { background: color-mix(in srgb, var(--danger) 12%, transparent); }
/* Con qué pagó, junto al cupo. Chico y recortado: es para reconocerlo, no para
   leerlo entero —el número completo está en la caja y en el título. */
body.panel .cd-cupo__r {
  font-size: 10px; color: var(--text-tertiary); line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12ch;
}
body.panel .cd-cobro-todo { position: relative; }
body.panel .cd-cobro-todo > summary { list-style: none; cursor: pointer; }
body.panel .cd-cobro-todo > summary::-webkit-details-marker { display: none; }
body.panel .cd-cobro-todo .cd-medios { left: auto; right: 0; }

body.panel .cd-estado {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  text-align: right;
}
/* La familia sale de la clase `.mono` del marcado, que es la que ya usa todo
   el resto: repetir acá la pila de tipografías es tener dos definiciones de
   «la monoespaciada» que un día no dicen lo mismo. */
body.panel .cd-marca { font-size: 16px; }
body.panel .cd-falta { font-size: 12px; color: var(--danger); }
/* «pagada» NO se pinta de rojo. Con la regla de arriba a secas, la reserva
   cobrada entera decía «pagada» en el color de la deuda: el texto y el color
   diciendo cosas distintas es peor que no tener color. */
body.panel .cd-fila--pagada .cd-falta { color: var(--text-secondary); }
body.panel .cd-fila--pagada .cd-marca { color: var(--success); }

body.panel .cd-nada { text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding: 48px 24px; }
body.panel .cd-pie { text-align: center; }

/* ── En el teléfono ──────────────────────────────────────────────────
   En muchos clubes el que cobra anda entre las canchas con el celular, no
   sentado en un mostrador. La fila se apila y los casilleros ocupan el ancho:
   cuatro chips de 92px no caben en 390 y se cortaban por la mitad. */
@media (max-width: 899px) {
  body.panel .cd-cifras { grid-template-columns: 1fr; }
  body.panel .cd-cifra { flex-direction: row; align-items: baseline; gap: 8px; padding: 12px 16px; }
  body.panel .cd-cifra > b { font-size: 22px; }
  body.panel .cd-fila {
    grid-template-columns: 4px minmax(0, 1fr);
    gap: 10px 14px; padding: 0 16px 14px 0; align-items: start;
  }
  /* CADA HIJO A SU CELDA, a mano. Con `grid-row: 1 / -1` en la barra y el
     resto colocándose solo, el nombre caía en la columna de 4 píxeles y se
     dibujaba ENCIMA de los casilleros: `-1` apunta al final de la rejilla
     EXPLÍCITA, y acá no hay filas explícitas, así que la barra ocupaba una
     sola fila en vez de todas. */
  body.panel .cd-luz { grid-column: 1; grid-row: 1 / span 4; }
  body.panel .cd-cuando, body.panel .cd-quien,
  body.panel .cd-cupos, body.panel .cd-estado { grid-column: 2; }
  /* Sin el sangrado de la izquierda: en el escritorio separa la hora de la
     barra de color, pero apilado la columna ya empieza después de la barra y
     esos 16px dejaban la hora corrida respecto del nombre y los casilleros. */
  body.panel .cd-cuando {
    flex-direction: row; align-items: baseline; gap: 8px;
    padding: 14px 0 0 0;
  }
  body.panel .cd-cupos { display: grid; grid-template-columns: 1fr 1fr; }
  body.panel .cd-cupo__n { max-width: none; }
  body.panel .cd-cupo > summary { min-width: 0; }
  body.panel .cd-estado {
    flex-direction: row; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
  }
  body.panel .cd-medios { left: 0; right: 0; min-width: 0; }
}

/* ── EL ARQUEO DE LA CAJA ────────────────────────────────────────────
   Tres medios, tres tarjetas, tres cuadres distintos. Lado a lado y no en una
   tabla: no se comparan entre sí —cada uno se cuenta contra su propio papel—,
   y en filas el ojo los suma, que es justo el error que este diseño evita. */
body.panel .cja-arqueo {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
body.panel .cja-m {
  min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 18px 20px;
  border: 1px solid var(--border); border-radius: var(--radio-6);
  background: var(--surface);
}
body.panel .cja-m > b { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.05; }

/* ── LA AGENDA DEL CLUB ──────────────────────────────────────────────
   Canchas en columnas, media hora por fila, y cada bloque estirado por los
   minutos que ocupa DE VERDAD. Con celdas de una hora, la reserva de las 09:30
   se dibuja a las 09:00 y la grilla miente sobre lo único que se le pregunta.

   El prefijo es `ag-` y no `rv-`: `rv-` es el mundo de la página pública de
   reservar, y meter estilos del panel en ese namespace es la colisión de
   nombres que este archivo ya pagó dos veces. */

body.panel .ag-marco { overflow-x: auto; }
/* `.ag-grilla` y no `.ag` a secas: `.ag` ya era la página del profesor
   («Mi agenda», «Mis horarios»), y con el mismo nombre esas pantallas
   heredaban esta grilla de filas de 26 px y todo se montaba encima. */
body.panel .ag-grilla {
  display: grid;
  grid-template-columns: 56px repeat(var(--ag-cols), minmax(120px, 1fr));
  /* La PRIMERA fila crece con su contenido y el resto son medias horas de 26px.
     Sin declararla, la cabecera heredaba los 26px de `grid-auto-rows` y el
     nombre de la cancha salía cortado por abajo: la fila 1 no es media hora,
     es el rótulo. */
  grid-template-rows: auto;
  grid-auto-rows: 26px;
  gap: 2px;
  min-width: min-content;
}

body.panel .ag-esq { position: sticky; left: 0; z-index: 2; background: var(--surface-page); }
body.panel .ag-cab {
  grid-row: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 6px 8px; min-height: 52px;
  border-radius: var(--radio-4) var(--radio-4) 0 0;
  background: var(--surface-sunken);
  font-size: 13px; text-align: center;
}
body.panel .ag-cab > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
body.panel .ag-logo { max-height: 14px; max-width: 70px; object-fit: contain; }
body.panel .ag-tipo {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary);
}

/* La tira de horas se queda pegada a la izquierda: en un club de nueve
   canchas hay que desplazar de lado, y sin esto no se sabe a qué hora
   corresponde lo que se está mirando. */
body.panel .ag-hora {
  grid-column: 1; position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
  background: var(--surface-page);
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--text-tertiary);
}
body.panel .ag-hora--punto { color: var(--text-secondary); }

/* ── EL TURNO LIBRE ──────────────────────────────────────────────────
   Con su hora y su precio, que es lo que el operador necesita para contestar
   «¿qué te queda a las ocho?» sin abrir nada.

   LO LIBRE VA EN CONTORNO Y LO OCUPADO EN RELLENO. Es la decisión que hace
   legible la pantalla: los tres colores de cobro —verde pagada, ámbar parcial,
   rojo por cobrar— sólo significan algo si no compiten con un cuarto relleno.
   Pintar lo disponible de verde lo pondría a pelear justo con «pagada», que es
   el otro verde, y en una grilla de nueve columnas eso se lee mal de lejos,
   que es como se lee. Vacío = hay dónde vender; lleno = hay alguien. */
body.panel .ag-t {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--radio-4);
  border: 1px dashed var(--accent);
  background: var(--surface);
  color: var(--accent); text-decoration: none;
  font-size: 12px; line-height: 1.2;
  transition: background var(--dur-fast) var(--ease);
}
body.panel a.ag-t:hover { background: var(--accent-soft); border-style: solid; }
body.panel .ag-t__h { font-size: 11px; opacity: .75; }
body.panel .ag-t__p { font-weight: 600; }
/* «Libre» se dice con palabras y no sólo con el contorno: uno de cada doce
   hombres no distingue este verde del rojo de al lado, y en un mostrador ése
   es el operador del turno. Aparece cuando hay alto para mostrarlo. */
body.panel .ag-t__x {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-tertiary);
}
/* El turno que ya pasó, y el que no tiene precio. Se dibujan —el día completo
   se sigue leyendo— pero no se ofrecen: `reservar()` rechaza el pasado y sin
   tarifa no hay nada que cobrar, así que un enlace ahí es una promesa que
   falla al apretarla. */
body.panel .ag-t--muerto {
  border-style: solid; border-color: var(--border);
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}
body.panel .ag-t--muerto .ag-t__p { font-weight: 400; font-size: 10px; }

/* El bloque tomado. */
body.panel .ag-b {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--radio-4);
  border-left: 3px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text-primary); text-decoration: none;
  font-size: 12px; line-height: 1.25;
}
body.panel a.ag-b:hover { box-shadow: var(--e2); }
body.panel .ag-b__h { font-size: 11px; color: var(--text-secondary); }
body.panel .ag-b__q { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
body.panel .ag-b__n { font-size: 11px; color: var(--text-secondary); }
body.panel .ag-b__pt { color: var(--warning); font-style: normal; font-weight: 700; }

/* El color dice el estado de cobro, y sólo para lo que este club cobra acá.
   Una clase o un partido pintados de rojo dirían que hay una deuda que no
   existe: su plata se cobra en otro módulo. */
body.panel .ag-b--pagada    { border-left-color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); }
body.panel .ag-b--parcial   { border-left-color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface)); }
body.panel .ag-b--por_cobrar { border-left-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
body.panel .ag-b--clase     { border-left-color: var(--accent);
  background: var(--accent-soft); }
/* Ni `--tinta-firme` ni `--text-primary`: la primera sólo está declarada en la
   muestra clara —en la oscura habría quedado un azul casi negro sobre un fondo
   casi negro— y la segunda es color de LETRA, que pintando un fondo se da
   vuelta solo a medias. `--realzado-fondo` es el token de lo que destaca sobre
   la página y viene con su letra en el mismo par. */
body.panel .ag-b--torneo    { border-left-color: var(--realzado-fondo);
  background: var(--surface-sunken); }
body.panel .ag-b--bloqueo   { border-left-color: var(--border-strong);
  background: repeating-linear-gradient(135deg, var(--surface-sunken) 0 6px, var(--surface) 6px 12px);
  color: var(--text-secondary); }

body.panel .ag-leyenda {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none;
  font-size: 12px; color: var(--text-secondary);
}
body.panel .ag-leyenda li { display: flex; align-items: center; gap: 6px; }
body.panel .ag-p { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
/* El de la leyenda va hueco, igual que el turno en la grilla. */
body.panel .ag-p--libre { background: transparent; border: 1px dashed var(--accent); }
body.panel .ag-p--pagada { background: var(--success); }
body.panel .ag-p--parcial { background: var(--warning); }
body.panel .ag-p--por_cobrar { background: var(--danger); }
body.panel .ag-p--clase { background: var(--accent); }
/* `--realzado-fondo` y no `--text-primary`: es el token hecho para lo que
   DESTACA sobre la página, y viene en par con su letra, así que se da vuelta
   entero al cambiar de muestra. Un fondo pintado con un color de texto se da
   vuelta solo la mitad. */
body.panel .ag-p--torneo { background: var(--realzado-fondo); }
body.panel .ag-p--bloqueo { background: var(--border-strong); }

/* El resumen de lo que se está por reservar, y el total. */
body.panel .ag-resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
body.panel .ag-resumen > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.panel .ag-total {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-radius: var(--radio-4); background: var(--surface-sunken);
}
body.panel .ag-total > b { font-size: 22px; }

@media (max-width: 899px) {
  /* En el teléfono la grilla se desplaza de lado. Apretarla para que quepan
     seis canchas en 390px deja columnas de 40px donde no cabe ni la hora. */
  body.panel .ag-grilla { grid-template-columns: 44px repeat(var(--ag-cols), 118px); }
}

/* ── LA BITÁCORA DE UNA RESERVA ──────────────────────────────────────
   Una línea por movimiento, lo último arriba. Sin tarjetas ni íconos: son
   veinte líneas de texto que se leen cuando la caja no cuadra, y cualquier
   adorno le quita sitio a lo único que importa, que es quién y cuándo. */
body.panel .bit {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
body.panel .bit li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
body.panel .bit__c { font-size: 12px; color: var(--text-tertiary); min-width: 15ch; }
body.panel .bit li i { font-style: italic; }

/* El detalle de la reserva usa `<details>` como acordeón dentro de una
   tarjeta: mover y cambiar el precio son operaciones de una vez cada muchas, y
   abiertas de entrada convierten la ficha en un muro de formularios. */
body.panel details.pcard > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 28px;
}
body.panel details.pcard > summary::-webkit-details-marker { display: none; }
body.panel details.pcard > summary::after {
  content: '+'; font-size: 18px; line-height: 1; color: var(--text-tertiary);
}
body.panel details.pcard[open] > summary::after { content: '−'; }

/* ── EL LISTADO DE RESERVAS ──────────────────────────────────────────
   Los filtros en una rejilla que se acomoda sola: son siete y en una fila no
   caben, apilados ocupan media pantalla antes de la tabla. */
body.panel .rf-filtros {
  display: grid; gap: 12px 16px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  align-items: end;
}
body.panel .rf-buscar { grid-column: span 2; }
body.panel .rf-check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; }
body.panel .rf-ir { display: flex; gap: 8px; align-items: center; }
body.panel .rf-debe { color: var(--danger); }
@media (max-width: 599px) {
  body.panel .rf-buscar { grid-column: span 1; }
}

/* ═══ FIN DE LA COMPOSICIÓN DEL BACKOFFICE ═══════════════════════════
   Lo de acá abajo ya no es del panel. La prueba que comprueba que nada del
   backoffice se le escape a la tienda lee hasta esta línea; sin ella se comía
   todo lo que se agregara después al archivo y denunciaba reglas que no
   tienen nada que ver. */

/* ── LA PUERTA DEL PANEL ─────────────────────────────────────────────
   Entrar, recuperar la clave, elegir una nueva. La marca arriba, una tarjeta
   al medio y el pie: el mismo mundo del panel sin su armazón, porque quien no
   ha entrado no tiene menú. */
.puerta { min-height: 100vh; display: flex; flex-direction: column;
          background: var(--surface-page); }
.puerta__cab { display: flex; align-items: center; justify-content: space-between;
               gap: 20px; padding: 22px clamp(20px, 5vw, 40px);
               border-bottom: 1px solid var(--border); }
.puerta__marca { display: flex; align-items: center; gap: 11px; color: var(--text-primary); }
.puerta__marca:hover { color: var(--text-primary); }
.puerta__punto { width: 26px; height: 26px; flex: none; border-radius: 8px;
                 background: var(--accent); box-shadow: inset 0 0 0 3px rgba(255,255,255,.14); }
.puerta__marca b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .04em; }
.puerta__marca small { display: block; font-size: 11.5px; color: var(--text-secondary);
                       letter-spacing: .03em; }

/* La tarjeta se centra en el espacio que queda, no en la pantalla: con la
   cabecera y el pie contando, centrarla en el viewport la deja siempre un
   poco baja. */
.puerta__medio { flex: 1; display: grid; place-items: center;
                 padding: clamp(28px, 7vh, 72px) 20px; }
.puerta__caja { width: 100%; max-width: 420px; display: flex; flex-direction: column;
                gap: 18px; background: var(--surface); border: 1px solid var(--border);
                border-radius: 16px; padding: clamp(24px, 4vw, 34px);
                box-shadow: 0 2px 8px rgba(22, 28, 45, .025),
                            0 12px 35px rgba(22, 28, 45, .04); }
.puerta__caja h1.t-h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
                        font-size: 34px; line-height: 1.14; letter-spacing: -.03em;
                        margin: 0; }
.puerta__caja .campo > label { font-size: 13px; font-weight: 500;
                               color: var(--text-secondary); letter-spacing: 0;
                               text-transform: none; }
.puerta__caja .input { border-radius: 9px; min-height: 44px; }
.puerta__caja .btn { border-radius: 9px; min-height: 46px; }
.puerta__caja .nota { border-radius: 9px; }
/* Los dos enlaces del final, más chicos y separados del botón: no compiten
   con «Entrar», que es a lo que viene el 99% de las visitas. */
.puerta__caja > a { font-size: 13.5px; color: var(--text-secondary); }
.puerta__caja > a:hover { color: var(--accent); }

.puerta__pie { padding: 22px clamp(20px, 5vw, 40px); border-top: 1px solid var(--border);
               font-size: 13px; letter-spacing: .06em; color: var(--text-primary);
               display: flex; gap: 16px; align-items: baseline; }
.puerta__pie span { color: var(--text-secondary); letter-spacing: 0; }

/* ── El pie de una página del club ───────────────────────────────────
   Acá estaba `ps-pie`, que en el teléfono es la barra del pulgar con el
   directorio de PISTA: el mismo que se sacó de arriba, pegado abajo. */
.clpie { border-top: 1px solid #3D423F; margin-top: clamp(48px, 8vw, 96px);
         background: #0B0C0E; color: #B7BCB7; }
.clpie__in { max-width: 1400px; margin: 0 auto;
             display: flex; align-items: center; justify-content: space-between;
             gap: 20px; flex-wrap: wrap;
             padding: 28px clamp(24px, 5vw, 80px); font-size: .8125rem; }
.clpie__q b { font-weight: 600; }
body.pista .clpie a { color: #F2EFE9; }
body.pista .clpie .clpie__p { color: #8A908C; }
body.pista .clpie .clpie__p a { color: #B7BCB7; text-decoration: underline;
                                text-underline-offset: 4px; }
body.pista .clpie a:hover { color: #fff; }

/* La cabecera del club vive ACÁ y no en `club.css`: la usan la ficha del club,
   la pantalla de reservar, el comprobante de la reserva y el americano de un
   club, que son tres mundos visuales distintos y sólo uno carga `club.css`. En
   los otros se veía el logo a tamaño completo y todo apilado. */
/* ── La cabecera del club ────────────────────────────────────────────
   El club por su carril. Acá estaba la barra del marketplace —Clubes,
   Americanos, Clases, Ranking, Campeonatos— que sacaba de la página justo
   arriba del nombre del club.

   Pegada arriba y translúcida: la ficha abre con una foto a sangre, y una
   barra opaca encima la corta en dos. */
/* LOS TOKENS SE DECLARAN ACÁ TAMBIÉN. Viven en `.cl`, que es el `<main>`, y
   esta barra va FUERA de él: sin repetirlos, `var(--muted)` no resuelve, el
   color cae a negro y la barra queda con seis enlaces negros sobre fondo casi
   negro. No falla nada, no se ve nada —es el mismo caso del botón invisible de
   la portada del americano—. */
.clcab { --bg: #0B0C0E; --text: #F2EFE9; --muted: #B7BCB7; --line: #3D423F;
         --gutter: clamp(24px, 5vw, 80px);
         --curva: cubic-bezier(.16, 1, .3, 1);
         position: sticky; top: 0; z-index: 30;
         background: rgba(11, 12, 14, .72); backdrop-filter: blur(14px);
         border-bottom: 1px solid var(--line); }
.clcab__in { max-width: var(--ancho, 1400px); margin: 0 auto;
             display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
             padding: 12px var(--gutter); min-height: 66px; }
.clcab__marca { display: flex; align-items: center; gap: 12px; flex: 0 0 auto;
                min-width: 0; color: var(--text); }
/* Fondo blanco propio: el logo de un club viene pensado para papel y sobre el
   negro de esta página desaparece. */
.clcab__marca img { width: 40px; height: 40px; object-fit: contain; flex: none;
                    background: #fff; border-radius: 6px; padding: 3px; }
.clcab__marca span { display: flex; flex-direction: column; min-width: 0; }
.clcab__marca b { font-size: .9375rem; font-weight: 600; letter-spacing: -.01em;
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clcab__marca i { font-style: normal; font-size: .75rem; color: var(--muted); }

.clcab__nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px);
              margin-right: auto; overflow-x: auto; scrollbar-width: none; }
.clcab__nav::-webkit-scrollbar { display: none; }
.clcab__nav a { font-size: .875rem; color: var(--muted); white-space: nowrap; }
.clcab__nav a:hover { color: var(--text); }

.clcab__b { flex: 0 0 auto; padding: 10px 18px; border-radius: 999px;
            background: var(--text); color: var(--bg);
            font-size: .875rem; font-weight: 600; white-space: nowrap;
            transition: background .25s var(--curva); }
.clcab__b:hover { background: #fff; color: var(--bg); }

/* El enlace hereda `color: inherit` de la regla global de `body.pista`, que
   pesa (0,3,2): más que una clase sola. Se le devuelve el suyo con el mismo
   peso, nombrando el elemento. */
body.pista .clcab a.clcab__marca { color: var(--text); }
body.pista .clcab .clcab__nav a { color: var(--muted); }
body.pista .clcab .clcab__nav a:hover { color: var(--text); }
body.pista .clcab a.clcab__b { color: var(--bg); }

@media (max-width: 999px) {
  /* Hasta los 1000 la barra se queda con el club y el botón: las secciones
     están a un dedo de distancia desplazando, y apiladas empujan la foto
     debajo del pliegue. */
  .clcab__nav { display: none; }
  .clcab__in { min-height: 58px; gap: 12px; }
  .clcab__marca { margin-right: auto; }
  .clcab__b { padding: 9px 14px; font-size: .8125rem; }
}

/* ── LA RESERVA DE UNA CANCHA ────────────────────────────────────────
   DOS COLUMNAS, no una lista larga. A la izquierda se elige —día, momento,
   hora—; a la derecha, pegado arriba, va lo que se lleva: club, día, horario,
   cancha, duración y total. Sin ese panel había que desplazarse hasta abajo
   para saber cuánto salía lo que se acababa de tocar, y esa ida y vuelta es
   donde se abandona una reserva.

   Todo acotado a `.rv`, que sólo existe en esta pantalla. El fondo lo pinta
   `body.rv-pagina`, que es otra clase a propósito: `.rv` va en el <main> y una
   clase de cuerpo con el mismo nombre haría que cada regla del componente le
   pegara también al body. */
body.rv-pagina { background: #F1F5F2; }

/* Más ancho que el resto de lo público: con la columna del resumen en 330 y
   las horas en tres por fila, 880 dejaba las tarjetas de hora en dos y media. */
main.club.rv { max-width: 1240px; padding-left: clamp(16px, 4vw, 24px);
               padding-right: clamp(16px, 4vw, 24px); }
@media (min-width: 900px) { main.club.rv { max-width: 1240px; } }

.rv-oculto { display: none; }

/* ── La cabecera ─────────────────────────────────────────────────────
   Tres zonas: de dónde viene la página, cómo se vuelve, y dónde queda el
   club. La vuelta va al medio porque es lo único que se aprieta acá. */
.rv-cab { background: var(--surface); border-bottom: 1px solid var(--border); }
.rv-cab__in { max-width: 1240px; margin: 0 auto; height: 76px; display: flex;
              align-items: center; justify-content: space-between; gap: 20px;
              padding: 0 clamp(16px, 4vw, 24px); }
.rv-cab__marca { display: flex; flex-direction: column; gap: 2px; font-weight: 800;
                 letter-spacing: .08em; color: var(--accent); font-size: 19px; }
.rv-cab__marca small { font-size: 9.5px; letter-spacing: .16em; font-weight: 600;
                       text-transform: uppercase; color: var(--text-tertiary); }
.rv-cab__volver { font-size: 14px; color: var(--text-secondary); }
.rv-cab__volver:hover { color: var(--accent); }
.rv-cab__lugar { font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
                 color: var(--text-tertiary); }

.rv-intro { display: flex; gap: clamp(24px, 4vw, 40px); justify-content: space-between;
            align-items: center; padding: 40px 0 8px; }
.rv-intro__t { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
               font-size: clamp(34px, 5vw, 56px); line-height: 1.06;
               letter-spacing: -.03em; margin: 6px 0 0; }
.rv-intro__t em { font-style: italic; }
.rv-intro__p { color: var(--text-secondary); margin: 10px 0 0; }
/* Chica y al costado: la foto acá acompaña, no es la portada del club —esa
   está a un clic, en «Volver al club»—. La esquina superior derecha cortada
   es la misma marca que la ficha, y evita que el rectángulo compita con el
   titular. */
.rv-intro__f { flex: none; width: 250px; height: 145px; object-fit: cover;
               border-radius: 6px 40px 6px 6px; }
.rv-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px;
           font-size: 13px; color: var(--text-secondary); }
/* El punto separador va DENTRO del hueco, no colgado del siguiente: con
   `margin-right` quedaba pegado al dato anterior y suelto del que separa. */
.rv-meta span + span::before { content: '·'; margin-right: 9px; margin-left: -9px;
                               color: var(--border-strong); }

/* Los tres pasos: dice cuántos faltan, que es lo que hace que alguien empiece
   a llenar un formulario en vez de cerrar la pestaña. Planos y sin borde: son
   un rótulo de dónde va la reserva, no tres botones —02 y 03 no llevan a
   ninguna parte mientras no haya una hora elegida, y con forma de píldora se
   apretaban igual. */
.rv-pasos { display: flex; gap: 34px; list-style: none; margin: 26px 0 0; padding: 22px 0;
            border-top: 1px solid var(--border); flex-wrap: wrap;
            font-size: 14px; color: var(--text-tertiary); }
.rv-pasos li { display: flex; align-items: center; gap: 9px; }
.rv-pasos li.on { color: var(--text-primary); font-weight: 600; }
/* El paso ya dado. Se marca y no se borra: saber que el día está elegido es
   lo que hace que el 02 se lea como «falta esto» y no como «otra pantalla». */
.rv-pasos li.ok { color: var(--accent); }
.rv-pasos li.ok b::after { content: ' ✓'; }
.rv-pasos b { font-family: var(--mono); font-size: 11px; font-weight: 500;
              color: var(--text-tertiary); }
.rv-pasos li.on b, .rv-pasos li.ok b { color: var(--accent); }

.rv-tipos { display: flex; gap: 12px; margin: 0 0 22px; flex-wrap: wrap; }
.rv-tipo { display: flex; flex-direction: column; gap: 4px; padding: 16px 22px;
           border: 1px solid var(--border); border-radius: var(--radio-6);
           background: var(--surface); color: var(--text-primary); min-width: 230px;
           transition: border-color var(--dur-fast) var(--ease); }
.rv-tipo:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rv-tipo strong { font-size: 16px; }
.rv-tipo span { font-size: 13px; color: var(--text-secondary); }
.rv-tipo.on { border-color: var(--accent); background: var(--accent-soft);
              box-shadow: inset 0 0 0 1px var(--accent); }

/* La reserva recién hecha. A lo ancho y arriba de las dos columnas: es lo
   único de la pantalla que no se está eligiendo. */
.rv-hecha { display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
            margin-top: 18px; padding: 18px 20px; background: var(--surface);
            border: 1px solid var(--accent); border-radius: var(--radio-6);
            font-size: 14px; color: var(--text-secondary); }
.rv-hecha > b { font-size: 16px; color: var(--text-primary); }

/* ── Las dos columnas ────────────────────────────────────────────────── */
.rv-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 330px;
             gap: 26px; align-items: start; }
.rv-col { display: grid; gap: 20px; min-width: 0; }

/* ── El panel ────────────────────────────────────────────────────────
   Cada paso en su tarjeta, con su pregunta arriba. El título es una pregunta
   y no un rótulo porque la pantalla es una conversación de tres preguntas, y
   «¿Cuándo jugamos?» se contesta sin leer instrucciones. */
/* `min-width: 0` no es adorno: siendo hijo de una rejilla, el panel se estira
   hasta que quepa su contenido más ancho. La grilla de once canchas lo empujaba
   por debajo del resumen —que está pegado y encima— y la tabla se leía cortada
   por una tarjeta blanca. Con esto la tabla se desliza DENTRO del panel, que es
   para lo que `.reja-envoltura` tiene su propio scroll. */
.rv-panel { background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radio-6); padding: clamp(18px, 3vw, 26px);
            min-width: 0; }
.rv-panel__cab { display: flex; align-items: center; justify-content: space-between;
                 gap: 16px; flex-wrap: wrap; }
.rv-ojo { display: block; font-size: 12px; letter-spacing: .14em; font-weight: 600;
          text-transform: uppercase; color: var(--text-tertiary); }
.rv-panel__t { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
               font-size: clamp(24px, 3vw, 30px); letter-spacing: -.02em;
               margin: 6px 0 0; }
.rv-panel__pie { display: flex; justify-content: space-between; gap: 16px;
                 flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); }

/* El selector de fecha: lo que la tira de siete días no alcanza. El botón
   «Ir» existe para el camino sin JavaScript —se elige la fecha y se manda—;
   con JavaScript el cambio navega solo y el botón se esconde. */
.rv-fecha { display: flex; align-items: center; gap: 10px; font-size: 13px;
            color: var(--text-secondary); }
.rv-fecha__i { font: inherit; font-size: 13px; padding: 9px 12px;
               border: 1px solid var(--border); border-radius: var(--radio-4);
               background: var(--surface); color: var(--text-primary); }
.rv-fecha__b { font: inherit; font-size: 13px; padding: 9px 14px;
               border: 1px solid var(--border); border-radius: var(--radio-4);
               background: var(--surface-sunken); color: var(--text-primary); }

/* La tira de días. Siete tarjetas altas: se tocan con el pulgar y el número
   se lee de lejos. El día en una línea, el número grande, el mes abajo —el
   mes, porque el número solo miente cuando la tira cruza de mes—. */
.rv-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
           gap: 8px; margin: 24px 0 18px; }
.rv-dia { display: flex; flex-direction: column; align-items: center;
          justify-content: center; gap: 2px; min-height: 94px;
          border: 1px solid var(--border); border-radius: 11px;
          background: var(--surface); color: var(--text-primary);
          transition: border-color var(--dur-fast) var(--ease); }
.rv-dia:hover { border-color: var(--border-strong); color: var(--text-primary); }
.rv-dia__d { font-size: 12px; color: var(--text-secondary); text-transform: capitalize; }
.rv-dia__n { font-family: var(--mono); font-size: 26px; font-weight: 600;
             letter-spacing: -.02em; line-height: 1.1; }
.rv-dia__m { font-size: 11.5px; color: var(--text-tertiary); }
.rv-dia.on { background: var(--accent); border-color: var(--accent);
             color: var(--accent-contrast); }
.rv-dia.on .rv-dia__d, .rv-dia.on .rv-dia__m { color: var(--accent-contrast); opacity: .82; }

/* ── Los filtros ─────────────────────────────────────────────────────── */
.rv-filtros { display: flex; justify-content: space-between; align-items: center;
              gap: 16px; flex-wrap: wrap; margin: 22px 0 16px; }
.rv-momentos { display: flex; gap: 8px; flex-wrap: wrap; }
.rv-chip { font-size: 13px; padding: 8px 14px; border-radius: var(--radio-full);
           border: 1px solid transparent; color: var(--text-secondary); }
.rv-chip:hover { border-color: var(--border); color: var(--text-primary); }
.rv-chip.on { background: var(--accent-soft); border-color: var(--accent-soft);
              color: var(--accent); font-weight: 600; }
.rv-sel { display: flex; align-items: center; gap: 8px; font-size: 13px;
          color: var(--text-secondary); }
.rv-sel select { font: inherit; font-size: 13px; padding: 8px 26px 8px 10px;
                 border: 1px solid var(--border); border-radius: var(--radio-4);
                 background: var(--surface); color: var(--text-primary); }
.rv-modo { display: inline-flex; background: var(--surface-sunken);
           border-radius: var(--radio-full); padding: 3px; }
.rv-modo a { font-size: 13px; padding: 7px 16px; border-radius: var(--radio-full);
             color: var(--text-secondary); }
.rv-modo a.on { background: var(--surface); color: var(--text-primary); font-weight: 600;
                box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ── Por hora ────────────────────────────────────────────────────────
   Tarjetas grandes: se tocan con el pulgar, en la calle, decidiendo si se
   alcanza a llegar a las ocho. Cada una ELIGE —trae la primera cancha libre
   puesta— en vez de llevar a la grilla a repetir la elección. */
.rv-cuenta { font-size: 13px; color: var(--text-secondary); margin: 0 0 14px; }
.rv-horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
            gap: 10px; }
.rv-hora { display: grid; gap: 5px; padding: 18px 14px; text-align: left;
           border: 1px solid var(--border); border-radius: 10px;
           background: var(--surface); color: var(--text-primary);
           transition: border-color var(--dur-fast) var(--ease),
                       background var(--dur-fast) var(--ease); }
.rv-hora:hover { border-color: var(--accent); }
.rv-hora__h { font-family: var(--mono); font-size: 15px; color: var(--text-tertiary); }
.rv-hora__h b { font-size: 21px; font-weight: 600; letter-spacing: -.02em;
                color: var(--text-primary); }
.rv-hora__n { font-size: 13px; color: var(--text-secondary); }
.rv-hora__p { font-family: var(--mono); font-size: 14px; margin-top: 2px; }
/* La hora elegida: el borde no basta cuando la tarjeta ya tiene borde. */
.rv-hora.on { border-color: var(--accent); background: var(--accent-soft);
              box-shadow: inset 0 0 0 1px var(--accent); }

/* ── Tu cancha ───────────────────────────────────────────────────────
   Once tarjetas iguales salvo el nombre y, a veces, el precio. Angostas y en
   varias por fila: lo que se compara acá es una contra otra. */
.rv-min { font-size: 12px; padding: 6px 12px; border-radius: var(--radio-full);
          background: var(--surface-sunken); color: var(--text-secondary); }
.rv-canchas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
              gap: 10px; }
/* `align-content: end` no es un capricho: sólo algunas canchas tienen logo, y
   la fila se estira a la más alta. Sin esto el nombre de la que tiene logo
   quedaba abajo y el de la de al lado arriba, y la fila se leía como si
   fueran dos listas distintas. Con el contenido pegado al pie, los nombres y
   los precios se alinean tengan logo o no. */
.rv-cancha { display: grid; gap: 3px; align-content: end;
             padding: 15px 14px; border: 1px solid var(--border);
             border-radius: 10px; background: var(--surface); color: var(--text-primary);
             transition: border-color var(--dur-fast) var(--ease); }
.rv-cancha:hover { border-color: var(--accent); }
.rv-cancha strong { font-size: 15px; }
.rv-cancha span { font-size: 12.5px; color: var(--text-secondary); }
.rv-cancha__p { font-size: 14px; color: var(--text-primary); margin-top: 4px; }
/* El logo del auspiciador, contenido en un recuadro de alto fijo. Alto fijo y
   `object-fit: contain` porque los logos llegan de todos los portes: dejarlos
   a su tamaño hacía tarjetas de distinta altura, y lo que se compara acá es
   una cancha contra otra. Fondo blanco propio: un logo pensado para papel se
   pierde sobre cualquier otro color. */
/* 56 y no 44 de alto. Los logos llegan de dos formas: tira ancha —Wilson,
   Vambe— y cuadrado —Gatorade, P&G Larrain—. Con 44, el cuadrado se dibujaba
   de 44×44 en un recuadro de 190 de ancho y se leía como una estampilla
   perdida al medio. Con 56 el cuadrado gana un cuarto de porte y el ancho
   sigue cabiendo entero, que es lo que tiene que caber. */
.rv-cancha__ausp { display: flex; align-items: center; justify-content: center;
                   height: 56px; padding: 6px; margin-bottom: 8px;
                   border: 1px solid var(--border); border-radius: 5px;
                   background: #FFFFFF; }
.rv-cancha__ausp img { display: block; max-width: 100%; max-height: 100%;
                       object-fit: contain; }
.rv-cancha.on { border-color: var(--accent); background: var(--accent-soft);
                box-shadow: inset 0 0 0 1px var(--accent); }

/* ── El nombre de la cancha con su logo ──────────────────────────────
   El logo va ANTES del nombre y del alto de una línea: es una marca de
   reconocimiento, no una imagen que haya que mirar. Más grande competiría con
   el dato, que es cuál cancha es. */
.cl-nombre { display: inline-flex; align-items: center; gap: 7px;
             min-width: 0; vertical-align: middle; }
.cl-logo { flex: none; width: auto; height: 18px; max-width: 54px;
           object-fit: contain; border-radius: 3px;
           /* Fondo blanco propio: un logo pensado para papel se pierde sobre
              cualquier otro color, y esta línea vive tanto en la tarjeta clara
              como en la barra del teléfono. */
           background: #FFFFFF; padding: 1px 3px; }

/* ── Quiénes juegan ──────────────────────────────────────────────────
   La lista de los cuatro, con los cupos que faltan dibujados vacíos: sin
   ellos, una lista de dos nombres no dice si faltan dos o si son dos y listo. */
.rv-quienes { list-style: none; margin: 22px 0 0; padding: 0;
              display: flex; flex-direction: column; }
.rv-quien { display: flex; align-items: center; gap: 14px; padding: 14px 0;
            border-top: 1px solid var(--border); font-size: 15px; }
.rv-quien:last-child { border-bottom: 1px solid var(--border); }
.rv-quien__n { flex: 1 1 auto; min-width: 0; font-weight: 600; }
/* Quién reservó, en chico al lado del nombre. Es información —a quién
   reclamarle si nadie llega con la llave— y no una jerarquía. */
.rv-quien__n i { font-style: normal; margin-left: 8px; padding: 2px 8px;
                 border-radius: var(--radio-full); background: var(--accent-soft);
                 color: var(--accent); font-size: 11.5px; font-weight: 600;
                 letter-spacing: .04em; text-transform: uppercase; }
/* Ancho fijo en las dos columnas de la derecha: la fila del titular no lleva
   botón, y sin reservarle el lugar su lado se corría hasta donde el resto
   tiene el «Sacar». Cuatro filas que no se alinean se leen como cuatro cosas
   distintas. */
.rv-quien__l { flex: 0 0 5.5rem; text-align: right; font-size: 13px;
               color: var(--text-secondary); }
.rv-quien__x { flex: 0 0 3.4rem; text-align: right; }
.rv-quitar { border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 13px;
             color: var(--text-tertiary); text-decoration: underline;
             text-underline-offset: 4px; cursor: pointer; }
.rv-quitar:hover { color: var(--danger); }
.rv-quien--libre { color: var(--text-tertiary); font-size: 14px; }

/* Lo que le toca a cada uno, entre el lado y el botón de sacar. Es lo que
   convierte la lista de «quiénes van» en la de «quién ya puso»: sin ella, el
   que reservó tiene que preguntar por el grupo, que es justo lo que esta
   página vino a reemplazar.

   Ancho fijo para que la columna no baile entre una fila que dice «Pagado» y
   otra que dice «$6.000»: bailando, la lista se lee como cuatro filas
   distintas en vez de como una tabla. */
/* La hora apartada mientras se paga. Va arriba del botón y no como nota al
   pie: es una cuenta regresiva, y una cuenta regresiva que se lee después de
   apretar llega tarde. */
.rv-apartada {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 18px; padding: 14px 16px;
  border: 1px solid var(--accent); border-radius: var(--radio-4);
  background: var(--accent-soft);
  font-size: 14px;
}
.rv-apartada > span { color: var(--text-secondary); font-size: 13px; }

.rv-quien__p { min-width: 92px; text-align: right; font-size: 13px;
               font-variant-numeric: tabular-nums; }
.rv-quien__p--ok { color: var(--accent); font-weight: 600; }
.rv-pagar {
  font: inherit; font-size: 13px; font-weight: 600;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--accent); border-radius: var(--radio-full);
  background: transparent; color: var(--accent);
  cursor: pointer; font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rv-pagar:hover { background: var(--accent); color: var(--accent-contrast); }
@media (max-width: 600px) {
  /* En el teléfono la fila ya va apretada: el monto se encoge antes que el
     nombre, que es lo que la gente busca. */
  .rv-quien__p { min-width: 0; }
}

.rv-anotar { margin-top: 22px; display: grid; gap: 16px; justify-items: start; }
/* Dos por fila: nombre y apellido son un solo gesto, y el lado y el cumpleaños
   otro. En una columna, el formulario ocupa toda la pantalla del teléfono y
   parece un trámite. */
.rv-anotar__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px; width: 100%; }

/* ── Las acciones de la reserva hecha ────────────────────────────────
   Cómo llegar, el calendario, el WhatsApp del club. Tres enlaces que se
   aprietan con el pulgar en la calle, no tres líneas de texto. */
.rv-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.rv-accion { display: inline-flex; align-items: center; min-height: 44px;
             padding: 10px 16px; border: 1px solid var(--border);
             border-radius: var(--radio-full); background: var(--surface);
             color: var(--text-primary); font-size: 14px;
             transition: border-color var(--dur-fast) var(--ease); }
.rv-accion:hover { border-color: var(--accent); color: var(--text-primary); }

/* La marca de estado del comprobante. La mala en rojo y no en gris: «cancelada»
   en gris chico se lee igual que «pagada», y son cosas muy distintas. */
.rv-min--malo { background: var(--danger-soft); color: var(--danger); }

.rv-vacio { display: flex; flex-direction: column; gap: 6px; text-align: center;
            padding: 40px 20px; border: 1px dashed var(--border);
            border-radius: var(--radio-6); color: var(--text-secondary); font-size: 14px; }
.rv-vacio b { color: var(--text-primary); font-size: 15px; }

.rv-pinta { display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
            margin-top: 14px; font-size: 12px; color: var(--text-secondary); }
.rv-pinta span { display: inline-flex; align-items: center; gap: 6px; }

/* ── Tu partido ──────────────────────────────────────────────────────
   Pegado arriba mientras se elige. La línea verde del borde superior lo
   separa de los paneles de la izquierda: es de otra naturaleza —no se elige
   nada acá, se confirma—. */
.rv-res { position: sticky; top: 20px; background: var(--surface);
          border: 1px solid var(--border); border-top: 3px solid var(--accent);
          border-radius: var(--radio-6); padding: 26px; }
.rv-res__t { font-family: 'Fraunces', Georgia, serif; font-weight: 500;
             font-size: 30px; letter-spacing: -.02em; margin: 6px 0 20px; }
.rv-res__d { margin: 0; display: grid; gap: 12px; font-size: 14px; }
.rv-res__d > div { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.rv-res__d dt { color: var(--text-secondary); }
.rv-res__d dd { margin: 0; font-weight: 600; text-align: right; }
.rv-res__total { display: flex; justify-content: space-between; align-items: center;
                 gap: 12px; margin-top: 22px; padding: 20px 0;
                 border-top: 1px solid var(--border); font-size: 14px; }
.rv-res__total small { display: block; font-size: 12px; font-weight: 400;
                       color: var(--text-secondary); margin-top: 2px; }
.rv-res__total b { font-size: 22px; letter-spacing: -.02em; }
.rv-res__nota { text-align: center; font-size: 12px; line-height: 1.7;
                color: var(--text-secondary); margin: 14px 0 0; }
.rv-res__pol { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 20px;
               font-size: 12px; line-height: 1.7; color: var(--text-secondary); }
.rv-res__pol b { display: block; color: var(--text-primary); font-size: 13px; }

.rv-form { display: grid; gap: 14px; }
/* El botón manda de verdad, así que sin JavaScript dice «Reservar» y funciona.
   Es el script el que lo apaga hasta que haya una hora elegida: al revés
   —apagado en el HTML— la pantalla sin JavaScript no podría reservar nunca. */
.rv-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px;
          min-height: 50px; padding: 14px 20px; border: 0; border-radius: 8px;
          background: var(--accent); color: var(--accent-contrast);
          font-size: 15px; font-weight: 600; width: 100%; }
.rv-cta:hover:not(:disabled) { background: var(--accent-hover); }
.rv-cta:disabled { opacity: .5; cursor: not-allowed; }

/* ── La barra del teléfono ───────────────────────────────────────────
   En una pantalla angosta el panel «Tu partido» cae debajo de todas las
   horas, así que lo elegido y su precio desaparecen justo cuando hay que
   decidir. Sólo aparece con una hora tomada y sólo con JavaScript: sin él el
   panel de abajo cumple el mismo papel y una barra fija tapando contenido
   sería peor que no tenerla. */
.rv-barra { display: none; }

@media (max-width: 980px) {
  .rv-cuerpo { grid-template-columns: 1fr; }
  .rv-res { position: static; }
}
@media (max-width: 780px) {
  .rv-cab__in { height: 64px; }
  .rv-anotar__g { grid-template-columns: 1fr; }
  .rv-cab__volver { display: none; }
  .rv-intro { flex-direction: column; align-items: stretch; gap: 20px; padding-top: 22px; }
  .rv-intro__f { order: -1; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .rv-pasos { gap: 18px; font-size: 13px; }
  /* Uno por línea, sin el punto: al envolverse, el separador quedaba abriendo
     la línea de abajo —«· Las Cujas 9723»— como si faltara algo antes. */
  .rv-meta { flex-direction: column; gap: 4px; }
  .rv-meta span + span::before { content: none; }
  .rv-tipo { flex: 1; min-width: 0; }
  /* Cuatro columnas y dos filas: con siete en una fila la tarjeta baja de 44
     píxeles de ancho y el número deja de leerse. */
  .rv-dias { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rv-panel__cab { align-items: flex-start; }
  .rv-filtros { align-items: stretch; }
  .rv-horas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .rv-barra[data-visible] { display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40; align-items: center; gap: 12px; padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0,0,0,.10); }
  .rv-barra__d { display: flex; flex-direction: column; min-width: 0; }
  .rv-barra__d b { font-family: var(--mono); font-size: 15px; }
  .rv-barra__d small { font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-barra__p { margin-left: auto; font-size: 16px; font-weight: 600; }
  .rv-barra__b { border: 0; border-radius: 8px; padding: 13px 18px; font-weight: 600;
    background: var(--accent); color: var(--accent-contrast); font-size: 14px;
    white-space: nowrap; }
  /* Sitio para la barra: sin esto tapa el final del panel «Tu partido». */
  body.rv-pagina:has(.rv-barra[data-visible]) { padding-bottom: 84px; }
}

/* ── La tabla de precios por horario ─────────────────────────────────
   Sesenta celdas de número. Angostas y del mismo ancho: lo que se compara acá
   es una columna contra otra, y con celdas de distinto porte la comparación
   no se puede hacer de un vistazo. */
.tabla-precios th, .tabla-precios td { padding: 8px 10px; white-space: nowrap; }
.tabla-precios thead th { position: sticky; top: 0; z-index: 1; }
.tabla-precios .precio-celda { width: 104px; min-height: 38px; padding: 7px 9px;
                               text-align: right; }
.tabla-precios tfoot td, .tabla-precios tfoot th {
  border-top: 2px solid var(--border-strong); font-weight: 600; }
@media (max-width: 780px) {
  .tabla-precios .precio-celda { width: 88px; font-size: 13px; }
  .tabla-precios th, .tabla-precios td { padding: 6px 7px; }
}

/* ── La ficha que llena el alumno (/mi-ficha) ─────────────────────────
   Botones grandes en vez de desplegables: se llena con el pulgar, recién
   pagada la clase, y un desplegable por pregunta son nueve toques de más. */
.mf__grupo { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.mf__grupo legend { font-weight: 700; font-size: 16px; margin-bottom: 10px; padding: 0; }
.mf__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.mf__op { position: relative; cursor: pointer; }
.mf__op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mf__op span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
  font-size: 15px; font-weight: 500; transition: background var(--dur-fast) var(--ease);
}
.mf__op input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.mf__op input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── El tablero del campeonato por categorías ─────────────────────────────
   Pestañas que son los pasos, el resumen como lista de pasos con el
   siguiente marcado, las categorías como fichas y la llave en grilla: cada
   partido de la ronda siguiente ocupa las filas de los dos que lo alimentan,
   así se lee como un cuadro de papel sin dibujar líneas. */
.cm-tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--border);
  scrollbar-width: none; }
.cm-tabs a { padding: 10px 14px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--text-secondary);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cm-tabs a:hover { color: var(--text-primary); }
.cm-tabs a.on { color: var(--accent); border-bottom-color: var(--accent); }

.cm-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cm-pasos li { display: flex; align-items: center; gap: var(--space-3); padding: 12px 14px; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: var(--radio-6); background: var(--surface); }
.cm-pasos li.ahora { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.cm-pasos__marca { width: 24px; height: 24px; border-radius: var(--radio-full); flex: none; display: grid; place-items: center;
  border: 2px solid var(--border-strong); font-size: 13px; font-weight: 700; }
.cm-pasos li.ok .cm-pasos__marca { background: var(--success); border-color: var(--success); color: #fff; }
.cm-pasos li.ok b { color: var(--text-secondary); }

.cm-cats { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cm-cats a { padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radio-full); font-size: 13px;
  font-weight: 600; color: var(--text-secondary); text-decoration: none; background: var(--surface); }
.cm-cats a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.cm-cats a .mono { opacity: .75; margin-left: 4px; }

.cm-ins summary { cursor: pointer; display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.cm-ins summary .t-xs { flex-basis: 100%; }

.cm-prog td { vertical-align: top; }
.cm-prog tr.cm-hecho td { background: var(--surface-raised); }
.cm-res .input { max-width: 130px; padding-block: 5px; }
.cm-wo, .cm-mover { margin-top: 4px; }
.cm-wo summary, .cm-mover summary { cursor: pointer; color: var(--text-tertiary); }
.cm-wo[open] { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.cm-llave-scroll { overflow-x: auto; padding-bottom: var(--space-2); }
.cm-llave { display: grid; grid-template-columns: repeat(var(--cols), minmax(190px, 1fr));
  grid-template-rows: repeat(var(--filas), minmax(78px, auto)); column-gap: var(--space-6); row-gap: var(--space-2);
  min-width: calc(var(--cols) * 200px); }
.cm-llave__p { display: flex; align-items: center; position: relative; }
.cm-llave__p + .cm-llave__p::before { content: none; }
.cm-llave__caja { width: 100%; display: flex; flex-direction: column; border: 1px solid var(--border);
  border-radius: var(--radio-6); background: var(--surface); font-size: 13px; overflow: hidden; }
.cm-llave__caja > span { padding: 5px 10px; }
.cm-llave__caja > span + span { border-top: 1px solid var(--border); }
.cm-llave__cab { background: var(--surface-sunken); color: var(--text-tertiary); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; }
.cm-llave__caja .gana { font-weight: 700; color: var(--success); }
.cm-llave__res { color: var(--text-secondary); font-size: 12px; }
.cm-llave__p.hecho .cm-llave__caja { border-color: var(--border-strong); }
.cm-llave__p.tercero .cm-llave__caja { border-style: dashed; }
/* En el teléfono la tabla del grupo se queda con lo que ordena: jugados y
   ganados. Sets y games sólo desempatan, y con ellos el nombre no cabía. */
@media (max-width: 560px) { .cm-ancho { display: none; } }
/* El programa en la página pública: una tarjeta por partido, la hora grande
   a la izquierda, que es lo que el jugador busca. */
.cm-pub { display: flex; gap: var(--space-3); align-items: flex-start; padding: 12px 14px; }
.cm-pub__hora { font-size: 18px; font-weight: 700; min-width: 54px; }
.cm-pub.cm-hecho { background: var(--surface-raised); }