:root{
    --bg: #0b1220;
    --panel: #0f1a2e;
    --panel2: #101f36;
    --text: #eaf0ff;
    --muted: #a7b4d6;
    --line: rgba(255, 255, 255, 0.1);
    --radius: 14px;
    
    --primary: #3b82f6;
    --primary2: #60a5fa;

    --ok: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --gray: #94a3b8;

}

*{box-sizing: border-box;}
html,body{height: 100%;}

body{
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--bg);
    background-image: radial-gradient(
        circle at top left,
        #0077cc 50%,
        #17279F 60%,
        #003366 70%
    );
    color: #ffffff
}

a{
    color: var(--primary2);
    text-decoration: none;
    margin-left: 46%;
    color: #ffffff
}
a:hover{
    text-decoration: underline;
  
}

.container{
max-width: 1100px;
margin:0 auto;
padding: 28px 18px 60px;

}

.topbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    
}



.btn{
    display: inline-block;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06)
}

btn.hover{
  background: rgba(255, 228, 228, 0.1);
  text-decoration: none;      
  
}

.btn-primary{
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(96,165,250,0.10));
    margin-left: 30%;
}

.panel{
    background:linear-gradient();
    border: 1px solid  var(--line);
    border-radius: var(--radius);
    padding: 14px
}

.grid{
    display:grid;
    grid-template-columns: 1fr;
    gap: 14px;

}

@media (min-width: 900px){
.grid{ grid-template-columns: 360px 1fr;}
}

.cards{
    display:grid;
    padding-top:12px;
    padding-right: 34px;
}
.card{
    border-radius: var(--radius);
    padding-top: 16px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04)
}

.badge{
    display: inline-block;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06)
}

.badge-pendente{
    border-color: rgba(245,158,11,0.35);
    background: rgba(245,158,11,0.12);
}
.badge-feita{
    border-color: rgba(34,197,94,0.35);
    background: rgba(34,197,94,0.35);
}
.badge-cancelada{
    border-color: rgba(239,68,68,0.35);
    background: rgba(239,68,68,0.35);
}

.note{
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius);
    padding: 12px;
}

details{
    border-top: 1px solid var(--line);
    margin-top: 12px;
    padding-top: 10px;
}

summary{
    cursor:pointer;
    font-weight: 700;
}

input,select,textarea{
border-radius: 12px;
background: rgb(255, 255, 255);
width: 50%;
border: 1px solid var(--line);
color: var(--text);
padding: 10px 12px;
outline: none;
color: #000000;
margin-left: 25%;
}
input:focus, select:focus, textarea:focus{
    border-color: rgba(96,165,250,0.45);
    color: #000000
};
alert{
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgb(255, 0, 0);
    background: rgba(255,255,255,.06);
    color: #000000;
    
}

.alert-error{
    border-color: rgb(255, 0, 0);
    background: rgba(239,68,68,12);
    width: 20%;
    margin-left: 30%;
    
}

.logo{
    width: 30%;
  
  
    display: block;
    margin: 0 auto 20px auto;
    
}

h1, h2{
    text-align: center;

}

button{
    margin-left: 45%;
}
label{
    margin-left: 45%;
}

.contato{
    margin-left: 45%;
}
.Resumo{
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}



.Mapeamento{
display: flex;
gap: 40px;
flex-wrap: wrap;

}
.linha{
    width: 1064px;
}