/* ===================================
VISUALIZADOR XML
DINAMICA TECNOLOGIA
=================================== */

.xml-page{

    min-height:100vh;

    background:#002B80;

    padding:30px 0;

}

.xml-container{

    width:98%;

    max-width:1900px;

    margin:auto;

}

/* ======================
UPLOAD
====================== */

.xml-upload-card{

    background:#0d2748;

    border-radius:20px;

    padding:40px;

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

}

.xml-upload-header{

    text-align:center;

    margin-bottom:30px;

}

.xml-upload-header i{

    font-size:70px;

    color:#ffd700;

    margin-bottom:15px;

}

.xml-upload-header h1{

    color:#fff;

    font-size:32px;

    font-weight:700;

    margin-bottom:10px;

}

.xml-upload-header p{

    color:#b7c9df;

    font-size:15px;

}

/* ======================
AREA UPLOAD
====================== */

.xml-upload-area{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:260px;

    border:3px dashed #1f6feb;

    border-radius:20px;

    cursor:pointer;

    transition:.3s;

}

.xml-upload-area:hover{

    background:#12345e;

}

.xml-upload-area i{

    font-size:70px;

    color:#1f6feb;

    margin-bottom:20px;

}

.xml-upload-area h3{

    color:white;

    margin-bottom:10px;

}

.xml-upload-area span{

    color:#b7c9df;

}

.xml-upload-area input{

    display:none;

}

/* ======================
XML SELECIONADO
====================== */

.xml-arquivo-selecionado{

    text-align:center;

    margin-top:15px;

    color:#b7c9df;

    font-size:15px;

}

/* ======================
BOTAO
====================== */

.xml-btn-processar{

    width:100%;

    border:none;

    border-radius:12px;

    margin-top:20px;

    padding:15px;

    background:#1f6feb;

    color:white;

    font-size:16px;

    transition:.3s;

    opacity:.5;

    cursor:not-allowed;

}

.xml-btn-processar.ativo{

    background:#16a34a;

    opacity:1;

    cursor:pointer;

}

.xml-btn-processar.ativo:hover{

    background:#22c55e;

}

/* ======================
RESULTADO
====================== */

#resultado{

    display:none;

}

/* ======================
TOOLBAR
====================== */

.xml-toolbar{

    display:flex;

    justify-content:flex-end;

    margin-bottom:20px;

}

.xml-btn-nova{

    border:none;

    background:#16a34a;

    color:white;

    border-radius:10px;

    padding:12px 20px;

    cursor:pointer;

    font-weight:600;

}

.xml-btn-nova:hover{

    background:#22c55e;

}

/* ======================
CARD PADRAO
====================== */

.xml-card{

    background:#0d2748;

    border-radius:20px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:
    0 8px 20px rgba(0,0,0,.25);

}

.xml-card-title{

    color:white;

    font-size:20px;

    font-weight:700;

    margin-bottom:20px;

    display:flex;

    align-items:center;

    gap:10px;

}

.xml-card-title i{

    color:#ffd700;

}

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

.xml-grid-nota{

    display:grid;

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

    gap:15px;

}

.xml-campo{

    background:#12345e;

    padding:15px;

    border-radius:10px;

}

.xml-campo label{

    display:block;

    color:#b7c9df;

    font-size:12px;

    margin-bottom:5px;

}

.xml-campo span{

    color:white;

    font-weight:600;

}

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

.xml-cards-resumo{

    display:grid;

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

    gap:20px;

    margin-bottom:20px;

}

.xml-resumo-card{

    background:
    linear-gradient(
    135deg,
    #123b70,
    #0d2748
    );

    border-radius:15px;

    padding:20px;

}

.xml-resumo-card span{

    color:#dbe8f5;

    font-size:13px;

}

.xml-resumo-card h2{

    color:#ffd700;

    margin-top:10px;

    font-size:28px;

}

/* ======================
COLUNAS
====================== */

.xml-duas-colunas{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:20px;

}

.info-item{

    margin-bottom:10px;

}

.info-item label{

    color:#9fb4d1;

    font-size:13px;

    display:block;

}

.info-item span{

    color:white;

    font-weight:600;

}

/* ======================
TABELA
====================== */

.xml-table-wrapper{

    overflow:auto;

}

#tblProdutos{

    width:100%;

    min-width:1800px;

    border-collapse:collapse;

}

#tblProdutos thead tr{

    background:#184a88;

}

#tblProdutos th{

    color:white;

    padding:12px;

    white-space:nowrap;

    font-size:13px;

}

#tblProdutos td{

    padding:10px;

    color:white;

    border-bottom:
    1px solid #20497a;

    white-space:nowrap;

    font-size:13px;

}

#tblProdutos tbody tr:hover{

    background:
    rgba(255,255,255,.05);

}

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

.xml-table-wrapper::-webkit-scrollbar{

    height:10px;

}

.xml-table-wrapper::-webkit-scrollbar-thumb{

    background:#1f6feb;

    border-radius:10px;

}

.xml-upload-area.xml-selecionado{

    border-color:#22c55e;

    background:rgba(34,197,94,.08);

}

.xml-upload-area.xml-selecionado i{

    color:#22c55e;

}

/* ======================
FOOTER ESPAÇO
====================== */

.footer{

    margin-top:0;

}

/* ======================
RESPONSIVO
====================== */

@media(max-width:1400px){

    .xml-cards-resumo{

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

    }

}

@media(max-width:900px){

    .xml-grid-nota{

        grid-template-columns:1fr;

    }

    .xml-duas-colunas{

        grid-template-columns:1fr;

    }

    .xml-cards-resumo{

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

    }

}

@media(max-width:600px){

    .xml-cards-resumo{

        grid-template-columns:1fr;

    }

}