/* RUNFIT · Componentes de artículo (rfa-*) · v1.2 · 28/10/2026
   Diseño: projects/runfit-es/outputs/componentes-articulo-2026-10/README.md

   Reglas de la hoja:
   - Solo clases rfa-*. No usa clases, variables ni fuentes de Soledad, así que sobrevive al cambio de tema de 2027.
   - Las reglas llevan doble clase (.rfa.rfa o .rfa.rfa-x) para ganar a .post-entry ul li (0,1,2), .post-entry table
     y .post-entry p de Soledad sin !important. Cuando Soledad se vaya, sobran pero no estorban.
   - Sin JavaScript, sin fuentes propias (heredan las del contenido), sin imágenes: los iconos son SVG dentro del CSS.
   - Alturas fijas en las gráficas: nada cambia de tamaño después de pintarse (sin CLS).
   - Paleta tomada de la ficha v2 (ficha-v2.css del plugin de eventos). Contrastes AA medidos en el README.
   - Solo pesos 400 y 700: Lato no tiene 800 (28/10/2026). */

/* ---------- Base común ---------- */
.rfa{
  --rfa-ink:#111418;
  --rfa-body:#3A3F47;
  --rfa-muted:#646A73;
  --rfa-line:#E4E7EC;
  --rfa-line-soft:#EFF1F4;
  --rfa-axis:#98A0AA;
  --rfa-surface:#F7F8FA;
  --rfa-blue:#2A4DC0;
  --rfa-blue-dark:#1F3FAA;
  --rfa-blue-bar:#6E87DA;
  --rfa-blue-tint:#F2F5FC;
  --rfa-blue-line:#DCE4F7;
  --rfa-red:#B42318;
  --rfa-red-tint:#FEF3F2;
  --rfa-orange:#9A3412;
  --rfa-orange-tint:#FFF4EC;
  --rfa-green:#166534;
  --rfa-green-tint:#EDF7F0;
  --rfa-radius:4px;
  --rfa-gap:28px;
}
.rfa,.rfa *,.rfa *::before,.rfa *::after{box-sizing:border-box}
.rfa.rfa{margin:var(--rfa-gap) 0;color:var(--rfa-body);line-height:1.6}
/* Soledad pone tamaño e interlineado al propio <p> (p, .post-entry p {15px; 1.7}): sin esto los párrafos no heredan los del
   componente. Los <p> con tamaño propio (.rfa-t, .rfa-cifra, .rfa-fuente, .rfa-consulta) llevan 0,3,0 y siguen ganando. */
.rfa.rfa p{margin:0 0 10px;font-size:inherit;line-height:inherit}
.rfa.rfa p:last-child{margin-bottom:0}
.rfa.rfa b,.rfa.rfa strong{color:var(--rfa-ink)}
.rfa a:focus-visible{outline:3px solid rgba(42,77,192,.35);outline-offset:2px;border-radius:2px}

/* Etiqueta de bloque ("Lo esencial", "Precaución", "Fuentes"...) */
.rfa.rfa .rfa-t{margin:0 0 8px;font-family:inherit;font-size:13px;line-height:1.4;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rfa-ink)}

/* Línea de fuente bajo gráficas y tablas */
.rfa.rfa .rfa-fuente{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--rfa-muted)}

/* ---------- 1. Lo esencial ---------- */
.rfa.rfa-esencial{padding:14px 16px 10px;border:1px solid var(--rfa-line);border-top:3px solid var(--rfa-blue);border-radius:var(--rfa-radius);background:#fff}
.rfa.rfa-esencial ul{margin:0;padding:0;list-style:none}
.rfa.rfa-esencial li{position:relative;margin:0;padding:8px 0 8px 20px;border-top:1px solid var(--rfa-line-soft);list-style:none;line-height:1.55}
.rfa.rfa-esencial li:first-child{border-top:0}
.rfa.rfa-esencial li::before{content:"";position:absolute;left:1px;top:calc(8px + .775em - 4px);width:8px;height:8px;border-radius:2px;background:var(--rfa-blue)}

/* ---------- 2. Destacados (rfa-nota + tipo) ---------- */
.rfa-aviso{--c:var(--rfa-red);--bg:var(--rfa-red-tint);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.rfa-error{--c:var(--rfa-orange);--bg:var(--rfa-orange-tint);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E")}
.rfa-consejo{--c:var(--rfa-green);--bg:var(--rfa-green-tint);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E")}
.rfa-dato{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16v-4M12 16V8M17 16v-7'/%3E%3C/svg%3E")}

.rfa.rfa-nota{padding:14px 16px;border-left:4px solid var(--c);border-radius:0 var(--rfa-radius) var(--rfa-radius) 0;background:var(--bg)}
.rfa.rfa-nota .rfa-t,.rfa.rfa-dato .rfa-t{display:flex;align-items:center;gap:8px;color:var(--c,var(--rfa-blue-dark))}
.rfa.rfa-nota .rfa-t::before,.rfa.rfa-dato .rfa-t::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.rfa.rfa-nota ul,.rfa.rfa-nota ol{margin:6px 0 0;padding-left:20px}
.rfa.rfa-nota li{margin:0 0 4px;list-style:disc;line-height:1.55}

/* Dato clave: cifra grande + frase que se entiende sola */
.rfa.rfa-dato{padding:14px 16px 16px;border:1px solid var(--rfa-blue-line);border-radius:var(--rfa-radius);background:var(--rfa-blue-tint)}
.rfa.rfa-dato .rfa-cifra{margin:2px 0 6px;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.01em;color:var(--rfa-blue-dark);font-variant-numeric:tabular-nums}

/* ---------- 3. Gráficas y tablas: base común ---------- */
.rfa.rfa-barras table,.rfa.rfa-columnas table,.rfa.rfa-tabla table{width:100%;margin:0;border:0;border-collapse:collapse;background:none;font-size:15px}
.rfa.rfa-barras caption,.rfa.rfa-columnas caption,.rfa.rfa-tabla caption{caption-side:top;padding:0 0 12px;text-align:left;font-family:inherit;font-size:16px;line-height:1.4;font-weight:700;letter-spacing:0;text-transform:none;color:var(--rfa-ink)}
.rfa.rfa-barras caption small,.rfa.rfa-columnas caption small,.rfa.rfa-tabla caption small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--rfa-muted)}

/* 3a. Barras horizontales: una fila por categoría, ancho proporcional al máximo */
.rfa.rfa-barras th,.rfa.rfa-barras td{padding:6px 0;border:0;background:none;vertical-align:middle;text-align:left}
.rfa.rfa-barras th{width:36%;padding-right:12px;font-size:14px;line-height:1.3;font-weight:400;color:var(--rfa-body)}
/* La pista reserva a la derecha el hueco de la cifra: el ancho en % de la barra se calcula sobre lo que queda,
   así la barra más larga (100%) deja sitio a su cifra y cada cifra va pegada al final de su barra. */
.rfa.rfa-barras .rfa-pista{display:flex;align-items:center;gap:8px;padding-right:4.6em}
.rfa.rfa-barras .rfa-b{flex:none;display:block;height:16px;min-width:2px;border-radius:0 2px 2px 0;background:var(--rfa-blue-bar)}
.rfa.rfa-barras .rfa-n{flex:none;font-size:14px;font-weight:700;color:var(--rfa-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rfa.rfa-barras tr.rfa-on th{font-weight:700;color:var(--rfa-ink)}
.rfa.rfa-barras tr.rfa-on .rfa-b{background:var(--rfa-blue-dark)}

/* 3b. Columnas (evolución): una columna por periodo, alto proporcional al máximo */
.rfa.rfa-columnas table{table-layout:fixed}
.rfa.rfa-columnas thead{display:table-footer-group}
.rfa.rfa-columnas th{padding:6px 1px 0;border:0;border-top:1px solid var(--rfa-axis);background:none;text-align:center;vertical-align:top;font-size:12px;line-height:1.3;font-weight:400;letter-spacing:0;text-transform:none;color:var(--rfa-muted)}
.rfa.rfa-columnas td{padding:0 2px;border:0;background:none;vertical-align:bottom}
.rfa.rfa-columnas .rfa-col{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:150px;padding-top:22px}
.rfa.rfa-columnas .rfa-b{flex:none;display:block;width:100%;max-width:44px;min-height:2px;max-height:100%;border-radius:2px 2px 0 0;background:var(--rfa-blue-bar)}
.rfa.rfa-columnas .rfa-n{flex:none;margin-bottom:4px;font-size:12px;line-height:1.2;font-weight:700;color:var(--rfa-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rfa.rfa-columnas td.rfa-on .rfa-b{background:var(--rfa-blue-dark)}
.rfa.rfa-columnas th.rfa-on{font-weight:700;color:var(--rfa-ink)}

/* 3c. Tabla comparativa */
.rfa.rfa-tabla{overflow-x:auto}
.rfa.rfa-tabla th,.rfa.rfa-tabla td{padding:10px 12px 10px 0;border:0;border-bottom:1px solid var(--rfa-line);background:none;text-align:left;vertical-align:top;font-size:15px;line-height:1.45}
.rfa.rfa-tabla thead th{padding-top:0;border-bottom-color:#C9CED6;vertical-align:bottom;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rfa-muted)}
.rfa.rfa-tabla tbody th{font-weight:700;color:var(--rfa-ink)}
.rfa.rfa-tabla th:last-child,.rfa.rfa-tabla td:last-child{padding-right:0}
.rfa.rfa-tabla .rfa-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* Variante apilada: en móvil cada fila es una tarjeta. Las etiquetas salen de data-col (escrito en el HTML, sin JS). */
@media (max-width:599px){
  .rfa.rfa-tabla--apilada{overflow:visible}
  .rfa.rfa-tabla--apilada table,.rfa.rfa-tabla--apilada caption,.rfa.rfa-tabla--apilada tbody,.rfa.rfa-tabla--apilada tr,.rfa.rfa-tabla--apilada th,.rfa.rfa-tabla--apilada td{display:block;width:100%}
  .rfa.rfa-tabla--apilada thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .rfa.rfa-tabla--apilada tr{margin:0 0 12px;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);overflow:hidden;background:#fff}
  .rfa.rfa-tabla--apilada tbody th{padding:10px 14px;border-bottom:1px solid var(--rfa-line);background:var(--rfa-blue-tint);font-size:16px}
  .rfa.rfa-tabla--apilada td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 14px;border-bottom:1px solid var(--rfa-line-soft);text-align:right}
  .rfa.rfa-tabla--apilada td:last-child{border-bottom:0}
  .rfa.rfa-tabla--apilada td::before{content:attr(data-col);flex:none;max-width:45%;text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rfa-muted)}
  .rfa.rfa-tabla--apilada .rfa-num{white-space:normal}
  /* Celda de texto (más de cuatro o cinco palabras): etiqueta encima y texto a la izquierda */
  .rfa.rfa-tabla--apilada td.rfa-txt{display:block;text-align:left}
  .rfa.rfa-tabla--apilada td.rfa-txt::before{display:block;max-width:none;margin-bottom:2px}
}

/* ---------- 4. Pasos ---------- */
.rfa.rfa-pasos{margin:var(--rfa-gap) 0;padding:0;list-style:none;counter-reset:rfa-paso}
.rfa.rfa-pasos>li{position:relative;margin:0;padding:0 0 18px 44px;list-style:none;line-height:1.6;counter-increment:rfa-paso}
.rfa.rfa-pasos>li::before{content:counter(rfa-paso);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--rfa-blue);color:#fff;font-size:14px;font-weight:700;line-height:28px;text-align:center}
.rfa.rfa-pasos>li::after{content:"";position:absolute;left:13px;top:32px;bottom:4px;width:2px;background:var(--rfa-line)}
.rfa.rfa-pasos>li:last-child{padding-bottom:0}
.rfa.rfa-pasos>li:last-child::after{display:none}
.rfa.rfa-pasos>li>strong:first-child{display:block;margin-bottom:2px;line-height:28px}

/* ---------- 5. Lista de comprobación ---------- */
.rfa.rfa-check{padding:14px 16px;border:1px solid var(--rfa-line);border-radius:var(--rfa-radius);background:var(--rfa-surface)}
.rfa.rfa-check ul{margin:0;padding:0;list-style:none}
.rfa.rfa-check li{position:relative;margin:0;padding:6px 0 6px 30px;list-style:none;line-height:1.55}
.rfa.rfa-check li::before{content:"";position:absolute;left:0;top:calc(6px + .775em - 9px);width:18px;height:18px;border:2px solid var(--rfa-blue);border-radius:3px;background:#fff}

/* ---------- 6. Fuentes ---------- */
.rfa.rfa-fuentes{margin-top:40px;padding-top:14px;border-top:1px solid var(--rfa-line)}
.rfa.rfa-fuentes ul{margin:0;padding-left:18px}
.rfa.rfa-fuentes li{margin:0 0 6px;list-style:disc;font-size:14px;line-height:1.5;color:var(--rfa-muted)}
.rfa.rfa-fuentes a{overflow-wrap:anywhere}
.rfa.rfa-fuentes .rfa-consulta{margin:8px 0 0;font-size:13px;color:var(--rfa-muted)}

/* ---------- 7. Firma y revisión ---------- */
.rfa.rfa-revision{margin-top:24px;padding:12px 16px 4px;border-radius:var(--rfa-radius);background:var(--rfa-surface);font-size:14px;line-height:1.55}
/* Firma y enlaces van en flujo normal, no en flex, para aceptar los dos marcados: el recomendado (partes en <span>, enlaces
   seguidos) y un separador " · " escrito a mano, que en flex se convertía en una pieza suelta (QA del 28/10/2026). */
.rfa.rfa-revision .rfa-firma{margin:0 0 8px;color:var(--rfa-muted);text-wrap:pretty}
.rfa.rfa-revision .rfa-firma a{font-weight:700}
/* Cada parte, entera. Si no caben juntas, el punto se queda al final de la primera línea, nunca al principio de la segunda. */
.rfa.rfa-revision .rfa-firma>span{display:inline-block}
.rfa.rfa-revision .rfa-firma>span:not(:last-child)::after{content:"\00B7";margin:0 .2em}
.rfa.rfa-revision .rfa-cambios{margin:0 0 4px;color:var(--rfa-body)}
/* 10 px a cada lado de cada enlace: 20 px entre dos seguidos y un " · " escrito entre ellos queda centrado. El margen negativo
   del párrafo compensa los extremos, así el enlace que baja de línea no queda sangrado. */
.rfa.rfa-revision .rfa-enlaces{margin:0 -10px}
.rfa.rfa-revision .rfa-enlaces a{display:inline-flex;align-items:center;min-height:44px;margin:0 10px;font-weight:700}

/* ---------- Escritorio ---------- */
@media (min-width:600px){
  .rfa{--rfa-gap:32px}
  .rfa.rfa-esencial,.rfa.rfa-nota,.rfa.rfa-dato,.rfa.rfa-check{padding-left:20px;padding-right:20px}
  .rfa.rfa-barras th{width:30%}
  .rfa.rfa-columnas .rfa-col{height:190px}
  .rfa.rfa-dato .rfa-cifra{font-size:40px}
}