/* Diálogos de decisão compartilhados pelo PDV, Gestão e App Clientes.
 * A faixa superior lembra a bobina/linha de conferência do caixa sem transformar
 * cada confirmação numa tela chamativa. Cores e superfícies seguem os tokens do
 * aplicativo em que o diálogo foi aberto. */
.sd-dialog-open { overflow: hidden !important; }

.sd-overlay {
  --sd-tone: var(--accent, #e85d0f);
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: rgba(8, 12, 18, .68);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  animation: sd-fade-in .16s ease-out both;
}

.sd-overlay.sd-tone-danger { --sd-tone: var(--err, #e5534b); }
.sd-overlay.sd-tone-warning { --sd-tone: var(--warn, #d97706); }
.sd-overlay.sd-tone-success { --sd-tone: var(--ok, #2ea86e); }
.sd-overlay.sd-tone-info { --sd-tone: var(--info, #2876d2); }

.sd-dialog {
  position: relative;
  width: min(100%, 500px);
  max-height: min(86vh, 720px);
  overflow: hidden;
  color: var(--text, #1c2330);
  background: var(--panel, #fff);
  border: 1px solid color-mix(in srgb, var(--border, #d7dee8) 82%, var(--sd-tone) 18%);
  border-radius: 20px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .04) inset;
  animation: sd-rise-in .2s cubic-bezier(.2, .8, .2, 1) both;
}

.sd-dialog::before {
  content: '';
  display: block;
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--sd-tone) 0 18px, transparent 18px 25px);
}

.sd-dialog-body {
  max-height: calc(min(86vh, 720px) - 8px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px 26px 22px;
}

.sd-dialog-head { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; }
.sd-dialog-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--sd-tone);
  background: color-mix(in srgb, var(--sd-tone) 13%, var(--panel, #fff));
  border: 1px solid color-mix(in srgb, var(--sd-tone) 34%, transparent);
  border-radius: 14px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
}
.sd-dialog-kicker {
  color: var(--sd-tone);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sd-dialog-title { margin: 3px 0 0; font-size: clamp(20px, 4vw, 24px); line-height: 1.16; letter-spacing: -.025em; }
.sd-dialog-message { margin-top: 17px; color: var(--text, #1c2330); font-size: 15px; line-height: 1.58; overflow-wrap: anywhere; }
.sd-dialog-message b, .sd-dialog-message strong { color: var(--text, #1c2330); }
.sd-dialog-message br + br { line-height: 2; }
.sd-dialog-note { margin-top: 12px; color: var(--muted, #5b6878); font-size: 12.5px; line-height: 1.5; }

.sd-photo-evidence {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  background: var(--panel2, var(--bg, #f4f6f8));
  border: 1px solid var(--border, #d7dee8);
  border-radius: 14px;
}
.sd-photo-evidence img { width: 82px; height: 82px; object-fit: cover; border-radius: 10px; background: var(--panel, #fff); }
.sd-photo-evidence b { display: block; line-height: 1.35; }
.sd-photo-evidence span { display: block; margin-top: 4px; color: var(--muted, #5b6878); font-size: 12.5px; line-height: 1.4; }

.sd-dialog-extra { margin-top: 15px; }
.sd-dialog-field { display: grid; gap: 7px; }
.sd-dialog-label { color: var(--muted, #5b6878); font-size: 12px; font-weight: 800; }
.sd-dialog-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--text, #1c2330);
  background: var(--panel2, var(--bg, #f4f6f8));
  border: 1px solid var(--border, #d7dee8);
  border-radius: 11px;
  outline: 0;
  font: inherit;
  font-size: 16px;
  resize: vertical;
}
.sd-dialog-input:focus { border-color: var(--sd-tone); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sd-tone) 20%, transparent); }
.sd-dialog-error { min-height: 17px; color: var(--err, #e5534b); font-size: 12px; font-weight: 700; }

.sd-dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.sd-dialog-button {
  min-height: 44px;
  padding: 10px 17px;
  color: var(--text, #1c2330);
  background: var(--panel2, #eef1f5);
  border: 1px solid var(--border, #d7dee8);
  border-radius: 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.sd-dialog-button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.sd-dialog-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--sd-tone) 36%, transparent); outline-offset: 2px; }
.sd-dialog-button-primary { color: var(--accent-text, #fff); background: var(--sd-tone); border-color: transparent; }
.sd-dialog-button-danger { color: #fff; background: var(--err, #e5534b); border-color: transparent; }

@keyframes sd-fade-in { from { opacity: 0; } }
@keyframes sd-rise-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }

@media (max-width: 520px) {
  .sd-overlay { place-items: end center; padding-inline: 0; padding-bottom: 0; }
  .sd-dialog { width: 100%; max-height: 92vh; border-radius: 22px 22px 0 0; border-bottom: 0; }
  .sd-dialog-body { max-height: calc(92vh - 8px); padding: 22px 18px max(18px, env(safe-area-inset-bottom)); }
  .sd-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .sd-dialog-actions.sd-one-action { grid-template-columns: 1fr; }
  .sd-dialog-button { width: 100%; min-height: 48px; }
  .sd-photo-evidence { grid-template-columns: 68px minmax(0, 1fr); }
  .sd-photo-evidence img { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-overlay, .sd-dialog { animation: none; }
  .sd-dialog-button { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .sd-overlay { background: rgba(8, 12, 18, .88); -webkit-backdrop-filter: none; backdrop-filter: none; }
}