.jornada-feedback-dialog {
  width: min(430px, calc(100vw - 28px));
  max-height: min(86vh, 620px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 18px;
  background: #fff;
  color: #17253a;
  box-shadow: 0 24px 70px rgba(15, 31, 51, .28);
}

.jornada-feedback-dialog::backdrop {
  background: rgba(15, 31, 51, .52);
  backdrop-filter: blur(2px);
}

.jornada-feedback-content { padding: 26px; }
.jornada-feedback-heading { display:flex; align-items:flex-start; gap:13px; }
.jornada-feedback-icon {
  display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center;
  border:1px solid #cfe0fb; border-radius:12px; background:#f3f7ff;
  color:#416eec; font-size:18px; font-weight:850;
}
.jornada-feedback-dialog[data-kind="danger"] .jornada-feedback-icon {
  border-color:#fecaca; background:#fff5f5; color:#dc3545;
}
/* "warning" fica entre o azul informativo e o vermelho destrutivo: o que vem
   depois não apaga nada (por isso não é danger), mas também não é rotina — o
   caso é salvar um dia com a sequência de marcações quebrada. Âmbar, e o botão
   de confirmar segue neutro, sem a carga do vermelho. */
.jornada-feedback-dialog[data-kind="warning"] .jornada-feedback-icon {
  border-color:#fde3b5; background:#fff9ef; color:#b8730d;
}
.jornada-feedback-dialog[data-layout="divergencia"] { width: min(520px, calc(100vw - 28px)); }
.jornada-feedback-dialog[data-layout="divergencia"] .jornada-feedback-heading { align-items: center; }
.jornada-feedback-dialog[data-layout="divergencia"] .pay-flag { margin-left: auto; flex: none; }
.jornada-feedback-copy { min-width:0; }
.jornada-feedback-copy .eyebrow { margin:0 0 5px; color:#6f84a3; font-size:10px; letter-spacing:.11em; }
.jornada-feedback-copy h2 { margin:0; color:#17253a; font-size:19px; line-height:1.2; }
.jornada-feedback-message { margin:14px 0 0; color:#526174; font-size:13px; line-height:1.55; white-space:pre-line; }
.jornada-feedback-field { display:grid; gap:7px; margin-top:16px; color:#526174; font-size:12px; font-weight:700; }
.jornada-feedback-field textarea {
  width:100%; min-height:92px; resize:vertical; box-sizing:border-box;
  border:1px solid #d7e0eb; border-radius:10px; padding:11px 12px;
  background:#fff; color:#17253a; font:600 13px/1.45 inherit; outline:none;
}
.jornada-feedback-field textarea:focus { border-color:#7e9cf2; box-shadow:0 0 0 3px rgba(65,110,236,.11); }
.jornada-feedback-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:22px; }
.jornada-feedback-actions button {
  min-width:96px; min-height:40px; border-radius:999px; padding:9px 17px;
  font:800 12px/1 inherit; cursor:pointer;
}
.jornada-feedback-cancel { border:1px solid #d7e0eb; background:#fff; color:#41536a; }
.jornada-feedback-confirm { border:1px solid #416eec; background:#416eec; color:#fff; }
.jornada-feedback-dialog[data-kind="danger"] .jornada-feedback-confirm { border-color:#dc3545; background:#dc3545; }
@media (max-width:480px) {
  .jornada-feedback-content { padding:22px 18px; }
  .jornada-feedback-actions button { flex:1; min-width:0; }
}

/* ===========================================================================
   Diálogos no celular: uma única gaveta lateral

   Até 720px, todo modal nativo entra pela direita e ocupa a altura útil
   inteira. A regra é deliberadamente genérica: vários módulos criam seus
   <dialog> depois do carregamento (férias, documentos, confirmações e
   integrações), e uma lista de classes aqui deixaria os casos menos óbvios de
   fora — inclusive os cards de foto. Acima desse breakpoint, os modais
   preservam a composição centralizada do desktop.
   ========================================================================== */
@media (max-width:720px) {
  dialog {
    position:fixed !important;
    inset:0 0 0 auto !important;
    box-sizing:border-box !important;
    width:min(94vw,520px) !important;
    min-width:0 !important;
    max-width:520px !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:100vh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border-width:0 0 0 1px !important;
    border-radius:22px 0 0 22px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    opacity:.985;
    transform:translate3d(100%,0,0) !important;
    transform-origin:right center;
    will-change:transform;
    transition:transform .32s cubic-bezier(.22,.82,.28,1),opacity .2s ease;
    transition:
      transform .32s cubic-bezier(.22,.82,.28,1),
      opacity .2s ease,
      overlay .32s allow-discrete,
      display .32s allow-discrete;
  }

  dialog[open] {
    opacity:1;
    transform:translate3d(0,0,0) !important;
  }

  @starting-style {
    dialog[open] {
      opacity:.985;
      transform:translate3d(100%,0,0) !important;
    }
  }

  dialog::backdrop {
    opacity:0;
    transition:opacity .22s ease;
    transition:
      opacity .22s ease,
      overlay .32s allow-discrete,
      display .32s allow-discrete;
  }

  dialog[open]::backdrop { opacity:1; }

  @starting-style {
    dialog[open]::backdrop { opacity:0; }
  }

  /* Diálogos grandes já possuem uma camada própria de rolagem para manter o
     botão de fechar e os rodapés no contexto certo. A gaveta passa a altura
     inteira para essa camada, sem criar duas barras concorrentes. */
  dialog:has(> :is(.dialog-scroll,.record-dialog-scroll,.vacation-dialog-scroll,.termination-dialog-scroll)) {
    overflow-y:hidden !important;
  }

  dialog > :is(.dialog-scroll,.record-dialog-scroll,.vacation-dialog-scroll,.termination-dialog-scroll) {
    box-sizing:border-box;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:none !important;
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  /* A confirmação do importador tinha um card arredondado dentro de um dialog
     transparente. Na gaveta, o próprio dialog vira a superfície. */
  .genyo-confirm-dialog { background:var(--surface,#fff) !important; }
  .genyo-confirm-dialog > .genyo-confirm-card {
    min-height:100%;
    border:0;
    border-radius:0;
    box-shadow:none;
  }

  /* Fotos de ponto e de assinatura são modais também. Elas deixam de herdar a
     largura estreita do card desktop e usam a área lateral sem cortar imagens
     verticais; a câmera continua respeitando sua proporção 4:3. */
  dialog:is(#pointPhotoDialog,#signaturePhotoDialog) :is(.photo-frame,.signature-photo-frame) {
    box-sizing:border-box;
    width:100%;
    max-width:100%;
  }

  #pointPhotoDialog .photo-frame img,
  #signaturePhotoDialog .signature-photo-frame img {
    max-height:min(58dvh,520px);
  }

  /* O seletor de criação tem três cards lado a lado no desktop; dentro da
     gaveta eles viram alvos de toque largos e legíveis. */
  dialog .quick-actions { grid-template-columns:1fr; }
  dialog .quick-actions button { min-height:0; }

  /* No APLICATIVO, um diálogo não é uma gaveta sobre a tela: é a próxima
     tela. A largura de 94vw deixava uma faixa da tela anterior aparecendo à
     esquerda — no painel isso comunica "tem uma página atrás, e ela continua
     ali"; no celular comunica que a janela ficou torta, encostada num canto.
     Aqui ela ocupa a tela inteira, e o movimento da direita para a esquerda
     continua: é assim que um aplicativo empurra a tela seguinte.

     inset:0 com width:auto estica de borda a borda sem depender de vw, que
     conta a área da barra de rolagem e deixaria sobrar um fio de fundo. */
  /* O `:not(#\9)` não filtra nada — nenhum elemento tem esse id, que nem é
     escrevível em HTML. Ele está aqui só para o seletor valer mais que os de
     `mobile-glass.css`, que reimpõem `border-radius:18px !important` e uma
     borda listando os diálogos POR ID (`#companyDialog, .camera-dialog, …`).
     Vindo depois no arquivo não basta: entre dois `!important`, quem decide é a
     especificidade, e um id vence uma classe. Sem isso, a tela cheia do
     aplicativo ficava com canto arredondado e um fio de borda nas quatro
     bordas — a costura que o modo tela cheia existe para eliminar. */
  body.jornada-app dialog:not(#\9) {
    inset:0 !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    border-width:0 !important;
    border-radius:0 !important;
  }
}

@media (max-width:720px) and (prefers-reduced-motion:reduce) {
  dialog,
  dialog[open] {
    opacity:1;
    transform:none !important;
    transition:none !important;
  }

  dialog::backdrop,
  dialog[open]::backdrop { transition:none !important; }
}

/* ====================================================================
   BARRA SUPERIOR GRUDENTA DO CARD — padrão reutilizável
   ====================================================================
   O rodapé de ação já era grudento desde styles.css ("Rodapé de ação do
   diálogo"): margem negativa para encostar nas bordas, vidro fosco e uma
   linha. Só faltava a outra metade.

   Sem ela, o ✕ e o "?" são `position:absolute` presos ao <dialog> — quem
   rola é a div de dentro —, então ficavam pairando sobre o conteúdo sem
   nada atrás: o texto dos campos passava POR BAIXO dos botões durante a
   rolagem. Esta barra é o espelho exato do rodapé, com os mesmos tokens
   e o mesmo z-index 4.

   As duas barras têm donos diferentes, e é de propósito que sejam duas:
   a de cima é sobre a JANELA (que card é este, como aprendo a usá-lo,
   como saio); a de baixo é sobre a DECISÃO (gravo ou não). Juntá-las
   poria a ação irreversível ao lado do ✕.

   COMO USAR em qualquer card:

     <div class="dialog-topbar">
       <div class="dialog-topbar-title">
         <p class="eyebrow">SEÇÃO</p>
         <h2>Título do card</h2>
       </div>
       <div class="dialog-topbar-tools">
         <button class="dialog-close" …>×</button>
       </div>
     </div>
     <p class="dialog-subtitle">…</p>

   O subtítulo fica FORA da barra e rola junto: a barra pinada tem de ser
   estreita, senão come a altura útil do card em tela baixa. O botão do
   tour (card-tour.js) se insere sozinho antes do ✕ e cai na mesma caixa.

   Se o card usa um padding diferente de 28px, é só redeclarar os tokens
   no próprio <dialog> — as margens negativas acompanham. */
dialog { --dialog-pad-t: 28px; }

.dialog-topbar {
  position: sticky;
  /* Negativo pelo mesmo motivo do rodapé: o retângulo de referência do
     `sticky` é o PADDING BOX do contêiner que rola, então `top:0` pinaria a
     barra 28px abaixo da borda do card — e por essa fresta o conteúdo
     apareceria por cima dela. Com `-padding`, o recuo superior rola para fora
     e a barra encosta na borda, ficando estreita quando pinada. */
  top: calc(var(--dialog-pad-t) * -1);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: calc(var(--dialog-pad-t) * -1) calc(var(--dialog-pad-x) * -1) 16px;
  /* O recuo de cima fica menor que o padding do card: a margem negativa
     ainda encosta a barra na borda, e o título não precisa de 28px por
     dentro. A barra pinada come menos altura. */
  padding: 12px var(--dialog-pad-x);
  /* Véu do menu da Apple: o branco cobre quase tudo e o desfoque fica curto.
     Sem saturate e sem linha — a barra não risca o card.
     O respiro vertical é igual dos dois lados: 16px em cima e 8px embaixo
     empurrava o ✕ para baixo do centro da barra. */
  border: 0;
  background: rgba(251, 251, 253, .84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-transparency: reduce) {
  .dialog-topbar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.dialog-topbar-title { min-width: 0; }
.dialog-topbar-title .eyebrow { margin: 0 0 2px; }
.dialog-topbar-title h2 { margin: 0; }

/* A caixa das ferramentas da janela. `flex:none` para o título poder
   encolher sem espremer os botões. */
.dialog-topbar-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* Dentro da barra eles deixam de flutuar: a barra é que os posiciona.
   Especificidade (0,2,0) de propósito — `position:absolute` vem de
   `.dialog-close`/`.dialog-tour` (0,1,0) em folhas que carregam depois
   desta, e sem isso a ordem decidiria. O glifo do ✕ é centrado no círculo
   com `inset: 0` e `margin: auto` (ui-refinement.css). O botão precisa ser
   o bloco de referência dele — `relative` aqui, `absolute` nos cards sem
   barra. */
.dialog-topbar .dialog-close,
.dialog-topbar .dialog-tour {
  position: relative;
  top: auto;
  right: auto;
  flex: none;
}

/* O subtítulo perde a margem de cima: quem afasta do título agora é a
   barra. */
.dialog-topbar + .dialog-subtitle { margin-top: 0; }