body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    color:#1f2937;
}

.topo{
    background:#1f3c88;
    color:white;
    padding:25px;
    text-align:center;
}

.topo h1{
    margin:0;
    font-size:34px;
}

.topo p{
    margin:8px 0 0;
    color:#dfe8ff;
}

.conteudo{
    max-width:1100px;
    margin:auto;
    padding:25px;
}
/* ============================
   FORMULÁRIOS
============================ */

form{

    margin-top:20px;

}

label{

    display:block;

    font-weight:bold;

    margin-top:18px;

    margin-bottom:6px;

}

input,
select{

    width:100%;

    padding:12px;

    font-size:16px;

    border:1px solid #d8d8d8;

    border-radius:8px;

    box-sizing:border-box;

}

input:focus,
select:focus{

    outline:none;

    border:1px solid #1f3c88;

    box-shadow:0 0 8px rgba(31,60,136,.25);

}

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

.btn{

    display:inline-block;

    padding:12px 20px;

    margin-top:20px;

    margin-right:10px;

    border:none;

    border-radius:8px;

    text-decoration:none;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    color:white;

}

.btn-success{

    background:#43a047;

}

.btn-success:hover{

    background:#388e3c;

}

.btn-primary{

    background:#1f3c88;

}

.btn-primary:hover{

    background:#16306f;

}
.grid-dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:15px;
}

.card{
    background:white;
    border-radius:14px;
    padding:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.12);
}

.card-numero{
    font-size:34px;
    font-weight:bold;
    color:#1f3c88;
}

.acoes{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:15px;
    margin-top:20px;
}

.acao{
    display:block;
    text-decoration:none;
    color:#1f2937;
    background:white;
    border-radius:14px;
    padding:22px;
    box-shadow:0 3px 10px rgba(0,0,0,.12);
    border-left:6px solid #ff9800;
}

.acao strong{
    font-size:20px;
}

.acao p{
    margin:8px 0 0;
    color:#6b7280;
}

@media(max-width:600px){
    .topo h1{font-size:28px;}
    .conteudo{padding:15px;}
}
/* ============================
   TABELAS
============================ */

table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
    background:white;
}

th{
    background:#1f3c88;
    color:white;
    padding:14px;
    text-align:left;
}

td{
    padding:12px;
    border-bottom:1px solid #e5e7eb;
}

tr:hover{
    background:#f8fafc;
}
.btn-danger{

    background:#d32f2f;

}

.btn-danger:hover{

    background:#b71c1c;

}
/* ============================
   LAYOUT 2.0
============================ */

.layout{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:240px;
    background:#1f3c88;
    color:white;
    padding:25px 18px;
    box-sizing:border-box;
}

.sidebar h1{
    margin:0;
    font-size:28px;
}

.sidebar p{
    margin:4px 0 25px;
    color:#dfe8ff;
}

.sidebar nav a{
    display:block;
    color:white;
    text-decoration:none;
    padding:14px;
    margin-bottom:8px;
    border-radius:8px;
    font-weight:bold;
}

.sidebar nav a:hover{
    background:#ff9800;
}

.main{
    flex:1;
}

.topbar{
    background:white;
    padding:18px 30px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    display:flex;
    justify-content:space-between;
}

.topbar span{
    color:#6b7280;
}

@media(max-width:800px){
    .layout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
    }

    .sidebar nav a{
        display:inline-block;
        margin-right:5px;
    }

    .topbar{
        display:block;
    }
}
/* IDENTIDADE VISUAL - v1.0 DEMO */

.marca{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-bottom:35px;
}

.marca-icone{
    font-size:34px;
}

.marca h1{
    font-size:22px;
    margin:0;
    line-height:1.1;
}

.marca p{
    font-size:12px;
    margin:6px 0;
    color:#dbeafe;
}

.marca span{
    display:inline-block;
    background:#2EAF4A;
    color:white;
    padding:4px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:bold;
}

.sidebar nav a{
    font-size:15px;
}

.topbar strong{
    font-size:18px;
}

.topbar span{
    font-size:14px;
}

/* DASHBOARD DE GESTÃO */

.page-header {
    margin-bottom: 22px;
}

.page-header h2 {
    margin: 0;
    color: #143a73;
    font-size: 30px;
}

.page-header p {
    margin-top: 6px;
    color: #6b7280;
}

.stat-card {
    min-height: 120px;
}

.stat-card p {
    margin-top: 0;
    color: #6b7280;
    font-weight: bold;
}

.card-numero.menor {
    font-size: 28px;
}

.dashboard-detalhes {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    );
    gap: 20px;
    margin: 20px 0 30px;
}

.dashboard-detalhes .card {
    margin: 0;
}


/* RELATÓRIOS DE GESTÃO */

.filtros-relatorio {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(190px, 1fr)
        );
    gap: 18px;
    align-items: end;
}

.filtros-relatorio > div {
    min-width: 0;
}

.filtros-relatorio input,
.filtros-relatorio select {
    width: 100%;
    box-sizing: border-box;
}

.acoes-filtro {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.relatorios-grid {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );
    gap: 20px;
    margin: 20px 0;
}

.relatorios-grid .card {
    margin: 0;
}

@media(max-width: 800px) {

    .filtros-relatorio {
        grid-template-columns: 1fr;
    }

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

}


/* ASSISTENTE DE INSTALAÇÃO */

.instalacao-container {
    max-width: 1100px;
    margin: 0 auto;
}

.instalacao-cabecalho {
    text-align: center;
    margin-bottom: 30px;
}

.instalacao-icone {
    font-size: 58px;
}

.instalacao-cabecalho h1 {
    color: #143a73;
    margin-bottom: 8px;
}

.instalacao-cabecalho p {
    color: #6b7280;
}

.instalacao-passos {
    display: grid;
    gap: 18px;
}

.instalacao-passo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.passo-status {
    font-size: 35px;
    min-width: 45px;
    text-align: center;
}

.passo-conteudo {
    flex: 1;
}

.passo-conteudo h3 {
    margin-top: 0;
    color: #143a73;
}

.instalacao-finalizar {
    text-align: center;
    margin-top: 30px;
    padding: 30px;
}

.instalacao-finalizar button {
    font-size: 17px;
    padding: 15px 25px;
}

.instalacao-finalizar button:disabled {
    opacity: .45;
    cursor: not-allowed;
}

@media(max-width: 700px) {

    .instalacao-passo {
        align-items: flex-start;
    }

    .passo-status {
        font-size: 28px;
    }

}