/* =============================================================
   trailrunning.es — Tema visual global del sitio (v1)
   Cargado en todo el frontend. Contiene:
   1) Tokens de marca compartidos
   2) Rediseño del selector/comparador (.tr-app), mismo lenguaje
      visual que las fichas (topográfico + naranja + tinta)
   3) Pulido global mínimo (selection, focus)
   Los estilos del app se prefijan con .tr-app para ganar a su
   <style> inline sin !important.
   ============================================================= */

:root{
  --trs-ink:#0F1826;
  --trs-ink-2:#1C2A40;
  --trs-orange:#E8501E;
  --trs-orange-2:#F1683A;
  --trs-ember:#9F310F;
  --trs-clay:#FFF1EB;
  --trs-stone:#F7F5F0;
  --trs-line:#E4E1D8;
  --trs-contours: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");
}

/* ---------- Pulido global mínimo ---------- */
::selection{background:var(--trs-clay);color:var(--trs-ember)}
body a:focus-visible,body button:focus-visible,body [role="button"]:focus-visible,body input:focus-visible,body select:focus-visible{outline:3px solid rgba(232,80,30,.55);outline-offset:2px;border-radius:6px}

/* ---------- Red de seguridad: animaciones de entrada de Elementor ----------
   Bug conocido: si el JS de Elementor no dispara el observer (p.ej. por
   404 de assets de Pro), los elementos con animación "entrance" se quedan
   con .elementor-invisible → visibility:hidden permanente y la sección
   aparece vacía. Forzamos visibilidad como salvaguarda; si el JS sí corre,
   la animación se reproduce igual porque actúa sobre opacity/transform. */
.elementor-invisible{visibility:visible!important}

/* =============================================================
   SELECTOR / COMPARADOR (.tr-app)
   ============================================================= */

/* ---------- Contenedor ---------- */
.tr-app .tr-box{border:1px solid var(--trs-line);border-radius:20px;background:#fff;box-shadow:0 22px 48px -36px rgba(15,24,38,.45);padding:clamp(20px,3vw,30px)}

/* ---------- Pestañas (el inline usa !important para el patrón
   subrayado; lo respetamos y solo refinamos lo no bloqueado) ---------- */
.tr-app .tr-tab{font-family:Montserrat,Inter,sans-serif;font-size:.92rem;letter-spacing:.01em}

/* ---------- Progreso del quiz ---------- */
.tr-app .tr-progress{height:10px;border-radius:999px;background:#EEEBE3;overflow:hidden;box-shadow:inset 0 1px 2px rgba(15,24,38,.08)}
.tr-app .tr-progress>*{background:linear-gradient(90deg,#F58A61,var(--trs-orange) 70%,#D64312);border-radius:inherit;transition:width .35s cubic-bezier(.22,.75,.25,1)}

/* ---------- Pregunta ---------- */
.tr-app .tr-q{font-family:Montserrat,Inter,sans-serif;letter-spacing:-.02em}
.tr-app .tr-sub{color:#657064}

/* ---------- Opciones (el inline del app ya las estiliza con
   !important: hover elevado y selected en degradado naranja.
   No duplicamos aquí para evitar conflictos de especificidad) ---------- */

/* ---------- Botones ---------- */
.tr-app .tr-btn{border-radius:10px;font-family:Montserrat,Inter,sans-serif;font-weight:700;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,opacity .16s ease}
.tr-app .tr-btn-primary{border:none;background:linear-gradient(135deg,var(--trs-orange-2),var(--trs-orange) 58%,#DD4614);color:#fff;box-shadow:0 10px 22px -10px rgba(232,80,30,.55)}
.tr-app .tr-btn-primary:hover:not(:disabled),.tr-app .tr-btn-primary:focus-visible{transform:translateY(-2px);box-shadow:0 15px 30px -10px rgba(232,80,30,.6)}
.tr-app .tr-btn-primary:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.tr-app .tr-btn-ghost{background:#fff;border:1.5px solid var(--trs-line);color:#4B5563}
.tr-app .tr-btn-ghost:hover,.tr-app .tr-btn-ghost:focus-visible{border-color:var(--trs-orange);color:var(--trs-ember)}

/* ---------- Filtros del comparador ---------- */
.tr-app .tr-filters select{border:1.5px solid var(--trs-line);border-radius:10px;background:#fff;padding:.6rem .75rem;font-weight:600;color:var(--trs-ink);transition:border-color .15s ease}
.tr-app .tr-filters select:hover,.tr-app .tr-filters select:focus{border-color:var(--trs-orange)}
.tr-app .tr-compare-actions{background:var(--trs-stone);border:1px solid var(--trs-line);border-radius:12px}

/* ---------- Tabla del comparador ---------- */
.tr-app .tr-table-wrap{border:1px solid var(--trs-line);border-radius:14px;overflow:auto}
.tr-app .tr-table{border-collapse:separate;border-spacing:0;width:100%;font-size:.94rem}
.tr-app .tr-table thead th{background:var(--trs-ink);color:#fff;font-family:Montserrat,Inter,sans-serif;font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;padding:.85rem .9rem;border-bottom:none;text-align:left;white-space:nowrap}
.tr-app .tr-table td,.tr-app .tr-table tbody th{padding:.85rem .9rem;border-bottom:1px solid var(--trs-line);vertical-align:middle}
.tr-app .tr-table tbody tr:nth-child(even) td{background:#FAF8F4}
.tr-app .tr-table tbody tr:hover td{background:var(--trs-clay)}
.tr-app .tr-table tr:last-child td{border-bottom:none}
.tr-app .tr-table a{color:var(--trs-ember);font-weight:800;text-decoration:none}
.tr-app .tr-table a:hover{text-decoration:underline}
.tr-app .tr-table input[type="checkbox"]{width:1.1rem;height:1.1rem;accent-color:var(--trs-orange);cursor:pointer}

/* ---------- Tarjetas de resultado ---------- */
.tr-app .tr-card{border:1px solid var(--trs-line);border-radius:18px;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tr-app .tr-card:hover{transform:translateY(-4px);border-color:#F0C9B6;box-shadow:0 18px 36px -22px rgba(15,24,38,.4)}
.tr-app .tr-card-media{background:linear-gradient(135deg,#0F1826,#1C2A40)}
.tr-app .tr-card-media img{transition:transform .35s ease}
.tr-app .tr-card:hover .tr-card-media img{transform:scale(1.04)}
.tr-app .tr-badge{background:linear-gradient(135deg,var(--trs-orange-2),var(--trs-orange));color:#fff;border-radius:999px;font-weight:800;box-shadow:0 6px 14px -6px rgba(232,80,30,.6)}
.tr-app .tr-specs{gap:8px}
.tr-app .tr-spec{background:var(--trs-stone);border:1px solid var(--trs-line);border-radius:10px}
.tr-app .tr-result-head{font-family:Montserrat,Inter,sans-serif;letter-spacing:-.02em}

/* ---------- Comparación en grid ---------- */
.tr-app .tr-compare-item{border:1px solid var(--trs-line);border-radius:16px;background:#fff;box-shadow:0 14px 30px -26px rgba(15,24,38,.45)}

/* ---------- Estados ---------- */
.tr-app .tr-empty{background:var(--trs-stone);border:1px dashed #CBD3C8;border-radius:14px;color:#657064}
.tr-app .tr-disclosure{background:var(--trs-stone);border:1px solid var(--trs-line);border-left:5px solid var(--trs-orange);border-radius:12px;color:#5A6472}
.tr-app .tr-loading{color:#657064}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .tr-app .tr-option,.tr-app .tr-btn,.tr-app .tr-card,.tr-app .tr-card-media img,.tr-app .tr-progress>*{transition:none}
}