* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

body {
font-family: "Segoe UI", Arial, sans-serif;
background: #e9eff5;
color: #333;
}

/* Cabeçalho */

.topo {
background: #1f4e79;
color: #fff;
padding: 25px 10px;
text-align: center;
}

.topo h1 {
font-size: 22px;
font-weight: bold;
}

.topo h2 {
font-size: 15px;
font-weight: normal;
margin-top: 5px;
color: #dbe9f6;
}

/* Container */

.container {
width: 95%;
max-width: 1100px;
margin: 30px auto;
}

/* Informações do usuário */

.user-info {
background: #ffffff;
border-left: 6px solid #1f4e79;
padding: 12px;
margin-bottom: 25px;
font-size: 14px;
}

/* Painel */

.painel {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}

/* Caixa clicável */

.caixa {
background: #ffffff;
border: 1px solid #cbd6e2;
border-radius: 4px;
padding: 20px;
transition: 0.2s;
}

.caixa:hover {
background: #f1f7fd;
border-color: #1f4e79;
}

.caixa h3 {
color: #1f4e79;
margin-bottom: 10px;
font-size: 16px;
}

.caixa p {
font-size: 13px;
margin-bottom: 12px;
color: #555;
}

.caixa a {
display: inline-block;
margin: 4px 0;
padding: 6px 12px;
background: #1f4e79;
color: #fff;
text-decoration: none;
font-size: 13px;
border-radius: 3px;
}

.caixa a:hover {
background: #163a5a;
}

/* Rodapé */

.footer {
text-align: center;
font-size: 12px;
margin: 40px 0 15px;
color: #666;
}

/* ===== FORMULÁRIOS ===== */

.form-wrapper {
background: #ffffff;
padding: 30px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.form-wrapper h2 {
margin-bottom: 20px;
color: #1f4e79;
border-bottom: 2px solid #1f4e79;
padding-bottom: 8px;
}

/* Grid do formulário */

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

.form-grid label {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
display: block;
}

.form-grid input,
.form-grid textarea,
.form-grid select {
width: 100%;
padding: 8px;
border: 1px solid #cbd6e2;
border-radius: 4px;
font-size: 14px;
}

.form-grid textarea {
resize: vertical;
min-height: 70px;
}

/* Campos que ocupam linha inteira */

.full {
grid-column: 1 / -1;
}

/* Botões */

.form-actions {
margin-top: 25px;
display: flex;
gap: 15px;
flex-wrap: wrap;
}

.form-actions button {
padding: 10px 20px;
background: #1f4e79;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}

.form-actions button:hover {
background: #163a5a;
}

.form-actions a {
padding: 10px 20px;
background: #777;
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}

.form-actions a:hover {
background: #555;
}

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

@media (max-width: 900px){

.container{
width: 95%;
margin: 20px auto;
}

.topo h1{
font-size: 20px;
}

.topo h2{
font-size: 14px;
}

}

/* CELULAR */

@media (max-width: 600px){

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

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

.form-wrapper{
padding: 20px;
}

.caixa{
padding: 15px;
}

.form-actions{
flex-direction: column;
}

.form-actions button,
.form-actions a{
width: 100%;
text-align: center;
}

}