/* ══════════════════════════════════════════════════════════════════════
   BIO·PEPTIDES · base compartida
   ══════════════════════════════════════════════════════════════════════

   POR QUÉ EXISTE ESTE ARCHIVO

   El sitio tenía nueve bloques <style> independientes y ninguna hoja común.
   Cada página empezó como copia de otra y fue derivando dos píxeles por aquí,
   un grado de radio por allá. El recuento del día que se midió:

       46 tamaños de letra distintos (de 8 a 62 px, varios con medio píxel)
       22 radios de esquina
       48 sombras escritas a mano
      208 combinaciones de padding
       16 puntos de ruptura
        8 definiciones distintas de .btn
        6 de .card
        7 anchos de contenedor

   Eso no se nota mirando una página; se nota al pasar de una a otra. El
   contenido se desplaza de lado, los botones cambian de tamaño, las tarjetas
   cambian de sombra. El visitante no sabe decir qué le chirría, pero le
   chirría, y en una tienda que vende confianza eso se paga.

   Aquí está lo compartido. Cada página conserva su <style> con lo que de
   verdad es suyo.

   ══════════════════════════════════════════════════════════════════════
   CÓMO USARLO
   ══════════════════════════════════════════════════════════════════════

   <link rel="stylesheet" href="/bp.css">   ANTES del <style> de la página.

   Así lo de la página gana cuando hace falta, sin necesidad de !important.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ───────────────────────────────────────────────────────────
     Un solo valor por concepto. Antes --bg tenía cuatro valores distintos
     según la página y --amber tres, con el mismo nombre. */
  --navy: #0d2240;
  --navy2: #16335a;
  --blue: #3a66a3;
  --blue2: #4a78b8;
  --lblue: #8fb4e0;
  --bg: #eef4fc;
  --bg2: #e3edfa;
  --card: #fff;
  --ink: #0d2240;
  --body: #54657a;
  --hair: #e2ebf7;

  --cta: #136f44;
  --cta2: #12784a;
  --gold: #d8a526;

  --ok: #178551;   --okbg: #eaf5ee;   --okbd: #bfe0cb;
  --warn: #8a6410; --warnbg: #fdf6e6; --warnbd: #f0e0b8;
  --alto: #b4232a; --altobg: #fcecec; --altobd: #f2c9c9;

  /* ── Tipografía ──────────────────────────────────────────────────────
     Nueve tamaños. Los 46 anteriores se reparten en estos:
       8-10.5 → 2xs · 11.5-12.8 → xs · 13-13.5 → sm · 14-15.5 → base
       16-17 → md · 18-21 → lg · 22-28 → xl · 30-38 → 2xl · 40+ → 3xl */
  --t-2xs: 11px;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 17px;
  --t-lg: 20px;
  --t-xl: 26px;
  --t-2xl: 34px;
  --t-3xl: clamp(32px, 5vw, 52px);

  /* Cuatro alturas de línea, no veintidós. */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.6;
  --lh-loose: 1.7;

  /* ── Espacio ─────────────────────────────────────────────────────────
     Escala de 4. Antes convivían 11px 13px, 11px 14px, 12px 13px, 12px 14px,
     12px 15px y 13px 15px para el mismo tipo de caja. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ── Forma ───────────────────────────────────────────────────────────
     Cuatro radios. Antes veintidós. */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ── Profundidad ─────────────────────────────────────────────────────
     Tres niveles, y cada uno significa una cosa:
       1 = en reposo · 2 = el puntero encima · 3 = por encima de todo */
  --sh-1: 0 2px 14px rgba(13, 34, 64, .05);
  --sh-2: 0 10px 28px rgba(13, 34, 64, .10);
  --sh-3: 0 24px 56px rgba(13, 34, 64, .18);

  /* ── Tiempo ──────────────────────────────────────────────────────────
     Tres duraciones. Antes nueve solo en la portada. */
  --dur-fast: .12s;
  --dur: .2s;
  --dur-slow: .4s;
}

/* ══════════════════════════════════════════════════════════════════════
   RESET
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* Sin esto, una imagen sin altura declarada se pinta a su tamaño real y
   rompe el contenedor. Es lo que le pasó al logotipo de la portada: 400 px
   dentro de una cabecera de 70. */
img, svg, video { max-width: 100%; height: auto; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  color: var(--navy);
  line-height: var(--lh-tight);
}
h3, h4 { line-height: var(--lh-snug); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

/* Las cifras se alinean en columna. En una tabla de dosis, que el 9 y el 4
   ocupen lo mismo evita tener que releer para comparar. */
.num, td.num, .precio, .kpi .n { font-variant-numeric: tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD
   ══════════════════════════════════════════════════════════════════════ */

/* El foco de teclado no existía en siete de las nueve páginas, y en la
   portada se suprimía con outline:none en los tres campos sin poner nada en
   su lugar. Un panel médico y un panel de administración son interfaces de
   teclado: sin foco visible no se pueden usar. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #1a4d8f;
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* iOS hace zoom al enfocar un campo de menos de 16 px, y luego no lo
   deshace. En un formulario de pago eso es un carrito abandonado. */
input, select, textarea { font-size: 16px; }

/* Objetivo táctil mínimo. Los +/- del carrito estaban a 28 px, y es el
   control que más se toca en una compra. */
button, .btn, [role="button"], .tab, .chip {
  min-height: 44px;
}

/* `hidden` tiene que ganar siempre. El navegador lo aplica con la misma
   especificidad que una clase, así que un `.panel{display:flex}` lo anula:
   el elemento se marca oculto, sigue en pantalla, y su botón de cerrar
   parece que no hace nada. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .btn:hover, [class*="card"]:hover { transform: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTENEDOR
   ══════════════════════════════════════════════════════════════════════
   Dos anchos. Antes siete, entre 1020 y 1240 px, así que el contenido daba
   un salto lateral en cada cambio de página. */
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 var(--s5); width: 100%; }
.wrap.app { max-width: 1080px; }
.wrap.ancho { max-width: 1320px; }
@media (max-width: 640px) { .wrap { padding: 0 var(--s4); } }

/* ══════════════════════════════════════════════════════════════════════
   BOTÓN
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: var(--t-base); line-height: 1; letter-spacing: .2px;
  padding: 14px var(--s5); border-radius: var(--r); min-height: 48px;
  border: none; cursor: pointer; white-space: nowrap; text-align: center;
  transition: background var(--dur-fast) ease,
              transform var(--dur-fast) ease,
              box-shadow var(--dur) ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn.sm { padding: 10px var(--s4); font-size: var(--t-sm); border-radius: var(--r-sm); min-height: 44px; }
.btn.lg { padding: 17px 30px; font-size: var(--t-md); border-radius: 14px; min-height: 56px; }
.btn.bloque { width: 100%; }

.btn.bp { background: var(--cta); color: #fff; }
.btn.bp:hover { background: var(--cta2); box-shadow: var(--sh-2); }
.btn.bn { background: var(--navy); color: #fff; }
.btn.bn:hover { background: var(--navy2); box-shadow: var(--sh-2); }
.btn.bo { background: #fff; color: var(--navy); border: 1.5px solid var(--hair); }
.btn.bo:hover { border-color: var(--blue); color: var(--blue); }

/* Botón de contorno SOBRE FONDO OSCURO.
   ──────────────────────────────────────────────────────────────────
   Existe por un fallo que estuvo en producción: el botón «Verificar un
   lote» de la portada se veía como un rectángulo vacío.

   Llevaba `style="color:#fff"` puesto a mano, porque la portada es azul
   marino y ahí el texto tiene que ser blanco. Cuando se escribió, `.bo`
   tenía `background:transparent` y todo cuadraba. Al llegar esta hoja,
   `.btn.bo` —dos clases, más específica que `.bo`— le puso fondo blanco.
   El estilo en línea seguía mandando en el color y nadie mandaba ya en el
   fondo: blanco sobre blanco. Contraste 1:1, texto invisible.

   La lección no es «cuidado con la especificidad», es que un color de
   texto puesto a mano SIN su fondo es una bomba de relojería: sobrevive a
   cualquier cambio de hoja de estilos y se lleva por delante el contraste.
   Por eso esto es una clase que fija LOS DOS a la vez. */
.btn.bo-oscuro {
  background: transparent;
  color: #fff;
  border-color: rgba(143, 180, 224, .5);
}
.btn.bo-oscuro:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .75);
  color: #fff;
}
.btn.bd { background: #fff; color: var(--alto); border: 1.5px solid #f0d0d0; }
.btn.bd:hover { background: var(--altobg); }

/* ══════════════════════════════════════════════════════════════════════
   TARJETA
   ══════════════════════════════════════════════════════════════════════
   La sombra existía en la mitad de las páginas y en la otra mitad no, con
   tres radios y cuatro paddings. Puestas una al lado de otra, dos páginas
   del mismo sitio parecían de sitios distintos. */
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--s5);
  margin-bottom: var(--s4);
}
.card > h2 { font-size: var(--t-md); margin: 0 0 var(--s1); }
.card.plana { box-shadow: none; }
@media (max-width: 640px) { .card { padding: var(--s4); border-radius: 14px; } }

/* ══════════════════════════════════════════════════════════════════════
   PIEZAS SUELTAS
   ══════════════════════════════════════════════════════════════════════ */

/* La etiqueta en versalita sobre un título. Existía con siete
   especificaciones distintas y cuatro nombres: .htag, .kick, .cattag,
   .pcat, .eyebrow, .shead. */
.kick, .eyebrow {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: var(--t-2xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue);
}

.sub { font-size: var(--t-sm); color: var(--body); line-height: var(--lh-base); }
.hint { font-size: var(--t-xs); color: var(--body); line-height: 1.55; margin-top: var(--s1); }

.av { border-radius: var(--r); padding: var(--s3) 14px; font-size: var(--t-sm);
      line-height: var(--lh-base); margin-bottom: var(--s3); }
.av.ok { background: var(--okbg); border: 1px solid var(--okbd); color: #12603b; }
.av.warn { background: var(--warnbg); border: 1px solid var(--warnbd); color: var(--warn); }
.av.alto { background: var(--altobg); border: 1px solid var(--altobd); color: var(--alto); }

/* Tabla que desborda en móvil. Esta parte ya estaba bien resuelta en el
   proyecto; solo se unifican los valores. */
.tw { overflow-x: auto; margin: 0 calc(var(--s5) * -1); padding: 0 var(--s5); -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) { .tw { margin: 0 calc(var(--s4) * -1); padding: 0 var(--s4); } }

th { font-family: 'Poppins', sans-serif; font-size: var(--t-2xs); font-weight: 700;
     letter-spacing: .07em; text-transform: uppercase; color: var(--blue);
     text-align: left; padding: 9px 10px; border-bottom: 1.5px solid var(--hair); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid #f0f5fb; font-size: var(--t-sm); }

label { display: block; font-size: var(--t-sm); font-weight: 600;
        color: var(--navy); margin: var(--s3) 0 var(--s1); }
input, select, textarea {
  width: 100%; padding: 11px var(--s3);
  border: 1.5px solid #d6e3f2; border-radius: var(--r-sm);
  color: var(--ink); background: #fbfdff; font-family: inherit;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); background: #fff; }

/* El logotipo. Tiene que llevar altura declarada aquí, no en la página:
   la vez que se quedó sin ella, se pintó a 400 px dentro de una cabecera de
   70 y reventó la maquetación durante semanas. */
.bplogo { display: block; height: 34px; width: auto; flex: none; }
.bplogo.sm { height: 27px; }
.bplogo.lg { height: 46px; }
@media (max-width: 640px) { .bplogo { height: 29px; } .bplogo.lg { height: 36px; } }

@media print {
  .no-print, .noprint { display: none !important; }
  .card { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

/* ══════════════════════════════════════════════════════════════════════
   LOS TRES PANELES: ESPERA, FALLO, VACÍO Y MÓVIL
   ══════════════════════════════════════════════════════════════════════

   El panel del influencer, el del médico y el de administración hacen lo
   mismo tres veces: se abren, piden al servidor y hasta que contesta no
   hay nada en pantalla. Cada uno lo resolvía a su manera y ninguna era
   buena.

   Un párrafo que dice «Cargando…» no reserva el sitio que va a ocupar el
   contenido: cuando llegan los datos la página entera da un salto, y en
   un teléfono el dedo acaba pulsando lo que no era. Y un fallo que solo
   ofrece «recarga la página» tira por el desagüe el filtro que acababas
   de poner.

   Esto es lo compartido de los tres. Vive aquí y no en cada página por lo
   mismo que el resto del archivo: tres copias divergen, una no.
   ══════════════════════════════════════════════════════════════════════ */

/* ── El hueco que espera ──────────────────────────────────────────────
   El brillo que recorre la pieza es lo que separa «esperando» de «roto».
   Un bloque gris quieto se lee como contenido que no cargó; el mismo
   bloque con movimiento se lee como contenido que viene de camino.

   Con `prefers-reduced-motion` la regla de más arriba deja la animación
   en una pasada: se queda el bloque gris, que sigue reservando el sitio
   —que es la mitad del trabajo— sin mover nada. */
@keyframes bp-brillo { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.esq {
  display: block;
  border-radius: var(--r-sm);
  background: #e6eef8 linear-gradient(90deg, #e6eef8 0%, #f3f8fd 45%, #e6eef8 90%);
  background-size: 220% 100%;
  animation: bp-brillo 1.3s linear infinite;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.esq::after { content: "\00a0"; }        /* alto sin depender de la fuente */
.esq.l1 { height: 11px; margin: 7px 0; }
.esq.l2 { height: 19px; margin: 9px 0; }
.esq.l3 { height: 29px; margin: 10px 0; }
.esq.w40 { width: 40%; }
.esq.w60 { width: 60%; }
.esq.w80 { width: 80%; }

/* ── La entrada, escalonada ───────────────────────────────────────────
   Seis tarjetas que aparecen a la vez son un parpadeo; las mismas seis
   con cuarenta milisegundos entre una y otra se leen en el orden en que
   están puestas. No es adorno: es lo que dirige la mirada al primer dato.
   Se para en la sexta a propósito, porque a partir de ahí el retraso
   acumulado ya se nota como lentitud. */
@keyframes bp-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.entra { animation: bp-entra .22s cubic-bezier(.22, 1, .36, 1) both; }
.entra:nth-child(2) { animation-delay: .04s; }
.entra:nth-child(3) { animation-delay: .08s; }
.entra:nth-child(4) { animation-delay: .12s; }
.entra:nth-child(5) { animation-delay: .16s; }
.entra:nth-child(n+6) { animation-delay: .2s; }

/* ── Lo que ha cambiado respecto del periodo anterior ─────────────────
   Una cifra sola no responde «¿cómo voy?»: responde «cuánto». Para saber
   si eso es bueno hace falta contra qué compararlo. Solo se pinta cuando
   el periodo anterior existe de verdad y tiene datos; inventar un «+0%»
   cuando no hay con qué comparar es peor que no poner nada. */
.delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: var(--t-2xs); padding: 2px 7px;
  border-radius: var(--r-full); white-space: nowrap;
}
.delta.sube { background: var(--okbg); color: #12603b; }
.delta.baja { background: var(--altobg); color: var(--alto); }
.delta.plano { background: #eef2f7; color: var(--body); }

/* ── El vacío que enseña el paso siguiente ────────────────────────────
   «No hay datos» deja a quien mira sin saber si está roto o si le toca a
   él. Un vacío útil dice las dos cosas: qué falta y cuál es el botón. */
.vac { text-align: center; padding: var(--s5) var(--s4); color: var(--body); }
.vac b { display: block; font-family: 'Poppins', sans-serif; font-size: var(--t-base);
         color: var(--navy); margin-bottom: var(--s1); }
.vac p { font-size: var(--t-sm); line-height: var(--lh-base); max-width: 46ch;
         margin: 0 auto var(--s3); }

/* ── El fallo, con salida ─────────────────────────────────────────────
   Un error que solo se puede resolver recargando pierde el filtro, la
   pestaña y el sitio donde estabas. El botón repite la misma petición y
   deja todo lo demás como estaba. */
.malo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; text-align: left;
  background: var(--altobg); border: 1px solid var(--altobd); color: var(--alto);
  border-radius: var(--r); padding: 14px 16px;
  font-size: var(--t-sm); line-height: var(--lh-base);
}
.malo b { display: block; font-family: 'Poppins', sans-serif; color: var(--alto); }
.malo .btn { background: #fff; color: var(--alto); border: 1.5px solid var(--altobd); }

/* ── La tabla, en un teléfono ─────────────────────────────────────────
   Diez columnas en 390 px no se leen: se lee la primera y se adivinan
   las demás. Se convierten en fichas apiladas y cada celda lleva delante
   el título que le corresponde en el encabezado.

   El `min-width` va con `!important` porque varias tablas lo llevan
   escrito en el atributo `style`, y un estilo en línea gana a cualquier
   hoja. Sin esto la ficha apilada seguiría midiendo 940 px. */
@media (max-width: 640px) {
  .tabla-ficha { min-width: 0 !important; }
  .tabla-ficha thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-ficha tr {
    display: block; background: #fff; border: 1px solid var(--hair);
    border-radius: var(--r); padding: 11px 13px; margin-bottom: 9px;
  }
  .tabla-ficha td {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3);
    padding: 6px 0; border-bottom: 1px solid #f0f5fb; text-align: right;
  }
  .tabla-ficha tr td:last-child { border-bottom: none; }
  .tabla-ficha td::before {
    content: attr(data-t); font-family: 'Poppins', sans-serif;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--blue); text-align: left; flex: none;
  }
  /* Una celda sin contenido ni título es la columna de los botones que ya
     se pintó arriba, o un hueco de la fila de totales. Ocupa alto y no
     dice nada. */
  .tabla-ficha td:empty { display: none; }
  .tabla-ficha tfoot tr { background: #f6f9fd; }
  /* La fila que ocupa toda la tabla —«todavía no hay ventas»— no es un par
     título/valor: es un párrafo. Se le quita el título y se centra. */
  .tabla-ficha td[colspan] { display: block; text-align: center; padding: 16px 4px; border-bottom: none; }
  .tabla-ficha td[colspan]::before { display: none; }
}

/* Solo para quien navega a oídas. Un `hidden` lo escondería también del
   lector de pantalla, y entonces nadie sabría que se está esperando. */
.solo-lector {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   SUELO DE LEGIBILIDAD EN MÓVIL
   ══════════════════════════════════════════════════════════════════

   Repartidos por el sitio había textos de 8 y 8.5 px: los rótulos en
   versalitas del tipo «RESEARCH USE ONLY» o «FAT LOSS · METABÓLICO».

   En un monitor pasan por detalle de diseño. En un teléfono son ilegibles,
   y lo peor es que varios de ellos NO son decorativos: llevan el aviso
   legal de uso, la línea del producto, la fecha del lote. Información que
   alguien tiene que poder leer.

   Se sube el suelo solo por debajo de 640 px de ancho. No se toca el
   escritorio, donde la jerarquía funciona.

   El suelo estuvo en 10.5 px y se quedó corto: medido en un iPhone de
   390 px seguía habiendo 84 textos por debajo de 12 px, y con el teléfono
   en la mano eso obliga a ampliar con dos dedos para leer el precio o la
   línea del producto. 12 px es el mínimo con el que una versalita se lee
   sin acercarse la pantalla; por debajo, el interlineado apretado y el
   espaciado entre letras juegan en contra.

   Va con `!important` a propósito, y no es pereza: estas reglas viven
   repartidas en el bloque <style> de cada página, que se carga DESPUÉS de
   esta hoja y por tanto gana. La alternativa era editar a mano decenas de
   selectores en diez archivos y confiar en no dejarme ninguno — y en que
   nadie añada otro mañana. Un suelo mínimo de legibilidad es justo el tipo
   de regla que conviene que sea inapelable.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .kick, .ruo, .annc, .cattag, .badge, .bad, .segg,
  .hd small, .brand small, .brandw span, .ctag, .seal span,
  .paystrip-t, .acaentra-c span, .flab-k, .cfam,
  /* `.k`, `.tag`, `.dbadge` y `.gate-k` entran aquí y no en el grupo de
     prosa de abajo: comprobadas todas sus definiciones, las nueve son
     rótulos en mayúsculas con espaciado entre letras («PACIENTE»,
     «CARGA EN LA JERINGA»), no frases. */
  .k, .tag, .dbadge, .gate-k {
    font-size: 12px !important;
    /* El espaciado baja de .08 a .06: a 12 px la versalita ya se lee, y
       .08em la ensanchaba lo bastante como para partir en dos líneas la
       barra de aviso superior en pantallas de 360 px. */
    letter-spacing: .06em !important;
  }

  /* Segundo grupo, y va aparte por un motivo concreto: esto son FRASES,
     no rótulos en versalitas. El `letter-spacing` de arriba es correcto
     para «FAT LOSS» y desastroso para «Para calcular el IMC solo hace
     falta la talla», que se lee peor separada letra a letra.

     Aquí están los textos de ayuda que van bajo los campos del panel
     médico: 32 de ellos, del tipo «Para calcular el IMC solo hace falta
     la talla». Son justo los que un médico lee con el teléfono en la
     mano, junto al paciente. */
  .hint {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Panel médico. Estas clases solo existen dentro de la sesión del
     médico, así que no se pueden ver sin entrar con una cuenta: se
     localizaron leyendo el DOM de la página con el panel aún oculto.
     Estaban entre 10.5 y 11.5 px.

     Advertencia honesta para quien lea esto: la corrección está hecha a
     ciegas sobre el marcado, no comprobada con los ojos. Conviene que un
     médico abra el panel en su teléfono y confirme que nada se desborda,
     sobre todo la tabla de laboratorios. */
  .bpmark small, .uu, .es-op-e, .es-op-n b, .hecho-i b {
    font-size: 12px !important;
  }
  /* Cabeceras de tabla: la de laboratorios («Cuándo», «Valor», «Rango»)
     estaba a 10.5 px, y es la que se lee para comparar resultados. */
  table th {
    font-size: 12px !important;
  }
}