/* ==========================================================================
   SaaS FatoSeguro - Central Unificada de Modais (fs-modals.css)
   Dependência: fs-core-ui.css
   Version: 2.1.0 - Correção de Hierarquia Z-Index para Ampliador de Provas
   ========================================================================== */

/* ==========================================================================
   1. BASE E OVERLAY UNIFICADO (TRAVA DE INVISIBILIDADE POR PADRÃO)
   ========================================================================== */

.fs-modal-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 99990 !important; /* Ajustado de 999999 para 99990 para permitir visualizadores de imagens por cima */
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
}

/* 🟢 CAMADA SUPERIOR: Lightbox e Visualizadores de Provas/Imagens */
.fs-image-lightbox-overlay,
.fs-proof-modal-preview,
.fs-lightbox-overlay,
.elementor-lightbox,
.fancybox-container {
    z-index: 999999 !important; /* Fica estritamente acima do modal de tratamento */
}

/* Estado Ativo: Exibe o modal e libera os cliques */
.fs-modal-overlay.fs-modal-active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==========================================================================
   2. CONTAINERS DE CONTEÚDO (BOXES DE MODAL)
   ========================================================================== */

/* Box 1: Modal Pequeno / Médio (CRUD, Alteração de Senha) */
.fs-modal-crud-box {
    background: var(--fs-bg-surface, #ffffff);
    border-radius: var(--fs-radius-lg, 12px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 520px;
    padding: 28px;
    box-sizing: border-box;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    border: 1px solid var(--fs-border-light, #e4e4e7);
}

.fs-modal-lg {
    max-width: 680px !important;
}

/* Box 2: Modal Grande / Esteira Operacional de Triagem & Dossiê */
.fs-modal-box { 
    background: var(--fs-bg-surface); 
    width: 100%; 
    max-width: 50rem; 
    height: 90vh; 
    max-height: 90vh; 
    border-radius: var(--fs-radius-lg); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); 
    display: flex; 
    flex-direction: column; 
    transform: scale(0.95); 
    transition: all 0.3s cubic-bezier(0.3, 0, 0.2, 1); 
    font-family: var(--fs-font-family); 
    overflow: hidden; 
}

.fs-modal-box.fs-modal-split-active { max-width: 75rem; }
.fs-modal-box-sm { max-width: 40.625rem; height: auto; max-height: 85vh; }
.fs-modal-overlay.fs-modal-active .fs-modal-box { transform: scale(1); }

/* ==========================================================================
   3. CABEÇALHOS, TÍTULOS E BOTÃO FECHAR
   ========================================================================== */

.fs-modal-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1.25rem 1.5rem; 
    border-bottom: 1px solid var(--fs-zinc-50); 
    flex-shrink: 0; 
	filter: drop-shadow(0 1px 1px rgba(0 0 0 / 0.01));
}

.fs-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fs-zinc-900) !important ;
    margin: 0;
}

.fs-modal-subtitle {
    font-size: 0.875rem;
    color: var(--fs-zinc-500);
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.fs-modal-close-btn {
    background: transparent !important;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--fs-zinc-500) !important;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--fs-radius-sm);
    transition: color 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fs-modal-close-btn:hover {
    color: var(--fs-zinc-800)  !important;
    background-color: var(--fs-zinc-300);
}

.fs-modal-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ==========================================================================
   4. ESTRUTURA INTERNA & WRAPPERS (NORMAL & SPLIT)
   ========================================================================== */

.fs-modal-wrapper-normal { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
.fs-modal-wrapper-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; overflow: hidden; min-height: 0; }

.fs-modal-body { padding: 1.5rem; overflow-y: auto; background: var(--fs-zinc-50); flex: 1; min-height: 0; }
.fs-modal-body-white { background: #ffffff; }
.fs-modal-wrapper-split .fs-modal-body { overflow-y: auto; border-right: 1px solid var(--fs-zinc-200); height: 100%; padding: 1.5rem; background: var(--fs-zinc-50); }
.fs-modal-sidebar { padding: 1.5rem; overflow-y: auto; background: #ffffff; height: 100%; display: none; }
.fs-modal-footer-actions { padding: 1rem 1.5rem; border-top: 1px solid var(--fs-zinc-200); display: none; justify-content: flex-end; background: var(--fs-bg-surface); flex-shrink: 0; }

/* ==========================================================================
   5. SEÇÕES, CARDS DE COMPLIANCE & CAMPOS READ-ONLY
   ========================================================================== */

.fs-modal-section { background: var(--fs-bg-surface); padding: 1.125rem; border-radius: var(--fs-radius-md); border: 1px solid var(--fs-zinc-200); margin-bottom: 1rem; }
.fs-modal-section-title { margin: 1.5rem 0 0.75rem 0; font-size: 0.875rem; font-weight: 700; color: var(--fs-zinc-500); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--fs-zinc-200); padding-bottom: 0.5rem; }
.fs-modal-section-highlight { border-left: 0.25rem solid var(--fs-zinc-500); }
.fs-modal-section-light { background: var(--fs-zinc-50); }

.fs-modal-label { font-size: var(--fs-text-sm); color: var(--fs-zinc-500); font-weight: 600; margin-bottom: 0.375rem; display: block; }
.fs-modal-text { font-size: 0.9375rem; color: var(--fs-zinc-800); line-height: 1.6; margin: 0; }
.fs-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

.fs-read-only-box {
    background: var(--fs-zinc-50);
    border: 1px solid var(--fs-zinc-200);
    padding: 10px 14px;
    border-radius: var(--fs-radius-md);
    font-size: 0.875rem;
    color: var(--fs-zinc-800);
    font-weight: 500;
    min-height: 42px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.fs-input-disabled {
    background-color: var(--fs-zinc-100) !important;
    color: var(--fs-zinc-500) !important;
    cursor: not-allowed !important;
    border-color: var(--fs-zinc-200) !important;
}

.fs-text-pre-wrap { white-space: pre-wrap; }
.fs-text-capitalize { text-transform: capitalize; }
.fs-text-strong { color: var(--fs-zinc-900); font-weight: 600; }
.fs-text-empty { color: var(--fs-zinc-500); font-style: italic; font-size: 0.875rem; }

/* Cards de Envolvidos / Pessoas */
.fs-modal-card-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.fs-modal-card-item { padding: 0.75rem; background: var(--fs-zinc-50); border: 1px solid var(--fs-zinc-200); border-radius: var(--fs-radius-sm); }
.fs-modal-card-title { color: var(--fs-zinc-900); font-size: 0.9375rem; font-weight: 600; display: block; }
.fs-modal-card-subtitle { color: var(--fs-zinc-500); font-size: 0.8125rem; margin-top: 0.25rem; display: block; }

.fs-modal-attachment { border-left: 0.25rem solid var(--fs-accent); }
.fs-modal-btn-link {
    display: inline-block; margin-right: 0.625rem; margin-top: 0.3125rem; background: var(--fs-bg-body); padding: 0.375rem 0.75rem; border-radius: var(--fs-radius-sm); text-decoration: none; font-size: 0.8125rem; color: var(--fs-accent); font-weight: 600; transition: background 0.2s ease;
}
.fs-modal-btn-link:hover { background: var(--fs-zinc-200); }

/* ==========================================================================
   6. DOSSIÊ OPERACIONAL & FORMULÁRIOS DE TRIAGEM
   ========================================================================== */

.fs-dossie-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: var(--fs-radius-md); padding: 1rem; margin-bottom: 1rem; }
.fs-dossie-header { font-size: 0.875rem; font-weight: 700; color: #0f172a; border-bottom: 1px solid #cbd5e1; padding-bottom: 0.5rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.fs-dossie-item { font-size: 0.8125rem; margin-bottom: 0.5rem; color: #334155; }
.fs-dossie-item strong { color: #0f172a; }
.fs-dossie-parecer { background: #ffffff; border-left: 4px solid #086C74; padding: 0.75rem; border-radius: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: #1e293b; margin-top: 0.5rem; white-space: pre-wrap; }
.fs-dossie-badge-concluido { font-size: 0.6875rem; background: #086C74; color: #ffffff; padding: 0.125rem 0.5rem; border-radius: 0.25rem; }
.fs-dossie-subhead { margin: 0.75rem 0 0.5rem 0; font-size: 0.75rem; font-weight: 700; color: #475569; text-transform: uppercase; }
.fs-dossie-meta-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed #cbd5e1; font-size: 0.6875rem; color: #64748b; }
.fs-text-teal-bold { color: #086C74; font-weight: 700; }

.fs-modal-loading { text-align: center; padding: 2.5rem; color: var(--fs-zinc-500); }
.fs-modal-error { color: #dc2626; padding: 1.25rem; }
.fs-triagem-relato-preview { background: var(--fs-zinc-50); padding: 0.875rem; border-radius: var(--fs-radius-md); border: 1px solid var(--fs-zinc-200); max-height: 11.25rem; overflow-y: auto; font-size: 0.875rem; color: var(--fs-zinc-800); margin-bottom: 1.25rem; white-space: pre-wrap; }
.fs-triagem-action-zone { font-family: var(--fs-font-family); }
.fs-triagem-select-full { width: 100%; padding: 0.75rem; font-size: 0.875rem; border-radius: var(--fs-radius-md); margin-bottom: 1.25rem; border: 1px solid var(--fs-zinc-200); }

.fs-triagem-form { font-family: var(--fs-font-family); }
.fs-triagem-form-title { margin: 0 0 1rem 0; color: var(--fs-zinc-900); font-size: 1rem; border-bottom: 1px solid var(--fs-zinc-200); padding-bottom: 0.5rem; }
.fs-question-group { margin-bottom: 0.875rem; }
.fs-question-title { margin: 0 0 0.375rem 0; font-size: 0.8125rem; font-weight: 600; color: var(--fs-zinc-800); }
.fs-radio-label { margin-right: 0.75rem; font-size: 0.8125rem; cursor: pointer; }
.fs-triagem-reco-box { display: none; padding: 0.75rem; border-radius: var(--fs-radius-md); margin-bottom: 1rem; font-size: 0.8125rem; line-height: 1.4; }

.fs-form-field-group { margin-bottom: 0.75rem; }
.fs-form-label-sm { font-size: 0.75rem; color: var(--fs-zinc-500); font-weight: 600; margin-bottom: 0.25rem; display: block; }
.fs-form-select-sm { width: 100%; padding: 0.5rem; border-radius: var(--fs-radius-md); border: 1px solid var(--fs-zinc-200); margin-bottom: 0.75rem; font-size: 0.8125rem; }
.fs-form-textarea-sm { width: 100%; height: 4.6875rem; padding: 0.5rem; border-radius: var(--fs-radius-md); border: 1px solid var(--fs-zinc-200); margin-bottom: 1rem; font-size: 0.8125rem; font-family: inherit; resize: none; }

/* Botões do Modal Operacional */
.fs-btn-tratar { background-color: var(--fs-zinc-700) !important; color: #ffffff !important; border: none !important; border-radius: var(--fs-radius-md) !important; padding: 0.5rem 1rem !important; font-size: 0.8125rem !important; font-weight: 600 !important; cursor: pointer !important; display: inline-flex !important; align-items: center !important; gap: 0.375rem !important; transition: opacity 0.2s ease !important; }
.fs-btn-tratar:hover { opacity: 0.85; }
.fs-btn-tratar:disabled { background-color: var(--fs-zinc-400) !important; cursor: not-allowed !important; opacity: 0.7 !important; }
.fs-btn-tratar-full { margin: 0; width: 100%; justify-content: center; padding: 0.75rem !important; }
.fs-btn-full { width: 100%; justify-content: center; }

/* Complementos e Anexos Adicionais */
.fs-modal-complement { 
    background: #eff6ff; 
    border: 1px solid #bfdbfe;
    border-left: 0.25rem solid #2563eb; 
    padding: 1.25rem; 
    border-radius: var(--fs-radius-md); 
    margin-bottom: 1rem; 
}

.fs-modal-complement-title { 
    color: #1d4ed8; 
    font-weight: 700; 
    font-size: 0.8125rem;
    display: block;
    margin-bottom: 0.5rem;
}

.fs-modal-complement-text { 
    color: #1e293b; 
    white-space: pre-wrap; 
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
}

.fs-modal-complement-attach-box { 
    margin-top: 1rem; 
    padding-top: 0.75rem; 
    border-top: 1px dashed #bfdbfe; 
}

.fs-modal-complement-attach-label { 
    color: #1e40af; 
    font-size: 0.75rem; 
    font-weight: 600; 
    display: block;
    margin-bottom: 0.375rem;
}

.fs-modal-btn-link-comp { 
    display: inline-block; 
    background: #dbeafe; 
    color: #1e40af; 
    padding: 0.375rem 0.75rem; 
    border-radius: var(--fs-radius-md); 
    text-decoration: none; 
    font-size: 0.75rem; 
    font-weight: 600; 
    margin-top: 0.375rem; 
    margin-right: 0.5rem;
    transition: background 0.2s ease;
}

.fs-modal-btn-link-comp:hover {
    background: #bfdbfe;
    color: #1e3a8a;
}

/* ==========================================================================
   7. COMPONENTES DE SEGURANÇA 2FA OTP & ALTERAÇÃO DE SENHA
   ========================================================================== */

.fs-otp-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}

.fs-pwd-otp-digit {
    width: 46px;
    height: 52px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    border: 2px solid var(--fs-zinc-300);
    border-radius: var(--fs-radius-md);
    background: var(--fs-bg-surface);
    color: var(--fs-zinc-900);
    transition: all 0.2s;
}

.fs-pwd-otp-digit:focus {
    border-color: var(--fs-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}

.fs-otp-divider {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fs-zinc-400);
}

.fs-password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.fs-password-input {
    padding-right: 42px !important;
}

.fs-password-toggle-btn {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fs-zinc-400);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--fs-radius-sm);
    transition: color 0.2s;
}

.fs-password-toggle-btn:hover {
    color: var(--fs-zinc-700);
}

.fs-password-rules {
    list-style: none;
    padding: 0;
    margin: 12px 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fs-req-item {
    font-size: 0.8125rem;
    color: var(--fs-zinc-400);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.fs-req-item::before {
    content: "•";
    font-size: 1.1rem;
}

.fs-req-item.valid {
    color: #16a34a;
    font-weight: 600;
}

.fs-req-item.valid::before {
    content: "✓";
}

/* ==========================================================================
   8. SELETOR DE TEMAS & CARDS DE PREVIEW DE BRAND
   ========================================================================== */

.fs-theme-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 8px;
}

.fs-theme-card {
    border: 2px solid var(--fs-zinc-200);
    border-radius: var(--fs-radius-md);
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    background: var(--fs-bg-surface);
}

.fs-theme-card:hover { border-color: var(--fs-zinc-400); }

.fs-theme-card.active {
    border-color: var(--fs-brand);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
    background: var(--fs-status-analise-bg);
}

.fs-theme-preview {
    height: 36px;
    border-radius: var(--fs-radius-sm);
    margin-bottom: 8px;
}

.fs-theme-preview-blue { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.fs-theme-preview-green { background: linear-gradient(135deg, #065f46, #10b981); }
.fs-theme-preview-dark { background: linear-gradient(135deg, #18181b, #3f3f46); }

.fs-theme-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fs-zinc-700);
}

.fs-logo-preview-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    background: var(--fs-zinc-50);
    border: 1px solid var(--fs-zinc-200);
    border-radius: var(--fs-radius-md);
}

.fs-logo-img {
    max-height: 48px;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   9. CLASSES AUXILIARES DE VISIBILIDADE
   ========================================================================== */

.fs-is-hidden { display: none !important; }
.fs-is-visible { display: block !important; }
.fs-is-flex { display: flex !important; }
.fs-badge-dinamico { display: inline-block; background: var(--fs-zinc-200); color: var(--fs-zinc-700); padding: 0.25rem 0.625rem; border-radius: var(--fs-radius-md); font-size: 0.75rem; font-weight: 600; margin: 0.125rem; }
.fs-repeater-box { background: rgba(0,0,0,0.02); padding: 0.625rem; border-radius: var(--fs-radius-md); margin-bottom: 0.5rem; border-left: 3px solid var(--fs-zinc-800); }

/* ==========================================================================
   10. SISTEMA DE NOTIFICAÇÕES TOAST (FLUTUANTES)
   ========================================================================== */
.fs-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.fs-toast {
    width: 320px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    border: 1px solid var(--fs-zinc-200, #e4e4e7);
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.fs-toast.fs-toast-show {
    transform: translateX(0);
    opacity: 1;
}

.fs-toast-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Variações de Cor (Sucesso e Erro) */
.fs-toast-success { border-left: 4px solid #10b981; }
.fs-toast-success .fs-toast-icon { color: #10b981; }

.fs-toast-error { border-left: 4px solid #ef4444; }
.fs-toast-error .fs-toast-icon { color: #ef4444; }

.fs-toast-content { flex: 1; }
.fs-toast-title { font-size: 0.875rem; font-weight: 600; color: var(--fs-zinc-900, #18181b); margin: 0 0 4px 0; }
.fs-toast-msg { font-size: 0.8125rem; color: var(--fs-zinc-500, #71717a); margin: 0; line-height: 1.4; }

.fs-toast-close {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    color: var(--fs-zinc-400, #a1a1aa);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}
.fs-toast-close:hover { color: var(--fs-zinc-800, #27272a); }