/* =========================================================================
   Diagramas didacticos en SVG.

   Los colores se declaran como variables locales para que el mismo diagrama
   funcione sobre fondo crema y sobre fondo tinta sin duplicar marcado.
   ========================================================================= */

.astrea-diagrama {
	--dg-fondo:   var(--astrea-crema);
	--dg-tarjeta: var(--astrea-blanco);
	--dg-linea:   var(--astrea-linea);
	--dg-texto:   var(--astrea-tinta);
	--dg-suave:   var(--astrea-gris);
	--dg-oro:     var(--astrea-oro-texto);
	--dg-alerta:  #B91C1C;
	--dg-medio:   #C2760A;
	--dg-ok:      #15803D;

	margin: 40px 0;
	padding: clamp(16px, 2.5vw, 28px);
	border: 1px solid var(--astrea-linea);
	border-radius: var(--astrea-radio);
	background: var(--astrea-blanco);
}

/* Sobre fondo oscuro se invierte la escala de grises. */
.astrea-seccion--oscura .astrea-diagrama,
.astrea-cta-bloque .astrea-diagrama {
	--dg-fondo:   var(--astrea-tinta);
	--dg-tarjeta: rgba(252, 249, 247, .06);
	--dg-linea:   var(--astrea-linea-clara);
	--dg-texto:   var(--astrea-crema);
	--dg-suave:   rgba(252, 249, 247, .72);
	--dg-oro:     var(--astrea-oro-sobre-tinta);
	--dg-alerta:  #F4A8A8;
	--dg-medio:   #F0C066;
	--dg-ok:      #86EFAC;

	background: rgba(252, 249, 247, .04);
	border-color: var(--astrea-linea-clara);
}

.astrea-diagrama__lienzo { overflow-x: auto; overscroll-behavior-x: contain; }
.astrea-diagrama__lienzo:focus-visible { outline: 2px solid var(--astrea-oro); outline-offset: 4px; border-radius: 4px; }

.astrea-diagrama svg { width: 100%; height: auto; display: block; }

.astrea-diagrama figcaption {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--astrea-linea);
	color: var(--astrea-gris);
	font-size: 14px;
	line-height: 1.55;
}
.astrea-seccion--oscura .astrea-diagrama figcaption { border-color: var(--astrea-linea-clara); color: rgba(252, 249, 247, .72); }

/* ---------- Tipografia dentro del SVG ---------- */

.astrea-diagrama text {
	font-family: var(--astrea-texto);
	fill: var(--dg-texto);
}

.astrea-diagrama .dg-etiqueta { font-size: 14px; font-weight: 700; }
.astrea-diagrama .dg-nota     { font-size: 12.5px; font-weight: 500; fill: var(--dg-suave); }
.astrea-diagrama .dg-micro    { font-size: 11px;   font-weight: 600; fill: var(--dg-suave); letter-spacing: .04em; }
.astrea-diagrama .dg-fecha    { font-size: 13px;   font-weight: 700; fill: var(--dg-oro); }

.astrea-diagrama .dg-hoy {
	font-size: 12px;
	font-weight: 700;
	fill: var(--dg-oro);
	letter-spacing: .14em;
}

.astrea-diagrama .dg-numero {
	font-family: var(--astrea-display);
	font-size: 19px;
	font-weight: 600;
	fill: var(--dg-oro);
}

.astrea-diagrama .dg-paso {
	font-size: 13px;
	font-weight: 700;
	fill: #FFFFFF;
}

.astrea-diagrama .dg-cifra {
	font-family: var(--astrea-display);
	font-size: 15px;
	font-weight: 600;
	fill: var(--dg-texto);
	text-anchor: start;
}

/* En una pantalla de 390px el viewBox de 800 se escala al 37% y el texto
   quedaria a 6px: ilegible. Subir el tamano nominal no alcanza, porque el
   escalado del viewBox lo vuelve a reducir. La solucion es fijar un ancho
   minimo que mantenga el texto sobre 13px efectivos y dejar que el lienzo
   se desplace. 780px sobre 800 = escala 0.98, que deja la etiqueta en 14.6px
   efectivos y la nota en 13.2px, que es el minimo comodo de lectura. */
@media (max-width: 700px) {
	.astrea-diagrama svg { min-width: 780px; }

	.astrea-diagrama .dg-etiqueta { font-size: 15px; }
	.astrea-diagrama .dg-nota     { font-size: 13.5px; }
	.astrea-diagrama .dg-micro    { font-size: 12px; }
	.astrea-diagrama .dg-fecha    { font-size: 14px; }
	.astrea-diagrama .dg-hoy      { font-size: 13px; }
	.astrea-diagrama .dg-cifra    { font-size: 16px; }
	.astrea-diagrama .dg-numero   { font-size: 20px; }

	/* Pista visual de que hay mas contenido a la derecha. */
	.astrea-diagrama__lienzo {
		background:
			linear-gradient(to right, var(--dg-fondo) 30%, rgba(252,249,247,0)) left / 32px 100% no-repeat,
			linear-gradient(to left,  var(--dg-fondo) 30%, rgba(252,249,247,0)) right / 32px 100% no-repeat;
		background-attachment: local, local;
	}
	.astrea-diagrama figcaption::before {
		content: "Desliza el diagrama para verlo completo. ";
		font-weight: 700;
		color: var(--astrea-oro-texto);
	}
}

@media print {
	.astrea-diagrama { break-inside: avoid; }
}