/* ============================================================
   DIAGRAMAS TÉCNICOS
   ------------------------------------------------------------
   Todo el trazo va con `currentColor`, así que el dibujo cambia
   de color con el tema sin una sola regla duplicada. Lo genera
   js/diagramas.js.
   ============================================================ */

.dg {
  display: block; width: 100%; height: auto;
  color: var(--tinta);          /* de aquí sale el currentColor */
  overflow: visible;
}

/* --- la pieza ------------------------------------------------ */
.dg-obj {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Un relleno apenas perceptible: separa la pieza del fondo sin
   competir con las líneas, que son lo que se lee en un plano. */
.dg-relleno { fill: currentColor; fill-opacity: .07; }
.dg-fino { stroke-width: 1; stroke-dasharray: 4 3; opacity: .55; }

/* --- cotas --------------------------------------------------- */
.dg-cota {
  fill: none; stroke: currentColor; stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* Las líneas de referencia van más flojas que la cota: guían el
   ojo pero no compiten con la medida. */
.dg-ref {
  fill: none; stroke: currentColor; stroke-width: .8;
  opacity: .45; vector-effect: non-scaling-stroke;
}
.dg-txt {
  fill: currentColor; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.dg-nota {
  fill: var(--apagado); font-family: var(--sans);
  font-size: 9.5px; letter-spacing: .04em;
}

/* La cota protagonista —la altura en las bases, el ancho en las
   tablas— va en el acento. Es lo que él quería que se leyera
   primero: cuánto elevan. */
.dg-destacada .dg-cota,
.dg-destacada .dg-ref  { stroke: var(--acento-claro); opacity: 1; }
/* El texto de la cota va con el token de TEXTO: en claro el de
   relleno se queda en 2,96:1 y la cifra no se lee. La línea de
   arriba sí puede seguir con el de relleno, que es un trazo. */
.dg-destacada .dg-txt  { fill: var(--acento-texto); }
.dg-destacada          { color: var(--acento-texto); }

/* --- el suelo y el portátil ---------------------------------- */
.dg-suelo {
  fill: none; stroke: currentColor; stroke-width: 1;
  opacity: .35; stroke-dasharray: 6 4;
  vector-effect: non-scaling-stroke;
}
/* El portátil es contexto, no producto: va más flojo para que no
   se confunda con la pieza que se vende. */
.dg-fantasma { opacity: .5; }
.dg-fantasma .dg-obj { stroke-width: 1.3; stroke-dasharray: 5 3; }

/* --- el cambur de referencia --------------------------------- */
.dg-cambur {
  fill: currentColor; fill-opacity: .13;
  stroke: currentColor; stroke-width: .22;
  opacity: .8; vector-effect: non-scaling-stroke;
}
.dg-cambur-txt { opacity: .8; }