/* =============================================================
   trailrunning.es — tr-ui.css · Sistema de diseño (v1)
   Etapa 2, fase 0-1 del roadmap. Fuente única de verdad de
   color, tipografía, espacio, radios, sombras y componentes.
   Se carga en todo el frontend DESPUÉS de tr-site-theme.css
   para poder reasignar los tokens antiguos (ver bloque 9).
   Regla: ningún módulo nuevo escribe un color literal.
   ============================================================= */

/* 1) Tokens =================================================== */
:root{
  /* Tinta */
  --tr-ink:#0a2f57;
  --tr-ink-2:#0a2f57;
  --tr-ink-3:#243650;
  /* Texto */
  --tr-text:#0a2f57;
  --tr-text-muted:#5b6474;
  --tr-text-soft:#5b6474;
  --tr-text-faint:#98a2b3;
  --tr-text-on-ink:#ffffff;
  /* Naranja de marca */
  --tr-brand:#f37f0a;
  --tr-brand-hover:#b45a00;
  --tr-brand-active:#8f4a00;
  --tr-brand-400:#f9a04a;
  --tr-brand-300:#f9a64f;
  --tr-brand-200:#fcc98f;
  --tr-brand-100:#fde2c2;
  --tr-brand-50:#fff4e5;
  --tr-brand-25:#fffaf3;
  /* Superficies y líneas */
  --tr-surface:#ffffff;
  --tr-surface-2:#f7f5f0;
  --tr-surface-3:#f0ede6;
  --tr-line:#e4e1d8;
  --tr-line-strong:#c7d0dd;
  /* Estados */
  --tr-ok:#1f7a4d;
  --tr-ok-ink:#1f5e3d;
  --tr-ok-bg:#e7f6ee;
  --tr-ok-line:#bfe3cf;
  --tr-warn:#8a5a0b;
  --tr-warn-bg:#fff8e6;
  --tr-warn-line:#f3d9a4;
  --tr-danger:#b42318;
  --tr-danger-bg:#fef3f2;
  --tr-danger-line:#fecdca;
  --tr-star:#e8a33d;
  --tr-star-off:#d8d3c8;

  /* Tipografía */
  --tr-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--tr-font-head:Montserrat,system-ui,sans-serif;
  --tr-fs-3xs:.75rem;
  --tr-fs-2xs:.8rem;
  --tr-fs-xs:.82rem;
  --tr-fs-sm:.88rem;
  --tr-fs-md:1rem;
  --tr-fs-lg:1.12rem;
  --tr-fs-xl:1.3rem;
  --tr-fs-2xl:1.6rem;
  --tr-fs-3xl:clamp(1.8rem,4vw,2.4rem);
  --tr-fw-nor:400;
  --tr-fw-med:600;
  --tr-fw-bold:700;
  --tr-fw-black:800;
  --tr-lh-tight:1.15;
  --tr-lh:1.5;

  /* Espacio (base 4) */
  --tr-s1:4px; --tr-s2:8px; --tr-s3:12px; --tr-s4:16px;
  --tr-s5:20px; --tr-s6:24px; --tr-s8:32px; --tr-s10:40px; --tr-s12:48px;

  /* Radios */
  --tr-r-xs:8px; --tr-r-sm:8px; --tr-r-md:12px;
  --tr-r-lg:12px; --tr-r-xl:12px; --tr-r-pill:999px;

  /* Sombras y foco */
  --tr-sh-sm:none;
  --tr-sh-md:none;
  --tr-sh-lg:0 20px 38px -24px rgba(15,24,38,.45);
  --tr-ring:0 0 0 3px rgba(243,127,10,.18);
  --tr-focus:2px solid var(--tr-brand);

  /* Medidas */
  --tr-tap:44px;
  --tr-wrap:1200px;
}

/* 2) Base compartida ========================================== */
.tr-u,.tr-u *{box-sizing:border-box}
:where(.tr-u) :focus-visible,
:where(.tr-btn,.tr-chip,.tr-starinput label):focus-visible{outline:var(--tr-focus);outline-offset:2px}

/* 3) Iconos SVG (sustituyen a los emojis) ====================== */
.tr-i{width:1em;height:1em;flex:0 0 auto;display:inline-block;vertical-align:-.125em;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tr-i--fill{fill:currentColor;stroke:none}
.tr-i--14{width:14px;height:14px}
.tr-i--16{width:16px;height:16px}
.tr-i--18{width:18px;height:18px}
.tr-i--22{width:22px;height:22px}
.tr-i--28{width:28px;height:28px}

/* 4) Botones ================================================== */
.tr-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--tr-s2);
  min-height:var(--tr-tap);padding:0 var(--tr-s4);border:1px solid var(--tr-line);
  border-radius:var(--tr-r-pill);background:var(--tr-surface);color:var(--tr-text-muted);
  font:var(--tr-fw-black) var(--tr-fs-sm)/1 var(--tr-font);text-decoration:none;
  cursor:pointer;text-transform:none;letter-spacing:0;transition:border-color .15s,color .15s,background .15s}
.tr-btn:hover{border-color:var(--tr-brand);color:var(--tr-brand)}
.tr-btn[disabled],.tr-btn.is-disabled{opacity:.55;pointer-events:none}
.tr-btn--primary{background:var(--tr-brand);border-color:var(--tr-brand);color:var(--tr-text-on-ink)}
.tr-btn--primary:hover{background:var(--tr-brand-hover);border-color:var(--tr-brand-hover);color:var(--tr-text-on-ink)}
.tr-btn--ink{background:var(--tr-ink);border-color:var(--tr-ink);color:var(--tr-text-on-ink)}
.tr-btn--ink:hover{background:var(--tr-ink-2);border-color:var(--tr-ink-2);color:var(--tr-text-on-ink)}
.tr-btn--quiet{border-color:transparent;background:transparent}
.tr-btn--sm{min-height:36px;padding:0 var(--tr-s3);font-size:var(--tr-fs-xs)}
.tr-btn--block{width:100%}
.tr-btn.is-on{color:var(--tr-brand);border-color:var(--tr-brand)}
.tr-btn.is-on .tr-i{fill:currentColor}

/* 5) Chips, etiquetas, insignias ============================== */
.tr-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid var(--tr-line);border-radius:var(--tr-r-pill);background:var(--tr-surface-2);
  color:var(--tr-text-muted);font-size:var(--tr-fs-2xs);font-weight:var(--tr-fw-bold);line-height:1.4}
.tr-chip--brand{background:var(--tr-brand-50);border-color:var(--tr-brand-100);color:var(--tr-brand-active)}
.tr-chip--ok{background:var(--tr-ok-bg);border-color:var(--tr-ok-line);color:var(--tr-ok-ink)}
.tr-chip--warn{background:var(--tr-warn-bg);border-color:var(--tr-warn-line);color:var(--tr-warn)}
.tr-chip--danger{background:var(--tr-danger-bg);border-color:var(--tr-danger-line);color:var(--tr-danger)}
.tr-chip--ink{background:var(--tr-ink);border-color:var(--tr-ink);color:var(--tr-text-on-ink)}

/* 6) Tarjetas y estados vacíos ================================ */
.tr-card{background:var(--tr-surface);border:1px solid var(--tr-line);
  border-radius:var(--tr-r-md);padding:var(--tr-s5);box-shadow:var(--tr-sh-md)}
.tr-card--flat{box-shadow:none}
.tr-card__head{display:flex;align-items:center;gap:var(--tr-s2);margin:0 0 var(--tr-s3);
  font-size:var(--tr-fs-sm);font-weight:var(--tr-fw-black);color:var(--tr-ink);
  text-transform:uppercase;letter-spacing:.06em}
.tr-empty{border:1px dashed var(--tr-line-strong);border-radius:var(--tr-r-md);
  padding:var(--tr-s5);text-align:center;color:var(--tr-text-soft);font-size:var(--tr-fs-sm)}

/* 7) Estrellas (reseñas) ====================================== */
.tr-stars{display:inline-flex;align-items:center;gap:2px;color:var(--tr-star)}
.tr-stars .tr-i{width:1.05em;height:1.05em;fill:currentColor;stroke:none}
.tr-stars .is-off{color:var(--tr-star-off)}
.tr-stars__num{margin-left:6px;color:var(--tr-ink);font-weight:var(--tr-fw-black);font-size:var(--tr-fs-sm)}
.tr-stars--lg{font-size:1.25rem}
/* entrada: radios accesibles, sin JS obligatorio */
.tr-starinput{display:inline-flex;flex-direction:row-reverse;gap:2px}
.tr-starinput input{position:absolute;opacity:0;width:1px;height:1px}
.tr-starinput label{cursor:pointer;color:var(--tr-star-off);line-height:1;padding:2px}
.tr-starinput label .tr-i{width:22px;height:22px;fill:currentColor;stroke:none}
.tr-starinput input:checked ~ label,
.tr-starinput label:hover,.tr-starinput label:hover ~ label{color:var(--tr-star)}

/* 8) Barra de valoración por aspecto ========================== */
.tr-meter{display:grid;grid-template-columns:minmax(96px,1fr) 1fr auto;align-items:center;
  gap:var(--tr-s3);font-size:var(--tr-fs-xs);color:var(--tr-text-muted)}
.tr-meter__track{height:8px;border-radius:var(--tr-r-pill);background:var(--tr-surface-3);overflow:hidden}
.tr-meter__fill{display:block;height:100%;border-radius:inherit;background:var(--tr-brand)}
.tr-meter__val{font-weight:var(--tr-fw-black);color:var(--tr-ink);font-variant-numeric:tabular-nums}

/* 9) Puente con los tokens antiguos ===========================
   Mientras se migran los módulos, los tres juegos heredados
   (--trs-*, --trf-*, --trr-*) apuntan ya a los tokens nuevos,
   así un cambio de marca se hace en un solo sitio.
   ============================================================= */
:root{
  --trs-ink:var(--tr-ink); --trs-ink-2:var(--tr-ink-2); --trs-orange:var(--tr-brand);
  --trs-orange-2:var(--tr-brand-400); --trs-ember:var(--tr-brand-active);
  --trs-clay:var(--tr-brand-50); --trs-stone:var(--tr-surface-2); --trs-line:var(--tr-line);
  --trf-ink:var(--tr-ink); --trf-ink-2:var(--tr-ink-2); --trf-orange:var(--tr-brand);
  --trf-orange-2:var(--tr-brand-400); --trf-ember:var(--tr-brand-active);
  --trf-clay:var(--tr-brand-50); --trf-stone:var(--tr-surface-2); --trf-line:var(--tr-line);
}
.tr-races{
  --trr-ink:var(--tr-ink); --trr-ink-soft:var(--tr-ink-2);
  --trr-orange:var(--tr-brand); --trr-orange-dark:var(--tr-brand-active);
  --trr-stone:var(--tr-surface-2); --trr-line:var(--tr-line);
  --trr-clay:var(--tr-brand-50); --trr-white:var(--tr-surface);
}

/* 10) Utilidades mínimas ====================================== */
.tr-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tr-row{display:flex;align-items:center;gap:var(--tr-s2);flex-wrap:wrap}
.tr-muted{color:var(--tr-text-soft)}
.tr-num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.tr-u *{transition:none!important;animation:none!important}}


/* 11) Coherencia global (08-10-2026). Una sola escala para todo el sitio: ver claude/auditoria-coherencia-08-10.md */
html body{font-family:var(--tr-font)}
:where(h1,h2,h3,h4,h5,h6){font-family:var(--tr-font-head);color:var(--tr-ink)}
html body:not(#tr0):not(#tr1) h1:not(.tr-h1-free){font-family:var(--tr-font-head)!important;font-size:clamp(2rem,1.55rem + 1.6vw,2.75rem)!important;font-weight:800!important;line-height:1.1!important;letter-spacing:-.01em!important}
html body :is(button,input[type=submit],input[type=button],.button,.elementor-button,[class*='-btn']:not([class*='-btns']),.tr-btn){font-family:var(--tr-font-head);letter-spacing:0;text-transform:none}
html body .elementor-button{border-radius:8px;text-transform:none;font-weight:700}
html body .elementor-location-header .elementor-button{border-radius:8px!important;text-transform:none!important;font-weight:700!important}
html body :is(input[type=text],input[type=email],input[type=search],input[type=password],input[type=number],input[type=url],input[type=tel],select,textarea){border-radius:8px;font-family:var(--tr-font)}
html body :is(input[type=text],input[type=email],input[type=search],input[type=password],input[type=number],input[type=url],input[type=tel],select){min-height:44px}
/* 11b) Botones y chips: una sola medida */
html body:not(#tr0) :is(.trc-btn,.trf-btn,.trd-button,.trs-btn,.trt-btn,.trp-btn,.trm-btn,.tr-rep-open,.tr-hb-buy,.tr-shop-button,.tr-land-btn,.tro-btn,.tr-afiliado-button,.tr-btn,a.btn,button.btn,#bbpress-forums button.submit,.elementor-button):not(.sm):not(.tr-btn--sm){min-height:44px;padding-top:0;padding-bottom:0;font-size:.9375rem;font-weight:700;border-radius:8px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px}
html body:not(#tr0) :is(.tr-btn--sm,.trs-btn.sm,.trc-save){min-height:36px;font-size:.875rem;font-weight:700;border-radius:8px}
html body:not(#tr0) :is(.trc-chip,.trm-chip,.tr-chip){border-radius:999px;min-height:34px;font-size:.85rem}
/* 11c) Cabecera de seccion unica: banda azul a sangre con curvas de nivel, contenido alineado al contenedor de 1200 */
html body{overflow-x:clip}
:root{--tr-band-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='300' viewBox='0 0 560 300'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M0 42 C 90 12, 150 72, 240 46 S 420 12, 560 54'/%3E%3Cpath d='M0 98 C 80 68, 170 126, 260 100 S 430 64, 560 110'/%3E%3Cpath d='M0 154 C 95 122, 165 182, 250 154 S 440 120, 560 164'/%3E%3Cpath d='M0 210 C 85 178, 175 238, 265 210 S 430 174, 560 220'/%3E%3Cpath d='M0 264 C 95 234, 160 290, 255 262 S 445 228, 560 272'/%3E%3C/g%3E%3C/svg%3E");--tr-band-pad:max(20px,calc(50vw - 600px))}
html body:not(#tr0) :is(.trc-hero,.trx-hero,.tro-hero,.tr-hero-top,.trf-hero,.trp-hero,.tr-land-hero,.site-main > .page-header){width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;box-sizing:border-box;background-color:#0a2f57;background-image:var(--tr-band-img);background-repeat:repeat;background-size:auto;color:#fff;box-shadow:none;border:0}
html body:not(#tr0) :is(.trc-hero,.trx-hero,.tro-hero,.tr-hero-top,.site-main > .page-header){padding:48px var(--tr-band-pad) 40px}
html body:not(#tr0) :is(.trf-hero,.trp-hero,.tr-land-hero){padding:48px 0 40px}
html body:not(#tr0) :is(.trf-wrap,.trp-wrap,.tr-land-hero-in){max-width:1240px;padding-left:20px;padding-right:20px;box-sizing:border-box}html body:not(#tr0) :is(.trf-hero,.trp-hero,.tr-land-hero) > :is(.trf-wrap,.trp-wrap,.tr-land-hero-in){padding-top:0;padding-bottom:0}
html body:not(#tr0) .site-main > .page-header .entry-title{color:#fff;margin:0;max-width:1200px}
html body:is(.page-id-360,.page-id-361) .site-main > .page-header{display:none}
/* Plantillas del tema: contenedor comun y columna de lectura en legales */
html body:not(.elementor-page) main.site-main:has(> .page-header){max-width:1240px;margin-inline:auto;padding-inline:20px;box-sizing:border-box}
html body:not(.elementor-page) main.site-main:has(> .page-header) > .page-content{padding-top:32px;padding-bottom:56px}
html body:is(.page-id-358,.page-id-403,.page-id-404,.page-id-557,.page-id-359) main.site-main > .page-content{max-width:760px;margin-inline:auto;font-size:1rem;line-height:1.65}
html body:is(.page-id-358,.page-id-403,.page-id-404,.page-id-557,.page-id-359) main.site-main > .page-content :is(h2){margin:40px 0 12px}
html body:is(.page-id-358,.page-id-403,.page-id-404,.page-id-557,.page-id-359) main.site-main > .page-content :is(h3){margin:28px 0 8px}
/* 11d) Contenedor unico: 1200 de contenido + 20 de margen */
html body.single-zapatilla:not(#tr0) main.site-main{max-width:1240px;padding-left:20px;padding-right:20px;box-sizing:border-box;margin-left:auto;margin-right:auto}
html body:not(#tr0) .elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px}
html body:not(#tr0) .e-con{--content-width:1200px}
/* 11e) Foro: sin el formulario de usuario y contrasena de bbPress (el acceso es por email desde Comunidad) y avisos con un solo estilo */
html body:not(.logged-in) #bbpress-forums :is(.bbp-no-topic,.bbp-no-reply),html body:not(.logged-in) #bbpress-forums form.bbp-login-form{display:none!important}
html body:not(#tr0) #bbpress-forums .bbp-template-notice{background:var(--tr-surface-2);border:1px solid var(--tr-line);border-radius:12px;color:var(--tr-ink);padding:14px 16px;margin:0 0 12px;font-size:.9375rem}
html body:not(#tr0) #bbpress-forums .bbp-template-notice :is(p,li,ul){color:inherit;margin:0;padding:0;list-style:none;font-size:inherit}
html body:not(#tr0) #bbpress-forums .bbp-template-notice a{color:var(--tr-blue,#094f99);font-weight:700}
/* 11f) Compartir: chip unico */
html body:not(#tr0) .trs-share :is(a,button){display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--tr-line);border-radius:999px;background:#fff!important;color:var(--tr-ink)!important;font-weight:700;font-size:.875rem;text-decoration:none;box-shadow:none}
html body:not(#tr0) .trs-share :is(a,button):hover{border-color:var(--tr-ink)!important;color:var(--tr-ink)!important;background:#fff!important}
/* legal-band: el titulo alineado con la columna de lectura */
html body:not(#tr0):is(.page-id-358,.page-id-403,.page-id-404,.page-id-557,.page-id-359) .site-main > .page-header{padding-left:max(20px,calc(50vw - 380px));padding-right:max(20px,calc(50vw - 380px))}
/* 11g) Paginas de Elementor que alojan un modulo: la banda pegada a la cabecera y el modulo al ancho comun */
html body:not(#tr0) :is(.elementor-section,.e-con,.elementor-widget-wrap):has(:is(.tr-hero-top,.trc-hero,.trx-hero,.tro-hero,.trf-hero,.trp-hero,.tr-land-hero)){padding-top:0!important}
html body:not(#tr0) .tr-app{max-width:1200px}
html body:not(#tr0) .tr-hero-top{padding-bottom:56px}
/* 11h) Selector: las tarjetas de la cabecera no se recortan */
html body:not(#tr0):not(#tr1) .tr-hero-top{padding-bottom:72px;overflow:hidden}
html body:not(#tr0) .tr-hero-top .tr-hero-shoes{min-height:230px}
@media(max-width:700px){html body:not(#tr0):not(#tr1) .tr-hero-top{padding-bottom:36px}html body:not(#tr0) .tr-hero-top .tr-hero-shoes{min-height:190px}}