/* tema-margem.css - o tema Margem: a tela e o mundo e o design e so tipografia nas margens, sem
   caixa, sem painel. UMA coluna, lida de cima para baixo: a fase, a manchete do laudo como titulo
   de documentario, o detalhe, as lesoes como legenda; e, embaixo, o pulso e a acao. A linha do
   sangue fica na margem esquerda como a espinha da tela, marcada no limiar em que se desmaia
   quando o servidor o manda. Silencioso e elegante.

   A gravidade de cada lesao e tipografica, no idioma do tema: a palavra (leve, moderada, grave,
   critica) na meta, e um traco vertical fino a esquerda da lesao, cuja intensidade sobe com o
   grau. Sem barras crescentes: as quatro barrinhas da maquete pareciam sinal de Wi-Fi, e o dono
   reprovou em 2026-09-30.

   Tudo por token. So transform e opacity animam; o nivel do sangue e um scaleY. */
.mg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; --mg-altura: calc(1080px - 2 * var(--vt-margem)); }

/* ---- o sangue: a espinha da margem esquerda ------------------------------------------------ */
.mg-sangue {
	position: absolute;
	left: var(--vt-margem);
	top: var(--vt-margem);
	height: var(--mg-altura);
	width: 2px;
	background: var(--vt-fio);
}
.mg-sangue__nivel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	transform: scaleY(calc(var(--vt-sangue) / 100));
	transform-origin: bottom;
	background: var(--aqua-danger);
	transition: transform var(--vt-nivel) linear;
}
/* O limiar: onde o Ferido desmaia. Um tracinho que cruza a linha e o numero, pequeno, a esquerda.
   So existe quando a mensagem traz o limiar (--mg-limiar, escrito pelo tema-margem.js). */
.mg-sangue__limiar {
	position: absolute;
	left: -5px;
	width: 12px;
	height: 2px;
	bottom: calc(var(--mg-limiar, 40) * 1%);
	background: var(--vt-apagado);
}
.mg-sangue__limiar-n {
	position: absolute;
	right: calc(100% + var(--aqua-space-3));
	bottom: calc(var(--mg-limiar, 40) * 1%);
	transform: translateY(50%);
	font-family: var(--aqua-font-mono);
	font-size: var(--vt-fs-mini);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--vt-fraco);
}
/* O rotulo desce com o nivel, por transform, e para num piso para nao cair sobre a acao. */
.mg-sangue__rotulo {
	position: absolute;
	left: var(--aqua-space-3);
	bottom: 0;
	transform: translateY(50%) translateY(calc(-1 * max(var(--vt-sangue) / 100 * var(--mg-altura), 88px)));
	display: flex;
	align-items: baseline;
	gap: var(--aqua-space-2);
	white-space: nowrap;
	transition: transform var(--vt-nivel) linear;
}
.mg-sangue__rotulo b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-medio); font-weight: 500; color: var(--aqua-danger); line-height: 1; }
.mg-sangue__rotulo small { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }

/* ---- a coluna, de cima: a fase, a manchete, as lesoes -------------------------------------- */
.mg-topo {
	position: absolute;
	left: var(--vt-coluna);
	top: calc(var(--vt-margem) - var(--aqua-space-2));
	max-width: 720px;
	display: flex;
	flex-direction: column;
}
.mg-fase {
	font-size: var(--vt-fs-fase);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	transition: color var(--vt-fase-t) var(--aqua-ease-in-out);
}
.mg[data-fase="out"] .mg-fase { color: var(--vt-apagado); }
.mg-laudo { display: flex; flex-direction: column; gap: var(--aqua-space-1); padding-top: var(--aqua-space-4); }
.mg-laudo__titulo { font-size: var(--vt-fs-medio); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.mg-laudo__detalhe { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }
.mg-lesoes { display: flex; flex-direction: column; gap: var(--aqua-space-2); padding-top: var(--aqua-space-6); }
.mg-lesao { display: flex; align-items: baseline; gap: var(--aqua-space-3); }
/* A gravidade: um traco vertical fino, a altura da linha, que sobe de um fio apagado a perigo
   cheio conforme o grau. Sombra escura fixa por baixo, para ler sobre o mundo sem filtro. */
.mg-lesao__grau {
	display: block;
	align-self: stretch;
	flex: none;
	width: 2px;
	border-radius: 1px;
	background: rgb(var(--aqua-text-rgb) / 28%);
	box-shadow: 0 0 0 1px rgb(var(--aqua-black-rgb) / 40%);
}
.mg-lesao[data-grau="2"] .mg-lesao__grau { background: rgb(var(--aqua-text-rgb) / 55%); }
.mg-lesao[data-grau="3"] .mg-lesao__grau { background: rgb(var(--aqua-danger-rgb) / 75%); }
.mg-lesao[data-grau="4"] .mg-lesao__grau { background: var(--aqua-danger); }
.mg-lesao__texto { font-size: var(--vt-fs-corpo); }
.mg-lesao__meta { font-size: var(--vt-fs-meta); color: var(--vt-apagado); white-space: nowrap; }
.mg-lesao[data-estancado] .mg-lesao__texto { color: var(--vt-apagado); }
.mg-lesao[data-estancado] .mg-lesao__grau { background: rgb(var(--aqua-text-rgb) / 28%); }

/* ---- a coluna, de baixo: o pulso e a acao -------------------------------------------------- */
.mg-base {
	position: absolute;
	left: var(--vt-coluna);
	bottom: var(--vt-margem);
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-6);
}
.mg-pulso { display: flex; align-items: flex-end; gap: var(--aqua-space-4); }
.mg-bpm { display: flex; align-items: baseline; gap: var(--aqua-space-2); padding-bottom: var(--aqua-space-1); }
.mg-bpm b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-medio); font-weight: 500; line-height: 1; display: inline-block; }
.mg-bpm b:empty { display: none; }
.mg-bpm span { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }
.mg-acoes { display: flex; flex-direction: column; gap: var(--aqua-space-3); }

/* ---- a visao do medico: o prontuario do paciente na mesma coluna --------------------------- */
.mg-medico {
	position: absolute;
	left: var(--vt-coluna);
	top: 50%;
	width: 620px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-2);
}
.mg-medico__fase { font-size: var(--vt-fs-medio); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.mg-medico__sangue { display: flex; align-items: baseline; gap: var(--aqua-space-2); padding-top: var(--aqua-space-2); }
.mg-medico__sangue b { font-family: var(--aqua-font-mono); font-variant-numeric: tabular-nums; font-size: var(--vt-fs-medio); font-weight: 500; line-height: 1; color: var(--aqua-danger); }
.mg-medico__sangue span { font-size: var(--vt-fs-meta); color: var(--vt-apagado); }
.mg-medico__linha { display: block; width: 280px; height: 2px; background: var(--vt-fio); }
.mg-medico__linha i { display: block; height: 100%; width: 100%; transform: scaleX(calc(var(--vt-sangue) / 100)); transform-origin: left; background: var(--aqua-danger); transition: transform var(--vt-nivel) linear; }
.mg-medico .mg-pulso { padding: var(--aqua-space-2) 0; }
.mg-medico .mg-laudo { padding-top: var(--aqua-space-2); }
.mg-medico .mg-laudo__titulo { font-size: var(--vt-fs-corpo); }
.mg-medico .mg-laudo__detalhe { font-size: var(--vt-fs-meta); }
.mg-medico .mg-lesoes { padding-top: var(--aqua-space-3); padding-bottom: var(--aqua-space-3); }
.mg-medico .mg-lesao__texto { font-size: var(--vt-fs-meta); }
.mg-medico .mg-lesao__meta { font-size: var(--vt-fs-mini); }
.mg-medico .mg-acoes { padding-top: var(--aqua-space-2); }

/* ---- o modo simples: o que aconteceu, e o tempo como o unico numero grande ----------------- */
.mg-simples {
	position: absolute;
	left: var(--vt-coluna);
	bottom: var(--vt-margem);
	display: flex;
	flex-direction: column;
	gap: var(--aqua-space-3);
}
.mg-simples__titulo { font-size: var(--vt-fs-medio); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; }
.mg-simples__tempo {
	font-family: var(--aqua-font-mono);
	font-size: var(--vt-fs-tempo);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}
.mg-simples__linha { font-size: var(--vt-fs-corpo); color: var(--vt-apagado); }