/* <magin-soeducador> (assets/magin-soeducador.js): o Magin com o ícone da SóEducador.
   Em arquivo, e não num <style> criado pelo script: a CSP do site (style-src 'self') recusaria.
   --ms-fundo é a cor do fundo da cena (o recorte entre o Magin e a plaquinha). */

magin-soeducador {
  --ms-corpo: var(--violet-500, #7b2ff2);
  --ms-ponta: var(--emerald-500, #10b981);
  --ms-soedu: #7800e1;
  display: inline-block;
  line-height: 0;
  /* o componente põe a proporção da pose; a página só escolhe a largura */
  aspect-ratio: var(--ms-proporcao, auto);
}

magin-soeducador svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ms-corpo {
  fill: var(--ms-corpo);
  stroke: var(--ms-fundo, #fff);
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: stroke;
}

.ms-ponta {
  fill: var(--ms-ponta);
}

/* Bracinho: só o traço, com a ponta arredondada (sem mão) */
.ms-braco {
  fill: none;
  stroke: var(--ms-corpo);
  stroke-width: 6.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ms-dedo {
  stroke-width: 5;
}

.ms-placa {
  fill: #fff;
  stroke: var(--ms-fundo, #fff);
  stroke-width: 5;
  paint-order: stroke;
}

.ms-placa-linha {
  fill: none;
  stroke: rgba(76, 26, 158, 0.16);
  stroke-width: 1;
}

.ms-soedu {
  fill: var(--ms-soedu);
}

.ms-pilula {
  fill: #fff;
}

.ms-arco {
  display: none;
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
}

[data-expr='feliz'] .ms-pilula,
[data-expr='contente'] .ms-pilula {
  display: none;
}

[data-expr='feliz'] .ms-feliz,
[data-expr='contente'] .ms-contente {
  display: block;
}

.ms-risco {
  fill: none;
  stroke: var(--ms-ponta);
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* Óculos escuros (poses "estiloso"): armação e lentes quase pretas, com reflexo e estrelinha brancos */
.ms-oculos-lente {
  fill: #1a1033;
}

.ms-oculos-reflexo {
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.85;
}

.ms-brilho {
  fill: #fff;
}