/* =====================================================================================
   Materiais do Biolab — Episódio 3.0 (Laboratório de Espécimes)
   Kit de superfície: metal enferrujado, chapas rebitadas, etiqueta com código de barras,
   estêncil e marcações de laboratório. Tudo com prefixo ep3-.

   Caminhos: este arquivo vive em temas/biolab/materiais/. As imagens ficam em
   temas/assets/biolab-materiais/ e as fontes em temas/assets/fontes/. Se o CSS for copiado
   para outro lugar, troque o prefixo ../../assets/ (os url() estão escritos direto nas regras,
   nunca dentro de variável, para não depender de como o navegador resolve url() em var()).

   Regra de ouro: material é pano de fundo. Texto nunca fica sobre o fundo sem passar pela
   medição (contraste.json). Ver MATERIAIS.md.
   ===================================================================================== */

@import url("../../assets/fontes/ep3-fontes.css");

:root {
  /* base do rascunho (amostrada de ep3_desktop.png) */
  --ep3-fundo: #05090a;
  --ep3-fundo-2: #0a1112;
  --ep3-cartao: #0c1414;
  --ep3-linha: rgba(94, 214, 168, 0.16);
  --ep3-linha-forte: rgba(94, 214, 168, 0.32);

  /* texto: AA (4,5:1) garantido sobre todos os fundos do kit, no pior pixel (p99,9) */
  --ep3-tinta: #e8f0ee;      /* título, número, destaque */
  --ep3-corpo: #a3b3b0;      /* corpo (o rascunho usa #8ea09e: também passa, com menos folga) */
  --ep3-rotulo: #8fa29e;     /* etiqueta pequena em caixa alta (o #5c706c do rascunho NÃO passa) */

  /* acentos por ato (do rascunho) */
  --ep3-menta: #5ed6a8;
  --ep3-menta-clara: #d4f8ea;
  --ep3-vermelho: #e2707c;        /* do rascunho: só em texto grande (>= 24px, ou 19px negrito) sobre material */
  --ep3-vermelho-texto: #e8808b;  /* vermelho para texto pequeno: 4,9:1 no pior pixel do kit */
  --ep3-rosa: #fc5478;
  --ep3-vinho: #5a1620;
  --ep3-lilas: #b47cfc;           /* idem: texto pequeno sobre material usa --ep3-lilas-texto */
  --ep3-lilas-texto: #c294fd;
  --ep3-dourado: #e4c054;
  --ep3-dourado-claro: #e8cc96;

  /* materiais */
  --ep3-ferrugem: #8a4a22;
  --ep3-ferrugem-escura: #3b1d0e;
  --ep3-aco: #7d8786;
  --ep3-aco-escuro: #1a2020;
  --ep3-ambar: #b98a2c;
  --ep3-papel: #e4dfd0;
  --ep3-papel-tinta: #15191a;
  --ep3-papel-vermelho: #86131f;
  --ep3-papel-cinza: #3c4241;

  /* fontes */
  --ep3-f-titulo: "Oxanium", "Segoe UI", system-ui, sans-serif;
  --ep3-f-estencil: "Saira Stencil One", "Oxanium", sans-serif;
  --ep3-f-estencil-estreita: "Big Shoulders Stencil", "Oxanium", sans-serif;
  --ep3-f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* tamanho do ladrilho (os arquivos têm 2x: 512 px de imagem = 256 px de tela) */
  --ep3-mat-tam: 256px;
}

/* ---------------------------------------------------------------- base escura do rascunho */
.ep3-base {
  background-color: var(--ep3-fundo);
  background-image:
    radial-gradient(60rem 36rem at 8% -6%, rgba(46, 140, 104, 0.22), transparent 62%),
    radial-gradient(56rem 34rem at 96% -4%, rgba(150, 34, 52, 0.22), transparent 62%),
    linear-gradient(rgba(94, 214, 168, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 214, 168, 0.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  color: var(--ep3-corpo);
  font-family: var(--ep3-f-titulo);
}

/* ---------------------------------------------------------------- fundos de material
   Uso: <section class="ep3-mat ep3-mat--chapa-enferrujada"> ... </section>
   O material vai num ::before atrás do conteúdo, com as bordas de cima e de baixo dissolvendo
   no fundo da página (nada de retângulo com quina). Ajustes por variável:
     --ep3-mat-opac  (0..1, padrão .9)   quanto do material aparece
     --ep3-mat-fade  (padrão 22%)        quanto dissolve em cima e embaixo
     --ep3-mat-tam   (padrão 256px)      tamanho do ladrilho
     --ep3-mat-x / --ep3-mat-y           deslocamento (para dois blocos vizinhos não repetirem igual) */
.ep3-mat {
  position: relative;
  isolation: isolate;
}
.ep3-mat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--ep3-fundo);
  background-repeat: repeat;
  background-size: var(--ep3-mat-tam) auto;
  background-position: var(--ep3-mat-x, 0) var(--ep3-mat-y, 0);
  opacity: var(--ep3-mat-opac, 0.9);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--ep3-mat-fade, 22%), #000 calc(100% - var(--ep3-mat-fade, 22%)), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 var(--ep3-mat-fade, 22%), #000 calc(100% - var(--ep3-mat-fade, 22%)), transparent);
}
/* vinheta lateral opcional: o material some nas laterais e fica só atrás da coluna de texto */
.ep3-mat--vinheta::before {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 var(--ep3-mat-fade, 22%), #000 calc(100% - var(--ep3-mat-fade, 22%)), transparent),
    radial-gradient(ellipse 70% 90% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent, #000 var(--ep3-mat-fade, 22%), #000 calc(100% - var(--ep3-mat-fade, 22%)), transparent),
    radial-gradient(ellipse 70% 90% at 50% 50%, #000 40%, transparent 100%);
          mask-composite: intersect;
}
.ep3-mat--chapa-enferrujada::before { background-image: url("../../assets/biolab-materiais/fundo-chapa-enferrujada.webp"); }
.ep3-mat--chapa-diamante::before    { background-image: url("../../assets/biolab-materiais/fundo-chapa-diamante.webp"); }
.ep3-mat--parede-tubos::before      { background-image: url("../../assets/biolab-materiais/fundo-parede-tubos.webp"); }
.ep3-mat--parede-manchada::before   { background-image: url("../../assets/biolab-materiais/fundo-parede-manchada.webp"); background-size: calc(var(--ep3-mat-tam) * 0.922) auto; }
.ep3-mat--piso-pesadelo::before     { background-image: url("../../assets/biolab-materiais/fundo-piso-pesadelo.webp"); }
.ep3-mat--chapa-ocre::before        { background-image: url("../../assets/biolab-materiais/fundo-chapa-ocre.webp"); background-size: calc(var(--ep3-mat-tam) * 0.5) auto; }

/* arranhões finos por cima de qualquer superfície grande (camada ::after) */
.ep3-arranhado { position: relative; }
.ep3-arranhado::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("../../assets/biolab-materiais/arranhoes.webp") 0 0 / 256px auto repeat;
  opacity: var(--ep3-arranhado-opac, 0.55);
  mix-blend-mode: screen;
}

/* ---------------------------------------------------------------- chapa de destaque (cartão / placa)
   <div class="ep3-placa"> ... </div>               aço rebitado
   <div class="ep3-placa ep3-placa--ferrugem">       chapa enferrujada
   Aro de 16 px com rebite nos 4 cantos e quina chanfrada (moldura-rebitada.webp, 9 fatias),
   mais a camada de desgaste na borda (desgaste-borda.webp) no ::after. */
.ep3-placa {
  position: relative;
  border: 16px solid transparent;
  border-image: url("../../assets/biolab-materiais/moldura-rebitada.webp") 32 / 16px round;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.2)),
    url("../../assets/biolab-materiais/chapa-destaque-aco.webp") 0 0 / 256px auto repeat,
    var(--ep3-cartao);
  background-clip: padding-box;
  background-origin: padding-box;
  color: var(--ep3-corpo);
  padding: 14px 18px;
}
.ep3-placa--ferrugem {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.22)),
    url("../../assets/biolab-materiais/chapa-destaque-ferrugem.webp") 0 0 / 256px auto repeat,
    var(--ep3-cartao);
  background-clip: padding-box;
  background-origin: padding-box;
}
.ep3-placa::after {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  border: 32px solid transparent;
  border-image: url("../../assets/biolab-materiais/desgaste-borda.webp") 64 / 32px round;
  opacity: var(--ep3-desgaste-opac, 0.85);
}
/* sem rebite (cartão pequeno, chip): só a chapa e a borda gasta, com 1 px de aresta */
.ep3-placa--lisa {
  border: 1px solid rgba(201, 208, 207, 0.12);
  border-image: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ep3-placa--lisa::after { inset: 0; border-width: 20px; border-image-width: 20px; opacity: 0.6; }

/* ---------------------------------------------------------------- rebites e parafusos */
.ep3-rebite {
  display: inline-block;
  width: var(--ep3-rebite-tam, 10px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #c9d0cf 0 7%, #7d8786 26%, #2f3636 70%, #151a1a 100%);
  box-shadow: 1px 1.5px 1.5px rgba(0, 0, 0, 0.65), 0 0 0 0.75px #0b0f0f, 0 0 5px 1px rgba(107, 52, 24, 0.35);
  vertical-align: middle;
}
.ep3-parafuso {
  display: inline-block;
  width: var(--ep3-rebite-tam, 14px);
  aspect-ratio: 1;
  background: url("../../assets/biolab-materiais/parafuso-cruz.svg") center / contain no-repeat;
  vertical-align: middle;
}
.ep3-parafuso--fenda      { background-image: url("../../assets/biolab-materiais/parafuso-fenda.svg"); }
.ep3-parafuso--sextavado  { background-image: url("../../assets/biolab-materiais/parafuso-sextavado.svg"); }
/* quatro rebites nos cantos de qualquer bloco, sem HTML a mais (usa o ::before) */
.ep3-cantos-rebitados { position: relative; }
.ep3-cantos-rebitados::before {
  content: "";
  position: absolute;
  inset: var(--ep3-cantos-inset, 7px);
  pointer-events: none;
  --r: radial-gradient(circle at 36% 32%, #c9d0cf 0 7%, #7d8786 26%, #2f3636 66%, #0b0f0f 74%, transparent 78%);
  background: var(--r), var(--r), var(--r), var(--r);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  filter: drop-shadow(1px 1.5px 1px rgba(0, 0, 0, 0.7));
}

/* ---------------------------------------------------------------- faixa de atenção (com moderação)
   No máximo uma por tela. Lugar certo: aviso de Desperto, porta de acesso, divisória de ato.
   Nunca atrás de texto. Altura de 6 a 12 px. */
.ep3-faixa-atencao {
  display: block;
  height: var(--ep3-faixa-alt, 10px);
  background: url("../../assets/biolab-materiais/faixa-atencao.webp") 0 50% / auto 100% repeat-x;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
  opacity: 0.9;
}
/* versão em CSS na cor do pesadelo (vermelho), gasta pela máscara de tinta */
.ep3-faixa-atencao--vermelha {
  background: repeating-linear-gradient(-45deg, rgba(226, 112, 124, 0.85) 0 9px, rgba(10, 4, 6, 0.95) 9px 18px);
  -webkit-mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 160px auto repeat;
          mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 160px auto repeat;
}
.ep3-faixa-atencao--menta {
  background: repeating-linear-gradient(-45deg, rgba(94, 214, 168, 0.7) 0 9px, rgba(4, 10, 8, 0.95) 9px 18px);
  -webkit-mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 160px auto repeat;
          mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 160px auto repeat;
}

/* ---------------------------------------------------------------- estêncil
   Texto pintado com molde. Para código curto, número de ato, marcação de ala. Nunca em parágrafo. */
.ep3-estencil {
  font-family: var(--ep3-f-estencil);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ep3-estencil-cor, rgba(232, 240, 238, 0.86));
  text-shadow: 0 0 0.5px currentColor, 0 0 7px rgba(232, 240, 238, 0.08);
  -webkit-mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / var(--ep3-tinta-tam, 180px) auto repeat;
          mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / var(--ep3-tinta-tam, 180px) auto repeat;
}
.ep3-estencil--estreito { font-family: var(--ep3-f-estencil-estreita); font-weight: 800; letter-spacing: 0.04em; }
.ep3-estencil--menta    { --ep3-estencil-cor: rgba(94, 214, 168, 0.9); }
.ep3-estencil--vermelho { --ep3-estencil-cor: var(--ep3-vermelho-texto); }
.ep3-estencil--ambar    { --ep3-estencil-cor: rgba(214, 170, 74, 0.9); }
/* número de ato gigante vazado, como no rascunho, agora em estêncil */
.ep3-estencil--vazado {
  color: transparent;
  -webkit-text-stroke: var(--ep3-traco, 1.5px) var(--ep3-estencil-traco, rgba(94, 214, 168, 0.45));
  text-shadow: none;
}

/* ---------------------------------------------------------------- etiqueta de espécime
   Papel envelhecido, faixa lateral de cor, código de barras de verdade (Code 128) e rótulo humano.
   HTML (o gerador Python monta com codigo_barras.etiqueta_html):
   <figure class="ep3-etiqueta">
     <figcaption class="ep3-etiqueta__topo"><span>ESPÉCIME</span><span>01</span></figcaption>
     <div class="ep3-etiqueta__barras"><svg ...></svg></div>       (ou data-ep3-barras="..." + codigo-barras.js)
     <span class="ep3-etiqueta__codigo">ESP-01 SEYREN</span>
     <span class="ep3-etiqueta__linha">SEYREN WINDSOR · NÍVEL 120</span>
   </figure> */
.ep3-etiqueta {
  position: relative;
  display: inline-grid;
  justify-items: start;
  gap: 3px;
  margin: 0;
  padding: 7px 10px 7px 15px;
  background: url("../../assets/biolab-materiais/papel-etiqueta.webp") 0 0 / 128px auto repeat, var(--ep3-papel);
  color: var(--ep3-papel-tinta);
  font: 500 10px/1.3 var(--ep3-f-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--ep3-giro, -0.6deg));
}
.ep3-etiqueta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  border-radius: 2px 0 0 2px;
  background: var(--ep3-etiqueta-faixa, var(--ep3-papel-vermelho));
}
.ep3-etiqueta__topo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  font-weight: 600;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(21, 25, 26, 0.55);
}
.ep3-etiqueta__barras { line-height: 0; color: var(--ep3-papel-tinta); }
.ep3-etiqueta__barras svg { display: block; }
.ep3-etiqueta__codigo { font-weight: 600; letter-spacing: 0.16em; }
.ep3-etiqueta__linha { color: var(--ep3-papel-cinza); }
.ep3-etiqueta__linha strong { color: var(--ep3-papel-tinta); font-weight: 600; }
.ep3-etiqueta--desperto { --ep3-etiqueta-faixa: repeating-linear-gradient(-45deg, var(--ep3-papel-vermelho) 0 4px, var(--ep3-papel-tinta) 4px 8px); }
.ep3-etiqueta--menta { --ep3-etiqueta-faixa: #1f7a5a; }
/* fita adesiva segurando a etiqueta */
.ep3-etiqueta--fita::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 46px;
  height: 14px;
  transform: translateX(-50%) rotate(2deg);
  background: linear-gradient(180deg, rgba(232, 230, 214, 0.42), rgba(210, 206, 186, 0.32));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 90px auto;
          mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 90px auto;
}
/* código gravado na chapa (barras claras no escuro). Decorativo: leitor comum não lê invertido. */
.ep3-etiqueta--gravada {
  background: rgba(0, 0, 0, 0.35);
  color: rgba(232, 240, 238, 0.78);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: none;
}
.ep3-etiqueta--gravada::before { display: none; }
.ep3-etiqueta--gravada .ep3-etiqueta__barras { color: rgba(201, 208, 207, 0.7); }
.ep3-etiqueta--gravada .ep3-etiqueta__linha { color: var(--ep3-rotulo); }
.ep3-etiqueta--gravada .ep3-etiqueta__topo { border-bottom-color: rgba(201, 208, 207, 0.2); }

/* ---------------------------------------------------------------- marcações de laboratório */
/* carimbo (tinta vermelha gasta, girado) — palavra curta e verdadeira: DESPERTO, NÍVEL 125... */
.ep3-carimbo {
  display: inline-block;
  padding: 3px 9px 2px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--ep3-carimbo-cor, var(--ep3-vermelho-texto));
  font: 400 15px/1 var(--ep3-f-estencil);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(var(--ep3-giro, -7deg));
  -webkit-mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 120px auto repeat;
          mask: url("../../assets/biolab-materiais/mascara-tinta.webp") 0 0 / 120px auto repeat;
}
/* cantoneiras de registro (marca de corte) em volta de um bloco */
.ep3-registro {
  position: relative;
  --c: var(--ep3-registro-cor, rgba(94, 214, 168, 0.5));
  --t: 12px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--t),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--t);
  background-repeat: no-repeat;
}
/* régua graduada (tanque, proveta, medidor) — vertical ou horizontal */
.ep3-regua {
  --c: var(--ep3-regua-cor, rgba(94, 214, 168, 0.55));
  width: 18px;
  background:
    repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 50px) right / 18px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--c) 0 1px, transparent 1px 10px) right / 9px 100% no-repeat;
}
.ep3-regua--h {
  width: auto;
  height: 14px;
  background:
    repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 50px) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 10px) bottom / 100% 7px no-repeat;
}
/* símbolo de risco biológico (herda a cor do texto) */
.ep3-biorrisco {
  display: inline-block;
  width: var(--ep3-icone-tam, 22px);
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url("../../assets/biolab-materiais/biorrisco.svg") center / contain no-repeat;
          mask: url("../../assets/biolab-materiais/biorrisco.svg") center / contain no-repeat;
  vertical-align: middle;
}
/* rótulo pequeno em caixa alta espaçada (como no rascunho), já na cor que passa AA */
.ep3-rotulo {
  font: 600 11px/1.3 var(--ep3-f-titulo);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ep3-rotulo);
}