/* ═══════════════════════════════════════════════════════════════════════════
   LA CONSULTA · la ficha del frasco como REFERENCIA, en positivo (2026-11-04)
   Imágenes de Edu: docs/mockups/consulta-tres-pantallas-2026-10-15.png (pantalla
   del medio) y docs/referencias/consulta-mockup-2026-11-02/portada-y-ficha.png
   (mitad derecha). La pinta scripts/gen-consulta.py desde la base y la anima
   assets/js/consulta-ficha.js. Clases propias con prefijo sbc- (no se toca
   main.css). Celular primero: 390 px sin scroll horizontal y toques de 44 px;
   escritorio ≥ 1024 px a dos columnas como la imagen 2. Seis pestañas: Resumen ·
   Protocolos (una sub-pestaña por protocolo validado, con su gráfica) ·
   Preparación (el paso a paso) · Combinaciones · Evidencia · Preguntas. Sin
   JavaScript se ve todo apilado (el JS pone .sbc-vivo y esconde lo que no está
   elegido). La barra de cada efecto es la FUERZA 1–5 que guarda la base, con su
   palabra al lado. Sin precios. Respeta prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
.sbc {
  --sbc-papel: #F5F5F0; --sbc-navy: #001450; --sbc-azul: #2864A0; --sbc-azul-cl: #8FB3DB; --sbc-linea: #E0DDD3;
  --sbc-card: #FFFFFF; --sbc-tinta: #1B2540; --sbc-soft: #3D4858; --sbc-gris: #5A6573;
  --sbc-verde: #2E7D4F; --sbc-verde-bg: #E6F2E9;
  --sbc-ambar: #B86A12; --sbc-ambar-bg: #FCEFD9;
  --sbc-prel: #7A818C;  --sbc-prel-bg: #ECEDEF;
  --sbc-info-bg: #EAF1FB; --sbc-azul-bg: #EEF3F9;
  --sbc-marca: #E8742A;
  --sbc-serif: Georgia, 'Times New Roman', serif;
  --sbc-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  background: var(--sbc-papel); color: var(--sbc-tinta);
  font-family: 'Montserrat', system-ui, sans-serif; padding: 100px 16px 56px; overflow-x: clip;
}
.sbc *, .sbc *::before, .sbc *::after { box-sizing: border-box; }
/* Lo oculto se oculta aunque la clase diga grid (paneles y presentaciones no elegidos). */
.sbc [hidden] { display: none !important; }
.sbc-wrap { max-width: 1120px; margin: 0 auto; }
.sbc-ico { width: 22px; height: 22px; flex: none; }
.sbc-ico-lg { width: 30px; height: 30px; }
.sbc-flecha { width: 15px; height: 15px; }

/* ── miga ────────────────────────────────────────────────────────────────── */
.sbc-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 13px; color: var(--sbc-gris); margin-bottom: 8px; }
.sbc-miga a { color: var(--sbc-azul); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.sbc-miga a:first-child { color: var(--sbc-tinta); }
.sbc-miga a:hover { text-decoration: underline; }
.sbc-miga-sep { width: 14px; height: 14px; color: var(--sbc-gris); }
.sbc-miga [aria-current] { color: var(--sbc-tinta); font-weight: 600; }

/* ── cabecera: foto, nombre, una línea, sistemas, sellos y acciones ──────── */
.sbc-hero { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--sbc-card);
  border: 1px solid var(--sbc-linea); border-radius: 18px; padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,20,80,.05); }
.sbc-hero img { width: 92px; height: 124px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,20,80,.16)); }
/* Celular: el frasco y el nombre arriba; sistemas, sellos y acciones a todo el ancho debajo. */
.sbc-hero-txt { display: contents; }
.sbc-hero img { grid-row: 1 / span 2; grid-column: 1; }
.sbc-hero .sbc-h1, .sbc-hero .sbc-desc { grid-column: 2; min-width: 0; }
.sbc-hero .sbc-sis, .sbc-hero .sbc-sellos, .sbc-hero .sbc-acciones { grid-column: 1 / -1; }
.sbc-hero .sbc-sis, .sbc-hero .sbc-sellos, .sbc-hero .sbc-desc { margin-bottom: 0; }
.sbc-hero { row-gap: 10px; }
.sbc-h1 { font-family: var(--sbc-serif); font-weight: 700; color: var(--sbc-navy); font-size: clamp(28px, 8vw, 52px);
  line-height: 1.04; margin: 0 0 6px; overflow-wrap: anywhere; }
.sbc-desc { font-size: 15px; line-height: 1.45; color: var(--sbc-soft); margin: 0 0 10px; }
.sbc-sis { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; }
.sbc-sis li { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #C9D6EA; background: var(--sbc-azul-bg); color: var(--sbc-navy);
  border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 12.5px; font-weight: 600; }
.sbc-sis .sbc-ico { width: 15px; height: 15px; color: var(--sbc-azul); }
.sbc-sellos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 0 0 6px; }
.sbc-sello { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.sbc-sello.sbc-ev { min-height: 34px; padding: 4px 12px; white-space: normal; }
.sbc-sello-area { background: #FFF3E8; color: #A3501A; padding: 7px 12px; min-height: 34px; }
.sbc-sello-area .sbc-ico { width: 15px; height: 15px; color: var(--sbc-marca); }
.sbc-sello-area span { color: inherit; }
.sbc-sello-reg { display: block; border-radius: 14px; border: 1px solid var(--sbc-s-bd); background: var(--sbc-s-bg); color: var(--sbc-s-c);
  max-width: 100%; flex: 1 1 100%; }
.sbc-sello-reg summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; cursor: pointer; list-style: none; }
.sbc-sello-reg summary::-webkit-details-marker { display: none; }
.sbc-sello-reg summary span { flex: 1 1 auto; }
.sbc-sello-reg summary::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); flex: none; margin: -3px 4px 0 6px; opacity: .7; }
.sbc-sello-reg[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.sbc-sello-det { padding: 0 12px 12px; font-weight: 400; color: var(--sbc-soft); }
.sbc-sello-det p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.sbc-sello-src, .sbc-sello-src a { font-size: 12px; color: var(--sbc-gris); }
.sbc-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; position: relative; margin-top: 4px; }
.sbc-accion, .sbc-comb { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--sbc-navy); cursor: pointer; border-radius: 10px; }
.sbc-accion:hover { background: var(--sbc-azul-bg); }
.sbc-accion[aria-pressed="true"] .sbc-ico, .sbc-comb[aria-pressed="true"] .sbc-ico { fill: currentColor; }
.sbc-copiado { font-size: 13px; font-weight: 600; color: var(--sbc-verde); background: var(--sbc-verde-bg); border-radius: 999px; padding: 4px 10px; }
.sbc-comb-ir { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sbc-azul); font-weight: 600; font-size: 14px; text-decoration: none; }
.sbc-comb-ir:hover { text-decoration: underline; }
/* Sin JS, el botón de la combinación no puede guardar nada: no se enseña. */
.sbc:not(.sbc-vivo) [data-sbc-comb] { display: none; }

/* ── chips de evidencia (uno por grado, como .sbp-ev de la portada) ─────── */
.sbc-g-alta { color: var(--sbc-verde); --sbc-g-bg: var(--sbc-verde-bg); }
.sbc-g-media { color: var(--sbc-ambar); --sbc-g-bg: var(--sbc-ambar-bg); }
.sbc-g-preliminar { color: var(--sbc-azul); --sbc-g-bg: var(--sbc-azul-bg); }
.sbc-ev { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--sbc-g-bg); padding: 4px 10px;
  font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sbc-ev i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sbc-ev span { color: var(--sbc-tinta); }
.sbc-ev-lg { font-size: 14px; padding: 0 16px; min-height: 44px; border: 1px solid transparent; }
.sbc-ev-lg i { width: 10px; height: 10px; }
.sbc-ev-lg b { color: var(--sbc-gris); font-weight: 600; }
a.sbc-ev-lg:hover { border-color: currentColor; }
.sbc-ev-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

/* ── la cinta de pestañas (celular: se desliza de lado) ──────────────────── */
.sbc-tabs { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; margin: 0 -16px 16px;
  padding: 4px 16px 8px; position: sticky; top: 72px; z-index: 5; background: var(--sbc-papel); -webkit-overflow-scrolling: touch; }
.sbc-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  color: var(--sbc-tinta); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.sbc-tabs a:hover { background: var(--sbc-azul-bg); }
.sbc-tabs a:focus-visible, .sbc-sub button:focus-visible { outline: 3px solid rgba(40,100,160,.35); outline-offset: 1px; }
.sbc-vivo .sbc-tabs a[aria-selected="true"] { background: var(--sbc-navy); color: #fff; font-weight: 700; }
.sbc:not(.sbc-vivo) .sbc-tabs { position: static; }

/* ── paneles y tarjetas ──────────────────────────────────────────────────── */
.sbc-panel { margin-bottom: 28px; scroll-margin-top: 140px; }
.sbc-panel:focus-visible { outline: 3px solid rgba(40,100,160,.25); outline-offset: 4px; border-radius: 12px; }
.sbc-panel-tit { font-family: var(--sbc-serif); font-weight: 700; color: var(--sbc-navy); font-size: 26px; margin: 0 0 12px;
  padding-top: 8px; border-top: 2px solid var(--sbc-linea); }
.sbc-vivo .sbc-panel-tit { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: 0; }
.sbc-card { background: var(--sbc-card); border: 1px solid var(--sbc-linea); border-radius: 16px; padding: 16px;
  margin-bottom: 14px; box-shadow: 0 2px 10px rgba(0,20,80,.04); min-width: 0; }
.sbc-h2 { font-family: var(--sbc-serif); font-weight: 700; color: var(--sbc-navy); font-size: clamp(20px, 5.4vw, 24px); line-height: 1.2; margin: 0 0 12px; }
.sbc-h3 { display: flex; align-items: center; gap: 8px; font-family: var(--sbc-serif); font-weight: 700; color: var(--sbc-navy); font-size: 19px; margin: 0 0 10px; }
.sbc-txt { font-size: 13.5px; line-height: 1.5; color: var(--sbc-gris); margin: -4px 0 12px; }
.sbc-bloque { margin: 22px 0 0; }
.sbc-bloque-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.sbc-ver, .sbc-enlace { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--sbc-azul); font-weight: 600;
  font-size: 14px; text-decoration: none; }
.sbc-ver:hover, .sbc-enlace:hover { text-decoration: underline; }
.sbc-enlaces { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 6px 0 0; }
.sbc-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; align-items: start; }

/* Resumen · «¿Para qué se ha investigado?»: ícono + nombre + barra + palabra (imagen 2) */
.sbc-efs, .sbc-evl { list-style: none; margin: 0; padding: 0; }
.sbc-efs li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "i n n" "i b l"; gap: 4px 10px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--sbc-linea); font-size: 14px; }
.sbc-efs li:first-child { border-top: 0; padding-top: 2px; }
.sbc-ef-ico { width: 22px; height: 22px; color: var(--sbc-navy); grid-area: i; }
.sbc-efs .sbc-ef-nom { grid-area: n; }
.sbc-efs .sbc-fz { grid-area: b; }
.sbc-efs .sbc-fz-lbl { grid-area: l; }
.sbc-ef-nom { font-weight: 600; color: var(--sbc-tinta); min-width: 0; line-height: 1.35; }
.sbc-fz { display: inline-flex; gap: 3px; width: 100%; max-width: 150px; }
.sbc-fz i { flex: 1 1 0; height: 8px; border-radius: 4px; background: #DCE3EE; }
.sbc-fz i.on { background: var(--sbc-azul); }
.sbc-foco .sbc-fz i.on { background: var(--sbc-navy); }
.sbc-fz-lbl { font-size: 12px; color: var(--sbc-gris); white-space: nowrap; text-align: right; }
.sbc-foco .sbc-fz-lbl { color: var(--sbc-navy); font-weight: 700; }
.sbc-enres { background: #F9F8F3; }
.sbc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sbc-checks li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--sbc-soft); }
.sbc-check { width: 18px; height: 18px; color: var(--sbc-verde); margin-top: 1px; }
.sbc-si { background: var(--sbc-verde-bg); border-color: #CFE5D6; }
.sbc-si .sbc-h3 { color: var(--sbc-verde); font-family: inherit; font-size: 16px; }
.sbc-si .sbc-checks li { color: var(--sbc-tinta); }

/* Resumen · «Cuándo se nota»: la línea de tiempo (results_week_min → results_week_full) */
.sbc-cuando .sbc-h3 { font-family: inherit; font-size: 16px; }
.sbc-cuando .sbc-h3 .sbc-ico { color: var(--sbc-azul); }
.sbc-tl { position: relative; height: 30px; margin: 10px 8px 4px; }
.sbc-tl-riel { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: #DCE3EE; }
.sbc-tl-tramo { position: absolute; left: var(--a); width: calc(var(--b) - var(--a)); top: 11px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--sbc-azul-cl), var(--sbc-navy)); }
.sbc-tl-p { position: absolute; top: 6px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--sbc-linea); }
.sbc-tl-p.sbc-tl-min { left: var(--a); background: var(--sbc-azul-cl); }
.sbc-tl-p.sbc-tl-full { left: var(--b); background: var(--sbc-navy); }
.sbc-tl-lbl { list-style: none; margin: 6px 0 0; padding: 0; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.sbc-tl-lbl li { display: flex; align-items: center; gap: 6px; color: var(--sbc-soft); }
.sbc-tl-lbl li::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sbc-tl-lbl .sbc-tl-min::before { background: var(--sbc-azul-cl); }
.sbc-tl-lbl .sbc-tl-full { font-weight: 700; color: var(--sbc-navy); text-align: right; }
.sbc-tl-lbl .sbc-tl-full::before { background: var(--sbc-navy); }

/* Plegables (Antes de empezar · La ciencia) */
.sbc-plegable { background: var(--sbc-card); border: 1px solid var(--sbc-linea); border-radius: 16px; margin: 14px 0; overflow: hidden; }
.sbc-plegable summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--sbc-navy); font-size: 15px; }
.sbc-plegable summary::-webkit-details-marker { display: none; }
.sbc-plegable summary::after { content: ''; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--sbc-azul);
  border-bottom: 2px solid var(--sbc-azul); transform: rotate(45deg); flex: none; }
.sbc-plegable[open] summary::after { transform: rotate(-135deg); }
.sbc-plegable summary small { color: var(--sbc-gris); font-weight: 500; }
.sbc-plegable summary .sbc-ico { color: var(--sbc-azul); }
.sbc-plegable > div { padding: 0 16px 16px; }
.sbc-antes h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--sbc-soft); }
.sbc-antes ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.55; color: var(--sbc-soft); }
.sbc-ciencia summary > span { display: grid; gap: 2px; }
.sbc-ciencia summary b { font-family: var(--sbc-serif); font-size: 20px; }
.sbc-ciencia summary small { font-size: 13px; }
.sbc-ciencia p, .sbc-ciencia li { font-size: 14px; line-height: 1.6; color: var(--sbc-soft); }
.sbc-ciencia ul { padding-left: 18px; }

/* Herramientas */
.sbc-herrs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sbc-herr { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto auto; gap: 4px 12px; padding: 16px;
  background: var(--sbc-card); border: 1px solid var(--sbc-linea); border-radius: 14px; text-decoration: none; color: var(--sbc-tinta);
  box-shadow: 0 2px 8px rgba(0,20,80,.04); min-height: 44px; }
.sbc-herr:hover { border-color: var(--sbc-azul); }
.sbc-herr .sbc-ico { grid-row: 1 / span 3; color: var(--sbc-navy); }
.sbc-herr-tit { font-weight: 700; color: var(--sbc-navy); font-size: 15px; line-height: 1.25; }
.sbc-herr-sub { font-size: 13px; line-height: 1.4; color: var(--sbc-gris); }
.sbc-herr-boton { font-size: 14px; font-weight: 600; color: var(--sbc-azul); margin-top: 6px; }

/* Protocolos: etiqueta, sub-pestañas, gráfica y POR QUÉ · CUÁNDO · CÓMO */
.sbc-etiqueta { font-family: var(--sbc-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
  color: var(--sbc-azul); background: var(--sbc-azul-bg); border-radius: 6px; padding: 6px 9px; margin: 0 0 10px; display: inline-block; }
.sbc-sub { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 6px; scrollbar-width: thin; }
.sbc-sub button { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--sbc-linea); background: var(--sbc-card); color: var(--sbc-navy); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.sbc-sub button .sbc-ico { width: 16px; height: 16px; color: var(--sbc-marca); }
.sbc-vivo .sbc-sub button[aria-selected="true"] { background: var(--sbc-navy); border-color: var(--sbc-navy); color: #fff; }
.sbc-vivo .sbc-sub button[aria-selected="true"] .sbc-ico { color: #FFC08A; fill: currentColor; }
.sbc-protos { padding: 16px; }
.sbc-proto-p + .sbc-proto-p { border-top: 2px solid var(--sbc-linea); margin-top: 18px; padding-top: 18px; }
.sbc-vivo .sbc-proto-p + .sbc-proto-p { border-top: 0; margin-top: 0; padding-top: 0; }
.sbc-proto-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; }
.sbc-proto-cab .sbc-h2 { margin: 0; }
.sbc-oficial { display: inline-flex; align-items: center; gap: 5px; background: #FFF3E8; color: #A3501A; border: 1px solid #F6D3B5;
  border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 700; }
.sbc-oficial .sbc-ico { width: 14px; height: 14px; color: var(--sbc-marca); fill: currentColor; }
.sbc-graf-fig { margin: 4px 0 14px; padding: 12px; background: #F9FAFC; border: 1px solid #E6EBF2; border-radius: 14px; }
.sbc-graf { width: 100%; max-width: 560px; height: auto; display: block; }
.sbc-leyenda { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--sbc-soft); }
.sbc-leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.sbc-leyenda i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.sbc-leyenda b { color: var(--sbc-navy); }
.sbc-total { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--sbc-navy); }
.sbc-demanda { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; padding: 12px 14px; background: var(--sbc-info-bg);
  border-radius: 12px; color: var(--sbc-navy); font-weight: 600; font-size: 14px; }
.sbc-pcqs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.sbc-pcq { border-radius: 14px; padding: 14px; background: var(--sbc-papel); min-width: 0; }
.sbc-pcq h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sbc-azul); }
.sbc-pcq h4 .sbc-ico { width: 20px; height: 20px; }
.sbc-pcq-porque { background: var(--sbc-azul-bg); }
.sbc-pcq-porque p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--sbc-navy); font-weight: 600; }
.sbc-proto-nota { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--sbc-gris); }
.sbc-tabla { margin: 0; }
.sbc-tabla > div { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 0;
  border-top: 1px solid var(--sbc-linea); font-size: 14px; }
.sbc-tabla > div:first-child { border-top: 0; }
.sbc-tabla dt { color: var(--sbc-gris); }
.sbc-tabla dd { margin: 0; font-weight: 600; color: var(--sbc-tinta); overflow-wrap: anywhere; }
.sbc-tabla-c > div { padding: 7px 0; font-size: 13.5px; }
.sbc-tabla-c dd b { color: var(--sbc-navy); }
.sbc-nota { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; background: var(--sbc-info-bg); color: var(--sbc-navy);
  border-radius: 14px; padding: 14px 16px; margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; }
.sbc-nota .sbc-ico { color: var(--sbc-azul); }
.sbc-nota p { margin: 0; }
.sbc-nota-sola { grid-template-columns: minmax(0, 1fr); margin: 12px 0; }
.sbc-nota-base { border-left: 3px solid var(--sbc-azul); padding: 4px 0 4px 12px; margin: 12px 0; }
.sbc-nota-base h4 { margin: 0 0 4px; font-size: 13px; color: var(--sbc-navy); }
.sbc-nota-base p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sbc-soft); }

/* Preparación: referencia rápida, presentaciones, el paso a paso y la jeringa */
.sbc-pres { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.sbc-pres button { font: inherit; font-size: 13px; border: 1px solid var(--sbc-linea); background: var(--sbc-card); color: var(--sbc-navy);
  border-radius: 999px; padding: 0 16px; cursor: pointer; min-height: 44px; }
.sbc-pres button[aria-pressed="true"] { background: var(--sbc-navy); color: #fff; border-color: var(--sbc-navy); }
.sbc-ref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sbc-ref div { text-align: center; padding: 10px 4px; border-radius: 12px; background: var(--sbc-papel); min-width: 0; }
.sbc-ref svg { width: 24px; height: 24px; stroke: var(--sbc-navy); fill: none; stroke-width: 1.6; display: block; margin: 0 auto 6px; }
.sbc-ref small { display: block; color: var(--sbc-gris); font-size: 12px; }
.sbc-ref b { display: block; font-size: 15px; color: var(--sbc-tinta); font-weight: 600; margin-top: 2px; }
.sbc-pasos { list-style: none; margin: 0 0 12px; padding: 0; }
.sbc-pasos li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--sbc-tinta); }
.sbc-pasos li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; width: 2px; background: #D5DFEC; }
.sbc-paso-n { width: 34px; height: 34px; border-radius: 50%; background: var(--sbc-navy); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; }
.sbc-pasos li > span:last-child { padding-top: 6px; }
.sbc-dosis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: center; }
.sbc-dosis-mini { margin-top: 10px; gap: 10px; }
.sbc-dosis-mini .sbc-u { padding: 8px 12px; }
.sbc-dosis-mini .sbc-u b { font-size: 28px; }
.sbc-jeringa { width: 100%; height: auto; display: block; }
.sbc-u { text-align: center; border: 1px solid #C9D6EA; background: var(--sbc-azul-bg); border-radius: 14px; padding: 10px 16px; min-width: 92px; justify-self: start; }
.sbc-u-nasal { display: inline-block; }
.sbc-u b { display: block; font-family: var(--sbc-serif); font-size: 36px; line-height: 1; color: var(--sbc-navy); }
.sbc-u small { color: var(--sbc-gris); font-size: 13px; }
.sbc-pie { color: var(--sbc-gris); font-size: 12.5px; margin: 10px 0 0; line-height: 1.45; }

/* Combinaciones: con qué va (verde · ámbar · gris), desde aquí y mi combinación */
.sbc-va { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 14px; }
.sbc-va li { list-style: none; border-radius: 14px; font-size: 14px; min-width: 0; }
.sbc-va li a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; min-height: 52px; color: inherit; text-decoration: none; }
.sbc-va li a:hover b { text-decoration: underline; }
.sbc-va li b { display: block; font-weight: 600; color: var(--sbc-tinta); }
.sbc-va li small { display: block; font-size: 12px; }
.sbc-va .verde { background: var(--sbc-verde-bg); color: var(--sbc-verde); }
.sbc-va .ambar { background: var(--sbc-ambar-bg); color: var(--sbc-ambar); }
.sbc-va .gris { background: var(--sbc-prel-bg); color: var(--sbc-prel); }
.sbc-va svg { width: 22px; height: 22px; flex: 0 0 22px; }
.sbc-comb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: 1px solid var(--sbc-linea); padding-top: 12px; }
.sbc-comb { background: var(--sbc-navy); color: #fff; padding: 0 18px; border-radius: 12px; }
.sbc-comb:hover { background: #0A2470; }
.sbc-comb[aria-pressed="true"] { background: var(--sbc-card); color: var(--sbc-navy); box-shadow: inset 0 0 0 1.5px var(--sbc-navy); }
.sbc-desde { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sbc-hacia { display: grid; grid-template-columns: 30px minmax(0, 1fr) 16px; grid-template-areas: "i t f" "i s f" "i x f"; gap: 2px 10px;
  align-items: center; padding: 14px; border-radius: 14px; background: var(--sbc-card); border: 1px solid var(--sbc-linea); color: var(--sbc-tinta);
  text-decoration: none; min-height: 44px; }
.sbc-hacia:hover { border-color: var(--sbc-azul); }
.sbc-hacia-ico { grid-area: i; width: 26px; height: 26px; color: var(--sbc-azul); align-self: start; }
.sbc-hacia-tit { grid-area: t; display: inline-flex; align-items: center; gap: 2px; color: var(--sbc-navy); font-size: 15px; }
.sbc-hacia-tit .sbc-ico { width: 15px; height: 15px; }
.sbc-hacia > small { grid-area: s; color: var(--sbc-azul); font-size: 12.5px; font-weight: 600; }
.sbc-hacia-txt { grid-area: x; font-size: 13px; line-height: 1.45; color: var(--sbc-soft); }
.sbc-hacia > .sbc-flecha { grid-area: f; color: var(--sbc-navy); }

/* Evidencia: cada efecto con su nivel, su año y su estudio (imagen 1) */
.sbc-evl li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "i n n" "i c e" "i b b"; gap: 6px 10px;
  align-items: center; padding: 12px 0; border-top: 1px solid var(--sbc-linea); font-size: 14px; }
.sbc-evl li:first-child { border-top: 0; }
.sbc-evl .sbc-ef-ico { grid-area: i; align-self: start; }
.sbc-evl .sbc-ef-nom { grid-area: n; font-weight: 600; }
.sbc-evl .sbc-ev { grid-area: c; justify-self: start; }
.sbc-evl .sbc-estudio { grid-area: e; font-size: 13px; color: var(--sbc-azul); text-underline-offset: 2px; }
.sbc-evl span.sbc-estudio { color: var(--sbc-gris); text-decoration: none; }
.sbc-evl .sbc-fz-col { grid-area: b; }
.sbc-coa { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; background: #EDF4EF; border-color: #CFE5D6; }
.sbc-coa .sbc-ico { color: var(--sbc-verde); }
.sbc-coa p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sbc-tinta); }

/* Preguntas */
.sbc-preg { border-top: 1px solid var(--sbc-linea); }
.sbc-preg:first-child { border-top: 0; }
.sbc-preg summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0;
  cursor: pointer; list-style: none; font-weight: 600; font-size: 15px; color: var(--sbc-navy); }
.sbc-preg summary::-webkit-details-marker { display: none; }
.sbc-preg summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--sbc-azul); border-bottom: 2px solid var(--sbc-azul);
  transform: rotate(45deg); flex: none; margin-right: 4px; }
.sbc-preg[open] summary::after { transform: rotate(-135deg); }
.sbc-preg p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--sbc-soft); }

/* Pie de la ficha: una sola línea pequeña (la única mención de investigación) */
.sbc-pie-ficha { border-top: 1px solid var(--sbc-linea); padding-top: 12px; margin-top: 8px; }
.sbc-ruo { color: var(--sbc-gris); font-size: 12px; line-height: 1.5; margin: 0; }

@media (min-width: 600px) {
  .sbc-hero { grid-template-columns: 120px minmax(0, 1fr); gap: 20px; padding: 20px; }
  .sbc-hero img { width: 120px; height: 160px; grid-row: auto; }
  .sbc-hero-txt { display: block; min-width: 0; }
  .sbc-hero .sbc-sis, .sbc-hero .sbc-sellos, .sbc-hero .sbc-desc { margin-bottom: 10px; }
  .sbc-ref { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sbc-herrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sbc-dosis { grid-template-columns: minmax(0, 1fr) auto; }
  .sbc-desde { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbc-efs li { grid-template-columns: 24px minmax(0, 1fr) 150px 112px; grid-template-areas: "i n b l"; }
  .sbc-evl li { grid-template-columns: 24px minmax(0, 1fr) auto 110px auto; grid-template-areas: "i n c b e"; }
  .sbc-sello-reg { flex: 0 1 auto; }
}
@media (min-width: 768px) {
  .sbc { padding-top: 112px; }
  .sbc-tabs { margin: 0 0 18px; padding: 6px; border: 1px solid var(--sbc-linea); border-radius: 14px; background: var(--sbc-card); top: 84px; }
  .sbc-tabs a { flex: 1 0 auto; justify-content: center; }
  .sbc-sub { margin: 0 0 12px; padding: 2px 0 6px; }
  .sbc-pcqs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sbc-desde { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .sbc-hero { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; padding: 22px 28px; align-items: center; }
  .sbc-hero img { width: 180px; height: 230px; }
  .sbc-res { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .sbc-res-2, .sbc-res-prep { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbc-graf-fig { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 4px 24px; align-items: end; }
  .sbc-graf-fig .sbc-graf { grid-row: 1 / span 2; }
  .sbc-graf-fig .sbc-leyenda { flex-direction: column; align-self: end; }
}
@media (prefers-reduced-motion: no-preference) {
  .sbc-vivo .sbc-panel:not([hidden]), .sbc-vivo .sbc-proto-p:not([hidden]) { animation: sbc-entra .25s ease both; }
  .sbc-tabs a, .sbc-herr, .sbc-hacia, .sbc-sub button { transition: background-color .2s ease, border-color .2s ease; }
  .sbc-vivo .sbc-panel:not([hidden]) .sbc-graf rect { transform-origin: bottom; transform-box: fill-box; animation: sbc-sube .45s ease both; }
  .sbc-vivo .sbc-panel:not([hidden]) .sbc-fz i.on { transform-origin: left; animation: sbc-crece .4s ease both; }
  @keyframes sbc-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes sbc-sube { from { transform: scaleY(0); } to { transform: none; } }
  @keyframes sbc-crece { from { transform: scaleX(0); } to { transform: none; } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA (2026-11-02) · La Consulta, la puerta de las fichas
   Imagen de Edu: docs/referencias/consulta-mockup-2026-11-02/portada-y-ficha.png
   (mitad izquierda). La pinta scripts/gen-consulta-portada.py desde la base y
   la anima assets/js/consulta-portada.js. Prefijo sbp- (lo de arriba, sbc-, es
   la ficha y no se toca). Mobile first: 390 px sin scroll horizontal y botones
   de 44 px; escritorio a tres columnas (filtros · catálogo · herramientas).
   Sin precios. Sin JavaScript se ve todo: los filtros y los botones que solo
   sirven con JS se esconden hasta que el JS pone .sbp-vivo.
   ═══════════════════════════════════════════════════════════════════════════ */
.sbp {
  --sbp-papel: #F5F5F0; --sbp-navy: #001450; --sbp-azul: #2864A0; --sbp-linea: #E0DDD3;
  --sbp-card: #FFFFFF; --sbp-tinta: #1B2540; --sbp-gris: #5A6573;
  --sbp-alta: #2E7D4F; --sbp-alta-bg: #E6F2E9;
  --sbp-media: #B86A12; --sbp-media-bg: #FCEFD9;
  --sbp-prel: #7A818C; --sbp-prel-bg: #ECEDEF;
  --sbp-serif: Georgia, 'Times New Roman', serif;
  --sbp-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  background: var(--sbp-papel); color: var(--sbp-tinta);
  font-family: 'Montserrat', system-ui, sans-serif; padding: 100px 16px 56px; overflow-x: clip;
}
.sbp *, .sbp *::before, .sbp *::after { box-sizing: border-box; }
.sbp [hidden] { display: none !important; }
.sbp-wrap { max-width: 1320px; margin: 0 auto; }
.sbp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sbp-ico { width: 26px; height: 26px; flex: none; }
.sbp-ico-lg { width: 40px; height: 40px; }
.sbp-flecha { width: 15px; height: 15px; flex: none; }

/* a) miga, cabecera y buscador */
.sbp-miga { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sbp-gris); margin-bottom: 10px; }
.sbp-miga a { color: var(--sbp-azul); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.sbp-miga a:hover { text-decoration: underline; }
.sbp-cab { margin-bottom: 16px; }
.sbp-h1 { font-family: var(--sbp-serif); font-weight: 700; color: var(--sbp-navy); font-size: clamp(38px, 10vw, 64px);
  line-height: 1; letter-spacing: -.01em; margin: 0 0 6px; }
.sbp-sub { font-size: clamp(16px, 4.2vw, 20px); color: var(--sbp-navy); margin: 0; }
.sbp-lema { font-size: 15px; line-height: 1.5; color: var(--sbp-tinta); margin: 12px 0 0; max-width: 46ch; }
.sbp-buscar { position: relative; margin: 0 0 18px; max-width: 820px; }
.sbp-buscar .sbp-ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--sbp-gris); width: 22px; height: 22px; pointer-events: none; }
.sbp-buscar input { width: 100%; min-height: 54px; border: 1px solid var(--sbp-linea); background: var(--sbp-card); border-radius: 999px;
  padding: 0 20px 0 52px; font: inherit; font-size: 16px; color: var(--sbp-tinta); box-shadow: 0 2px 10px rgba(0,20,80,.05); }
.sbp-buscar input::placeholder { color: #7B8494; font-size: 14px; }
@media (min-width: 600px) { .sbp-buscar input::placeholder { font-size: 16px; } }
.sbp-buscar input:focus { outline: 3px solid rgba(40,100,160,.25); border-color: var(--sbp-azul); }

/* b) seis accesos */
.sbp-accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 28px; }
.sbp-accesos a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 78px;
  padding: 10px 6px; background: var(--sbp-card); border: 1px solid var(--sbp-linea); border-radius: 14px; color: var(--sbp-navy);
  text-decoration: none; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.2; box-shadow: 0 2px 8px rgba(0,20,80,.04); }
.sbp-accesos a:hover { border-color: var(--sbp-azul); }

/* secciones */
.sbp-sec { margin-bottom: 32px; scroll-margin-top: 96px; }
.sbp-sec-cab { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.sbp-h2 { font-family: var(--sbp-serif); font-weight: 700; color: var(--sbp-navy); font-size: clamp(22px, 5.6vw, 28px); line-height: 1.15; margin: 0; }
.sbp-h3 { font-family: var(--sbp-serif); font-weight: 700; color: var(--sbp-navy); font-size: 20px; margin: 0 0 4px; }
.sbp-txt { font-size: 14px; line-height: 1.55; color: var(--sbp-tinta); margin: 0 0 12px; }
.sbp-ver { display: inline-flex; align-items: center; gap: 4px; color: var(--sbp-azul); font-weight: 600; font-size: 13px;
  text-decoration: none; min-height: 44px; }
.sbp-ver:hover { text-decoration: underline; }

/* c) las áreas en foto */
.sbp-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sbp-area { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--sbp-navy);
  text-decoration: none; isolation: isolate; }
.sbp-area img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.sbp-area::after { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(0,20,80,.88) 0%, rgba(0,20,80,.35) 42%, rgba(0,20,80,0) 70%); }
.sbp-area span { position: absolute; left: 12px; right: 10px; bottom: 10px; color: #fff; font-weight: 700; font-size: 16px; line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.sbp-area.es-activa { outline: 3px solid var(--sbp-azul); outline-offset: 2px; }

/* columnas (celular: una; escritorio: tres) */
.sbp-cols { display: block; }
.sbp-herr { display: none; }

/* d) filtros: plegados en celular */
.sbp-filtros { background: var(--sbp-card); border: 1px solid var(--sbp-linea); border-radius: 14px; margin-bottom: 20px; }
.sbp:not(.sbp-vivo) .sbp-filtros, .sbp:not(.sbp-vivo) [data-sbp-todo] { display: none; }
.sbp-filtros summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none;
  font-weight: 700; color: var(--sbp-navy); font-size: 16px; }
.sbp-filtros summary::-webkit-details-marker { display: none; }
.sbp-filtros summary .sbp-flecha { margin-left: auto; width: 18px; height: 18px; }
.sbp-filtros[open] summary .sbp-flecha { transform: rotate(180deg); }
.sbp-activos { background: var(--sbp-azul); color: #fff; border-radius: 999px; font-size: 12px; min-width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; }
.sbp-filtros-cuerpo { padding: 0 16px 12px; position: relative; }
.sbp-limpiar { position: absolute; top: -48px; right: 48px; font: inherit; font-size: 13px; font-weight: 600; color: var(--sbp-azul);
  background: none; border: 0; min-height: 44px; padding: 0 8px; cursor: pointer; }
.sbp-grupo { border: 0; border-top: 1px solid var(--sbp-linea); margin: 0; padding: 10px 0 4px; }
.sbp-grupo legend { float: left; width: 100%; font-weight: 700; color: var(--sbp-navy); font-size: 14px; padding: 4px 0 6px; }
.sbp-grupo ul { clear: both; list-style: none; margin: 0; padding: 0; }
.sbp-opc { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--sbp-tinta); cursor: pointer; }
.sbp-opc input { width: 18px; height: 18px; margin: 0; accent-color: var(--sbp-navy); flex: none; }
.sbp-n { color: var(--sbp-gris); font-size: 12.5px; margin-left: auto; }
.sbp-punto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: currentColor; }
.sbp-mas { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--sbp-navy);
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; }
.sbp-mas[aria-expanded="true"] .sbp-flecha { transform: rotate(180deg); }

/* colores de la evidencia (uno por grado) */
.sbp-g-alta { color: var(--sbp-alta); --sbp-g-bg: var(--sbp-alta-bg); }
.sbp-g-media { color: var(--sbp-media); --sbp-g-bg: var(--sbp-media-bg); }
.sbp-g-preliminar { color: var(--sbp-prel); --sbp-g-bg: var(--sbp-prel-bg); }

/* e) catálogo */
.sbp-res { font-size: 13px; color: var(--sbp-gris); margin: 0; }
.sbp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sbp-card { display: flex; flex-direction: column; gap: 10px; background: var(--sbp-card); border: 1px solid var(--sbp-linea);
  border-radius: 16px; padding: 14px; box-shadow: 0 2px 10px rgba(0,20,80,.04); min-width: 0; }
.sbp-card-top { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; }
.sbp-card-top img { width: 56px; height: 76px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,20,80,.14)); }
.sbp-card-nombre { font-size: 18px; font-weight: 700; color: var(--sbp-navy); margin: 2px 0 2px; line-height: 1.15; overflow-wrap: anywhere; }
.sbp-card-principal { font-size: 12.5px; color: var(--sbp-gris); margin: 0; line-height: 1.35; }
.sbp-efs { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.sbp-efs li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 7px; align-items: start; font-size: 12.5px; line-height: 1.35; }
.sbp-check { width: 14px; height: 14px; color: var(--sbp-navy); margin-top: 1px; }
.sbp-g { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 14px; border-radius: 999px;
  background: var(--sbp-g-bg); margin-top: 1px; }
.sbp-g i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sbp-sentido { font-size: 12.5px; line-height: 1.4; color: var(--sbp-gris); margin: 0; }
.sbp-sentido b { color: var(--sbp-tinta); font-weight: 600; }
.sbp-etiqueta { font-family: var(--sbp-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.4;
  color: var(--sbp-azul); background: #EEF3F9; border-radius: 6px; padding: 5px 8px; margin: 0; }
.sbp-card-pie { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.sbp-ev { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--sbp-g-bg); padding: 4px 10px;
  font-size: 12px; font-weight: 600; text-decoration: none; }
.sbp-ev i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.sbp-ev span { color: var(--sbp-tinta); }
.sbp-ev-lg { font-size: 14px; padding: 0 16px; min-height: 44px; border: 1px solid transparent; }
.sbp-ev-lg i { width: 10px; height: 10px; }
.sbp-ev-lg b { color: var(--sbp-gris); font-weight: 600; }
.sbp-ev-lg.es-activa { border-color: currentColor; }
.sbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
  border-radius: 10px; background: var(--sbp-navy); color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid var(--sbp-navy); cursor: pointer; }
.sbp-btn:hover { background: #0A2470; }
.sbp-btn-sec { background: var(--sbp-card); color: var(--sbp-navy); }
.sbp-btn-sec:hover { background: #EEF3F9; }
.sbp-btn-ancho { display: flex; width: 100%; margin-top: 14px; background: var(--sbp-card); color: var(--sbp-navy); }
.sbp-btn-ancho:hover { background: #EEF3F9; }
.sbp-vacio { border: 1.5px dashed var(--sbp-linea); border-radius: 16px; padding: 22px 16px; text-align: center; background: var(--sbp-card); }
.sbp-vacio p { margin: 0 0 12px; font-size: 14px; color: var(--sbp-tinta); }

/* f) evidencia */
.sbp-ev-fila { display: flex; flex-wrap: wrap; gap: 10px; }

/* g) A–Z */
.sbp-az { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.sbp-az a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; border-bottom: 1px solid var(--sbp-linea);
  color: var(--sbp-navy); text-decoration: none; font-weight: 600; font-size: 14px; }
.sbp-az a:hover span { text-decoration: underline; }
.sbp-az small { font-family: var(--sbp-mono); font-size: 11px; color: var(--sbp-gris); font-weight: 400; white-space: nowrap; }

/* h) pie: lo que pones tú + calidad */
.sbp-pie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 8px; }
.sbp-tu, .sbp-calidad { border-radius: 16px; padding: 18px 16px; border: 1px solid var(--sbp-linea); }
.sbp-tu { background: #EEF5EC; }
.sbp-habitos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sbp-habitos li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; color: var(--sbp-tinta); }
.sbp-habitos .sbp-ico { color: var(--sbp-navy); width: 28px; height: 28px; }
.sbp-calidad { background: #EDEBE4; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.sbp-calidad > .sbp-ico { color: var(--sbp-navy); }
.sbp-calidad .sbp-btn { margin-top: 2px; }
.sbp-qr { display: none; width: 88px; height: 88px; border-radius: 6px; }

/* herramientas (solo escritorio) */
.sbp-herr a { display: flex; flex-direction: column; gap: 8px; padding: 16px; min-height: 92px; background: var(--sbp-card);
  border: 1px solid var(--sbp-linea); border-radius: 14px; color: var(--sbp-navy); font-weight: 700; font-size: 14px; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,20,80,.04); }
.sbp-herr a:hover { border-color: var(--sbp-azul); }
.sbp-herr .sbp-ico { width: 28px; height: 28px; }

@media (min-width: 600px) {
  .sbp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sbp-qr { display: block; }
  .sbp-calidad { grid-template-columns: 40px minmax(0, 1fr) 88px; }
}
@media (min-width: 768px) {
  .sbp { padding-top: 112px; }
  .sbp-accesos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sbp-pie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sbp-cab { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
  .sbp-lema { margin: 0; padding-left: 32px; border-left: 1px solid var(--sbp-linea); }
  .sbp-areas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sbp-area { aspect-ratio: 4 / 3.1; }
  .sbp-accesos { max-width: 820px; }
}
@media (min-width: 1024px) {
  .sbp-cols { display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px; gap: 28px; align-items: start; }
  .sbp-izq, .sbp-herr { position: sticky; top: 96px; }
  .sbp-izq { max-height: calc(100vh - 110px); overflow: auto; }
  .sbp-herr { display: grid; gap: 12px; }
  .sbp-filtros { background: transparent; border: 0; border-radius: 0; }
  .sbp-filtros summary { padding: 0; min-height: 44px; cursor: default; pointer-events: none; font-size: 17px; }
  .sbp-filtros summary .sbp-flecha, .sbp-activos { display: none !important; }
  .sbp-filtros-cuerpo { padding: 0; }
  .sbp-limpiar { right: 0; top: -44px; }
  .sbp-opc { min-height: 32px; font-size: 13.5px; }
  .sbp-card .sbp-btn { padding: 0 12px; }
  .sbp-card .sbp-ev { padding: 4px 8px; font-size: 11.5px; }
}
@media (min-width: 1280px) {
  .sbp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
  .sbp-area img { transition: transform .4s ease; }
  .sbp-area:hover img { transform: scale(1.04); }
  .sbp-card { animation: sbc-entra .3s ease both; }
  .sbp-accesos a, .sbp-herr a { transition: border-color .2s ease, transform .2s ease; }
  .sbp-accesos a:hover, .sbp-herr a:hover { transform: translateY(-1px); }
}