/* SaCo · ajudas dos mockups (fora do Tailwind).
   - [hidden] vence qualquer display do Tailwind (as variantes ?v= usam-no).
   - .mk-tip: tooltip estático a partir de data-tip (hover, ou fixo com .mk-tip-open para capturas).
     Espelha src/components/ui/Tooltip.tsx: bg-slate-800, text-xs, rounded-lg, seta.
   - As animações da app (animate-modal-pop-in, animate-overlay-fade-in) existem para o markup
     bater certo; aqui são instantâneas para as capturas ficarem estáveis. */
[hidden] { display: none !important; }

.mk-tip { position: relative; }
.mk-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
.mk-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out;
}
.mk-tip:hover::after, .mk-tip:hover::before,
.mk-tip.mk-tip-open::after, .mk-tip.mk-tip-open::before { opacity: 1; }
.mk-tip-right::after { left: auto; right: 0; transform: none; }
.mk-tip-right::before { left: auto; right: 12px; transform: none; }

.animate-modal-pop-in, .animate-overlay-fade-in, .animate-fade-in, .animate-notice-in { animation: none; }

/* Estado "em hover" fixado para capturas: a linha leva .mk-hover e o cartão mostra a ação. */
.mk-hover .group-hover\:opacity-100 { opacity: 1; }

/* Esconde o X nativo do WebKit em campos type="search" (evita dois botões de limpar). */
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Dica da cadeia de contratação fixa (variante ?v=dicas): o popover fica aberto para a captura. */
.chain-pop.is-open { visibility: visible !important; opacity: 1 !important; }
.mk-tip-left::after { left: 0; transform: none; }
.mk-tip-left::before { left: 16px; transform: none; }

/* SACO-381 · o que é novo nesta fase: contorno tracejado amarelo da marca + etiqueta. Só existe no mockup. */
.mk-new { position: relative; outline: 2px dashed #f6ac34; outline-offset: 4px; }
.mk-new::before {
  content: attr(data-new);
  position: absolute; top: -13px; right: 8px; z-index: 5;
  background: #f6ac34; color: #0f172a;
  font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: 3px 6px; border-radius: 6px; white-space: nowrap;
}
.mk-new-inline { outline: 2px dashed #f6ac34; outline-offset: 2px; border-radius: 9999px; }

/* Com a faixa do fluxo, as camadas sobrepostas (modais, gavetas) começam por baixo dela para o Anterior/Seguinte ficar visível. */
body.has-flow .mk-ov { top: var(--flow-h, 52px); }

/* Zona clicável do fluxo: o botão real do ecrã leva ao passo seguinte. Anel amarelo a pulsar. */
.mk-hot { position: relative; box-shadow: 0 0 0 3px #f6ac34; border-radius: 12px; animation: mk-pulse 1.8s ease-in-out infinite; }
@keyframes mk-pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(246,172,52,.95); } 50% { box-shadow: 0 0 0 7px rgba(246,172,52,.25); } }
@media (prefers-reduced-motion: reduce) { .mk-hot { animation: none; } }
details.mk-collapse > summary { list-style: none; cursor: pointer; }
details.mk-collapse > summary::-webkit-details-marker { display: none; }
details.mk-collapse[open] .mk-chev { transform: rotate(180deg); }

/* Bloco de texto novo (várias linhas): contorno tracejado sem cantos de pílula. */
.mk-new-box { outline: 2px dashed #f6ac34; outline-offset: 2px; border-radius: 6px; }

/* Dica por baixo do elemento (quando por cima taparia o título da linha). */
.mk-tip-bottom::after { bottom: auto; top: calc(100% + 8px); }
.mk-tip-bottom::before { bottom: auto; top: calc(100% + 3px); border-top-color: transparent; border-bottom-color: #1e293b; }