/* ============================================================
   La jeringa dibujada — colores y tamaño.

   El SVG que devuelve assets/jeringa.js no trae ni un color escrito a mano:
   todos salen de aquí. Eso es lo que le permite vivir en dos páginas
   distintas —la calculadora pública y la bitácora del cliente— y en tema
   claro y oscuro sin tocar el dibujo.

   Cómo funcionan los respaldos: cada variable se sirve primero de la paleta
   del sitio (--ink, --ink-dim, --cyan, --amber) y, si esa paleta no existe
   porque el componente se usó en otra página, cae en un valor propio. El
   bloque del final cambia SOLO esos respaldos según el tema del sistema;
   donde el sitio sí define su paleta, manda ella.

   Todo cuelga de la tinta, incluidas las piezas de estructura: el vidrio,
   el borde de vidrio, la aguja y la varilla son la misma tinta con distinta
   opacidad. Estaban puestas como grises azulados fijos y se medió el fallo
   en el navegador: en una página clara cuya paleta decía «tinta oscura»,
   los grises seguían siendo los del tema oscuro —los elige la consulta de
   medios, no la paleta— y el cilindro desaparecía sobre el blanco. Colgando
   de la tinta, la estructura sigue a la página anfitriona sea cual sea.
   ============================================================ */

.jeringa {
  /* Los cuatro colores de los que sale todo lo demás */
  --jer-tinta:   var(--ink, #16202e);       /* trazo, tapón, estructura */
  --jer-tenue:   var(--ink-dim, #6b7c93);   /* escala y metal */
  --jer-acento:  var(--cyan, #0a86a0);      /* el líquido, y solo él */
  --jer-alerta:  var(--amber, #b06a00);     /* cuando la dosis no cabe */

  --jer-titular: var(--font-display, "Segoe UI", system-ui, sans-serif);
  --jer-texto:   var(--font-body, "Segoe UI", system-ui, sans-serif);

  display: block;
  width: 100%;
  /* Con viewBox y sin altura fija el navegador conserva la proporción él
     solo. Ponerle una altura en píxeles sería justo lo que no queremos. */
  height: auto;
  /* En un monitor grande una jeringa de 900 px de ancho se ve absurda. */
  max-width: 460px;
  margin: 0 auto;
  overflow: visible;
}

/* ---------- Aguja ---------- */
.jer-aguja path {
  stroke: var(--jer-tenue);
  stroke-width: 2.6;
  stroke-opacity: 0.85;
  fill: none;
}
.jer-aguja .jer-bisel {
  fill: var(--jer-tenue);
  fill-opacity: 0.85;
  stroke: none;
}

/* ---------- Cono y cilindro ----------
   Es vidrio: relleno muy tenue y borde de 1 px. Tiene que leerse como
   recipiente, no como barra llena. */
.jer-cono,
.jer-vidrio,
.jer-brida {
  fill: var(--jer-tinta);
  fill-opacity: 0.07;
  stroke: var(--jer-tinta);
  stroke-opacity: 0.34;
  stroke-width: 1;
  stroke-linejoin: round;
}

/* ---------- Líquido ----------
   El único elemento con el color de la marca. */
.jer-liquido {
  fill: var(--jer-acento);
  fill-opacity: 0.8;
}

/* ---------- Varilla y apoyo del pulgar ---------- */
.jer-varilla {
  fill: var(--jer-tinta);
  fill-opacity: 0.28;
}

/* ---------- Tapón ----------
   Es lo que marca la lectura, así que es la pieza con más contraste del
   dibujo: aquí la tinta va entera, sin rebajar. */
.jer-tapon {
  fill: var(--jer-tinta);
}

/* ---------- Escala ---------- */
.jer-raya {
  stroke: var(--jer-tenue);
  stroke-width: 1;
  stroke-opacity: 0.65;
  fill: none;
}
.jer-raya-larga {
  stroke-width: 1.4;
  stroke-opacity: 1;
}
.jer-numeros text {
  fill: var(--jer-tenue);
  font-family: var(--jer-texto);
  /* 12,5 en un lienzo de 360 son ~10,4 px reales en un teléfono de 375 y
     ~9 en uno de 320. Por debajo de eso los números dejan de leerse. */
  font-size: 12.5px;
  font-weight: 600;
  text-anchor: middle;
}

/* ---------- La lectura ----------
   Lo primero que mira la persona. */
.jer-guia {
  stroke: var(--jer-tinta);
  stroke-width: 1;
  stroke-opacity: 0.55;
  fill: none;
}
.jer-cifra {
  fill: var(--jer-tinta);
  font-family: var(--jer-titular);
  font-size: 19px;
  font-weight: 700;
}

/* ---------- Cuando no cabe ---------- */
.jer-alerta-fondo { fill: var(--jer-alerta); }
.jer-liquido.jer-alerta-fondo { fill-opacity: 0.8; }
.jer-alerta-texto .jer-cifra { fill: var(--jer-alerta); }
.jer-alerta-texto .jer-guia { stroke: var(--jer-alerta); stroke-opacity: 0.85; }

.jer-sobrante-rayas {
  stroke: var(--jer-alerta);
  stroke-opacity: 0.5;
  fill: none;
}
.jer-sobrante-borde {
  stroke: var(--jer-alerta);
  stroke-width: 1;
  stroke-opacity: 0.9;
  fill: none;
}
.jer-aviso {
  fill: var(--jer-alerta);
  font-family: var(--jer-texto);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- Tema claro y tema oscuro ----------
   Solo se tocan los respaldos, y solo hacen falta cuatro. Si la página
   anfitriona define --ink, --ink-dim, --cyan o --amber, esos siguen
   mandando: el sitio de LabsPep es oscuro siempre y aquí no cambia nada. */
@media (prefers-color-scheme: dark) {
  .jeringa {
    --jer-tinta:  var(--ink, #e7f1ff);
    --jer-tenue:  var(--ink-dim, #93a6c0);
    --jer-acento: var(--cyan, #22e6ff);
    --jer-alerta: var(--amber, #ffc766);
  }
}

/* ============================================================
   El envoltorio

   El dibujo es la CONFIRMACIÓN, no la respuesta. La respuesta va en texto
   normal, fuera del SVG, para que se pueda seleccionar y copiar.
   ============================================================ */
.jeringa-caja {
  margin: 14px auto 4px;
  max-width: 460px;
}

/* En la bitácora la jeringa va dentro de la tarjeta de hoy, debajo del
   número grande. Un poco de aire arriba y una raya que la separa del
   texto: es otra forma de decir lo mismo, no un dato nuevo. */
.seg-hoy .jeringa-caja {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 200, 255, 0.12);
}

/* Dentro de una opción de dosis fija el dibujo ya viene separado por la
   propia tarjeta: ahí la raya sobra. */
.seg-opcion .jeringa-caja {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 400px) {
  /* A 320 px el lienzo se encoge a ~0,72 y los números de la escala bajan
     de 9 px. Estirar la caja hasta el borde de la tarjeta devuelve los
     píxeles que hacen falta para que se sigan leyendo. */
  .seg-hoy .jeringa-caja { margin-left: -6px; margin-right: -6px; }
}