* { box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
body { background:#f7f8fb; margin:0; color:#222; }
.header { background:#2b7cff; color:#fff; padding:18px; text-align:center; }
.container { max-width:1100px; margin:20px auto; padding:16px; }
.card { background:#fff; padding:16px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.06); margin-bottom:18px; }
.grid { display:flex; gap:12px; flex-wrap:wrap; }
.btn { padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.btn-primary { background:#2b7cff; color:#fff; }
.btn-danger { background:#e63946; color:#fff; }
.btn-ghost { background:#f0f2f6; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:10px 8px; border-bottom:1px solid #eee; text-align:left; }
.form-row { display:flex; gap:12px; margin-bottom:10px; }
.form-row .col { flex:1; }
.input, select { width:100%; padding:8px; border:1px solid #dcdfe6; border-radius:6px; }
.small { font-size:13px; color:#666; }
.actions { display:flex; gap:8px; }
.search { display:flex; gap:8px; margin-bottom:12px; }
@media(max-width:800px){ .form-row{ flex-direction:column; } }
.btn-info {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.2s;
}
.btn-info:hover { background-color: #0056b3; }

tr.inactivo td {
  background-color: #ffe0e0;
}