/* UNIMES redesign — primitivas (layout, botoes, links, formularios, cartoes, tipografia). CSS puro, sem build. */

.unimes-container {
  width: min(calc(100% - (2 * var(--unimes-space-gutter))), var(--unimes-layout-wide));
  margin-inline: auto;
}

.unimes-container--content { max-width: var(--unimes-layout-content); }
.unimes-container--readable { max-width: var(--unimes-layout-readable); }
.unimes-section { padding-block: var(--unimes-space-section); }
.unimes-section--compact { padding-block: var(--unimes-space-12); }
/* Faixa alternada. O cinza mais claro do design system separa blocos vizinhos
   sem introduzir cor nova nem depender de borda. */
.unimes-section--muted { background-color: var(--unimes-color-neutral-50); }

.unimes-button {
  display: inline-flex;
  min-height: var(--unimes-space-control);
  min-width: var(--unimes-space-control);
  align-items: center;
  justify-content: center;
  gap: var(--unimes-space-2);
  border-radius: var(--unimes-radius-md);
  border-width: 1px;
  border-style: solid;
  padding: var(--unimes-space-3) var(--unimes-space-6);
  font-size: var(--unimes-font-label-size);
  line-height: var(--unimes-font-label-line-height);
  letter-spacing: var(--unimes-font-label-letter-spacing);
  font-weight: var(--unimes-font-label-weight);
  text-decoration-line: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--unimes-transition-fast);
}

.unimes-button--primary {
  border-color: var(--unimes-color-brand-deep);
  background-color: var(--unimes-color-brand-deep);
  color: var(--unimes-color-neutral-white);
}
/* Estados do CTA navy pelos tokens do design system: o hover clareia para
   --navy-700 em vez de escurecer para o quase preto --gray-900, e o toque
   (active) desce para --navy-900. */
.unimes-button--primary:hover {
  border-color: var(--action-primary-hover);
  background-color: var(--action-primary-hover);
  color: var(--unimes-color-neutral-white);
}
.unimes-button--primary:active {
  border-color: var(--action-primary-active);
  background-color: var(--action-primary-active);
}
/* CTA principal sobre fundo escuro: e o mesmo botao primario, invertido.
   O design system chama esta variante de "inverse" -- branco com texto navy --
   e e o que substitui o navy quando o fundo ja e navy. */
.unimes-button--inverse {
  border-color: var(--action-inverse);
  background-color: var(--action-inverse);
  color: var(--unimes-navy);
}
.unimes-button--inverse:hover {
  border-color: var(--action-inverse-hover);
  background-color: var(--action-inverse-hover);
  color: var(--unimes-navy);
}
.unimes-button--inverse:active {
  border-color: var(--action-inverse-active);
  background-color: var(--action-inverse-active);
}

.unimes-button--secondary {
  border-color: var(--unimes-color-brand-deep);
  background-color: var(--unimes-color-neutral-white);
  color: var(--unimes-color-brand-deep);
}
.unimes-button--secondary:hover {
  background-color: var(--unimes-color-neutral-100);
  color: var(--unimes-color-brand-deep);
}
.unimes-button--ghost {
  border-color: transparent;
  background-color: transparent;
  color: var(--unimes-color-brand-deep);
}
.unimes-button--ghost:hover {
  background-color: var(--unimes-color-neutral-100);
  color: var(--unimes-color-brand-deep);
}

.unimes-button:disabled,
.unimes-button[aria-disabled='true'] {
  border-color: var(--unimes-color-neutral-200);
  background-color: var(--unimes-color-neutral-200);
  color: var(--unimes-color-neutral-500);
  opacity: 1;
}

/* Link em ciano escuro e peso regular, conforme o design system. O sublinhado
   de 2px sustenta a legibilidade sem recorrer a negrito. */
.unimes-link {
  font-weight: var(--fw-regular);
  color: var(--text-link);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--unimes-transition-fast);
}

.unimes-link:hover {
  color: var(--text-link-hover);
  text-decoration-color: currentColor;
}

.unimes-badge {
  display: inline-flex;
  min-height: var(--unimes-space-6);
  align-items: center;
  gap: var(--unimes-space-2);
  border-radius: var(--unimes-radius-pill);
  background-color: var(--unimes-color-neutral-100);
  padding: var(--unimes-space-1) var(--unimes-space-3);
  font-size: var(--unimes-font-caption-size);
  line-height: var(--unimes-font-caption-line-height);
  letter-spacing: var(--unimes-font-caption-letter-spacing);
  font-weight: var(--unimes-font-caption-weight);
  color: var(--unimes-color-neutral-700);
}

.unimes-badge::before {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--unimes-color-brand-scarlet);
  content: '';
}

.unimes-field {
  display: grid;
  gap: var(--unimes-space-2);
}
.unimes-field__label {
  font-size: var(--unimes-font-label-size);
  line-height: var(--unimes-font-label-line-height);
  letter-spacing: var(--unimes-font-label-letter-spacing);
  font-weight: var(--unimes-font-label-weight);
  color: var(--unimes-color-neutral-900);
}
.unimes-field__hint {
  font-size: var(--unimes-font-caption-size);
  line-height: var(--unimes-font-caption-line-height);
  letter-spacing: var(--unimes-font-caption-letter-spacing);
  font-weight: var(--unimes-font-caption-weight);
  color: var(--unimes-color-neutral-700);
}

.unimes-input,
.unimes-select {
  min-height: var(--unimes-space-control);
  width: 100%;
  border-radius: var(--unimes-radius-md);
  border-width: 1px;
  border-style: solid;
  border-color: var(--unimes-color-neutral-300);
  background-color: var(--unimes-color-neutral-white);
  padding: var(--unimes-space-3) var(--unimes-space-4);
  font-size: var(--unimes-font-body-size);
  line-height: var(--unimes-font-body-line-height);
  letter-spacing: var(--unimes-font-body-letter-spacing);
  font-weight: var(--unimes-font-body-weight);
  color: var(--unimes-color-neutral-900);
  box-shadow: var(--unimes-shadow-sm);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--unimes-transition-fast);
}

.unimes-input::placeholder {
  color: var(--unimes-color-neutral-500);
  opacity: 1;
}
.unimes-input:hover,
.unimes-select:hover {
  border-color: var(--unimes-color-neutral-500);
}
.unimes-input[aria-invalid='true'],
.unimes-select[aria-invalid='true'] {
  border-color: var(--unimes-color-semantic-danger);
}
.unimes-field__error {
  font-size: var(--unimes-font-body-sm-size);
  line-height: var(--unimes-font-body-sm-line-height);
  letter-spacing: var(--unimes-font-body-sm-letter-spacing);
  font-weight: var(--fw-regular);
  color: var(--unimes-color-semantic-danger);
}

.unimes-card {
  border-radius: var(--unimes-radius-lg);
  border-width: 1px;
  border-style: solid;
  border-color: var(--unimes-color-neutral-200);
  background-color: var(--unimes-color-neutral-white);
  padding: var(--unimes-space-6);
  box-shadow: var(--unimes-shadow-sm);
}

.unimes-card--interactive {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: var(--unimes-transition-normal);
}
.unimes-card--interactive:hover {
  box-shadow: var(--unimes-shadow-md);
}
.unimes-eyebrow {
  margin-bottom: var(--unimes-space-3);
  /* O prototipo aprovado escreve o eyebrow a 12px em caixa alta com muito
     tracking: os tokens de caption cobrem exatamente esse degrau. */
  font-size: var(--unimes-font-caption-size);
  line-height: var(--unimes-font-caption-line-height);
  font-weight: var(--unimes-font-caption-weight);
  text-transform: uppercase;
  /* Cinza do design system. O escarlate saiu: e identidade, nao rotulo de
     secao, e volta so no grafismo do destaque estrategico. Era o --gray-500 do
     prototipo, que reprovava no AA para texto de 12px nos fundos tingidos
     (4.49:1 sobre --gray-050, 4.33:1 sobre o lilas dos cartoes; Lighthouse de
     30/09/2026). O --gray-600, degrau seguinte da mesma escala, da 6.7 a 7.4:1. */
  color: var(--unimes-color-neutral-600);
  letter-spacing: .12em;
}
.unimes-display {
  font-size: var(--unimes-font-display-size);
  line-height: var(--unimes-font-display-line-height);
  letter-spacing: var(--unimes-font-display-letter-spacing);
  font-weight: var(--unimes-font-display-weight);
  color: var(--unimes-color-brand-deep);
}
.unimes-heading-1 {
  color: var(--unimes-color-brand-deep);
  font-size: var(--unimes-font-h1-size);
  line-height: var(--unimes-font-h1-line-height);
  letter-spacing: var(--unimes-font-h1-letter-spacing);
  font-weight: var(--unimes-font-h1-weight);
}
.unimes-heading-2 {
  font-size: var(--unimes-font-h2-size);
  line-height: var(--unimes-font-h2-line-height);
  letter-spacing: var(--unimes-font-h2-letter-spacing);
  font-weight: var(--unimes-font-h2-weight);
  color: var(--unimes-color-brand-deep);
}
.unimes-heading-3 {
  color: var(--unimes-color-brand-deep);
  font-size: var(--unimes-font-h3-size);
  line-height: var(--unimes-font-h3-line-height);
  letter-spacing: var(--unimes-font-h3-letter-spacing);
  font-weight: var(--unimes-font-h3-weight);
}
.unimes-heading-4 {
  font-size: var(--unimes-font-h4-size);
  line-height: var(--unimes-font-h4-line-height);
  letter-spacing: var(--unimes-font-h4-letter-spacing);
  font-weight: var(--unimes-font-h4-weight);
  color: var(--unimes-color-brand-deep);
}
.unimes-body-lg {
  font-size: var(--unimes-font-body-lg-size);
  line-height: var(--unimes-font-body-lg-line-height);
  letter-spacing: var(--unimes-font-body-lg-letter-spacing);
  font-weight: var(--unimes-font-body-lg-weight);
  color: var(--unimes-color-neutral-700);
}

.unimes-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.unimes-redesign-skip-link {
  position: fixed;
  top: var(--unimes-space-3);
  left: var(--unimes-space-3);
  z-index: 90;
  display: inline-flex;
  min-height: 44px; /* alvo de toque (QA final, 07/10/2026: tinha 43px) */
  align-items: center;
  padding: var(--unimes-space-3) var(--unimes-space-4);
  border-radius: var(--unimes-radius-md);
  background: var(--unimes-color-brand-deep);
  color: var(--unimes-color-neutral-white);
  font-size: var(--unimes-font-label-size);
  font-weight: var(--fw-regular);
  line-height: var(--unimes-font-label-line-height);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--unimes-space-8)));
  transition: transform var(--unimes-transition-fast) ease;
}

.unimes-redesign-skip-link:focus {
  transform: translateY(0);
}