/* Base do NUVON OS — assenta sobre os tokens do design system Nuvon Maker.
   Nada aqui inventa cor ou espaçamento: tudo sai de _ds/.../tokens/*.css. */
@import url("../_ds/nuvon-maker-design-system-73699fa2-7972-45b7-bfd2-bcfb989c54f2/styles.css");

:root {
  /* Papéis semânticos do OS (secção 04 da identidade). A paleta é a do
     Nuvon Maker; o que se acrescenta é o significado. */
  --os-voz-dormindo: var(--nv-metal-500);
  --os-voz-ouvindo: var(--nv-purple-500);
  --os-voz-pensando: var(--nv-copper-400);
  --os-voz-falando: var(--nv-orange-500);
  --os-aprov-pendente: var(--nv-warning);
  --os-aprov-confirmado: var(--nv-success);
  --os-aprov-recusado: var(--nv-text-muted);
  --os-perigo: var(--nv-danger);
  --os-dados-frescos: var(--nv-text-primary);
  --os-dados-velhos: var(--nv-warning);
  --os-servico-mock: var(--nv-purple-300);
  --os-norte: var(--nv-gradient-north);
}

* { box-sizing: border-box; }

/* O atributo hidden e display:none no user-agent, e qualquer regra nossa com
   display: flex/grid ganha-lhe. Vale mais reforca-lo aqui uma vez do que
   descobrir, tela a tela, o que ficou visivel sem dever. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--nv-bg);
  color: var(--nv-text-primary);
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  line-height: var(--nv-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Tipografia de marca — Cinzel só nomeia, nunca corre texto. */
.marca {
  font-family: var(--nv-font-display);
  font-weight: 700;
  letter-spacing: var(--nv-tracking-brand);
  text-transform: uppercase;
}
.marca .os { color: var(--nv-text-secondary); }

.titulo {
  font-family: var(--nv-font-display);
  font-weight: 600;
  line-height: var(--nv-leading-title);
  letter-spacing: var(--nv-tracking-display);
  color: var(--nv-text-primary);
  margin: 0;
}

.sobrancelha {
  font-size: var(--nv-text-xs);
  font-weight: var(--nv-weight-bold);
  letter-spacing: var(--nv-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--nv-copper-400);
}

.mono { font-family: var(--nv-font-mono); }

/* Botões. Um único cheio por tela (orçamento de laranja 1+2). */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nv-space-2);
  height: var(--nv-control-height);
  padding: 0 var(--nv-space-5);
  border-radius: var(--nv-radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--nv-duration-fast) var(--nv-ease-out),
              background var(--nv-duration-fast) var(--nv-ease-out),
              border-color var(--nv-duration-fast) var(--nv-ease-out);
}
.botao:hover { transform: translateY(var(--nv-lift-hover)); }
.botao:active { transform: scale(var(--nv-press-scale)); }
.botao:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.botao--primario {
  background: var(--nv-action-primary);
  color: var(--nv-text-on-action);
  font-weight: var(--nv-weight-semibold);
}
.botao--primario:hover { background: var(--nv-action-primary-hover); }

.botao--secundario {
  background: var(--nv-surface-glass);
  border-color: var(--nv-border-subtle);
  color: var(--nv-text-primary);
}
.botao--secundario:hover { background: var(--nv-surface-glass-hover); }

.botao--fantasma {
  background: transparent;
  color: var(--nv-text-secondary);
}
.botao--fantasma:hover { color: var(--nv-text-primary); background: var(--nv-surface-glass); }

.botao--sm { height: var(--nv-control-height-sm); padding: 0 var(--nv-space-4); font-size: var(--nv-text-sm); }
.botao--lg { height: var(--nv-control-height-lg); padding: 0 var(--nv-space-6); font-size: var(--nv-text-base); }

/* Cartão — o recipiente por omissão. */
.cartao {
  padding: var(--nv-pad-card);
  border-radius: var(--nv-radius-md);
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-gradient-card), var(--nv-surface);
}

/* Selo/chip. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  height: 22px;
  padding: 0 var(--nv-space-2);
  border-radius: var(--nv-radius-pill);
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-glass);
  font-size: 11px;
  font-weight: var(--nv-weight-medium);
  color: var(--nv-text-secondary);
  white-space: nowrap;
}
.selo__ponto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Movimento — curto e direcional, nunca salta (tokens de motion.css). */
@keyframes osIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes osSpin { to { transform: rotate(360deg); } }
@keyframes osBreathe { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes osBar { 0%, 100% { transform: scaleY(.85); } 50% { transform: scaleY(1.15); } }
@keyframes osBarTalk { 0% { transform: scaleY(.7); } 30% { transform: scaleY(1.28); } 60% { transform: scaleY(.9); } 100% { transform: scaleY(.7); } }
@keyframes osBarThink { 0%, 100% { transform: scaleY(.88); } 50% { transform: scaleY(1.06); } }
@keyframes osSleep { 0%, 100% { transform: scaleY(.55); } 50% { transform: scaleY(.62); } }
@keyframes osDots { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes osBlink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes osPulse { 0%, 100% { opacity: .3; } 50% { opacity: .9; } }
@keyframes osScaleIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Mascote — cinco barras no gradiente norte, a do meio é o rosto.
   A cor do halo diz o estado; o corpo só muda dormindo e sem ligação. */
.mascote { display: block; }
.mascote__barra { transform-box: fill-box; transform-origin: center; transition: fill var(--nv-duration-slow) var(--nv-ease-out); }
.mascote__halo { transform-box: fill-box; transform-origin: center; transition: stroke var(--nv-duration-slow), opacity var(--nv-duration-slow); }
.mascote__olhos { transform-box: fill-box; transform-origin: center; }

.mascote[data-estado="dormindo"] .mascote__halo { stroke: var(--os-voz-dormindo); opacity: .35; }
.mascote[data-estado="dormindo"] .mascote__barra { animation: osSleep 4s ease-in-out infinite; }
.mascote[data-estado="ouvindo"] .mascote__halo { stroke: var(--os-voz-ouvindo); opacity: .85; animation: osSpin 24s linear infinite; }
.mascote[data-estado="ouvindo"] .mascote__barra { animation: osBar 1.5s ease-in-out infinite; }
.mascote[data-estado="pensando"] .mascote__halo { stroke: var(--os-voz-pensando); opacity: .85; animation: osSpin 6s linear infinite; }
.mascote[data-estado="pensando"] .mascote__barra { animation: osBarThink 1.8s ease-in-out infinite; }
.mascote[data-estado="falando"] .mascote__halo { stroke: var(--os-voz-falando); opacity: .6; animation: osBreathe 1.2s ease-in-out infinite; }
.mascote[data-estado="falando"] .mascote__barra { animation: osBarTalk .62s ease-in-out infinite; }
.mascote[data-estado="offline"] .mascote__halo { stroke: var(--os-perigo); opacity: .6; animation: osPulse 1.6s ease-in-out infinite; }
.mascote[data-estado="offline"] .mascote__barra { animation: none; }
.mascote[data-estado="dormindo"] .mascote__olhos,
.mascote[data-estado="ouvindo"] .mascote__olhos,
.mascote[data-estado="falando"] .mascote__olhos { animation: osBlink 5s ease-in-out infinite; }

/* Atrasos por barra — a onda tem de correr, não pulsar em bloco. */
.mascote__barra:nth-child(2) { animation-delay: 0s; }
.mascote__barra:nth-child(3) { animation-delay: .12s; }
.mascote__barra:nth-child(4) { animation-delay: .24s; }
.mascote__barra:nth-child(5) { animation-delay: .36s; }
.mascote__barra:nth-child(6) { animation-delay: .48s; }

/* Acessibilidade: só para leitores de ecrã. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}