/* Cadastro REAL e diálogos REAIS — v1.2 do visual (16/10/2026; Observação na linha da câmera: 17/10/2026). Complementa `fase1b-popups.css` / `fase1c-dialogs.css` (herdados da v1.1) para o que o demonstrador da v1.1
   fazia por script: a bandeja de avisos não pode «tapar» cliques fora dos cartões, a Observação mora na linha da câmera e os diálogos do produto ganham alça de arraste. Só tokens da paleta (nada de cor fixa). */

/* ---- bandeja de avisos: só os cartões recebem clique; o resto da área reservada continua clicável (status do dia, log, campos) ---- */
#fase1b-tray, #fase1b-tray.fase1b-visible, #fase1b-tray #fase1b-tray-list { pointer-events: none; }
#fase1b-tray .fase1b-message-card { pointer-events: auto; }
#fase1b-tray { height: auto; }

/* ---- ícones da identidade dentro de TEXTO de mensagem: o <svg> do produto não tem tamanho próprio (só ganha `button svg`), então fora de botão ele cresce até encher o aviso ---- */
#aviso-editando-texto svg, .ok > svg:first-child, .avisos-popup-cabeca h3 svg { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.16em; margin-right: 6px; }

/* ---- Salvar ✓: o produto injeta um ícone SVG de «salvar» dentro do botão (icones.js); o ✓ desenhado por CSS (1B) já é o ícone — sem este ajuste apareceriam dois ---- */
body.fase1b-extras #btn-salvar > svg { display: none; }

/* ---- Salvar ✓: a dica aparece com o texto atual do botão («Salvar cadastro», «Atualizar cadastro»…) ---- */
body.fase1b-extras #btn-salvar[data-save-status]:hover::after,
body.fase1b-extras #btn-salvar[data-save-status]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Observação: na LINHA DA CÂMERA, sempre visível (a fonte da câmera é a que some quando a câmera de equipamento está desligada; a linha e o botão ficam) ---- */
body.fase1b-extras .fase1b-linha-camera { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; min-width: 0; }
body.fase1b-extras .fase1b-linha-camera > #fonte-camera-campo { min-width: 0; }
body.fase1b-extras .fase1b-obs-grupo { position: relative; margin-left: auto; flex: none; }
body.fase1b-extras .fase1b-observation-button { gap: 6px; position: relative; }
body.fase1b-extras .fase1b-observation-button svg { width: 14px; height: 14px; }
body.fase1b-extras .fase1b-observation-ponto {
  position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--card-bg); display: none;
}
body.fase1b-extras .fase1b-observation-button.tem-texto { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
body.fase1b-extras .fase1b-observation-button.tem-texto .fase1b-observation-ponto { display: block; }
body.fase1b-extras .fase1b-observation-box { left: auto; right: 0; top: calc(100% + 8px); z-index: 40; }

/* ---- celular (≤ 760 px): o ✓ de 28 px é alvo pequeno demais para o dedo — vira botão de largura inteira, com o texto; a Observação ocupa a linha inteira; a bandeja de avisos vira folha embaixo (acima da barra de abas) ---- */
@media (max-width: 760px) {
  body.fase1b-extras .left-stack > div:has(#btn-salvar) { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }
  body.fase1b-extras #btn-salvar {
    top: 0; width: 100%; min-width: 0; height: 46px; min-height: 46px; padding: 0 14px; gap: 8px;
    color: var(--primary-fg, #fff); background: var(--primary); border-radius: 12px; font-size: 15px; font-weight: 700;
  }
  body.fase1b-extras #btn-salvar::before { font-size: 20px; }
  body.fase1b-extras #btn-salvar::after { display: none; }                 /* o texto é o próprio <span id="btn-salvar-texto"> do produto (que troca «Salvar»/«Atualizar cadastro») */
  body.fase1b-extras #btn-salvar #btn-salvar-texto { font-size: 15px; font-weight: 700; }
  body.fase1b-extras .fase1b-obs-grupo { width: 100%; margin-left: 0; }
  body.fase1b-extras .fase1b-observation-button { width: 100%; height: 40px; min-height: 40px; justify-content: flex-start; padding: 0 12px; font-size: 13px; }
  body.fase1b-extras .fase1b-observation-ponto { top: 6px; right: 10px; }
  body.fase1b-extras .fase1b-observation-box { position: static; width: 100%; box-sizing: border-box; margin-top: 8px; animation: none; }
}

/* ---- diálogos reais do produto: alça de arraste no título (mesma ideia da Fase 1C, sobre o overlay existente) ---- */
.fase1c-real-cab { cursor: grab; user-select: none; touch-action: none; }
.fase1c-real-cab:is(h2, h3)::before,
.fase1c-real-cab h3::before { content: "\22EE\22EE"; margin-right: 8px; color: var(--text-muted); font-size: 15px; letter-spacing: -3px; font-weight: 400; }
.fase1c-real-caixa { outline: none; animation: fase1c-in 170ms cubic-bezier(.2,.8,.2,1) backwards; }
.fase1c-real-caixa.fase1c-real-arrastando { box-shadow: 0 22px 56px rgba(10,14,25,.42); }
.fase1c-real-caixa.fase1c-real-arrastando .fase1c-real-cab { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .fase1c-real-caixa { animation: none; } }

/* item 578 (17/10/2026): janela estreita de notebook — os avisos da pessoa ficam numa FAIXA em colunas logo acima do campo Nome (2 lado a lado), em vez de empilhados por cima do menu/câmera (fase1b-real.js::lugarDeReserva) */
#fase1b-tray.fase1b-faixa { max-width: none; }
#fase1b-tray.fase1b-faixa #fase1b-tray-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; overflow-y: auto; }