/* RunningValencia – conversor de tallas v1.0.0 (misma estética que la calculadora: negro + naranja) */

/* ── Tokens y reset local ──────────────────────────────────── */
.rv-sizes, .rv-sizes-ref {
  --rv-accent: #F26722;
  --rv-accent-dark: #D14E0E;
  --rv-accent-tint: #FDEDE3;
  --rv-ink: #191713;
  --rv-ink-soft: #5C554B;
  --rv-muted: #8A837A;
  --rv-border: #E7E2D8;
  --rv-border-input: #DDD7CB;
  --rv-group-bg: #FAF8F4;
  --rv-surface: #FFFFFF;
  --rv-radius: 18px;
  --rv-radius-md: 14px;
  --rv-radius-sm: 10px;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  color: var(--rv-ink);
  width: 100%;
  line-height: 1.45;
}
.rv-sizes *, .rv-sizes *::before, .rv-sizes *::after,
.rv-sizes-ref *, .rv-sizes-ref *::before, .rv-sizes-ref *::after { box-sizing: border-box; }
.rv-sizes p, .rv-sizes h2, .rv-sizes h3 { margin: 0; }
.rv-sizes button { font-family: inherit; cursor: pointer; }
.rv-sizes input, .rv-sizes select { font-family: inherit; }
.rv-sizes [hidden] { display: none !important; }

/* ── Contenedor: acota el ancho y centra. La doble clase (.rvt-scope.rvt-scope)
   sube la especificidad para ganar a reglas del tema tipo ".entry-content div"
   que anularían un max-width de una sola clase y estirarían la tarjeta. ── */
.rvt-scope.rvt-scope { max-width: 1060px; margin-left: auto; margin-right: auto; }
.rvt-scope, .rvt-scope * { min-width: 0; }
/* El texto largo (pie, intro, notas) SIEMPRE se ajusta al ancho, nunca se corta. */
.rv-sizes__foot, .rv-sizes__hint,
.rv-sizes-ref__title, .rv-sizes-ref__intro, .rv-sizes-ref__note {
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* ── Tarjeta ───────────────────────────────────────────────── */
.rv-sizes__card {
  background: var(--rv-surface);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(25,20,12,.06), 0 20px 48px -18px rgba(25,20,12,.25);
  max-width: 100%;
}
.rv-sizes__card::before { content: ''; display: block; height: 4px; background: var(--rv-accent); }

/* ── Cabecera oscura ───────────────────────────────────────── */
.rv-sizes__head { background: var(--rv-ink); padding: 18px 28px 16px; }
.rv-sizes__brandrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.rv-sizes__brand { display: flex; flex-direction: column; gap: 2px; }
.rv-sizes__wordmark {
  color: #fff; font-weight: 800; font-size: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
.rv-sizes__wordmark em { color: var(--rv-accent); font-style: italic; font-weight: 800; }
.rv-sizes__tagline {
  color: var(--rv-muted); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}

/* Toggle Hombre/Mujer (pill) */
.rv-sizes__gender { display: inline-flex; background: #2A2722; padding: 3px; border-radius: 999px; }
.rv-sizes__g {
  border: 0; background: transparent; color: #B8B0A2;
  font-size: 12.5px; font-weight: 700; padding: 6px 16px;
  border-radius: 999px; transition: background .12s, color .12s;
}
.rv-sizes__g:hover { color: #fff; }
.rv-sizes__g.is-active { background: var(--rv-accent); color: #fff; }

/* Pestañas */
.rv-sizes__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rv-sizes__tab {
  background: transparent; border: 1.5px solid #3A362F; color: #B8B0A2;
  font-size: 13.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
  transition: border-color .12s, background .12s, color .12s;
}
.rv-sizes__tab:hover { border-color: #5C554B; color: #fff; }
.rv-sizes__tab.is-active { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }

/* ── Cuerpo / paneles ──────────────────────────────────────── */
.rv-sizes__panel { display: none; }
.rv-sizes__panel.is-active { display: block; }
.rv-sizes__pad { padding: 24px 28px; }

.rv-sizes__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
.rv-sizes__group {
  border: 1px solid #ECE7DC; border-radius: var(--rv-radius-md);
  background: var(--rv-group-bg); padding: 18px; min-width: 0;
}
.rv-sizes__glabel {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--rv-ink-soft); margin-bottom: 12px;
}
.rv-sizes__gnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--rv-accent); color: #fff;
  font-size: 11.5px; font-weight: 800; flex-shrink: 0;
}

/* Inputs */
.rv-sizes input[type="number"],
.rv-sizes select {
  appearance: auto; width: 100%;
  border: 1.5px solid var(--rv-border-input); border-radius: var(--rv-radius-sm);
  background: var(--rv-surface); color: var(--rv-ink);
  font-size: 15px; padding: 9px 10px; max-width: 100%;
}
.rv-sizes input:focus, .rv-sizes select:focus {
  border-color: var(--rv-accent); box-shadow: 0 0 0 3px rgba(242,103,34,.16); outline: none;
}
.rv-sizes select:disabled { opacity: .55; cursor: not-allowed; }

/* Combobox de marca */
.rv-sizes__combo { position: relative; }
.rv-sizes__combo input { width: 100%; padding-right: 34px; }
.rv-sizes__comboclear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; color: var(--rv-muted);
}
.rv-sizes__comboclear:hover { color: var(--rv-ink); }
.rv-sizes__list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--rv-surface); border: 1.5px solid var(--rv-border-input);
  border-radius: var(--rv-radius-sm); box-shadow: 0 12px 28px -10px rgba(25,20,12,.35);
}
.rv-sizes__list li { padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.rv-sizes__list li:hover, .rv-sizes__list li.is-hi { background: var(--rv-accent-tint); }

/* ── Banda de resultado ────────────────────────────────────── */
.rv-sizes__band { background: var(--rv-ink); padding: 22px 28px; min-height: 64px; }
.rv-sizes__band-empty {
  display: flex; align-items: center; gap: 10px; color: var(--rv-muted); font-size: 14px;
}
.rv-sizes__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rv-accent); flex-shrink: 0; }
.rv-sizes__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.rv-sizes__stat { display: flex; flex-direction: column; gap: 3px; }
.rv-sizes__stat-l {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rv-muted);
}
.rv-sizes__stat-v { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1; }
.rv-sizes__stat-v.is-accent { color: var(--rv-accent); }
.rv-sizes__stat-s { font-size: 13px; color: var(--rv-muted); }

/* Fila del equivalente (otro género / estándar) */
.rv-sizes__equiv {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid #3A362F;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.rv-sizes__equiv-l {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--rv-muted);
}
.rv-sizes__equiv-v { font-size: 15px; color: #fff; font-weight: 600; }
.rv-sizes__equiv-v strong { color: var(--rv-accent); font-weight: 800; }

/* ── Bloque de comparación por marca ───────────────────────── */
.rv-sizes__cmp { padding: 22px 28px 24px; }
.rv-sizes__cmp h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.rv-sizes__hint { font-size: 13px; color: var(--rv-muted); margin-bottom: 14px; }
.rv-sizes__cmpbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.rv-sizes__cmpbar label {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rv-ink-soft);
}
.rv-sizes__seg { display: inline-flex; border: 1.5px solid var(--rv-border-input); border-radius: 999px; overflow: hidden; }
.rv-sizes__seg button {
  border: 0; background: var(--rv-surface); color: var(--rv-ink-soft);
  font-size: 12.5px; font-weight: 700; padding: 6px 14px;
}
.rv-sizes__seg button + button { border-left: 1.5px solid var(--rv-border-input); }
.rv-sizes__seg button.is-active { background: var(--rv-accent); color: #fff; }

.rv-sizes__brandchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rv-sizes__bchip {
  padding: 6px 12px; border: 1.5px solid var(--rv-border-input); border-radius: 999px;
  background: var(--rv-surface); font-size: 13px; font-weight: 600; color: var(--rv-ink);
  display: inline-flex; align-items: center; gap: 7px;
}
.rv-sizes__bchip.is-on { background: var(--rv-accent); border-color: var(--rv-accent); color: #fff; }
.rv-sizes__bchip .x { font-size: 15px; line-height: 1; opacity: .8; }

/* Tabla de comparación */
.rv-sizes__tablewrap { overflow-x: auto; }
.rv-sizes__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rv-sizes__table th {
  background: var(--rv-ink); color: #fff; text-align: left;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 12px; white-space: nowrap;
}
.rv-sizes__table td { padding: 9px 12px; border-bottom: 1px solid #ECE7DC; white-space: nowrap; }
.rv-sizes__table tbody tr:nth-child(even) { background: var(--rv-group-bg); }
.rv-sizes__table .rv-sizes__big { font-weight: 800; color: var(--rv-accent-dark); font-size: 16px; }
.rv-sizes__tr--self td { background: var(--rv-accent-tint) !important; font-weight: 700; }
.rv-sizes__tr--self .rv-sizes__big { color: var(--rv-accent-dark); }

/* ── Pie de tarjeta ────────────────────────────────────────── */
.rv-sizes__foot {
  background: #F7F4EE; border-top: 1px solid var(--rv-border);
  padding: 14px 28px; font-size: 13.5px; color: var(--rv-ink-soft);
}
.rv-sizes__foot strong { color: var(--rv-ink); }

/* ── Tabla de referencia (SEO, server-side) ────────────────── */
.rv-sizes-ref { max-width: 100%; margin: 32px 0 0; }
.rv-sizes-ref__title { font-size: 22px; font-weight: 800; color: var(--rv-ink); margin: 0 0 6px; }
.rv-sizes-ref__intro { font-size: 14.5px; color: var(--rv-ink-soft); margin: 0 0 16px; max-width: 780px; }
.rv-sizes-ref__wrap {
  overflow-x: auto; border: 1px solid var(--rv-border); border-radius: var(--rv-radius-md);
}
.rv-sizes-ref__table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.rv-sizes-ref__table th, .rv-sizes-ref__table td { padding: 9px 12px; text-align: center; white-space: nowrap; }
.rv-sizes-ref__table thead th {
  background: var(--rv-ink); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
/* CM y Pulg. ocupan las dos filas de cabecera: se alinean abajo, a la altura
   de EU/US/UK. Doble scope para ganar a un th{vertical-align:top} del tema. */
.rvt-scope .rv-sizes-ref__table thead th[rowspan] { vertical-align: bottom; }
.rv-sizes-ref__grp { background: #24211C !important; }
.rv-sizes-ref__grp--alt { color: var(--rv-accent) !important; }
.rv-sizes-ref__table tbody td { border-bottom: 1px solid #ECE7DC; }
.rv-sizes-ref__table tbody tr:nth-child(even) { background: var(--rv-group-bg); }
.rv-sizes-ref__cm { font-weight: 700; color: var(--rv-ink); }
.rv-sizes-ref__sep { border-left: 2px solid var(--rv-border); }
.rv-sizes-ref__na { color: var(--rv-muted); }
.rv-sizes-ref__note { font-size: 13px; color: var(--rv-muted); margin: 12px 2px 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .rv-sizes__groups { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rv-sizes__head, .rv-sizes__pad, .rv-sizes__band, .rv-sizes__cmp, .rv-sizes__foot {
    padding-left: 18px; padding-right: 18px;
  }
  .rv-sizes__stats { gap: 20px; }
  .rv-sizes__stat-v { font-size: 28px; }
}