/* La entrada al vestidor, con la marca del club.

   Antes: una "T" en un cuadro, fondo crema y una tarjeta blanca genérica; nada
   decía Tannery City. Ahora usa lo que el club ya tiene: el escudo y el
   wordmark dorados, el azul noche del uniforme, la Barlow Condensed de sus
   piezas y las líneas diagonales de su imagen de registro.

   Todo vive bajo .tc-entrada (la sección de entrada y las dos tarjetas que la
   acompañan: acceso pendiente y crear contraseña). Ninguna otra pantalla de
   TannerOS se entera. Va al final de los <link> porque polish.css fuerza la
   tarjeta blanca con !important. */

@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700.woff2?v=b279dc2ac629') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-weight:800;font-display:swap;src:url('/fonts/barlow-condensed-800.woff2?v=f4bfc905ffbb') format('woff2');}

.tc-entrada,.tc-cristal{
  --tc-noche:#06161b;
  --tc-azul:#0b2a33;
  --tc-oro:#c8ad62;
  --tc-oro-claro:#e6d295;
  --tc-crema:#f4efe2;
  --tc-tenue:rgba(244,239,226,.62);
  --tc-linea:rgba(200,173,98,.22);
}
.tc-entrada{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100dvh;
  display:grid!important;place-items:center;
  padding:max(28px,env(safe-area-inset-top)) 20px max(28px,env(safe-area-inset-bottom))!important;
  background:radial-gradient(1200px 700px at 18% 12%,#12414d 0%,transparent 60%),
             radial-gradient(900px 600px at 90% 100%,#0d3540 0%,transparent 55%),
             linear-gradient(160deg,var(--tc-azul) 0%,var(--tc-noche) 70%);
  color:var(--tc-crema);
}
/* Las diagonales de la imagen de registro, muy tenues. */
.tc-entrada::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);
  -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 75%);
          mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 75%);
}
/* El escudo, enorme y casi invisible, como marca de agua. */
.tc-entrada::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(70vw,720px);aspect-ratio:1;right:-14vw;bottom:-18vh;
  background:url('/brand/crest-gold.png?v=9d2b37223f00') center/contain no-repeat;opacity:.05;
}

.tc-escena{
  width:min(1040px,100%);
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(32px,6vw,88px);
}

/* ---- Marca ---- */
.tc-marca{display:grid;justify-items:start;gap:18px;animation:tc-sube .7s cubic-bezier(.2,.8,.2,1) both}
.tc-escudo{width:clamp(76px,9vw,112px);height:auto;filter:drop-shadow(0 18px 40px rgba(200,173,98,.25))}
.tc-wordmark{width:clamp(150px,17vw,210px);height:auto}
.tc-filete{width:120px;height:1px;background:linear-gradient(90deg,var(--tc-oro),transparent)}
.tc-titular{
  margin:0;font-family:'Barlow Condensed',Inter,system-ui,sans-serif!important;font-weight:800!important;
  font-size:clamp(44px,6.2vw,76px);line-height:.92;letter-spacing:.005em!important;text-transform:uppercase;color:var(--tc-crema);
}
.tc-titular span{color:var(--tc-oro)}
.tc-bajada{margin:0;max-width:34ch;color:var(--tc-tenue);font-size:16px;line-height:1.55}
.tc-hashtag{margin:4px 0 0;font-family:'Barlow Condensed',Inter,sans-serif;font-weight:700;letter-spacing:.14em;font-size:13px;color:var(--tc-oro)}

/* ---- Tarjeta de cristal ---- */
:is(.tc-entrada,.tc-cristal) .auth-card,
.tc-cristal{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border-radius:28px!important;color:var(--tc-crema);
}
:is(.tc-entrada,.tc-cristal) .auth-card{width:100%;max-width:440px;justify-self:end;padding:32px!important;animation:tc-sube .7s .08s cubic-bezier(.2,.8,.2,1) both}
:is(.tc-entrada,.tc-cristal) .auth-card h2,.tc-cristal h2{color:var(--tc-crema)!important;font-size:26px;margin:14px 0 6px}
:is(.tc-entrada,.tc-cristal) .auth-card .muted,.tc-cristal .muted{color:var(--tc-tenue)!important}
:is(.tc-entrada,.tc-cristal) .preview-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(200,173,98,.14)!important;color:var(--tc-oro-claro)!important;
  border:1px solid var(--tc-linea);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
}
:is(.tc-entrada,.tc-cristal) .preview-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.18)}

/* Selector Entrar / Tengo invitación, al estilo de un segmented control. */
:is(.tc-entrada,.tc-cristal) .tabs{background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.08);border-radius:14px!important;padding:4px!important}
:is(.tc-entrada,.tc-cristal) .tab{color:var(--tc-tenue)!important;background:transparent!important;border-radius:10px!important}
:is(.tc-entrada,.tc-cristal) .tab.active{background:rgba(255,255,255,.12)!important;color:var(--tc-crema)!important;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 6px 16px rgba(0,0,0,.25)!important}

/* Campos */
:is(.tc-entrada,.tc-cristal) label{color:rgba(244,239,226,.78)!important;font-weight:600}
:is(.tc-entrada,.tc-cristal) input{
  background:rgba(0,0,0,.28)!important;border:1px solid rgba(255,255,255,.12)!important;color:var(--tc-crema)!important;
  border-radius:14px!important;caret-color:var(--tc-oro);transition:border-color .2s,box-shadow .2s,background .2s;
}
:is(.tc-entrada,.tc-cristal) input::placeholder{color:rgba(244,239,226,.38)!important}
:is(.tc-entrada,.tc-cristal) input:focus{outline:none;border-color:var(--tc-oro)!important;box-shadow:0 0 0 4px rgba(200,173,98,.2)!important;background:rgba(0,0,0,.36)!important}
:is(.tc-entrada,.tc-cristal) input:-webkit-autofill{-webkit-text-fill-color:var(--tc-crema);-webkit-box-shadow:0 0 0 1000px #0f2a31 inset;transition:background-color 9999s}

/* Botón principal, dorado. */
:is(.tc-entrada,.tc-cristal) button.primary{
  background:linear-gradient(180deg,var(--tc-oro-claro),var(--tc-oro))!important;color:#10262c!important;
  border:0!important;border-radius:14px!important;font-weight:800!important;letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(200,173,98,.28),inset 0 1px 0 rgba(255,255,255,.5)!important;
  transition:transform .15s ease,box-shadow .2s ease,filter .2s;
}
:is(.tc-entrada,.tc-cristal) button.primary:hover{filter:brightness(1.04);box-shadow:0 16px 38px rgba(200,173,98,.36),inset 0 1px 0 rgba(255,255,255,.5)!important}
:is(.tc-entrada,.tc-cristal) button.primary:active{transform:scale(.985)}
:is(.tc-entrada,.tc-cristal) button.primary:disabled{filter:saturate(.6) brightness(.85)}
:is(.tc-entrada,.tc-cristal) button.secondary{background:rgba(255,255,255,.08)!important;color:var(--tc-crema)!important;border:1px solid rgba(255,255,255,.14)!important}
:is(.tc-entrada,.tc-cristal) .auth-link-button{color:var(--tc-oro-claro)!important}
:is(.tc-entrada,.tc-cristal) .auth-link-button:hover{color:#fff!important}

/* Mostrar / ocultar contraseña */
:is(.tc-entrada,.tc-cristal) .tc-campo{display:grid;gap:8px;margin:0 0 14px}
:is(.tc-entrada,.tc-cristal) .tc-campo label{display:block;margin:0}
:is(.tc-entrada,.tc-cristal) .tc-pass input{width:100%;box-sizing:border-box}
:is(.tc-entrada,.tc-cristal) .tc-pass{position:relative;display:block}
:is(.tc-entrada,.tc-cristal) .tc-pass input{padding-right:84px!important}
:is(.tc-entrada,.tc-cristal) .tc-ver{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  border:0;background:rgba(255,255,255,.08);color:var(--tc-tenue);border-radius:10px;
  padding:7px 10px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
}
:is(.tc-entrada,.tc-cristal) .tc-ver:hover{color:var(--tc-crema);background:rgba(255,255,255,.14)}

/* Mensajes legibles sobre fondo oscuro */
:is(.tc-entrada,.tc-cristal) .message{border-radius:12px!important;border:1px solid rgba(255,255,255,.12)!important;background:rgba(192,54,44,.16)!important;color:#ffd9d3!important}
:is(.tc-entrada,.tc-cristal) .message[data-type="success"]{background:rgba(74,222,128,.14)!important;color:#d5ffe4!important}

/* Las familias que caen aquí buscando la tienda tienen salida sin cuenta. */
.tc-familias{grid-column:1/-1;justify-self:center;width:100%;max-width:440px;margin:4px 0 0;padding:16px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--tc-tenue);font-size:14px;line-height:1.45}
.tc-familias p{margin:0 0 10px}
.tc-familias strong{color:var(--tc-crema)}
.tc-demo{grid-column:1/-1;justify-self:center;margin:2px 0 0;font-size:14px}
.tc-demo a{color:var(--tc-crema);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.tc-familias div{display:flex;flex-wrap:wrap;gap:8px}
.tc-familias a{flex:1 1 auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:99px;border:1px solid rgba(198,172,92,.45);color:var(--tc-oro);font-weight:700;text-decoration:none;white-space:nowrap}
.tc-familias a[data-familia="tienda"]{background:var(--tc-oro);border-color:var(--tc-oro);color:#0b2a33}
.tc-familias a:hover{border-color:var(--tc-oro)}
.tc-pie{grid-column:1/-1;justify-self:center;margin:8px 0 0;font-size:12px;color:rgba(244,239,226,.42);letter-spacing:.02em}

/* Acceso pendiente y crear contraseña: mismo cristal y el escudo arriba. */
.tc-cristal{max-width:440px;margin:0 auto;padding:32px!important}
.tc-cristal .brand-mark{background:transparent!important;box-shadow:none!important;color:transparent!important;width:56px;height:56px;
  background-image:url('/brand/crest-gold.png?v=9d2b37223f00')!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}
body:has(.tc-cristal:not(.hidden)){background:linear-gradient(160deg,#0b2a33,#06161b) fixed}

/* ---- Teléfono: todo en una columna, la marca compacta arriba ---- */
@media (max-width:860px){
  .tc-escena{grid-template-columns:1fr;gap:26px;justify-items:center}
  .tc-marca{justify-items:center;text-align:center;gap:12px}
  .tc-escudo{width:64px}
  .tc-wordmark{width:132px}
  .tc-filete{display:none}
  .tc-titular{font-size:40px}
  .tc-bajada{display:none}
  .tc-hashtag{display:none}
  .tc-entrada .auth-card{justify-self:center;padding:24px!important;border-radius:24px!important}
  .tc-entrada::after{width:110vw;right:-40vw;bottom:-10vh}
}

@keyframes tc-sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tc-marca,:is(.tc-entrada,.tc-cristal) .auth-card{animation:none}}
/* "Tengo invitación" no se parte en dos renglones en un teléfono angosto. */
:is(.tc-entrada,.tc-cristal) .tab{white-space:nowrap}
@media (max-width:420px){:is(.tc-entrada,.tc-cristal) .tab{font-size:14px!important;padding-left:8px!important;padding-right:8px!important}}
/* Al entrar, la app le pone .hidden a la sección. El display:grid!important de
   arriba le ganaba (mismo peso, este archivo carga al final) y la entrada se
   quedaba pegada encima del Inicio. */
.tc-entrada.hidden,.tc-cristal.hidden{display:none!important}

/* Club de la liga (?club=): su nombre ocupa el lugar del escudo y la firma. */
.tc-club-nombre{margin:0;font-family:'Barlow Condensed',Inter,sans-serif;font-weight:800;font-size:clamp(34px,5vw,52px);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--tc-oro)}
@media (max-width:720px){.tc-club-nombre{font-size:30px}}

/* ==== Las puertas del club (13/10/2026) ====
   "Más Apple, otro azulito de fondo, y un botón para Staff, Familias, Tienda
   y registrar un niño". Una sola columna centrada, azul marino profundo con
   luz arriba, tipografía del sistema y puertas grandes de un toque. El login
   de staff sube sólo cuando se toca Staff. */
/* Los "foquitos" se quedan (13/10/2026: "siento que eso hace que no se vea tan
   chido"): luces de fondo, diagonales, escudo de agua y brillo dorado, ahora
   sobre el azul nuevo. */
.tc-entrada{
  --tc-azul-hoy:#0a1d33;
  background:radial-gradient(900px 520px at 50% -6%,rgba(80,150,230,.42) 0%,transparent 62%),
             radial-gradient(700px 520px at 100% 100%,rgba(200,173,98,.14) 0%,transparent 60%),
             radial-gradient(120% 70% at 50% 0%,#1d4a78 0%,#0f2c4c 45%,#0a1d33 100%)!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
}
.tc-escudo{filter:drop-shadow(0 0 28px rgba(200,173,98,.45)) drop-shadow(0 14px 30px rgba(200,173,98,.25))!important}
.tc-puerta.principal{box-shadow:0 14px 40px rgba(80,150,230,.35)}
.tc-escena{grid-template-columns:1fr!important;justify-items:center;gap:22px!important;width:min(440px,100%)!important}
.tc-marca{justify-items:center!important;text-align:center;gap:10px!important}
.tc-escudo{width:64px!important}
.tc-wordmark{width:140px!important}
.tc-titular{
  margin-top:14px!important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif!important;
  font-weight:700!important;font-size:30px!important;line-height:1.15!important;letter-spacing:-.02em!important;text-transform:none!important;color:#fff!important;
}
.tc-bajada{display:block!important;margin:0!important;color:rgba(255,255,255,.62)!important;font-size:15px!important}

/* Las puertas */
.tc-puertas{display:grid!important;gap:12px;max-width:none!important;padding:0!important;margin:0!important;border:0!important;background:none!important}
.tc-puerta{
  display:flex!important;align-items:center;gap:14px;width:100%;min-height:76px;padding:14px 16px!important;
  border-radius:20px!important;border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.08)!important;color:#fff!important;text-decoration:none;text-align:left;
  font:inherit;cursor:pointer;white-space:normal!important;justify-content:flex-start!important;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .15s ease,background .2s ease;
}
.tc-puerta:hover{background:rgba(255,255,255,.12)!important}
.tc-puerta:active{transform:scale(.985)}
.tc-puerta:focus-visible,.tc-trabaja:focus-visible{outline:2px solid #64a8ff;outline-offset:3px}
.tc-puerta.principal{background:#fff!important;color:#0a1d33!important;border-color:#fff!important}
.tc-puerta.principal:hover{background:#f2f5f9!important}
.tc-icono{flex:0 0 46px;width:46px;height:46px;border-radius:13px;display:grid;place-items:center}
.tc-icono svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tc-icono-portal{background:#0a84ff;color:#fff}
.tc-icono-tienda{background:#c9a96e;color:#0a1d33}
.tc-icono-registro{background:#30d158;color:#0a1d33}
.tc-icono-costos{background:#ff9f0a;color:#0a1d33}
.tc-icono-staff{background:rgba(255,255,255,.14);color:#fff}
.tc-puerta-txt{flex:1;display:grid;gap:2px;min-width:0}
.tc-puerta-txt b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.tc-puerta-txt small{font-size:13.5px;opacity:.68;line-height:1.3}
.tc-chevron{opacity:.45;font-size:24px;line-height:1}
.tc-trabaja{
  display:flex!important;align-items:center;justify-content:space-between!important;gap:12px;margin-top:4px;padding:12px 16px!important;
  border-radius:16px!important;border:1px dashed rgba(255,255,255,.18)!important;background:none!important;
  color:rgba(255,255,255,.82)!important;text-decoration:none;white-space:normal!important;min-height:0!important;
}
.tc-trabaja span{display:grid;gap:1px}
.tc-trabaja b{font-size:14.5px;font-weight:600}
.tc-trabaja small{font-size:12.5px;opacity:.65}
.tc-trabaja:hover{border-color:rgba(255,255,255,.35)!important}

/* El login de staff: sólo cuando se toca Staff. */
.tc-entrada:not(.ver-staff) .auth-card{display:none!important}
.tc-entrada.ver-staff .tc-puertas{display:none!important}
.tc-entrada.ver-staff .tc-titular,.tc-entrada.ver-staff .tc-bajada{display:none!important}
:is(.tc-entrada,.tc-cristal) .auth-card{justify-self:center!important}
.tc-volver{border:0;background:none;color:#64a8ff;font:inherit;font-size:15px;font-weight:600;padding:0 0 6px;cursor:pointer}
/* Adiós al foquito verde: la etiqueta queda limpia. */
:is(.tc-entrada,.tc-cristal) .preview-pill::before{display:none!important}
:is(.tc-entrada,.tc-cristal) .preview-pill{background:rgba(255,255,255,.10)!important;color:rgba(255,255,255,.8)!important;border-color:rgba(255,255,255,.14)!important;letter-spacing:.06em}
:is(.tc-entrada,.tc-cristal) input:focus{border-color:#0a84ff!important;box-shadow:0 0 0 4px rgba(10,132,255,.25)!important}
:is(.tc-entrada,.tc-cristal) input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #13304f inset}
body:has(.tc-cristal:not(.hidden)){background:radial-gradient(120% 70% at 50% 0%,#1d4a78 0%,#0f2c4c 45%,#0a1d33 100%) fixed}
.tc-pie{color:rgba(255,255,255,.5)!important;font-size:13px!important}
.tc-pie .tc-hashtag{display:inline!important;font:inherit;letter-spacing:.04em;color:inherit}
.tc-pie a{color:rgba(255,255,255,.78);text-decoration:none;font-weight:600}
.tc-pie a:hover{color:#fff}
@media (max-width:860px){.tc-titular{font-size:28px!important}}
.tc-puerta-txt small,.tc-trabaja small{font-weight:400!important}
.tc-puerta-txt b,.tc-trabaja b{font-weight:600!important}

/* La orilla de arriba en iPhone (19/10/2026). iOS pinta la franja de la hora
   (y su difuminado) con el fondo de la PÁGINA, no con el de esta sección; la
   página era gris claro (#f6f6f4) y en la entrada se veía una niebla gris
   sobre el azul. Mientras la entrada está a la vista, la página entera es azul
   noche, igual que theme-color. */
html:has(.tc-entrada:not(.hidden)),
html:has(.tc-entrada:not(.hidden)) body{background:#0a1d33!important}
/* Y el escudo con aire bajo la hora, no pegado al borde de la franja. */
.tc-entrada{padding-top:calc(env(safe-area-inset-top,0px) + 24px)!important;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 24px)!important}