/* ─── COMPONENTE GLOBAL: SOFT ALERT (window.SoftAlert) ──────────────────────────────────────────
   Confirmação e alerta com o mesmo diálogo. Escopado só pelo id #softAlert — instância única
   (Views/Shared/SoftAlert/_SoftAlert.cshtml, renderizada uma vez em Views/Shared/_Layout.cshtml),
   então nenhuma regra aqui precisa de !important para vencer o Bootstrap/Metronic (ver comentário
   em Content/custom/css/file-dropzone/ged-picker.css:70-72 sobre o custo de escopar por classe).
   Anatomia e medidas: design system › Pop-ups (casca 555px, raio 14px, header/rodapé com borda).
   Tema claro apenas — a plataforma não tem modo escuro. */
/* Respiro vertical no próprio #softAlert, e não no .modal-dialog: o clique fora só fecha quando o
   alvo é o .modal (Bootstrap 3), e padding no diálogo criaria uma faixa morta em volta do cartão.
   Só o vertical: o horizontal é inline do Bootstrap 3 (compensação da barra de rolagem). */
#softAlert.in,
#softAlert[style*="display: block"] {
    display: flex !important;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Centralizado por margin:auto, e não por align-items:center no #softAlert: com conteúdo mais alto
   que a janela, o center empurra o topo para fora da área rolável; a margem automática vira 0 e o
   diálogo rola a partir do topo. pointer-events: o Bootstrap 5 do login/SSO zera no .modal-dialog. */
#softAlert .modal-dialog {
    width: 100%;
    max-width: 579px; /* 555px de casca + 2 × 12px de respiro lateral em tela estreita */
    margin: auto;
    padding: 0 12px;
    pointer-events: auto;
}

#softAlert .modal-content {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 20px 25px rgba(0, 0, 0, .35);
}

/* Bootstrap 3 aplica clearfix (:before/:after {display:table}) em .modal-header/.modal-footer —
   viram "filhos" fantasmas que roubam espaço do gap do flex. Neutralizado aqui, escopado por id —
   não precisa de !important (id + classe já vence a classe sozinha do Bootstrap). */
#softAlert .modal-header:before,
#softAlert .modal-header:after,
#softAlert .modal-footer:before,
#softAlert .modal-footer:after {
    display: none;
}

/* Header: medalhão + (título e mensagem de apoio), separado do corpo por borda. */
#softAlert .modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid #F1F1F4;
}

#softAlert .soft-alert-heading {
    flex: 1;
    min-width: 0;
}

#softAlert .modal-header .modal-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #1B153B;
    overflow-wrap: anywhere;
}

#softAlert .soft-alert-subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #78829D;
}

/* Medalhão do ícone — fundo/cor por tipo em .soft-alert-icon-badge--*, abaixo. Neutro (cinza)
   por padrão para o escape hatch open() sem type — confirm()/alert() sempre passam um tipo. */
#softAlert .soft-alert-icon-badge {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1F1F4;
    color: #78829D;
}

/* line-height: o Metronic (components-md) força 14px em todo [class*=fa-], menor que o glifo — o
   ícone sairia descentrado no círculo. */
#softAlert .soft-alert-icon {
    font-size: 17px;
    line-height: 1;
}

/* A divisória entre corpo e rodapé mora no corpo, e não no border-top do rodapé: o
   plugins-md.min.css do _Layout tem .modal .modal-footer { border: 0 !important }, que venceria
   qualquer borda declarada ali. Com o corpo vazio oculto pelo soft-alert.js, sobra só a do header. */
#softAlert .modal-body {
    padding: 16px;
    border-bottom: 1px solid #F1F1F4;
}

/* O empilhamento vive aqui, e não no .modal-body: o conteúdo é injetado dentro de #softAlertBody,
   que é o único filho direto do .modal-body — um gap lá não separaria nada. As primitivas do
   corpo têm margin:0 (o espaçamento é responsabilidade do container), então sem este gap os
   blocos saem colados. */
#softAlert #softAlertBody {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-wrap: anywhere; /* URL/GUID de mensagem de exceção do servidor não vaza da casca */
}

/* Botões nas extremidades: secundário à esquerda, principal à direita (o spacer empurra; com o
   Cancelar oculto, o botão único fica à direita). border-top, nowrap e a margem zerada dos filhos
   neutralizam o .modal-footer do Bootstrap 5 nas telas de login/SSO (a divisória é a do corpo). */
#softAlert .modal-footer {
    padding: 16px;
    border-top: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    text-align: left;
}

#softAlert .modal-footer > * {
    margin: 0;
}

#softAlert .soft-alert-spacer {
    flex: 1;
}

/* Botões do componente — classes próprias, sem .btn do Bootstrap (evita a briga de box-model
   entre o padding/line-height/border-radius default do Bootstrap e as medidas do design system).
   A casca é a mesma para todos; o modificador só troca fundo e cor do texto. */
#softAlert .soft-alert-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 5px;
    border: .5px solid rgba(44, 62, 80, .33);
    box-shadow: 1px 1px 1.5px rgba(51, 51, 51, .15);
    background: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.48px;
    text-transform: uppercase;
    color: #2C3E50;
    cursor: pointer;
    transition: background-color .2s ease, filter .2s ease;
}

#softAlert .soft-alert-btn:focus-visible {
    outline: 2px solid #337AB7;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    #softAlert .soft-alert-btn {
        transition: none;
    }
}

/* Secundário (Cancelar) — casca branca, texto #2C3E50. */
#softAlert .soft-alert-btn--quiet:hover {
    background: #F1F1F4;
}

/* Ação secundária destrutiva — mesma casca branca, texto no vermelho de erro. Não fica sólida:
   vermelho + azul sólidos lado a lado convidam ao clique errado. */
#softAlert .soft-alert-btn--ghost-danger {
    color: #E7505A;
}

#softAlert .soft-alert-btn--ghost-danger:hover {
    background: #FEE;
}

#softAlert .soft-alert-btn--primary {
    background: #337AB7;
    color: #fff;
}

#softAlert .soft-alert-btn--danger {
    background: #E7505A;
    color: #fff;
}

#softAlert .soft-alert-btn--primary:hover,
#softAlert .soft-alert-btn--danger:hover {
    filter: brightness(.92);
}

/* Botão desabilitado (open({ confirmDisabled })) — mesmo valor do .btn[disabled] do Bootstrap 3.3.7,
   sem o realce de hover. */
#softAlert .soft-alert-btn:disabled,
#softAlert .soft-alert-btn[disabled] {
    opacity: .65;
    cursor: not-allowed;
    box-shadow: none;
}

#softAlert .soft-alert-btn:disabled:hover,
#softAlert .soft-alert-btn[disabled]:hover {
    filter: none;
}

/* Entrada "pop" do centro — sobrepõe o slide-de-cima do Bootstrap 3. O estado aberto leva
   .fade.in (e não só .in) para vencer o do estado fechado por especificidade, não por ordem no
   arquivo. Desligada em prefers-reduced-motion (abaixo). */
#softAlert.fade .modal-dialog {
    -webkit-transform: scale(.94) translateY(6px);
    transform: scale(.94) translateY(6px);
    opacity: 0;
    transition: transform .26s cubic-bezier(.34, 1.3, .64, 1), opacity .2s ease-out;
}

#softAlert.fade.in .modal-dialog {
    -webkit-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    #softAlert.fade .modal-dialog,
    #softAlert.fade.in .modal-dialog {
        transition: none;
        transform: none;
    }
}

/* Backdrop próprio — .modal-backdrop não é descendente do modal (o Bootstrap 3 o anexa como
   irmão, direto no body), então não há como escopar por #softAlert .modal-backdrop. Mesmo
   precedente de body.novo-quesito-modal-open (Content/pages/css/checklist-esg/visualizar.css) —
   a classe é alternada no <body> pelo próprio soft-alert.js (show.bs.modal/hidden.bs.modal).
   Nas telas com _Layout esta cor não vale: o components-md.min.css força
   .modal-backdrop { background-color: #333 !important } — só login/SSO a exibem. */
body.soft-alert-open .modal-backdrop {
    background-color: rgba(47, 41, 81, .34);
}

/* Telas de entrada com Layout = null (login, SSO) carregam o CSS do Bootstrap 5, que só mostra .fade
   com .show, enquanto o JS do Bootstrap 3 que pilota este modal marca o estado aberto com .in. Sem
   estas regras, o #softAlert e o backdrop abrem com opacidade 0. Os valores são os que as telas com
   _Layout já exibem (Bootstrap 3 + plugins-md.min.css), então nada muda nelas. */
#softAlert.fade.in {
    opacity: 1;
}

body.soft-alert-open .modal-backdrop.fade.in {
    opacity: .2;
}

/* ─── PRIMITIVAS DE CORPO (SoftAlert.confirm monta este markup — o caller só passa texto) ─── */

.soft-alert-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #4B5675;
}

/* Modificador opt-in para corpo de orientação em parágrafos longos (ex.: orientação de upload) —
   o .soft-alert-text padrão segue alinhado à esquerda. */
.soft-alert-text--justify {
    text-align: justify;
}

.soft-alert-subject {
    padding: 8px 12px;
    background: #F9F9FB;
    border: 1px solid #F1F1F4;
    border-radius: 5px;
}

.soft-alert-subject-name {
    display: block;
    max-width: 100%;
    font-weight: 600;
    font-size: 13px;
    color: #1B153B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-alert-transition {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soft-alert-arrow {
    color: #78829D;
    font-size: 13px;
}

.soft-alert-status {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.soft-alert-status::before {
    content: "";
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: currentColor;
}

.soft-alert-status.is-on {
    background: rgba(38, 194, 129, .10);
    color: #1c8c4d;
}

.soft-alert-status.is-off {
    background: rgba(231, 80, 90, .10);
    color: #c23b45;
}

.soft-alert-effect {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #78829D;
}

/* Faixa de consequência — tint + borda esquerda de 2.5px na cor do tipo (currentColor, salvo onde
   o tipo declara border-left-color próprio, abaixo). */
/* Ícone e texto alinhados pela linha de base, e não por align-items:center: o center posiciona
   caixas de alturas diferentes (14px x 16.8px) em frações de pixel distintas, e a 100% de escala
   o navegador arredonda uma para cima e a outra para baixo — o ícone "pula" 1px conforme a posição
   do diálogo na tela. Com a mesma linha de base o arredondamento é um só. Numa nota de duas
   linhas, o ícone acompanha a primeira. */
.soft-alert-note {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px;
    border-left: 2.5px solid currentColor;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

/* Prefixo de id: sem ele o line-height:14px do Metronic ([class*=" fa-"]:not(.fa-stack)) vence.
   Na linha de base, o círculo do glifo (14px) fica centrado 5,25px acima dela; o centro das
   maiúsculas do texto (12px) está a 4,28px. top:1px leva o ícone a esse centro — inteiro de
   propósito, para não reintroduzir o arredondamento de meio pixel. */
#softAlert .soft-alert-note i {
    position: relative;
    top: 1px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

/* Lista no corpo montado pelo caller (open/alert com bodyHtml) — mesma tipografia do texto. */
.soft-alert-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #4B5675;
}

/* ─── CORES POR TIPO (design system › Pop-ups) ────────────────────────────────────────────────
   Medalhão: alerta é o glifo pêssego #F8BB86 em círculo pêssego claro; confirmação mantém o azul
   da plataforma (#0B5394); sucesso verde
   sólido e erro vermelho sólido, com ícone branco; exclusão é a lixeira #F8282B em círculo #FEE;
   informação mantém o azul da plataforma (o DS não tem pop-up de informação). Os modificadores levam o prefixo de id
   igual à regra base: sem ele a base (id + classe) vence o modificador (só classe) e todo
   medalhão sai no cinza neutro. */
#softAlert .soft-alert-icon-badge--confirm { background: rgba(11, 83, 148, .10); color: #0B5394; }
#softAlert .soft-alert-icon-badge--warning { background: #FEF1E7; color: #F8BB86; }
#softAlert .soft-alert-icon-badge--success { background: #26C281; color: #fff; }
#softAlert .soft-alert-icon-badge--error   { background: #E7505A; color: #fff; }
#softAlert .soft-alert-icon-badge--danger  { background: #FEE;    color: #F8282B; }
#softAlert .soft-alert-icon-badge--info    { background: rgba(53, 152, 220, .10); color: #8BB4E7; }

#softAlert .soft-alert-note--confirm { background: rgba(11, 83, 148, .10); color: #0B5394; }

/* Atenção — consequência que NÃO é irreversível: soft delete, desvincular, remover acesso
   (confirm({ type: 'danger', noteType: 'warning' })), além das notas de type 'warning'. */
#softAlert .soft-alert-note--warning { background: rgba(199, 127, 26, .10); color: #C77F1A; }
#softAlert .soft-alert-note--success { background: rgba(38, 194, 129, .08);  color: #1c8c4d; }
/* #E7505A como texto sobre o tint dá 3,34:1; #C23B45 dá 4,75:1. */
#softAlert .soft-alert-note--error,
#softAlert .soft-alert-note--danger {
    background: rgba(231, 80, 90, .08);
    border-left-color: #E7505A;
    color: #C23B45;
}
#softAlert .soft-alert-note--info    { background: rgba(53, 152, 220, .10);  color: #2F7DB8; }