@font-face {
  font-family: "Inter Variable";
  src: url("../assets/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  src: url("../assets/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --marca: #1E4FD8;
  --marca-escura: #173CA8;
  --tinta: #101826;
  --tinta-suave: #4B5874;
  --fundo: #E6ECF5;
  --linha: #D8E0EC;
  --superficie: rgba(255, 255, 255, 0.94);
  --sombra: 0 10px 30px rgba(14, 42, 90, 0.14), 0 2px 6px rgba(14, 42, 90, 0.08);
  --fonte: "Inter Variable", Inter, Arial, system-ui, sans-serif;
  --fonte-titulo: "Utendo", "Plus Jakarta Sans Variable", Arial, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: var(--fonte);
  color: var(--tinta);
  background: radial-gradient(120% 90% at 50% 0%, #F4F7FC 0%, var(--fundo) 60%);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }

.app { position: fixed; inset: 0; }
.palco { position: absolute; inset: 0; cursor: pointer; }

.btn-icone {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; cursor: pointer;
  color: var(--tinta);
}
.btn-icone:hover { background: #EEF2F8; }
.btn-icone:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px;
}
.btn-icone .ico { width: 20px; height: 20px; }
.palco canvas { display: block; width: 100%; height: 100%; }
.carga { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 42%, #0E1D4F 0%, #070B18 72%); transition: opacity 0.4s ease; } /* rodada 11: tela de abertura escura */
.carga.saindo { opacity: 0; pointer-events: none; }
.carga-cartao { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px; max-width: 340px; }
.carga-anel { position: relative; width: 128px; height: 128px; margin-bottom: 10px; }
.carga-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.carga-trilho { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 6; }
.carga-arco { fill: none; stroke: #4DD9FF; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.5 100; }
.carga-anel[data-modo="indet"] .carga-svg { animation: carga-giro 1.1s linear infinite; }
.carga-anel[data-modo="indet"] .carga-arco { stroke-dasharray: 24 100; }
.carga-anel[data-modo="erro"] .carga-arco { stroke: #c0392b; stroke-dasharray: 100 100; }
.carga-icone { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; transform: translate(-50%, -50%); } /* símbolo Farmais */
.carga-anel[data-modo="indet"] .carga-icone { animation: carga-pulso 2.2s ease-in-out infinite; }
@keyframes carga-giro { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes carga-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.carga-valor { margin: 0; min-height: 30px; font: 600 24px/30px var(--fonte-titulo); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.carga-etapa { margin: 0; font: 600 15px/1.35 var(--fonte); color: #FFFFFF; }
.carga-medida { margin: 0; min-height: 18px; font: 500 12.5px/1.4 var(--fonte); color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .carga-anel[data-modo="indet"] .carga-svg { animation-duration: 3s; } .carga-anel[data-modo="indet"] .carga-icone { animation: none; } }
.msg { max-width: 84%; padding: 8px 10px; border-radius: 10px; font: 500 13px/1.35 var(--fonte); color: #111b21; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.msg.cli { align-self: flex-end; background: #d9fdd3; } .msg.ia { align-self: flex-start; background: #fff; }