:root { 
    --primary: #2563eb; 
    --dark: #1e293b; 
    --light: #f8fafc; 
    --accent: #dc2626; 
    --gray: #cbd5e1;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body { 
    background: var(--light); 
    color: var(--dark); 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
}

/* Menu de Navegação */
.menu-principal { 
    background: var(--dark); 
    color: white; 
    display: flex; 
    justify-content: space-between; 
    padding: 1rem 5%; 
    align-items: center; 
}

.menu-principal ul { 
    display: flex; 
    list-style: none; 
    gap: 1.5rem; 
}

.menu-principal a { 
    color: white; 
    text-decoration: none; 
    font-weight: 500; 
}

.menu-principal a:hover { 
    text-decoration: underline; 
}

/* Layout Estrutural Fluido */
.layout-site { 
    display: grid; 
    grid-template-columns: 1fr 300px; 
    gap: 2rem; 
    padding: 2rem 5%; 
    flex: 1; 
}

@media (max-width: 768px) { 
    .layout-site { 
        grid-template-columns: 1fr; 
    } 
}

/* Painel Administrativo */
.admin-container { 
    padding: 2rem 5%; 
    flex: 1; 
}

.dashboard-cards { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 1.5rem; 
    margin-top: 2rem; 
}

.card { 
    background: white; 
    padding: 2rem; 
    border-radius: 8px; 
    text-align: center; 
    text-decoration: none; 
    color: var(--dark); 
    font-weight: bold; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    transition: transform 0.2s ease; 
}

.card:hover { 
    transform: translateY(-5px); 
}

/* Formulários */
form { 
    background: white; 
    padding: 2rem; 
    border-radius: 8px; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    max-width: 600px; 
}

input, textarea, select { 
    padding: 0.75rem; 
    border: 1px solid var(--gray); 
    border-radius: 4px; 
    font-size: 1rem; 
}

button { 
    background: var(--primary); 
    color: white; 
    padding: 0.75rem; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-weight: bold; 
}

button.btn-perigo { 
    background: var(--accent); 
}

/* Tabelas Administrativas Adaptáveis e Colapsáveis */
table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 1.5rem; 
    background: white; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

th, td { 
    padding: 1rem; 
    text-align: left; 
    border-bottom: 1px solid #f1f5f9; 
}

th { 
    background: var(--dark); 
    color: white; 
}

@media (max-width: 600px) {
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    thead tr { 
        position: absolute; 
        top: -9999px; 
        left: -9999px; 
    }
    tr { 
        border: 1px solid var(--gray); 
        margin-bottom: 1rem; 
        border-radius: 6px; 
        padding: 0.5rem; 
    }
    td { 
        border: none; 
        border-bottom: 1px solid #f1f5f9; 
        position: relative; 
        padding-left: 50%; 
        text-align: right; 
    }
    td:before { 
        content: attr(data-label); 
        position: absolute; 
        left: 1rem; 
        width: 45%; 
        text-align: left; 
        font-weight: bold; 
        color: #64748b;
    }
}