/*==============================================================================
  Modal de confirmação

  Substitui o `confirm()` do navegador: aquele aparece com a cara do sistema
  operacional, trava a página inteira e trata "excluir para sempre" com o mesmo
  desenho de "marcar como lida". Aqui a pergunta destrutiva tem cor própria e o
  foco começa em "Cancelar".
==============================================================================*/

.w-confirmar {
    position: fixed;
    inset: 0;
    z-index: var(--w-z-modal, 1080);
    display: grid;
    place-items: center;
    padding: var(--w-space-4);
}

.w-confirmar[hidden] { display: none; }

/* O fundo escurece e desfoca, no mesmo tratamento da busca global e do painel
   da oportunidade — três lugares perguntando a mesma coisa, um desenho só. */
.w-confirmar__fundo {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 30, .5);
    backdrop-filter: blur(3px);
}

.w-confirmar__caixa {
    position: relative;
    width: min(420px, 100%);
    padding: var(--w-space-6, 24px);
    border-radius: var(--w-radius-xl, 18px);
    background: var(--w-surface);
    box-shadow: 0 32px 70px -24px rgb(0 0 0 / .5);
    text-align: center;
    animation: w-confirmar-entra var(--w-duration-normal, .18s) var(--w-ease-out, cubic-bezier(.22, 1, .36, 1));
}

@keyframes w-confirmar-entra {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .w-confirmar__caixa { animation: none; }
}

.w-confirmar__icone {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto var(--w-space-4, 16px);
    border-radius: 50%;
    background: color-mix(in srgb, var(--w-danger, #dc2626) 14%, transparent);
    color: var(--w-danger, #dc2626);
}

.w-confirmar__icone[hidden] { display: none; }
.w-confirmar__icone svg { width: 26px; height: 26px; }

.w-confirmar__titulo {
    margin: 0 0 8px;
    font-size: var(--w-text-lg, 1.125rem);
    font-weight: var(--w-weight-bold, 700);
    color: var(--w-text-primary);
}

.w-confirmar__texto {
    margin: 0;
    font-size: var(--w-text-sm, .875rem);
    line-height: 1.55;
    color: var(--w-text-secondary);
}

.w-confirmar__texto[hidden] { display: none; }

.w-confirmar__acoes {
    display: flex;
    gap: var(--w-space-3, 12px);
    margin-top: var(--w-space-5, 20px);
}

.w-confirmar__acoes button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 16px;
    border-radius: var(--w-radius-md, 10px);
    font-size: var(--w-text-sm, .875rem);
    font-weight: var(--w-weight-semibold, 600);
    cursor: pointer;
    transition: background var(--w-duration-fast, .12s) var(--w-ease-out, ease),
                border-color var(--w-duration-fast, .12s) var(--w-ease-out, ease);
}

.w-confirmar__cancelar {
    border: 1px solid var(--w-border);
    background: var(--w-surface);
    color: var(--w-text-primary);
}

.w-confirmar__cancelar:hover {
    background: var(--w-surface-hover, rgb(0 0 0 / .05));
}

.w-confirmar__ok {
    border: 1px solid transparent;
    background: var(--w-accent);
    color: var(--w-accent-contrast, #fff);
}

.w-confirmar__ok:hover { filter: brightness(1.08); }

/* Ação destrutiva em vermelho: a cor é o aviso que se lê antes do texto. */
.w-confirmar.is-perigo .w-confirmar__ok {
    background: var(--w-danger, #dc2626);
}

.w-confirmar__acoes button:focus-visible {
    outline: 2px solid var(--w-accent);
    outline-offset: 2px;
}

/* Página parada enquanto a pergunta está aberta. */
body.w-confirmar-aberto { overflow: hidden; }

@media (max-width: 480px) {
    .w-confirmar__acoes { flex-direction: column-reverse; }
}