/* =====================================================
MODAIS
===================================================== */

.modal {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.65);

    justify-content: center;
    align-items: center;

    z-index: 9999;

    backdrop-filter: blur(3px);
}

.modal-conteudo {
    background:var(--bg-surface);

    width: 92%;
    max-width: 700px;

    max-height: 92vh;
    overflow-y: auto;

    border-radius: 18px;

    padding: 24px;

    box-shadow:
        0 15px 40px rgba(0,0,0,0.25);

    animation: aparecerModal 0.2s ease;
}

/* ===== ANIMAÇÃO ===== */

@keyframes aparecerModal {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =====================================================
BLOCOS MODAL
===================================================== */

.bloco {
    margin-bottom: 20px;
}

.bloco h3 {
    margin-bottom: 10px;
    color:var(--text-main);
}

/* =====================================================
INPUTS
===================================================== */

input,
textarea,
select {
    border: 1px solid #d1d5db;
    border-radius: 10px;

    padding: 10px;

    font-size: 14px;

    transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #2388ff;
    box-shadow: 0 0 0 3px rgba(35,136,255,0.15);
}

textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
}

/* =====================================================
GRID
===================================================== */

.grid-check {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.grid-check label {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =====================================================
LINHAS
===================================================== */

.linha {
    display: flex;
    gap: 10px;
}

.linha input {
    flex: 1;
}

/* =====================================================
AÇÕES MODAL
===================================================== */

.acoes {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
}

/* =====================================================
SCROLL
===================================================== */

.modal-conteudo::-webkit-scrollbar {
    width: 8px;
}

.modal-conteudo::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 10px;
}

/* =====================================================
RESPONSIVIDADE
===================================================== */

@media (max-width: 768px) {

    .linha {
        flex-direction: column;
    }

    .grid-check {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
MODAL IMAGEM
===================================================== */

.modal-img {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.88);

    justify-content: center;
    align-items: center;

    z-index: 99999;
}

.modal-img img {
    max-width: 92%;
    max-height: 92%;
    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

/* =====================================================
MODAL IMAGEM
===================================================== */

.modal-img {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.88);

    justify-content: center;
    align-items: center;

    z-index: 99999;
}

.modal-img img {
    max-width: 92%;
    max-height: 92%;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

/* =====================================================
MODAL COMPARAÇÃO
===================================================== */

#modalComparar {
    display: none;

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.92);

    justify-content: center;
    align-items: center;

    gap: 20px;

    z-index: 99999;

    padding: 20px;
}

#modalComparar img {
    max-width: 45%;
    max-height: 90%;

    border-radius: 12px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

/* =====================================================
MODAL ENTERPRISE SISGCOE
===================================================== */

.modal-enterprise{

    background:var(--bg-surface);

    width: 95%;

    max-width: 950px;

    max-height: 92vh;

    border-radius: 22px;

    padding: 0;

    overflow-y: auto;
    overflow-x: hidden;

    display:flex;
    flex-direction:column;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.30);

    animation: modalEnterprise .25s ease;
}

/* ===== ANIMAÇÃO ===== */

@keyframes modalEnterprise{

    from{
        opacity:0;
        transform:translateY(15px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* =====================================================
HEADER MODAL PREMIUM
===================================================== */

.header-modal-enterprise{

    background:
        linear-gradient(90deg,
        #102542 0%,
        #1b3b63 100%);

    padding:22px 30px;

    border-bottom:
        4px solid #2388ff;
}

/* ===== TÍTULO ===== */

.header-modal-enterprise h2{

    margin:0;

    color:white;

    font-size:30px;

    font-weight:800;

    letter-spacing:.5px;
}

/* ===== FORM ===== */

.modal-enterprise form{

    padding: 18px;
}

/* ===== BLOCOS ===== */

.modal-enterprise .bloco{

    background:var(--bg-surface);

    border-radius:14px;

    padding:14px;

    margin-bottom:14px;

    box-shadow:
        0 3px 8px rgba(0,0,0,0.05);

    border:
        1px solid rgba(0,0,0,0.05);
}

/* ===== TÍTULOS ===== */

.modal-enterprise .bloco h3{

    margin-top:0;

    margin-bottom:10px;

    color:var(--text-strong);

    font-size:16px;

    font-weight:700;

    border-left:4px solid #2388ff;

    padding-left:8px;
}

/* ===== INPUTS ===== */

.modal-enterprise input,
.modal-enterprise textarea,
.modal-enterprise select{

    background:var(--bg-surface-soft);

    border:1px solid var(--border-soft);

    border-radius:10px;

    padding:10px;

    font-size:13px;

    min-height:40px;
}

/* ===== FOCUS ===== */

.modal-enterprise input:focus,
.modal-enterprise textarea:focus,
.modal-enterprise select:focus{

    border-color:#2388ff;

    box-shadow:
        0 0 0 4px rgba(35,136,255,0.12);
}

/* ===== GRID ===== */

.modal-enterprise .grid-checkbox{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

/* ===== CHECKBOXES ===== */

.modal-enterprise .grid-checkbox label{

    background:var(--bg-surface-soft);

    border-radius:10px;

    padding:8px 10px;

    border:1px solid #e5e7eb;

    transition:.2s;

    font-size:13px;

    display:flex;

    align-items:center;

    gap:6px;
}

.modal-enterprise .grid-checkbox label:hover{

    background:#eef5ff;

    border-color:#2388ff;
}

/* ===== LINHAS ===== */

.modal-enterprise .linha{

    display:flex;

    gap:12px;

    align-items:center;
}

/* ===== MATERIAL ===== */

#btnAdicionarMaterial{

    background:#2388ff;

    color:white;

    border:none;

    width:42px;

    height:42px;

    border-radius:12px;

    cursor:pointer;

    font-size:22px;

    font-weight:bold;

    transition:.2s;
}

#btnAdicionarMaterial:hover{

    transform:scale(1.05);

    background:#1565d8;
}

/* ===== AÇÕES ===== */

.modal-enterprise .acoes{

    position:sticky;

    bottom:0;

    background:var(--bg-surface);

    padding-top:20px;

    margin-top:20px;

    border-top:
        1px solid #e5e7eb;
}

/* ===== BOTÕES ===== */

.modal-enterprise .acoes .btn{

    min-width:140px;

    height:45px;

    font-size:14px;

    font-weight:700;

    border-radius:12px;
}

/* ===== SCROLL ===== */

.modal-enterprise::-webkit-scrollbar{
    width:10px;
}

.modal-enterprise::-webkit-scrollbar-thumb{
    background:#cbd5e1;
    border-radius:999px;
}

/* =====================================================
UPLOAD PREMIUM FOTO DEPOIS
===================================================== */

.upload-premium{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:34px;

    padding:0 12px;

    border-radius:10px;

    background:
        linear-gradient(180deg,
        #2388ff 0%,
        #1565d8 100%);

    color:white;

    font-size:11px;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

    box-shadow:
        0 2px 5px rgba(0,0,0,0.10);
}

.upload-premium:hover{

    transform:translateY(-1px);

    opacity:.95;
}

.upload-premium input{
    display:none;
}

.nome-arquivo{

    font-size:10px;

    color:#374151;

    margin-left:6px;

    max-width:90px;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    display:inline-block;

    vertical-align:middle;
}

/* =====================================================
HEADER MODAL ENTERPRISE V2
===================================================== */

.header-modal-enterprise{

    display:flex;

    justify-content:space-between;

    align-items:center;
}

/* ===== SUBTÍTULO ===== */

.subtitulo-modal{

    color:#dbeafe;

    font-size:13px;

    margin-top:4px;

    letter-spacing:.3px;
}

/* =====================================================
RESUMO OS
===================================================== */

.resumo-os{

    display:grid;

    grid-template-columns:repeat(4, 1fr);

    gap:10px;

    padding:16px 18px;

    background:
        linear-gradient(180deg,
        #f8fafc 0%,
        #eef5ff 100%);

    border-bottom:
        1px solid #dbe2ea;
}

/* ===== CARD INFO ===== */

.info-os{

    background:var(--bg-surface);

    border-radius:14px;

    padding:14px;

    box-shadow:
        0 3px 8px rgba(0,0,0,0.05);

    border:
        1px solid rgba(0,0,0,0.05);
}

/* ===== LABEL ===== */

.label-info{

    display:block;

    font-size:11px;

    font-weight:700;

    color:var(--text-muted);

    text-transform:uppercase;

    margin-bottom:6px;

    letter-spacing:.5px;
}

/* ===== VALOR ===== */

.valor-info{

    font-size:15px;

    font-weight:700;

    color:var(--text-strong);
}

/* =====================================================
GRID OPERACIONAL
===================================================== */

.grid-operacional{

    display:grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap:18px;

    padding:0 24px;
}

/* ===== CARDS ===== */

.grid-operacional .bloco{

    margin-bottom:0;

    transition:.2s ease;
}

/* ===== HOVER ===== */

.grid-operacional .bloco:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 18px rgba(0,0,0,0.08);
}

/* =====================================================
CHECKBOX ENTERPRISE SAFE
===================================================== */

.modal-enterprise .grid-checkbox{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;
}

/* ESCONDE CHECKBOX */

.modal-enterprise .grid-checkbox input[type="checkbox"]{

    display:none;
}

/* LABEL */

.modal-enterprise .grid-checkbox label{

    display:flex;

    align-items:center;

    gap:10px;

    background:var(--bg-surface-soft);

    border:1px solid var(--border-soft);

    border-radius:12px;

    padding:12px;

    cursor:pointer;

    transition:.2s ease;

    position:relative;

    font-size:13px;

    font-weight:500;

    min-height:48px;
}

/* QUADRADO */

.modal-enterprise .grid-checkbox label::before{

    content:"";

    width:18px;

    height:18px;

    border-radius:6px;

    border:2px solid #cbd5e1;

    background:white;

    transition:.2s ease;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;
}

/* SELECIONADO */

.modal-enterprise .grid-checkbox input[type="checkbox"]:checked + label{

    background:transparent;

    border-color:#2388ff;

    color:inherit;

    box-shadow:none;
}

/* CHECK */

.modal-enterprise .grid-checkbox input[type="checkbox"]:checked + label::before{

    background:#2388ff;

    border-color:#2388ff;
}

/* ÍCONE ✓ */

.modal-enterprise .grid-checkbox input[type="checkbox"]:checked + label::after{

    content:"✓";

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:white;

    font-size:11px;

    font-weight:bold;

    line-height:1;
}

/* HOVER */

.modal-enterprise .grid-checkbox label:hover{

    transform:translateY(-1px);

    border-color:#2388ff;
}

/* =====================================================
TIMELINE OPERACIONAL
===================================================== */

.timeline-os{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    padding:18px 24px;

    background:var(--bg-surface);

    border-bottom:
        1px solid #e5e7eb;
}

/* ===== ETAPA ===== */

.etapa{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:700;
}

/* ===== CÍRCULO ===== */

.circulo{

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:13px;

    font-weight:bold;
}

/* ===== CONCLUÍDA ===== */

.etapa.concluida{

    color:#16a34a;
}

.etapa.concluida .circulo{

    background:#16a34a;

    color:white;
}

/* ===== ATIVA ===== */

.etapa.ativa{

    color:#2388ff;
}

.etapa.ativa .circulo{

    background:#2388ff;

    color:white;

    animation:pulseTimeline 1.5s infinite;
}

/* ===== LINHA ===== */

.linha-timeline{

    width:40px;

    height:3px;

    border-radius:999px;

    background:#cbd5e1;
}

/* ===== ANIMAÇÃO ===== */

@keyframes pulseTimeline{

    0%{
        box-shadow:0 0 0 0 rgba(35,136,255,0.5);
    }

    70%{
        box-shadow:0 0 0 10px rgba(35,136,255,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(35,136,255,0);
    }
}

/* =====================================================
PREVIEW UPLOAD PREMIUM
===================================================== */

.preview-upload{

    margin-top:10px;

    width:100%;

    display:none;

    animation:fadePreview .2s ease;
}

/* ===== IMAGEM ===== */

.preview-img{

    width:100%;

    max-width:180px;

    border-radius:14px;

    border:
        2px solid #dbe2ea;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.08);

    object-fit:cover;
}

/* ===== ANIMAÇÃO ===== */

@keyframes fadePreview{

    from{
        opacity:0;
        transform:translateY(4px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

.badge-evento{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border-radius:30px;

    font-weight:700;

    font-size:16px;

    margin-bottom:20px;

    width:fit-content;
}

/* ========================= */
/* ABERTURA */
/* ========================= */

.badge-evento.abertura{

    background:#d4edda;
    color:#155724;
    border:1px solid #28a745;
}

/* ========================= */
/* EXECUÇÃO */
/* ========================= */

.badge-evento.execucao{

    background:#dbeafe;
    color:#1d4ed8;
    border:1px solid #2563eb;
}

/* ========================= */
/* CONCLUSÃO */
/* ========================= */

.badge-evento.conclusao{

    background:#dcfce7;
    color:#166534;
    border:1px solid #16a34a;
}

/* ========================= */
/* REABERTURA */
/* ========================= */

.badge-evento.reabertura{

    background:#fee2e2;
    color:#991b1b;
    border:1px solid #dc2626;
}

/* ========================= */
/* EVENTO PADRÃO */
/* ========================= */

.badge-evento.evento{

    background:#f3f4f6;
    color:#374151;
    border:1px solid #9ca3af;
}

/* =====================================================
DARK MODE - MODAL FINALIZAÇÃO
===================================================== */

body.dark-mode .modal-conteudo{

    background:
        linear-gradient(180deg,
        #111827 0%,
        #0f172a 100%);

    color:#f8fafc;
}

body.dark-mode .modal-enterprise .bloco{

    background:#1e293b;

    border:1px solid #334155;
}

body.dark-mode .modal-enterprise .bloco h3{

    color:#f8fafc;
}

body.dark-mode .modal-enterprise textarea,
body.dark-mode .modal-enterprise input,
body.dark-mode .modal-enterprise select{

    background:#0f172a;

    border:1px solid #334155;

    color:#f8fafc;
}

body.dark-mode textarea::placeholder,
body.dark-mode input::placeholder{

    color:#94a3b8;
}

body.dark-mode .grid-checkbox label{

    background:transparent;

    border:1px solid #334155;

    color:#e5e7eb;
}

body.dark-mode .grid-checkbox input[type="checkbox"]{

    accent-color:#3b82f6;
}

body.dark-mode .grid-checkbox label:hover{

    border-color:#3b82f6;
}

body.dark-mode .modal-enterprise .acoes{

    background:#111827;

    border-top:1px solid #334155;
}