@import url("https://fonts.googleapis.com/css2?family=Alegreya:wght@500;600&family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap");
/* ============================================================================================
   PROPUESTA DE REDISEÑO (rama diseno/propuesta, 13/11/2026). No publicar sin acordar con Matías.
   Una capa encima de paleta.css + club.css + club-app.js: si se borra este archivo, todo vuelve a como está hoy.
   Idea: el mazo de 1909 es la imagen; papel claro, tinta índigo, salvia para actuar, oro solo de adorno.
   - Alegreya (títulos) + Alegreya Sans (todo lo demás): una familia de libro, de la época de las cartas.
   - Un solo momento «noche» (índigo) por pantalla: lo de ahora (la próxima clase).
   - Movimiento solo cuando la persona toca algo: botones que se hunden, plegables y menús que aparecen. < 250 ms.
   ============================================================================================ */
:root{
  --hx-fondo:#F8F6F1; --hx-hundido:#EFECE4; --hx-lado:#FBFAF6; --hx-tarjeta:#FFFFFF;
  --hx-borde:#E3DFD5; --hx-borde-fuerte:#CBC5B6; --hx-divisor:#EAE6DC;
  --hx-texto:#1D1C24; --hx-suave:#5B5862;
  --hx-acento:#2D7A52; --hx-acento-tinta:#1F6343; --hx-sobre-acento:#FFFFFF;
  --hx-titulo:#2E3470;                 /* índigo: etiquetas, días, «Members» (antes siena) */
  --hx-acento-fondo:#E8F0EA; --hx-acento-linea:#C5DCCD; --hx-acento-circulo:#E2EDE5; --hx-titulo-circulo:#E7E8F3;
  --hx-dorado:#A88330; --hx-dorado-tinta:#85672A;
  --hx-sombra-base:#1D1C24; --hx-pantalla:#14162E;
  /* nuevos */
  /* «noche»: el bloque de lo de ahora. En claro es lavanda con tinta índigo (un bloque oscuro en una página clara parecía
     una ventana del modo oscuro); en oscuro, índigo profundo. */
  --noche:#ECEBF7; --noche-2:#F8F7FC; --noche-tx:#1F2454; --noche-suave:#4C5079; --noche-oro:#7A5C1A;
  --noche-sombra:inset 0 0 0 1px #DDDBEE;
  --display:"Alegreya",Georgia,"Times New Roman",serif;
  --body:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-pag:32px; --t-sec:23px; --t-fila:17px; --t-tx:17px; --t-linea:15px; --mini:44px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --r-1:8px; --r-2:14px; --r-3:20px;
  --sombra-1:0 1px 2px rgb(29 28 36 / .06),0 6px 20px rgb(29 28 36 / .06);
}
@media screen{:root[data-tema=oscuro]{
  --hx-fondo:#11132A; --hx-hundido:#0C0E20; --hx-lado:#14172F; --hx-tarjeta:#191C38;
  --hx-borde:#2C3058; --hx-borde-fuerte:#3E4373; --hx-divisor:#23274A;
  --hx-texto:#EEEBF3; --hx-suave:#A9A7BE;
  --hx-acento:#7CCB9E; --hx-acento-tinta:#93D8B0; --hx-sobre-acento:#0D1A13;
  --hx-titulo:#E3CC92;
  --hx-acento-fondo:#18283A; --hx-acento-linea:#2C4A44; --hx-acento-circulo:#1C2E3A; --hx-titulo-circulo:#262A4D;
  --hx-dorado:#E0BE6E; --hx-dorado-tinta:#E8CA84;
  --noche:#262C66; --noche-2:#30377A; --noche-tx:#F4F2EC; --noche-suave:#C9CAE2; --noche-oro:#DDBE6C;
  --noche-sombra:0 1px 2px rgb(0 0 0 / .3),0 12px 32px rgb(0 0 0 / .28);
  --sombra-1:0 1px 2px rgb(0 0 0 / .4),0 8px 24px rgb(0 0 0 / .3);
}}

/* ---------- tipo ---------- */
html,body{font:400 var(--t-tx)/1.5 var(--body);font-feature-settings:"kern","liga";text-rendering:optimizeLegibility}
h1{font:500 var(--t-pag)/1.08 var(--display);color:var(--hx-texto);letter-spacing:-.005em}
h2.sec,.sec-t,.club h2{font:500 var(--t-sec)/1.2 var(--display);color:var(--hx-texto);margin-top:36px}
.sub{font-size:var(--t-linea);margin:6px 0 22px;max-width:46ch}
.t b,.banda .h,.prox .h,.tl-mes>summary b{font:500 var(--t-fila)/1.25 var(--body)}
.t span{font-size:var(--t-linea)}
.der,.pr,.cal b,.mini.fecha b{font-variant-numeric:tabular-nums lining-nums}
.pr{font:500 34px/1 var(--display)}
.cal small,.mini.fecha small{letter-spacing:.04em;font:700 12px var(--body)}
.cal b,.mini.fecha b{font-family:var(--display);font-weight:500}

/* ---------- lo de ahora: el único bloque índigo de la pantalla ---------- */
.banda,.prox{background:var(--noche);color:var(--noche-tx);border:0;border-radius:var(--r-3);margin:0;padding:20px;position:relative;overflow:hidden;
  box-shadow:var(--noche-sombra)}
.banda::after,.prox::after{content:"";position:absolute;right:-28px;top:-28px;width:120px;height:120px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--noche-oro) 35%,transparent);pointer-events:none}
.banda .k,.prox .k{color:var(--noche-oro);font-weight:500}
.banda .tu,.prox .tu,.banda .sub,.banda .pista,.prox .pista{color:var(--noche-suave)}
.banda .h,.prox .h{color:var(--noche-tx);font:500 20px/1.2 var(--display)}
.banda .cal,.prox .cal{background:var(--noche-2);color:var(--noche-tx)}
.banda .cal small,.prox .cal small{color:var(--noche-oro)}
.banda .btn,.prox .btn{background:var(--noche-tx);color:var(--noche)}
.banda .btn.sec,.prox .btn.sec{background:transparent;color:var(--noche-tx);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--noche-tx) 35%,transparent)}
.banda .ir,.prox .ir,.banda a:not(.btn),.prox a:not(.btn){color:var(--noche-tx)}
.banda svg,.prox svg{color:currentColor}

/* ---------- botones: se hunden al tocar ---------- */
.btn,.edit button{min-height:48px;border-radius:999px;font:500 17px var(--body);letter-spacing:.005em;
  transition:transform 160ms var(--ease-out),background-color 160ms ease,box-shadow 160ms ease;-webkit-tap-highlight-color:transparent;user-select:none}
.btn:active,.edit button:active,.ca-entrar:active,.ca-av:active{transform:scale(.97)}
.btn.sec{color:var(--hx-texto);box-shadow:inset 0 0 0 1px var(--hx-borde-fuerte)}
.btn.cerrado{box-shadow:inset 0 0 0 1px var(--hx-borde)}
.ir{color:var(--hx-acento-tinta);font-weight:500}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:color-mix(in srgb,var(--hx-acento) 88%,#000)}
  .btn.sec:hover{background:var(--hx-hover)}
  .banda .btn:hover,.prox .btn:hover{background:color-mix(in srgb,var(--noche-tx) 86%,var(--noche))}
}
:is(.btn,a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--hx-acento);outline-offset:3px;border-radius:10px}

/* ---------- filas: cartas de verdad, toque visible ---------- */
.fila summary,a.fila-a{padding:12px 0;min-height:56px;gap:16px;transition:background-color 120ms ease}
.fila summary:active,a.fila-a:active{background:var(--hx-hover)}
@media (hover:hover) and (pointer:fine){
  .fila summary,a.fila-a{margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:var(--r-1)}
  a.fila-a{border-bottom-color:transparent;box-shadow:0 1px 0 var(--hx-divisor)}
  .fila summary:hover,a.fila-a:hover{background:var(--hx-hover)}
}
.mini.carta{width:36px!important;height:62px!important;justify-self:center;border-radius:4px!important;background-size:cover!important;background-position:center!important;
  box-shadow:0 0 0 1px rgb(0 0 0 / .06),0 2px 6px rgb(29 28 36 / .18)}
.mini.verde{background:var(--hx-titulo-circulo)!important;border-radius:50%;color:var(--hx-titulo)!important}
.mini.verde>*{display:block!important}
.mini.verde svg{width:20px;height:20px}
.mini.fecha{border:1px solid var(--hx-borde);border-radius:12px}
.mem{color:var(--hx-titulo);font-weight:500}
.incl li::before{background:none;width:7px;height:7px;margin:9px 6px 0 5px;border-radius:50%;background:var(--hx-dorado)}

/* el plegable se abre con un fundido corto (respuesta al toque) */
details[open]>.dentro,.mas[open]>.incl{animation:hx-abre 200ms var(--ease-out)}
@keyframes hx-abre{from{opacity:0;transform:translateY(-4px)}}
.fl{transition:transform 200ms var(--ease-out)}

/* video y miniaturas */
.vid{border-radius:var(--r-2)}
.edit input,.edit textarea,.edit select{font:17px var(--body);border-radius:12px;background:var(--hx-tarjeta)}

/* ---------- la barra y el menú del Club (club-app.js) ---------- */
#ca-top,#ca-pie,.ca-menu,.ca-menu a,.ca-menu button,.ca-nl,#ca-como{font-family:var(--body)}
#ca-top{background:color-mix(in srgb,var(--hx-fondo) 90%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px)}
#ca-top .ca-logo{font:500 23px/1 var(--display);letter-spacing:-.01em}
#ca-top .ca-logo b{color:var(--hx-dorado);font:700 13px/1 var(--body);letter-spacing:.06em;vertical-align:3px;margin-left:2px}
#ca-top .ca-nav a{font-size:16px}
#ca-top .ca-nav a[aria-current=page]{border-bottom-color:var(--hx-texto)}
#ca-top .ca-app-nombre{color:var(--hx-suave);font-weight:500}
.ca-av{font-family:var(--body);background:var(--hx-titulo-circulo);color:var(--hx-titulo);border-color:transparent;transition:transform 160ms var(--ease-out)}
.ca-entrar{transition:transform 160ms var(--ease-out)}
.ca-menu{border-radius:var(--r-2);transform-origin:top right;transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
@starting-style{.ca-menu{opacity:0;transform:scale(.96)}}
@media (min-width:900px){
  body.ca-app #ca-top{background:var(--hx-lado);-webkit-backdrop-filter:none;backdrop-filter:none}
  body.ca-app #ca-top .ca-logo{font-size:24px}
  body.ca-app #ca-top .ca-nav a{font-size:16px;border-radius:10px}
  body.ca-app #ca-top .ca-nav a[aria-current=page]{color:var(--hx-texto);background:var(--hx-titulo-circulo)}
  body.ca-app #ca-top .ca-nav a[aria-current=page] svg{color:var(--hx-titulo)}
  /* Free class: sin recuadro marrón; un punto de oro dice «esto es lo de ahora» */
  body.ca-app #ca-top .ca-nav a:first-child,body.ca-app #ca-top .ca-nav a:first-child:hover{border:0;color:var(--hx-texto)}
  body.ca-app #ca-top .ca-nav a:first-child[aria-current=page]{color:var(--hx-texto);background:var(--hx-titulo-circulo)}
  body.ca-app #ca-top .ca-nav a:first-child svg{color:var(--hx-dorado)}
  body.ca-app #ca-top .ca-menu{transform-origin:bottom left}
}
.lk-a,#ca-top .ca-nav .lk,body.ca-app #ca-top .ca-nav .lk{color:var(--hx-suave)}
#ca-como{background:var(--noche);color:var(--noche-tx)}
#ca-como a{color:var(--noche)}

/* ---------- ajustes tras las capturas ---------- */
@media (max-width:899px){
  body.ca-app #ca-top .ca-logo{font:500 15px/1.3 var(--display);color:var(--hx-suave);letter-spacing:0}
  body.ca-app #ca-top .ca-logo b{font:700 11px var(--body);color:var(--hx-dorado);vertical-align:1px}
  body.ca-app #ca-top .ca-titulo{font:500 32px/1.1 var(--display);color:var(--hx-texto);letter-spacing:-.005em}
  body.ca-app #ca-top .ca-titulo.largo{font-size:26px}
}
/* sin mayúsculas sostenidas: los grupos del menú en tipo normal */
body.ca-app #ca-top .ca-nav a.ca-grupo-b,#ca-top .ca-nav .ca-grupo{font:500 15px/1.4 var(--body);letter-spacing:0;text-transform:none;color:var(--hx-suave)}
#ca-pie,#ca-pie *,footer,footer *{font-family:var(--body)}
#ca-pie .ca-cred{font-size:14px}
.banda::after,.prox::after{display:none}
.banda,.prox{background-image:radial-gradient(120% 140% at 100% 0%,var(--noche-2) 0%,transparent 55%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;transition-duration:1ms!important}
  .btn:active,.edit button:active,.ca-entrar:active,.ca-av:active{transform:none}
}
#ca-cred,#ca-cred *{font-family:var(--body)!important}
@media not ((hover:hover) and (pointer:fine)){a.fila-a,.fila summary{border-radius:0}}
/* el cajón del celu: con el desenfoque de la barra de arriba, el menú (fixed) quedaba atrapado adentro de ella; abierto, sin desenfoque.
   Entra deslizándose desde la izquierda (curva de cajón) y el velo aparece suave. */
body.ca-abierto #ca-top{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--hx-fondo)}
@media (max-width:899px){
  body.ca-app.ca-abierto #ca-top .ca-nav{transition:transform 300ms var(--ease-drawer)}
  @starting-style{body.ca-app.ca-abierto #ca-top .ca-nav{transform:translateX(-100%)}}
  body.ca-app.ca-abierto #ca-velo{transition:opacity 240ms ease}
  @starting-style{body.ca-app.ca-abierto #ca-velo{opacity:0}}
}
@media (prefers-reduced-motion:reduce){body.ca-app.ca-abierto #ca-top .ca-nav,body.ca-app.ca-abierto #ca-velo{transition:none}}

/* el nombre del nivel sobre la banda índigo (My journey): antes quedaba índigo sobre índigo */
.banda .niv{color:var(--noche-tx)}
/* sin imagen (o mientras carga), la carta chica es un hueco suave, no un rectángulo negro */
.mini.carta{background-color:var(--hx-hundido)}