/* ==============================================================================
 *  # Notificação — o padrão único do sistema (2026-09-18)
 *
 *  Três formas, um visual:
 *    - toast ............ occToast / occToastUndo / occToastAposRecarregar (premium-globals.js)
 *    - alerta na página . fragmento views/fragments/alert.html (e os banners de estado)
 *    - confirmação ...... occConfirm / occPrompt (premium-globals.js)
 *
 *  O TIPO pinta a borda esquerda e o ícone; o texto fica sempre na cor de texto, que lê
 *  bem nos dois temas. As cores de tipo não servem para texto — laranja e verde sobre
 *  branco ficam abaixo de 3:1.
 *
 *  Regras de uso e de redação: CLAUDE.md do projeto, seção "Notificação".
 *  O PadraoDeNotificacaoTest reprova quem fugir delas.
 *
 *  Antes deste arquivo havia três visuais sem nada em comum: o Noty (mesma cor para
 *  todos os tipos, porque rodava no tema "mint", que não tem CSS), o toast próprio da
 *  Tabela de Ocupação e o alerta, que mudava de cara conforme estivesse ou não dentro
 *  de .cad-premium.
 * ========================================================================== */


/* ---------------------------------------------------------------------------
 *  Tom de cada tipo — o único lugar que liga tipo a cor.
 *  Vale para toast, alerta e confirmação. Os tokens são os do design system
 *  (tokens.css) e já têm versão clara e escura.
 * ------------------------------------------------------------------------- */
.xn-tom-success { --xn-tom: var(--st-confirmada); --xn-tom-soft: var(--st-confirmada-soft); }
.xn-tom-error   { --xn-tom: var(--occ-danger);    --xn-tom-soft: var(--occ-danger-soft); }
.xn-tom-warning { --xn-tom: var(--occ-warn);      --xn-tom-soft: var(--occ-warn-soft); }
.xn-tom-info    { --xn-tom: var(--occ-accent);    --xn-tom-soft: var(--occ-accent-soft); }


/* ---------------------------------------------------------------------------
 *  Toast
 *  Topo direito em todas as telas, o mais novo em cima. O z-index fica acima do
 *  modal do Bootstrap (1055): o toast que confirma uma ação costuma nascer enquanto
 *  o modal que a pediu ainda está saindo.
 * ------------------------------------------------------------------------- */
.xn-toast-area {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 380px;
    max-width: calc(100vw - 32px);
    pointer-events: none;
}

.xn-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px 12px 14px;
    background: var(--occ-surface);
    color: var(--occ-ink);
    border: 1px solid var(--occ-line-strong);
    border-left: 4px solid var(--xn-tom);
    border-radius: var(--occ-radius-sm);
    box-shadow: var(--occ-shadow-lg);
    font-size: .8125rem;
    line-height: 1.4;
    animation: xn-toast-entra .25s cubic-bezier(.16, 1, .3, 1);
}
.xn-toast.xn-saindo { animation: xn-toast-sai .2s ease-in forwards; }

.xn-toast-icone {
    flex-shrink: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--xn-tom);
}
.xn-toast-corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 1px;
}
.xn-toast-titulo {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* Pares rótulo/valor (padrão herdado da Tabela de Ocupação): De/Para numa mudança,
   Hóspede/Quarto/Período num fato, Conflito num erro com dado. */
.xn-toast-linhas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3px 10px;
    font-size: .75rem;
}
.xn-toast-k { color: var(--occ-ink-faint); }
.xn-toast-v { color: var(--occ-ink-soft); overflow-wrap: anywhere; }
.xn-toast-v--forte { color: var(--occ-ink); font-weight: 600; }

.xn-toast-acoes {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: -3px;
}
.xn-toast-acao {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--occ-radius-xs);
    background: var(--xn-tom-soft);
    color: var(--occ-ink);
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.xn-toast-acao:hover { background: var(--xn-tom); color: var(--occ-surface); }
.xn-toast-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--occ-ink-soft);
    cursor: pointer;
}
.xn-toast-fechar:hover { background: var(--occ-line-strong); color: var(--occ-ink); }
.xn-toast-acao:focus-visible,
.xn-toast-fechar:focus-visible { outline: 2px solid var(--occ-accent); outline-offset: 1px; }

@keyframes xn-toast-entra {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}
@keyframes xn-toast-sai {
    to { opacity: 0; transform: translateX(24px); }
}
@media (prefers-reduced-motion: reduce) {
    .xn-toast, .xn-toast.xn-saindo { animation-duration: .01ms; }
}


/* ---------------------------------------------------------------------------
 *  Alerta na página
 *  Mesmo visual em todas as telas. Antes, dentro de .cad-premium ele tinha o
 *  estilo do design system e, fora dele (Dashboard, Reservas), o do Limitless.
 *
 *  Sucesso some sozinho em 4 s (custom.js); erro fica até a pessoa fechar, porque
 *  costuma trazer o código de referência (XN-...) que ela vai citar no chamado.
 *  Banner de estado (aviso persistente) usa occ-persistent-alert e também fica.
 * ------------------------------------------------------------------------- */
.alert.xn-alerta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 1rem;
    padding: 12px 44px 12px 14px;
    background: var(--xn-tom-soft);
    color: var(--occ-ink);
    border: 1px solid var(--occ-line);
    border-left: 4px solid var(--xn-tom);
    border-radius: var(--occ-radius-sm);
    box-shadow: none;
    font-size: .8125rem;
    line-height: 1.45;
}
.alert.xn-alerta .xn-alerta-icone {
    flex-shrink: 0;
    font-size: 1.125rem;
    line-height: 1.2;
    color: var(--xn-tom);
}
.alert.xn-alerta .xn-alerta-texto { flex: 1 1 auto; min-width: 0; font-weight: 500; }
.alert.xn-alerta .btn-close { top: 50%; transform: translateY(-50%); padding: .75rem; }


/* ---------------------------------------------------------------------------
 *  Confirmação — variante destrutiva
 *  O modal base (.occ-confirm-*) vive em overrides.css. Aqui só o que o padrão
 *  acrescenta: ação que não tem volta (excluir, estornar, fechar caixa) ganha
 *  ícone e botão na cor de erro, e o botão diz o verbo da ação.
 * ------------------------------------------------------------------------- */
/* Confirmação comum: ícone de pergunta na cor de destaque. Antes era um alerta laranja
   em toda confirmação, inclusive nas que não tinham risco nenhum. */
.occ-confirm--padrao .occ-confirm-head i { color: var(--occ-accent); }
.occ-confirm--perigo .occ-confirm-head i { color: var(--occ-danger); }
.occ-confirm--perigo .occ-confirm-btn--go {
    background: var(--occ-danger);
    border-color: var(--occ-danger);
    color: #fff;
}
.occ-confirm--perigo .occ-confirm-btn--go:hover {
    background-color: color-mix(in srgb, var(--occ-danger) 85%, #000000);
    border-color: color-mix(in srgb, var(--occ-danger) 85%, #000000);
    box-shadow: 0 4px 12px var(--occ-danger-soft);
}

/* Frase de explicação do occPrompt (opcoes.texto), acima dos campos. Mesma cor e tamanho
   do corpo do occConfirm, para os dois modais lerem igual. */
.occ-prompt-texto {
    margin: 0 0 12px;
    color: var(--occ-ink-soft);
    font-size: .925rem;
    line-height: 1.5;
}

/* Lista de períodos dentro de uma confirmação (dias sem vaga — XWM-111). Reserva longa pode ter
   muitos períodos: a lista rola dentro do modal em vez de empurrar os botões para fora da tela. */
.xn-lista-periodos {
    max-height: 16rem;
    overflow-y: auto;
    margin: .5rem 0 0;
    padding-left: 1.25rem;
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
 *  Aguarde — troca de página (XWM-120), app/aguarde-navegacao.js
 *  Não é notificação: não anuncia resultado, diz que a próxima tela está a caminho.
 *  A camada cobre a tela inteira, transparente, para segurar clique e arrasto e mostrar o
 *  cursor de espera; o aviso só aparece quando a troca passa de 1 s. Fica acima do toast
 *  (1090) e do modal (1055): durante a troca nada na tela antiga vale mais.
 * ------------------------------------------------------------------------- */
.xn-aguarde {
    position: fixed;
    inset: 0;
    z-index: 1095;
    cursor: progress;
}

.xn-aguarde-aviso {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--occ-line);
    border-radius: 10px;
    background: var(--occ-surface);
    color: var(--occ-ink);
    box-shadow: var(--occ-shadow);
    font-size: .875rem;
    font-weight: 500;
    visibility: hidden;
}

.xn-aguarde-visivel .xn-aguarde-aviso { visibility: visible; }
.xn-aguarde-aviso .spinner-border { flex-shrink: 0; color: var(--occ-accent); }

@media print {
    .xn-aguarde { display: none; }
}